/* 6:8 Kids - Styles matching 68ministries.org */

/* Design tokens from 68ministries.org Elementor kit */
:root {
  --color-primary: #0C2577;
  --color-secondary: #74A5CD;
  --color-accent: #5880B9;
  --color-text: #1B1B1B;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-light-gray: #EEEEEE;
  --color-green: #96D897;
  --color-green-hover: #7cc97a;
  --color-light-blue: #6CB4DB;
  --color-light-bg: #F2F9FF;
  --color-light-green: #E9FFEA;
  --color-purple: #CD9EE9;
  --color-peach: #FFBC7D;
  --color-red: #CA0D0D;

  /* Gradients taken from 68ministries.org's own declarations, not sampled
     pixels, so they match exactly.
       hero  - linear, light sky to mid blue
       deep  - radial, light blue centre fading to navy at the edges. Their
               version sits over a photo; ours is the gradient alone. */
  --hero-top: #C5F5FF;
  --hero-bottom: #5E8BBE;
  --deep-center: #6CB4DB;
  --deep-edge: #0C2577;

  /* Aliases used in inline styles */
  --navy: #0C2577;
  --amber: #FFBC7D;
  --teal: #96D897;
  --teal-dark: #7cc97a;
  --sand: #F5F0E8;
  --warm-gray: #4A4A4A;
  --gray-400: rgba(255, 255, 255, 0.7);

  /* Aliases used in inline styles */
  --navy: #0C2577;
  --amber: #FFBC7D;
  --teal: #96D897;
  --teal-dark: #7cc97a;
  --sand: #F5F0E8;
  --warm-gray: #4A4A4A;
  --gray-400: rgba(255, 255, 255, 0.7);

  --font-heading: 'Racing Sans One', cursive;
  --font-body: 'Montserrat', sans-serif;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 50px;
  --radius-pill: 150px;

  --max-width: 1140px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2em;
  color: var(--color-text);
  background: var(--color-light-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

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

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

address {
  font-style: normal;
}

ul {
  list-style: none;
}

/* Utility */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

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

/* ===== Navigation ===== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: background 0.3s, box-shadow 0.3s;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  max-width: var(--max-width);
  margin: 0 auto;
  height: 100px;
}

.navbar-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.navbar-logo img {
  height: 65px;
  width: auto;
}

.navbar-links {
  display: flex;
  align-items: center;
  /* 20px between link boxes, matching 68ministries.org's header. */
  gap: 20px;
  list-style: none;
}

/* Nav labels must never wrap: a two-line label pushes the pill CTA past the
   fixed 80px header height and breaks the whole bar. */
.navbar-links li {
  flex-shrink: 0;
}

.navbar-links a {
  white-space: nowrap;
}

.navbar-links a {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: var(--color-primary);
  padding: 10px 10px;
  transition: color 0.2s;
  position: relative;
}

.navbar-links a:hover {
  color: var(--color-accent);
}

.navbar-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--color-secondary);
  transition: width 0.2s;
}

.navbar-links a:hover::after {
  width: 80%;
}

/* Mirrors the DONATE NOW button on 68ministries.org exactly, as measured:
   17.6px Montserrat 700, 0.5px tracking, 12px 24px padding, 50px radius, a
   2px white border, 1.1 line-height. Renders at 190x47 like theirs. */
.navbar-cta {
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.1;
  background: var(--color-green) !important;
  color: var(--color-white) !important;
  padding: 12px 24px !important;
  border: 2px solid var(--color-white);
  border-radius: 50px;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 1.1rem !important;
  transition: background-color 0.2s, transform 0.2s !important;
}

/* .navbar-links a outranks .navbar-cta, so weight and tracking have to be set
   on the combined selector or the link rule wins. */
.navbar-links a.navbar-cta {
  font-weight: 700;
  letter-spacing: 0.5px;
}

.navbar-cta::after {
  display: none !important;
}

.navbar-cta:hover {
  background: var(--color-green-hover) !important;
}

/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  padding: 8px;
}

.mobile-menu-btn svg {
  width: 28px;
  height: 28px;
}

