/* ============================================================
   The Maths Tailor — shared styles
   Boutique Oxbridge: navy + antique gold + cream, editorial serif
============================================================ */
:root {
  --navy: #0E1B2C;
  --gold: #C2A14D;
  --gold-soft: #D9BE70;
  --cream: #F6F1E7;
  --paper: #FBF8F1;
  --ink: #15212F;
}
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* ---- editorial serif accents ---- */
.serif-italic { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; }
.eyebrow { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; }

/* ---- pinstripe (tailor's pattern) texture ---- */
.pinstripe {
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 9px);
}
.pinstripe-ink {
  background-image: repeating-linear-gradient(90deg, rgba(14,27,44,0.04) 0px, rgba(14,27,44,0.04) 1px, transparent 1px, transparent 9px);
}

/* ---- fine grain overlay ---- */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- gold hairline divider ---- */
.rule-gold { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* ---- hero radial atmosphere ---- */
.hero-glow {
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(194,161,77,0.16) 0%, transparent 55%),
    radial-gradient(90% 80% at 12% 100%, rgba(110,36,51,0.18) 0%, transparent 60%),
    var(--navy);
}

/* ---- buttons ---- */
.btn-gold {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #1a1305; font-weight: 700; letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 10px 26px -10px rgba(194,161,77,0.6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 18px 36px -12px rgba(194,161,77,0.75); }
.btn-ghost { border: 1px solid rgba(246,241,231,0.28); color: var(--cream); transition: border-color .2s ease, background .2s ease; }
.btn-ghost:hover { border-color: var(--gold); background: rgba(194,161,77,0.08); }

/* ---- link underline sweep ---- */
.nav-link { position: relative; }
.nav-link::after {
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .3s ease;
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- nav: intermediate desktop state (short labels) ----
   Measured on main, header desktop nav (`hidden lg:flex`, so >= 1024px):
   the items fit on ONE line only from 1280px up (re-tuned 2026-09-13 after the
   Academic Tutoring dropdown + For Pros widened the row ; band was 1212). From
   1024 to 1279px the flex row squeezes them, so in that band the long labels are
   swapped for short ones. >= 1280px: nothing changes (the full labels fit).
   < 1024px: the nav is hidden and the burger drawer keeps the full labels.
   Real CSS, not Tailwind utilities: Tailwind is a Play CDN script here, so with
   JS off no utility class applies and .nav-short must stay hidden by default. */
.nav-short { display: none; }

/* ESAT joined the header (2026-10-04): one more item, so the full-label row no
   longer fits at gap-8 from 1280px (measured: links wrapped to 2 rows, header
   88px instead of 67). Links never wrap inside themselves at desktop widths,
   and the full-label row runs at 1.5rem. Measured one line, overflow 0, at
   1024 / 1100 / 1279 / 1280 / 1440 / 1920. */
@media (min-width: 1024px) {
  header nav .nav-link { white-space: nowrap; }
}
@media (min-width: 1280px) {
  header nav.hidden { gap: 1.5rem; }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  .nav-long { display: none; }
  .nav-short { display: inline; }
  /* Load-bearing at the bottom of the band: the short labels alone still let
     flexbox squeeze the links below their own text width (measured: 2 rows at
     1024 without this). nowrap makes the row non-shrinkable, so the nav keeps
     its one line. Verified overflow = 0 from 1024 to 1279 on all 13 header pages. */
  header nav .nav-link { white-space: nowrap; }
  /* The new nav (Academic Tutoring dropdown + For Pros) is wider than the old
     one, so tighten the row spacing inside the band to keep logo + nav + actions
     on a single line all the way down to 1024 (gap-8 -> 1.25rem). */
  header nav.hidden { gap: 0.875rem; }
  /* Owner 2026-07-31 : le sous-titre du logo (« ADMISSIONS MATHS · LONDON »)
     n'a jamais ete une decision copy. Il reste en plein ecran (>= 1280) et sur
     mobile (< 1024), mais disparait dans cette bande etroite : ses ~260px
     etaient le levier qui faisait replier Sign in / la pilule (residu
     1024-1118 du lot nav). Selecteur structurel : seul enfant .block du texte
     logo, identique sur les 12 pages, zero edition de HTML. */
}

/* Owner 2026-07-31 (2e passe) : le sous-titre disparait sur TOUT ecran raccourci,
   mobile compris, pas seulement la bande intermediaire. Visible uniquement en
   plein ecran (>= 1280). */
@media (max-width: 1279.98px) {
  header .font-semibold > .block { display: none; }
}

/* ---- engraved stat plaque ---- */
.plaque { border: 1px solid rgba(194,161,77,0.35); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }

/* ---- reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }

/* ---- card hover ---- */
.lift { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.lift:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -28px rgba(14,27,44,0.45); }

/* ---- FAQ ---- */
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s ease, opacity .35s ease; opacity: 0; }
.faq-item.open .faq-a { max-height: 420px; opacity: 1; }
.faq-item.open .faq-plus { transform: rotate(45deg); }

/* ---- monogram mark ---- */
.monogram { font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.02em; }

/* ---- sticky CTAs: mobile bar (#m-cta) + desktop pill (#d-cta) ---- */
/* One behaviour, driven in site.js: both appear after the hero and hide whenever a
   booking section is on screen. Styled in real CSS (not only Tailwind utilities) so
   they stay legible when the Tailwind Play CDN is inert with JS off. */
#m-cta {
  position: fixed; left: 0; right: 0; bottom: 0;  /* matches Tailwind fixed inset-x-0 bottom-0; also holds with JS/Tailwind off */
  display: flex; gap: 0.75rem;
  background: rgba(14,27,44,0.97);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 0.75rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); /* iPhone home bar */
  transform: translateY(120%); transition: transform .35s ease;
}
#m-cta.show { transform: translateY(0); }
@media (min-width:1024px){ #m-cta{ display:none !important; } }

/* Desktop floating pill, bottom-right. btn-gold supplies the gold (real CSS); the
   box below supplies position/shape so it survives with Tailwind off. */
#d-cta {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: none;                 /* mobile uses the #m-cta bar instead */
  align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none;
  transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
}
#d-cta.show { transform: none; opacity: 1; pointer-events: auto; }
#d-cta.show:hover { transform: translateY(-2px); }
@media (min-width:1024px){ #d-cta{ display: inline-flex; } }

/* Reduced motion: appear instantly, no slide. */
@media (prefers-reduced-motion: reduce) {
  #m-cta, #d-cta { transition: none; }
}

/* placeholder ribbon */
.ph { outline: 1px dashed rgba(194,161,77,0.5); }

/* ---- previewable cards (clickable affordance) ---- */
.previewable { cursor: pointer; text-align: left; width: 100%; display: block; }
.preview-tag {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--gold);
  transition: gap .2s ease;
}
.previewable:hover .preview-tag { gap: 11px; }
.preview-tag svg { height: 15px; width: 15px; }

/* ---- lightbox ---- */
#lightbox {
  position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(9,19,33,0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#lightbox.open { display: flex; }
#lightbox .lb-card {
  position: relative; width: 100%; max-width: 760px; background: var(--paper);
  border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px -20px rgba(0,0,0,.65);
  animation: lbpop .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes lbpop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
#lightbox .lb-media { background: #0b1420; line-height: 0; }
#lightbox .lb-media img, #lightbox .lb-media video { display: block; width: 100%; height: auto; }
#lightbox .lb-ph { aspect-ratio: 16/10; display: grid; place-items: center; text-align: center; color: rgba(246,241,231,.6); padding: 2rem; font-size: 14px; line-height: 0; }
#lightbox .lb-ph span { line-height: 1.5; }
#lightbox .lb-cap { padding: 16px 22px; font-size: 14.5px; }
#lightbox .lb-close {
  position: absolute; top: 12px; right: 14px; height: 38px; width: 38px; display: grid; place-items: center;
  border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; z-index: 2;
}
#lightbox .lb-close:hover { background: rgba(0,0,0,.75); }