/*
 * Jurisio marketing site chrome — the ONE header, phone menu, footer and
 * art-card frame shared by every page on jurisio.ai.
 *
 * Markup lives in content/partials/site-header.html and site-footer.html and
 * is stamped into each page by scripts/build_marketing_content.py; behaviour
 * lives in /site-chrome.js. Everything is namespaced `site-*` so page and
 * bundle stylesheets (garden, legal-art, about) cannot restyle it.
 *
 * Reference: the landing page's garden nav + footer (garden-v2.css .grd-nav,
 * el.css .el-foot) and the approved cohesion mock (2026-09-24).
 */

:root {
  --site-paper: #FDF8EF;
  --site-bar: rgba(248, 240, 228, .92);
  --site-bar-stuck: rgba(248, 240, 228, .96);
  --site-ink: #16241f;
  --site-ink-2: #3a4a43;
  --site-muted: #5f6558;
  --site-rule: rgba(22, 36, 31, .12);
  --site-moss: #4A641F;
  --site-moss-hover: #3B5119;
  --site-on-moss: #f8f0e4;
  --site-display: "Newsreader", "Source Serif 4", Georgia, serif;
  --site-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --site-header-h: 62px;
  --site-frame-gutter: max(6px, .5vw);
  --site-frame-radius: 24px;
  --site-footer-w: 1240px;
}

@media (max-width: 900px) {
  :root { --site-frame-radius: 18px; }
}

@media (max-width: 540px) {
  :root { --site-header-h: 60px; }
}

/* Anchored sections land below the fixed header on every page. */
[id] { scroll-margin-top: calc(var(--site-header-h) + 16px); }

/* ── Skip link (landing + contact; other pages keep their own class) ── */
.site-skip {
  position: fixed; top: 10px; left: 12px; z-index: 300;
  padding: 10px 14px; border-radius: 10px;
  background: #fff; color: var(--site-ink);
  font: 600 13px/1.2 var(--site-sans); text-decoration: none;
  box-shadow: 0 2px 10px rgba(22, 36, 31, .16);
  transform: translateY(-160%); transition: transform 160ms ease;
}
.site-skip:focus { transform: translateY(0); }
.site-skip:focus-visible { outline: 2px solid var(--site-moss); outline-offset: 2px; }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  font-family: var(--site-sans);
  -webkit-font-smoothing: antialiased;
}
.site-header *, .site-footer *, .site-menu * { box-sizing: border-box; }

.site-header .site-nav {
  box-sizing: border-box;
  display: flex; align-items: center; gap: 20px;
  height: var(--site-header-h);
  margin: 0; padding: 0 28px;
  background: var(--site-bar);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
  transition: box-shadow 300ms ease, background 240ms ease;
}
.site-header.is-stuck .site-nav {
  background: var(--site-bar-stuck);
  box-shadow: 0 6px 20px rgba(60, 25, 10, .10);
}

.site-header .site-brand,
.site-footer .site-brand {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
  color: #000; text-decoration: none;
}
.site-header .site-brand img,
.site-footer .site-brand img {
  display: block; width: 26px; height: 26px; object-fit: contain;
  transform: translateY(-2px);
}
.site-header .site-brand span,
.site-footer .site-brand span {
  font-family: var(--site-display); font-size: 20px; font-weight: 600;
  line-height: 1; letter-spacing: -.015em; color: #000;
}

.site-header .site-nav-links { display: flex; align-items: center; gap: 4px; }
.site-header .site-nav-links a,
.site-header .site-nav-login {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 10px;
  font: 600 14px/1.2 var(--site-sans); color: var(--site-ink-2);
  text-decoration: none; white-space: nowrap;
  transition: background 140ms, color 140ms;
}
.site-header .site-nav-login { padding: 9px 14px; border-radius: 11px; }
.site-header .site-nav-links a:hover,
.site-header .site-nav-login:hover { background: rgba(22, 36, 31, .08); color: var(--site-ink); }
.site-header .site-nav-links a[aria-current="page"] { color: var(--site-ink); }
.site-header .site-nav-spacer { flex: 1; }

.site-header .site-nav-cta,
.site-menu .site-menu-actions .site-menu-demo {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border-radius: 11px;
  background: var(--site-moss); color: var(--site-on-moss);
  font: 600 14px/1.2 var(--site-sans); text-decoration: none; white-space: nowrap;
  transition: background 160ms;
}
.site-header .site-nav-cta:visited { color: var(--site-on-moss); }
.site-header .site-nav-cta:hover,
.site-menu .site-menu-actions .site-menu-demo:hover { background: var(--site-moss-hover); color: var(--site-on-moss); }

.site-header .site-menu-button,
.site-menu .site-menu-close {
  display: none; place-items: center; flex-shrink: 0;
  width: 44px; height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 11px; background: none;
  color: var(--site-ink); cursor: pointer;
}
.site-header .site-menu-button:hover,
.site-menu .site-menu-close:hover { background: rgba(22, 36, 31, .08); }

.site-header :is(a, button):focus-visible,
.site-menu :is(a, button):focus-visible,
.site-footer a:focus-visible {
  outline: 2px solid var(--site-moss); outline-offset: 2px;
}

