/* Shared tokens and a mobile-first 12-column grid.
   Brand colors match the 2026 guide already used on these pages.
   Base layout is the phone (390). Columns open at 640 and 1024. */

:root {
  --purple: #524087;
  --purple-deep: #3F316B;
  --purple-dark: #342858;
  --lavender: rgba(215, 196, 242, 0.55);
  --lavender-soft: rgba(215, 196, 242, 0.28);
  --teal: #7EC5C5;
  --teal-dark: #4fa8a8;
  --teal-soft: #EBF7F7;
  --cream: #FBEEDB;
  --gold: #e8a020;
  --dark: #1c1a35;
  --text: #2a2545;
  --muted: #556476;
  --white: #fff;
  --border: #e8e0f0;
  --danger: #dc2626;
  --radius: 16px;
  --shadow: 0 8px 28px rgba(82, 64, 135, .08);
  --font: "Montserrat", system-ui, sans-serif;
  --gutter: 16px;
  --row-width: 1160px;
}

/* Foundation-style row. Every column is full width until a breakpoint. */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter) / -2);
  margin-right: calc(var(--gutter) / -2);
}
.row > [class*="col-"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-left: calc(var(--gutter) / 2);
  padding-right: calc(var(--gutter) / 2);
}
.row > .small-1 { width: 8.333333%; }
.row > .small-2 { width: 16.666667%; }
.row > .small-3 { width: 25%; }
.row > .small-4 { width: 33.333333%; }
.row > .small-5 { width: 41.666667%; }
.row > .small-6 { width: 50%; }
.row > .small-7 { width: 58.333333%; }
.row > .small-8 { width: 66.666667%; }
.row > .small-9 { width: 75%; }
.row > .small-10 { width: 83.333333%; }
.row > .small-11 { width: 91.666667%; }
.row > .small-12 { width: 100%; }

@media (min-width: 640px) {
  :root { --gutter: 20px; }
  .row > .medium-1 { width: 8.333333%; }
  .row > .medium-2 { width: 16.666667%; }
  .row > .medium-3 { width: 25%; }
  .row > .medium-4 { width: 33.333333%; }
  .row > .medium-5 { width: 41.666667%; }
  .row > .medium-6 { width: 50%; }
  .row > .medium-7 { width: 58.333333%; }
  .row > .medium-8 { width: 66.666667%; }
  .row > .medium-9 { width: 75%; }
  .row > .medium-10 { width: 83.333333%; }
  .row > .medium-11 { width: 91.666667%; }
  .row > .medium-12 { width: 100%; }
}

@media (min-width: 1024px) {
  :root { --gutter: 24px; }
  .row > .large-1 { width: 8.333333%; }
  .row > .large-2 { width: 16.666667%; }
  .row > .large-3 { width: 25%; }
  .row > .large-4 { width: 33.333333%; }
  .row > .large-5 { width: 41.666667%; }
  .row > .large-6 { width: 50%; }
  .row > .large-7 { width: 58.333333%; }
  .row > .large-8 { width: 66.666667%; }
  .row > .large-9 { width: 75%; }
  .row > .large-10 { width: 83.333333%; }
  .row > .large-11 { width: 91.666667%; }
  .row > .large-12 { width: 100%; }
}

/* Body is 16px from the phone up, and 18px at a 1440-wide window. */
body { font-size: 16px; }
p,
li,
.lede,
.page-hero p,
.path-card p,
.svc-card p,
.way-card p,
.story-text,
.story-author,
.crisis-strip p,
.footer-tagline,
.footer-office,
.fvpsa-note,
.exit-history-note,
.footer-bottom,
.source-note,
.impact-label,
.quote p,
.quote cite,
.demo-form-note,
.placeholder-note,
.person p,
.event-card p,
.doc-meta {
  font-size: 16px;
}
@media (min-width: 1440px) {
  body,
  p,
  .lede,
  .page-hero p,
  .path-card p,
  .svc-card p,
  .way-card p,
  .story-text,
  .crisis-strip p,
  .quote p,
  .person p,
  .event-card p {
    font-size: 18px;
  }
}
.person .person-role {
  font-size: 14px;
  color: var(--purple);
  font-weight: 700;
}

