/* ============================================================
   Mentora Learning Centre — SHARED styles (tokens, nav, sections, footer)
   ============================================================ */
:root{
  --paper:#FBF6EC;      /* cream */
  --kraft:#F3E9D6;      /* kraft */
  --ink:#23314D;        /* navy ink */
  --tomato:#E4572E;     /* decorative tomato */
  --tomato-deep:#C8431F;/* button tomato (AA on white) */
  --yellow:#FFD23F;     /* highlighter */
  --card:#FFFDF6;       /* warm white card surface: never pure #fff */
  --sage:#7C9A6B;       /* sage green */
  --ink-08:rgba(35,49,77,.08);
  --ink-12:rgba(35,49,77,.12);
  --ink-20:rgba(35,49,77,.2);
  --shadow:0 10px 24px rgba(35,49,77,.14);
  --shadow-sm:0 4px 12px rgba(35,49,77,.12);
  --maxw:1120px;
}

*,*::before,*::after{box-sizing:border-box}

/* overflow-x clip lives ONLY on body — never on html (keeps sticky working) */
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:clip; /* clip (not hidden) => no scroll container, keeps position:sticky working */
  background-color:var(--paper);
  background-image:radial-gradient(var(--ink-08) 1.1px, transparent 1.2px);
  background-size:22px 22px;
  color:var(--ink);
  font-family:"Karla", ui-sans-serif, sans-serif; /* Karla is the UI/body face */
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:"Caveat", cursive; font-weight:700; line-height:1.02; margin:0}
p{margin:0 0 1rem}
a{color:inherit}
img,svg{max-width:100%}
ul{margin:0}

/* -------- accessibility helpers -------- */
.skip{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:10px;
  font-weight:700; transition:top .18s ease; text-decoration:none;
}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--tomato-deep); outline-offset:3px; border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,5vw,36px)}

/* -------- buttons -------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5ch;
  min-height:48px; padding:12px 22px; border-radius:14px;
  font-family:"Karla",sans-serif; font-weight:700; font-size:1.02rem; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; border:2.5px solid var(--ink);
  background:var(--paper); color:var(--ink);
  box-shadow:3px 3px 0 var(--ink); transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
.btn--primary{background:var(--yellow); color:var(--ink)}         /* navy on yellow ~9:1 */
.btn--tomato{background:var(--tomato-deep); color:#fff}           /* white on deep tomato ~4.9:1 */
.btn--ghost{background:transparent}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(251,246,236,.92);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:2.5px solid var(--ink);
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; padding:10px clamp(16px,5vw,36px);
  display:flex; align-items:center; gap:14px;
}
/* Full-bleed was tried and reverted: it threw the menu and CTA to the far right. The container
   stays, and only the wordmark shifts left. The flex spacer that follows absorbs the negative
   margin, so nothing else in the nav moves. */
.wordmark{margin-left:calc(-1 * clamp(6px, 1.4vw, 18px))}
.wordmark{
  font-family:"Caveat",cursive; font-weight:700; font-size:1.9rem; line-height:1;
  text-decoration:none; color:var(--ink); white-space:nowrap; display:flex; align-items:center; gap:8px;
}
/* Logo option B (2026-09-28), the same file the printed flyer carries. */
.wordmark img{display:block; height:56px; width:auto}
.nav__spacer{flex:1 1 auto}
.nav__menu{display:flex; align-items:center; gap:6px; list-style:none; padding:0; margin:0}
.nav__menu a{
  text-decoration:none; font-weight:700; font-size:1rem; padding:10px 12px; border-radius:10px;
  display:inline-block; min-height:44px; line-height:24px;
}
.nav__menu a:hover{background:var(--kraft)}
.nav__cta{margin-left:4px}
.nav__toggle{
  display:none; width:48px; height:48px; flex:0 0 auto; align-items:center; justify-content:center;
  background:var(--paper); border:2.5px solid var(--ink); border-radius:12px; cursor:pointer;
  box-shadow:2px 2px 0 var(--ink);
}
.nav__toggle svg{width:24px;height:24px}

