/* =========================================================
   SOS Encinitas — shared stylesheet
   Palette AND several components (.script, .countdown, .later,
   the .box.dark "big ask" panel) lifted directly from the
   campaign's existing flyers/emails (see the "Script — Neighbor
   Email Builder" .py files in Drive) so the site matches printed
   materials, not just in color but in its recognizable layout
   pieces. See CLAUDE.md for what each component is for.
   ========================================================= */

:root {
  --ink: #12333f;          /* body text */
  --navy: #0b3a53;         /* headings, dark UI */
  --blue: #1a6fa3;         /* primary / links / accents */
  --blue-light: #2b8cc4;   /* wave accent */
  --blue-pale: #7ec6e6;    /* wave accent, lighter */
  --sky-50: #f2f9fd;
  --sky-100: #eaf6fc;
  --sky-200: #dff0fa;
  --sky-300: #cfe6f2;
  --sky-400: #bfe2f2;
  --slate: #3a5b6b;        /* secondary text */
  --slate-light: #5b7c8c;
  --slate-lighter: #7897a8;
  --gold: #ffd27a;         /* sun / accent */
  --alert: #d1495b;        /* corrections / urgent notices */
  --bg: #ffffff;
  --radius: 12px;
  --max-width: 960px;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}

a { color: var(--blue); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

img, svg { max-width: 100%; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Header / nav ---------- */

.site-header {
  border-bottom: 2px solid var(--sky-300);
  background: var(--bg);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand:hover, .brand:focus { text-decoration: none; }

.brand img { width: 42px; height: 42px; flex-shrink: 0; }

.brand-text .kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--blue);
  text-transform: uppercase;
  margin: 0;
}

.brand-text .org {
  font-size: 13px;
  color: var(--slate-light);
  margin: 0;
}

nav.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

nav.main-nav a {
  color: var(--navy);
  font-weight: 700;
  font-size: 14.5px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}

nav.main-nav a:hover,
nav.main-nav a[aria-current="page"] {
  color: var(--blue);
  border-bottom-color: var(--blue);
  text-decoration: none;
}

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--navy);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
}

@media (max-width: 720px) {
  .nav-toggle { display: inline-block; }
  nav.main-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    padding-top: 8px;
  }
  nav.main-nav.is-open { display: flex; }
}

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(180deg, var(--sky-100) 0%, var(--bg) 100%);
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--sky-300);
}

.hero h1 {
  color: var(--navy);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  margin: 0 0 14px;
}

.hero .dek {
  color: var(--slate);
  font-size: 18px;
  max-width: 640px;
  margin: 0 0 24px;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.2px;
  cursor: pointer;
  border: 2px solid transparent;
}

.btn:hover, .btn:focus { text-decoration: none; }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--navy); color: #fff; }

.btn-secondary { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--sky-100); color: var(--navy); }

/* ---------- Sections ---------- */

section { padding: 44px 0; }
section + section { border-top: 1px solid var(--sky-300); }

h2 {
  color: var(--navy);
  font-size: 26px;
  margin: 0 0 18px;
}

h3 {
  color: var(--navy);
  font-size: 19px;
  margin: 0 0 10px;
}

p { margin: 0 0 14px; }

.lead { font-size: 17px; color: var(--slate); }

/* ---------- Cards / grids ---------- */

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card {
  border: 2px solid var(--sky-300);
  border-radius: var(--radius);
  padding: 20px 22px;
  background: var(--sky-50);
}

.card h3 { margin-top: 0; }

/* ---------- Callout boxes (matches flyer .alert / .action / .big-ask) ---------- */

.box { border-radius: var(--radius); overflow: hidden; margin: 20px 0; border: 2px solid var(--blue); }
.box .bar {
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 10px 20px;
}
.box .body { padding: 16px 20px 4px; }

.box.alert { border-color: var(--alert); }
.box.alert .bar { background: var(--alert); }

.box.dark { border: none; background: var(--navy); color: #fff; padding: 22px 24px 8px; }
.box.dark h3 { color: var(--gold); }
.box.dark p, .box.dark li { color: var(--sky-100); }
.box.dark a { color: var(--gold); }

/* ---------- Meeting / event cards ---------- */

.event-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  border: 2px solid var(--sky-300);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
  align-items: start;
}

.event-date {
  background: var(--sky-50);
  border: 1px solid var(--sky-300);
  border-radius: 8px;
  text-align: center;
  padding: 10px 4px;
}

.event-date .dow { font-size: 11px; font-weight: 800; color: var(--blue); text-transform: uppercase; letter-spacing: 1px; }
.event-date .day { font-size: 26px; font-weight: 900; color: var(--navy); line-height: 1.1; }
.event-date .mon { font-size: 12px; color: var(--slate-light); text-transform: uppercase; }

.event-card h3 { margin-bottom: 4px; }
.event-meta { color: var(--slate-light); font-size: 14.5px; margin-bottom: 8px; }

