/* ============================================================
   Homepage mobile layer.
   Loaded by the canonical index.html (live) and the index-hero-preview-v*
   archive files, after styles.css. The live homepage carries the
   vh-eyebrow vb-why-image vb-who-hidden vb-partner-nosub body classes (the
   promoted V8 combination); the preview files use other class combos.

   - Global mobile clean-up applies to every page that loads this.
   - Per-treatment rules are gated by body classes (see home-variations.js
     for the eyebrow + titles-list injection).
   Breakpoint matches the site's mobile query (768px).
   ============================================================ */

/* Sector eyebrow ("Kitchens We Serve"): matches the site's section labels
   exactly (same font/size, gold flanking lines), centred, sitting on a solid
   dark strip above the CTA band so it never lands on the image. Injected by
   JS only on .vh-eyebrow variants; shown at mobile only. */
.sector-eyebrow {
  display: none;
  background: var(--charcoal-warm, #242220);
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold, #C6A96C);
  /* Top padding sits midway between tight and the marquee gap (~23px), matched
     to the tile->producer-brands-label gap below for symmetric label spacing. */
  padding: 1.45rem var(--gutter, 1rem) 0.5rem;
}
.sector-eyebrow::before,
.sector-eyebrow::after {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--gold, #C6A96C);
  flex-shrink: 0;
}

@media (max-width: 768px) {

  .sector-eyebrow { display: flex; }
  /* Tighten the gap below the eyebrow (to the CTAs); keep more room above it. */
  body.vh-eyebrow .sector-tiles { padding-top: 0.35rem !important; }

  /* ---- Global clean-up (every variant) ---- */
  .cred-bar { display: none !important; }
  .quality-item-desc { display: none !important; }
  .why-section .section-headline br { display: inline !important; }
  /* Trim the marquee top padding so the Outlet-tile -> "Trusted producer brands"
     label gap (tiles padding-bottom ~19px + this) lands at ~23px, matching the
     gap above the "Kitchens We Serve" eyebrow for symmetric label spacing.
     Bottom padding trimmed too (was --space-lg/40px, oversized next to the tight
     top) so the logos-to-section-bottom gap reads balanced. */
  .brand-banner { padding-top: 0.25rem !important; padding-bottom: 1.5rem !important; }

  /* Section headings scaled down uniformly on mobile so three-sentence
     headings (Who We Are) fit three lines, one sentence per line. The final
     "Partner with Tip Top" heading scales with them. */
  .section-headline,
  .why-section .section-headline,
  .cta-headline { font-size: 1.6rem !important; }

  /* Quality & Compliance list: centre the block as a unit so it doesn't hug
     the left with dead space on the right. Icons stay aligned, text starts
     stay aligned. Applies to every variant. */
  .quality-list {
    width: fit-content;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ---- Hero sub-copy ---- */
  body.vh-nosub .hero-subcopy { display: none !important; }

  /* ---- Why Tip Top: warehouse image (square, no corner radius) ---- */
  body.vb-why-image .why-grid,
  body.vb-why-titles .why-grid { display: none !important; }
  body.vb-why-image .why-image,
  body.vb-why-titles .why-image {
    display: block !important;
    margin-top: 0.85rem;
    border-radius: 0 !important;
    overflow: hidden;
  }
  body.vb-why-image .why-image img,
  body.vb-why-titles .why-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0 !important;
  }

  /* Title list reuses the Quality & Compliance item style (.quality-list /
     .quality-item / .quality-check / .quality-item-title) for uniform font,
     size and tick icons. The .quality-list centring already applies. */
  .why-titles-list { margin-top: 1.1rem; list-style: none; }
  /* The Why section is surface-dark, so lift the tick circle to charcoal-warm
     so it stays visible (the default --charcoal blends into surface-dark). */
  .why-titles-list .quality-check { background: var(--charcoal-warm) !important; }

  /* ---- Who We Are ---- */
  body.vb-who-photosoff .who-card-image { display: none !important; }
  body.vb-who-hidden .who-section { display: none !important; }
  /* With Who We Are removed, the partners section and Quality would sit
     back-to-back on the same tone. Flip Quality to the alternate dark so
     adjacent sections still alternate. */
  body.vb-who-hidden .quality-section { background: var(--surface-dark) !important; }
  /* On that flipped (surface-dark) Quality section the tick circle blends in,
     so lift it to the partners-section tone above it. */
  body.vb-who-hidden .quality-section .quality-check { background: var(--charcoal-warm) !important; }

  /* ---- Partner with Tip Top ---- */
  body.vb-partner-nosub .cta-subtext { display: none !important; }
}

/* ── Mobile menu: overlay drawer on the banded hero (≤550px) ──
   On the banded mobile hero the navbar sits in normal flow, so the in-flow
   mobile menu grew the nav band — pushing the heading + tiles down while the
   absolutely-positioned image band stayed put, and the image bled through the
   translucent open-nav background. Float the open menu as an overlay drawer and
   keep bar + drawer solid so nothing shifts and the image no longer shows.
   Scoped to ≤550px (the band breakpoint); 551-900px uses the canonical
   full-bleed hero where the in-flow menu is correct. */
@media (max-width: 550px) {
  .nav-mobile-menu.open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;                       /* reset the edge-bleed negative margins */
    background: var(--charcoal-warm);
  }
  body.mobile-menu-open .nav {
    background: var(--charcoal-warm);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}