/* ---- 1. Design tokens (edit per campaign) ---- */
:root {
  /* Brand palette (replace per project). Keep an accessible variant >= 4.5:1 on bg. */
  --color-primary:            #1f6feb;   /* decorative / fills */
  --color-primary-accessible: #1a5fd0;   /* text + buttons on light */
  --a11y-accent: #1b232b;                /* a11y menu accent; override per site */
  --color-secondary:          #0b3d5c;
  --color-accent:             #e8852b;
  --color-dark:               #11181f;
  --color-light:              #f6f8fa;
  --color-bg:                 #ffffff;
  --color-text:               #1b232b;
  --color-muted:              #5b6670;
  --color-border:             #e2e6ea;

  /* Typography (load the webfont in header.php) */
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-base: 16px;
  --lh-base: 1.6;

  /* Layout */
  --container-max: 1140px;
  --container-pad: 1.25rem;
  --radius: 6px;
  --page-frame: 0px;            /* set e.g. 10px for a colored body frame */
  --page-frame-color: transparent;

  /* Focus + motion */
  --focus-ring: 3px solid var(--color-accent);

  /* Footer theming; override per project. MDW bug is intentionally not themeable. */
  --footer-bg:         var(--color-secondary);   /* footer background (usually the brand navy/dark) */
  --footer-text:       #f4fbf8;                   /* primary text on the footer (keep >= 4.5:1 on --footer-bg) */
  --footer-text-soft:  rgba(255,255,255,0.82);    /* secondary text (address, social idle) */
  --footer-link-hover: var(--color-accent);       /* link + contact hover color */
  --footer-org-accent: var(--color-accent);       /* committee-name accent above the address */
  --footer-rule:       rgba(255,255,255,0.20);    /* hairline above the footer-bottom row */
  --footer-donate-bg:  var(--color-primary-accessible); /* Donate button bg — MUST keep >= 4.5:1 with --footer-donate-text */
  --footer-donate-text:#ffffff;                   /* Donate button label color */
}


/* ---- 2. Minimal reset ---- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--fs-base); -webkit-text-size-adjust: 100%; color-scheme: light only; }

/* Browser force-dark (e.g. Samsung Internet): ship a dark-pref theme so it uses our light styles instead of inverting */
@media (prefers-color-scheme: dark) {
  html { color-scheme: only light; }

  input, textarea, select { background-color: #fff; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: var(--page-frame) solid var(--page-frame-color);
}

h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; }

img, video, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--color-primary-accessible); }

/* Button labels are always centered */
button, .btn, input[type="submit"], input[type="button"], input[type="reset"] { text-align: center; justify-content: center; }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }


/* ---- 3. Structural utilities (not visual design) ---- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}


/* ---- SCROLL PERFORMANCE (kit standard) ----
   Keep scroll smooth: no un-throttled scroll handlers (site.js rAF-throttles
   is-scrolled — style off that class); transition only transform/opacity/
   background-color/box-shadow on the header (never `all`, size, or filter);
   no background-attachment:fixed; use backdrop-filter sparingly. */
.site-header {
  /* cheap-only transitions for the scrolled state */
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Baseline scrolled treatment (sites override the look) */
html.is-scrolled .site-header { box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }


/* ---- STANDARD MDW FOOTER (global/footer.php) ----
   Fixed structure; rebrand via --footer-* vars. MDW bug (.footer-mdw*) — do not restyle. */
.site-footer { background: var(--footer-bg); color: var(--footer-text); padding-block: clamp(3.25rem, 6vw, 5rem) 2rem; }

.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }

.footer-brand { display: inline-flex; }

.footer-lead { display: flex; flex-direction: column; align-items: flex-start; gap: 1.3rem; }

.footer-logo { height: clamp(104px, 12vw, 136px); width: auto; }

.footer-menus { display: flex; align-items: flex-start; gap: clamp(1.75rem, 4vw, 3.5rem); flex-wrap: wrap; }

.footer-links { list-style: none; padding: 0; margin: 0; text-align: left; }

.footer-links li { margin-bottom: 0.65rem; }

.footer-links a { color: var(--footer-text); text-decoration: none; font-weight: 600; font-size: 1.1rem; }

.footer-links a:hover { color: var(--footer-link-hover); text-decoration: none; }

.footer-social { display: flex; gap: 0.85rem; }

.footer-social a { color: var(--footer-text-soft); display: inline-flex; transition: color .15s ease; }

.footer-social a:hover { color: #fff; }

.footer-social svg { width: 26px; height: 26px; }


.footer-mid { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.25rem; }

.footer-mid-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }

.footer-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.footer-addr { font-style: normal; font-family: var(--font-heading); font-weight: 400; line-height: 1.7; color: var(--footer-text); font-size: 1.05rem; }

.footer-org { display: block; color: var(--footer-org-accent); font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; margin-bottom: 0.2rem; }

.disclaimer { color: #fff; font-weight: 700; font-size: 1rem; border: 1.5px solid rgba(255,255,255,0.4); border-radius: var(--radius); padding: 0.9rem 1.2rem; max-width: 30rem; }


/* Footer action buttons (scoped to footer) */
.footer-actions .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.0625rem;
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: 0.95rem 1.5rem; min-height: 48px;
  border-radius: var(--radius); border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.footer-actions .btn:active { transform: translateY(1px); }

.footer-actions .btn--w140 { width: 140px; padding-inline: 0.5rem; line-height: 1.2; }

.footer-actions .btn--ghost-on-dark { background: transparent; color: var(--footer-text); border-color: rgba(255,255,255,0.55); }

.footer-actions .btn--ghost-on-dark:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: #fff; }

.footer-actions .btn--donate { background: var(--footer-donate-bg); color: var(--footer-donate-text); border-color: var(--footer-donate-bg); }

.footer-actions .btn--donate:hover { filter: brightness(0.92); color: var(--footer-donate-text); }


.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.5rem; padding-top: 1.85rem; border-top: 1px solid var(--footer-rule); }

.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }

.footer-contact { color: var(--footer-text); font-weight: 600; font-size: 0.9rem; text-decoration: none; }

.footer-contact:hover { color: var(--footer-link-hover); text-decoration: none; }


@media (max-width: 820px) {
  .footer-top, .footer-mid, .footer-bottom, .footer-lead { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }

  .footer-actions { justify-content: center; margin: 0.75rem 0 1.25rem; }

  .footer-menus { flex-direction: column; align-items: center; gap: 1.75rem; }

  .footer-links { text-align: center; }

  .footer-addr { text-align: center; }

  .footer-mid-right { align-items: center; }
}