/* ============================================================
   Site-wide header + footer navigation.
   See HEADER-FOOTER-REDESIGN-SPEC.md (2026-08-17) for the full spec.

   Rendered once, inline, inside src/layouts/Layout.astro (§4.1 option
   c of that spec) — every Layout page gets this markup for free, with
   zero new Astro component imports (the chunk-graph incident documented
   in playground.astro's file header / blog.css's old header comment
   cannot trigger here: this file lives under public/, which Vite never
   processes, and the header/footer markup is inline in Layout.astro,
   not a new shared-component import).

   Static file, linked unconditionally from Layout.astro's <head> (like
   fonts.css) because the homepage fragment (src/fragments/homepage.html)
   never loads refresh.css. Because that same fragment defines its own
   :root tokens with the SAME NAMES as refresh.css but DIFFERENT VALUES
   (--text, --muted, --bg — spec §0.4), every rule below reads only the
   namespaced --sbbnav-* custom properties defined locally on
   .sbb-site-header / .sbb-site-footer — never a bare var(--text) etc.
   — so the header and footer render identically on every page
   regardless of what other stylesheet (if any) is also loaded.

   playground.astro links this file too (for its footer) but does NOT
   render the header — it keeps its own progress-rail chrome.

   Light theme only — matches the rest of the site (no dark variant).
   ============================================================ */

.sbb-site-header,
.sbb-site-footer,
.sbb-site-header__overlay {
  --sbbnav-text: #1d1d1f;
  --sbbnav-muted: #6e6e73;
  --sbbnav-accent: #1A73E8;
  --sbbnav-accent-soft: rgba(26, 115, 232, 0.08);
  --sbbnav-panel-border: rgba(29, 29, 31, 0.08);
  --sbbnav-shadow: 0 20px 48px rgba(17, 17, 17, 0.08);
  --sbbnav-radius-control: 12px;
  /* Not in the spec's literal token snippet, but §3.2 requires the
     panel open/close transition to use "the --ease curve" — copied
     verbatim from refresh.css's --ease so this file stays self-
     sufficient per §3.4 instead of reading refresh.css's bare token. */
  --sbbnav-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sbbnav-font: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  font-family: var(--sbbnav-font);
  box-sizing: border-box;
  color-scheme: light;
}
.sbb-site-header *,
.sbb-site-footer *,
.sbb-site-header__overlay * { box-sizing: border-box; }

/* Anchor offset for the sticky header — every homepage section the
   Product panel deep-links needs scroll-margin so its heading clears
   the sticky bar (spec §0.3 ids, §3.4). */
#features, #auto-switch, #live-preview, #use-cases, #faq,
#why-lighter, #cleanup { scroll-margin-top: 76px; }

/* ---------------------------------------------------------------
   Header bar (§3.1)
   --------------------------------------------------------------- */
.sbb-site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(247, 249, 252, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sbbnav-panel-border);
}
.sbb-site-header__shell {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin-inline: auto;
  padding: 12px clamp(18px, 4vw, 24px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
}
.sbb-site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sbbnav-text);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none;
  flex-shrink: 0;
}
.sbb-site-header__logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
}
.sbb-site-header__nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}
.sbb-site-header__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sbb-site-header__item { position: relative; }

.sbb-site-header__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--sbbnav-muted);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color 140ms ease;
}
.sbb-site-header__trigger:hover,
.sbb-site-header__trigger[aria-expanded="true"] { color: var(--sbbnav-accent); }
.sbb-site-header__chevron {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform 140ms ease;
}
.sbb-site-header__trigger[aria-expanded="true"] .sbb-site-header__chevron,
.sbb-site-header__overlay-trigger[aria-expanded="true"] .sbb-site-header__chevron {
  transform: rotate(180deg);
}

.sbb-site-header__link {
  color: var(--sbbnav-muted);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.sbb-site-header__link:hover { color: var(--sbbnav-accent); }

.sbb-site-header__cta {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 16px;
  border-radius: var(--sbbnav-radius-control);
  background: var(--sbbnav-accent);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.sbb-site-header__cta:hover { color: #fff; transform: translateY(-0.5px); }

/* ---- Desktop dropdown panels (§3.2) ---- */
.sbb-site-header__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--sbbnav-panel-border);
  border-radius: 16px;
  box-shadow: var(--sbbnav-shadow);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 140ms var(--sbbnav-ease), transform 140ms var(--sbbnav-ease), visibility 140ms;
}
.sbb-site-header__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.sbb-site-header__panel--compare,
.sbb-site-header__panel--blog,
.sbb-site-header__panel--help,
.sbb-site-header__panel--lang {
  left: auto;
  right: 0;
}
.sbb-site-header__panel--compare { min-width: 520px; }
/* Help panel (KNOWLEDGE-BASE-SPEC.md section 3.5): 7 category links, one
   line each — same single-column shape as --blog, slightly wider for the
   longest label ("Where the bar appears"). */
.sbb-site-header__panel--help { min-width: 260px; }
/* Language switcher (i18n rollout): a single column of 6 locale entries
   is narrower than the other panels' 280px default. */
.sbb-site-header__panel--lang { min-width: 180px; }

/* "You are here" state for the current page's own locale inside the
   language panel — the one dropdown entry that isn't a link. Visual
   weight ported from the old (now-removed) .lang-switcher/.lang-select
   rules in src/fragments/homepage.html's stylesheet (an orphaned,
   pre-header-redesign language <select> — see that file's history):
   ~8px/12px padding, ~8px radius, 1px border, 14px/600 text — reworked
   here as a filled pill using this file's own --sbbnav-* tokens instead
   of that fragment's bare --line/--paper/--text (see file header). */
.sbb-site-header__lang-current {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--sbbnav-panel-border);
  background: var(--sbbnav-accent-soft);
  color: var(--sbbnav-text);
  font-size: 14px;
  font-weight: 600;
  cursor: default;
}
.sbb-site-header__overlay-lang-current {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--sbbnav-panel-border);
  background: var(--sbbnav-accent-soft);
  color: var(--sbbnav-text);
  font-size: 15px;
  font-weight: 600;
  cursor: default;
}
/* 280px (the shared default) wraps "Playground — try it in your browser"
   onto two lines, the one row in this panel that doesn't fit — widen just
   this panel rather than the shared default, which the Compare/Blog panels
   don't need. */
