/* ------------------------------ */
/* Ember Initiatives – Global CSS */
/* ------------------------------ */

/* Theme */
:root{
  --ember:#FF6A3D;
  --cream:#FFF5E6;
  --charcoal:#222;
  --teal:#4CB5AE;
  --sky:#6AB7FF;
}

/* Resets / base */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#222; background:#fff; line-height:1.6;
}

img, picture, video, canvas, svg{
  display:block;
  max-width:100%;
  height:auto;
}

h1,h2,h3,h4{ font-family:Inter, sans-serif; margin:0 0 .5rem; }
h1{ font-size: clamp(2rem, 4vw, 3rem); line-height:1.15; }
h2{ font-size: clamp(1.5rem, 2.5vw, 2rem); }
.lead{ font-family:"Source Serif Pro", serif; font-size:1.125rem; opacity:.9; }
.container{ max-width:1100px; margin:0 auto; padding:0 1rem; }
/* iOS: make links use the surrounding text color */
a, a:visited { color: inherit; -webkit-text-fill-color: currentColor; }

/* Header / nav */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.9); backdrop-filter: blur(6px);
  border-bottom:1px solid #eee; overflow:visible;
}
.site-header .nav{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.brand{ display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--charcoal); font-weight:700; }
.brand img{ height:56px; width:auto; }
.menu{ display:flex; gap:1rem; align-items:center; }
.menu a{ color:var(--charcoal); text-decoration:none; padding:.5rem .25rem; border-radius:.5rem; }
.menu a:hover{ background:#f3f3f3; }
.cta{ background:var(--ember); color:#fff !important; padding:.5rem .75rem; border-radius:.75rem; }
.cta:hover{ opacity:.9; }

/* Dropdown (hover) */
.dropdown{ position:relative; }
.dropdown::after{ content:""; position:absolute; left:0; right:0; top:100%; height:12px; }
.dropdown > button{
  background:transparent; border:1px solid #ddd; padding:.45rem .7rem; border-radius:.5rem; cursor:pointer; line-height:1;
}
.dropdown > button:hover{ background:#f7f7f7; }
.dropdown-menu{
  position:absolute; top:100%; left:0; margin-top:8px; min-width:240px;
  background:#fff; border:1px solid #eee; border-radius:.75rem; padding:.4rem;
  box-shadow:0 10px 30px rgba(0,0,0,.08); display:none; z-index:1000;
}
.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu{ display:block; }
.dropdown-menu a{ display:block; padding:.45rem .6rem; border-radius:.5rem; text-decoration:none; color:#222; }
.dropdown-menu a:hover{ background:#f5f5f5; }

/* Mobile nav */
#nav-toggle{ display:none; }
.burger{ display:none; cursor:pointer; }
.burger span{ display:block; width:24px; height:2px; background:#444; margin:5px 0; border-radius:2px; }
@media (max-width:900px){
  .burger{ display:block; }
  .menu{ position:fixed; inset:64px 0 auto 0; background:#fff; display:none; flex-direction:column; padding:1rem; overflow:auto; }
  #nav-toggle:checked ~ .menu{ display:flex; }
}

/* Hero */
.hero{
  position:relative; min-height:70vh; display:grid; place-items:center;
  background-image: var(--hero); background-size:cover; background-position:center;
}
.hero.small{ min-height:45vh; }
.hero .overlay{
  text-align:center; color:#fff; padding:2rem;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.gradient{ background:linear-gradient(45deg,var(--ember),var(--teal)); -webkit-background-clip:text; color:transparent; }
.hero-cta{ display:flex; gap:1rem; margin-top:1rem; flex-wrap:wrap; justify-content:center; }

/* Buttons/links */
.btn{ background:var(--ember); color:#fff; border:none; padding:.8rem 1.1rem; border-radius:999px; cursor:pointer; text-decoration:none; display:inline-block; }
.btn:hover{ transform:translateY(-1px); }
.btn.ghost{ background:transparent; border:1px solid #fff; }
.link{ color:var(--ember); text-decoration:none; }
.link:hover{ text-decoration:underline; }

/* Cards/sections */
.logos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin:3rem auto; }
.logo-card{ border:1px solid #eee; border-radius:1rem; padding:1rem; text-align:center; background:var(--cream); }
.logo-card img{ max-width:140px; margin:0 auto 1rem; display:block; }

.panels{ display:grid; grid-template-columns:2fr 1fr; gap:1.5rem; margin:3rem auto; }
.card{ border:1px solid #eee; border-radius:1rem; padding:1rem; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.04); }
.card.accent{ background:linear-gradient(180deg, #fff, #FFF5E6); }
.checks{ list-style:none; padding:0; margin:0; }
.checks li{ padding-left:1.6rem; position:relative; margin:.4rem 0; }
.checks li:before{ content:"\2713"; position:absolute; left:.2rem; color:var(--teal); }

.program .program-logo{ max-width:200px; }
.program .program-grid{ display:grid; grid-template-columns:220px 1fr; gap:1.5rem; align-items:start; }
.two-col{ display:grid; grid-template-columns:2fr 1fr; gap:1.5rem; margin:2rem auto; }
@media (max-width:900px){
  .panels, .two-col, .program .program-grid{ grid-template-columns:1fr; }
}

/* Forms */
.form label{ display:block; font-weight:600; margin:.5rem 0; }
.form input,.form select,.form textarea{
  width:100%; padding:.7rem .8rem; border:1px solid #ddd; border-radius:.6rem; font:inherit;
}
.form button{ margin-top:1rem; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

/* Map */
.map-wrap{ border-radius:1rem; overflow:hidden; border:1px solid #eee; }
.map-wrap iframe{ width:100%; height:320px; border:0; }

/* Testimonials slider (basic show/hide) */
.slider{ position:relative; overflow:hidden; }
.slide{ min-height:140px; display:none; text-align:center; font-family:"Source Serif Pro", serif; font-size:1.05rem; }
.slide blockquote{ margin:0 auto; max-width:800px; }
.slide.active{ display:block; animation:fade .6s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* Footer */
.site-footer{ margin-top:3rem; background:#111; color:#ddd; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; padding:2rem 1rem; }
.footer-logo{ height:44px; }
.subfooter{ border-top:1px solid #222; text-align:center; padding:1rem; font-size:.9rem; color:#aaa; }

/* Utilities */
.btn.small{ padding:.5rem .8rem; font-size:.9rem; }
.reveal{ animation:up 800ms ease .1s both; }
@keyframes up{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* Optional grid gallery (elsewhere, e.g., gallery.html) */
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin:2rem auto;
}
.gallery-grid img{ width:100%; height:240px; object-fit:cover; border-radius:.75rem; }

/* Optional 4-up photo strip (if you use .gallery-strip) */
.gallery-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
.gallery-strip img{
  width:100%; height:560px; object-fit:cover; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.15); border-radius:4px;
}
@media (max-width:900px){ .gallery-strip{ grid-template-columns:repeat(2,1fr); } }
/* --- Program cards: Ember link color + pulsing glow on hover --- */
.link,
.link:visited{
  color: var(--ember);
  text-decoration: none;
  -webkit-text-fill-color: var(--ember); /* iOS WebKit quirk */
  transition: color .25s ease, text-shadow .25s ease;
  position: relative;
}

.link:hover,
.link:focus{
  color: var(--ember);
  -webkit-text-fill-color: var(--ember);
  text-shadow:
    0 0 6px rgba(232,93,4,.70),
    0 0 14px rgba(244,140,6,.55);
  animation: emberPulse 2.6s ease-in-out infinite;
  animation-fill-mode: both;
}

/* Soft halo behind program links too (like footer) */
.link:hover::after,
.link:focus::after{
  content: "";
  position: absolute;
  left: -18%;
  top: -10%;
  width: 136%;
  height: 120%;
  background: radial-gradient(circle, rgba(244,140,6,0.55) 0%, rgba(232,93,4,0) 70%);
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(.3px);
}

/* If a link is styled as a button, keep it white/no pulse */
a.btn,
a.btn:hover,
a.btn:focus{
  color: #fff !important;
  text-shadow: none !important;
  animation: none !important;
}
a.btn::after{ content: none !important; }
/* Footer links — stronger base glow + slower pulse */
.site-footer a,
.site-footer a:visited {
  color: #d1d5db;
  text-decoration: none;
  position: relative;
  transition: color .3s ease;
}

/* Hover/focus/active = show orange + base glow + slow pulse */
.site-footer a:hover,
.site-footer a:focus,
.site-footer a:active {
  color: var(--ember);
  /* stronger base so it’s obvious the moment you hover */
  text-shadow:
    0 0 10px rgba(232,93,4,.85),
    0 0 22px rgba(244,140,6,.70);
  animation: emberPulse 3.6s ease-in-out infinite;
  -webkit-animation: emberPulse 3.6s ease-in-out infinite; /* Safari */
}

/* soft flare behind text (also runs on focus/active for tap) */
.site-footer a:hover::after,
.site-footer a:focus::after,
.site-footer a:active::after {
  content: "";
  position: absolute;
  left: -18%;
  top: -10%;
  width: 136%;
  height: 120%;
  background: radial-gradient(circle, rgba(244,140,6,0.55) 0%, rgba(232,93,4,0) 70%);
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translateZ(0);           /* helps Safari composite the glow */
}

/* CTA button: never pulse */
.site-footer a.btn,
.site-footer a.btn:hover,
.site-footer a.btn:focus,
.site-footer a.btn:active {
  color: #fff !important;
  text-shadow: none !important;
  animation: none !important;
  -webkit-animation: none !important;
}
/* On touch devices (no hover): use :active/:focus to show pulse during tap */
@media (hover: none) and (pointer: coarse) {
  .site-footer a { -webkit-tap-highlight-color: transparent; }
  .site-footer a:active,
  .site-footer a:focus {
    color: var(--ember);
    text-shadow:
      0 0 10px rgba(232,93,4,.85),
      0 0 22px rgba(244,140,6,.70);
    animation: emberPulse 3.2s ease-in-out 1;        /* one pulse per tap */
    -webkit-animation: emberPulse 3.2s ease-in-out 1;
  }
}
/* --- Force program links to use the ember glow color --- */
.program a,
.program a:visited {
  color: var(--ember) !important;
  text-decoration: none;
}

/* On hover or focus, trigger the same glowing pulse we use in the footer */
.program a:hover,
.program a:focus {
  color: var(--ember);
  text-shadow:
    0 0 6px rgba(232,93,4,.7),
    0 0 14px rgba(244,140,6,.55);
  animation: emberPulse 2.6s ease-in-out infinite;
  -webkit-animation: emberPulse 2.6s ease-in-out infinite; /* Safari */
}

/* stronger text glow pulse */
@keyframes emberPulse {
  0% {
    text-shadow:
      0 0 6px  rgba(232,93,4,.65),
      0 0 14px rgba(244,140,6,.50);
  }
  50% {
    text-shadow:
      0 0 20px rgba(232,93,4,1),
      0 0 38px rgba(244,140,6,1);
  }
  100% {
    text-shadow:
      0 0 8px  rgba(232,93,4,.75),
      0 0 18px rgba(244,140,6,.60);
  }
}

/* flare size/opacity pulse (clearly visible) */
@keyframes flarePulse {
  0%   { transform: scale(0.96); opacity: .55; }
  50%  { transform: scale(1.06); opacity: .95; }
  100% { transform: scale(0.98); opacity: .60; }
}
/* WebKit-prefixed copies for Safari */
@-webkit-keyframes emberPulse {
  0%   { text-shadow: 0 0 6px rgba(232,93,4,.65), 0 0 14px rgba(244,140,6,.50); }
  50%  { text-shadow: 0 0 20px rgba(232,93,4,1),   0 0 38px rgba(244,140,6,1); }
  100% { text-shadow: 0 0 8px rgba(232,93,4,.75),  0 0 18px rgba(244,140,6,.60); }
}

@-webkit-keyframes flarePulse {
  0%   { -webkit-transform: scale(0.96); opacity: .55; }
  50%  { -webkit-transform: scale(1.06); opacity: .95; }
  100% { -webkit-transform: scale(0.98); opacity: .60; }
}
/* ===== iPhone gallery – final, consolidated fix (place at very end) ===== */
.gallery-row{
  display: flex;
  gap: 12px;
  padding: .25rem 0 1rem;
  margin: 1rem 0 2rem;
  overflow-x: auto;
  overflow-y: hidden;             /* stop vertical jiggle */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;  /* iOS momentum */
  touch-action: pan-x;                /* hint gestures are horizontal */
  overscroll-behavior-x: contain;     /* prevent page pull-to-refresh conflict */
  white-space: normal;                /* ensure flex, not text flow */
  flex-wrap: nowrap;                  /* force single row */
  min-width: 0;                       /* guard against flex overflow calc on iOS */
}

.gallery-row img{
  flex: 0 0 auto;
  height: 180px;                      /* default phone/tablet size */
  width: auto;
  max-width: none;                    /* ignore global img{max-width:100%} */
  object-fit: contain;                /* show full photo */
  background: #111;
  border-radius: 12px;
  scroll-snap-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);

  /* iOS rounded-corners reliability */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  clip-path: inset(0 round 12px);
  transform: translateZ(0);           /* promote for smoother scrolling on Safari */
}

/* Very small phones */
@media (max-width: 600px){
  .gallery-row img{ height: 160px; }
}

/* Larger screens */
@media (min-width: 900px){
  .gallery-row img{ height: 240px; }
}
.gallery-row > *{
  flex:0 0 auto;
  display:block;
  border-radius:12px;
  overflow:hidden;
  -webkit-mask-image:-webkit-radial-gradient(white,black);
  clip-path:inset(0 round 12px);
}

/* Optional: center images vertically within the row */
.gallery-row{ align-items: center; }

/* Optional: subtle custom scrollbar on WebKit */
.gallery-row::-webkit-scrollbar{ height:10px; }
.gallery-row::-webkit-scrollbar-thumb{ background:#ddd; border-radius:999px; }
/* --- iOS Safari hardening for horizontal gallery --- */
@supports (-webkit-touch-callout: none) {
  .gallery-row{
    align-items: center;             /* center items vertically */
    overflow-y: hidden;              /* kill vertical jiggle for sure */
    contain: content;                /* isolate layout/paint on Safari */
    min-width: 0;                    /* fixes iOS flex overflow calc */
    overscroll-behavior-x: contain;  /* stop page pull-to-refresh hijacking */
  }

  .gallery-row img{
    display: block;                  /* remove inline baseline gap */
    height: 160px;                   /* lock iPhone height */
    max-height: 160px;               /* double-lock */
    width: auto;
    border-radius: 12px;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    clip-path: inset(0 round 12px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);        /* keep GPU layer */
  }

  @media (min-width: 900px){
    .gallery-row img{ height: 240px; max-height: 240px; }
  }
}
/* Footer: stack on small screens; prevent overflow/wrapping issues */
@media (max-width: 900px){
  .footer-grid{
    grid-template-columns: 1fr;  /* stack the 3 columns */
    gap: 1.25rem;
  }
  .footer-grid > *{ min-width: 0; }  /* allow columns to shrink in Safari */
  .site-footer .btn{ width: 100%; }  /* keep the CTA from sticking out */

  /* Let long strings (emails/URLs) wrap instead of pushing layout */
  .site-footer p,
  .site-footer li,
  .site-footer a{
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  /* Optional: keep the Programs list tidy */
  .footer-grid ul{ margin: 0; padding-left: 1.25rem; }
}

/* Optional: kill any tiny horizontal wiggle on iOS */
html, body { max-width: 100%; overflow-x: hidden; }

/* Make footer links always tappable on iPhone */
.site-footer { position: relative; }
.site-footer a { display: inline-block; padding: .25rem 0; pointer-events: auto !important; }
.site-footer a::after { pointer-events: none !important; }
/* Footer links: one canonical block */
.site-footer a,
.site-footer a:visited{
  color:#d1d5db;
  -webkit-text-fill-color:#d1d5db;   /* iOS */
  text-decoration:none;
  position:relative;
  display:inline-block;
  padding:.25rem 0;                   /* bigger tap target */
  z-index:1;                          /* sit above decorative glow */
}

.site-footer a::after{
  pointer-events:none;                /* decorative glow can't block taps */
}

/* Hover + keyboard focus (accessible) */
.site-footer a:hover,
.site-footer a:focus-visible{
  color:var(--ember);
  -webkit-text-fill-color:var(--ember);
  text-decoration:underline;
}

/* Respect motion settings: tone down glow on reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-footer a{
    animation:none !important;
    text-shadow:none !important;
  }
}
.site-footer a[href^="mailto:"] { pointer-events: auto !important; }
/* --- Ember Glow for Register Button --- */
a.cta, a.glow-ember {
  background: var(--ember, #FF6A3D);
  color: #fff !important;
  border-radius: 6px;
  padding: 0.6rem 1.1rem;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(255,106,61,0.6);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}
a.cta:hover, a.glow-ember:hover {
  box-shadow: 0 0 18px rgba(255,106,61,0.9), 0 0 30px rgba(255,106,61,0.5);
  transform: scale(1.05);
}

/* --- Footer Program Links Glow (more noticeable) --- */
.site-footer a {
  position: relative;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.site-footer a:hover {
  color: var(--ember, #FF6A3D);
  text-shadow: 0 0 8px rgba(255,106,61,0.9), 0 0 16px rgba(255,106,61,0.6);
}
/* ================================
   Ember Coal Pulse (footer + CTA)
   ================================ */

/* 1) Keyframes */
@keyframes emberTextPulse {
  0%   { text-shadow: 0 0 4px rgba(255,106,61,.35), 0 0 0 rgba(255,106,61,0); }
  50%  { text-shadow: 0 0 10px rgba(255,106,61,.95), 0 0 18px rgba(255,106,61,.55); }
  100% { text-shadow: 0 0 4px rgba(255,106,61,.35), 0 0 0 rgba(255,106,61,0); }
}
@keyframes emberGlowPulse {
  0%   { box-shadow: 0 0 0 rgba(255,106,61,0), 0 0 0 rgba(255,106,61,0); }
  50%  { box-shadow: 0 0 14px rgba(255,106,61,.85), 0 0 28px rgba(255,106,61,.45); }
  100% { box-shadow: 0 0 0 rgba(255,106,61,0), 0 0 0 rgba(255,106,61,0); }
}

/* 2) Footer program links — stronger, always-on pulse */
.site-footer .footer-grid ul li a{
  position:relative;
  transition: color .25s ease, text-shadow .25s ease;
  animation: emberTextPulse 2.2s ease-in-out infinite;
}
.site-footer .footer-grid ul li a:hover{
  color: var(--ember, #FF6A3D);
  animation-duration: 1.2s; /* speed up on hover */
  text-shadow:
    0 0 12px rgba(255,106,61,1),
    0 0 24px rgba(255,106,61,.65);
}

/* 3) Register button — same coal pulse, black text */
a.cta, a.glow-ember{
  background: transparent;              /* ghost by default */
  color: #111 !important;               /* black text */
  border: 2px solid var(--ember, #FF6A3D);
  border-radius: 10px;
  padding: .6rem 1.1rem;
  font-weight: 700;
  letter-spacing:.2px;
  box-shadow: none;
  transition: background .25s ease, color .25s ease, transform .15s ease;
}
a.cta:hover, a.glow-ember:hover{
  background: var(--cream, #FFF5E6);    /* warm paper behind the glow */
  color: #111 !important;               /* stays black per your request */
  transform: translateY(-1px);
  /* same dual pulse as footer, but only while hovered */
  animation: emberGlowPulse 1.4s ease-in-out infinite,
             emberTextPulse 1.4s ease-in-out infinite;
}

/* 4) Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .site-footer .footer-grid ul li a,
  a.cta, a.glow-ember{
    animation: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: none !important;
  }
}
/* --- Idle ember pulse for Register button --- */
a.cta, a.glow-ember {
  animation: emberGlowPulse 3s ease-in-out infinite,
             emberTextPulse 3s ease-in-out infinite;
}

a.cta:hover, a.glow-ember:hover {
  animation: emberGlowPulse 1.4s ease-in-out infinite,
             emberTextPulse 1.4s ease-in-out infinite;
}
/* ============================
   Register Button – Spark Effect
   ============================ */

a.cta, a.glow-ember {
  background: transparent;
  color: #111 !important; /* black text by default */
  border: 2px solid var(--ember, #FF6A3D);
  border-radius: 10px;
  padding: .6rem 1.1rem;
  font-weight: 700;
  letter-spacing: .2px;
  transition: all 0.3s ease;
  /* Subtle idle glow */
  box-shadow: 0 0 6px rgba(255,106,61,.25);
}

a.cta:hover, a.glow-ember:hover {
  background: var(--cream, #FFF5E6); /* warm paper background */
  color: #111 !important;           /* stays black */
  transform: translateY(-1px);
  /* Ignite on hover: glowing ember pulse */
  animation: emberGlowPulse 1.4s ease-in-out infinite,
             emberTextPulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(255,106,61,.85),
              0 0 28px rgba(255,106,61,.55);
}

/* Reuse the ember pulse animations */
@keyframes emberTextPulse {
  0%   { text-shadow: 0 0 4px rgba(255,106,61,.35); }
  50%  { text-shadow: 0 0 12px rgba(255,106,61,.95),
                   0 0 20px rgba(255,106,61,.55); }
  100% { text-shadow: 0 0 4px rgba(255,106,61,.35); }
}
@keyframes emberGlowPulse {
  0%   { box-shadow: 0 0 6px rgba(255,106,61,.3); }
  50%  { box-shadow: 0 0 16px rgba(255,106,61,.9),
                   0 0 32px rgba(255,106,61,.5); }
  100% { box-shadow: 0 0 6px rgba(255,106,61,.3); }
}