/* ── GLOBAL FIXES ── injected on all pages ── */

/* ─── FOCUS RINGS ─── */
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(0,48,135,0.4);
  outline-offset: 2px;
}
.buy-btn:focus-visible, .btn-gold:focus-visible, .lt-plan-btn:focus-visible {
  outline: 3px solid #D4A820;
  outline-offset: 3px;
}

/* ─── REVIEWS GRID — mobile ─── */
@media (max-width: 900px) {
  .testi-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.875rem !important;
  }
  .testi-card {
    padding: 1rem !important;
    transform: none !important;
  }
  .testi-card:nth-child(even) { transform: none !important; }
  .testi-text { font-size: 0.78rem !important; }
}
@media (max-width: 480px) {
  .testi-grid { grid-template-columns: 1fr !important; }
}

/* ─── MOBILE HEADER — hide Create Account, keep Sign In only ─── */
@media (max-width: 900px) {
  .nav-create-account { display: none !important; }
  .nav-sign-in {
    padding: 0.5rem 1rem !important;
    font-size: 0.88rem !important;
  }
}

/* ─── WHATSAPP FAB — mobile ─── */
@media (max-width: 900px) {
  .wa-fab {
    bottom: 5.5rem !important;   /* above sticky CTA bar */
    right: 1rem !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
  }
  .wa-fab-label { display: none !important; }
}

/* ─── COOKIE BAR — mobile ─── */
@media (max-width: 600px) {
  #jtl-cookie-bar {
    padding: 0.75rem 1rem !important;
    gap: 0.625rem !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #jtl-cookie-bar p { font-size: 0.75rem !important; min-width: unset !important; }
  .jtl-cookie-btns { justify-content: flex-end !important; }
}

/* ─── ABOUT — story photo mobile ─── */
@media (max-width: 768px) {
  .story-photo-frame img {
    height: 360px !important;
    object-position: center top !important;
  }
}

/* ─── ABOUT — timeline mobile ─── */
@media (max-width: 640px) {
  .timeline-center-line { display: none !important; }
  .timeline-left-card { padding-right: 0 !important; text-align: left !important; }
  .timeline-right-card { padding-left: 0 !important; }
  .timeline-dot { display: none !important; }
}

/* ─── PREREGISTERED — lesson breakdown grid mobile ─── */
@media (max-width: 480px) {
  .lesson-breakdown-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
}

/* ─── SELF-PACED — Most Popular badge mobile ─── */
@media (max-width: 480px) {
  #jtl-most-popular-badge {
    font-size: 0.55rem !important;
    padding: 0.22rem 0.65rem !important;
    white-space: nowrap !important;
  }
}

/* ─── STICKY MOBILE BOOKING CTA ─── */
#jtl-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 190;
  background: linear-gradient(135deg, #CF142B 0%, #a80f22 100%);
  padding: 0.75rem 1.25rem;
  text-align: center;
  box-shadow: 0 -4px 20px rgba(207,20,43,0.35);
}
#jtl-mobile-cta a {
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  display: block;
}
@media (max-width: 900px) {
  #jtl-mobile-cta { display: block; }
  /* add padding to body so content isn't hidden behind the sticky bar */
  body { padding-bottom: 56px; }
}
/* hide sticky CTA when user is already on the contact form */
body.on-contact-form #jtl-mobile-cta { display: none !important; }

/* ─── CONTRAST FIX — gold eyebrow labels on white/light backgrounds ─── */
/* #D4A820 on #fff = ~2.8:1 (fail). #8a6a00 on #fff = ~4.7:1 (pass AA) */
.section-eyebrow,
.cert-issuer,
.qual-col-label {
  color: #7a5f00 !important;
}
/* On dark backgrounds the original gold is fine — restore it */
[style*="background:#0a1628"] .section-eyebrow,
[style*="background:#003087"] .section-eyebrow,
[style*="background:#00205a"] .section-eyebrow,
[style*="background:var(--navy"] .section-eyebrow,
.booking-cta .section-eyebrow,
.parents-section .section-eyebrow {
  color: var(--gold-lt, #ECC84A) !important;
}

/* ─── LEGAL FOOTER LINE ─── */
.jtl-legal-footer {
  max-width: 1100px;
  margin: 1rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.22);
  line-height: 1.6;
}

