/* ================================================================
   MARK MEZZANO FOR REDDING CITY COUNCIL 2026
   styles.css — Main Stylesheet
   ================================================================
   Structure:
   01. Custom Properties (Design Tokens)
   02. Reset & Base
   03. Typography
   04. Layout Utilities
   05. Buttons
   06. Section Utilities
   07. Skip Link (Accessibility)
   08. Navigation
   09. Hero
   10. Stats Bar
   11. About
   12. Platform
   13. Community
   14. Quote Banner
   15. Get Involved
   16. Donate
   17. Footer
   18. Responsive Overrides
   ================================================================ */


/* ================================================================
   01. CUSTOM PROPERTIES
   ================================================================ */

:root {
  /* --- Color Palette --- */
  /* Core political identity */
  --red:          #C0392B;
  --red-dark:     #962D22;
  --red-light:    #E74C3C;

  /* Navy — authority, water, depth */
  --navy:         #0F2044;
  --navy-mid:     #1B3060;
  --navy-light:   #2C4A88;

  /* Forest — Redding's forests, nature, NorCal */
  --forest:       #2D6A4F;
  --forest-mid:   #40916C;
  --forest-light: #74C69D;

  /* Sky — Sacramento River, lakes, blue mountains */
  --sky:          #3A7ABF;
  --sky-light:    #6BA3D6;

  /* Neutral / Warm */
  --cream:        #F7F4EE;
  --white:        #FFFFFF;
  --gray-50:      #F9FAFB;
  --gray-100:     #F1F0ED;
  --gray-200:     #E5E3DF;
  --gray-400:     #9CA3AF;
  --gray-500:     #6B7280;
  --gray-700:     #374151;
  --gray-900:     #111827;
  --text:         #1C1C2E;

  /* --- Typography --- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* --- Type Scale (modular, 1.25 ratio) --- */
  --text-xs:   0.75rem;
  --text-sm:   0.9rem;
  --text-base: 1rem;
  --text-lg:   1.3rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  /* --- Spacing Scale --- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* --- Layout --- */
  --container-max: 1800px;
  --container-pad: clamp(1.25rem, 5vw, 2.5rem);

  /* --- Effects --- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 10px 30px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-xl:  0 20px 50px rgba(0, 0, 0, 0.15);

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* --- Nav --- */
  --nav-height: 72px;
  --nav-height-scrolled: 60px;

  /* --- Hero background (swap to add photo) --- */
  /* --hero-bg-image: url('../images/hero-bg.jpg'); */
}


/* ================================================================
   02. RESET & BASE
   ================================================================ */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
  appearance: none;
  -webkit-appearance: none; /* strip iOS's native button chrome, which can
                                paint over custom backgrounds like the
                                hamburger bars */
}

/* Focus visible — keyboard navigation */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ================================================================
   03. TYPOGRAPHY
   ================================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--navy);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(var(--text-4xl), 7vw, var(--text-7xl)); font-weight: 800; }
h2 { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); font-weight: 700; }
h3 { font-size: var(--text-xl); font-weight: 700; }
h4 { font-size: var(--text-lg); font-weight: 700; }

p {
  line-height: 1.75;
  color: var(--gray-700);
}

strong {
  font-weight: 600;
  color: var(--text);
}


/* ================================================================
   04. LAYOUT UTILITIES
   ================================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  position: relative;
  padding-block: var(--space-24);
}


/* ================================================================
   05. BUTTONS
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-fast),
              box-shadow var(--transition-base);
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary — red fill */
.btn--primary {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(192, 57, 43, 0.35);
}
.btn--primary:hover {
  background: var(--red-dark);
  box-shadow: 0 6px 20px rgba(192, 57, 43, 0.45);
}

/* Ghost — white outline on dark backgrounds */
.btn--ghost {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.btn--ghost:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

/* Outline dark — dark border on light backgrounds */
.btn--outline-dark {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn--outline-dark:hover {
  background: var(--navy);
  color: var(--white);
}

/* Text arrow — inline link style */
.btn--text-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--red);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.03em;
  padding: 0;
  border: none;
  background: none;
  transition: gap var(--transition-base), color var(--transition-base);
  text-transform: none;
}
.btn--text-arrow:hover {
  gap: var(--space-3);
  color: var(--red-dark);
  transform: none;
}

/* ================================================================
   06. SECTION UTILITIES
   ================================================================ */

