/* design-systems/mobile-responsive.css
   ─────────────────────────────────────────────────────────────────────
   Universal mobile responsive layer for the design-system showcase
   project. Loaded AFTER each DS's _shared.css; rules only apply at
   <=768px so desktop is mathematically untouched. Pairs with
   ../mobile-nav.js (which auto-injects the hamburger button).

   Supported nav patterns (from auditing all 15 DSes):
     A — `.nav` with `.lockup` + `<ul>` + `.right`
         (imperial-shinez, demarco, prime-wellness)
     B — `.nav` with `.nav-brand` + `.nav-links` (CTA inline as a child)
         (sbc, n50, ecosia-light, master-craftsmen, ymca, ymca-montgomery,
          goettl, ps-edu)
     C — `.nav` with `.container > .nav-shell` wrapper + `.nav-buttons`
         (centimark, lightsource-bp)
     D — `.nav` with `.container > .brand-mark` (horizon-fix custom)
     E — `.nav-mc` (mc — different root class)
   ───────────────────────────────────────────────────────────────────── */

/* ─── Hamburger button — base styles, hidden until @media kicks in ─── */
.nav-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
  border-radius: 10px;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink, #1a1a1a);
}
.nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: background 200ms ease;
}
.nav-burger span::before,
.nav-burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: top 240ms ease, transform 240ms ease;
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after  { top:  6px; }

/* On dark navs, recolor bars to white. Covers .over-dark, .over-photo,
   .nav-mc.dark — the canonical dark-nav modifiers across the project. */
