/* ==========================================================================
   CLEBS — Children Life English Boarding School
   Design tokens: deep navy ground, gold "bright light" accent (from the
   school's own motto "Education is Bright Light of Life"), crimson pulled
   from the crest. Display serif for gravitas, geometric sans for clarity,
   mono for the results data that this school leads with.
   ========================================================================== */

:root {
  --bg:            #0A0F1C;
  --bg-elevated:   #0F1626;
  --surface:       #131C31;
  --surface-2:     #182238;
  --border:        rgba(243, 241, 234, 0.08);
  --border-strong: rgba(243, 241, 234, 0.16);

  --text:          #F3F1EA;
  --text-muted:    #9BA6BC;
  --text-dim:      #6B7690;

  --gold:          #E9A93B;
  --gold-soft:     #F4CE84;
  --gold-glow:     rgba(233, 169, 59, 0.38);
  --crimson:       #E4384F;
  --crimson-glow:  rgba(228, 56, 79, 0.30);
  --royal:         #3F5BFF;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: light) {
  :root { color-scheme: dark; }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--gold);
  color: #14100a;
}

/* Focus visibility — accessibility floor */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */

.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }

.text-gradient-gold {
  background: linear-gradient(120deg, var(--gold-soft) 0%, var(--gold) 45%, #b97a1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   Background atmosphere — the "bright light" signature
   ========================================================================== */

.bg-grid {
  background-image:
    linear-gradient(to right, rgba(243,241,234,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(243,241,234,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.hero-glow {
  width: 900px;
  height: 900px;
  top: -420px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--gold-glow) 0%, rgba(233,169,59,0.08) 45%, transparent 70%);
  animation: pulse-glow 8s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.06); }
}

.crimson-glow {
  width: 520px;
  height: 520px;
  filter: blur(110px);
  background: radial-gradient(circle, var(--crimson-glow) 0%, transparent 70%);
}

/* Mobile GPUs choke on large, continuously-animated blur() layers — the
   scale animation forces the blur to re-rasterize every frame at 900px,
   which on lower-end phones corrupts the compositor during scroll and
   paints a solid/blank rectangle over the section instead of the glow.
   Shrink and de-animate on small viewports rather than risk that. */
@media (max-width: 768px) {
  .glow-orb { animation: none !important; }
  .hero-glow {
    width: 480px;
    height: 480px;
    top: -220px;
    opacity: 0.85;
  }
  .crimson-glow {
    width: 280px;
    height: 280px;
    filter: blur(70px);
  }
}

/* ==========================================================================
   Signature emblem — a redrawn line-art of the crest, used as recurring motif
   ========================================================================== */

.emblem-mark {
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.4;
  opacity: 0.9;
}

.emblem-rays {
  animation: rotate-slow 60s linear infinite;
  transform-origin: center;
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ==========================================================================
   Navigation
   ========================================================================== */

#site-nav {
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}

#site-nav.nav-scrolled {
  background-color: rgba(10, 15, 28, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--border);
}

.nav-link {
  position: relative;
  color: var(--text-muted);
  transition: color 0.25s var(--ease);
}
.nav-link:hover { color: var(--text); }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}
.nav-link:hover::after { width: 100%; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 60%, #c9861f);
  color: #171208;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 8px 24px -8px var(--gold-glow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), filter 0.35s var(--ease);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 14px 32px -8px var(--gold-glow);
  filter: brightness(1.05);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: rgba(243,241,234,0.04);
  border: 1px solid var(--border-strong);
  color: var(--text);
  backdrop-filter: blur(8px);
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn-secondary:hover {
  transform: translateY(-2px);
  background: rgba(243,241,234,0.08);
  border-color: var(--gold);
}

/* ==========================================================================
   Cards / glass surfaces
   ========================================================================== */

.card {
  background: linear-gradient(180deg, var(--surface), var(--bg-elevated));
  border: 1px solid var(--border);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 20px 50px -24px rgba(0,0,0,0.6);
}

.card-glass {
  background: rgba(19, 28, 49, 0.55);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.stat-number {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.4s; }

/* ==========================================================================
   Showcase tiles (Life at CLEBS)
   ========================================================================== */

.showcase-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.showcase-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tile-gradient);
  opacity: 0.9;
  transition: transform 0.6s var(--ease);
  z-index: -1;
}
.showcase-tile:hover::before {
  transform: scale(1.08);
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

details.faq-item {
  border-bottom: 1px solid var(--border);
}
details.faq-item summary {
  cursor: pointer;
  list-style: none;
}
details.faq-item summary::-webkit-details-marker { display: none; }

.faq-icon {
  transition: transform 0.35s var(--ease);
}
details[open] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
details[open] .faq-answer {
  grid-template-rows: 1fr;
}
.faq-answer-inner {
  overflow: hidden;
}

/* ==========================================================================
   Marquee (results ticker)
   ========================================================================== */

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   Misc
   ========================================================================== */

.divider-emblem {
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border-strong), transparent);
}

.badge {
  border: 1px solid var(--border-strong);
  background: rgba(243,241,234,0.03);
}

/* position: absolute takes this out of #site-nav's normal document flow,
   so the panel can never inflate the fixed header's box height while
   "closed" — opacity/visibility alone hide it visually but still reserve
   its full layout height, which was blanking out content underneath. */
.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.mobile-menu[data-state="closed"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.mobile-menu[data-state="open"] {
  opacity: 1;
  visibility: visible;
}

/* Hairline rule used as structural device between numbered sections */
.hr-hairline {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-strong), transparent);
}

img { max-width: 100%; display: block; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: #14100a;
  padding: 0.75rem 1.25rem;
  z-index: 100;
  border-radius: 0 0 8px 0;
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
}