.section__label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--space-3);
}

.section__label--light {
  color: var(--forest-light);
}

.section__heading {
  color: var(--navy);
  margin-bottom: var(--space-4);
}

.section__heading--light {
  color: var(--white);
}

.section__sub {
  font-size: var(--text-lg);
  color: var(--gray-500);
  max-width: 800px;
  margin-inline: auto;
}

.section__header {
  text-align: center;
  margin-bottom: var(--space-16);
}


/* ================================================================
   07. SKIP LINK
   ================================================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-3) var(--space-6);
  background: var(--navy);
  color: var(--white);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }


/* ================================================================
   08. NAVIGATION
   ================================================================
   Moved to css/nav-component.css (drop-in nav component — see
   that file's header comment). --nav-height / --nav-height-scrolled
   stay here since main/body padding below also depends on them.
   ================================================================ */


/* ================================================================
   09. HERO
   ================================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--nav-height);
}

/* Background layer */
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    /* If you add --hero-bg-image, uncomment: */
    /* var(--hero-bg-image) center/cover no-repeat, */
    linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 50%, #1a3a6e 100%);
  z-index: 0;
}

/* Dark overlay — also tints a background image if one is set */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      105deg,
      rgba(15, 32, 68, 0.95) 100%,
      rgba(15, 32, 68, 0.85) 45%,
      rgba(15, 32, 68, 0.40) 100%
    ),
    url('../images/sundialbridge.jpg') center/cover no-repeat;
  z-index: 1;
}

/* Diagonal red accent stripe */
.hero__accent-stripe {
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, var(--red), transparent);
  z-index: 2;
}

/* Inner layout */
.hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-block: var(--space-20);
}

/* Left: text. The actual grid item — a plain flex column, functionally
   identical to how .hero__content itself used to be laid out before the
   eyebrow was split out. At the mobile breakpoint this becomes `display:
   contents` (see the media query) and disappears from layout, promoting
   .hero__eyebrow/.hero__content to be direct grid items of .hero__inner
   so `order` can place the photo between them — without touching how
   desktop centers this column against the photo at all. */
.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.hero__eyebrow-rule {
  display: block;
  width: 36px;
  height: 2px;
  background: var(--red);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.hero__heading {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
}

.hero__heading-first {
  display: block;
  color: rgba(255,255,255,0.9);
}

.hero__heading-last {
  display: block;
  color: var(--white);
  /* Subtle red underline accent under last name */
  position: relative;
  width: fit-content;
}

.hero__heading-last::after {
  /* content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 80px;
  height: 4px;
  background: var(--red);
  border-radius: var(--radius-full); */
}

/* "VOTE" kicker above the name — small, wide-tracked, not competing with the display type */
.hero__heading-kicker {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red-light);
  line-height: 1.3;
  margin-bottom: var(--space-2);
}

/* "for Redding City Council" beneath the name — reads as one line with the name above it */
.hero__heading-office {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.3;
  margin-top: var(--space-3);
}

.hero__tagline {
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  max-width: 480px;
}

.hero__tagline em {
  font-style: italic;
  color: var(--white);
  font-weight: 500;
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

/* Right: photo frame */
.hero__visual {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.hero__photo-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
}

/* Red border accent behind photo */
.hero__photo-frame::before {
  content: '';
  position: absolute;
  top: -16px;
  right: -16px;
  bottom: 16px;
  left: 16px;
  border: 3px solid var(--red);
  border-radius: var(--radius-lg);
  z-index: 0;
  opacity: 0.5;
}

.hero__photo-placeholder {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3/4;
  background: rgba(255,255,255,0.06);
  border: 2px rgba(255,255,255,0.2);
  border-radius: var(--radius-lg);
  color: rgba(255,255,255,0.4);
  font-size: var(--text-sm);
  font-style: italic;
  backdrop-filter: blur(4px);
  /*background image */
  background-image: url('../images/markmezzano.jpg');
  background-size: cover;
  background-position: center;
}

/* When you add a real photo: */
.hero__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-lg);
  display: block;
}

/* Badge overlay on photo */
.hero__photo-badge {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  background: var(--navy);
  border-left: 3px solid var(--red);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero__photo-badge-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}

.hero__photo-badge-sub {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
}

/* Diagonal bottom cut — nav into statsbar */
.hero__bottom-cut {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: var(--cream);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 4;
}


