/* SSJ Health Foundation — design tokens.
   Palette sampled directly from the Foundation's own logo file (navy dove,
   red wordmark) — the same navy/red family as St. John Bosco Clinic's own
   site, which is accurate: the two organizations share a building, a
   mission and a visual identity, while remaining separate 501(c)(3)s. */

:root {
  --navy: #1E2E6B;
  --navy-dark: #14204D;
  --navy-light: #3A4A90;
  --red: #BE1E2D;
  --red-dark: #9A1824;
  --red-light: #D6404E;
  --ink: #1F2430;
  --ink-soft: #464C5A;
  --cloud: #FAFAF8;
  --mist: #F1F2F5;
  --sky: #E6EBF5;

  --color-cacao: var(--ink);
  --color-cacao-light: var(--ink-soft);
  --color-ivory: var(--cloud);
  --color-sand: var(--mist);
  --color-divider: #CDD2DC;
  --color-divider-light: #E2E5EC;
  --navy-deep: #0F1838;
  --muted-foreground: #6B7280;
  --foreground: var(--ink);
  --font-serif: 'Merriweather', Georgia, serif;
  --font-sans: 'Source Sans 3', system-ui, sans-serif;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* NOTE ON SPECIFICITY — do not "simplify" these to bare element selectors.
   Tailwind is loaded from cdn.tailwindcss.com, which injects its stylesheet
   at runtime, landing after this file in the cascade. Its preflight sets
   h1..h6 { font-size: inherit }, so a plain `h2 { font-size: ... }` here
   loses and bare headings compute to 16px. The `html ` prefix raises
   specificity to 0,0,2 so these win, while any Tailwind text-* utility
   (0,1,0) still overrides them where one is applied. */
html h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
@media (min-width: 768px) { html h1 { font-size: 3.25rem; } }
@media (min-width: 1024px) { html h1 { font-size: 4rem; } }
@media (max-width: 640px) { html h1 { font-size: 2.25rem; } }

html h2 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
@media (min-width: 768px)  { html h2 { font-size: 2.25rem; } }
@media (min-width: 1024px) { html h2 { font-size: 2.5rem; } }

html h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
@media (min-width: 768px) { html h3 { font-size: 1.625rem; } }

.section-label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1.25rem;
  color: var(--navy);
}

p {
  line-height: 1.7;
  font-size: 1.0625rem;
  color: var(--color-cacao-light);
}

a { color: var(--navy); text-decoration: none; transition: color 200ms ease-out; }
a:hover { color: var(--red); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--red);
  color: white;
  border-radius: 4px;
  padding: 0.75rem 2rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  transition: background-color 250ms ease-out;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:hover { background-color: var(--red-dark); color: white; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--navy);
  border-radius: 4px;
  padding: calc(0.75rem - 2px) calc(2rem - 2px);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  transition: background-color 250ms ease-out, color 250ms ease-out;
  border: 2px solid var(--navy);
  cursor: pointer;
  text-decoration: none;
}
.btn-secondary:hover { background-color: var(--navy); color: white; }

.editorial-card {
  background: #fff;
  border-left: 3px solid var(--navy);
  box-shadow: 0 2px 12px rgba(31, 36, 48, 0.05);
  border-radius: 4px;
  padding: 2rem;
}

.divider-gold { width: 3rem; height: 3px; background-color: var(--red); border: none; }

/* Donation tier card: amount in serif navy, one sentence of impact below */
.tier-card {
  background: #fff;
  border: 1px solid var(--color-divider-light);
  border-radius: 8px;
  padding: 1.75rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.tier-card:hover { border-color: var(--navy-light); box-shadow: 0 6px 20px rgba(15, 24, 56, 0.08); }
.tier-card .amount { font-family: var(--font-serif); font-weight: 700; color: var(--navy); font-size: 1.75rem; }

/* Leadership headshot: consistent circular frame, works with any source crop */
.person-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  object-fit: cover;
  background: var(--sky);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(31, 36, 48, 0.10);
}

