/*!
 * mobile-fixes.css — Heritage Park Hotel
 * ---------------------------------------------------------------------------
 * Site-wide responsive corrections for phones and small tablets.
 *
 * Loaded LAST in <head> on every public page so it reliably wins the cascade
 * over each page's own inline <style> block (four pages load a11y-fixes.css
 * before their inline styles, so that file alone could not override them).
 *
 * Desktop (>768px) layout is deliberately left untouched — every rule below
 * lives inside a max-width media query, except the universal media guard.
 * ---------------------------------------------------------------------------
 */

/* ── Universal: media never bursts out of its container ──
   NOTE: <canvas> is deliberately excluded. The Green Initiative globe is a
   JS-sized canvas inside a flex column; applying max-width:100% to it creates
   a circular width dependency that collapses the stage to 0px. */
img, video, svg, picture, iframe { max-width: 100%; }
img, video { height: auto; }

@media (max-width: 768px) {

  /* ══ 1. Overflow guard ══════════════════════════════════════════════
     Belt-and-braces: the specific causes are fixed below, but this stops
     any remaining stray element from producing a horizontal scrollbar. */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Flex/grid children default to min-width:auto, which refuses to shrink
     below their content and is the single most common overflow cause. */
  .booking-bar > *, .bb-field, .hp-footer .footer-top > *,
  .hero-content > *, .sec > * { min-width: 0; }

  /* Grid & flex items default to min-width:auto and refuse to shrink below
     their content, which pushes tracks wider than the screen. */
  .intro > *, .intro-text, .intro-visual > *,
  [class*="grid"] > *, [class*="-row"] > * { min-width: 0; }

  /* ══ 2. Booking bar — wrap instead of squeezing off-screen ══════════ */
  .booking-bar { flex-wrap: wrap; padding: 1rem .9rem; gap: .55rem; }
  .booking-bar .bb-field {
    flex: 1 1 46%;
    padding: .5rem .7rem;
    border-right: none;
    background: rgba(255,255,255,.04);
    border-radius: 8px;
  }
  .bb-field input, .bb-field select {
    width: 100%;
    min-width: 0;
    font-size: 16px;           /* 16px stops iOS auto-zoom on focus */
  }
  .booking-bar > button, .booking-bar .bb-go, .booking-bar a.btn {
    flex: 1 1 100%;
    min-height: 44px;
  }

  /* ══ 3. Wide tables scroll inside themselves ════════════════════════ */
  table { display: block; width: 100%; max-width: 100%;
          overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ══ 4. Multi-column grids collapse to one column ═══════════════════ */
  .ambience, .ambience-hours, .amenities, .anatomy-grid, .bm-row,
  .board-grid, .conference-content, .csr-section, .details-grid,
  .dining-row, .estate-inner, .fac-grid, .feature-grid, .figures-grid,
  .flip-grid, .gallery-mosaic, .grid, .history-grid, .intro, .intro-strip,
  .intro-visual, .layouts-grid, .pgrid, .pillar-grid, .pillars, .programs,
  .room-layout, .rooms-scroll, .seating-table, .service-grid, .services-grid,
  .t-entry, .tgrid, .tgrid2, .time-grid, .tour-card, .two-col, .venue-row,
  .venues-grid, .venues-header, .wellness-grid, .hp-footer .footer-top {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Short stat/number rows read better 2-up than stacked */
  .stats, .stat-strip, .conf-stats, .impact-bar, .date-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* ══ 5. Side rail — the only nav on mobile, so keep it, compact it ══ */
  .site-sidenav.vtog {
    right: .45rem;
    gap: .25rem;
    padding: .45rem .25rem;
    max-height: 88vh;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .site-sidenav.vtog::-webkit-scrollbar { display: none; }
  .site-sidenav .sni { width: 36px; }
  .site-sidenav .sni-btn { width: 36px; height: 36px; font-size: .4rem; }
  /* No hover on touch — labels only ever caused overflow here */
  .site-sidenav .sni-lbl { display: none !important; }
  .site-sidenav .sni-divider { width: 20px; }

  /* Hero / section text must not slide under the right-hand rail.
     Rail is ~36px wide + ~7px offset, so reserve a little over that. */
  .hero-cnt, .hero-content, .overture-content, .dine-hero .hero-cnt,
  .hero .hero-inner, .hero-text, .hero-left { padding-right: 52px; }

  /* Hero children are usually flex items; min-width:auto stops them
     shrinking and they burst past the screen edge. */
  .hero > *, .dine-hero > *, .overture > * { min-width: 0; max-width: 100%; }
  .hero p, .hero-left p, .hero-cnt p, .hero-content p { max-width: 100%; }
  .hero-scroll, .scroll-invite { display: none; }

  /* Hero body copy sits over photography — muted greys lose too much
     contrast on a small bright screen, so lift them. */
  .hero p.sub, .hero-sub, .hero-cnt p, .hero-content p {
    color: rgba(255,255,255,.94);
    text-shadow: 0 1px 10px rgba(0,0,0,.55);
  }

  /* Green Initiative globe: keep it square and inside the screen without
     letting max-width create a circular flex dependency. */
  .earth-stage { flex: 0 0 auto; min-width: 0; }
  #earthCv { max-width: 78vw; max-height: 78vw; }

  /* Stat strips are flex rows — let them wrap instead of overflowing. */
  .stats-strip, .impact-row, .hero-stats { flex-wrap: wrap; justify-content: center; }
  .stats-strip .si { flex: 1 1 40%; min-width: 0; }

  /* ── Mobile menu drawer ──
     #main-nav carries backdrop-filter, which promotes it to the containing
     block for its position:fixed children. The drawer's `inset:0` therefore
     resolved against the 110px-tall nav instead of the viewport, so it only
     ever opened as a thin strip. Pin it to viewport units to escape that. */
  #main-nav .navlinks {
    width: 100vw;
    height: 100vh;
    height: 100dvh;          /* accounts for mobile browser chrome */
    top: 0;
    left: 0;
    overflow-y: auto;
    gap: 1.4rem !important;
    padding: 5rem 1.5rem 2rem;
  }
  #main-nav .navlinks a, #main-nav .navlinks button, #main-nav .navlinks .nav-book {
    font-size: 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ══ 6. Floating UI kept clear of each other ════════════════════════ */
  #bot-toggle { bottom: 1rem; right: 1rem; width: 48px; height: 48px;
                font-size: 1.25rem; }
  #bot-window { right: .5rem; left: .5rem; width: auto; max-width: none;
                bottom: 4.6rem; max-height: 70vh; }

  /* Promotional pop-up must fit the screen */
  #hph-popup-card { max-width: calc(100vw - 1.6rem); }
  #hph-popup-overlay { padding: .8rem; }

  /* Cookie banner stacks */
  .cookie-banner { flex-direction: column; align-items: stretch;
                   gap: .7rem; padding: 1rem; text-align: left; }
  .cookie-banner-text { max-width: 100%; }

  /* iOS Safari force-zooms the page whenever a focused field is under 16px.
     Setting 16px keeps the typed size identical but stops the zoom jump. */
  /* !important is deliberate: page rules like `.field input` out-rank a bare
     element selector, and anything under 16px re-triggers the iOS zoom. */
  input, select, textarea,
  .field input, .field select, .field textarea,
  #bot-input { font-size: 16px !important; max-width: 100%; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
  input[type="number"], select, textarea { width: 100%; min-height: 44px; }
  textarea { min-height: 110px; }
  form, .form-row, .contact-form { max-width: 100%; }
  .form-row, .field-row { flex-direction: column; }

  /* Thumbnail / chip strips: scroll sideways rather than spilling out of
     the container and being clipped away by the overflow guard. */
  .room-gallery, .bot-chips, .gallery-strip, .thumb-row, .chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }
  .room-gallery::-webkit-scrollbar, .bot-chips::-webkit-scrollbar { display: none; }
  .room-gallery > *, .bot-chips > * { flex: 0 0 auto; }

  /* ══ 7. Comfortable tap targets ═════════════════════════════════════ */
  .btn-primary, .btn-secondary, .nav-book, .bot-chip,
  button[type="submit"] { min-height: 44px; }

  /* ══ 8. Long unbroken strings (emails, URLs) wrap ═══════════════════ */
  a[href^="mailto:"], a[href^="tel:"], .footer-col a { overflow-wrap: anywhere; }
}

