/* ============================================================
   TELESFORO.ORG — shared shell & sections
   ============================================================ */

/* ————— HEADER ————— */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding-block:var(--space-4);
  transition:background var(--transition-interactive), backdrop-filter var(--transition-interactive), padding var(--transition-interactive), border-color var(--transition-interactive);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  padding-block:var(--space-3);
  border-bottom-color:var(--color-border);
}
.site-header.on-hero{
  color:#F7F3EA;
}
.site-header.on-hero .brand-mark path{fill:#F7F3EA}
.site-header.on-hero .brand-mark .brass{fill:var(--color-accent-bright)}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-6);
  max-width:var(--content-hero);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,3rem);
}
.brand{display:inline-flex;align-items:center;gap:.75rem}
.brand-mark{width:44px;height:44px;flex-shrink:0}
.brand-text{
  font-family:var(--font-display);
  font-size:.95rem;font-weight:500;line-height:1.15;letter-spacing:.01em;
}
.brand-text small{
  display:block;
  font-family:var(--font-body);
  font-size:.65rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--color-accent);
  margin-top:2px;
}
.site-header.on-hero .brand-text small{color:var(--color-accent-bright)}

.site-nav{display:flex;align-items:center;gap:var(--space-8)}
.nav-links{display:flex;gap:var(--space-8);list-style:none}
.nav-links a{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  position:relative;padding-block:.25rem;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--color-accent);
  transition:width var(--transition-interactive);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}
.nav-links a[aria-current="page"]{color:var(--color-accent)}

.nav-cta{display:flex;align-items:center;gap:var(--space-3)}

.mobile-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.mobile-toggle svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}

@media (max-width:900px){
  .nav-links, .nav-cta .btn-ghost{display:none}
  .mobile-toggle{display:inline-flex}
}

/* Mobile nav overlay */
.mobile-menu{
  position:fixed;inset:0;z-index:99;
  background:var(--color-bg);
  padding:6rem 2rem 2rem;
  transform:translateY(-100%);
  transition:transform 400ms cubic-bezier(.16,1,.3,1);
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:1.5rem}
.mobile-menu a{font-family:var(--font-display);font-size:2rem;font-weight:400}

/* ————— FOOTER ————— */
.site-footer{
  background:var(--color-primary);
  color:#EDE5CE;
  padding-block:var(--space-16) var(--space-8);
  position:relative;
}
[data-theme='dark'] .site-footer{background:#050E16}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--color-accent),transparent);
}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-12);
  max-width:var(--content-wide);margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,3rem);
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer-grid{grid-template-columns:1fr}}
.footer-brand{max-width:26rem}
.footer-brand .brand-mark path{fill:#EDE5CE}
.footer-brand .brand-mark .brass{fill:var(--color-accent-bright)}
.footer-mission{color:rgba(237,229,206,.72);font-size:.9rem;margin-top:1.25rem;line-height:1.65}
.footer-col h4{
  font-family:var(--font-body);
  font-size:.7rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--color-accent-bright);
  margin-bottom:1rem;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.footer-col a{
  font-size:.9rem;color:rgba(237,229,206,.78);
}
.footer-col a:hover{color:var(--color-accent-bright)}
.footer-bottom{
  margin-top:var(--space-16);
  max-width:var(--content-wide);margin-inline:auto;
  padding:var(--space-6) clamp(1.25rem,4vw,3rem) 0;
  border-top:1px solid rgba(237,229,206,.14);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);
  font-size:.78rem;color:rgba(237,229,206,.6);
}
.footer-bottom .legal{display:flex;gap:1.5rem}
.footer-bottom a:hover{color:var(--color-accent-bright)}

/* ————— UNIVERSAL SECTIONS ————— */

/* Editorial breakout quote */
.pullquote{
  padding-block:clamp(4rem,7vw,7rem);
  text-align:center;
  position:relative;
  background:var(--color-surface-offset);
}
.pullquote::before{
  content:"“";
  position:absolute;top:.5rem;left:50%;transform:translateX(-50%);
  font-family:var(--font-display);font-size:12rem;line-height:1;
  color:var(--color-accent);opacity:.14;
  pointer-events:none;
}
.pullquote blockquote{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3vw,2.5rem);
  font-weight:300;
  line-height:1.3;
  font-style:italic;
  max-width:36em;
  margin:0 auto;
  color:var(--color-text);
  position:relative;
}
.pullquote cite{
  display:block;
  margin-top:1.5rem;
  font-family:var(--font-body);font-style:normal;
  font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-accent);
  font-weight:500;
}

