/* ==========================================================================
   JHS SHARED CHROME — nav dropdown + inner-page breadcrumb header
   --------------------------------------------------------------------------
   Loaded on EVERY page, after that page's own stylesheet, so the header and
   the menu are literally the same component everywhere:

     • index.html / careers.html      — nav.top   > .nav-links   (style.css)
     • Preschool / middle_school      — nav.nav   > .nav__links  (inline)
     • the dedicated pages            — nav.nav   > .nav__links  (jhs-page.css)

   Both menu shells are supported, so the markup inside them is identical.
   Everything here uses var(--x, fallback) because style.css and jhs-page.css
   do not share a token set.
   ========================================================================== */

/* ========================= PROGRAMMES DROPDOWN ========================= */
.jhs-drop{position:relative;display:inline-flex}

.jhs-drop__btn{
  display:inline-flex;align-items:center;gap:.4rem;
  font:inherit;color:inherit;background:0;border:0;padding:0;margin:0;
  cursor:pointer;white-space:nowrap;line-height:inherit;
}
.jhs-drop__btn i{font-size:.62em;transition:transform .25s}
.jhs-drop.open .jhs-drop__btn i{transform:rotate(180deg)}
/* the two shells colour their links differently; the trigger follows suit */
.nav-links .jhs-drop__btn{color:#0c1330}
.nav-links .jhs-drop:hover .jhs-drop__btn,.nav-links .jhs-drop.open .jhs-drop__btn{color:#f7b500}
.nav__links .jhs-drop__btn{color:#fff;opacity:.85}
.nav.solid .nav__links .jhs-drop__btn,
.nav.open .nav__links .jhs-drop__btn,
.nav[data-solid="always"] .nav__links .jhs-drop__btn{color:var(--ink,#16181d);opacity:1}
.nav__links .jhs-drop:hover .jhs-drop__btn,
.nav__links .jhs-drop.open .jhs-drop__btn{opacity:1;color:var(--stage,#00b140)}

.jhs-drop__menu{
  position:absolute;inset-block-start:calc(100% + .85rem);inset-inline-start:-1rem;
  min-width:255px;z-index:90;
  background:#fff;border:1px solid rgba(22,24,29,.12);border-radius:16px;padding:.5rem;
  box-shadow:0 26px 60px -28px rgba(12,19,48,.55);
  display:grid;gap:.15rem;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s,transform .22s,visibility .22s;
}
.jhs-drop.open .jhs-drop__menu{opacity:1;visibility:visible;transform:none}

/* both shells restyle bare <a>; match their specificity and win on order */
.nav-links .jhs-drop__menu a,
.nav__links .jhs-drop__menu a{
  display:grid;gap:.1rem;padding:.7rem .85rem;margin:0;border:0;border-radius:11px;
  color:#16181d;opacity:1;text-decoration:none;font-size:.92rem;
  transition:background .2s;
}
.nav-links .jhs-drop__menu a:hover,
.nav__links .jhs-drop__menu a:hover{background:#f2f5f9;color:#16181d;padding-left:.85rem}
.jhs-drop__menu b{font-size:.94rem;font-weight:800;color:#001C54;line-height:1.25}
.jhs-drop__menu small{font-size:.75rem;font-weight:600;color:#5a6480;line-height:1.35}
.jhs-drop__menu a[aria-current="page"] b{color:#f7b500}

/* — collapsed menu: the dropdown becomes an indented sub-list —
   Every nav on the site collapses at 1080px, so one breakpoint covers all
   three shells. If that changes in one place it must change in all of them. */
@media (max-width:1080px){
  .jhs-drop{display:block;width:100%}
  .jhs-drop__btn{
    width:100%;justify-content:space-between;
    padding:13px 2px;font-size:15px;border-top:1px solid #e6ebf5;
  }
  .nav__links .jhs-drop__btn{padding:.9rem .2rem;font-size:.98rem;border-top:0;border-bottom:1px solid rgba(22,24,29,.12)}
  .jhs-drop__menu{
    position:static;min-width:0;z-index:auto;
    background:transparent;border:0;border-radius:0;box-shadow:none;
    padding:0 0 .5rem .9rem;
    opacity:1;visibility:visible;transform:none;display:none;
  }
  .jhs-drop.open .jhs-drop__menu{display:grid}
  .nav-links .jhs-drop__menu a,
  .nav__links .jhs-drop__menu a{padding:.6rem .7rem;border:0}
}

/* ========================= INNER-PAGE HEADER =========================
   The landing pages (index, Preschool, middle_school) keep their full-bleed
   heroes. Every other page opens on this instead, so a visitor can tell at a
   glance that they have arrived somewhere new rather than scrolled sideways.

   It deliberately does NOT fade out to white: a gradient ending in #fff makes
   the header and the first white section read as one block, and nobody can
   tell where the header stops. Solid tint + a hard accent rule at the foot. */
.pagehead{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(2rem,4.5vw,3.2rem) clamp(2.2rem,5vw,3.4rem);
  /* cool neutral, deliberately NOT the mint used by tinted content sections —
     the header should read as page furniture, not as another band of content */
  background:#edf1f7;
  border-bottom:1px solid rgba(0,28,84,.12);
}
/* texture + a soft brand shape, so the band has something in it */
.pagehead::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(circle at 62% 38%,rgba(0,177,64,.20),transparent 62%),
    radial-gradient(rgba(0,28,84,.11) 1.1px,transparent 1.5px);
  background-repeat:no-repeat,repeat;
  background-position:right -12% top -55%,0 0;
  background-size:min(52vw,620px) min(52vw,620px),20px 20px;
}
/* the hard stop — this is the line that answers "where does the header end?" */
.pagehead::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:0;height:3px;
  background:linear-gradient(90deg,#00b140 0 clamp(120px,18vw,240px),rgba(0,28,84,.14) clamp(300px,42vw,560px));
}
.pagehead > .shell,.pagehead > .wrap{position:relative}
.pagehead__in{
  display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);
  gap:clamp(1.4rem,4vw,3rem);align-items:center;
}
@media (max-width:900px){.pagehead__in{grid-template-columns:1fr}}
.pagehead h1{
  margin:0;color:#001C54;
  font-family:"Plus Jakarta Sans","Google Sans","DM Sans",Arial,sans-serif;
  font-size:clamp(1.85rem,1.2rem + 2.2vw,2.9rem);line-height:1.08;letter-spacing:-.026em;font-weight:800;
}
.pagehead__sub{
  margin:.75rem 0 0;max-width:56ch;
  font-family:"Google Sans","Google Sans Text","Product Sans","DM Sans",Arial,sans-serif;
  color:#4a4f5a;font-size:clamp(1rem,.96rem + .25vw,1.12rem);line-height:1.65;
}

/* — the at-a-glance panel that keeps the right-hand side from being a void — */
.pagehead__meta{
  display:grid;gap:0;align-self:center;
  background:rgba(255,255,255,.82);border:1px solid rgba(0,28,84,.11);
  border-radius:18px;padding:.35rem clamp(1rem,2.2vw,1.4rem);
  box-shadow:0 18px 40px -30px rgba(0,28,84,.5);backdrop-filter:blur(6px);
}
.pgm{display:flex;align-items:baseline;gap:1rem;padding:.85rem .1rem}
.pgm + .pgm{border-top:1px solid rgba(0,28,84,.09)}
.pgm b{
  flex:none;min-width:3.6ch;
  font-family:"Plus Jakarta Sans","Google Sans","DM Sans",Arial,sans-serif;
  font-size:clamp(1.25rem,1rem + .8vw,1.6rem);font-weight:800;line-height:1.1;
  color:#00a63c;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.pgm span{
  font-family:"Google Sans","Google Sans Text","Product Sans","DM Sans",Arial,sans-serif;
  font-size:.86rem;font-weight:600;color:#4a4f5a;line-height:1.45;
}
@media (max-width:900px){
  .pagehead__meta{margin-top:.4rem}
  .pgm{padding:.7rem .1rem}
}
/* Phones get the header stripped to what a visitor actually needs on arrival:
   where they are, what the page is, and one way forward. The standfirst and the
   secondary action are both repeated further down every page, so neither is lost. */
@media (max-width:700px){
  .pagehead{padding-block:1.35rem 1.6rem}
  .pagehead__sub{display:none}
  .pagehead__actions{margin-top:1.05rem}
  .pagehead__actions .pgbtn ~ .pgbtn{display:none}
  .pagehead__meta{margin-top:1.25rem;padding-inline:1rem;border-radius:15px}
  .pgm{padding:.6rem .1rem;gap:.8rem}
  .pgm b{font-size:1.15rem;min-width:3.1ch}
  .pgm span{font-size:.8rem;line-height:1.4}
  .crumbs{margin-bottom:.7rem}
}

/* ========================= SECTION BOUNDARIES =========================
   Two tinted bands in a row read as one long block with no edge — mint on mint
   on the inner pages, and four .section-light bands in a row on the home page.
   A hairline at the join is the one fix that works on both stylesheets at once.
   Bands that already carry their own contrast opt out: a dark ground, a
   statement bar or the page header supplies its own edge. */
section + section{border-top:1px solid rgba(0,28,84,.13)}
:is(.statement,.comp,.play,.food,.legacy,.cta,.dark,.hero,.pagehead) + section,
section:is(.statement,.comp,.play,.food,.legacy,.cta,.dark),
.site-foot{border-top:0}

/* ========================= TYPEWRITER =========================
   Used on the provocation band that opens most pages. Characters are removed
   from flow rather than made transparent, so the .hl highlight box grows with
   the sentence instead of sitting there full-width and empty. Words are kept
   in nowrap spans so a half-typed word never breaks across two lines.

   Nothing is hidden until the script has finished wrapping and adds .tw-armed,
   so a failure mid-way leaves the sentence fully readable. */
[data-typewriter] .tw__w{white-space:nowrap}
[data-typewriter] .tw__caret{display:none}
[data-typewriter].tw-armed .tw__c{display:none}
[data-typewriter].tw-armed .tw__c.in{display:inline}
[data-typewriter].tw-armed .tw__caret{display:inline-block}
/* an .hl with nothing revealed inside it would still paint its side padding */
[data-typewriter].tw-armed .hl{padding-inline:0}
[data-typewriter].tw-armed .hl:has(.tw__c.in){padding-inline:.2em}

.tw__caret{
  width:.07em;min-width:2px;height:.92em;
  background:currentColor;vertical-align:-.1em;margin-left:.07em;border-radius:1px;
  animation:twBlink .78s step-end infinite;
}
@keyframes twBlink{50%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  [data-typewriter].tw-armed .tw__c{display:inline}
  [data-typewriter] .tw__caret{display:none!important}
}
.pagehead__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
.pagehead__actions .pgbtn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.4rem;border-radius:999px;border:0;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:.9rem;text-decoration:none;
  background:var(--stage,#00b140);color:#fff;
  transition:transform .18s,box-shadow .18s;
}
.pagehead__actions .pgbtn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,177,64,.32);color:#fff}
.pagehead__actions .pgbtn--ghost{background:transparent;color:#001C54;box-shadow:inset 0 0 0 2px currentColor}
.pagehead__actions .pgbtn--ghost:hover{box-shadow:inset 0 0 0 2px currentColor,0 10px 26px rgba(12,19,48,.14);color:#001C54}

/* — the breadcrumb itself — */
.crumbs{margin-bottom:.95rem}
.crumbs ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  font-family:"Google Sans","Google Sans Text","Product Sans","DM Sans",Arial,sans-serif;
  font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.crumbs li{display:flex;align-items:center;gap:.4rem;color:#5a6480}
.crumbs li + li::before{content:"/";opacity:.4;font-weight:700}
.crumbs a{color:#5a6480;text-decoration:none;transition:color .2s}
.crumbs a:hover{color:#00a63c}
.crumbs [aria-current="page"]{color:#001C54}
@media (max-width:560px){
  .crumbs ol{font-size:.72rem}
}


/* ========================= ERP ENQUIRY EMBED ========================= */
/* The chat form does not report its height, so the height is fixed inline.
   jhs-enquiry-embed.js still listens in case the ERP adds height messages. */
.erp-enquiry{ display:block; width:100%; border:0; border-radius:14px; background:transparent; }


/* ========================= ENQUIRY ASSISTANT ========================= */
/* Sits above the site's own overlays, which top out at z-index 100000. */
.jhsa-fab{
  position:fixed; right:clamp(14px,2.2vw,26px); bottom:clamp(14px,2.2vw,26px);
  z-index:100001; display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.25rem; border:0; border-radius:999px; cursor:pointer;
  font:inherit; font-weight:800; font-size:.92rem; letter-spacing:.01em;
  color:#0c1330; background:var(--yellow-highlight,#f4b942);
  box-shadow:0 14px 34px -10px rgba(4,9,28,.55);
  transition:transform .18s ease, box-shadow .18s ease;
}
.jhsa-fab:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -12px rgba(4,9,28,.6); }
.jhsa-fab:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
/* The page-transition veil owns the screen; the launcher must not float over it. */
html[data-veil] .jhsa-fab{ opacity:0; pointer-events:none; transition:opacity .2s ease; }
@media (max-width:520px){ .jhsa-fab span{ display:none; } .jhsa-fab{ padding:.95rem; } }

.jhsa-ov{
  position:fixed; inset:0; z-index:100002; display:none;
  background:rgba(4,9,28,.66); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.jhsa-ov.is-open{ display:flex; align-items:center; justify-content:center; padding:clamp(10px,3vw,28px); }
.jhsa-box{
  position:relative; width:min(520px,100%); height:min(760px,92vh);
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.6);
}
.jhsa-box iframe{ display:block; width:100%; height:100%; border:0; }
.jhsa-x{
  position:absolute; top:8px; right:10px; z-index:2;
  width:34px; height:34px; border:0; border-radius:50%; cursor:pointer;
  font-size:1.5rem; line-height:1; color:#0c1330; background:rgba(255,255,255,.9);
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.jhsa-x:hover{ background:#fff; }