/* =====================================================================
   EXAM HUB — BASE: reset, typography, layout primitives, preferences
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem;font-variant-numeric:lining-nums}
body{
  margin:0;min-height:100%;
  font-family:var(--font-ui);font-size:var(--fs-base);line-height:1.6;
  color:var(--fg);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:var(--teal-ink);text-decoration-thickness:.08em;text-underline-offset:.18em}
::selection{background:var(--selection)}
[hidden]{display:none!important}

:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;letter-spacing:-.018em;line-height:1.1;
  color:var(--fg);margin:0;text-wrap:balance;
}
h1{font-size:var(--fs-3xl);font-weight:900;letter-spacing:-.03em;line-height:1}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-lg);font-weight:750;line-height:1.2}
h4{font-size:var(--fs-md);font-weight:700;line-height:1.3}
h1 em,h2 em{font-style:normal;color:var(--teal-deep)}
p{margin:0;text-wrap:pretty}
strong,b{font-weight:700}
small{font-size:var(--fs-sm)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);
}
.eyebrow::before{content:"";width:.55rem;height:.55rem;border-radius:3px;background:linear-gradient(135deg,var(--teal-bright),var(--teal-deep));box-shadow:0 0 0 3px var(--teal-soft)}
.lede{font-size:var(--fs-md);color:var(--fg-2);max-width:64ch;line-height:1.55}
.muted{color:var(--fg-3)}
.num{font-variant-numeric:tabular-nums lining-nums}
.serif{font-family:var(--font-read)}

/* ---------- Layout ---------- */
.wrap{
  width:100%;max-width:calc(var(--page-max) + 2*var(--gutter));margin-inline:auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left,0px));
  padding-right:max(var(--gutter),env(safe-area-inset-right,0px));
}
.section{padding-block:var(--sp-8)}
.section-head{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-6);max-width:52rem}
.stack{display:grid;gap:var(--sp-4);align-content:start;min-width:0}
.stack-sm{display:grid;gap:var(--sp-2);align-content:start;min-width:0}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.grid-2{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}
.grid-3{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.minw0{min-width:0}

.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:0 0 var(--r-sm) 0;font-weight:700}
.skip-link:focus{left:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Arabic support ----------
   .ar blocks sit under the English they translate. They show when the
   student switches Arabic on, and always on the Foundation level.
   .ar.always ignores the switch (used for the hub's own Arabic lines). */
.ar{
  font-family:var(--font-ar);direction:rtl;text-align:right;unicode-bidi:isolate;
  line-height:1.9;font-size:1.06em;color:var(--fg-2);
}
html:not([data-ar="on"]):not([data-level="f"]) .ar:not(.always){display:none}
.ar-inline{font-family:var(--font-ar);unicode-bidi:isolate;direction:rtl}
html:not([data-ar="on"]):not([data-level="f"]) .ar-inline:not(.always){display:none}

/* ---------- Level-specific content ----------
   data-lv lists the levels an element is shown on: f = Foundation,
   s = Standard, e = Excellence. No data-lv = shown on every level. */
html[data-level="f"] [data-lv]:not([data-lv~="f"]),
html[data-level="s"] [data-lv]:not([data-lv~="s"]),
html[data-level="e"] [data-lv]:not([data-lv~="e"]){display:none!important}

/* ---------- Motion ---------- */
@keyframes eh-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes eh-fade{from{opacity:0}to{opacity:1}}
@keyframes eh-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes eh-pop{0%{transform:scale(.85)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes eh-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes eh-pulse{0%{box-shadow:0 0 0 0 rgba(19,189,179,.45)}100%{box-shadow:0 0 0 14px rgba(19,189,179,0)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}