/*
Theme Name: Dr. Vimi Memorial (GeneratePress Child)
Template: generatepress
Description: Visual identity for the Dr. Vimi P.S. Memorial Charitable Society site — calm "Green & Blue" system, Baloo 2 display type.
Version: 4.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Karla:wght@400;500;700&display=swap');

:root {
  /* "Green & Blue" palette. Client-selected 2026-07-20 — deep, calm colours
     for a differently-abled / cerebral-palsy children's charity, chosen for
     readability (all fills clear WCAG AA against white text or dark text as
     used). HARD RULE: no dark colour is ever a fill. --color-ink is text only.
     Token NAMES are kept from the previous coral/teal/amber system so existing
     rules need no renaming; only the VALUES changed:
       --color-coral*  ->  deep green  (primary action)
       --color-teal*   ->  deep blue   (secondary / links)
       --color-amber*  ->  deep teal   (third accent — no orange) */
  --color-coral: #16723E;       /* primary: deep green */
  --color-coral-dark: #0F5730;
  --color-teal: #1B6BA5;        /* secondary: deep blue */
  --color-teal-dark: #124E76;
  --color-amber: #0E8C86;       /* accent: deep teal (green↔blue bridge) */
  --color-amber-dark: #0A6E69;

  --color-surface: #FFFFFF;   /* page background */
  --color-blush: #EDF5F2;     /* soft cool band background */
  --color-ink: #22414E;       /* TEXT ONLY — never a background */

  /* Back-compat aliases: earlier rules below still say "marigold". */
  --color-marigold: var(--color-amber);
  --color-marigold-dark: var(--color-amber-dark);

  --font-display: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --font-body: 'Karla', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-lg: 28px;

  /* Extended palette — tints/shades of the SAME green/blue/teal hues only.
     No new hue family is introduced (client hard rule: no orange). These
     exist purely to give the redesign more range: soft washes for blob
     shapes and section backgrounds, deep shades for gradient bands. */
  --color-coral-light: #E4F3EA;
  --color-teal-light: #E3F0F8;
  --color-amber-light: #DFF3F1;
  --color-coral-deep: #0B3D22;
  --color-teal-deep: #0D3752;
  --shadow-soft: 0 10px 30px rgba(15,42,74,0.10);
  --shadow-lift: 0 18px 40px rgba(15,42,74,0.16);
  --shadow-glow-coral: 0 14px 34px rgba(22,114,62,0.30);
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-surface);
}

h1, h2, h3, h4, .site-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

a { color: var(--color-teal-dark); }
a:hover { color: var(--color-coral); }

/* Header / nav */
.site-header,
#site-navigation,
.main-navigation {
  background: var(--color-surface);
}
/* Real logo image (drvimi-logo.png) is 460x400px with no max-height rule from
   GeneratePress's dynamic CSS (that only applies when the logo is set via the
   Customizer's own logo-width control, not set_theme_mod()) — constrain it here
   so it reads as a header logo, not a full-bleed image. */
.site-logo img,
.site-logo .header-image,
.site-header .site-logo img.is-logo-image {
  max-height: 64px !important;
  width: auto !important;
  height: auto !important;
}
/* Keep the header a single compact row: center logo + nav, trim vertical pad.
   overflow:visible so the logo's star tip is never clipped by the header box. */
.site-header .inside-header {
  align-items: center;
  padding-top: 14px;
  padding-bottom: 14px;
}
.site-header,
.site-header .inside-header,
.site-logo { overflow: visible; }
/* Guarantee the star always has vertical breathing room inside the header row,
   independent of the theme's flex sizing, so neither tip is ever clipped. */
.site-logo { display: flex; align-items: center; }
.site-logo a { display: inline-flex; align-items: center; }
/* Seven primary items ("Media and Stories", "How You Can Help" are long) must
   fit one row beside the logo, so tighten the nav type and item padding and
   stop it wrapping. */
.main-navigation .inside-navigation { flex-wrap: nowrap; }
.main-navigation .main-nav > ul { flex-wrap: nowrap; }
.main-navigation .main-nav ul li a {
  font-size: 0.95rem;
  padding-left: 13px;
  padding-right: 13px;
  white-space: nowrap;
}
.site-title a {
  color: var(--color-ink) !important;
  font-size: 1.5rem;
  font-weight: 700;
}
/* The header logo is now a full wordmark (emblem + Society name), so a text
   site-title beside it would duplicate the name. Hide it visually but keep it
   in the DOM for assistive tech and SEO. */
.site-header .site-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.main-navigation a {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-ink) !important;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--color-teal-dark) !important;
  border-bottom: 3px solid var(--color-coral);
}
/* The nowrap rules above keep the seven items on one row ONLY where there is
   room for them. Below desktop the forced single row overflowed horizontally
   (and fought GeneratePress's mobile toggle). Let the inline menu wrap on
   tablets, and hand fully over to the mobile menu on phones. */
