/* =========================================================================
   The Fried Hangover 1.2 — MOBILE OPTIMIZATION layer
   Loaded LAST on EVERY page (index, reviews, recipes, artist, impact,
   downloads, loyalty, admin) after brand/site/premium/type/menu/scroll.

   Owns: zero horizontal overflow, ≥44px touch targets, safe-area insets,
   mobile-tuned motion + perf. Reflow (not shrink) is already handled by the
   per-component breakpoints in site.css / premium.css; this file hardens the
   edges those miss on real phones (360–412) and tablet (768).
   ========================================================================= */

/* -------------------------------------------------- 1. overflow guard ---- */
/* overflow-x: clip clips runaway transforms (reveal--left/right, parallax
   scale) WITHOUT creating a scroll container, so the sticky nav keeps working
   (unlike overflow-x:hidden, which would break position:sticky). */
html { overflow-x: clip; }
body { overflow-x: clip; }
.fh-page,
.fh-page.is-premium { overflow-x: clip; }

/* Media must never blow out its box on small screens. */
.fh-page img,
.fh-page video,
.fh-page iframe { max-width: 100%; }

/* The decorative aurora is position:fixed with a -20vmax bleed and a drifting
   keyframe on its pseudo-elements — as a FIXED element it escapes the body clip
   above, and its drift transiently pushes the box past the right edge (seen on
   pages without finish.css, e.g. admin). On phones/tablets pin it to the exact
   viewport and clip its animated children so it can never force sideways scroll.
   The inward blur still softens the glow, so the look is preserved. */
@media (max-width: 860px) {
  .fh-aurora { inset: 0; overflow: clip; }
}

/* ---------------------------------------- 2. mobile-tuned scroll reveals -- *
   The .reveal--left/--right initial state translates ±32px on X. Below the
   fold on a narrow viewport that pushes content past the right edge → sideways
   scroll. On phones/tablets, reveal vertically only (no horizontal shift) so
   there is zero overflow while the fade-in is preserved. */
@media (max-width: 820px) {
  .reveal--left,
  .reveal--right { transform: translateY(24px); }
  .reveal--scale { transform: none; }
}

/* ------------------------------------------------- 3. touch targets ≥44 -- */
@media (max-width: 860px) {
  /* Hamburger */
  .fh-nav__burger { width: 44px; height: 44px; }

  /* Buttons / CTAs */
  .brutalist-btn,
  .px-btn,
  .px-btn--ghost { min-height: 44px; }
  .brutalist-btn { display: inline-flex; align-items: center; justify-content: center; }

  /* Form controls — bump vertical padding to clear 44px. */
  .fh-form input,
  .fh-form select,
  .fh-form textarea { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }

  /* Skip link (visible only on keyboard focus) */
  .fh-skip-link { padding-top: 12px; padding-bottom: 12px; }

  /* Footer standalone nav links — full-width row so both the 44px height and
     width clear even for short labels ("Home", "Artist"). */
  .fh-site-footer__nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
  }
  /* Simple loyalty-page footer: pad its links to a 44px tap row too. */
  .fh-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .fh-site-footer__cta { min-height: 44px; }

  /* Mobile drawer links already have generous padding — keep ≥44. */
  .fh-mobile__link { min-height: 44px; display: flex; align-items: center; }
}

/* ------------------------------------------------- 4. safe-area insets --- *
   Requires <meta name="viewport" ... viewport-fit=cover>. Pad the notch /
   home-indicator zones so nothing hides under rounded corners. */