/* Stat strip — always dark navy bg + cream text, regardless of theme */
.stat-strip{
  background:#0B1E2E;
  color:#EDE5CE;
  padding-block:var(--space-12);
}
.stat-strip .stat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);
  max-width:var(--content-wide);margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,3rem);
}
@media (max-width:700px){.stat-strip .stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center;padding-inline:var(--space-4)}
.stat + .stat{border-left:1px solid rgba(237,229,206,.16)}
@media (max-width:700px){.stat + .stat{border-left:none}.stat:nth-child(3){border-top:1px solid rgba(237,229,206,.16);padding-top:2rem;margin-top:1rem}.stat:nth-child(4){border-top:1px solid rgba(237,229,206,.16);padding-top:2rem;margin-top:1rem}}
.stat-num{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,5vw,4rem);
  font-weight:300;
  line-height:1;
  color:var(--color-accent-bright);
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.02em;
}
.stat-label{
  margin-top:.5rem;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(237,229,206,.7);
}
.stat-sub{margin-top:.4rem;font-size:.85rem;font-style:italic;color:rgba(237,229,206,.65)}

/* CTA banner — always dark navy bg */
.cta-band{
  padding-block:clamp(4rem,7vw,7rem);
  background:linear-gradient(135deg, #0B1E2E 0%, #142D42 100%);
  color:#EDE5CE;
  text-align:center;
  position:relative;overflow:hidden;
}
.cta-band::before,.cta-band::after{
  content:"";position:absolute;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,var(--color-accent) 0%,transparent 60%);
  opacity:.10;pointer-events:none;
}
.cta-band::before{top:-300px;left:-200px}
.cta-band::after{bottom:-300px;right:-200px}
.cta-band .container{position:relative;z-index:1}
.cta-band h2{color:#EDE5CE;margin-bottom:1rem}
.cta-band p{color:rgba(237,229,206,.85);margin-inline:auto;margin-bottom:2rem}
.cta-band .btn-primary{background:var(--color-accent-bright);color:var(--color-primary)}
.cta-band .btn-primary:hover{background:#F0C864}

/* Section headers (reused across all pages) */
.section-header{text-align:center;margin-bottom:clamp(3rem,5vw,5rem)}
.section-header .eyebrow{margin-bottom:1rem}
.section-header h2{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.025em;
  max-width:20em;
  margin-inline:auto;
}
.section-header p{
  margin-top:1.25rem;
  margin-inline:auto;
  max-width:36em;
  color:var(--color-text-muted);
  font-size:var(--text-base);
}

/* Feature cards */
.feature-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:clamp(1.5rem,3vw,2.5rem);
  transition:all var(--transition-interactive);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.feature-card:hover{
  border-color:var(--color-accent);
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}
.feature-card .number{
  font-family:var(--font-display);
  font-size:2.5rem;font-weight:300;
  color:var(--color-accent);
  line-height:1;margin-bottom:1rem;
  font-variant-numeric:tabular-nums;
}
.feature-card h3{
  font-size:var(--text-lg);
  margin-bottom:.75rem;
}
.feature-card p{color:var(--color-text-muted);font-size:var(--text-sm)}

/* Skip link */
.skip-link{
  position:fixed;top:-100px;left:1rem;z-index:1000;
  padding:.5rem 1rem;background:var(--color-accent);color:var(--color-primary);
  border-radius:var(--radius-sm);font-weight:600;
  transition:top .2s ease;
}
.skip-link:focus{top:1rem}

/* ————— DONOR WALL MARQUEE (shared, used on home + sponsor) ————— */
.donor-wall-section{
  padding-block:6rem 5rem;
  background:var(--color-surface-offset);
  overflow:hidden;
}
.donor-wall{
  width:100%;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);
}
.donor-track{
  display:inline-flex;align-items:center;gap:2.5rem;
  padding-block:1.5rem;
  animation:donorScroll 55s linear infinite;
  white-space:nowrap;
}
@keyframes donorScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.donor-track:hover{animation-play-state:paused}
.donor-name{
  font-family:var(--font-display);
  font-size:clamp(1.25rem,2.2vw,1.8rem);
  font-weight:300;
  color:var(--color-text);
  letter-spacing:-.01em;
}
.donor-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--color-accent);flex-shrink:0;
}

/* Loading noise texture overlay (subtle) */
.noise-overlay{
  position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}