/* ===== Sponsor Carousel ===== */
.sponsor-carousel {
  position: relative;
  overflow: hidden;
  height: 280px;
  /* Sits directly on the page background. This referenced an undefined
     custom property and so rendered transparent; making it a solid navy band
     between the light hero and the light stats section reads as a stripe and
     is off-brand against the parent site's airy palette. */
  background: transparent;
  margin-top: 20px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.carousel-track {
  display: flex;
  gap: 1rem;
  padding: 1.5rem 4rem;
  animation: scroll-carousel 90s linear infinite;
  height: 100%;
  width: max-content;
}

.carousel-track:hover {
  animation-play-state: paused;
}

.carousel-card {
  flex: 0 0 180px;
  background: var(--color-white);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: transform 0.2s;
  border: 1px solid var(--color-primary);
}

.carousel-card:hover {
  transform: translateY(-4px);
}

.carousel-card-banner {
  background: var(--color-green);
  color: var(--color-white);
  text-align: center;
  padding: 0.35rem 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 0 0 1px var(--color-primary), 0 0 1px var(--color-primary);
}

.carousel-card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.carousel-card-info {
  padding: 0.5rem 0.6rem 0.6rem;
}

.carousel-card-name {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carousel-card-detail {
  font-size: 0.75rem;
  color: #666;
}

@keyframes scroll-carousel {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  /* min-height rather than height, sized to the tallest hero content (the
     homepage, with two buttons). A fixed 220px let that content overflow by
     9px while shorter pages sat in the same box, so heroes differed page to
     page; every hero now measures the same. */
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(180deg, var(--hero-top) 0%, var(--hero-bottom) 100%);
}

/* Only meaningful when a page sets a photographic hero background; with the
   gradient there is nothing to darken, and a scrim would muddy it. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 1.2rem 20px;
  /* A fixed box, not shrink-to-fit: the same width on every page, and a
     min-height matching the tallest content so short copy centres inside the
     same-sized block instead of producing a smaller hero. */
  width: 100%;
  max-width: 800px;
  min-height: 236px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
  line-height: 1.2;
}

.hero p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-primary);
  font-weight: 500;
  margin-bottom: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ===== Deep band =====
   The mid-page section on 68ministries.org: a radial gradient with a light
   blue centre falling to navy at the edges. Because the edges are navy it
   meets the navy wave dividers seamlessly, top and bottom. */
.band-deep {
  position: relative;
  background-image: linear-gradient(rgba(12, 37, 119, 0.45), rgba(12, 37, 119, 0.45)),
    radial-gradient(ellipse 70% 50% at 50% 50%, var(--deep-center) 0%, var(--deep-edge) 100%);
  padding: 3.5rem 20px;
  text-align: center;
}

.band-deep-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

/* Legibility comes from a soft scrim behind the words rather than from dimming
   the whole photograph, so the picture stays bright where nothing sits on it.
   It is elliptical and fades to nothing, so there is no visible edge. */
.band-photo .band-deep-content::before {
  content: '';
  position: absolute;
  inset: -3.5rem -6rem;
  z-index: -1;
  /* closest-side, not the default farthest-corner. With farthest-corner the
     gradient only reached full transparency at the corners, so the left and
     right edges were still around 28% opaque and the scrim showed as a hard
     blue rectangle over the photograph. closest-side finishes at every edge. */
  background: radial-gradient(ellipse closest-side at center,
    rgba(12, 37, 119, 0.80) 0%,
    rgba(12, 37, 119, 0.68) 42%,
    rgba(12, 37, 119, 0.34) 70%,
    rgba(12, 37, 119, 0.10) 88%,
    rgba(12, 37, 119, 0) 100%);
  pointer-events: none;
}

/* The provides band puts cards rather than bare text over its photo, and the
   cards carry their own backing, so it only needs the edges held down. */
.section-navy.band-photo .container {
  position: relative;
  z-index: 1;
}

.band-deep h2 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--color-white);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.band-deep p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-white);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 700px;
}

@media (min-width: 640px) {
  .band-deep h2 { font-size: 2.5rem; }
}


/* ===== Buttons ===== */
/* Pill buttons matching 68ministries.org: uppercase Montserrat 700, 0.5px
   tracking, 50px radius, 2px border. */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
  transition: all 0.2s;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
}