/* Blog / news cards */
.news-card {
  background: #fff;
  border: 1px solid var(--color-divider-light);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 200ms ease, transform 200ms ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.news-card:hover { box-shadow: 0 10px 28px rgba(31, 36, 48, 0.10); transform: translateY(-2px); }
.news-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.news-card .body { padding: 1.25rem 1.375rem 1.5rem; display: flex; flex-direction: column; flex: 1; }

.logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--color-divider-light);
  border-radius: 6px;
  padding: 1.5rem;
  min-height: 7.5rem;
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
.logo-tile:hover { border-color: var(--navy-light); box-shadow: 0 4px 16px rgba(31, 36, 48, 0.08); }
.logo-tile img { max-height: 4.5rem; max-width: 100%; width: auto; height: auto; object-fit: contain; }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.875rem;
  line-height: 1.6;
  color: var(--color-cacao-light);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 9999px;
  background-color: var(--sky);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2E6B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 0.7rem;
  background-position: center;
  background-repeat: no-repeat;
}

a, button, .editorial-card, .tier-card, .news-card {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
}

.img-cover { width: 100%; height: 100%; object-fit: cover; }

/* News post body: plain semantic HTML, so Tailwind's preflight (which strips
   list bullets and paragraph spacing) needs a little put back for readable
   long-form copy. */
.prose-post > p { margin-bottom: 1.375rem; }
.prose-post > h2 { margin-top: 2.25rem; margin-bottom: 1rem; }
.prose-post > h3 { margin-top: 2rem; margin-bottom: 0.875rem; }
.prose-post > ul, .prose-post > ol { margin: 0 0 1.375rem 1.25rem; }
.prose-post > ul { list-style: disc; }
.prose-post > ol { list-style: decimal; }
.prose-post > ul li, .prose-post > ol li { margin-bottom: 0.5rem; padding-left: 0.25rem; color: var(--color-cacao-light); }
.prose-post a { text-decoration: underline; text-underline-offset: 2px; }
.prose-post strong { color: var(--color-cacao); font-weight: 700; }
.prose-post blockquote { border-left: 3px solid var(--navy); padding-left: 1.25rem; font-style: italic; color: var(--color-cacao-light); margin: 1.5rem 0; }

/* FAQ (includes/faq.php): native <details> accordions. The question is the
   <summary>, the whole row is the click target, and a plus sign turns into a
   minus when open. Answers are answer-first paragraphs, slightly smaller than
   body copy, with underlined links so they don't rely on colour alone. */
.faq-item { padding: 0 1.5rem; }
@media (min-width: 768px) { .faq-item { padding: 0 2rem; } }
.faq-question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ""; }
.faq-question h3 { margin: 0; transition: color 200ms ease; }
.faq-question:hover h3 { color: var(--navy); }
.faq-question:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: 4px; }
.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  border-radius: 9999px;
  background: var(--sky);
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0.75rem; height: 2px;
  background: var(--navy);
  transform: translate(-50%, -50%);
  transition: transform 200ms ease;
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-answer { padding: 0 2.5rem 1.5rem 0; }
.faq-answer p { font-size: 1rem; margin-bottom: 0.75rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { text-decoration: underline; text-underline-offset: 2px; }
.faq-answer strong { color: var(--color-cacao); }

/* Responsive 16:9 video embed (Vimeo/YouTube), so the fixed-size iframes the
   originals used don't overflow on mobile. */
.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--navy-deep);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 24, 56, 0.15);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.caption {
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* Form inputs — matches the clinic site's own treatment exactly. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
  font-family: var(--font-sans);
  border: 2px solid var(--color-divider);
  border-radius: 4px;
  /* No padding here: `input[type="number"]` is specificity 0,1,1 and would
     beat Tailwind's padding utilities (0,1,0) regardless of load order. Every
     form control carries its own px-/py- utility. */
  width: 100%;
  font-size: 0.9375rem;
  background: white;
  color: var(--color-cacao);
  transition: border-color 200ms ease;
  outline: none;
  box-sizing: border-box;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--navy);
}

/* Hero parallax. The image is 140% of its section's height, starting 20%
   above it, so footer.php's scroll handler can shift it down by up to 20%
   of the section height (the image lagging the page) without exposing a
   gap. The section must be `relative overflow-hidden`. `h-full` is left off
   the <img> on purpose: Tailwind's runtime sheet loads after this one and
   would win. Reduced-motion users get a static image. */
.hero-parallax {
  position: absolute;
  left: 0;
  right: 0;
  top: -20%;
  width: 100%;
  height: 140%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-parallax { will-change: auto; transform: none !important; }
}