.sbb-site-header__panel--product { min-width: 320px; }

.sbb-site-header__panel-link {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--sbbnav-text);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.sbb-site-header__panel-link:hover { background: var(--sbbnav-accent-soft); }
.sbb-site-header__panel-link--index {
  color: var(--sbbnav-accent);
  font-weight: 700;
}

.sbb-site-header__panel-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 6px;
}
.sbb-site-header__panel-columns .sbb-site-header__panel-link--index {
  grid-column: 1 / -1;
}

.sbb-site-header__divider {
  border: none;
  border-top: 1px solid var(--sbbnav-panel-border);
  margin: 6px 4px;
}

@media (prefers-reduced-motion: reduce) {
  .sbb-site-header__panel,
  .sbb-site-header__chevron { transition: none; }
}

/* ---- Mobile burger + full-screen overlay (§2.3, <880px) ---- */
.sbb-site-header__burger {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--sbbnav-panel-border);
  background: rgba(255, 255, 255, 0.6);
  color: var(--sbbnav-text);
  cursor: pointer;
  flex-shrink: 0;
}
.sbb-site-header__burger-icon { width: 18px; height: 18px; }
.sbb-site-header__burger-icon--close { display: none; }
.sbb-site-header__burger[aria-expanded="true"] .sbb-site-header__burger-icon--menu { display: none; }
.sbb-site-header__burger[aria-expanded="true"] .sbb-site-header__burger-icon--close { display: block; }

.sbb-site-header__overlay {
  display: none;
  position: fixed;
  z-index: 1;
  inset: 0;
  background: #f7f9fc;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 76px 20px 40px;
}
.sbb-site-header__overlay.is-open { display: block; }

html.sbbnav-lock { overflow: hidden; }

.sbb-site-header__overlay-group { border-bottom: 1px solid var(--sbbnav-panel-border); }
.sbb-site-header__overlay-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 14px 4px;
  min-height: 44px;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  color: var(--sbbnav-text);
  cursor: pointer;
}
.sbb-site-header__overlay-panel {
  display: none;
  flex-direction: column;
  padding: 0 4px 14px;
}
.sbb-site-header__overlay-panel.is-open { display: flex; }
.sbb-site-header__overlay-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--sbbnav-text);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.sbb-site-header__overlay-link:hover,
.sbb-site-header__overlay-link:active { background: var(--sbbnav-accent-soft); }
.sbb-site-header__overlay-link--index { color: var(--sbbnav-accent); font-weight: 700; }

.sbb-site-header__overlay-direct {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--sbbnav-panel-border);
  color: var(--sbbnav-text);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}

.sbb-site-header__overlay-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  border-radius: var(--sbbnav-radius-control);
  background: var(--sbbnav-accent);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}

@media (max-width: 879px) {
  .sbb-site-header__list,
  .sbb-site-header__link { display: none; }
  .sbb-site-header__burger { display: inline-flex; }
  .sbb-site-header__nav { gap: 10px; }
  .sbb-site-header__cta { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
}
@media (max-width: 400px) {
  .sbb-site-header__brand span { display: none; }
}
@media (min-width: 880px) {
  .sbb-site-header__overlay { display: none !important; }
}

/* ---------------------------------------------------------------
   Footer (§2.4)
   --------------------------------------------------------------- */
.sbb-site-footer {
  padding: 56px 0 36px;
  border-top: 1px solid var(--sbbnav-panel-border);
}
/* Horizontal padding moved onto the shell (matching .sbb-site-header__shell's
   own max-width-then-padding order) so the footer's content edges line up
   with the header's above ~1104px — putting padding on the outer element
   instead made the two content boxes different widths (1080px vs the
   header's 1032px) and left the brand lockups visibly out of alignment. */
.sbb-site-footer__shell {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 24px);
}

.sbb-site-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
}
.sbb-site-footer__col-title {
  margin: 0 0 12px;
  color: var(--sbbnav-text);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.sbb-site-footer__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sbb-site-footer__col-link {
  color: var(--sbbnav-muted);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.sbb-site-footer__col-link:hover { color: var(--sbbnav-accent); text-decoration: underline; }

.sbb-site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--sbbnav-panel-border);
}
.sbb-site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sbbnav-text);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.sbb-site-footer__logo { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; }
.sbb-site-footer__cta {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 16px;
  border-radius: var(--sbbnav-radius-control);
  background: var(--sbbnav-accent);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 140ms ease;
}
.sbb-site-footer__cta:hover { color: #fff; transform: translateY(-0.5px); }
.sbb-site-footer__copy {
  flex-basis: 100%;
  margin-top: 4px;
  color: var(--sbbnav-muted);
  font-size: 12.5px;
}

@media (max-width: 879px) {
  .sbb-site-footer__columns { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}
@media (max-width: 559px) {
  .sbb-site-footer__columns { grid-template-columns: 1fr; gap: 26px; }
  .sbb-site-footer__bottom { justify-content: center; text-align: center; }
  .sbb-site-footer__copy { text-align: center; }
}