.btn-primary,
.btn-green {
  background: var(--color-green);
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn-primary:hover,
.btn-green:hover {
  background: var(--color-green-hover);
}

.btn-secondary {
  background: var(--color-secondary);
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn-secondary:hover {
  background: var(--color-accent);
}

.btn-white,
.btn-outline {
  background: var(--color-white);
  border-color: var(--color-green);
  color: var(--color-primary);
}

.btn-white:hover,
.btn-outline:hover {
  background: var(--color-light-green);
}

.btn-full {
  width: 100%;
}

.btn-sm {
  font-size: 1rem;
  padding: 10px 24px;
}

/* ===== Stats ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  text-align: center;
}

@media (min-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 1.5rem 1rem;
  border: 2px solid #e8ecf2;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  line-height: 1.1;
}

@media (min-width: 640px) {
  .stat-number {
    font-size: 3rem;
  }
}

.stat-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== Cards Grid ===== */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== Location Card ===== */
/* The whole card is the button, so it carries the affordances a button would:
   pointer cursor, a hover lift with a green edge, a pressed state, and a
   visible keyboard focus ring. */
.location-card {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 2px solid transparent;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  background: var(--color-white);
  cursor: pointer;
}

.location-card:hover,
.location-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  border-color: var(--color-green);
}

.location-card:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.location-card:active {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

.location-card:hover h3,
.location-card:focus-visible h3 {
  color: var(--color-accent);
}

.location-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.location-card-body {
  padding: 1.25rem;
}

.location-card-body h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.location-card-body p {
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 0;
  line-height: 1.5;
}

.location-card-body h3 {
  transition: color 0.2s;
}


/* ===== Kid Card ===== */
.kid-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .kid-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .kid-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .kid-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

.kid-card {
  text-align: center;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
  background: var(--color-white);
}

.kid-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Portrait, not square. The recovered photos are 72% 3:4 portrait and 27%
   4:3 landscape, so a square crop took a vertical slice out of the middle and
   cut children's heads off. In a 3:4 box the portraits fit exactly, the
   landscapes crop at the sides where the subject is centred anyway, and the
   few very tall photos crop from the bottom because of the top bias. */
.kid-card-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  background: var(--color-light-bg);
}

.kid-card-info {
  padding: 1rem 0.75rem 1.1rem;
}

.kid-card-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primary);
  margin-bottom: 0.15rem;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kid-card-age {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--warm-gray);
  margin-bottom: 0.3rem;
}

.kid-card-status {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
}

.kid-card-status.needs-sponsor {
  background: rgba(255, 188, 125, 0.3);
  color: #c47a20;
}

.kid-card-status.sponsored {
  background: rgba(150, 216, 151, 0.3);
  color: #2d7a2d;
}

/* ===== Filters ===== */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.filters-label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

.filter-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  background: var(--color-light-gray);
  color: var(--color-text);
}

.filter-btn:hover {
  background: #d5d5d5;
}

.filter-btn.active {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ===== Info Cards (Why Sponsor) ===== */
.info-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .info-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.info-card {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 2rem 1.5rem;
  text-align: center;
  border: 2px solid var(--color-secondary);
}

.section-navy .info-card {
  background: var(--color-white);
  border-color: var(--color-secondary);
}

.section-navy .info-card h3 {
  color: var(--color-primary);
}

.section-navy .info-card p {
  color: var(--color-text);
}

.info-card-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.info-card-icon.amber {
  background: rgba(255, 188, 125, 0.3);
}

.info-card-icon.teal {
  background: rgba(150, 216, 151, 0.3);
}

.info-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.info-card p {
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ===== Steps (How It Works) ===== */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  text-align: center;
}

@media (min-width: 768px) {
  .steps-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
}

.step-number {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--color-green);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .step {
    position: relative;
  }

  .step::after {
    content: '\2192';
    position: absolute;
    top: 1.1rem;
    right: -1.2rem;
    font-size: 1.8rem;
    color: #000;
    font-weight: 900;
    z-index: 0;
  }

  .step:last-child::after {
    content: none;
  }
}

.step h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.step p {
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.5;
}

/* ===== CTA Section ===== */
.cta-section {
  background: var(--color-light-bg);
  padding: 3rem 20px;
  text-align: center;
}

.cta-section h2 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.cta-section p {
  color: var(--color-text);
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
  line-height: 1.6;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ===== Shape Divider ===== */
.shape-divider {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin: 0;
  padding: 0;
}

.shape-divider svg {
  position: relative;
  display: block;
  width: 100%;
  height: 60px;
}

.shape-divider svg path {
  fill: var(--color-primary);
}

.hero + .shape-divider svg path {
  fill: var(--hero-bottom);
}

@media (min-width: 768px) {
  .shape-divider svg {
    height: 80px;
  }
}

@media (min-width: 1024px) {
  .shape-divider svg {
    height: 100px;
  }
}

/* Flipped divider (for bottom of navy sections transitioning to white) */
.shape-divider-flip,
.shape-divider.flipped {
  transform: rotate(180deg);
}

/* Teal shape divider */
.shape-divider.teal path {
  fill: var(--color-green);
}

/* ===== Section Styling ===== */
.section {
  padding: 3rem 20px;
}

.section-light {
  background: var(--color-light-bg);
}

.section-sand {
  background: var(--sand);
}

.section-primary,
/* Same radial treatment as .band-deep, so the dark sections across the site
   read as one thing. Its navy edges meet the navy wave dividers cleanly. */
.section-navy {
  background-image: linear-gradient(rgba(12, 37, 119, 0.45), rgba(12, 37, 119, 0.45)),
    radial-gradient(ellipse 70% 50% at 50% 50%, var(--deep-center) 0%, var(--deep-edge) 100%);
  color: var(--color-white);
}

.section.section-navy h2,
.section.section-navy h3,
.section.section-navy p,
.section.section-navy .section-subtitle,
.section.section-navy li {
  color: var(--color-white);
}

.section h2 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .section h2 {
    font-size: 2.5rem;
  }
}

