/* ==========================================================================
   DONNA VIDRINE FOR SAN CLEMENTE CITY COUNCIL — DISTRICT 1
   Design system: "Coastal Civic"
   ========================================================================== */

:root {
  /* Brand Colors */
  --color-navy: #163A5F;
  --color-navy-dark: #0F2740;
  --color-ocean: #2F6F8F;
  --color-terracotta: #B5482C;
  --color-terracotta-dark: #973A22;

  /* Neutral Colors */
  --color-charcoal: #202830;
  --color-ivory: #F7F4EC;
  --color-sand: #E7DDCE;
  --color-white: #FFFFFF;

  /* Typography */
  --font-display: "Source Serif 4", Georgia, serif;
  --font-body: "Inter", Arial, sans-serif;

  /* Layout */
  --container: 1240px;
  --content-narrow: 720px;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* UI */
  --radius-sm: 4px;
  --radius-md: 6px;
  --border-color: #E7DDCE;
  --transition-fast: 150ms ease;
  --transition-default: 200ms ease;
  --transition-slow: 250ms ease;

  /* Consistent side margin used by every full-width section, the header,
     and the credential strip — kept in one place so it never drifts
     between breakpoints. */
  --side-pad: var(--space-4);
}

@media (max-width: 1024px) {
  :root { --side-pad: var(--space-3); }
}

@media (max-width: 480px) {
  :root { --side-pad: var(--space-2); }
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

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

/* Guarantees the native `hidden` attribute always actually hides an element,
   even on components (nav links, buttons, etc.) that set their own explicit
   `display` value with higher CSS specificity than the browser default
   `[hidden] { display: none }` rule. Used to toggle whole sections (like
   Endorsements) on/off without deleting content. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.62;
  color: var(--color-charcoal);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--color-ocean); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  color: var(--color-navy);
}

h2 { font-size: 48px; }
h3 { font-size: 27px; }
h4 { font-size: 21px; font-family: var(--font-body); font-weight: 600; }

p { margin: 0 0 var(--space-3); }

ul { list-style: none; margin: 0; padding: 0; }

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--color-ocean);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-2) var(--space-3);
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

.section-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-7) var(--side-pad);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-terracotta);
  margin: 0 0 var(--space-2);
}

.eyebrow-inverse { color: #E0B9AA; }

.lead {
  font-size: 20px;
  line-height: 1.6;
  max-width: var(--content-narrow);
  color: var(--color-charcoal);
}

.content-needed {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-terracotta-dark);
  background: #FBEDE7;
  border: 1px dashed var(--color-terracotta);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  margin: 4px 0;
}

/* ==========================================================================
   IMAGE PLACEHOLDERS
   ========================================================================== */

.img-placeholder {
  background: repeating-linear-gradient(135deg, #EDE6D8, #EDE6D8 10px, #E4DAC7 10px, #E4DAC7 20px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-height: 260px;
  width: 100%;
}
.img-placeholder span { padding: var(--space-3); }

.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-1-1 { aspect-ratio: 1 / 1; min-height: 0; }

/* Real photos dropped into a ratio-x-x slot: fill and crop to the frame,
   matching the border/radius treatment the placeholders used. */
img.ratio-4-5, img.ratio-3-2, img.ratio-4-3, img.ratio-1-1 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--transition-default), color var(--transition-default), border-color var(--transition-default);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-navy);
  color: var(--color-white);
}
.btn-primary:hover { background: var(--color-navy-dark); text-decoration: none; }

.btn-secondary {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.btn-secondary:hover { background: var(--color-navy); color: var(--color-white); text-decoration: none; }

.btn-donate {
  background: var(--color-terracotta);
  color: var(--color-white);
}
.btn-donate:hover { background: var(--color-terracotta-dark); text-decoration: none; }

.btn-large { height: 58px; padding: 0 36px; font-size: 16px; }
.btn-full { width: 100%; }

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 244, 236, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border-color);
  transition: box-shadow var(--transition-default);
}
.site-header.is-scrolled { box-shadow: 0 2px 14px rgba(22, 58, 95, 0.08); }

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--side-pad);
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  display: flex;
  flex-direction: column;
  color: var(--color-navy);
  line-height: 1.1;
}
.wordmark:hover { text-decoration: none; }
.wordmark-logo {
  height: 56px;
  width: auto;
  display: block;
}
.wordmark-sub {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ocean);
  margin-top: 4px;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.primary-nav a {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-charcoal);
}
.primary-nav a:hover { color: var(--color-navy); text-decoration: none; }
.primary-nav a.is-active { color: var(--color-navy); }

