/* ============ HEADER — ONE STICKY LINE (2026-09-09) ============================
   Curtis's brief (09-07, restated 09-09): "header with nav then vehicle selector
   on same line. same style." + "i want the logo in the sticky menu."

   Before: .lmcs-util → .lmcs-main → .lmcs-deck (Y/M/M/E) → .lmcs-tabrow (dept nav)
           = four stacked bands, none sticky; the whole header scrolled away.
   After:  at desktop width the deck and the nav share ONE row (.lmcs-bar), and that
           row stays pinned while util + main scroll away above it, with the wordmark
           sliding in once they're gone.

   ⚠ THE MERGE IS WIDTH-GATED, and that is deliberate. Eight department tabs plus four
   selects and a button need ~1200px before they stop fighting; below that the nav
   overflowed and drew on top of the deck. Under 1200 we simply keep the original
   stacked bands — they already work, are already skinned, and already fold correctly
   on phones. Nothing below 1200 is changed by this sheet at all.

   ⚠ A sticky row nested inside <header> cannot stick (the header is its own containing
   block). The fix — proven in livernois-comps/hdr — is to make the WHOLE header sticky
   with a negative `top` equal to everything above the bar, so exactly the bar remains.
   header-sticky.js measures and sets that top.

   Loads at 1000, after lm-layout (998) and the active skin (999), so it can settle the
   seam where the two bands used to meet. Colour still comes from the skin.
   ============================================================================= */