@media (max-width: 1024px) {
  .main-navigation .inside-navigation,
  .main-navigation .main-nav > ul { flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .main-navigation .main-nav ul li a { white-space: normal; }
}
/* Mobile header: keep the logo and the hamburger toggle on the SAME row.
   The logo is a wide wordmark (~4.6:1), so at its desktop 64px height it fills
   the row and pushed the toggle onto a second row. Shrink it on phones and let
   the expandable menu wrap full-width below the logo+toggle row when opened. */
@media (max-width: 768px) {
  .site-header .inside-header {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
  }
  .site-logo { flex: 0 1 auto; min-width: 0; }
  .site-logo img,
  .site-header .site-logo img.is-logo-image { max-height: 46px !important; }
  /* The toggle wrapper sits at the right of the first row. */
  .site-header .inside-header > .mobile-menu-control-wrapper,
  .main-navigation.mobile-menu-control-wrap { flex: 0 0 auto; }
  /* The actual dropdown menu takes its own full-width row below when open. */
  .site-header .inside-header > .main-navigation.sub-menu-right { flex: 1 0 100%; }
}

/* ==========================================================================
   Hero slider — bright wash over real photography from the memorial video
   ==========================================================================
   The old hero used a dark navy gradient over a moody stock portrait. The
   client's note was that the site reads gloomy; the wash below is light, so
   text sits on a bright scrim rather than a dark one. */
.drvimi-slider {
  position: relative;
  width: 100%;
  min-height: 620px;
  overflow: hidden;
  background: var(--color-blush);
  /* Scalloped bottom edge — a soft wave instead of a hard horizontal seam
     between the hero photo and the stats band. Pure CSS mask, no image. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 240 90 480 0 720 30 C 960 60 1200 90 1440 40 L1440 0 L0 0 Z' fill='white'/%3E%3Crect y='0' width='1440' height='30' fill='white'/%3E%3C/svg%3E"), linear-gradient(#fff,#fff);
  -webkit-mask-size: 100% calc(100% - 1px), 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: bottom, top;
  -webkit-mask-composite: source-over;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 240 90 480 0 720 30 C 960 60 1200 90 1440 40 L1440 0 L0 0 Z' fill='white'/%3E%3Crect y='0' width='1440' height='30' fill='white'/%3E%3C/svg%3E"), linear-gradient(#fff,#fff);
  mask-size: 100% calc(100% - 1px), 100% 100%;
  mask-repeat: no-repeat;
  mask-position: bottom, top;
  padding-bottom: 48px;
}
/* Soft glowing blobs behind the hero copy — pure gradient, no imagery, kept
   inside the palette (green/blue tints only). Decorative; hidden from AT. */
.drvimi-slider::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38rem 30rem at 8% 8%, rgba(22,114,62,0.14), transparent 60%),
    radial-gradient(30rem 26rem at 92% 88%, rgba(27,107,165,0.16), transparent 60%);
}
.drvimi-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
  background-size: cover;
  background-position: center 32%;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.drvimi-slide.is-active { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .drvimi-slide { transition: none; }
}
/* Light scrim: readable text, bright photo. */
.drvimi-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(246,251,249,0.96) 0%,
    rgba(246,251,249,0.88) 42%,
    rgba(246,251,249,0.15) 72%,
    rgba(246,251,249,0) 100%);
}
.drvimi-slide-inner {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
}
.drvimi-slide-copy { max-width: 34rem; }
.drvimi-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #fff;
  background: linear-gradient(120deg, var(--color-coral) 0%, var(--color-coral-dark) 100%);
  padding: 0.45rem 1.1rem 0.45rem 0.8rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-glow-coral);
}
.drvimi-hero-eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.drvimi-slider h1 {
  color: var(--color-ink);
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  line-height: 1.08;
  margin: 0 0 1.25rem;
  max-width: 16ch;
}
.drvimi-hero-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: #55666F;
  max-width: 46ch;
  margin: 0 0 2rem;
  line-height: 1.6;
}
.drvimi-hero-cta-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
/* Floating impact badge — sits over the hero photo, independent of which
   slide is active (sibling of the slides, not inside one). */
.drvimi-hero-badge {
  position: absolute;
  z-index: 2;
  right: 4.5%;
  bottom: 2.75rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem;
  box-shadow: var(--shadow-lift);
  max-width: 280px;
  animation: drvimi-float 4.5s ease-in-out infinite;
}
.drvimi-hero-badge-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-coral), var(--color-teal));
  color: #fff;
}
.drvimi-hero-badge-icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.drvimi-hero-badge-title {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-ink);
  font-size: 1.05rem;
  line-height: 1.15;
}
.drvimi-hero-badge-sub {
  font-family: var(--font-body);
  color: #55666F;
  font-size: 0.78rem;
}
@keyframes drvimi-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .drvimi-hero-badge { animation: none; }
}
@media (max-width: 900px) {
  .drvimi-hero-badge { display: none; }
}

.drvimi-slider-dots {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1300px;
  width: 100%;
  padding: 0 2rem;
  display: flex;
  gap: 0.5rem;
  z-index: 3;
}
.drvimi-slider-dot {
  width: 28px;
  height: 5px;
  border: 0;
  padding: 0;
  border-radius: 3px;
  background: rgba(36,64,78,0.25);
  cursor: pointer;
  transition: background 200ms ease, width 200ms ease;
}
.drvimi-slider-dot.is-active { background: var(--color-coral); width: 44px; }
.drvimi-slider-dot:focus-visible { outline: 3px solid var(--color-teal); outline-offset: 3px; }