.nav.over-dark .nav-burger,
.nav.over-photo .nav-burger,
.nav-mc.dark .nav-burger,
.nav-mc .nav-burger {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

@media (max-width: 768px) {

  /* ═══════════════════════════════════════════════════════════════════
     TOKENS — shrink the spacing scale for phones. Each DS uses these
     custom properties throughout, so changing them here cascades into
     section padding, container gutters, etc., without touching components.
     ═══════════════════════════════════════════════════════════════════ */
  :root {
    --gutter: 1rem;
    --section: 64px;
    --section-sm: 44px;
    --section-lg: 88px;
  }

  /* ═══════════════════════════════════════════════════════════════════
     SHOW & ANIMATE HAMBURGER
     ═══════════════════════════════════════════════════════════════════ */
  .nav-burger { display: inline-flex; }
  body.nav-open .nav-burger span { background: transparent; }
  body.nav-open .nav-burger span::before { top: 0; transform: rotate(45deg); }
  body.nav-open .nav-burger span::after  { top: 0; transform: rotate(-45deg); }
  body.nav-open { overflow: hidden; }

  /* ═══════════════════════════════════════════════════════════════════
     HIDE SHOWCASE CHROME
     `#ds-back-link` (injected by ../palette-toggle.js) and the
     `.palette-toggle` panel both overlap the brand layout at phone
     widths and aren't useful here. `.ds-back` is the manual variant
     used by horizon-fix (and any DS that ships its own back link in
     the HTML rather than relying on the JS injection).
     ═══════════════════════════════════════════════════════════════════ */
  #ds-back-link,
  .ds-back,
  .palette-toggle { display: none !important; }

  /* ═══════════════════════════════════════════════════════════════════
     NAV BAR — universal layout (Patterns A/B/D/E)
     `backdrop-filter` and `filter` (used by some DSes for translucent
     navs) create a new containing block for fixed-position descendants,
     which would size the drawer to the nav's height instead of the
     viewport. Disable both at mobile so the drawer can fill the screen.
     ═══════════════════════════════════════════════════════════════════ */
  .nav,
  .nav-mc {
    padding: 12px 16px;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    filter: none;
  }
  /* Logo sizing — covers the four brand wrappers used across DSes */
  .nav .lockup img,
  .nav .nav-brand img,
  .nav-mc .nav-brand img,
  .nav .container .brand-mark img,
  .nav .nav-shell .nav-brand img,
  .nav-mc .lockup img {
    height: 40px;
    max-width: 160px;
    width: auto;
  }
  .nav .lockup .word,
  .nav-mc .nav-brand,
  .nav-mc .lockup .word {
    font-size: 16px;
  }

  /* ═══════════════════════════════════════════════════════════════════
     PATTERN C — wrapper nav (centimark, lightsource-bp)
     The nav itself doesn't have flex padding — the inner .container does.
     centimark uses `display: grid; grid-template-columns: auto 1fr auto`
     on .nav-shell, which can't fit 4 children (brand + drawer + burger +
     buttons). Force flex layout at mobile so the items lay out cleanly.
     ═══════════════════════════════════════════════════════════════════ */
  .nav > .container { padding: 12px 16px; }
  .nav .nav-shell {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    grid-template-columns: none;   /* unset any desktop grid template */
  }
  .nav .nav-shell .nav-brand { flex: 0 1 auto; min-width: 0; }
  .nav .nav-buttons {
    flex-shrink: 0;
    gap: 8px;
    margin-left: auto;             /* pin CTA buttons to the right */
  }
  .nav .nav-buttons .btn {
    padding: 10px 14px;
    font-size: 12px;
  }

  /* ═══════════════════════════════════════════════════════════════════
     PATTERN A DRAWER — `.nav > ul`
     ═══════════════════════════════════════════════════════════════════ */
  .nav > ul,
  .nav-mc > ul {
    display: flex;                /* override DSes that set display:none at smaller widths */
    position: fixed;
    top: var(--mobile-drawer-top, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-pure, var(--bg, #fff));
    color: var(--ink, #111);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 16px 32px;
    margin: 0;
    border-top: 1px solid var(--border, rgba(0, 0, 0, 0.1));
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 240ms ease, opacity 200ms ease;
    z-index: 100;
    overflow-y: auto;
    list-style: none;
  }
  .nav > ul li,
  .nav-mc > ul li {
    width: 100%;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.1));
    list-style: none;
    margin: 0;
  }
  .nav > ul li:last-child,
  .nav-mc > ul li:last-child { border-bottom: none; }
  .nav > ul a,
  .nav-mc > ul a {
    display: block;
    padding: 16px 4px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink, #111);
    text-decoration: none;
  }
  .nav > ul a::after,
  .nav-mc > ul a::after { display: none; }

  body.nav-open .nav > ul,
  body.nav-open .nav-mc > ul {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* ═══════════════════════════════════════════════════════════════════
     PATTERN B+C DRAWER — `.nav .nav-links`
     The link container is a div (B) or ul (C) holding links inline.
     We turn it into a fixed-position drawer at the same coordinates.
     Note: many Pattern B DSes ship a `.nav-links { display: none }` at
     ≤880px in their _shared.css — we override with `display: flex`.
     ═══════════════════════════════════════════════════════════════════ */
  /* `.nav .links` covers Pattern D (horizon-fix). `.nav-mc .nav-links`
     covers Pattern E (mc, which uses `.nav-mc` as the root class). */
  .nav .nav-links,
  .nav .links,
  .nav-mc .nav-links {
    display: flex;
    position: fixed;
    top: var(--mobile-drawer-top, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;                   /* avoid 533px overflow on grid-item nav-links (centimark) */
    background: var(--bg-pure, var(--bg, #fff));
    color: var(--ink, #111);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;   /* override desktop `justify-content: flex-end` (centimark) */
    gap: 0;
    padding: 16px 16px 32px;
    margin: 0;
    border-top: 1px solid var(--border, rgba(0, 0, 0, 0.1));
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 240ms ease, opacity 200ms ease;
    z-index: 100;
    overflow-y: auto;
    list-style: none;
  }
  /* Pattern B link items (direct `<a>` children of .nav-links).
     The `.nav.over-dark` and `.nav.over-photo` selectors are needed
     because those modifiers set `color: #fff` on .nav-links a in the
     desktop CSS — that would render links invisible against the
     drawer's light background without an override.
     `.nav .links > a` covers Pattern D (horizon-fix).
     `.nav-mc .nav-links > a` covers Pattern E (mc). */
  .nav .nav-links > a,
  .nav .links > a,
  .nav-mc .nav-links > a,
  .nav.over-dark .nav-links > a,
  .nav.over-photo .nav-links > a,
  .nav-mc.dark .nav-links > a {
    width: 100%;
    padding: 16px 4px;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.1));
    font-size: 16px;
    font-weight: 500;
    color: var(--ink, #111);
    text-align: left;
    text-decoration: none;
    background: transparent;
  }
  /* Pattern C link items (`<li><a>` inside .nav-links ul) */
  .nav .nav-links > li,
  .nav.over-dark .nav-links > li,
  .nav.over-photo .nav-links > li {
    width: 100%;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.1));
    list-style: none;
    margin: 0;
  }
  .nav .nav-links > li > a,
  .nav.over-dark .nav-links > li > a,
  .nav.over-photo .nav-links > li > a {
    display: block;
    padding: 16px 4px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink, #111);
    text-decoration: none;
  }
  .nav .nav-links > a:last-child,
  .nav .nav-links > li:last-child { border-bottom: none; }

  /* Suppress decorative ::before pseudos that DSes attach to nav links
     for desktop hover/active indicators (e.g. centimark's 20px brand-color
     circle above active link). They bleed into the mobile drawer as
     stray floating dots. */
  .nav .nav-links > a::before,
  .nav .nav-links > li > a::before,
  .nav .links > a::before,
  .nav-mc .nav-links > a::before {
    display: none !important;
  }

  /* The CTA-as-link inside .nav-links gets centered button styling */
  .nav .nav-links > a.nav-cta,
  .nav .nav-links > a.btn {
    margin-top: 16px;
    padding: 14px 24px;
    text-align: center;
    color: #fff;
    border-bottom: none;
    border-radius: var(--radius, 999px);
  }

  body.nav-open .nav .nav-links,
  body.nav-open .nav .links,
  body.nav-open .nav-mc .nav-links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* ═══════════════════════════════════════════════════════════════════
     RIGHT-CTA SLOT (Pattern A — sits beside the burger on the bar)
     ═══════════════════════════════════════════════════════════════════ */
  .nav .right { gap: 8px; }
  .nav .right .btn,
  .nav .right .btn-sm { padding: 10px 14px; font-size: 12px; }

  /* Pattern D (horizon-fix): a stand-alone `.btn` lives directly inside
     `.nav .container` as a sibling of `.brand-mark` and `.links`. Tighten
     so it fits on the mobile bar beside the burger without clipping. */
  .nav > .container > .btn,
  .nav > .container > a.btn {
    padding: 8px 12px;
    font-size: 11px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* ═══════════════════════════════════════════════════════════════════
     TYPE SCALE TIGHTENING
     ═══════════════════════════════════════════════════════════════════ */
  .display { font-size: clamp(40px, 11vw, 64px); line-height: 1.04; }
  .h1, h1  { font-size: clamp(34px, 9vw, 52px);  line-height: 1.06; }
  .h2, h2  { font-size: clamp(26px, 7vw, 38px);  line-height: 1.12; }
  .h3, h3  { font-size: clamp(20px, 5.4vw, 26px); }
  .h4, h4  { font-size: 18px; }
  .lede    { font-size: 15px; line-height: 1.6; }
  .lede-lg { font-size: 17px; line-height: 1.55; }

  /* ═══════════════════════════════════════════════════════════════════
     CONTAINERS — tighter side padding
     ═══════════════════════════════════════════════════════════════════ */
  .container,
  .container-narrow,
  .container-wide,
  .container-tight { padding-left: 16px; padding-right: 16px; }

  /* ═══════════════════════════════════════════════════════════════════
     GENERIC GRIDS — collapse multi-col to single col
     ═══════════════════════════════════════════════════════════════════ */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .row-2col {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .row-2col.flip > .col-img { order: 0; }
  .row-2col .col-img { min-height: 240px; }

  /* ═══════════════════════════════════════════════════════════════════
     SECTION-HEAD — tighter bottom margin
     ═══════════════════════════════════════════════════════════════════ */
  .section-head { margin-bottom: 32px; }

  /* ═══════════════════════════════════════════════════════════════════
     HERO VARIANTS — drop the desktop min-height so content can flow
     ═══════════════════════════════════════════════════════════════════ */
  .hero-photo,
  .hero-centered,
  .hero-split,
  .hero-classic,
  .hero {
    min-height: auto;
    padding: 88px 16px 72px;
  }
  .hero-photo .container,
  .hero-centered .container,
  .hero-split .container,
  .hero .container { max-width: 100%; }
  .hero-photo h1,
  .hero-centered h1,
  .hero-split h1,
  .hero h1 {
    font-size: clamp(34px, 9vw, 52px);
    line-height: 1.05;
  }
  .hero-photo .lede,
  .hero-centered .lede,
  .hero-split .lede,
  .hero .lede {
    font-size: 15.5px;
    line-height: 1.55;
    margin-bottom: 24px;
  }
  .hero-photo .actions,
  .hero-centered .actions,
  .hero-split .actions,
  .hero .actions { gap: 10px; flex-wrap: wrap; }
  .hero-photo .actions .btn,
  .hero-centered .actions .btn,
  .hero-split .actions .btn,
  .hero .actions .btn { padding: 13px 22px; font-size: 14px; }

  /* ═══════════════════════════════════════════════════════════════════
     SOCIAL PROOF strip
     ═══════════════════════════════════════════════════════════════════ */
  .social-proof {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 0;
  }
  .social-proof .divider { display: none; }
  .social-proof .item {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  /* ═══════════════════════════════════════════════════════════════════
     PROCESS STEPS, BEFORE-AFTER
     ═══════════════════════════════════════════════════════════════════ */
  .process-steps { grid-template-columns: 1fr; gap: 14px; }
  .before-after { grid-template-columns: 1fr; }
  .before-after .ba-divider { display: none; }
  .before-after .ba-half { aspect-ratio: 16/10; }

  /* ═══════════════════════════════════════════════════════════════════
     CTA BAND
     ═══════════════════════════════════════════════════════════════════ */
  .cta-band {
    padding: 56px 24px;
    text-align: center;
  }
  .cta-band h2 { font-size: clamp(26px, 7vw, 36px); }
  .cta-band .actions { flex-direction: column; align-items: stretch; }
  .cta-band .actions .btn { width: 100%; justify-content: center; }

  /* ═══════════════════════════════════════════════════════════════════
     FOOTER — collapse to single col, tighter padding
     ═══════════════════════════════════════════════════════════════════ */
  .footer { padding: 56px 16px 28px; }
  .footer .grid,
  .footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 28px;
    padding-bottom: 24px;
  }
  .footer .legal,
  .footer-bottom {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }

  /* ═══════════════════════════════════════════════════════════════════
     BUTTONS — slightly tighter on phones
     ═══════════════════════════════════════════════════════════════════ */
  .btn, .button { padding: 13px 24px; font-size: 14px; }
  .btn-lg { padding: 16px 28px; font-size: 15px; }

  /* ═══════════════════════════════════════════════════════════════════
     SX-SHELL (sections.html catalog) — stack index above main
     ═══════════════════════════════════════════════════════════════════ */
  .sx-header {
    padding: 14px 16px 12px;
    position: static;
  }
  .sx-header h1 { font-size: 18px; }
  .sx-header h1 small { display: block; margin: 4px 0 0; }
  .sx-header p { font-size: 13px; }
  .sx-body { grid-template-columns: 1fr; }
  .sx-index {
    position: static;
    margin: 16px;
    max-height: none;
    padding: 16px;
  }
  .sx-main { padding: 16px 16px 64px; }
  .sx-pattern { padding: 24px 18px 28px; }
  .sx-demo { padding: 20px; }

  /* ═══════════════════════════════════════════════════════════════════
     PAGES GALLERY (pages.html)
     ═══════════════════════════════════════════════════════════════════ */
  .pages-gallery { padding: 16px 16px 64px; }
  .pages-gallery .grid { gap: 20px; }

  /* ═══════════════════════════════════════════════════════════════════
     DS-NAV (catalog navigation in design-system.html)
     ═══════════════════════════════════════════════════════════════════ */
  .ds-nav { padding: 12px 16px; flex-wrap: wrap; }
  /* both spellings: .ds-nav-tabs (14 kits) and the house-format .tabs (22 kits) */
  .ds-nav-tabs, .ds-nav .tabs { font-size: 11px; gap: 12px; flex-wrap: wrap; }
  .ds-nav-inner { flex-wrap: wrap; gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   STICKY MOBILE CALL BAR — opt-in per kit via `--ds-callbar: 1`
   ═══════════════════════════════════════════════════════════════════════
   mobile-nav.js builds `#ds-callbar` only for kits that set that custom
   property, and only while the viewport is narrow. Layout lives here; the
   per-control colours are set inline by the script, read off the kit's own
   rendered CTA so no kit-specific token names are needed.

   `body.has-callbar` is added by the script, so hiding the nav actions row
   applies ONLY where the bar is actually carrying it. Without that guard this
   rule would strip the phone number from the 34 kits that never opted in.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.has-callbar .nav .actions { display: none; }

  .ds-callbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    display: flex;
    gap: 8px;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.14);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.10);
  }
  /* flex-basis 0 + min-width 0 so a long label wraps inside its own pill
     instead of widening the bar past the viewport. */
  .ds-callbar > a {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 48px;
    padding: 6px 10px;
    border: 2px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.9375rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  /* The bar floats over the page, so the last section needs clearance or the
     footer's final row sits under it and cannot be read or tapped. */
  body.has-callbar { padding-bottom: 80px; }
  /* The open drawer must sit above the bar, not behind it. */
  body.nav-open .ds-callbar { display: none; }
}