/* PLAYHEADS fidelity overrides — small UI fixes applied AFTER the original Paroro CSS bundle. */
/* Keep this file small and surgical. */

/* A11y fixes (Roger 2026-06-16):
   - .pr-card__price small was #888 on white = 3.5:1, fails WCAG AA (4.5:1)
   - .pr-pricing__head p was rgba(255,255,255,.85) — borderline on dark BG
   - .skip-link was invisible even on focus
   - dl.pr-location__hours had <div> wrappers (now fixed in body HTML directly) */
.pr-home .pr-card__price small { color: #595959 !important; }
.pr-home .pr-pricing__head p { color: rgba(255, 255, 255, 0.95) !important; }
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
  position: fixed !important;
  top: 8px !important;
  left: 8px !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  background: #D42B2B !important;
  color: #fff !important;
  padding: 12px 20px !important;
  z-index: 10000 !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

/* 0a) Prevent CLS=0.08 from Inter font-swap reflowing .pr-hero__sub.
   The fallback font (system Inter substitute) has slightly different metrics
   than Inter, so when the web font loads the paragraph reflows from 5 lines to 4.
   Reserve enough height so the swap doesn't change container size. */
.pr-home .pr-hero__sub {
  min-height: calc(1.6em * 5);
}
@media (min-width: 640px) {
  .pr-home .pr-hero__sub {
    min-height: calc(1.6em * 4);
  }
}

/* 0b) Static map placeholder — replaces Google Maps iframe.
   Original iframe pulled 400KB of Maps JS and caused TBT=4,620ms.
   Now: 10KB WebP image + click to open Google Maps app/page. TBT impact = 0. */
.pr-map-static-link,
.pc-map-static-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px;
  overflow: hidden;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  background: #e8eef2;
}
.pr-map-static-link img,
.pc-map-static-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.pr-map-static-link:hover img,
.pc-map-static-link:hover img {
  transform: scale(1.02);
}
.pr-map-static-overlay,
.pc-map-static-overlay {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #D42B2B;
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.pr-map-pin,
.pc-map-pin {
  font-size: 16px;
  line-height: 1;
}

/* 1) "Book a Table" header button must never wrap to multiple lines.
   At 390-1024px the original site lets the text wrap into "Book / a / Table" which looks squashed. */
.elementor-button .elementor-button-text {
  white-space: nowrap !important;
}
.elementor-button {
  white-space: nowrap !important;
}

/* 2) Logo cursor pointer (it's wrapped in <a> server-side, this just makes the entire image area clickable) */
a.paroro-logo-link {
  display: inline-block;
  text-decoration: none;
}
a.paroro-logo-link img {
  display: block;
}

/* 3) Tablet/desktop above 768px — give the original header "Book a Table" button
   a small min-width so its text doesn't wrap into a squashed 3-line block. */
@media (min-width: 769px) and (max-width: 1024px) {
  .elementor-button.elementor-button-link.elementor-size-sm {
    min-width: 120px;
    text-align: center;
  }
}

/* === Mobile hero — reduce the empty space above "MELBOURNE CBD" pill ===
   Original CSS: .pr-hero { min-height:100vh; align-items:center } + content padding:80px
   On phones this leaves a big gap between header and content. Tighten it. */
@media (max-width: 768px) {
  .pr-home .pr-hero {
    /* Drop forced full-viewport height — let content drive height */
    min-height: auto;
    /* Pull content to the top of the section instead of centering vertically */
    align-items: flex-start;
  }
  .pr-home .pr-hero__content {
    /* Tighten top padding so badge sits close to the header */
    padding-top: 24px;
    padding-bottom: 40px;
  }
  /* Hide the hero-section "Book a Table" red pill — the sticky bottom CTA
     does the same job and showing both feels redundant on mobile. */
  .pr-home .pr-hero a.pr-pill.pr-pill--red {
    display: none !important;
  }
  /* AYCE page uses similar hero structure */
  body[class*="page-id-2478"] .elementor-section.elementor-section-height-default,
  body[class*="page-id-2478"] section[class*="hero"] {
    min-height: auto;
  }
}

/* === Mobile menu — make hamburger actually work (WP JS removed during fidelity port) === */
@media (max-width: 768px) {
  /* By default Elementor sets nav-menu display via JS. Without JS, show it via aria-expanded. */
  .elementor-nav-menu--dropdown,
  nav.elementor-nav-menu--main {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 75vw;
    max-width: 360px;
    height: 100vh;
    background: #0A0A0A;
    border-left: 2px solid #D42B2B;
    padding: 80px 24px 24px;
    z-index: 9001;
    overflow-y: auto;
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
  }
  .elementor-menu-toggle[aria-expanded="true"] + .elementor-nav-menu__container,
  .elementor-menu-toggle[aria-expanded="true"] + * nav.elementor-nav-menu--main,
  nav.elementor-nav-menu--main.paroro-menu-open,
  .elementor-nav-menu--dropdown.paroro-menu-open {
    display: block !important;
  }
  /* Stack list items on mobile dropdown */
  nav.elementor-nav-menu--main ul.elementor-nav-menu {
    flex-direction: column;
    display: flex;
    gap: 0;
  }
  nav.elementor-nav-menu--main ul.elementor-nav-menu li {
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  nav.elementor-nav-menu--main ul.elementor-nav-menu li a {
    display: block;
    padding: 18px 4px;
    color: #fff;
    text-decoration: none;
    font-family: "Bebas Neue", "Inter", sans-serif;
    font-size: 22px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  nav.elementor-nav-menu--main ul.elementor-nav-menu li a:hover,
  nav.elementor-nav-menu--main ul.elementor-nav-menu li a.elementor-item-active {
    color: #D42B2B;
  }
  /* Backdrop when open */
  body.paroro-menu-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9000;
    cursor: pointer;
  }
  /* Hamburger styling */
  .elementor-menu-toggle {
    color: #fff;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 8px;
    z-index: 9002;
    position: relative;
  }
}

/* 4) Mobile (≤768px) — hide the original header "Book a Table" button.
   It overlaps the hamburger menu (boss flagged 2026-06-15).
   The MobileBookCTA component provides a sticky bottom red CTA instead,
   which is always visible and never blocked by the menu drawer. */
@media (max-width: 768px) {
  /* The header Book a Table button is the only Elementor button widget
     wrapped in elementor-widget-button inside the header. */
  header[data-elementor-type="header"] .elementor-widget-button {
    display: none !important;
  }
  /* Logo: scale down a bit on small screens so it doesn't dominate */
  header[data-elementor-type="header"] a.paroro-logo-link img,
  header[data-elementor-type="header"] .elementor-widget-image img {
    max-width: 140px !important;
    height: auto !important;
  }
}