.section-primary h2 {
  color: var(--color-white);
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--color-text);
  max-width: 48rem;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

.section-primary .section-subtitle {
  color: rgba(255,255,255,0.8);
}

/* ===== Coverage Cards (About) ===== */
.coverage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .coverage-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.coverage-card {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-left: 4px solid var(--color-green);
}

.coverage-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-light-green);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.coverage-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.coverage-card p {
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.5;
}

/* ===== Checklist ===== */
.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1.1rem;
  line-height: 1.5;
}

.checklist svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--color-green);
}

/* ===== Kid Profile ===== */
.breadcrumb {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2rem;
}

.breadcrumb a {
  color: var(--color-accent);
}

.breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.profile-card {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
}

.section.show-background .profile-info {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .profile-grid {
    grid-template-columns: 45% 55%;
  }

  /* Text sits centred against the photo rather than crammed to the top with
     empty space below it. */
  .profile-info {
    justify-content: center;
  }
}

.profile-photo {
  min-height: 400px;
  background: var(--color-light-bg);
}

@media (min-width: 768px) {
  .profile-photo {
    min-height: auto;
    align-self: stretch;
    /* A portrait photo in a 45% column is naturally ~860px tall, which made
       the card far taller than its text and left a chasm above the sponsor
       button. Cap it and let object-fit crop from the bottom - the photos are
       already top-anchored so faces are kept. */
    max-height: 620px;
    overflow: hidden;
  }
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.profile-info {
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
}

.profile-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.3rem 1rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
  width: fit-content;
}

.profile-badge.needs-sponsor {
  background: rgba(255, 188, 125, 0.3);
  color: #c47a20;
}

.profile-badge.sponsored {
  background: rgba(150, 216, 151, 0.3);
  color: #2d7a2d;
}

.profile-name {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}

@media (min-width: 640px) {
  .profile-name {
    font-size: 2.2rem;
  }
}

.profile-details {
  color: var(--color-text);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.profile-details p {
  margin-bottom: 0.2rem;
}

.profile-bio {
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  font-size: 1.05rem;
}

.profile-facts {
  border-top: 1px solid var(--color-light-gray);
  padding: 2rem;
}

.profile-facts h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.facts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .facts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fact-card {
  background: var(--color-light-bg);
  border-radius: var(--radius-sm);
  padding: 1rem;
  border: 1px solid var(--color-secondary);
}

.fact-card-label {
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.fact-card-value {
  color: var(--color-primary);
  font-weight: 600;
}

.sponsored-note {
  margin-top: 1.75rem;
  padding: 1rem;
  background: var(--color-light-green);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--color-green);
}

.sponsored-note p {
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.5;
}

.sponsored-note a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Background toggle */
.bg-toggle-btn {
  display: block;
  margin: 0 auto 1.25rem;
  padding: 0.5rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.bg-toggle-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* The child profile fills the viewport. Kept in the stylesheet rather than an
   inline style so .show-background below can actually take effect: an inline
   `background:` shorthand sets every longhand inline and outranks any rule. */
.kid-page {
  min-height: calc(100vh - 4rem);
}

/* The location photo behind a child's profile. Wins over .section-sand by
   being more specific, so no !important is needed. */
.section.show-background {
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* iOS ignores or stutters on fixed attachment, and on a phone the parallax
   buys nothing anyway. */
@media (max-width: 767px) {
  .section.show-background {
    background-attachment: scroll;
  }
}

/* ===== Forms ===== */
.form-card {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  border: 1px solid var(--color-light-gray);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--color-text);
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--color-white);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(116, 165, 205, 0.2);
}

.form-textarea {
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.form-checkbox input {
  margin-top: 0.25rem;
  accent-color: var(--color-green);
}

.form-checkbox span {
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.5;
}

.form-note {
  font-size: 0.85rem;
  color: var(--color-text);
  text-align: center;
  margin-top: 1rem;
}

.form-bg-light {
  background: var(--color-light-bg);
  border-radius: var(--radius-sm);
  padding: 1rem;
  border: 1px solid var(--color-secondary);
}

.form-required {
  color: var(--color-red);
}

/* ===== Gift Form ===== */

@media (min-width: 640px) {
}






.input-prefix .form-input {
  padding-left: 1.75rem;
}

/* ===== Sponsor Button ===== */
.sponsor-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-green);
  color: var(--color-white);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s, transform 0.2s;
  border: 2px solid var(--color-white);
  cursor: pointer;
  text-decoration: none;
}