/* ================================================================
   10. STATS BAR
   ================================================================ */

.statsbar {
  position: relative;
  background: var(--cream);
  padding-block: var(--space-10) var(--space-12);
}

/* Red top border stripe */
.statsbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--container-pad);
  right: var(--container-pad);
  height: 1px;
  /* background: linear-gradient(to right, var(--red), transparent); */
}

.statsbar__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
}

.statsbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-2);
  min-width: 0;
  position: relative;
}

/* Dividers between items — centered in the grid gap, not on a column edge */
.statsbar__item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1rem;
  top: 20%;
  height: 60%;
  width: 1px;
  background: var(--gray-400);
}

.statsbar__value {
  font-family: var(--font-display);
  /* Tuned so the longest heading ("Keep Redding Affordable") stays on one
     line across the whole 4-column desktop range (>1200px) — see the
     matching 2-column tier below 1200px for the mid/small-screen formula. */
  font-size: clamp(1.3rem, 1.9vw - 0.15rem, 2.05rem);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.statsbar__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-top: var(--space-1);
}


/* ================================================================
   11. ABOUT
   ================================================================ */

.about {
  background: var(--white);
  padding-block: var(--space-24) var(--space-32);
}

.about__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(var(--space-10), 6vw, var(--space-20));
  align-items: center;
}

.about__visual {
  position: relative;
}

/* Text column. The actual grid item — a plain flex column, functionally
   identical to how .about__content itself used to be laid out before the
   label was split out. At the mobile breakpoint this becomes `display:
   contents` (see the media query) and disappears from layout, promoting
   .about__label/.about__content to be direct grid items of .about__grid
   so `order` can place the photo between them — without touching how
   desktop lays this column out against the photo at all. */
.about__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Slightly larger than the shared section label — this one reads as a
   question ("Why is Mark the Right Choice?") and needs a touch more presence. */
.about__label {
  font-size: 0.8125rem;
}

.about__photo-wrap {
  position: relative;
  padding: var(--space-6) 0 0 var(--space-6);
}

/* Decorative block behind photo */
.about__accent-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 55%;
  background: var(--cream);
  border-radius: var(--radius-md);
  z-index: 0;
}

.about__photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  display: block;
}

.about__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border: 2px dashed var(--gray-200);
  color: var(--gray-400);
  font-size: var(--text-sm);
  font-style: italic;
  border-radius: var(--radius-md);
  min-height: 400px;
}

/* Red vertical accent beside photo */
.about__photo-wrap::after {
  content: '';
  position: absolute;
  right: -var(--space-4);
  bottom: var(--space-8);
  width: 4px;
  height: 40%;
  background: var(--red);
  border-radius: var(--radius-full);
  z-index: 2;
}

.about__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Both paragraphs in the About section share one size/weight/color
   so they read as one consistent voice, not a "lead" + "body" mismatch. */
.about__content p {
  font-size: var(--text-lg);
  color: var(--gray-500);
  line-height: 1.75;
  font-weight: 400;
}


/* ================================================================
   12. PLATFORM
   ================================================================ */

.platform {
  background: var(--cream);
  padding-block: var(--space-24);
  overflow: hidden;
}

/* Subtle decorative background shape */
.platform__bg-shape {
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(192, 57, 43, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.platform__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 1000px;
  margin-inline: auto;
}

.platform__card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6);
  position: relative;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid transparent;
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-base);
  overflow: hidden;
}

/* Red border reveal on hover */
.platform__card:hover {
  border-top-color: var(--red);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Subtle corner gradient on hover */
.platform__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--red), var(--navy-light));
  opacity: 0;
  transition: opacity var(--transition-base);
  /* Override border — sits on top */
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.platform__card:hover::before { opacity: 0; } /* Let border-top handle it */

/* Photo header — bleeds to the card's edges (card has overflow:hidden +
   border-radius, which clips it to matching rounded top corners) */
.platform__card-media {
  position: relative;
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-6)) var(--space-5);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--cream);
}

/* Photos are stacked and crossfaded by the slideshow in main.js. The
   first <img> carries .is-active in the markup so it still shows with
   JS disabled or reduced-motion on; the script just moves that class. */
.platform__card-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: transform var(--transition-base), opacity 1000ms ease;
}

.platform__card-media img.is-active {
  opacity: 1;
}

.platform__card:hover .platform__card-media img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .platform__card-media img {
    transition: none;
  }
}

