/* Site-wide header/footer — loads on every page (unlike quiz.css, which is
   quiz-page-only), so tokens are redeclared here rather than relying on the
   #gfp-app-scoped ones in quiz.css. Values match quiz.css exactly. */
:root {
  --gfp-navy: oklch(0.16 0.015 260);
  --gfp-navy-2: oklch(0.22 0.02 260);
  --gfp-navy-border: oklch(0.3 0.015 260);
  --gfp-amber: oklch(0.72 0.14 55);
  --gfp-amber-hover: oklch(0.78 0.14 55);
  --gfp-cream: oklch(0.98 0.005 90);
  --gfp-text: oklch(0.2 0.01 90);
  --gfp-text-muted: oklch(0.45 0.01 90);
  --gfp-border: oklch(0.9 0.01 90);
}

/* ── Header ──────────────────────────────────────────────────────────── */
.gfp-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--gfp-cream);
  border-bottom: 1px solid var(--gfp-border);
}
.gfp-site-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.gfp-site-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--gfp-text) !important;
  text-decoration: none;
  white-space: nowrap;
}
.gfp-site-logo span {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--gfp-text-muted);
  margin-left: 4px;
}
.gfp-site-nav {
  display: flex;
  gap: 28px;
  flex: 1;
}
.gfp-site-nav a {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--gfp-text-muted) !important;
  text-decoration: none;
  white-space: nowrap;
}
.gfp-site-nav a:hover { color: var(--gfp-text) !important; }
.gfp-site-cta {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 600;
  background: var(--gfp-amber);
  color: var(--gfp-navy) !important;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.gfp-site-cta:hover { background: var(--gfp-amber-hover); }

/* Collapse to logo-only during active quiz-taking — no distractions mid-funnel. */
body.gfp-in-quiz .gfp-site-nav,
body.gfp-in-quiz .gfp-site-cta {
  display: none;
}

@media (max-width: 640px) {
  .gfp-site-header-inner { padding: 14px 20px; gap: 16px; }
  .gfp-site-nav { display: none; }
  .gfp-site-cta { padding: 9px 16px; font-size: 13px; }
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.gfp-site-footer {
  background: var(--gfp-navy);
  color: oklch(0.85 0.01 260);
}
.gfp-site-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 32px 40px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
}
.gfp-footer-brand .gfp-site-logo { color: white !important; }
.gfp-footer-brand .gfp-site-logo span { color: oklch(0.7 0.01 260); }
.gfp-footer-brand p {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: oklch(0.7 0.01 260);
  margin: 14px 0 0;
  max-width: 34ch;
}
.gfp-footer-col-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(0.6 0.01 260);
  margin-bottom: 14px;
}
.gfp-footer-col a {
  display: block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: oklch(0.85 0.01 260) !important;
  text-decoration: none;
  margin-bottom: 10px;
}
.gfp-footer-col a:hover { color: var(--gfp-amber) !important; }
.gfp-site-footer-bottom {
  border-top: 1px solid var(--gfp-navy-border);
  padding: 20px 32px;
  text-align: center;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12.5px;
  color: oklch(0.55 0.01 260);
}

@media (max-width: 720px) {
  .gfp-site-footer-inner { grid-template-columns: 1fr 1fr; padding: 40px 24px 32px; }
  .gfp-footer-brand { grid-column: 1 / -1; margin-bottom: 12px; }
}