@supports (padding: max(0px)) {
  .fh-nav__inner {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .fh-mobile__inner {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .fh-container,
  .px-hero,
  .fh-hero {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .fh-page { padding-bottom: max(80px, calc(60px + env(safe-area-inset-bottom))); }
  .fh-site-footer__legal { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}

/* iOS momentum scroll + no grey tap flash. */
body { -webkit-overflow-scrolling: touch; }
a, button, input, select, textarea, [role="button"] {
  -webkit-tap-highlight-color: rgba(212, 175, 55, 0.25);
}

/* ---------------------------------------------- 5. mobile motion / perf -- *
   GSAP/Lenis/pins are already skipped on mobile by scroll.js. Trim the heavy
   always-on aurora blur so low-end phones composite it cheaply, and drop the
   grain layer (a repeated SVG turbulence paint) entirely on small screens. */
@media (max-width: 820px) {
  .fh-aurora { filter: blur(40px) saturate(120%); opacity: .42; }
  .fh-grain { display: none; }
  /* Kill hover-only lift transforms that never trigger on touch but keep
     will-change memory reserved. */
  .glass { will-change: auto; }
  .px-marquee__track { animation-duration: 36s; }
}

/* --------------------------------------------------- 6. small-phone trims */
@media (max-width: 400px) {
  /* Keep the reviews hero stat row from crowding at 360px. */
  .rv-hero__stats { gap: 22px; }
  /* Editorial pull quote mark shouldn't force width. */
  .rv-quote__mark { font-size: 2.4rem; }
}

/* ---------------------------------- 7. home / menu / cart touch targets --- *
   The redesigned home page (index.html) uses its own component classes
   (menu-nav, menu-card, cart-*, contact-card) that predate this layer. Below
   860px, bring every tappable control up to the 44px minimum WITHOUT touching
   the card media boxes — the square/4:3 cover-fill art is preserved as-is. */
@media (max-width: 860px) {
  /* Category filter chips — were ~31px tall. */
  .menu-nav__chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 11px 16px;
    font-size: .66rem;
  }

  /* "Add to order" / "Add combo" — were ~40px tall. */
  .menu-card__add { min-height: 44px; padding: 13px 16px; }

  /* Cart drawer close ✕ — was 36×32. */
  .cart-drawer__close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* Cart quantity steppers — were 26×26; keep the pill compact but tappable. */
  .cart-qty button { width: 40px; height: 40px; font-size: 1.15rem; }
  .cart-qty span { min-width: 34px; }

  /* Cart checkout / form controls clear 44px. */
  .cart-checkout { min-height: 48px; }
  .co-field input,
  .co-field textarea,
  .co-field select { min-height: 44px; }

  /* Inline contact email link — give it a full tap row. */
  .contact-card__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Social buttons + email link — clear 44px (border-box so padding+border
     don't eat into the min). */
  .social-button,
  .contact-card__link {
    min-height: 46px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }

  /* Loyalty auth tabs (Sign in / Create account) — were ~31px. */
  .auth-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Skip link (keyboard-only) — clear 44px when focused. */
  .fh-skip-link { min-height: 44px; box-sizing: border-box; }

  /* Admin login: the card is sized in vw (92vw) but sits in a grid track with
     inherited 40px side padding, so it spills past the right edge. Trim the
     padding and make the card container-relative so it fits every phone. */
  .adm-login {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .adm-login__card { width: min(440px, 100%); }
}

/* --------------------------------- 8. home hero + menu safe-area / clip ---- *
   index.html uses new hero/menu wrappers not covered by section 4. On phones/
   tablets only (desktop padding untouched), guarantee notch clearance and that
   the sticky menu-nav never forces sideways scroll. */
@media (max-width: 860px) {
  /* The sticky chip bar spans full width with its own bg; keep it inside the
     viewport and let chips wrap rather than scroll off-edge. */
  .menu-nav { max-width: 100%; }

  @supports (padding: max(0px)) {
    .menu-live__inner,
    .about__inner,
    .contact__inner,
    .truck-locator__inner,
    .mission__content {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }
  }
}

/* --------------------------------- 9. hero title clip on narrow phones ----- *
   index.html hero <h1> has "Vegan Remedy" wrapped in .nowrap. At <=400px the
   forced single line overflows its container and the last letters clip off the
   right edge (verified: "E" cut at 360, period at edge at 375). Shrink the
   clamp min so it scales with the viewport, and allow the phrase to wrap as a
   last resort so nothing is ever cut. Desktop sizing untouched. */
@media (max-width: 480px) {
  .hero__content h1 {
    font-size: clamp(1.85rem, 8.5vw, 3.2rem);
    overflow-wrap: break-word;
  }
  .hero__content h1 .nowrap { white-space: normal; }
}

/* ---------------------------------- 10. menu tabs + hero CTA on mobile ----- *
   Two phone defects, fixed at <=768px only (desktop untouched):
   A) Category tabs (ALL / OG BURGERS / SPECIALTY BURGERS / WINGS / SPECIALTY
      FRIES / UNFRIEDS / LEMONADE / DESSERTS / COMBO) wrapped into a multi-row
      block. Make them a single horizontally-scrollable row on a solid sticky
      bar with the scrollbar hidden.
   B) The hero EXPLORE MENU CTA was covered by the floating ORDER cart FAB
      (fixed bottom-right). Tighten the hero spacing and give it enough bottom
      padding so the CTA clears the FAB zone and stays tappable. */
@media (max-width: 768px) {
  /* The brand header's position:sticky is unreliable inside the overflow-clip
     wrappers on mobile (it scrolls away instead of pinning). Rather than chain
     the category bar to a header that may or may not pin — which caused both the
     top:0 collision AND the floating-gap "awkward blocker" — let the header
     scroll away on phones and make the category bar the single persistent
     top-docked selector (the standard Toast/DoorDash menu pattern). */
  .fh-nav { position: static; }

  .menu-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #0a0a0a;
    padding: 10px 12px;
    gap: 8px;
    border-radius: 14px;
  }
  .menu-nav::-webkit-scrollbar { display: none; }
  .menu-nav__chip {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: .56rem;
    letter-spacing: .09em;
  }

  .hero {
    min-height: 0;
    padding: 30px 0 40px;
  }
  .hero__content { justify-content: center; }
  .hero__text {
    top: 0;
    gap: 18px;
    padding: 26px 20px 24px;
  }
  .hero__mark { width: min(240px, 62vw); }
  .hero__content h1 {
    top: 0;
    margin: 0 0 10px;
    font-size: clamp(1.6rem, 7.5vw, 2.6rem);
  }
  .hero__description { top: 0; margin: 0 0 20px; }
  .hero__actions { top: 0; margin: 0; }
}

/* =========================================================================
   Item 4 (client change-set): keep images from rendering too tall/skinny on
   phones. Everything already uses object-fit:cover + aspect-ratios; this is a
   light-pass safety net that caps extreme heights and guarantees no stretch
   on the big standalone/full-bleed images. Scoped away from logos/nav marks.
   ========================================================================= */
@media (max-width: 600px) {
  .feature-split__img,
  .about__img,
  .rc-row__media img,
  .im-hero-band img,
  .ar-hero__pic,
  .ar-bio__portrait img,
  .menu-card__media img,
  .home-hero__portrait img {
    object-fit: cover;
  }
  /* Grant's cut-out PNG stays uncropped but can't tower on small screens. */
  .grant__img {
    max-height: 56vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transform: none; /* drop the desktop +50px nudge that overlaps on phones */
  }
  /* Full-bleed bands: sensible phone heights so they never look skinny/tall. */
  .im-hero-band img { max-height: 44vh; }
  .rc-row__media { min-height: 200px; }
}