@media (max-width: 700px) {
  .drvimi-slider { min-height: 540px; }
  /* Anchor the copy to the bottom so the top two-thirds of the photo shows at
     full brightness — the old full-height white wash whitened the whole image
     and made the photos look dull on phones. The scrim now stays transparent
     over the photo and only builds up behind the text at the bottom. */
  .drvimi-slide { align-items: flex-end; }
  .drvimi-slide::before {
    background: linear-gradient(180deg,
      rgba(246,251,249,0) 0%,
      rgba(246,251,249,0.12) 34%,
      rgba(246,251,249,0.82) 70%,
      rgba(246,251,249,0.97) 100%);
  }
  .drvimi-slide-inner { padding-bottom: 3.5rem; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.drvimi-slider a.button,
.drvimi-support-band a.button,
.entry-content a.button,
a.drvimi-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 700;
  background: linear-gradient(120deg, var(--color-coral) 0%, var(--color-coral-dark) 100%);
  color: #fff !important;
  padding: 0.95rem 2.2rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  box-shadow: var(--shadow-glow-coral);
}
.drvimi-slider a.button::after,
.drvimi-support-band a.button::after,
.entry-content a.button::after,
a.drvimi-btn::after {
  content: '\2192';
  transition: transform 0.2s ease;
}
.drvimi-slider a.button:hover,
.drvimi-support-band a.button:hover,
.entry-content a.button:hover,
a.drvimi-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(22,114,62,0.38);
}
.drvimi-slider a.button:hover::after,
.drvimi-support-band a.button:hover::after,
.entry-content a.button:hover::after,
a.drvimi-btn:hover::after {
  transform: translateX(4px);
}
.drvimi-slider a.button-secondary {
  background: transparent;
  color: var(--color-teal-dark) !important;
  border: 2px solid var(--color-teal);
  box-shadow: none;
}
.drvimi-slider a.button-secondary:hover {
  background: rgba(27,107,165,0.10);
  transform: translateY(-2px);
}
.drvimi-slider a.button:focus-visible,
.drvimi-support-band a.button:focus-visible,
.entry-content a.button:focus-visible,
a.drvimi-btn:focus-visible,
a:focus-visible {
  outline: 3px solid var(--color-coral);
  outline-offset: 2px;
}

/* ==========================================================================
   Stats counter band
   ========================================================================== */
