/* Site chrome: header, navigation, footer, section rhythm, breadcrumbs.
   Content components (buttons, tables, cards) live in components.css. */

/* ---- Header ---- */
.site-header {
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}
.site-header__logo {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.site-header__logo:hover { text-decoration: none; color: var(--color-primary); }

.site-nav { display: none; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list a {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
}
.site-nav__list a:hover { color: var(--color-primary); }
.site-nav__list a[aria-current="page"] { color: var(--color-primary); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
/* Real bug found by an actual headless-Chrome screenshot at 390px: the
   header tried to show both CTA buttons AND the mobile menu toggle at
   once, causing "Client Login" to wrap inside its own button. Both CTAs
   are already duplicated inside the mobile nav panel (render_header's
   mobile_links), so below the same breakpoint the full nav collapses
   at, the header shows only the toggle — nothing is lost, it's reached
   one tap later via Menu instead of being crammed in. */
.site-header__cta-group { display: none; }

/* Native <details>/<summary> disclosure — zero JS (2026-09-17, see
   render.py::render_header). .nav-disclosure is the positioning context
   for .mobile-nav, which the browser shows/hides on its own the moment
   .nav-disclosure gains/loses its [open] attribute; no [hidden] logic of
   ours is needed the way the old JS-toggled version required. */
.nav-disclosure { position: relative; }
.nav-toggle {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  color: var(--color-text);
  list-style: none;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-disclosure[open] .nav-toggle { border-color: var(--color-primary); color: var(--color-primary); }

.mobile-nav {
  position: absolute;
  top: calc(100% + var(--space-xs));
  right: 0;
  min-width: 14rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-md);
  padding: var(--space-sm);
  z-index: 110;
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.mobile-nav a {
  display: flex; align-items: center; min-height: 44px;
  color: var(--color-text); text-decoration: none; font-weight: 600;
}

@media (min-width: 900px) {
  .site-nav { display: block; }
  .nav-disclosure { display: none; }
  .site-header__cta-group { display: flex; gap: var(--space-xs); }
}

/* ---- Section rhythm ---- */
.section { padding-block: var(--space-xl); }
.section--top { padding-top: var(--space-lg); }
.section--flush-top { padding-top: 0; }
.section--alt { background: var(--color-surface); }
.section__head { max-width: var(--measure); margin-bottom: var(--space-lg); }
/* Utility classes, not inline style="" — lets CSP's style-src drop
   'unsafe-inline' entirely (2026-09-13 security re-audit: the only
   inline styling left sitewide was these few fixed padding overrides). */
.breadcrumbs-wrap { padding-top: var(--space-md); }

/* ---- Breadcrumbs ---- */
.breadcrumbs { font-size: var(--text-xs); color: var(--color-text-muted); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.35rem; color: var(--color-border-strong); }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-primary); }

/* ---- Page intro (eyebrow + H1 + one-line sub), top of every inner page ---- */
.page-intro { max-width: var(--measure); }
.page-intro__eyebrow { display: block; color: var(--color-primary); margin-bottom: var(--space-xs); }
.page-intro__sub { font-size: var(--text-lg); color: var(--color-text-muted); }

/* ---- Footer ---- */
.site-footer {
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  padding-block: var(--space-xl) var(--space-lg);
  /* No extra margin-top: the preceding section already carries its own
     --space-xl bottom padding (layout.css .section) — stacking a
     --space-2xl margin on top of that produced a ~224px dead gap before
     the footer even started, flagged on real visual QA as one of
     several oversized empty areas. The border-top alone is enough
     visual separation. */
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-lg);
}
.site-footer__brand { grid-column: 1 / -1; max-width: 28rem; }
.site-footer__wordmark { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-lg); }
.site-footer__brand p { margin-top: var(--space-2xs); font-size: var(--text-sm); }
/* A real column proportion, not open-ended auto-fit: on a large monitor
   the footer's own .wrap--frame already caps its total width, but plain
   auto-fit still stretched four short link lists across whatever was
   left, reading as an oddly empty, over-spread footer on real visual
   QA. The brand column takes a deliberately larger, fixed share; the
   four nav groups stay a compact, even width instead of growing
   unbounded with the viewport. */
/* Real bug found by an actual headless-Chrome screenshot (not just
   structural tests) at 768px: the fixed 5-column proportion below needs
   >=760px of content width just for its column minimums, which a
   768px viewport doesn't have once the gutter is subtracted — the
   "Legal" column silently overflowed off the right edge. 768px only
   gets the brand column back into normal flow; the safe `auto-fit`
   default (which never overflows, just wraps to fewer columns) still
   governs 768-1023px. The fixed proportion only applies from 1024px,
   comfortably past the point the arithmetic actually works out. */
@media (min-width: 768px) {
  .site-footer__brand { grid-column: auto; }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: minmax(200px, 1.3fr) repeat(4, minmax(140px, 1fr)); }
}
.site-footer__group-title { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-sm); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.site-footer a { color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); }
.site-footer a:hover { color: var(--color-primary); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); justify-content: space-between;
  margin-top: var(--space-xl); padding-top: var(--space-md);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.site-footer__bottom a { color: var(--color-text-muted); }
/* Client Login as a small secondary button, not a bare text link
   (2026-09-17 UX polish pass) — a deliberately utility-sized action
   (.btn-sm), not a full-width primary CTA. Default: off-white/
   transparent, subtle border, dark text, matching the rest of the
   .btn-ghost system. Hover only: electric-blue fill + white text —
   distinct from the generic .btn-ghost hover (which just recolours
   the border/text) since this needed its own affordance per the
   brief. Focus relies on the sitewide :focus-visible outline
   (base.css) rather than hover, so keyboard users get a clearly
   visible state without needing to trigger :hover. */
.site-footer__bottom .footer-login-btn {
  color: var(--color-text);
  border-color: var(--color-border-strong);
  background: transparent;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.site-footer__bottom .footer-login-btn:hover {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
  text-decoration: none;
}