/* ─── BACK TO TOP ─── */
#jtl-back-top {
  position: fixed;
  bottom: 5rem;
  left: 1.25rem;
  z-index: 180;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(0,48,135,0.85);
  border: 1.5px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 4px 16px rgba(0,48,135,0.3);
  backdrop-filter: blur(4px);
}
#jtl-back-top.visible { opacity: 1; pointer-events: auto; }
#jtl-back-top:hover { transform: translateY(-3px); background: rgba(0,48,135,1); }
@media (max-width: 900px) {
  #jtl-back-top { bottom: 4.5rem; left: 1rem; width: 36px; height: 36px; font-size: 0.95rem; }
}

/* ─── CAMBRIDGE — mobile collapsibles ─── */
@media (max-width: 768px) {
  .cam-level-row { display: none; }
  .cam-level-row.visible { display: table-row; }
  .cam-collapse-btn {
    display: flex; width: 100%;
    background: rgba(0,48,135,0.06);
    border: 1.5px solid rgba(0,48,135,0.12);
    border-radius: 10px; padding: 0.75rem 1rem;
    font-weight: 700; font-size: 0.88rem; color: #003087;
    cursor: pointer; align-items: center; justify-content: space-between;
    margin-bottom: 0.5rem;
  }
}
@media (min-width: 769px) {
  .cam-collapse-btn { display: none !important; }
  .cam-level-row { display: table-row !important; }
}

/* ─── MOBILE RESPONSIVE FIXES ─── */

/* 3-column pricing grids → single column on mobile */
@media (max-width: 640px) {
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    max-width: 480px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* kids.html — parents stats cards: 2-col → 1-col */
@media (max-width: 600px) {
  .parents-cards {
    grid-template-columns: 1fr !important;
  }
}

/* schools.html — group card stack: 2-col → 1-col */
@media (max-width: 600px) {
  .group-card-stack {
    grid-template-columns: 1fr !important;
  }
}

/* schools.html — footer inline grid: 3-col → 1-col */
@media (max-width: 768px) {
  .jtl-footer-grid-3col {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* about.html — research section inline grids */
@media (max-width: 768px) {
  .about-research-layout {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .about-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  .about-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* english.html — format chooser popup: 2-col → 1-col */
@media (max-width: 640px) {
  .format-chooser-grid {
    grid-template-columns: 1fr !important;
  }
  .format-chooser-grid > a {
    height: 200px !important;
  }
}

/* course-tab-bar — scrollable on small screens */
@media (max-width: 640px) {
  .course-tab-bar {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 1rem !important;
  }
  .course-tab-bar::-webkit-scrollbar { display: none; }
}

/* Inline hero padding — reduce on small screens */
@media (max-width: 480px) {
  .hero-inner {
    padding-top: calc(80px + 2rem) !important;
    padding-bottom: 2.5rem !important;
  }
}

/* ─── FOOTER — enhanced ─── */
.footer-social-row {
  display: flex; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap;
}
.footer-social-link {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
  text-decoration: none; font-size: 0.85rem;
  transition: background 0.15s, color 0.15s;
}
.footer-social-link:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* ─── REDUCED MOTION — respect user preference (WCAG 2.2.2 / 2.3.3) ─── */
/* Neutralises the rocket, hero slideshows, trust ticker and pulse loops   */
/* for visitors who set "reduce motion" in their OS/browser.               */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Static utilities (replace the removed Tailwind Play CDN) ─── */
* { box-sizing: border-box; }
.bg-white { background-color: #ffffff; }

/* ════════════════════════════════════════════════════════════════
   POLISH LAYER — site-wide aesthetic refinements (additive, safe).
   Brand: navy #003087 · gold #D4A820 · red #CF142B.
   ════════════════════════════════════════════════════════════════ */

/* Anchor links land below the fixed header instead of behind it
   (fixes in-page jumps like #courses-en-sec / #contact-form / #pricing). */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}
@media (max-width: 900px) {
  html { scroll-padding-top: 84px; }
}

/* Branded text selection — a small premium touch. */
::selection   { background: #D4A820; color: #00205a; }
::-moz-selection { background: #D4A820; color: #00205a; }

/* Hero subtitle readability — stronger text-shadow so white copy stays
   legible over bright/busy hero photos (additive, helps pages without a scrim). */
.hero-sub {
  text-shadow: 0 1px 14px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.5) !important;
}

/* Cookie bar → floating rounded card on desktop/tablet (was full-width slab).
   Mobile (<=600px) keeps its own stacked layout defined above.
   Purely visual: position/shape/shadow only, no behaviour change. */
@media (min-width: 601px) {
  #jtl-cookie-bar {
    left: 1.25rem !important;
    right: 1.25rem !important;
    bottom: 1.25rem !important;
    max-width: 780px;
    margin: 0 auto !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 44px rgba(0,0,0,0.45) !important;
  }
}