@media (max-width:480px){
  /* keep wordmark + CTA + toggle on one uncramped line on small phones */
  .nav__inner{gap:10px}
  .nav__cta{padding:10px 12px; font-size:.9rem; line-height:1.2; text-align:center; max-width:142px}
  .wordmark img{height:38px}
}
/* 980, not 860: with the 56px logo and the full CTA label the desktop row wraps below ~960px. */
@media (max-width:980px){
  .nav__toggle{display:inline-flex}
  .nav__menu{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--paper); border-bottom:2.5px solid var(--ink);
    padding:10px clamp(16px,5vw,36px) 16px; box-shadow:var(--shadow);
    display:none;
  }
  .nav__menu.open{display:flex}
  .nav__menu a{padding:14px 12px}
  .wordmark img{height:46px}
}

/* ============================================================
   Section scaffolding
   ============================================================ */
section{position:relative}
.section-pad{padding:clamp(48px,8vw,96px) 0}
.kraft-bg{
  background-color:var(--kraft);
  background-image:repeating-linear-gradient(to bottom, transparent 0 30px, rgba(35,49,77,.10) 30px 31px);
  border-top:2.5px dashed var(--ink); border-bottom:2.5px dashed var(--ink);
}
.section-head{max-width:34ch; margin-bottom:clamp(24px,4vw,44px)}
.section-head .kicker{
  font-weight:700; font-size:.875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sage);
  display:block; margin-bottom:6px;
}
.section-head h2{font-size:clamp(2.4rem,6vw,3.6rem)}
.section-head p{font-size:1.08rem; margin-top:.5rem}
.underline-svg{display:block; width:220px; max-width:60%; height:16px; margin-top:2px; color:var(--tomato)}
.section-head--center{margin-inline:auto; text-align:center; max-width:40ch}
.section-head--center .underline-svg{margin-left:auto; margin-right:auto}

/* weighted scroll reveals — elements rise in as they enter the viewport */
.reveal{opacity:0; transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.25,1,.5,1), transform .7s cubic-bezier(.25,1,.5,1)}
.reveal.on{opacity:1; transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none}}

/* draw-in doodles */
.draw{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.2s ease}
[data-draw].drawn .draw{stroke-dashoffset:0}
.draw.d2{transition-delay:.2s}
.draw.d3{transition-delay:.4s}
.draw.d4{transition-delay:.6s}

/* ============================================================
   PROGRAMMES — primary stays warm, secondary speaks calmly
   ============================================================ */
.prog{
  border:2.5px solid var(--ink); border-radius:18px; box-shadow:var(--shadow-sm);
  padding:clamp(22px,3.5vw,34px); margin-bottom:clamp(20px,3vw,30px);
}
.prog--primary,.prog--secondary{background:var(--card)}
.prog__head{display:grid; gap:8px; margin-bottom:20px}
.prog__badge{
  justify-self:start; font-family:"Karla",sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; padding:5px 13px; border-radius:999px;
  border:2px solid var(--ink);
}
.prog--primary .prog__badge{background:var(--yellow); color:var(--ink)}
.prog--secondary .prog__badge{background:var(--ink); color:var(--paper)}
/* One title style for every stage, as the flyer sets them (2026-09-28). */
.prog__title{font-family:"Karla",sans-serif; font-weight:700;
  font-size:clamp(1.5rem,3vw,2rem); letter-spacing:-.015em; line-height:1.15}
.prog__blurb{margin:0; font-size:1.02rem; max-width:62ch}

/* teaser: two cards side by side, detail lives on fees.html */
.progteaser{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,28px); align-items:start}
@media (max-width:760px){.progteaser{grid-template-columns:1fr}}

.progteaser .prog{margin-bottom:0; height:100%}
.prog__subs{list-style:none; padding:0; margin:0 0 16px; font-family:"Karla",sans-serif}
.prog__subs li{display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:9px 0; border-bottom:1.5px solid var(--ink-12); font-weight:700; font-size:1.02rem}
.prog__subs li:last-child{border-bottom:0}
/* Programme cards set subjects on one line as tags, as the flyer does. Tags, not "|" dividers: a
   divider wraps to the start of the next line on a phone ("| Chemistry"). */