.platform__card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.platform__card-body {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--gray-500);
}

.platform__card-body:not(:last-child) {
  margin-bottom: var(--space-3);
}


/* ================================================================
   13. COMMUNITY
   ================================================================ */

.community {
  position: relative;
  padding-block: var(--space-24);
  overflow: hidden;
}

/* Background — set the CSS variable to add a photo */
.community__bg-img {
  position: absolute;
  inset: 0;
  /* --community-bg-image: url('../images/redding-landscape.jpg'); */
  background:
    /* var(--community-bg-image, none) center/cover no-repeat, */
    linear-gradient(135deg, var(--forest) 0%, var(--navy) 100%);
  z-index: 0;
}

.community__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 32, 68, 0.75);
  z-index: 1;
}

.community__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-10), 6vw, var(--space-20));
  align-items: center;
}

.community__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.community__text .section__heading {
  line-height: 1.15;
}

.community__body {
  color: rgba(255,255,255,0.75);
  line-height: 1.8;
}

/* Features list (right column) */
.community__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.community__feature {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  transition: background var(--transition-base), border-color var(--transition-base);
}

.community__feature:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.community__feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid rgba(192, 57, 43, 0.5);
}

.community__feature-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community__feature h4 {
  color: var(--white);
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}

.community__feature p {
  color: rgba(255,255,255,0.6);
  font-size: var(--text-sm);
  line-height: 1.6;
}


/* ================================================================
   14. QUOTE BANNER / ENDORSEMENTS
   (section id="endorsements" reuses this shell for the endorsements
   list plus a compact version of the quote block)
   ================================================================ */

.quote-banner {
  background: var(--white);
  padding-block: var(--space-20);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  position: relative;
  overflow: hidden;
}

/* Subtle background pattern */
.quote-banner::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(192,57,43,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.quote-banner__block {
  position: relative;
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--space-12);
}

.quote-banner__mark {
  position: absolute;
  top: -30px;
  left: 0;
  font-family: var(--font-display);
  font-size: 8rem;
  line-height: 1;
  color: var(--red);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}

.quote-banner__text {
  font-family: var(--font-body);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-style: italic;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.5;
  margin-bottom: var(--space-6);
}

.quote-banner__cite {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  font-style: normal;
}

/* Endorsements — shares the .quote-banner section shell (bg/border/padding) */
.endorsements__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  justify-content: center;
  gap: var(--space-6);
  max-width: 1100px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
}

.endorsement__card {
  background: var(--cream);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--red);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}

.endorsement__name {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Reserve two lines' worth of height so short one-line names don't leave
     the title beneath them sitting higher than on the cards whose names
     wrap — every card's title lines up. */
  min-height: 2.6em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: var(--space-1);
}

.endorsement__title {
  font-size: var(--text-sm);
  color: var(--gray-500);
}

/* Compact variant of the quote block when it sits inside another section */
.quote-banner__block--compact {
  max-width: 700px;
}

.quote-banner__block--compact .quote-banner__text {
  font-size: clamp(var(--text-lg), 2vw, var(--text-2xl));
  margin-bottom: var(--space-4);
}


/* ================================================================
   15. GET INVOLVED
   ================================================================ */

.involved {
  background: var(--cream);
}

.involved__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: stretch;
}

.involved__card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-10) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.involved__card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* Featured card — center/donate */
.involved__card--featured {
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: var(--shadow-lg);
}

.involved__card--featured h3 {
  color: var(--white);
}

.involved__card--featured p {
  color: rgba(255,255,255,0.7);
}

.involved__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  color: var(--navy);
  flex-shrink: 0;
  transition: background var(--transition-base);
}

.involved__card--featured .involved__icon {
  background: rgba(192, 57, 43, 0.2);
  color: var(--red-light);
}

.involved__card:not(.involved__card--featured):hover .involved__icon {
  background: var(--red);
  color: var(--white);
}

.involved__icon svg {
  width: 28px;
  height: 28px;
}

.involved__card h3 {
  font-size: var(--text-2xl);
}

.involved__card p {
  font-size: var(--text-sm);
  line-height: 1.7;
  flex-grow: 1;
}

.involved__card .btn {
  margin-top: auto;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}


/* ================================================================
   16. DONATE
   ================================================================ */

.donate {
  position: relative;
  padding-block: var(--space-24);
  overflow: hidden;
}

