/* ============================================================
   bemermatreview.com - shared chrome  (chrome.css v2)
   ============================================================
   Loaded by EVERY page (editorial and marketplace) right after
   /css/tokens.css. Owns: skip link, optional disclosure bar, the
   L2C logo lockup, the site header + desktop nav, the mobile
   hamburger + 296px slide-in menu, and the footer (tri-color bar,
   footer gradient, glass watermark, dark lockup, link columns,
   disclosure lines). Values come from design/handoff/reference/*
   (pixel truth) and components.md.

   Markup to paste lives in templates/page-shell.html. Class names
   are new (.site-header, .primary-nav, .mobile-menu, .page-footer)
   so this file can coexist with the legacy .site-bar / .site-footer
   rules until those pages are rebuilt.
   ============================================================ */

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--surface-card); color: var(--color-blue);
  font: 700 14.5px/1 var(--font-ui); text-decoration: none;
  padding: 12px 16px; border-radius: 0 0 var(--r-input) 0;
  box-shadow: var(--shadow-panel);
}
.skip-link:focus { left: 0; outline: 2px solid var(--color-blue); outline-offset: 2px; }

/* ---------- Optional disclosure bar (marketplace 4a) ----------
   Navy strip above the header. Keep the wording verbatim:
   "Independent review site · not affiliated with BEMER Group · we
   may earn a commission from eBay links" (mobile drops the last
   clause via .disclosure-bar__extra). */

.disclosure-bar {
  padding: 9px 28px; background: var(--color-navy);
  font: 400 13.5px/1.4 var(--font-ui); color: var(--on-dark-link); text-align: center;
}
.disclosure-bar b { color: #fff; font-weight: 500; }

/* ---------- L2C logo lockup (the only approved logo) ----------
   <a class="logo-lockup logo-lockup--header" href="/" aria-label="Bemer Mat Review home">
     <img class="logo-lockup__icon" src="/img/logo-glass-orange-192.png" alt="" width="192" height="192">
     <span class="logo-lockup__stack">
       <span class="logo-lockup__name">BEMER MAT</span>
       <span class="logo-lockup__rule"></span>
       <span class="logo-lockup__sub">REVIEW</span>
     </span>
   </a>
   Size variants: --header (38px icon / 18px, auto 34/16 on mobile),
   --mobile (34/16), --footer (34/16), --menu (30/14.5).
   --dark: only BEMER MAT turns white; rule and REVIEW stay orange. */

.logo-lockup {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; flex: 0 0 auto;
  --lockup-icon: 38px; --lockup-name: 18px; --lockup-sub: 13.5px;
}
.logo-lockup:hover, .logo-lockup:focus { text-decoration: none; }
.logo-lockup__icon {
  width: var(--lockup-icon); height: var(--lockup-icon); display: block; flex: 0 0 auto;
}
/* Owner-supplied magnifier (Sept 9, 2026), tinted from one black source into
   /img/logo-glass-{orange,navy,white}-192.png. Orange is the brand default and works on
   both light and dark; the dark lockup keeps the white cut for contrast on navy. */
.logo-lockup--dark .logo-lockup__icon { content: url("/img/logo-glass-white-192.png"); }
.logo-lockup__stack { display: flex; flex-direction: column; gap: 3px; }
.logo-lockup__name {
  font: 900 var(--lockup-name)/1 var(--font-display); color: var(--color-navy);
  letter-spacing: .01em; white-space: nowrap;
}
.logo-lockup__rule { display: block; height: 2px; background: var(--color-orange); }
.logo-lockup__sub {
  font: 900 var(--lockup-sub)/1 var(--font-ui); letter-spacing: .3em;
  color: var(--color-orange); white-space: nowrap;
}
.logo-lockup--header { --lockup-icon: 38px; --lockup-name: 18px; --lockup-sub: 13.5px; }
.logo-lockup--mobile { --lockup-icon: 34px; --lockup-name: 16px; --lockup-sub: 12.5px; gap: 9px; }
.logo-lockup--footer { --lockup-icon: 34px; --lockup-name: 16px; --lockup-sub: 12.5px; }
.logo-lockup--menu   { --lockup-icon: 30px; --lockup-name: 14.5px; --lockup-sub: 11px; gap: 9px; }
.logo-lockup--menu .logo-lockup__name { letter-spacing: .02em; }
.logo-lockup--dark .logo-lockup__name { color: #fff; }

/* ---------- Site header ---------- */

/* Live height of the visible sticky header. site.js sets it to 0px while the header is
   tucked away, so sticky page furniture (filters sidebar, article TOC) sits directly under
   the header instead of being covered by it, and reclaims the space when it hides.
   Anchor jumps clear the header via scroll-padding-top. */
:root { --header-offset: var(--header-h); }
html { scroll-padding-top: calc(var(--header-offset) + 12px); }

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface-card); border-bottom: 1px solid var(--color-border);
  transition: transform .28s ease, box-shadow .28s ease;
}
/* Scroll-aware header (site.js): hides after 80px of downward scroll, slides back the moment the
   user scrolls up or tabs into it; never hides while the mobile menu is open. */
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-stuck { box-shadow: 0 2px 10px rgba(31,51,70,.08); }
body.menu-open .site-header { transform: none; }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.site-header__inner {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--chrome-pad);
  height: var(--header-h);
  display: flex; align-items: center; gap: 34px;
}
.site-header__spacer { flex: 1 1 auto; }
/* The actions slot is present on EVERY page (tools/sync-chrome.mjs writes it) and always
   occupies the same width, empty or not. The Saved button only exists on /used/, and it is
   also hidden until the visitor saves something, so without a reserved slot the nav's right
   edge moved twice: 34px between /used/ and every other page, and again the moment a listing
   was saved. Reserving the width pins the nav to the same x everywhere, in every state. */