/* ── Very small phones (≤400px) ── */
@media (max-width: 400px) {
  .stats, .stat-strip, .conf-stats, .impact-bar, .date-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .booking-bar .bb-field { flex: 1 1 100%; }
  .site-sidenav .sni { width: 32px; }
  .site-sidenav .sni-btn { width: 32px; height: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Landscape phones / short viewports
   A phone on its side is ~667–932px WIDE, so it never matches the 768px
   query above — but it is only ~360–430px TALL. Two things break there:
   the vertical nav rail is taller than the screen (its first and last
   buttons become unreachable), and heroes with min-height:660px force a
   long scroll before any content is visible.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-height: 520px) and (orientation: landscape) {

  /* Rail must fit the short screen and scroll if it still cannot */
  .site-sidenav.vtog {
    max-height: 94vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: .18rem;
    padding: .3rem .2rem;
    right: .4rem;
    scrollbar-width: none;
  }
  .site-sidenav.vtog::-webkit-scrollbar { display: none; }
  .site-sidenav .sni { width: 30px; }
  .site-sidenav .sni-btn { width: 30px; height: 30px; font-size: .36rem; }
  .site-sidenav .sni-lbl { display: none !important; }
  .site-sidenav .sni-divider { width: 16px; margin: 0; }

  /* The nav (large stacked logo) eats ~35% of a 375px-tall screen, so it is
     slimmed down here and the hero is padded to clear whatever remains. */
  #main-nav { padding-top: .35rem; padding-bottom: .35rem; }
  #main-nav .logo img, #main-nav .nav-logo img, #main-nav img { max-height: 42px; width: auto; }

  /* Fill the screen instead of demanding 660px+ of scrolling */
  .hero, .dine-hero, .overture, .hero-section {
    height: auto;
    min-height: 100vh;
    padding-top: 7rem;
    padding-bottom: 1.5rem;
  }
  /* Bottom-aligned hero copy must still start below the nav */
  .hero-cnt, .hero-content, .hero-left, .overture-content { padding-top: .5rem; }

  /* Overlays must not exceed the short screen */
  #hph-popup-card { max-height: 88vh; overflow-y: auto; }
  #bot-window { max-height: 80vh; bottom: 3.6rem; }
  #main-nav .navlinks { padding-top: 4rem; gap: .9rem !important; }
}