.sponsor-btn:hover {
  background: var(--color-green-hover);
}

/* The call to action follows the bio directly. It used to be pushed down with
   margin-top:auto, which pinned it to the bottom of a column whose height is
   set by the photo. */
.profile-cta {
  margin-top: 1.75rem;
}

/* ===== Empty State ===== */
.empty-state {
  text-align: center;
  padding: 4rem 1rem;
}

.empty-state p {
  font-size: 1.2rem;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.empty-state a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ===== Loading ===== */
.loading {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--color-text);
  font-size: 1.1rem;
}

/* ===== Footer ===== */
.footer {
  background: var(--color-primary);
  color: var(--color-white);
}

.footer-main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .footer-main {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.footer h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: 1rem;
}

.footer p,
.footer a,
.footer li {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}

.footer a:hover {
  color: var(--color-green);
}

.footer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-quote {
  color: rgba(255,255,255,0.5);
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.footer-social a {
  color: rgba(255,255,255,0.6);
  transition: color 0.2s;
}

.footer-social a:hover {
  color: var(--color-green);
}

.footer-social svg {
  width: 1.25rem;
  height: 1.25rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
}

.footer-bottom-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

@media (min-width: 768px) {
  .footer-bottom-inner {
    flex-direction: row;
    text-align: left;
  }
}

.footer-bottom p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

.footer-bottom-links {
  display: flex;
  gap: 1rem;
}

.footer-bottom-links a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

.footer-bottom-links a:hover {
  color: var(--color-green);
}

/* ===== Gradient Section (Core Values) ===== */
.gradient-section {
  position: relative;
  background: var(--color-primary);
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.gradient-content {
  position: relative;
  z-index: 1;
  padding: 3rem 0;
}

.section-title-light {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--color-white);
  text-align: center;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .section-title-light {
    font-size: 2.5rem;
  }
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 640px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .values-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.value-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.value-icon {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  color: var(--color-white);
}

.value-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 0.5rem;
}

.value-card p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

.section-subtitle-light {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 48rem;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

.info-card-light {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-color: rgba(255, 255, 255, 0.3);
}

.info-card-light h3 {
  color: var(--color-white);
}

.info-card-light p {
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 992px) {
  .gradient-content {
    padding: 3rem 0;
  }

  .section-title-light {
    font-size: 1.8rem;
    margin-bottom: 2rem;
  }
}

/* ===== Responsive ===== */
/* Responsive breakpoint - triggers at split-screen width */
/* The horizontal nav carries seven links plus the "Sponsor a Child" pill, which
   needs roughly 1100px. Below that the hamburger takes over. This is separate
   from the 992px breakpoint used for page layout, which the rest of the file
   still uses. */
@media (max-width: 1100px) {

  .navbar-inner {
    height: 64px;
  }

  .navbar-logo img {
    height: 36px;
  }

  .navbar-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    padding: 0.75rem 20px;
    gap: 0;
    border-top: 1px solid var(--color-light-gray);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  .navbar-links.open {
    display: flex;
  }

  .navbar-links li {
    width: 100%;
  }

  .navbar-links a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-light-gray);
    width: 100%;
    font-size: 0.85rem;
  }

  .navbar-links a::after {
    display: none;
  }

  .navbar-cta {
    margin-top: 0.25rem;
    text-align: center;
    font-size: 1rem !important;
    padding: 8px 16px !important;
  }

  .mobile-menu-btn {
    display: block;
  }
}