.donate__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--red-dark) 0%, var(--red) 50%, #c0392b 100%);
  z-index: 0;
}

/* Subtle texture */
.donate__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.donate__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.donate__heading {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  color: var(--white);
  font-weight: 800;
  margin-bottom: var(--space-4);
}

.donate__sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  margin-bottom: var(--space-10);
}

.donate__amounts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-8);
}

.donate__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-fast),
              box-shadow var(--transition-base);
  cursor: pointer;
}

.donate__btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Featured amount — stands out */
.donate__btn--featured {
  background: var(--white);
  color: var(--red);
  border-color: var(--white);
  font-size: var(--text-lg);
  padding: 0.875rem 2rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.donate__btn--featured:hover {
  background: var(--cream);
  color: var(--red-dark);
  border-color: var(--cream);
}

.donate__btn--other {
  min-width: auto;
  font-weight: 500;
  font-size: var(--text-sm);
  border-style: dashed;
}

.donate__legal {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  max-width: 540px;
  margin-inline: auto;
}


/* ================================================================
   17. FOOTER
   ================================================================ */

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

.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-10);
  align-items: center;
  padding-block: var(--space-12);
  justify-items: center;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  justify-self: start;
}

.footer__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.footer__race {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

.footer__email {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  transition: color var(--transition-fast);
  margin-top: var(--space-2);
}
.footer__email:hover { color: var(--white); }

.footer__nav {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
}

.footer__nav a,
.footer__nav button {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  font-weight: 500;
  transition: color var(--transition-fast);
  letter-spacing: 0.02em;
}
.footer__nav a:hover,
.footer__nav button:hover { color: var(--white); }

/* Legal bar */
.footer__legal-bar {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-block: var(--space-5);
}

.footer__legal-bar p {
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
}


/* ================================================================
   18. RESPONSIVE OVERRIDES
   ================================================================
   Breakpoints:
     sm:  640px  — small phones → landscape
     md:  768px  — tablets portrait
     lg:  1024px — tablets landscape / small desktop
     xl:  1280px — standard desktop
   ================================================================ */


/* --- Compact desktop / landscape tablet (769px–1200px) ---
   Keeps the desktop presentation comfortable as the viewport approaches
   the tablet breakpoint: more breathing room under the hero actions and
   a tighter, truly centered four-column priority bar. */
@media (min-width: 769px) and (max-width: 1200px) {

  .hero__inner {
    padding-bottom: calc(var(--space-24) + 2.5rem);
  }

  .hero__actions {
    margin-bottom: var(--space-4);
  }

  /* Statsbar stays 2-column through this whole tier — see the dedicated
     "Statsbar: 2-column tier" block below (0–1200px) for its rules. */
}


/* --- Statsbar: 2-column tier (640px–1200px) ---
   The four priority headings are now full phrases, not single words, so a
   4-across row only has room to breathe once each column is comfortably
   wide. Between 640–1200px it goes 2-up (like the other card grids' mobile
   pattern) so every heading — including the longest, "Keep Redding
   Affordable" — reliably sets on one line and all four items stay the
   same height. Above 1200px, the base (4-column) rules above take over;
   below 640px, the single-column tier further down takes over. */
@media (min-width: 640px) and (max-width: 1200px) {

  .statsbar__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
  }

  .statsbar__item:not(:last-child)::after {
    right: -1.25rem;
  }

  .statsbar__item:nth-child(2)::after {
    display: none;
  }

  .statsbar__value {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
  }
}

/* --- Statsbar: single-column tier (< 640px) ---
   Below 640px there isn't room for two of these full-phrase headings
   side by side without either wrapping unevenly or shrinking past
   legibility. One column gives every item the full row width, so each
   heading sets on one line and there's no cross-column misalignment. */