.drvimi-stats {
  background: transparent;
  padding: 0 2rem 3rem;
  position: relative;
  z-index: 2;
}
.drvimi-stats-grid {
  max-width: 1200px;
  margin: -72px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: center;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-lift);
}
.drvimi-stat { position: relative; }
.drvimi-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -0.75rem;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(34,65,78,0.14), transparent);
}
.drvimi-stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--color-teal);
  line-height: 1;
  background: linear-gradient(120deg, var(--color-teal) 0%, var(--color-amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.drvimi-stat:nth-child(even) .drvimi-stat-number {
  background: linear-gradient(120deg, var(--color-coral) 0%, var(--color-marigold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.drvimi-stat-label {
  font-family: var(--font-body);
  color: var(--color-ink);
  font-size: 0.95rem;
  margin-top: 0.5rem;
  letter-spacing: 0.01em;
}
@media (max-width: 700px) {
  .drvimi-stats-grid { margin-top: -48px; padding: 1.75rem 1.25rem; }
  .drvimi-stat:not(:last-child)::after { display: none; }
}

/* ==========================================================================
   Four pillars
   ========================================================================== */
.drvimi-pillars {
  max-width: 1300px;
  margin: 3rem auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
/* Client round-3: the page must feel FULL. Four short cards across one row
   on wide screens instead of a tall airy 2x2. */
@media (min-width: 1100px) {
  .drvimi-pillars { grid-template-columns: repeat(4, 1fr); }
}
.drvimi-pillars { counter-reset: drvimi-pillar-count; }
.drvimi-pillar {
  position: relative;
  background:
    radial-gradient(110px 110px at 100% 0%, rgba(27,107,165,0.09), transparent 70%),
    #fff;
  border-radius: var(--radius-card);
  padding: 2.25rem 2rem 2rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(34,65,78,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.drvimi-pillar:nth-child(even) {
  background:
    radial-gradient(110px 110px at 100% 0%, rgba(22,114,62,0.09), transparent 70%),
    #fff;
}
.drvimi-pillar:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}
.drvimi-pillar::before {
  counter-increment: drvimi-pillar-count;
  content: counter(drvimi-pillar-count, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.1rem;
  border-radius: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-amber) 100%);
  box-shadow: 0 8px 18px rgba(27,107,165,0.30);
}
.drvimi-pillar:nth-child(even)::before {
  background: linear-gradient(135deg, var(--color-coral) 0%, var(--color-marigold) 100%);
  box-shadow: 0 8px 18px rgba(22,114,62,0.30);
}
.drvimi-pillar h3 {
  font-size: 1.35rem;
  color: var(--color-ink);
  margin-top: 0;
}

/* ==========================================================================
   Asymmetric photo grid (large photo + stacked pair, accent bar)
   ========================================================================== */
.drvimi-photo-feature {
  max-width: 1300px !important;
}
.drvimi-photo-feature h2 { text-align: center; }
.drvimi-photo-feature > p { text-align: center; max-width: 60ch; margin: 0 auto 2.5rem; }
.drvimi-asym-large,
.drvimi-asym-small { transition: box-shadow 0.25s ease; box-shadow: var(--shadow-soft); }
.drvimi-asym-large img,
.drvimi-asym-small img { transition: transform 0.5s ease; }
.drvimi-asym-large:hover img,
.drvimi-asym-small:hover img { transform: scale(1.06); }
.drvimi-asym-large:hover,
.drvimi-asym-small:hover { box-shadow: var(--shadow-lift); }
.drvimi-asym-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.drvimi-asym-large {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
  padding-left: 6px;
}
.drvimi-asym-large::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--color-marigold);
  z-index: 2;
}
.drvimi-asym-large img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}
.drvimi-asym-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.drvimi-asym-small {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  flex: 1;
  min-height: 150px;
  padding-top: 5px;
}
.drvimi-asym-small::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  background: var(--color-coral);
  z-index: 2;
}
.drvimi-asym-small img {
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   Moments mosaic (home) — dense 3-column photo grid, no empty cells.
   Client round-3: sharp real photos of group activities, page must feel full.
   ========================================================================== */
.drvimi-moments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 260px;
  gap: 1rem;
}
.drvimi-moment {
  border-radius: var(--radius-card);
  overflow: hidden;
}
.drvimi-moment img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.drvimi-moment-wide { grid-column: span 2; }
@media (max-width: 900px) {
  .drvimi-moments-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 210px; }
  .drvimi-moment-wide { grid-column: span 2; }
}
@media (max-width: 700px) {
  .drvimi-moments-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .drvimi-moment-wide { grid-column: auto; }
}

/* ==========================================================================
   Team band (home) — committee photo + invitation to meet the leaders
   ========================================================================== */
.drvimi-team {
  background: var(--color-blush);
  padding: 3.5rem 2rem;
}
.drvimi-team-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
.drvimi-team-inner img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 6px solid #fff;
  box-shadow: 0 12px 30px rgba(36,64,78,0.12);
  display: block;
}
.drvimi-team-copy h2 {
  color: var(--color-ink);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 1rem;
}
.drvimi-team-copy p {
  font-family: var(--font-body);
  color: #55666F;
  line-height: 1.6;
  margin: 0 0 1.75rem;
  max-width: 46ch;
}
@media (max-width: 900px) {
  .drvimi-team-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .drvimi-team-copy { text-align: center; }
  .drvimi-team-copy p { margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   Generic section wrapper used on inner pages (About/Our Work/etc)
   ==========================================================================
   Client round-3: inner pages had content glued to the left edge or bunched
   into the left half of the viewport. Two causes fixed here:
   (a) several page wrappers (how-to-help, contact, media, donate) had NO css
       at all, so stripping the theme's default gutter for full-width bands
       left them edge-to-edge;
   (b) prose inside .drvimi-section was width-bounded but not centred, so it
       hugged the left of the 1300px box and the right half sat empty.
   Everything now reads as a centred column: centred heading, centred content
   column with left-aligned text. */
.drvimi-section,
.drvimi-how-to-help,
.drvimi-how-to-help-volunteer,
.drvimi-how-to-help-sponsors,
.drvimi-contact-form,
.drvimi-contact-details,
.drvimi-media-blog,
.drvimi-media-events,
.drvimi-donate {
  max-width: 1300px;
  margin: 0 auto;
  padding: 2.75rem 2rem;
}
.drvimi-section > p,
.drvimi-section > ul,
.drvimi-how-to-help > p,
.drvimi-how-to-help-volunteer > p,
.drvimi-contact-details > ul,
.drvimi-media-blog > p,
.drvimi-media-events > p,
.drvimi-donate > p {
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}
.drvimi-section h2,
.drvimi-how-to-help h2,
.drvimi-how-to-help-volunteer h2,
.drvimi-how-to-help-sponsors h2,
.drvimi-contact-form h2,
.drvimi-contact-details h2,
.drvimi-media-blog h2,
.drvimi-media-events h2,
.drvimi-donate h2,
.drvimi-our-work h2,
.drvimi-media-gallery h2 {
  position: relative;
  color: var(--color-ink);
  font-size: 2rem;
  text-align: center;
  padding-bottom: 1.1rem;
  margin-bottom: 0.75rem;
}
.drvimi-section h2::after,
.drvimi-how-to-help h2::after,
.drvimi-how-to-help-volunteer h2::after,
.drvimi-how-to-help-sponsors h2::after,
.drvimi-contact-form h2::after,
.drvimi-contact-details h2::after,
.drvimi-media-blog h2::after,
.drvimi-media-events h2::after,
.drvimi-donate h2::after,
.drvimi-our-work h2::after,
.drvimi-media-gallery h2::after,
.drvimi-photo-feature h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-coral), var(--color-teal));
}
.drvimi-photo-feature h2 { position: relative; padding-bottom: 1.1rem; }
/* Centre the lone Donate button on How to Help */
.drvimi-how-to-help > p:has(a.button) { text-align: center; }

/* ==========================================================================
   About page — message card, alternating bands, checklist styling
   ========================================================================== */
.drvimi-president-message {
  background: var(--color-blush);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem 2.75rem;
  box-shadow: var(--shadow-soft);
}
.drvimi-president-message > p:first-of-type {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--color-coral-dark);
}
.drvimi-story-legacy {
  text-align: center;
}
.drvimi-vision-mission ul {
  list-style: none;
  margin: 1.5rem auto 0;
  padding: 0;
  max-width: 70ch;
  display: grid;
  gap: 0.9rem;
}
.drvimi-vision-mission li {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 0.9rem 1.1rem 0.9rem 3rem;
  box-shadow: var(--shadow-soft);
}
.drvimi-vision-mission li::before {
  content: '\2713';
  position: absolute;
  left: 0.95rem;
  top: 0.85rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--color-coral), var(--color-teal));
}
@media (max-width: 700px) {
  .drvimi-president-message { padding: 2rem 1.5rem; }
}