@media (max-width: 992px) {

  .hero {
    /* Tallest mobile content is the homepage at 291px; 240px cut it off. */
    min-height: 340px;
  }

  .hero-content {
    padding: 1.5rem 20px;
    min-height: 292px;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .section {
    padding: 3rem 20px;
  }

  .section h2 {
    font-size: 1.8rem;
  }

  .cta-section {
    padding: 3rem 20px;
  }

  .cta-section h2 {
    font-size: 1.6rem;
  }

  .btn {
    font-size: 1rem;
    padding: 10px 20px;
  }

  .stats-grid {
    gap: 1rem;
  }

  .stat-number {
    font-size: 2rem;
  }

  .profile-name {
    font-size: 1.8rem;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.5rem;
  }

  .hero p {
    font-size: 0.9rem;
  }

  .section h2 {
    font-size: 1.5rem;
  }

  .cta-section h2 {
    font-size: 1.4rem;
  }

  .kid-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .kid-card-name {
    font-size: 0.75rem;
  }
}

/* ===== About Steps ===== */
.about-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  text-align: center;
}

@media (min-width: 640px) {
  .about-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.about-steps .step h3 {
  color: var(--color-white);
}

.about-steps .step p {
  /* Was 0.7 white, which measured 4.01:1 against the lightest part of the
     radial band - under the 4.5:1 needed at this size. */
  color: rgba(255, 255, 255, 0.92);
}

/* ===== Apply Page (Spanish) ===== */
.apply-intro {
  background: var(--color-light-bg);
  border-radius: var(--radius-sm);
  padding: 2rem;
  margin-bottom: 2rem;
  border-left: 4px solid var(--color-green);
}

.apply-intro h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.apply-intro p,
.apply-intro li {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
}

.apply-intro ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
}

.apply-intro ol li {
  margin-bottom: 0.5rem;
}

.apply-note {
  background: var(--color-light-green);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  border: 1px solid var(--color-green);
  margin-bottom: 1.5rem;
}

.apply-note h4 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.apply-note ol {
  list-style: decimal;
  padding-left: 1.5rem;
}

.apply-note ol li {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 0.4rem;
  color: var(--color-text);
}

.file-input-wrapper {
  position: relative;
}

.file-input-wrapper input[type="file"] {
  font-size: 0.9rem;
}

.file-input-hint {
  font-size: 0.8rem;
  color: var(--color-text);
  margin-top: 0.25rem;
}
/* ---------------------------------------------------------------------------
   Placeholder avatars
   Most of the original portraits were lost with the previous site. Until staff
   upload replacements, a child's card shows their initials on a stable tint
   derived from their name - never a broken image.
   --------------------------------------------------------------------------- */
.kid-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--avatar-from, #0C2577), var(--avatar-to, #5880B9));
  color: var(--color-white);
  font-family: var(--font-heading);
  letter-spacing: 1px;
  user-select: none;
  overflow: hidden;
}

.kid-avatar span {
  font-size: clamp(1.5rem, 22cqi, 3.25rem);
  line-height: 1;
  opacity: 0.92;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* Sizing per surface - mirrors the <img> rules so swapping one for the other
   never changes the layout. */
.kid-card-img.kid-avatar { aspect-ratio: 3 / 4; width: 100%; container-type: inline-size; }
.carousel-card-img.kid-avatar { height: 160px; width: 100%; container-type: inline-size; }

.profile-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.profile-photo-img.kid-avatar {
  min-height: 400px;
  container-type: inline-size;
}

.profile-photo-img.kid-avatar span { font-size: clamp(3rem, 18cqi, 6rem); }

@media (min-width: 768px) {
  .profile-photo-img.kid-avatar { min-height: 100%; }
}

/* Fallback for browsers without container query units. */
@supports not (font-size: 1cqi) {
  .kid-card-img.kid-avatar span { font-size: 2rem; }
  .carousel-card-img.kid-avatar span { font-size: 1.75rem; }
  .profile-photo-img.kid-avatar span { font-size: 4.5rem; }
}

/* Honeypot field - hidden from people, present in the DOM for bots. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Inline form status messages (apply page, admin forms). */
.form-status {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.form-status:empty { display: none; }
.form-status-pending { background: var(--color-light-bg); color: var(--color-primary); }
.form-status-success { background: var(--color-light-green); color: #216b23; }
.form-status-error   { background: #fdecec; color: var(--color-red); }

/* Hint text under a form field (e.g. the auto-calculated age). */
.form-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--warm-gray);
}

.form-input[readonly] {
  background: var(--color-light-gray);
  cursor: default;
}

/* Sponsor button with no PayPal link configured yet. */
.sponsor-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.sponsor-unavailable {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--warm-gray);
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   What Your Sponsorship Provides
   Eight short cards on the deep band, mirroring the parent site's section.
   --------------------------------------------------------------------------- */
.provides-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .provides-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .provides-grid { grid-template-columns: repeat(4, 1fr); }
}

/* A near-solid navy panel rather than a light wash. Over a busy wide
   photograph the old 12% white left the text depending on whatever happened to
   be behind it; this makes each card readable on its own while the photo still
   shows around and between them. */
.provide-card {
  background: rgba(11, 32, 96, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.1rem;
}

.provide-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-white);
  margin-bottom: 0.4rem;
}