/* Nav and labels can sit at 14px. Hotline, buttons, tables, and wish-list links do not. */
.nav-links a,
.section-label,
.sponsors-label,
.footer .footer-label,
.footer h4,
.opt-switch,
.footer-links a {
  font-size: 14px;
}
.topbar,
.topbar a,
.footer-hotline,
.footer-hotline a {
  font-size: 16px;
}
.btn,
.btn-sm,
button,
.demo-form button,
.bio-toggle {
  font-size: 16px;
}
.data-table,
.data-table th,
.data-table td {
  font-size: 16px !important;
}
.wishlist-page a {
  font-size: 16px;
}

/* 24px side padding, and the home headline shares the section-title edge. */
.container,
.nav-inner,
.topbar .inner,
.crisis-strip .inner {
  padding-left: 24px;
  padding-right: 24px;
}
.hero-inner {
  padding-left: 24px;
  padding-right: 24px;
}
@media (min-width: 640px) {
  .hero-inner {
    padding-left: max(24px, calc((100% - 1160px) / 2 + 24px));
  }
}

/* Tap targets. min-width/min-height beat a smaller width/height on the same element. */
.btn,
.btn-sm,
.nav-links a,
.footer-links a,
.county-links a,
.anchor-links a,
.demo-form button,
.qgiv-fallback a,
.nav-burger,
#safety-exit,
.social-icon,
.funder-logos a {
  min-height: 48px;
  min-width: 48px;
  box-sizing: border-box;
}
.nav-links a,
.footer-links a,
.county-links a,
.anchor-links a,
.topbar a,
.footer-office a,
.footer-hotline a,
.prose a,
.way-give a,
.buried-link a,
.cta-link,
p a,
li a,
td a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  min-width: 48px;
  box-sizing: border-box;
}
@media (max-width: 767.98px) {
  .nav-links a {
    display: flex;
    width: 100%;
  }
}
.demo-form input,
.demo-form textarea,
.demo-form select {
  min-height: 48px;
  font-size: 16px;
  width: 100%;
}

.menu-placeholder,
.footer .menu-placeholder {
  margin: 16px 0 0;
  padding: 8px 12px;
  background: #fff3cd;
  color: #1c1a35;
  border: 1px dashed #c4922a;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.placeholder-note {
  background: #fff8e8;
  border: 1px dashed #c4922a;
  border-radius: 12px;
  padding: 16px 18px;
  color: #2a2545;
  font-size: 16px;
  margin: 12px 0;
}

.gala-feature { padding: 28px 0 8px; }
.gala-banner {
  display: block;
  width: 100%;
  max-width: 1280px;
  height: auto;
  margin: 0 auto 18px;
  border-radius: 16px;
}
.gala-card h2 { margin-bottom: 8px; }

.person {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  height: 100%;
  margin-bottom: 16px;
}
.person + .person { margin-top: 0; }
.person-photo,
.photo-placeholder {
  width: 168px;
  height: 210px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 12px;
  margin-bottom: 12px;
  display: block;
}
.photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  background: #fff8e8;
  border: 1px dashed #c4922a;
  color: #1c1a35;
  font-weight: 700;
  font-size: 14px;
}
.person h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--purple-deep);
  margin-bottom: 4px;
  line-height: 1.25;
}
.person-role {
  color: var(--purple);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}
.person p { margin-bottom: 10px; }
.person-bio {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  line-height: 1.45;
  min-height: calc(1.45em * 4);
}
.person.is-open .person-bio {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.bio-toggle {
  margin-top: 8px;
  min-height: 48px;
  min-width: 48px;
  padding: 8px 16px;
  background: transparent;
  color: var(--purple);
  border: 2px solid var(--purple);
  border-radius: 10px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
}
.bio-toggle[hidden] { display: none; }

.way-give {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 16px 16px;
  height: 100%;
  margin-bottom: 16px;
}
.way-give h3 { margin-bottom: 8px; }
.sponsor-level { margin: 28px 0 8px; }
.sponsor-names {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .sponsor-names { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .sponsor-names { grid-template-columns: 1fr 1fr 1fr; }
}
.sponsor-names li { margin: 0; }
.sponsor-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.sponsor-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  min-height: 100%;
}
.logo-placeholder {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  margin-bottom: 10px;
  background: #fff8e8;
  border: 1px dashed #c4922a;
  border-radius: 12px;
  font-weight: 700;
}

.demo-form-note {
  font-weight: 800;
  color: var(--purple-deep);
  margin-bottom: 12px;
}
.demo-form { position: relative; max-width: 40rem; }
.demo-form input,
.demo-form textarea,
.demo-form select,
.form-group input,
.form-group textarea,
.form-group select,
.custom-amount {
  border: 2px solid #524087;
  background: #fff;
  font-size: 16px;
}
a:focus,
button:focus,
.btn:focus,
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.demo-form button:focus,
.demo-form button:focus-visible {
  outline-style: solid !important;
  outline-width: 2px !important;
  outline-color: #524087 !important;
  outline-offset: 2px !important;
}
/* Field borders are already brand purple, so the ring is darker and sits further out. */
input:focus,
textarea:focus,
select:focus,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-style: solid !important;
  outline-width: 3px !important;
  outline-color: #1c1a35 !important;
  outline-offset: 4px !important;
}
.demo-form label {
  display: block;
  font-weight: 700;
  margin: 14px 0 6px;
  font-size: 16px;
}
.demo-form input,
.demo-form textarea {
  border: 2px solid #524087;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font);
  color: var(--text);
  background: #fff;
}
.demo-form textarea { min-height: 140px; }
.demo-form button {
  margin-top: 16px;
  background: var(--purple);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 16px;
  font-family: var(--font);
  cursor: pointer;
}
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.doc-list a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  min-width: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  font-weight: 700;
}
.buried-link {
  margin-top: 36px;
  font-size: 16px;
}
.event-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 16px;
  margin-bottom: 16px;
  background: #fff;
}
.event-card h3 { margin-bottom: 6px; }