/* ==========================================================================
   Fluent Forms — match the theme instead of browser defaults
   ========================================================================== */
.fluentform {
  max-width: 760px;
  margin: 0 auto;
}
.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform select,
.fluentform textarea {
  width: 100%;
  border: 2px solid #D8E7E0;
  border-radius: 12px;
  padding: 0.8rem 1rem;
  background: #fff;
  font-family: var(--font-body);
  color: var(--color-ink);
}
.fluentform .ff-el-form-control:focus,
.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus {
  border-color: var(--color-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(27,107,165,0.15);
}
.fluentform .ff-el-input--label label {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-ink);
}
/* The <select> was never in the control list above, so the CME form's "Event"
   dropdown fell back to the browser's own control: shorter than every field
   above it and sitting flush against the submit button, which is the missing
   gap the client flagged. It now shares the field styling, and the submit row
   gets breathing space of its own rather than inheriting a field's margin. */
.fluentform select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2322414E' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  padding-right: 2.6rem;
}
.fluentform .ff-el-group {
  margin-bottom: 1.5rem;
}
.fluentform .ff-el-group:has(.ff-btn-submit),
.fluentform .ff_submit_btn_wrapper {
  margin-top: 2rem;
  margin-bottom: 0;
}
.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
  background: var(--color-coral) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  padding: 0.9rem 2.2rem !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(22,114,62,0.32);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
  background: var(--color-coral-dark) !important;
  transform: translateY(-2px);
}
/* ==========================================================================
   Paired portraits — Dr. Vimi and the President, at equal prominence
   ==========================================================================
   Previously the President's letter sat beside a 220px float-right photo of
   Dr. Vimi, and the President had no photo at all. The client asked for his
   photo to be "equally prominent": identical dimensions, radius and treatment. */
.drvimi-portrait-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 620px;
  margin: 0 auto 2.5rem;
}
.drvimi-portrait-card { text-align: center; }
.drvimi-portrait-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 4px solid #fff;
  box-shadow: 0 8px 24px rgba(36,64,78,0.15);
  display: block;
}
.drvimi-portrait-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0.85rem 0 0.15rem;
  font-size: 1.05rem;
}
.drvimi-portrait-role {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #6B7A82;
}
.drvimi-quote {
  background: var(--color-blush);
  border-radius: var(--radius-card);
  padding: 2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: 1.15rem;
  color: var(--color-ink);
}

/* Money-changes-lives list becomes a small stat-like row */
.drvimi-money-changes-lives ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.drvimi-money-changes-lives li {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 1.25rem 1rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  box-shadow: 0 4px 14px rgba(15,42,74,0.08);
  border-bottom: 4px solid var(--color-teal);
}
.drvimi-money-changes-lives li:first-child {
  border-bottom-color: var(--color-marigold);
  grid-column: 1 / -1;
  font-size: 1.15rem;
}

/* ==========================================================================
   Icon grid — Our Work services
   ========================================================================== */
.drvimi-our-work { max-width: 1300px !important; }
.drvimi-our-work h2 { text-align: center; margin-bottom: 2.5rem; }
.drvimi-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.drvimi-work-item {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-soft);
  border-top: 5px solid var(--color-teal);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.drvimi-work-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}
.drvimi-work-item:nth-child(3n+2) { border-top-color: var(--color-marigold); }
.drvimi-work-item:nth-child(3n+3) { border-top-color: var(--color-coral); }
.drvimi-work-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(27,107,165,0.12);
  color: var(--color-teal-dark);
  margin-bottom: 1.25rem;
}
.drvimi-work-item:nth-child(3n+2) .drvimi-work-icon { background: rgba(14,140,134,0.14); color: var(--color-marigold-dark); }
.drvimi-work-item:nth-child(3n+3) .drvimi-work-icon { background: rgba(22,114,62,0.12); color: var(--color-coral-dark); }
.drvimi-work-icon svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drvimi-work-item h3 {
  font-size: 1.2rem;
  color: var(--color-ink);
  margin: 0 0 0.6rem;
}
.drvimi-work-item p { margin: 0 0 1rem; }
.drvimi-work-item .drvimi-grid-item {
  box-shadow: none;
  padding: 0;
  margin-top: 0.75rem;
}
.drvimi-work-item .drvimi-grid-item img {
  border-radius: calc(var(--radius-card) - 6px);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   CPT grids (leaders/sponsors/events/blog)
   ========================================================================== */
.drvimi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 1300px;
  margin: 2rem auto;
  padding: 0 2rem;
}
/* A single event shouldn't sit alone in a wide empty grid row. */
.drvimi-grid:has(> .drvimi-event-card:only-child) {
  grid-template-columns: minmax(260px, 420px);
  justify-content: center;
}
.drvimi-grid-item {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.drvimi-grid-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.drvimi-grid-item h4 {
  color: var(--color-ink);
  font-family: var(--font-display);
  margin-top: 0;
}
.drvimi-grid-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius-card) - 6px);
  margin-bottom: 0.5rem;
}
/* No portrait on file for this person — a friendly placeholder instead of
   dead white space, so the grid still reads as a full team roster. */
.drvimi-grid-item:not(:has(img))::before {
  content: '';
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius-card) - 6px);
  margin-bottom: 0.5rem;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0.9) 0 17%, transparent 17.5%),
    radial-gradient(ellipse 34% 22% at 50% 84%, rgba(255,255,255,0.9) 0 100%, transparent 100%),
    linear-gradient(135deg, var(--color-teal-light), var(--color-coral-light));
}