.provide-card p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-white);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Common Questions
   Native <details> so it works with no JavaScript and stays keyboard and
   screen-reader friendly.
   --------------------------------------------------------------------------- */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  background: var(--color-white);
  border: 1px solid #dfe7f5;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  padding: 1rem 1.2rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-primary);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-family: var(--font-body);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.faq-item[open] summary::after { content: '\2212'; }

.faq-item summary:hover { background: var(--color-light-bg); }

.faq-item summary:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}

.faq-item p {
  margin: 0;
  padding: 0 1.2rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* ---------------------------------------------------------------------------
   Para los padres
   The one Spanish-facing block on an otherwise English page, so it is set
   apart rather than blending into the surrounding copy.
   --------------------------------------------------------------------------- */
.parents-panel {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  background: var(--color-white);
  border: 2px solid var(--color-green);
  border-radius: var(--radius-md, 12px);
  padding: 2rem 1.5rem;
}

.parents-panel h2 { margin-bottom: 0.25rem; }

.parents-panel h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.parents-panel p {
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Info panels used by About, Gifts, Contact and the application requirements.
   --------------------------------------------------------------------------- */
.info-panel {
  max-width: 800px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 2rem 1.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.info-panel h2 { margin-bottom: 0.85rem; }

.info-panel p {
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 1rem;
}

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

.address-block {
  font-style: normal;
  font-weight: 600;
  line-height: 1.7;
  color: var(--color-primary);
  background: var(--color-light-bg);
  border-left: 4px solid var(--color-green);
  padding: 0.9rem 1.1rem;
  border-radius: 6px;
  margin-bottom: 1.25rem;
}

.rule-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.rule-list li {
  position: relative;
  padding-left: 1.65rem;
  margin-bottom: 0.6rem;
  font-size: 0.96rem;
  line-height: 1.6;
}

.rule-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--color-green);
}

.apply-requirements {
  background: var(--color-light-bg);
  border-radius: var(--radius-sm);
  padding: 1.5rem 1.5rem 1.25rem;
  margin-bottom: 2rem;
}

.apply-requirements h2 {
  font-size: 1.5rem;
  margin-bottom: 0.85rem;
}

.apply-note {
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Navbar dropdown
   Mirrors the parent site: Home, Needs a Sponsor, Sponsored Children, then an
   About group holding Application, Gift Giving and Contact. Four top-level
   items instead of seven, which is what makes the bar read cleanly.

   The label is a real link to /about and the caret is a separate button, so a
   pointer, a keyboard and a screen reader can each reach both the page and
   the submenu.
   --------------------------------------------------------------------------- */
.navbar-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.navbar-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 10px 4px 10px 0;
  margin-left: -6px;
  color: var(--color-primary);
  cursor: pointer;
  border-radius: 4px;
}

.navbar-dropdown-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}

.navbar-dropdown-toggle:hover { color: var(--color-accent); }

.navbar-dropdown-toggle:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.navbar-dropdown.open .navbar-dropdown-toggle svg { transform: rotate(180deg); }

.navbar-submenu {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16);
  border: 1px solid #e3ebf7;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
  z-index: 200;
}

/* Hover for pointers, focus-within for keyboards, .open for the caret. */
.navbar-dropdown:hover .navbar-submenu,
.navbar-dropdown:focus-within .navbar-submenu,
.navbar-dropdown.open .navbar-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Escape returns focus to the caret, which sits inside the dropdown, so
   :focus-within would immediately reopen what was just dismissed. This holds
   it shut until focus leaves or the caret is pressed again. */
.navbar-dropdown.dismissed .navbar-submenu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
}