@media (min-width:1200px){

  /* ── the sticky mechanism ── */
  /* ⚠⚠ THE ONE THAT COSTS AN HOUR IF YOU DON'T KNOW IT.
     Storefront's style.css sets `body{overflow-x:hidden}` and `.site{overflow-x:hidden}`
     (that's div#page.hfeed.site). `overflow-x:hidden` silently forces `overflow-y:auto`,
     which makes BOTH of them scroll containers — and position:sticky sticks to its nearest
     scroll container, not the viewport. The header was correctly sticky with the correct
     negative top the whole time and still never pinned.
     `overflow-x:clip` does the identical visual job (no horizontal scroll, no bleed) WITHOUT
     creating a scroll container, so sticky reaches the viewport. Chrome 90+/FF 81+/Safari 16+.
     Scoped inside this breakpoint, and the sheet only loads when the shell is on. */
  html body{overflow-x:clip}
  body #page.site{overflow-x:clip}

  .lmcs{position:sticky;top:0;z-index:300}
  /* the strip between the logo row and the nav: was the cyan token (#00aeef) — Curtis 09-11:
     "make it more blue" → the homepage's accent blue (#1d5fd8, mega-liv --acc / comps --hblue) */
  .lmcs-bar{position:relative;z-index:2;border-top:3px solid #1d5fd8;border-bottom:1px solid #232426}

  /* ── the merged row: [logo] [dept nav ...............] [Y/M/M/E] ── */
  /* gap:0 (2026-09-11, Curtis "the menu should align with the logo"): the row gap sat between the
     zero-width hidden wordmark and the nav, pushing the first dept tab ~18px right of the 22px
     gutter the logo sits on. With gap 0 the nav starts flush at the gutter, under the logo; the
     spacing that used to come from the gap is re-added only where it's wanted (below). */
  .lmcs-barwrap{display:flex;align-items:stretch;gap:0}
  .lmcs-bar .lmcs-deck{margin-left:18px}                         /* keep the breathing room before the fitment block */
  .lmcs.is-compact .lmcs-bar .lmcs-tabrow{margin-left:16px}      /* once the wordmark rides in, part it from the nav */
  /* the whole dept nav sits just off the logo's gutter — a bit of left margin (Curtis 09-11)
     rather than dead flush against it */
  .lmcs-bar .lmcs-tabrow{margin-left:2px}
  /* the deck and nav keep their class hooks so every existing rule still applies;
     their inner .lmcs-wrap is demoted so the bar's wrap is the single canvas */
  .lmcs-bar .lmcs-tabrow,.lmcs-bar .lmcs-deck{border:0;background:transparent;min-width:0}
  .lmcs-bar .lmcs-tabrow{flex:1 1 auto}
  .lmcs-bar .lmcs-deck{flex:0 0 auto}
  .lmcs-bar .lmcs-tabrow > .lmcs-wrap,.lmcs-bar .lmcs-deck > .lmcs-wrap{max-width:none;margin:0;padding:0;height:100%}
  /* the deck still precedes the nav in the DOM (kept so the ≤640 fold and
     clean-shell.js see the structure they expect); order puts the nav left */
  .lmcs-stlogo{order:0}
  .lmcs-bar .lmcs-tabrow{order:1}
  .lmcs-bar .lmcs-deck{order:2}

  /* the nav must be allowed to give way rather than overflow onto the deck */
  /* ⚠ overflow-x:auto makes the nav a scroll container, and a scroll container CLIPS the
     mega panels (position:absolute children of .lmcs-mitem) — hover showed a blue tab and
     no panel (found 09-11). Scroll only when tabs really are hidden (.is-over, set by
     header-sticky.js); otherwise overflow stays visible so the panels can drop. */
  .lmcs-bar .lmcs-mnav{flex:1 1 auto;min-width:0;overflow:visible;scrollbar-width:none}
  .lmcs-bar .lmcs-mnav.is-over{overflow-x:auto}
  /* belt and braces: an OPEN panel always wins over the scroll container, whatever the flag says */
  .lmcs-bar .lmcs-mnav:has(.lmcs-mpanel.open){overflow:visible;-webkit-mask-image:none;mask-image:none}
  .lmcs-bar .lmcs-mnav::-webkit-scrollbar{display:none}
  /* a tab scrolled under the deck reads as broken; fade the edge so it reads as "more".
     Only while the nav actually overflows (header-sticky.js sets .is-over) — with the
     2026-09-11 sizing nothing overflows at ≥1200, and an always-on fade dimmed the tail
     of "Services" at 1280 where it ended 4px inside the edge. */
  .lmcs-bar .lmcs-mnav.is-over{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
                                        mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
  .lmcs-bar .lmcs-mitem{flex:0 0 auto}

  /* the fitment selects condense to ride on one line */
  .lmcs-bar .lmcs-deck .lmcs-wrap{padding-top:0;padding-bottom:0}
  .lmcs-bar .lmcs-deckrow{align-items:center;gap:8px;flex:0 0 auto;flex-wrap:nowrap}
  .lmcs-bar .lmcs-dk-lab{display:none}
  .lmcs-bar .lmcs-dk-f{flex:0 0 auto}
  /* Measured at 1590: nav content 717 + deck 795 = 1512, leaving 56px — not enough for the
     170px wordmark. The deck was the hog because each select sizes to its placeholder text
     ("Engine (optional)" alone was 156px). Explicit widths give the ~195px the logo needs
     and still fit every real Year/Make/Model value. */
  .lmcs-bar .lmcs-dk-f select{width:auto;min-width:0;height:38px;min-height:38px;font-size:.85rem;padding-right:30px;padding-left:11px;text-overflow:ellipsis}
  .lmcs-bar #lmcs-dk-y{width:86px}
  .lmcs-bar #lmcs-dk-mk{width:106px}
  .lmcs-bar #lmcs-dk-md{width:116px}
  .lmcs-bar #lmcs-dk-en{width:106px}
  .lmcs-bar .lmcs-dk-go,.lmcs-bar .lmcs-dk-clear{height:38px;min-height:38px;font-size:.74rem;white-space:nowrap}

  /* ── the wordmark that rides in once the top rows are gone ── */
  .lmcs-stlogo{display:flex;align-items:center;flex:none;overflow:hidden;
    max-width:0;opacity:0;margin-right:0;
    transition:max-width .24s cubic-bezier(.32,.72,.34,1),opacity .16s,margin-right .24s}
  .lmcs-stlogo img{height:26px;width:auto;display:block}
  .lmcs.is-compact .lmcs-stlogo{max-width:170px;opacity:1;margin-right:2px}
  /* no transition on first paint, or it animates in on every page load */
  .lmcs.no-anim .lmcs-stlogo{transition:none}

  /* depth once the bar is the only header on screen */
  .lmcs.is-compact .lmcs-bar{box-shadow:0 8px 30px rgba(0,0,0,.45)}
}

/* ── 1200–1599: the row is honest only when the WORDMARK is in it too (the compact
      state, which is how the header is seen 90% of the time). Measured 2026-09-11 on the
      real store, compact, 8 tabs: clipped 202/122/62/118/88/46 px at 1200/1280/1366/1440/
      1470/1512 — every MacBook width lost "Tuning" and "Services" behind the fade.
      Tighter tab padding (14→9) and type (.8→.74rem) free ~115px; the go button ~20px.
      Applied at every scroll position, not just compact, so nothing reflows as the logo
      slides in. ≥1600 is untouched — it fitted. ── */
/* 2026-10-16: no upper bound any more. The bar's canvas stops at 1590px, so a wider screen gains nothing, and
   since Support joined the nav (2026-10-08, nine tabs) the untightened compact row overflowed by 39px at EVERY
   width from 1600 up — "Support" sat under the edge fade, and under the Year field whenever a panel was open. */
@media (min-width:1200px){
  .lmcs-barwrap{gap:0} /* 2026-09-11: keep the nav flush to the logo's gutter at laptop widths too (was 14) */
  .lmcs-bar .lmcs-mtab{padding:0 9px;font-size:.74rem !important;letter-spacing:.05em !important}
  .lmcs-bar .lmcs-dk-go{font-size:.7rem;padding-left:12px;padding-right:12px}
}
/* 1200–1279 still can't seat the wordmark next to eight tabs and four fields; the real
   logo is one scroll-up away, so the sticky one stays out in this narrow band only. */
@media (min-width:1200px) and (max-width:1279px){
  .lmcs.is-compact .lmcs-stlogo{max-width:0;opacity:0;margin-right:0}
}
/* 1280–1499 (2026-10-16, Logan's screen: a 1920 monitor at 150% = 1280 CSS px): nine tabs now,
   and compact the wordmark took the nav's room — 636px of tabs in 587px. The nav became a
   scroll container, but an OPEN Models panel turns overflow back on (it has to, or the panel
   clips) and the tail tabs ran under the Year / Make / Model fields: "SERVICES 2022 SUPPORT".
   Tighter tabs (9→5px, .74→.7rem) seat all nine beside the wordmark with room to spare. Measured compact
   with the rule above alone: 1366 +29, 1440 −23, 1480 +17 — so this band runs to 1499. */
@media (min-width:1280px) and (max-width:1499px){
  .lmcs-bar .lmcs-mtab{padding:0 5px;font-size:.7rem !important;letter-spacing:.03em !important}
  .lmcs.is-compact .lmcs-stlogo{margin-right:0}
  .lmcs.is-compact .lmcs-stlogo img{height:22px}
}
/* ── 1200–1439: one line, but the canvas is still 1340 and it is tight.
      Engine is the optional field, so it is the first thing to go; the deck's
      own "Clear" button and the picker still expose it. ── */
@media (min-width:1200px) and (max-width:1439px){
  /* measured 09-11 with 2024 Ford F-150 set (Clear button in the row): 1280 still clipped 32px
     at 9px tabs — 7px + a 10px go button frees 36 */
  .lmcs-bar .lmcs-mtab{padding:0 7px}
  .lmcs-bar .lmcs-dk-f select{min-width:88px;font-size:.8rem}
  .lmcs-bar #lmcs-dk-en{display:none}
  .lmcs-bar .lmcs-dk-f:has(#lmcs-dk-en){display:none}
  .lmcs-bar .lmcs-dk-go{font-size:.7rem;padding-left:10px;padding-right:10px}
}

/* Below 1200 this sheet does nothing: .lmcs-bar is a plain wrapper and the two
   bands stack exactly as they did before, including the ≤640 "Shop by vehicle"
   fold. The sticky wordmark has no reason to exist there — the real logo is
   still on screen — so it stays hidden. */
@media (max-width:1199px){
  /* ⚠ .lmcs-wrap is itself `display:flex` in clean-shell.css, so .lmcs-barwrap kept the
     deck and the nav side by side below the gate and collapsed the selects to stubs.
     Neutralise the wrapper completely: .lmcs-bar becomes a pass-through and the two
     bands' own .lmcs-wrap does the work, exactly as before this sheet existed. */
  .lmcs-barwrap{display:block;max-width:none;margin:0;padding:0}
  .lmcs-bar{border:0;background:transparent}
  .lmcs-stlogo{display:none}
}
@media (prefers-reduced-motion: reduce){
  .lmcs-stlogo{transition:none}
}