.qgiv-embed-container {
  display: block;
  width: 100%;
  max-width: 630px;
  margin-left: auto;
  margin-right: auto;
}
.qgiv-fallback {
  width: 100%;
  max-width: 630px;
  margin: 16px auto 0;
  text-align: center;
}
.give-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 28px;
  align-items: start;
  width: 100%;
}
.way-stack { display: grid; gap: 16px; }
.give-ways-title { margin: 4px 0 0; }
.give-examples { margin-top: 28px; }
.way-give { margin: 0; }
@media (min-width: 1024px) {
  .give-layout { grid-template-columns: 1fr 1fr; }
  .give-ways-title {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
  }
  .give-form { grid-column: 1; grid-row: 2; align-self: start; }
  .way-stack { display: contents; }
  .way-stack > .way-give:first-child { grid-column: 2; grid-row: 2; }
}
.give-form,
.give-side { min-width: 0; width: 100%; }
.give-box {
  box-sizing: border-box;
  height: 300px;
  padding: 20px 24px;
  border: 2px solid var(--purple);
  border-radius: 16px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  overflow: auto;
}
.give-box h2 { margin: 0; font-size: 22px; }
.give-box p,
.give-box .placeholder-note { margin: 0; }
.give-side .way-give { margin-bottom: 12px; }

.wishlist-figure {
  margin: 18px 0;
}
.wishlist-figure img {
  width: 100%;
  max-width: 850px;
  height: auto;
}

@media (max-width: 1023.98px) {
  .hero-inner { grid-template-columns: 1fr !important; }
  .paths-grid { grid-template-columns: 1fr !important; }
  .svc-grid { grid-template-columns: 1fr !important; }
  .ways-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .split-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 399px) {
  .story-panel,
  .impact-panel { padding: 32px 24px !important; }
  .impact-stats { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .paths-grid { grid-template-columns: 1fr 1fr !important; }
  .svc-grid { grid-template-columns: 1fr 1fr !important; }
  .ways-grid { grid-template-columns: 1fr 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (min-width: 1024px) {
  .paths-grid { grid-template-columns: repeat(3, 1fr); }
  .ways-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Later, equal-or-higher specificity so older rem sizes do not shrink body copy. */
.hero p,
.page-hero p,
.footer .footer-tagline,
.footer .footer-office,
.footer .fvpsa-note,
.footer .exit-history-note,
.footer .footer-bottom,
.footer .footer-bottom span,
.crisis-strip p,
.crisis-strip .btn,
.topbar a.hotline,
.footer .footer-hotline,
.footer .footer-hotline a {
  font-size: 16px;
}
@media (min-width: 1440px) {
  .hero p,
  .page-hero p,
  .lede,
  .prose p,
  .section-sub,
  .way-card p,
  .path-card p,
  .svc-card p,
  .quote p,
  .person .person-bio,
  .person .person-bio p,
  .event-card p,
  .cq-card p,
  .info-block p,
  .info-block a,
  .cta-link {
    font-size: 18px;
  }
  .cq-card .cq-val[style],
  .cq-card .cq-val[style] a {
    font-size: 18px !important;
  }
}