/* ── Phone menu: a full-screen sheet whose top row mirrors the header ── */
.site-menu {
  position: fixed; inset: 0; z-index: 250;
  display: flex; flex-direction: column;
  background: var(--site-paper); color: var(--site-ink);
  font-family: var(--site-sans);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.3, .8, .3, 1);
}
.site-menu[hidden] { display: none; }
.site-menu.is-open { opacity: 1; transform: none; }
.site-menu:focus { outline: none; }
.site-menu .site-menu-top {
  box-sizing: border-box; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  height: var(--site-header-h);
  padding: 0 12px 0 16px;
  background: var(--site-bar-stuck);
}
.site-menu .site-menu-top .site-nav-cta { margin-left: auto; }
.site-menu .site-menu-close { display: grid; }
.site-menu .site-menu-nav {
  display: flex; flex-direction: column;
  padding: 16px 24px 0;
  border-top: 1px solid rgba(22, 36, 31, .10);
}
.site-menu .site-menu-nav a {
  padding: 14px 0;
  border-bottom: 1px solid rgba(22, 36, 31, .10);
  font-family: var(--site-display); font-size: 26px; line-height: 1.2;
  letter-spacing: -.01em; color: var(--site-ink); text-decoration: none;
}
.site-menu .site-menu-nav a[aria-current="page"] { color: var(--site-moss); }
.site-menu .site-menu-actions { display: flex; gap: 12px; padding: 28px 24px; }
.site-menu .site-menu-actions a {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  padding: 14px 0; border-radius: 12px;
  font: 600 15px/1.2 var(--site-sans); text-align: center; text-decoration: none;
}
.site-menu .site-menu-actions .site-menu-login { border: 1px solid rgba(22, 36, 31, .25); color: var(--site-ink); }
.site-menu .site-menu-actions .site-menu-demo { padding: 14px 0; border-radius: 12px; font-size: 15px; }
html.site-menu-open, html.site-menu-open body { overflow: hidden; }

/* Compact header: links and Login fold into the menu. */
@media (max-width: 860px) {
  .site-header .site-nav-links, .site-header .site-nav-login { display: none; }
  .site-header .site-menu-button { display: grid; }
  .site-header .site-nav { gap: 10px; padding: 0 12px 0 20px; }
}

/* Phone header (mock HeaderPhone). */
@media (max-width: 540px) {
  .site-header .site-nav, .site-menu .site-menu-top { padding: 0 12px 0 16px; }
  .site-header .site-brand img { width: 24px; height: 24px; }
  .site-header .site-brand span { font-size: 19px; }
  .site-header .site-nav .site-nav-cta,
  .site-menu .site-menu-top .site-nav-cta { padding: 8px 14px; border-radius: 10px; font-size: 13px; }
}

/* ── Footer (landing ElFooter) ──────────────────────────────────────── */
.site-footer {
  background: var(--site-paper); color: var(--site-ink);
  font-family: var(--site-sans);
  -webkit-font-smoothing: antialiased;
}
.site-footer .site-footer-inner {
  max-width: var(--site-footer-w); margin: 0 auto;
  padding: 64px 40px 36px;
}
.site-footer .site-footer-top {
  display: grid; grid-template-columns: minmax(200px, 1fr) 3fr; gap: 40px;
  padding-bottom: 56px; border-bottom: 1px solid var(--site-rule);
}
.site-footer .site-footer-brand { align-self: flex-start; }
.site-footer .site-footer-brand img { width: 28px; height: 28px; }
.site-footer .site-footer-brand span { font-size: 21px; }
.site-footer .site-footer-cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
}
.site-footer .site-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.site-footer .site-footer-h {
  font-family: var(--site-display); font-size: 17px; font-weight: 600;
  line-height: 1.3; letter-spacing: -.01em; color: var(--site-ink);
}
.site-footer .site-footer-col a {
  font-size: 14px; line-height: 1.4; color: var(--site-ink-2); text-decoration: none;
  transition: color 140ms ease;
}
.site-footer .site-footer-col a:hover { color: var(--site-moss); }
.site-footer .site-footer-col a[aria-current="page"] { color: var(--site-ink); }
.site-footer .site-footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px;
  padding-top: 26px;
  font-size: 12.5px; line-height: 1.4; color: var(--site-muted);
}
.site-footer .site-footer-bottom nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.site-footer .site-footer-bottom a { color: var(--site-muted); text-decoration: none; transition: color 140ms ease; }
.site-footer .site-footer-bottom a:hover,
.site-footer .site-footer-bottom a[aria-current="page"] { color: var(--site-ink); }
.site-footer .site-footer-social { display: inline-flex; }

@media (max-width: 860px) {
  .site-footer .site-footer-inner { padding: 48px 24px 56px; }
  .site-footer .site-footer-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
  .site-footer .site-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .site-footer .site-footer-col { gap: 16px; }
  .site-footer .site-footer-bottom, .site-footer .site-footer-bottom nav { gap: 12px 16px; }
  .site-footer .site-footer-bottom { padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-skip, .site-header .site-nav, .site-menu { transition: none; }
}

@media print {
  .site-header, .site-menu, .site-footer { display: none !important; }
}

/* ── Art card: the framed painting under the header ─────────────────────
   Starts right under the header, keeps the landing's small side gap and
   rounds only its bottom corners. Pages that cannot carry the class (the
   landing bundle, the legal heroes) use the same three tokens directly. */
.site-frame {
  box-sizing: border-box;
  margin: var(--site-header-h) var(--site-frame-gutter) 0;
  border-radius: 0 0 var(--site-frame-radius) var(--site-frame-radius);
  overflow: hidden;
}