/* ============================================================
   chrome.css , the SHARED marketing header + footer + notice bar.

   Rendered on BOTH gunicorn services: the marketing site (site.css) and the
   public app surfaces (Code Explorer + /try/, which load tokens.css +
   components.css). To render identically on both without clobbering either
   design system, every selector is chrome- prefixed and every custom property
   is --mkt- prefixed and SCOPED to the chrome elements (never :root, never
   tokens.css). Fonts are set explicitly here (Inter body / Georgia display),
   since the app's body font is DM Sans / Fraunces.

   The visual rules are ported verbatim from static/css/site.css (its sections
   3 notice/header/lang, 6 footer, and the chrome parts of the 980/680 +
   reduced-motion rules), renamed to the chrome- classes.

   KEEP THE PALETTE BELOW IN SYNC WITH static/css/site.css :root.
   ============================================================ */

/* palette (copied from site.css :root) + fonts, scoped to the chrome only */
.chrome-notice, .chrome-header, .chrome-footer {
  --mkt-ink: #10262d;
  --mkt-ink-2: #29434a;
  --mkt-muted: #667b7f;
  --mkt-paper: #f6f4ee;
  --mkt-line: #dbe2de;
  --mkt-green: #0b6b57;
  --mkt-green-2: #085846;
  --mkt-mint: #dff3e9;
  --mkt-navy: #0f2e35;
  --mkt-max: 1180px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

/* link + button resets: the app's components.css has no global a{} reset, so
   the chrome sets its own (links inherit their container colour, no underline) */
.chrome-notice a, .chrome-header a, .chrome-footer a { color: inherit; text-decoration: none; }
.chrome-burger { font: inherit; cursor: pointer; }

/* shared max-width container (site.css .shell, kept chrome-local) */
.chrome-shell { width: min(calc(100% - 40px), var(--mkt-max)); margin-inline: auto; }

/* ---------- notice bar ---------- */
.chrome-notice {
  color: #e6f3ef;
  background: var(--mkt-navy);
  font-size: 14px;
}
.chrome-notice .chrome-shell {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  padding-block: 8px;
  text-align: center;
}
.chrome-notice strong { color: #fff; font-weight: 700; }
/* the full promise stays visible at every width; balance keeps a two-line
   wrap even instead of a long first line with an orphan word */
.chrome-notice .chrome-shell > span { text-wrap: balance; }

/* ---------- sticky header ---------- */
.chrome-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(15, 46, 53, .09);
  background: rgba(246, 244, 238, .9);
  backdrop-filter: blur(18px);
}
.chrome-nav { display: flex; align-items: center; min-height: 76px; }
.chrome-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 24px/1 Georgia, "Times New Roman", serif; color: var(--mkt-ink);
}
.chrome-nav-links {
  display: flex; align-items: center; gap: 30px; margin-left: auto;
  color: var(--mkt-ink-2); font-size: 14px; font-weight: 650;
}
.chrome-nav-links a:hover { color: var(--mkt-green); }
.chrome-nav-actions { display: flex; align-items: center; gap: 10px; margin-left: 28px; }
.chrome-burger {
  display: none; flex-direction: column; gap: 5px; margin-left: 18px;
  padding: 10px; border: 0; background: transparent;
}
.chrome-burger span {
  display: block; width: 24px; height: 2px; background: var(--mkt-ink);
  border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
}
.chrome-nav.is-open .chrome-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.chrome-nav.is-open .chrome-burger span:nth-child(2) { opacity: 0; }
.chrome-nav.is-open .chrome-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* header action buttons (site.css .button, kept chrome-local) */
.chrome-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 780;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.chrome-btn:hover { transform: translateY(-2px); }
.chrome-btn.primary { color: #fff; background: var(--mkt-green); box-shadow: 0 10px 25px rgba(11, 107, 87, .22); }
.chrome-btn.primary:hover { background: var(--mkt-green-2); color: #fff; }
.chrome-btn.secondary { border-color: #cfd9d5; background: rgba(255, 255, 255, .55); color: var(--mkt-ink); }
.chrome-btn.secondary:hover { border-color: var(--mkt-green); color: var(--mkt-green); background: #fff; }

/* ---------- language switcher (header + footer) ---------- */
.chrome-lang { display: inline-flex; align-items: center; gap: 4px; }
.chrome-lang-link {
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--mkt-muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: color .2s ease, background .2s ease;
}
.chrome-lang-link:hover { color: var(--mkt-green); }
.chrome-lang-link.is-current { color: var(--mkt-green); background: var(--mkt-mint); }
.chrome-footer .chrome-lang-link { color: #9fb5b3; }
.chrome-footer .chrome-lang-link:hover { color: #fff; }
.chrome-footer .chrome-lang-link.is-current { color: #fff; background: rgba(255, 255, 255, .12); }

/* ---------- footer ---------- */
.chrome-footer { padding: 60px 0 24px; color: #c5d4d2; background: var(--mkt-navy); }
.chrome-footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 42px; }
.chrome-footer-brand .chrome-brand { color: #fff; }
.chrome-footer-brand p { max-width: 320px; margin-top: 18px; color: #9fb5b3; font-size: 14px; }
.chrome-footer-col strong { display: block; margin-bottom: 15px; color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.chrome-footer-col a { display: block; width: fit-content; margin: 9px 0; font-size: 14px; color: #c5d4d2; }
.chrome-footer-col a:hover { color: #fff; }
.chrome-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 52px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); color: #829d9a; font-size: 13px; }

/* ---------- responsive: 980 (burger dropdown) ---------- */
@media (max-width: 980px) {
  .chrome-nav { flex-wrap: wrap; }
  .chrome-burger { display: inline-flex; margin-left: auto; }
  .chrome-nav-links, .chrome-nav-actions { display: none; }
  .chrome-nav.is-open .chrome-nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    width: 100%; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--mkt-line);
  }
  .chrome-nav.is-open .chrome-nav-links a { padding: 11px 2px; font-size: 15px; }
  .chrome-nav.is-open .chrome-nav-actions {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    width: 100%; margin: 14px 0 6px;
  }
  .chrome-nav.is-open .chrome-nav-actions .chrome-btn { justify-content: center; min-height: 46px; }
  .chrome-nav.is-open .chrome-nav-actions .chrome-btn.secondary { display: inline-flex; }
  .chrome-nav.is-open .chrome-nav-actions .chrome-lang { justify-content: flex-start; margin-bottom: 2px; }
  .chrome-footer-grid { grid-template-columns: 2fr 1fr 1fr; }
  .chrome-footer-col:last-child { grid-column: 2; }
}

/* ---------- responsive: 680 ---------- */
@media (max-width: 680px) {
  .chrome-shell { width: min(calc(100% - 28px), var(--mkt-max)); }
  .chrome-notice .chrome-shell { min-height: 44px; }
  .chrome-nav { min-height: 68px; }
  .chrome-nav-actions .chrome-btn { min-height: 42px; padding-inline: 14px; }
  .chrome-footer-grid { grid-template-columns: 1fr 1fr; }
  .chrome-footer-brand { grid-column: 1 / -1; }
  .chrome-footer-col:last-child { grid-column: auto; }
  .chrome-footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ---------- mobile audit (2026-07-22): burger tap target ---------- */
@media (max-width: 720px) {
  .chrome-burger { min-height: 44px; min-width: 44px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .chrome-burger span, .chrome-btn { transition-duration: .01ms; }
}