/* Event cards — colored tag instead of a fabricated date badge (migrated
   event post_date values are all a single bulk-import timestamp, not the
   real historical event dates, so a day/month badge would be invented data;
   see report for detail). */
.drvimi-event-card {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: 0 4px 16px rgba(15,42,74,0.08);
  border-left: 5px solid var(--color-teal);
  display: flex;
  flex-direction: column;
}
.drvimi-grid .drvimi-event-card:nth-child(3n+2) { border-left-color: var(--color-marigold); }
.drvimi-grid .drvimi-event-card:nth-child(3n+3) { border-left-color: var(--color-coral); }
.drvimi-event-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal-dark);
  background: rgba(27,107,165,0.12);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.75rem;
}
.drvimi-event-card h4 { margin: 0 0 0.5rem; }
.drvimi-event-card img { order: -1; }

/* ==========================================================================
   Core team band (Our Leaders) — the batchmate group photographs
   ==========================================================================
   The batchmates photo is a panorama (roughly 3.4:1) reprinted from a physical
   print, so it gets its own full-width row rather than being squeezed into a
   card grid where object-fit would crop the end of the row of faces off. The
   two squarer photos sit below it as a pair. */
.drvimi-core-team {
  margin: 0 0 2.25rem;
}
.drvimi-core-team figure {
  margin: 0;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(15,42,74,0.10);
}
.drvimi-core-team img {
  width: 100%;
  display: block;
}
.drvimi-core-team figcaption {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: #55666F;
  padding: 0.85rem 1.1rem;
  text-align: center;
}
.drvimi-core-team-wide {
  margin-bottom: 1.5rem !important;
}
/* No fixed height / object-fit here on purpose: these are group photographs
   where every face matters, and a cover-crop to a common height sliced the
   seated front row off the reunion photo. Natural aspect ratios leave the two
   figures slightly unequal in height, which is the cheaper price to pay. */
.drvimi-core-team-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 700px) {
  .drvimi-core-team-pair { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Core team roster cards (the [drvimi_core_team] grid)
   ==========================================================================
   Each card is photo -> committee post -> name -> qualification, the same
   reading order the old executive-committee page used and the one the client
   asked us to restore. The post sits in a filled teal pill rather than plain
   text so the office-bearers are scannable at a glance in a 23-card grid. */
.drvimi-team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Portraits are square crops; without this they inherit the 4/3 shape the
   generic .drvimi-grid-item img rule gives event and sponsor tiles. */
.drvimi-grid-item.drvimi-team-card img {
  aspect-ratio: 1 / 1;
}
.drvimi-team-post {
  display: inline-block;
  background: var(--color-teal);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.22rem 0.9rem;
  margin-bottom: 0.55rem;
}
.drvimi-team-card h4 {
  margin: 0 0 0.3rem;
  font-size: 1.02rem;
  line-height: 1.3;
}
.drvimi-team-designation {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #55666F;
}

/* ==========================================================================
   Event photo gallery (Media & Stories) + lightbox
   ========================================================================== */
.drvimi-media-gallery {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 2rem 3rem;
}
.drvimi-media-gallery h2 {
  color: var(--color-ink);
  font-size: 1.85rem;
  text-align: center;
}
.drvimi-media-gallery > p {
  max-width: 70ch;
  margin: 0 auto 2rem;
  text-align: center;
}
.drvimi-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.drvimi-gallery-item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15,42,74,0.08);
  text-decoration: none;
  color: var(--color-ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.drvimi-gallery-item:hover,
.drvimi-gallery-item:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15,42,74,0.16);
  color: var(--color-ink);
}
.drvimi-gallery-item:focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 2px;
}
.drvimi-gallery-item img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}
.drvimi-gallery-cap {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.4;
  color: #55666F;
  padding: 0.8rem 1rem 1rem;
}

/* Lightbox overlay — built by assets/gallery.js, appended to <body>. */
.drvimi-lightbox[hidden] { display: none; }
.drvimi-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  background: rgba(15,32,42,0.92);
}
body.drvimi-lb-open { overflow: hidden; }
.drvimi-lb-figure {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.drvimi-lb-img {
  max-width: 100%;
  /* Leave room for the caption and the page padding so a tall portrait photo
     cannot push its own caption off the bottom of the viewport. */
  max-height: calc(100vh - 10rem);
  object-fit: contain;
  border-radius: 10px;
  background: #0F202A;
}
.drvimi-lb-cap {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #EDF5F2;
  text-align: center;
  max-width: 60ch;
}
.drvimi-lb-close,
.drvimi-lb-nav {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,0.14);
  color: #fff;
  border-radius: var(--radius-pill);
  line-height: 1;
}
.drvimi-lb-close:hover,
.drvimi-lb-nav:hover { background: rgba(255,255,255,0.28); }
.drvimi-lb-close:focus-visible,
.drvimi-lb-nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.drvimi-lb-nav {
  width: 48px;
  height: 48px;
  font-size: 2rem;
}
.drvimi-lb-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  font-size: 1.75rem;
}
@media (max-width: 700px) {
  .drvimi-lightbox { padding: 1rem 0.5rem; }
  .drvimi-lb-nav { width: 40px; height: 40px; font-size: 1.6rem; }
  .drvimi-lb-img { max-height: calc(100vh - 12rem); }
}