.site-header__actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  flex: 0 0 var(--header-actions-w); min-width: var(--header-actions-w);
}
/* Marketplace layout: nav sits right after the logo, actions on the right */
.site-header--nav-left .site-header__inner { gap: 30px; }
.site-header--nav-left .site-header__spacer { order: 5; }
.site-header--nav-left .site-header__actions { order: 6; }

.primary-nav { display: flex; gap: 4px; }
.primary-nav a {
  position: relative; display: block; padding: 11px 14px 13px;
  font: 500 14.5px/1 var(--font-ui); color: var(--ink-2);
  border-radius: var(--r-input); text-decoration: none; white-space: nowrap;
  transition: background var(--ease-fast), color var(--ease-fast), box-shadow var(--ease-fast);
}
/* The active item goes bold, which made it wider, which moved the whole right-aligned nav a
   few px from page to page. Every item reserves its own bold width with a zero-height ghost
   of its label (data-nav, written by the sync tool), so the nav's width is the same on all
   six pages and only the styling changes. */
.primary-nav a::before {
  content: attr(data-nav);
  display: block; height: 0; overflow: hidden;
  font-weight: 700; visibility: hidden; pointer-events: none;
}
/* The two marketplace items carry a small orange glyph, because they are the pages we
   most want people to click: a price tag on Used Marketplace, a rising chart on Price
   Guide. The glyph is absolutely positioned inside extra left padding rather than sitting
   in the anchor's flow: the ::before ghost above only reserves the width of the label, so
   an in-flow icon would put those items outside the reservation and reintroduce the
   page-to-page drift the ghost exists to prevent. */
.primary-nav a.nav-ico { padding-left: 34px; }
.primary-nav a.nav-ico[aria-current]::after { left: 34px; }
.nav-ico__glyph {
  position: absolute; left: 12px; top: 50%; margin-top: -7.5px;
  width: 15px; height: 15px; color: var(--color-orange); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .nav-ico__glyph { transition: transform var(--ease-fast); transform-origin: 30% 30%; }
  /* the tag tilts, the chart lifts: each moves the way its own subject would */
  .primary-nav a[href="/used/"]:hover .nav-ico__glyph { transform: rotate(-8deg); }
  .primary-nav a[href="/used/price-guide/"]:hover .nav-ico__glyph { transform: translateY(-1.5px); }
}
.primary-nav a:hover, .primary-nav a:focus-visible {
  background: var(--surface-pill); color: var(--ink-1);
  box-shadow: inset 0 0 0 1px var(--color-border-ring); text-decoration: none;
}
/* aria-current="page" (exact URL) and aria-current="true" (section page, e.g. /bemer-vs-biomat/ under Comparisons) both get the pill */
.primary-nav a[aria-current] {
  color: var(--ink-1); font-weight: 700; background: var(--surface-pill);
  box-shadow: inset 0 0 0 1px var(--color-border-ring);
}
.primary-nav a[aria-current]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 7px; height: 3px;
  background: var(--color-orange); border-radius: 2px;
}