@media (max-width: 639px) {

  .statsbar__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    max-width: 340px;
    margin-inline: auto;
  }

  /* The desktop divider is a vertical rule between side-by-side items —
     doesn't make sense once they're stacked. Swap it for a short red
     horizontal rule instead (same motif as .hero__eyebrow-rule), centered
     in the gap below each item except the last, so the stack still reads
     as a set of distinct items rather than one plain block of text.
     (Selector matches the base rule's specificity — .statsbar__item:not
     (:last-child)::after — so this actually overrides it instead of
     losing the cascade to the earlier, more specific desktop rule.) */
  .statsbar__item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: auto;
    left: 50%;
    top: auto;
    bottom: calc(-1 * var(--space-5) / 2);
    transform: translate(-50%, -50%);
    width: 36px;
    height: 2px;
    background: var(--red);
    border-radius: var(--radius-full);
  }

  .statsbar__value {
    font-size: clamp(1.3rem, 5vw, 1.7rem);
  }

  /* Eyebrow: on phones the full line "Moving Redding Forward · Go With
     Mezzano" is too wide. Drop the red rule and the middot separator
     entirely and stack the two phrases as a clean, centered label. */
  .hero__eyebrow {
    gap: 0;
    letter-spacing: 0.14em;
  }

  .hero__eyebrow-rule,
  .hero__eyebrow-sep {
    display: none;
  }

  .hero__eyebrow-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 3px;
  }
}

/* --- Large (< 1024px) --- */
@media (max-width: 1024px) {

  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
    padding-block: var(--space-16);
  }

  /* .hero__text disappears as a box — its two children
     (.hero__eyebrow, .hero__content) become direct items of
     .hero__inner's grid instead, sitting alongside .hero__visual, so
     `order` can freely interleave all three: eyebrow, then photo,
     then heading/tagline/actions. */
  .hero__text {
    display: contents;
  }

  .hero__eyebrow {
    order: -2;
    justify-content: center;
  }

  .hero__visual {
    order: -1;
    justify-content: center;
  }

  .hero__photo-frame {
    max-width: 280px;
  }

  .hero__content {
    order: 0;
    align-items: center;
    text-align: center;
  }

  .hero__heading-last::after {
    margin-inline: auto;
  }

  .hero__tagline {
    text-align: center;
    max-width: 100%;
  }

  .hero__actions {
    justify-content: center;
  }

  .about__grid {
    grid-template-columns: 1fr;
  }

  /* .about__text disappears as a box — its two children (.about__label,
     .about__content) become direct items of .about__grid instead,
     sitting alongside .about__visual, so `order` can freely interleave
     all three: label, then photo, then heading/paragraphs/link. */
  .about__text {
    display: contents;
  }

  .about__label {
    order: -2;
    justify-self: center; /* centers the label itself within its grid cell — text-align only centers inline content *inside* a box, not the box */
  }

  .about__visual {
    order: -1;
    max-width: 380px;
    margin-inline: auto;
  }

  .about__content {
    order: 0;
    align-items: center;
    text-align: center;
  }

  .community__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .community__text {
    align-items: center;
    text-align: center;
  }

  .platform__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__inner {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .footer__nav {
    justify-content: start;
  }
}


/* --- Medium (< 768px) --- */
@media (max-width: 768px) {

  :root {
    --nav-height: 64px;
    --nav-height-scrolled: 56px;
  }

  /* .nav__* mobile rules live in css/nav-component.css */

  /* Hero */
  .hero {
    min-height: 100svh;
  }

  .hero__photo-frame {
    max-width: 240px;
  }

  .hero__bottom-cut { height: 50px; }

  /* Stats bar — 2-column layout/sizing lives in the dedicated
     "Statsbar: 2-column tier" block (0–1200px), further up this file. */

  /* Platform: 1 column on small screens */
  .platform__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  /* Involved: 1 column */
  .involved__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  /* Endorsements: 1 column */
  .endorsements__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  /* Donate amounts */
  .donate__amounts {
    gap: var(--space-2);
  }

  .donate__btn {
    min-width: 80px;
    padding: 0.625rem 1.25rem;
  }

  /* Footer */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
    justify-items: center;
  }

  .footer__brand { justify-self: center; align-items: center; }
  .footer__nav   { justify-content: center; }
}


/* --- Small (< 480px) --- */
@media (max-width: 480px) {

  .section { padding-block: var(--space-16); }

  .hero__actions {
    flex-direction: column;
    gap: var(--space-3);
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 280px;
  }

  /* Stats bar is already single-column below 640px (see the dedicated
     tier further up this file) — nothing to override here. */

  .quote-banner__block {
    padding-inline: var(--space-4);
  }

  .quote-banner__mark {
    font-size: 5rem;
    top: -20px;
  }
}


/* ================================================================
   PRINT STYLES
   ================================================================ */

@media print {
  .nav, .hero__actions, .donate, .involved, footer { display: none; }
  .hero { min-height: auto; padding-block: var(--space-8); }
  body { color: black; background: white; }
}