/*
  Residion shared brand stylesheet -- the header, footer, and design
  tokens common to every page (public/index.html, contact.html, terms.html,
  privacy.html, cookies.html, dpa.html, 404.html). Docs at
  docs/brand-tokens.md: strict light monochrome, emphasis by inversion,
  no accent hue.

  Page-specific styles (body base, section layout, typography scale,
  --section-pad, --measure, and everything below the footer) stay inline
  in each page's own <style> block. Only rules verified byte-identical
  across all seven pages live here -- see
  scripts/verify-brand-shared.mjs if this file needs to be regenerated
  or re-checked after a page-level edit.

  Firebase Hosting serves *.css with a one-year immutable Cache-Control
  (firebase.json). If this file changes again, bump the query string on
  every <link> that references it (e.g. /brand.css?v=2) so caches and any
  CDN in front of residion.io pick up the new version -- an in-place edit
  alone will not invalidate what's already cached.
*/

:root {
  --shell: #FFFFFF;
  --ink: #1A1A1A;
  --secondary: #6E6E6E;
  --tertiary: #BFBFBF;
  --hairline: #DADADA;
  --tint: #F4F4F4;
  --max-w: 1040px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 100;
  background: var(--ink);
  color: var(--shell);
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--shell);
  border-bottom: 1px solid var(--hairline);
}
.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wordmark {
  line-height: 1.5;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-link {
  /* line-height pinned so the header height matches on every page --
     the body element's line-height differs per page (1.6 vs 1.65) and
     these inherit it otherwise. */
  line-height: 1.5;
  color: var(--secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  /* Vertical padding lifts the hit area past the WCAG 2.2 AA 24px
     target-size minimum (SC 2.5.8) without shifting the layout. */
  padding: 6px 0;
  transition: color 0.15s;
}
.nav-link:hover,
.nav-link:focus-visible { color: var(--ink); outline: none; }
.nav-link[aria-current="page"] { color: var(--ink); }
.header-cta {
  line-height: 1.5; /* pinned, same reason as .nav-link above */
  display: inline-block;
  background: var(--ink);
  color: var(--shell);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.header-cta:hover,
.header-cta:focus-visible { opacity: 0.85; outline: 2px solid var(--ink); outline-offset: 2px; }
/* Small phones: the wordmark + two nav links + CTA overflow a 375px
   viewport at the default spacing. Tighten the gutters and the CTA
   rather than dropping a nav link. */
@media (max-width: 560px) {
  .header-inner { padding: 14px 16px; gap: 12px; }
  .header-nav { gap: 14px; }
  .header-cta { padding: 9px 14px; }
}
/* Below ~370px even the tightened spacing can't fit the full CTA label,
   so swap it for the short form. 375px (the common phone floor) keeps
   the full wording; the anchor's aria-label carries it at every width. */
.cta-short { display: none; }
@media (max-width: 370px) {
  .header-nav { gap: 10px; }
  .cta-full { display: none; }
  .cta-short { display: inline; }
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 28px 24px;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--secondary);
}
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-inner a {
  color: var(--secondary);
  text-decoration: none;
  padding: 6px 0;
}
.footer-inner a:hover,
.footer-inner a:focus-visible { color: var(--ink); text-decoration: underline; }