/* Hamburger (mobile only). The three lines carry their own width and are centred
   explicitly: Safari up to version 18 (iOS 18) gives every <button> "align-items:
   flex-start" in its built-in stylesheet, which shrank these empty spans to zero width,
   so iPhones on iOS 18 and earlier showed no menu button at all (found Oct 2, 2026).
   Margins rather than gap space the lines, so older button layouts space them too. */
.nav-toggle {
  display: none; box-sizing: border-box; flex-direction: column; justify-content: center; align-items: center;
  width: 44px; height: 44px; padding: 0 12px; margin-right: -12px;
  background: none; border: 0; cursor: pointer; border-radius: var(--r-input);
  transition: background var(--ease-fast); -webkit-tap-highlight-color: transparent;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--color-navy); border-radius: 1px; }
.nav-toggle span + span { margin-top: 4.5px; }
.nav-toggle:hover, .nav-toggle:focus-visible { background: var(--surface-pill); }
.nav-toggle:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }

/* ---------- Mobile slide-in menu (296px from the right) ---------- */

@keyframes mmSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes mmFade  { from { opacity: 0; } to { opacity: 1; } }

.mobile-menu { position: fixed; inset: 0; z-index: 100; }
.mobile-menu[hidden] { display: none; }
.mobile-menu__backdrop {
  position: absolute; inset: 0; background: rgba(23,34,44,.5); cursor: pointer;
  border: 0; padding: 0; margin: 0; width: 100%; height: 100%;
  animation: mmFade .22s ease both;
}
.mobile-menu__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 296px; max-width: 88vw;
  background: var(--surface-card); box-shadow: var(--shadow-menu);
  display: flex; flex-direction: column;
  animation: mmSlide .3s cubic-bezier(.2,.8,.3,1) both;
}
.mobile-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  height: 70px; padding: 0 10px 0 18px; background: var(--grad-menu-head); flex: 0 0 auto;
}
.mobile-menu__close {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; border-radius: var(--r-input); color: #fff;
  transition: background var(--ease-fast);
}
.mobile-menu__close:hover, .mobile-menu__close:focus-visible { background: rgba(255,255,255,.12); }
.mobile-menu__close:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.mobile-menu__body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; padding: 0 0 6px; }
.mobile-menu__label {
  padding: 18px 20px 10px; font: 700 12px/1 var(--font-ui);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}
.mobile-menu__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mobile-menu__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; font: 500 16px/1.2 var(--font-ui); color: var(--ink-2);
  border-top: 1px solid var(--color-border-menu); text-decoration: none;
  transition: background var(--ease-fast);
}
.mobile-menu__list li:last-child a { border-bottom: 1px solid var(--color-border-menu); }
.mobile-menu__list a svg { flex: 0 0 auto; color: var(--ink-4); }
.mobile-menu__list a:hover, .mobile-menu__list a:focus-visible { background: var(--surface-page); text-decoration: none; }
.mobile-menu__list a[aria-current] {
  font-weight: 700; color: var(--ink-1); background: var(--surface-tint);
  box-shadow: inset 3px 0 0 var(--color-orange);
}
.mobile-menu__list a[aria-current] svg { color: var(--color-orange); }
/* Same price tag as the desktop nav. In here it sits in the flow, so the row switches from
   space-between (which would spread three children) to packing left with the chevron pushed
   right by auto margin. */