@media (max-width: 520px) {
  .event-card { grid-template-columns: 1fr; }
  .event-date { display: flex; align-items: center; gap: 10px; justify-content: flex-start; text-align: left; padding: 8px 12px; }
}

/* ---------- Forms ---------- */

.form-embed {
  border: 2px solid var(--sky-300);
  border-radius: var(--radius);
  padding: 6px;
  background: var(--sky-50);
}

.form-embed iframe {
  width: 100%;
  min-height: 900px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  display: block;
}

.form-note {
  font-size: 13.5px;
  color: var(--slate-lighter);
  font-style: italic;
}

/* ---------- FAQ ---------- */

details.faq {
  border-bottom: 1px solid var(--sky-300);
  padding: 14px 0;
}

details.faq summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--navy);
  font-size: 16.5px;
}

details.faq p { margin-top: 10px; color: var(--slate); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy);
  color: var(--sky-100);
  padding: 34px 0 22px;
  margin-top: 20px;
}

.site-footer a { color: var(--gold); }

.site-footer .foot-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 20px;
}

.site-footer h4 {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 10px;
}

.site-footer .disc {
  font-size: 12px;
  color: var(--slate-lighter);
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 14px;
  margin-top: 10px;
}

/* ---------- Countdown pill (matches the campaign's email urgency badge) ---------- */

.countdown {
  display: inline-block;
  background: var(--alert);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 20px;
  margin-top: 8px;
}

/* ---------- Script / talking-points box (matches email .script) ---------- */

.script {
  background: #fffaf0;
  border-left: 5px solid var(--gold);
  border-radius: 7px;
  padding: 14px 18px;
  margin: 16px 0;
}

.script .lbl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8a6a1e;
  margin-bottom: 8px;
}

.script p {
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 10px;
  font-style: italic;
}

.script p:last-child { margin-bottom: 0; }

.script .fill {
  background: #fff0b8;
  padding: 0 3px;
  border-radius: 3px;
  font-style: normal;
  font-weight: 700;
}

/* ---------- Soft note box (lighter than .card, matches email .note) ---------- */

.note {
  background: var(--sky-50);
  border-radius: 9px;
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 14.5px;
  line-height: 1.55;
}

/* ---------- Muted "not yet" box (matches email .later) ---------- */

.later {
  background: #f6f8f9;
  border: 1px dashed #b9ccd6;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 16px 0;
}

.later p {
  font-size: 14px;
  color: var(--slate);
  margin: 0;
}

/* ---------- Printable flyer (flyer-print.html -> assets/sos-encinitas-flyer.pdf) ---------- */

.flyer-page { background: var(--sky-50); }

.flyer {
  max-width: 7.6in;
  margin: 24px auto;
  padding: 0.4in;
  background: var(--bg);
  font-size: 13px;
  line-height: 1.45;
}

.flyer-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.flyer-head img { width: 58px; height: 58px; }
.flyer-head .kicker { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--blue); text-transform: uppercase; margin: 0; }
.flyer-head .org { font-size: 12.5px; color: var(--slate-light); margin: 0; }

.flyer h1 { color: var(--navy); font-size: 29px; line-height: 1.12; margin: 0 0 10px; }
.flyer h2 { font-size: 17px; margin: 16px 0 8px; border-bottom: 2px solid var(--sky-300); padding-bottom: 3px; }
.flyer h3 { font-size: 15px; }
.flyer p { margin: 0 0 8px; }
.flyer-dek { color: var(--slate); font-size: 14px; }

.flyer .box.dark { margin: 12px 0; padding: 14px 18px 6px; }
.flyer .box.dark p { font-size: 15px; }

.flyer-events { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.flyer .event-card { grid-template-columns: 62px 1fr; gap: 12px; padding: 12px; margin: 0; }
.flyer .event-date { padding: 6px 2px; }
.flyer .event-date span { display: block; }
.flyer .event-meta { font-size: 12.5px; color: var(--navy); font-weight: 700; margin-bottom: 5px; }

.flyer-steps { margin: 0; padding-left: 20px; }
.flyer-steps li { margin-bottom: 6px; }
.flyer-url { color: var(--blue); font-weight: 700; }

.flyer-foot { margin-top: 14px; padding-top: 10px; border-top: 2px solid var(--sky-300); text-align: center; }
.flyer-contact { font-size: 16px; color: var(--navy); }
.flyer-foot .disc { font-size: 10.5px; color: var(--slate-lighter); }

@media (max-width: 600px) {
  .flyer-events { grid-template-columns: 1fr; }
}

@media print {
  .flyer-page { background: var(--bg); }
  .flyer { margin: 0; padding: 0; max-width: none; }
  .flyer .box.dark, .flyer .event-date, .flyer-page { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Utility ---------- */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.small { font-size: 13.5px; color: var(--slate-lighter); }
.pill {
  display: inline-block;
  background: var(--sky-100);
  color: var(--navy);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 700;
  margin: 0 6px 6px 0;
}