.progteaser .prog__subs{display:flex; flex-wrap:wrap; gap:8px}
.progteaser .prog__subs li{padding:5px 12px; border:1.5px solid var(--ink-20); border-radius:10px;
  background:var(--paper); font-size:1rem; line-height:1.3}
.progteaser .prog__subs li:last-child{border-bottom:1.5px solid var(--ink-20)}
/* The level inside a subject tag (Maths, Science: Sec 1-2 only). A small solid tag at full
   colour, not faded grey text: at .7 opacity and regular weight it read as washed out. */
.progteaser .prog__subs li{display:inline-flex; align-items:center; gap:7px}
.progteaser .prog__subs .prog__level{font-weight:700; font-size:.78rem; letter-spacing:.02em;
  line-height:1; padding:4px 7px; border-radius:6px; background:var(--ink-08); color:var(--ink); opacity:1}
.prog__subs li span{font-weight:400; font-size:.9rem; opacity:.7; white-space:nowrap}
.progteaser__cta{display:flex; flex-direction:column; align-items:center; gap:10px;
  margin:clamp(24px,4vw,36px) 0 0; text-align:center}
.progteaser__note{font-size:.94rem; opacity:.75}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink); color:var(--paper); border-top:3px solid var(--tomato); padding:clamp(40px,6vw,72px) 0 32px}
.footer a{color:var(--paper); text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:clamp(22px,4vw,44px)}
/* minmax(0,1fr), not 1fr: a bare 1fr column refuses to shrink below its longest word, and the
   email address alone pushed the footer 29px past a 390px phone. */
@media (max-width:760px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}
.footer h4{font-family:"Caveat",cursive; font-weight:700; font-size:1.7rem; margin:0 0 10px; color:var(--yellow)}
.footer ul{list-style:none; padding:0; margin:0}
.footer li{padding:5px 0; font-size:.98rem; overflow-wrap:anywhere}
.footer .wordmark{color:var(--paper)}
.footer .wordmark{margin-left:0}
.footer .wordmark img{height:56px}
.footer__tagline{margin:14px 0 0; max-width:30ch; opacity:.9}
.footer__hours{margin:0; opacity:.9}
.socials{display:flex; gap:12px; margin-top:10px}
.socials a{width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--paper);border-radius:12px}
.socials a:hover{background:rgba(251,246,236,.14)}
.socials svg{width:22px;height:22px}
.footer__bottom{max-width:var(--maxw); margin:36px auto 0; padding:18px clamp(16px,5vw,36px) 0; border-top:1px solid rgba(251,246,236,.25); font-size:.9rem; opacity:.85; display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between}

/* ============================================================
   PROTOTYPE ONLY — placeholder highlighter. Delete before launch.
   ============================================================ */
.phtoggle{
  position:fixed; right:14px; bottom:14px; z-index:300;
  font-family:"Karla",sans-serif; font-weight:700; font-size:.8rem;
  padding:10px 15px; border-radius:12px; cursor:pointer;
  border:2.5px solid var(--ink); background:var(--paper); color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}
.phtoggle[aria-pressed="true"]{background:#E6007A; color:#fff; border-color:#7A0042; box-shadow:3px 3px 0 #7A0042}
body.ph-on [data-ph]{
  outline:2px dashed #E6007A; outline-offset:3px; border-radius:4px;
  background:rgba(230,0,122,.10); position:relative;
}
body.ph-on [data-ph]::after{
  content:attr(data-ph); position:absolute; top:-10px; left:0; z-index:60;
  font-family:"Karla",sans-serif; font-weight:700; font-size:9px; line-height:1.4;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; pointer-events:none;
  background:#E6007A; color:#fff; padding:1px 5px; border-radius:4px;
}
@media print{.phtoggle{display:none}}

/* ============================================================
   REDUCED MOTION (shared)
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .draw{stroke-dashoffset:0 !important}
}