/* Motion + accessibility */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .drvimi-work-grid { grid-template-columns: 1fr 1fr; }
  .drvimi-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1rem; }
}
@media (max-width: 700px) {
  .drvimi-pillars { grid-template-columns: 1fr; }
  .drvimi-portrait-pair { gap: 1.25rem; }
  .drvimi-asym-grid { grid-template-columns: 1fr; }
  .drvimi-asym-large, .drvimi-asym-large img { min-height: 220px; }
  .drvimi-asym-stack { flex-direction: row; }
  .drvimi-asym-small, .drvimi-asym-small img { min-height: 140px; }
  .drvimi-work-grid { grid-template-columns: 1fr; }
  .drvimi-money-changes-lives ul { grid-template-columns: 1fr; }
  .drvimi-stats-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Full width — the client's "too much negative space in margins" note
   ==========================================================================
   GeneratePress renders <div class="site grid-container container">, which
   constrains the WHOLE site to a fixed width and produces a white card
   floating on the page background. Override it here rather than relying on a
   Customizer setting, so the layout is reproducible from the repo alone. */
.site.grid-container.container {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.site-content .content-area,
.entry-content {
  max-width: 100%;
}
/* GeneratePress renders `.site-content{display:flex;flex-direction:column}`
   with `.content-area{width:auto}`. Flex items default to min-width:auto,
   so unwrapped inline content anywhere inside (a badge, a button row) can
   force .content-area — and everything sized as a percentage of it — wider
   than the viewport, clipping text on narrow screens. min-width:0 lets the
   flex item shrink to the container width as intended. */
.site-content,
.site-content .content-area {
  min-width: 0;
}
/* Header and nav keep a comfortable inner width — full-bleed nav looks broken. */
.site-header .inside-header,
.main-navigation .inside-navigation {
  max-width: 1300px;
  margin: 0 auto;
}

/* GeneratePress's "separate-containers" layout (the site's chosen Customizer
   container style) also pads .inside-article 40px on every side, independent
   of .site.grid-container.container above. Left in place, it re-introduces a
   40px gutter that keeps full-bleed bands from reaching the viewport edge. */
.separate-containers .inside-article {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}
/* Kill the theme's content-area top gutter so the full-bleed hero/sections meet
   the header directly — no large dead white band. Inner pages carry their own
   .drvimi-section padding, so their content still breathes. */
.site-content .content-area,
.site-main,
.entry-content { margin-top: 0; padding-top: 0; }

/* Readable measure INSIDE a full-bleed band. Full-width must never mean
   1920px-wide paragraphs. */
.drvimi-measure {
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

/* Any content NOT wrapped in a .drvimi-* band (plain pages, blog posts) would
   otherwise sprawl to the viewport edge now that .entry-content is full-width.
   Bound the top-level text elements to a readable measure. Full-bleed bands
   (.drvimi-slider, .drvimi-stats, .drvimi-remember, etc.) are also direct
   children but are NOT text elements, so this selector leaves them full-width;
   content inside a .drvimi-section is not a direct child of .entry-content,
   so it is untouched too. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > blockquote,
.entry-content > figure {
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 700px) {
  .entry-content > p,
  .entry-content > ul,
  .entry-content > ol,
  .entry-content > h1,
  .entry-content > h2,
  .entry-content > h3,
  .entry-content > h4,
  .entry-content > blockquote,
  .entry-content > figure {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ==========================================================================
   Remembering Dr. Vimi — the home page's closing section
   ==========================================================================
   Replaces the sponsor CTA band. The client asked for no ask on the home page,
   so the last thing a visitor reads is why the Society exists. */
/* Client round-3: the old left-hugging grid left two-thirds of the band
   empty, which read as sad. The composition is now centered so the band
   feels intentionally full at any width. */
.drvimi-remember {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-coral-deep) 0%, var(--color-teal-deep) 100%);
  padding: 5rem 2rem;
  text-align: center;
}
.drvimi-remember::before,
.drvimi-remember::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.10);
  pointer-events: none;
}
.drvimi-remember::before { width: 420px; height: 420px; top: -180px; left: -140px; }
.drvimi-remember::after { width: 300px; height: 300px; bottom: -160px; right: -100px; border-color: rgba(255,255,255,0.08); }
.drvimi-remember-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.drvimi-remember img {
  width: 210px;
  height: 210px;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,0.85);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  display: block;
  margin-bottom: 2rem;
}
.drvimi-remember blockquote {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.35;
  color: #fff;
}
.drvimi-remember blockquote::before { content: '\201C'; color: var(--color-marigold); margin-right: 0.15em; }
.drvimi-remember blockquote::after  { content: '\201D'; color: var(--color-marigold); margin-left: 0.15em; }
/* No <cite> in this section by design: the closing quote is the Society's own
   voice and must never be attributed to an individual. Do not add one. */
.drvimi-remember-lede {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.86);
  max-width: 52ch;
  margin: 0 auto 1.75rem;
}
.drvimi-remember a.button-secondary {
  background: rgba(255,255,255,0.12);
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.55);
  box-shadow: none;
}
.drvimi-remember a.button-secondary:hover {
  background: #fff;
  color: var(--color-coral-deep) !important;
  transform: translateY(-3px);
}
@media (max-width: 700px) {
  .drvimi-remember img { width: 150px; height: 150px; }
}

/* ==========================================================================
   80G tax-exemption badge — client asked for it "bold and attractive"
   ========================================================================== */