.nav-donate {
  background: var(--color-terracotta);
  color: var(--color-white) !important;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-default);
}
.nav-donate:hover { background: var(--color-terracotta-dark); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* The persistent Donate button next to the hamburger only shows once the
   full nav (which already includes its own Donate item) collapses — see
   the max-width: 1024px rule below. Donate should never be reachable only
   through the hamburger menu. */
.header-donate {
  display: none;
  padding: 8px 18px;
  font-size: 14px;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-navy);
  margin: 0 auto;
  transition: transform var(--transition-default), opacity var(--transition-default);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  max-height: 0;
  overflow: hidden;
  background: var(--color-ivory);
  border-bottom: 1px solid var(--border-color);
  transition: max-height var(--transition-slow) ease;
}
.mobile-menu.is-open { max-height: 480px; }
.mobile-menu ul { padding: var(--space-2) var(--side-pad) var(--space-4); }
.mobile-menu li { border-bottom: 1px solid var(--border-color); }
.mobile-menu li:last-child { border-bottom: none; }
.mobile-menu a {
  display: block;
  padding: 16px 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-navy);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  background: var(--color-ivory);
  overflow: hidden;
}

.hero-arch {
  position: absolute;
  right: -6%;
  top: -12%;
  width: 620px;
  height: 620px;
  border: 2px solid rgba(22, 58, 95, 0.12);
  border-radius: 50% 50% 0 0 / 60% 60% 0 0;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-7) var(--side-pad) var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}

.hero-name {
  font-size: 76px;
  margin: 0 0 var(--space-2);
  color: var(--color-navy);
}

.hero-message {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  color: var(--color-terracotta);
  margin: 0 0 var(--space-4);
}

.hero-support {
  font-size: 20px;
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: var(--space-5);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.hero-date {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ocean);
}

.hero-portrait { position: relative; }
.portrait-frame {
  position: relative;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(22, 58, 95, 0.16);
}
.portrait-frame .img-placeholder {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  min-height: 480px;
}
.portrait-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
  min-height: 480px;
}

/* ==========================================================================
   CREDENTIAL STRIP
   ========================================================================== */

.credential-strip {
  background: var(--color-navy);
  padding: var(--space-4) var(--side-pad);
}
.credential-strip ul {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.credential-strip li {
  color: var(--color-ivory);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  padding: 0 var(--space-4);
}
.credential-strip li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(-1 * var(--space-4) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: rgba(247, 244, 236, 0.35);
}

/* ==========================================================================
   MEET DONNA
   ========================================================================== */

.meet-donna { background: var(--color-white); }

.meet-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-7);
  align-items: center;
  padding-bottom: var(--space-5);
}

.meet-image .img-placeholder { min-height: 420px; }

.meet-copy .lead { max-width: none; }

.service-statement {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--color-navy);
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-3);
  margin-top: var(--space-4);
}

.meet-photo-row {
  padding-top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.meet-photo-row .img-placeholder { min-height: 200px; }

/* ==========================================================================
   EXPERIENCE — stacked full-width rows
   ========================================================================== */

.experience { background: var(--color-ivory); }

.experience-grid {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-6);
}

.experience-card {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
}
.experience-card:first-child { border-top: 1px solid var(--border-color); }

.exp-number {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--color-terracotta);
  line-height: 1;
}

.exp-content { min-width: 0; }

.exp-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-terracotta);
  margin-bottom: var(--space-1);
}

.experience-card h3 {
  font-size: 22px;
  margin-bottom: var(--space-2);
}

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

/* ==========================================================================
   PRIORITIES — category card grid
   ========================================================================== */

.priorities { background: var(--color-white); }

.priorities-layout {
  margin-top: var(--space-6);
}

.priority-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.priority-tab {
  text-align: left;
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background var(--transition-default), border-color var(--transition-default);
}
.priority-tab:hover { border-color: var(--color-navy); }
.priority-tab.is-active {
  background: var(--color-navy);
  border-color: var(--color-navy);
}
.priority-tab.is-active .tab-number,
.priority-tab.is-active .tab-label { color: var(--color-white); }