.navbar-submenu a {
  display: block;
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.navbar-submenu a::after { display: none; }

.navbar-submenu a:hover {
  background: var(--color-light-bg);
  color: var(--color-accent);
}

/* ---- inside the mobile drawer ---- */
@media (max-width: 1100px) {
  .navbar-dropdown {
    display: block;
    width: 100%;
  }

  .navbar-dropdown-label {
    display: inline-block !important;
    width: auto !important;
    border-bottom: none !important;
  }

  /* Label and caret share one row so the row still reads as one item. */
  .navbar-dropdown {
    border-bottom: 1px solid var(--color-light-gray);
  }

  .navbar-dropdown-toggle {
    float: right;
    padding: 10px 0;
    margin: 0;
  }

  .navbar-submenu {
    position: static;
    clear: both;
    min-width: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: var(--color-light-bg);
    padding: 0;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  /* On touch, only the caret opens it; hover would fire on the first tap. */
  .navbar-dropdown:hover .navbar-submenu,
  .navbar-dropdown:focus-within .navbar-submenu { display: none; }

  .navbar-dropdown.open .navbar-submenu { display: block; }

  .navbar-dropdown.dismissed .navbar-submenu { display: none; }

  .navbar-submenu a {
    padding: 0.6rem 0 0.6rem 1rem;
    border-bottom: 1px solid var(--color-light-gray);
    white-space: normal;
  }

  .navbar-submenu li:last-child a { border-bottom: none; }
}

/* ---------------------------------------------------------------------------
   Photo bands
   The parent site runs its mid-page sections over photographs with the radial
   as an overlay; these are the ministry's own images doing the same job here.

   The radial is opaque navy at its edges and only translucent in the middle,
   so the photograph shows through the centre while the top and bottom still
   meet the wave dividers in flat navy. That is what keeps the joins seamless
   now that there is an image behind them.
   --------------------------------------------------------------------------- */
.band-photo {
  /* The text scrim below is deliberately wider than its content so it can fade
     out past the words. Clipping here stops that overhang widening the page,
     which showed up as 44px of horizontal scroll at 390px. */
  overflow: hidden;

  /* Taller than a plain band. A short, wide box makes background-size: cover
     crop a thin strip out of the middle of the photograph, which cut the faces
     out; the extra height lets more of the picture through. */
  padding-top: 6rem;
  padding-bottom: 6rem;

  /* Per-photo, because how much scrim a picture needs depends on how bright
     it is. The thank-you photograph has a large white sign in it and needed
     more than the others to keep body text above 4.5:1. */
  --band-scrim: 0.12;
  --band-core: 0.14;
  background-image:
    linear-gradient(rgba(12, 37, 119, var(--band-scrim)), rgba(12, 37, 119, var(--band-scrim))),
    radial-gradient(ellipse 74% 52% at 50% 50%,
      rgba(12, 37, 119, var(--band-core)) 0%,
      rgba(12, 37, 119, 0.72) 62%,
      rgb(12, 37, 119) 100%),
    var(--band-image);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}

/* The team stands in the upper half of this photograph, so the crop is biased
   towards the top rather than centred on their waists. */
.band-local-churches { --band-image: url('/photos/band-local-churches.jpg'); background-position: center, center, center 34%; }
/* The cards carry their own backing, so this band can run a lighter overlay
   than the others and let the photograph read. The heading sits on the photo
   directly, so it is measured rather than assumed. */
.band-kids-ministry  { --band-image: url('/photos/band-kids-ministry.jpg'); --band-scrim: 0.10; --band-core: 0.08; }

/* Nearly square source in a wide box, so cover zooms hard into the middle.
   More height means less zoom and more of the gathering in shot. */
.section-navy.band-kids-ministry { padding-top: 7rem; padding-bottom: 7rem; }
.band-thank-you      { --band-image: url('/photos/band-thank-you.jpg'); --band-scrim: 0.22; }
.band-community      { --band-image: url('/photos/band-community.jpg'); --band-scrim: 0.18; }

/* On a narrow screen the subject of a wide photo drifts out of frame, so
   favour the upper middle where the people usually are. */
@media (max-width: 700px) {
  .band-photo { background-position: center, center, center 25%; }
  .band-photo .band-deep-content::before { inset: -2rem -2rem; }
}


/* ---------------------------------------------------------------------------
   Gifts page
   Three stacked panels each carried 3rem of vertical padding, so consecutive
   panels sat 6rem apart and the page read as disconnected blocks. Halving the
   gap between them keeps the sections distinct without the drift.
   --------------------------------------------------------------------------- */
.page-gifts .section {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.page-gifts .section:first-of-type {
  padding-top: 3rem;
}

.page-gifts .section:last-of-type {
  padding-bottom: 3rem;
}

/* Phone field on the application: every family is in Costa Rica, so the
   country code is shown as a fixed prefix instead of a picker. */
.input-prefix-wrap { display: flex; align-items: stretch; }
.input-prefix {
  display: flex; align-items: center; padding: 0 0.85rem;
  background: var(--color-light-bg); color: var(--color-text);
  border: 1px solid var(--color-light-gray); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm); font-weight: 600; white-space: nowrap;
}
.input-prefix-wrap .form-input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; flex: 1; }