.drvimi-80g {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  max-width: 720px;
  margin: 1.75rem auto 2rem;
  padding: 1.1rem 1.75rem;
  background: linear-gradient(135deg, var(--color-coral) 0%, var(--color-teal) 100%);
  color: #fff;
  border-radius: var(--radius-card);
  box-shadow: 0 10px 26px rgba(22,114,62,0.28);
  text-align: center;
}
.drvimi-80g-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  background: #fff;
  color: var(--color-coral-dark);
  padding: 0.5rem 0.85rem;
  border-radius: 12px;
  flex-shrink: 0;
}
.drvimi-80g-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  line-height: 1.3;
}
.drvimi-80g-text small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  opacity: 0.92;
}

/* ==========================================================================
   Media & Stories — responsive embedded YouTube videos
   ========================================================================== */
.drvimi-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 1.75rem;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 2rem;
}
.drvimi-video figure { margin: 0; }
.drvimi-video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15,42,74,0.10);
  background: #000;
}
.drvimi-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.drvimi-video figcaption {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  margin-top: 0.75rem;
  font-size: 1.05rem;
  line-height: 1.35;
}

/* ==========================================================================
   Payment details — bank transfer + QR (How You Can Help)
   ========================================================================== */
.drvimi-pay-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.75rem;
  max-width: 900px;
  margin: 1.5rem auto 0;
  align-items: stretch;
}
.drvimi-pay-card {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 1.75rem;
  box-shadow: 0 6px 20px rgba(15,42,74,0.08);
  border-top: 5px solid var(--color-teal);
}
.drvimi-pay-card.drvimi-pay-qr {
  border-top-color: var(--color-coral);
  text-align: center;
}
.drvimi-pay-card h3 {
  margin-top: 0;
  color: var(--color-ink);
  font-size: 1.2rem;
}
.drvimi-pay-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  font-family: var(--font-body);
}
.drvimi-pay-card dt {
  font-weight: 700;
  color: var(--color-teal-dark);
}
.drvimi-pay-card dd { margin: 0; color: var(--color-ink); }
.drvimi-pay-qr img {
  width: 210px;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 4px solid #fff;
  box-shadow: 0 6px 18px rgba(15,42,74,0.12);
}
.drvimi-upi-id {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-teal-dark);
  margin: 0.85rem 0 0.2rem;
  word-break: break-all;
}
.drvimi-upi-apps {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #6B7A82;
  margin: 0;
}
.drvimi-qr-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  max-width: 100%;
  margin: 0 auto;
  border: 3px dashed var(--color-teal);
  border-radius: 12px;
  color: var(--color-teal-dark);
  font-family: var(--font-body);
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  background: var(--color-blush);
}
.drvimi-pay-note {
  max-width: 900px;
  margin: 1.25rem auto 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #55666F;
  text-align: center;
}
@media (max-width: 760px) {
  .drvimi-pay-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   GiveWP donation form — match the theme instead of plugin defaults
   ========================================================================== */
.give-form-wrap {
  max-width: 620px;
  margin: 2rem auto 0;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem 2.25rem;
  box-shadow: var(--shadow-soft);
}
.give_error {
  background: var(--color-amber-light) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: var(--color-ink) !important;
  padding: 0.9rem 1.1rem !important;
  margin-bottom: 1.5rem !important;
  font-family: var(--font-body);
}
.set-price.give-donation-amount {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-blush);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  margin-bottom: 1.25rem;
}
.give-currency-symbol {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-coral-dark);
}
#give-amount-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--color-ink);
}
.give-form input[type="text"],
.give-form input[type="email"],
.give-form input[type="tel"],
.give-form input[type="number"] {
  width: 100%;
  border: 2px solid #D8E7E0;
  border-radius: 12px;
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  color: var(--color-ink);
}
#give-payment-mode-select { border: 0; padding: 0; margin: 1.5rem 0; }
.give-payment-mode-label {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  font-size: 1.1rem;
  padding: 0;
}
#give-gateway-radio-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
#give-gateway-radio-list li {
  border: 2px solid #E3ECEA;
  border-radius: 12px;
  padding: 0.7rem 1rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#give-gateway-radio-list li.give-gateway-option-selected {
  border-color: var(--color-teal);
  background: var(--color-teal-light);
}
#give-gateway-radio-list label {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-ink);
  cursor: pointer;
}
#give-final-total-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-blush);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0 !important;
}
.give-donation-total-label {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-ink);
}
.give-final-total-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--color-coral-dark);
}
.give-btn,
#give-purchase-button {
  display: inline-flex !important;
  align-items: center;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  background: linear-gradient(120deg, var(--color-coral) 0%, var(--color-coral-dark) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 0.95rem 2.2rem !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-glow-coral);
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.give-btn:hover,
#give-purchase-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(22,114,62,0.38);
}
.give-submit-button-wrap { margin-top: 0.5rem; }

/* ==========================================================================
   Contact details list
   ========================================================================== */
.drvimi-contact-details ul {
  list-style: none;
  margin: 1.5rem auto 0;
  padding: 0;
  max-width: 620px;
  display: grid;
  gap: 0.75rem;
}
.drvimi-contact-details li {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 0.9rem 1.1rem 0.9rem 1.25rem;
  box-shadow: var(--shadow-soft);
  border-left: 4px solid var(--color-teal);
}
.drvimi-contact-details li:nth-child(even) { border-left-color: var(--color-coral); }