.tab-number {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--color-ocean);
}
.tab-label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-navy);
}

.priority-panels,
.priority-panel { scroll-margin-top: 100px; }

.priority-panel { display: none; }
.priority-panel.is-active { display: block; }

.issue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--content-narrow);
}
.issue-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-navy);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color);
}
.issue-list li::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-terracotta);
}
.issue-list li:last-child { border-bottom: none; }

/* ==========================================================================
   A LIFE OF SERVICE
   ========================================================================== */

.life-of-service { background: var(--color-navy); }

.los-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-7);
  align-items: center;
}

.los-copy h2 { color: var(--color-white); font-size: 44px; }
.los-copy p { color: rgba(247, 244, 236, 0.9); }

.pull-quote {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--color-white);
  border-left: 3px solid var(--color-terracotta);
  padding-left: var(--space-3);
  margin-top: var(--space-4);
}

/* ==========================================================================
   ENDORSEMENTS
   ========================================================================== */

.endorsements { background: var(--color-ivory); }
.endorsements h2 { margin-top: 0; }

.endorsement-cards {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.endorsement-card {
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  text-align: center;
}
.endorsement-card p { margin: 0; }

.endorsement-card .img-placeholder {
  width: 88px;
  height: 88px;
  min-height: 0;
  border-radius: 50%;
  margin: 0 auto var(--space-3);
  font-size: 9px;
  overflow: hidden;
}

.endorsement-category {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ocean);
  margin-bottom: 6px !important;
}

@media (max-width: 720px) {
  .endorsement-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   GET INVOLVED / FORM
   ========================================================================== */

.get-involved { background: var(--color-white); }
.get-involved .eyebrow,
.get-involved h2,
.get-involved .lead { text-align: center; margin-left: auto; margin-right: auto; }

/* Netlify spam honeypot: hidden from sighted users and keyboard tab order,
   but still present in the DOM so bots that auto-fill every field get caught. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.volunteer-form {
  margin: var(--space-6) auto 0;
  max-width: 760px;
  background: var(--color-white);
  border: 1px solid var(--color-ocean);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: 0 24px 56px rgba(22, 58, 95, 0.12);
}

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}

.form-field {
  margin-bottom: var(--space-3);
  border: none;
  padding: 0;
}

.form-field label,
.form-field legend {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 6px;
  padding: 0;
}

.optional-tag { font-weight: 400; color: var(--color-ocean); }

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
  width: 100%;
  min-height: 50px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-charcoal);
  background: var(--color-white);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.form-field textarea { min-height: 110px; resize: vertical; }

.form-field input:focus, .form-field textarea:focus {
  border-color: var(--color-navy);
  outline: 3px solid rgba(22, 58, 95, 0.18);
  outline-offset: 0;
}

.form-field input[aria-invalid="true"] { border-color: var(--color-terracotta); }

.field-error {
  display: block;
  color: var(--color-terracotta-dark);
  font-size: 13px;
  margin-top: 4px;
  min-height: 16px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-charcoal);
}
.checkbox-option input {
  width: 20px;
  height: 20px;
  accent-color: var(--color-navy);
}

.form-status {
  margin-top: var(--space-3);
  font-weight: 600;
  min-height: 24px;
}
.form-status.is-success { color: #3B6B3E; }
.form-status.is-error { color: var(--color-terracotta-dark); }

.direct-contact {
  margin: var(--space-6) auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
  max-width: 760px;
  text-align: center;
}
.direct-contact p { margin-bottom: var(--space-1); }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
  text-align: center;
}

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

.contact-name {
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 2px !important;
}

.contact-role {
  font-size: 13px;
  color: var(--color-ocean);
  margin-bottom: 8px !important;
}

@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}

/* ==========================================================================
   DONATE
   ========================================================================== */

.donate { background: var(--color-navy); }
.donate-inner { text-align: center; max-width: 680px; }
.donate-inner p:not(.content-needed) { color: rgba(247, 244, 236, 0.9); margin-left: auto; margin-right: auto; }
.donate-inner h2 { color: var(--color-white); }

.donate-limit {
  margin-top: var(--space-4);
  font-size: 15px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer { background: var(--color-navy-dark); color: var(--color-ivory); }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--space-5);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.footer-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-1);
}

