/* ===== Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #FAFAFA;
}

/* ===== Nav (always white/sticky) ===== */
#site-header {
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

/* ===== Section transitions ===== */
section {
  position: relative;
}

/* ===== Hero background (responsive) ===== */
/* Desktop: wide landscape counseling scene.
   WebP (82 KB) with a JPEG fallback (118 KB) via image-set — replaces the old 2 MB PNG. */
.hero-bg {
  background-image: url('/assets/images/hero-bg.jpg'); /* fallback for browsers without image-set */
  background-image: -webkit-image-set(
    url('/assets/images/hero-bg.webp') type('image/webp'),
    url('/assets/images/hero-bg.jpg') type('image/jpeg'));
  background-image: image-set(
    url('/assets/images/hero-bg.webp') type('image/webp'),
    url('/assets/images/hero-bg.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: 50% 55%;
}

/* Mobile: dedicated 9:16 portrait so the scene stays visible on tall screens. */
@media (max-width: 640px) {
  .hero-bg {
    background-image: url('/assets/images/hero-bg-mobile.jpg');
    background-image: -webkit-image-set(
      url('/assets/images/hero-bg-mobile.webp') type('image/webp'),
      url('/assets/images/hero-bg-mobile.jpg') type('image/jpeg'));
    background-image: image-set(
      url('/assets/images/hero-bg-mobile.webp') type('image/webp'),
      url('/assets/images/hero-bg-mobile.jpg') type('image/jpeg'));
    background-position: 50% 50%;
  }
}

/* ===== Focus states for accessibility ===== */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #CF4520;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===== Smooth fade-in animations ===== */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== School cards hover ===== */
.school-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.school-card:hover {
  transform: translateY(-2px);
}

/* ===== Mobile menu ===== */
#mobile-menu {
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Animated CTA gradient border =====
   Traveling conic-gradient ring around the primary CTA pills.
   Pattern referenced from trinity-home-care-site, re-tuned to the SES
   brand: a deep-indigo base (teal-700/800) carries a warm amber/orange
   highlight that travels around the perimeter. Keep stops in sync if the
   brand palette changes. */
@property --cta-border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes ctaRotateBorder {
  to { --cta-border-angle: 360deg; }
}

.cta-glow {
  position: relative;
}

.cta-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px; /* ring thickness */
  /* 14-stop traveling strip: indigo base for most of the ring, with a
     warm amber peak that sweeps around. */
  background: conic-gradient(
    from var(--cta-border-angle),
    #0C1048 0deg,
    #0C1048 285deg,   /* deep-indigo base — most of the perimeter */
    #131760 293deg,   /* leading edge fades in */
    #1B2080 300deg,
    #363DAD 307deg,
    #B03518 313deg,   /* warm orange ramps up */
    #CF4520 317deg,
    #E06040 320deg,
    #FFE9DF 323deg,   /* warm near-white — brightest point */
    #E06040 326deg,
    #CF4520 332deg,
    #363DAD 342deg,   /* trailing fade back to indigo */
    #131760 353deg,
    #0C1048 360deg
  );
  /* Cut the interior out so only the 2px ring is visible. */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: ctaRotateBorder 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cta-glow::before {
    animation: none;
    --cta-border-angle: 323deg; /* freeze at the warm peak — static accent */
  }
}

/* ===== Crisis box pulse ===== */
@keyframes subtle-pulse {
  0%, 100% { border-color: rgba(153,27,27,0.4); }
  50%       { border-color: rgba(153,27,27,0.7); }
}

footer .border-red-800\/40 {
  animation: subtle-pulse 3s ease-in-out infinite;
}

/* ===== WCAG AA contrast corrections (axe-core verified, 2026-07) =====
   Scoped overrides so contrast fixes apply site-wide without touching the
   many places these same utility classes are already used accessibly. */

/* Orange CTA band + address card (bg-amber-500 = #CF4520):
   force solid white on the low-opacity text that fell just under 4.5:1. */
.bg-amber-500 .text-white\/80,
.bg-amber-500 .text-white\/70,
.bg-amber-500 .text-amber-100 {
  color: #ffffff;
}

/* Section eyebrows in amber-500 on the light/cream body (was ~4.44:1)
   -> amber-600 (#B03518) reaches ~5.9:1. */
.text-amber-500.tracking-widest {
  color: #B03518;
}

/* Small muted text (gray-400) on the light body — captions, disclaimers,
   eyebrows, helper lines — ran 2.4–2.5:1 on white/cream. Darken to gray-600
   (~6.7:1 on cream). The dark footer keeps gray-400 light (restored below). */
.text-gray-400.text-sm,
.text-gray-400.text-xs {
  color: #4B5563; /* gray-600 */
}
footer .text-gray-400.text-sm,
footer .text-gray-400.text-xs {
  color: #9CA3AF; /* restore light gray on the navy footer (already ~5.5:1) */
}

/* Emergency crisis box: red-100 text on red-600 (#DC2626) = 3.95:1 -> white (~5.3:1). */
.bg-red-600 .text-red-100 {
  color: #ffffff;
}

/* Footer (navy #131760): lift muted body text and accent links above 4.5:1. */
footer .text-gray-500 {
  color: #CBD5E1; /* slate-300 */
}
footer .text-amber-400 {
  color: #F4926B; /* lighter coral-orange, ~6.9:1 on navy */
}