/* ============================================================================
   Willett for Congress — shared brand tokens
   Source of truth: live site nathanfornorthmissouri.com (pixel-verified) + logo.
   Used by all three website demos (basic / intermediate / advanced).
   Brand: deep blue + orange + white. Patriotic, rural, plainspoken.
   Copy this file into each demo's local assets/ folder on build.
   ============================================================================ */

:root {
  /* --- Brand core --- */
  --blue:        #196692;  /* primary — campaign blue (logo/social-card field) */
  --blue-deep:   #114e6f;  /* darker blue for gradients / header bars */
  --blue-ink:    #0c3a54;  /* deepest blue — hero overlays, footer */
  --orange:      #fea20f;  /* accent / CTA — logo orange */
  --orange-deep: #e08a00;  /* CTA hover */
  --orange-soft: #ffd485;  /* tints, highlights */
  --flag-red:    #b22234;  /* sparing patriotic accent only (rules, dividers) */

  /* --- Neutrals --- */
  --white:    #ffffff;
  --cream:    #f7f5f0;     /* warm off-white page background */
  --cream-2:  #efeae1;     /* alt section background */
  --ink:      #14202b;     /* near-black body text on light */
  --ink-soft: #45586a;     /* muted text */
  --ink-mute: #7c8a99;     /* captions / labels */
  --line:     #e1e7ee;     /* hairlines / borders */
  --line-2:   #cdd6df;

  /* --- Typography --- */
  --font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-slab: 'Roboto Slab', Georgia, serif;   /* optional accent face */

  /* --- Scale / layout --- */
  --max-w:      1160px;
  --max-w-text: 760px;
  --gutter:     clamp(18px, 4vw, 40px);

  /* --- Radius --- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* --- Shadows (blue-tinted) --- */
  --sh-sm: 0 1px 3px rgba(12, 58, 84, 0.10);
  --sh-md: 0 6px 20px rgba(12, 58, 84, 0.14);
  --sh-lg: 0 18px 48px rgba(12, 58, 84, 0.22);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.45s;
}

/* ---- Base reset / typography defaults ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  line-height: 1.08;
  margin: 0 0 0.4em;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); }
img { max-width: 100%; display: block; }

/* ---- Reusable atoms ---- */
.container { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem;
  padding: 0.85em 1.6em; border-radius: var(--r-pill);
  border: 2px solid transparent; cursor: pointer; transition: all var(--dur) var(--ease);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.btn--donate { background: var(--orange); color: var(--blue-ink); }
.btn--donate:hover { background: var(--orange-deep); color: #fff; transform: translateY(-2px); }
.btn--solid  { background: var(--blue); color: #fff; }
.btn--solid:hover { background: var(--blue-deep); transform: translateY(-2px); }
.btn--ghost  { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn--ghost:hover { background: #fff; color: var(--blue-ink); }

.eyebrow {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.82rem; color: var(--orange-deep);
}

/* ---- Patriotic accent rule (orange w/ thin blue) ---- */
.rule-accent { height: 4px; width: 64px; background: var(--orange); border-radius: 2px; }

/* ---- FEC disclaimer ---- */
.fec-disclaimer { font-size: 0.8rem; color: rgba(255,255,255,0.75); letter-spacing: 0.01em; }

/* ---- Accessibility ---- */
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}