.footer-grid p, .footer-grid a {
  color: rgba(247, 244, 236, 0.78);
  font-size: 14px;
  margin: 0 0 8px;
}
.footer-grid a { display: block; }
.footer-grid a:hover { color: var(--color-white); }

.footer-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ocean);
  margin-bottom: var(--space-2) !important;
}

.footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.social-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(247, 244, 236, 0.28);
  color: rgba(247, 244, 236, 0.78);
  margin: 0 !important;
  transition: background var(--transition-default), color var(--transition-default), border-color var(--transition-default);
}
.social-icon:hover {
  color: var(--color-white);
  border-color: var(--color-ocean);
  background: rgba(47, 111, 143, 0.25);
}

.footer-district {
  margin-top: var(--space-2) !important;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(247, 244, 236, 0.16);
}
.footer-district a { display: inline; color: var(--color-ocean); }
.footer-district a:hover { color: var(--color-white); }

.site-footer .content-needed {
  background: transparent;
  border-color: rgba(181, 72, 44, 0.6);
  color: #E0A98E;
  padding: 4px 8px;
}

/* ==========================================================================
   SCROLL TO TOP
   ========================================================================== */

.scroll-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  border: none;
  font-size: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(22, 58, 95, 0.3);
  transition: background var(--transition-default), opacity var(--transition-default);
  z-index: 90;
}
.scroll-top:hover { background: var(--color-navy-dark); }
.scroll-top.is-visible { display: flex; }

/* ==========================================================================
   RESPONSIVE — TABLET
   ========================================================================== */

@media (max-width: 1024px) {
  .section-inner { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  h2 { font-size: 38px; }
  .hero-name { font-size: 58px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .hero-portrait { order: -1; max-width: 420px; margin: 0 auto; }
  .hero-arch { display: none; }
  .meet-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .meet-photo-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .los-grid { grid-template-columns: minmax(0, 1fr); }
  .los-image { max-width: 420px; margin: 0 auto; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* Switch to the hamburger well before the nav links would ever run out of
     room and wrap onto a second line — squished, stacked nav text is worse
     than switching to the menu a bit early. */
  .primary-nav { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: block; }
  .header-donate { display: inline-flex; }
}

/* ==========================================================================
   RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width: 720px) {
  body { font-size: 17px; }
  .section-inner { padding-top: var(--space-5); padding-bottom: var(--space-5); }
  h2 { font-size: 34px; }
  h3 { font-size: 24px; }

  .header-inner { height: 76px; }
  .wordmark-logo { height: 48px; }

  .hero-name { font-size: 46px; }
  .hero-message { font-size: 24px; }
  .hero-support { font-size: 17px; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .hero-ctas .btn { width: 100%; }

  .credential-strip ul { flex-direction: column; gap: var(--space-2); }
  .credential-strip li { padding: 0; }
  .credential-strip li:not(:last-child)::after { display: none; }

  .meet-photo-row { grid-template-columns: minmax(0, 1fr); }

  .experience-card { grid-template-columns: 52px minmax(0, 1fr); column-gap: var(--space-3); }
  .exp-number { font-size: 24px; }

  .priority-index { grid-template-columns: minmax(0, 1fr); }

  .form-row { grid-template-columns: minmax(0, 1fr); }
  .checkbox-grid { grid-template-columns: minmax(0, 1fr); }
  .volunteer-form { padding: var(--space-3); }

  .footer-grid { grid-template-columns: minmax(0, 1fr); }

  .scroll-top { right: 16px; bottom: 16px; }
}

/* ==========================================================================
   LEGAL / CONTENT PAGES (Privacy Policy, Accessibility)
   ========================================================================== */

.legal-page { background: var(--color-white); }

.legal-content {
  max-width: var(--content-narrow);
  margin: 0 auto;
}

.legal-updated {
  font-size: 14px;
  color: var(--color-ocean);
  margin-bottom: var(--space-5);
}

.legal-content h2 {
  font-size: 26px;
  margin-top: var(--space-6);
}
.legal-content h2:first-of-type { margin-top: 0; }

.legal-content h3 {
  font-size: 19px;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--color-navy);
}

.legal-content ul {
  list-style: disc;
  padding-left: 1.3em;
  margin: 0 0 var(--space-3);
}
.legal-content ul li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.legal-content .content-needed {
  display: block;
  margin-top: var(--space-5);
}