.mobile-menu__list a.nav-ico { justify-content: flex-start; gap: 11px; }
.mobile-menu__list a.nav-ico > svg:last-child { margin-left: auto; }
.mobile-menu__list a .nav-ico__glyph {
  position: static; margin-top: 0; width: 17px; height: 17px; color: var(--color-orange);
}
.mobile-menu__foot {
  padding: 16px 20px 20px; border-top: 1px solid var(--color-border);
  background: var(--surface-page); flex: 0 0 auto;
}
.mobile-menu__cta {
  display: flex; align-items: center; justify-content: center; height: 52px;
  background: var(--grad-button); box-shadow: var(--shadow-button); color: #fff;
  font: 700 15.5px/1 var(--font-ui); border-radius: var(--r-btn); text-decoration: none;
}
.mobile-menu__cta:hover, .mobile-menu__cta:focus-visible { color: #fff; text-decoration: none; filter: brightness(1.05); }
.mobile-menu__note { margin: 12px 0 0; font: 400 13px/1.5 var(--font-ui); color: var(--ink-3); text-align: center; }

body.menu-open { overflow: hidden; }

/* ---------- Footer ---------- */

.page-footer {
  /* Breathing room before the footer on every page (owner: content was butting against it) */
  position: relative; overflow: hidden; margin-top: clamp(56px, 7vw, 88px);
  padding: 40px var(--chrome-pad) 30px; background: var(--grad-footer);
  color: var(--on-dark-muted); font-family: var(--font-ui);
}
.page-footer__bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-bar);
}
.page-footer__mark {
  position: absolute; left: -80px; bottom: -110px; width: 400px; height: 400px;
  opacity: .045; transform: rotate(8deg); pointer-events: none; user-select: none;
}
.page-footer__inner { position: relative; max-width: var(--wide-column); margin: 0 auto; }
.page-footer__grid {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 44px;
}
.page-footer__brand { max-width: 300px; }
.page-footer__brand .logo-lockup { margin-bottom: 14px; }
.page-footer__blurb { margin: 0; font: 400 14px/1.6 var(--font-ui); color: var(--on-dark-muted); }
.page-footer__blurb a { color: var(--on-dark-link); text-decoration: none; }
.page-footer__blurb a:hover { color: #fff; }
.page-footer__col { display: flex; flex-direction: column; gap: 9px; font: 400 14.5px/1.4 var(--font-ui); }
.page-footer__heading {
  margin: 0; font: 700 13px/1 var(--font-ui); letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-dark-label);
}
.page-footer__col a { color: var(--on-dark-link); text-decoration: none; transition: color .12s ease; }
.page-footer__col a:hover, .page-footer__col a:focus-visible { color: #fff; text-decoration: none; }
.page-footer__legal {
  margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--on-dark-rule);
  font: 400 13px/1.6 var(--font-ui); color: var(--on-dark-label);
}
.page-footer__legal p { margin: 0 0 8px; }
.page-footer__legal p:last-child { margin-bottom: 0; }
.page-footer__legal b { font-weight: 500; color: var(--on-dark-link); }
.page-footer__legal a { color: var(--on-dark-link); text-decoration: none; }
.page-footer__legal a:hover { color: #fff; }
.page-footer__legal-row { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }

/* ---------- Narrow desktop (920-999px): six nav items + lockup must fit without overflow ---------- */

@media (min-width: 920px) and (max-width: 999.98px) {
  .site-header__inner { gap: 18px; }
  .site-header--nav-left .site-header__inner { gap: 16px; }
  .primary-nav { gap: 2px; }
  .primary-nav a { padding: 11px 9px 13px; font-size: 14px; }
  .primary-nav a[aria-current]::after { left: 9px; right: 9px; }
  /* The compact Saved pill drops its caret and word spacing here, so the reserved slot
     shrinks with it; at 132px the six nav items plus the lockup would not fit. */
  :root { --header-actions-w: 108px; }
  .site-header__actions { gap: 10px; }
}

/* ---------- Mobile (header 62px, hamburger, stacked footer) ---------- */

@media (max-width: 919.98px) {
  :root { --header-offset: var(--header-h-mobile); }
  .disclosure-bar { padding: 8px 14px; font-size: 13px; }
  .disclosure-bar__extra { display: none; }

  .site-header__inner {
    height: var(--header-h-mobile); padding: 0 var(--col-pad-mobile);
    gap: 14px; justify-content: space-between;
  }
  .site-header .logo-lockup--header { --lockup-icon: 34px; --lockup-name: 16px; --lockup-sub: 12.5px; gap: 9px; }
  .primary-nav { display: none; }
  .site-header__spacer { display: none; }
  /* No nav to keep still on mobile, so drop the reservation: the slot sizes to the Saved
     pill on /used/ and disappears entirely on the pages that have nothing to put in it. */
  .site-header__actions { flex: 0 0 auto; min-width: 0; }
  .site-header__actions:empty { display: none; }
  .site-header--nav-left .site-header__actions { order: 0; margin-left: auto; }
  .nav-toggle { display: flex; }

  .page-footer { padding: 24px 18px 28px; }
  .page-footer__mark { width: 260px; height: 260px; left: -70px; bottom: -90px; }
  .page-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .page-footer__brand { grid-column: 1 / -1; max-width: none; }
  .page-footer__brand .logo-lockup--footer { --lockup-icon: 32px; --lockup-name: 15px; --lockup-sub: 12px; }
  .page-footer__col { gap: 9px; }
  .page-footer__heading { font-size: 12.5px; }
  .page-footer__legal { margin-top: 20px; padding-top: 14px; }
}

@media (max-width: 380px) {
  .page-footer__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu__backdrop, .mobile-menu__panel { animation: none; }
}