/* 22Academy base.css v1.1 (20 September 2026). Implements design brief v1.0 section 3 to 9. Loads after tokens.css. Mobile first. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--a22-surface);color:var(--a22-ink);font-family:var(--a22-font);font-size:16px;line-height:1.6}
@media(min-width:900px){body{font-size:18px}} /* v1.1 20 Sep: 18 px desktop */
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--a22-navy);text-decoration:underline;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--a22-blue);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Type scale ---------- */
h1,h2,h3,.a22-display{color:var(--a22-navy);font-weight:700;margin:0 0 var(--a22-s3);line-height:1.2}
.a22-display{font-size:30px;line-height:1.15}
h1{font-size:26px}
h2{font-size:21px;line-height:1.25;margin-top:var(--a22-s6)}
h3{font-size:17px;line-height:1.3;font-weight:600;margin-top:var(--a22-s5)}
@media(min-width:900px){.a22-display{font-size:44px}h1{font-size:36px}h2{font-size:27px}h3{font-size:20px}}
p,ul,ol{margin:0 0 var(--a22-s3);max-width:68ch}
small,.a22-small{font-size:14px;line-height:1.5}
.a22-micro{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--a22-muted)}
.a22-soft{color:var(--a22-soft)}
.a22-muted{color:var(--a22-muted)}
strong,b{font-weight:600}

/* ---------- Layout ---------- */
.a22-wrap{max-width:var(--a22-max);margin:0 auto;padding-left:var(--a22-gutter);padding-right:var(--a22-gutter)}
.a22-wrap--wide{max-width:var(--a22-max-wide)}
@media(min-width:600px){.a22-wrap{padding-left:var(--a22-gutter-lg);padding-right:var(--a22-gutter-lg)}}
.a22-section{padding-top:var(--a22-s6);padding-bottom:var(--a22-s6)}
@media(min-width:900px){.a22-section{padding-top:var(--a22-s8);padding-bottom:var(--a22-s8)}}
.a22-grid{display:grid;gap:var(--a22-s4)}
@media(min-width:600px){.a22-grid--2{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.a22-grid--3{grid-template-columns:repeat(3,1fr)}.a22-grid--side{grid-template-columns:minmax(0,1fr) 340px;gap:var(--a22-s6)}}
.a22-sticky{position:sticky;top:calc(var(--a22-header) + var(--a22-s4))}

/* ---------- Header and footer ---------- */
.a22-header{background:var(--a22-navy);color:#fff;height:var(--a22-header);position:sticky;top:0;z-index:50}
.a22-header .a22-wrap{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--a22-s4)}
.a22-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;letter-spacing:.14em;font-size:14px}
.a22-nav{display:none;gap:var(--a22-s5);align-items:center}
.a22-nav a{color:var(--a22-on-dark);text-decoration:none;font-size:15px;font-weight:500}
.a22-nav a:hover{color:#fff}
.a22-nav details{position:relative}
.a22-nav summary{list-style:none;cursor:pointer;color:var(--a22-on-dark);font-size:15px;font-weight:500}
.a22-nav summary::-webkit-details-marker{display:none}
.a22-nav details[open] summary{color:#fff}
.a22-nav .a22-menu{position:absolute;top:calc(100% + 10px);left:0;background:#fff;border:var(--a22-border);border-radius:var(--a22-r-card);box-shadow:var(--a22-shadow);min-width:240px;padding:8px}
.a22-nav .a22-menu a{display:block;color:var(--a22-ink);padding:8px 10px;border-radius:8px}
.a22-nav .a22-menu a:hover{background:var(--a22-surface)}
@media(min-width:900px){.a22-nav{display:flex}.a22-burger{display:none}}
.a22-burger{background:none;border:0;width:44px;height:44px;display:grid;place-items:center;color:#fff;cursor:pointer}
@media(min-width:900px){.a22-burger{display:none}} /* v1.1 20 Sep: the rule above overrode the earlier media query, so the burger showed on desktop */
.a22-mobile-menu{display:none;background:var(--a22-navy-deep);padding:var(--a22-s4) var(--a22-gutter)}
.a22-mobile-menu[data-open="1"]{display:block}
.a22-mobile-menu a{display:block;color:var(--a22-on-dark);text-decoration:none;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:16px}
.a22-footer{background:var(--a22-navy);color:var(--a22-on-dark-mut);padding:var(--a22-s7) 0 var(--a22-s6);margin-top:var(--a22-s8);font-size:14px}
.a22-footer a{color:var(--a22-on-dark)}
.a22-footer .a22-grid{gap:var(--a22-s5)}
.a22-footer__team{border-top:1px solid rgba(255,255,255,.1);margin-top:var(--a22-s5);padding-top:var(--a22-s4)}

/* ---------- Buttons ---------- */
.a22-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-weight:600;font-size:15px;border-radius:var(--a22-r-control);min-height:48px;padding:0 var(--a22-s5);border:0;cursor:pointer;text-decoration:none;transition:background-color .12s,color .12s,box-shadow .12s,transform .06s}
@media(min-width:900px){.a22-btn{min-height:44px}}
.a22-btn--primary{background:var(--a22-blue-btn);color:var(--a22-navy-deep);text-decoration:none!important} /* v1.1 20 Sep: states are colour steps; orange is never a button */
.a22-btn--primary:hover{background:var(--a22-blue-btn-hover)}
.a22-btn--primary:active{background:var(--a22-blue-btn-active);transform:translateY(1px)}
.a22-btn--secondary{background:#fff;color:var(--a22-navy);border:1.5px solid var(--a22-navy);text-decoration:none!important}
.a22-btn--secondary:hover{background:var(--a22-surface-2)}
.a22-btn--secondary:active{background:var(--a22-navy);color:#fff;transform:translateY(1px)}
.a22-btn--quiet{background:none;color:var(--a22-navy);text-decoration:underline;font-weight:500;min-height:auto;padding:6px 0}
.a22-btn--quiet{border-radius:4px}
.a22-btn--quiet:hover{background:var(--a22-surface-2);box-shadow:0 0 0 6px var(--a22-surface-2);text-decoration-thickness:2px}
.a22-btn--quiet:active{background:var(--a22-line);box-shadow:0 0 0 6px var(--a22-line);color:var(--a22-navy-deep)}
.a22-btn--block{width:100%}
.a22-btn--sm{min-height:38px;padding:0 var(--a22-s4);font-size:14px}
.a22-btn[disabled],.a22-btn[aria-disabled="true"],.a22-btn[disabled]:hover,.a22-btn[disabled]:active{background:var(--a22-surface-2);color:var(--a22-muted);border-color:var(--a22-line);cursor:default;filter:none;box-shadow:none;transform:none}
.a22-btn--quiet[disabled],.a22-btn--quiet[disabled]:hover{background:none}
.a22-btn.is-busy{position:relative;color:transparent}
.a22-btn.is-busy::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--a22-navy-deep);border-right-color:transparent;border-radius:50%;animation:a22spin .7s linear infinite}
@keyframes a22spin{to{transform:rotate(360deg)}}

/* ---------- Cards, chips, tiles, bars ---------- */
.a22-card{background:#fff;border:var(--a22-border);border-radius:var(--a22-r-card);padding:var(--a22-s5)}
@media(max-width:599px){.a22-card{padding:var(--a22-s4)}}
.a22-card--raised{box-shadow:var(--a22-shadow)}
.a22-card--dark{background:var(--a22-navy-deep);border-color:var(--a22-navy-deep);color:var(--a22-on-dark)}
.a22-card--dark h1,.a22-card--dark h2,.a22-card--dark h3{color:#fff}
.a22-card--dark p{color:#CBD6E4}
.a22-card--selected{border:2px solid var(--a22-orange);padding:calc(var(--a22-s5) - 1px)}
.a22-chip{display:inline-flex;align-items:center;gap:6px;border:var(--a22-border);border-radius:var(--a22-r-pill);padding:5px 12px;font-size:12px;font-weight:600;color:var(--a22-soft);background:#fff;text-decoration:none}
.a22-chip--on{border-color:var(--a22-orange);color:var(--a22-navy);background:#FDF1E9}
.a22-chip--ok{border-color:var(--a22-ok);color:var(--a22-ok);background:var(--a22-ok-bg)}
.a22-tile{border:var(--a22-border);border-radius:10px;background:#fff;padding:12px 14px}
.a22-tile .a22-micro{display:block;margin-bottom:3px}
.a22-tile b{display:block;font-size:21px;color:var(--a22-navy);line-height:1.2}
.a22-bar{height:8px;border-radius:4px;background:var(--a22-surface-2);overflow:hidden}
.a22-bar i{display:block;height:100%;background:var(--a22-orange)}
.a22-bar--ok i{background:var(--a22-ok)}
.a22-bar-row{display:flex;align-items:center;gap:var(--a22-s3)}
.a22-bar-row .a22-bar{flex:1}
.a22-route{border-left:4px solid var(--a22-orange);background:#FDF1E9;border-radius:0 var(--a22-r-card) var(--a22-r-card) 0;padding:var(--a22-s3) var(--a22-s4)}
.a22-route--info{border-left-color:var(--a22-blue);background:#F0F7FE}

/* ---------- Lists with the diamond ---------- */
.a22-list{list-style:none;padding-left:26px}
.a22-list li{position:relative;margin-bottom:8px}
.a22-list li::before{content:"";position:absolute;left:-26px;top:.62em;width:14px;height:7.9px;background:var(--a22-orange);-webkit-mask:url(22a-diamond-bullet.svg) no-repeat center/contain;mask:url(22a-diamond-bullet.svg) no-repeat center/contain}

/* ---------- Forms ---------- */
.a22-field{margin-bottom:var(--a22-s4)}
.a22-field label{display:block;font-size:13px;font-weight:600;color:var(--a22-soft);margin-bottom:5px}
.a22-input{width:100%;font-family:inherit;font-size:16px;padding:12px 14px;border:var(--a22-border);border-radius:var(--a22-r-control);background:#fff;color:var(--a22-ink)}
.a22-input:focus{border-color:var(--a22-navy)}
.a22-field__error{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--a22-bad);margin-top:5px}
.a22-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--a22-soft);margin-bottom:var(--a22-s3);line-height:1.45}
.a22-check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--a22-navy)}

/* ---------- Question options ---------- */
.a22-opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;font-family:inherit;font-size:15px;background:#fff;border:var(--a22-border);border-radius:9px;padding:12px 15px;margin-bottom:8px;min-height:48px;cursor:pointer;color:var(--a22-ink)}
.a22-opt:hover{border-color:var(--a22-navy)}
.a22-opt .a22-opt__k{font-weight:700;color:var(--a22-muted);flex:none;width:18px}
.a22-opt--selected{border:2px solid var(--a22-navy);padding:11px 14px}
.a22-opt--wrong{border-color:var(--a22-bad);background:var(--a22-bad-bg)}
.a22-opt--key{border-color:var(--a22-ok);background:var(--a22-ok-bg)}
.a22-opt--dontknow{border-style:dashed}

/* ---------- Tables ---------- */
.a22-table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 var(--a22-s4)}
.a22-table th,.a22-table td{border:var(--a22-border);padding:9px 12px;text-align:left;vertical-align:top}
.a22-table th{background:var(--a22-surface-2);color:var(--a22-navy);font-weight:600}
@media(max-width:599px){.a22-table--stack thead{display:none}.a22-table--stack tr{display:block;border:var(--a22-border);border-radius:var(--a22-r-card);padding:8px 12px;margin-bottom:10px;background:#fff}.a22-table--stack td{display:flex;justify-content:space-between;gap:12px;border:0;padding:6px 0}.a22-table--stack td::before{content:attr(data-th);color:var(--a22-muted);font-weight:600}}

/* ---------- States ---------- */
.a22-skel{background:var(--a22-surface-2);border-radius:6px;height:14px;margin-bottom:8px}
.a22-locked{position:relative;border:var(--a22-border);border-radius:var(--a22-r-card);background:#fff;overflow:hidden}
.a22-locked__inner{opacity:.4;padding:var(--a22-s4)}
.a22-locked__cta{position:absolute;inset:auto 0 0 0;background:linear-gradient(rgba(255,255,255,0),#fff 55%);padding:var(--a22-s6) var(--a22-s4) var(--a22-s3);text-align:center}
.a22-empty{border:1px dashed var(--a22-line);border-radius:var(--a22-r-card);padding:var(--a22-s5);text-align:center;color:var(--a22-soft)}
.a22-error{border-left:4px solid var(--a22-bad);background:var(--a22-bad-bg);padding:var(--a22-s3) var(--a22-s4);border-radius:0 var(--a22-r-card) var(--a22-r-card) 0}
.a22-notice-ai{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--a22-soft);border:var(--a22-border);border-radius:var(--a22-r-pill);padding:4px 10px;background:#fff}

/* ---------- Timer bar (assessment and exam) ---------- */
.a22-timer{background:var(--a22-navy-deep);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:10px var(--a22-gutter);font-size:14px;font-weight:600;position:sticky;top:0;z-index:40}
.a22-timer--warn{color:#F6C98B}

/* ---------- Utilities ---------- */
.a22-mt0{margin-top:0}.a22-mb0{margin-bottom:0}.a22-mb2{margin-bottom:var(--a22-s2)}.a22-mb4{margin-bottom:var(--a22-s4)}.a22-mb6{margin-bottom:var(--a22-s6)}
.a22-center{text-align:center}
.a22-row{display:flex;gap:var(--a22-s3);align-items:center;flex-wrap:wrap}
.a22-row--between{justify-content:space-between}
.a22-hide-mobile{display:none}@media(min-width:900px){.a22-hide-mobile{display:initial}.a22-hide-desktop{display:none}}
.a22-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- v1.1 additions (package two): hero, bands, four-column grid ---------- */
.a22-hero{background:var(--a22-navy);color:#fff;padding:var(--a22-s7) 0}
@media(min-width:900px){.a22-hero{padding:var(--a22-s9) 0}}
.a22-hero__in{display:grid;gap:var(--a22-s6);align-items:center}
@media(min-width:900px){.a22-hero__in{grid-template-columns:1.1fr 1fr}}
.a22-hero .a22-display{max-width:18ch}
.a22-hero__img img{width:100%;height:auto;border-radius:var(--a22-r-card)}
.a22-band{padding:var(--a22-s7) 0;background:#fff}
@media(min-width:900px){.a22-band{padding:var(--a22-s8) 0}}
.a22-band--grey{background:var(--a22-surface)}
.a22-band--navy{background:var(--a22-navy);color:#fff}
.a22-band--navy h2,.a22-band--navy h3{color:#fff}
@media(min-width:600px){.a22-grid--4{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.a22-grid--4{grid-template-columns:repeat(4,1fr)}}
.a22-bar--weak i{background:var(--a22-orange)}

/* v1.1: prices carry the euro sign in copy; links navy with a thin underline; date box */
a{text-decoration-thickness:1px;text-underline-offset:3px}
.a22-datebox{display:inline-flex;align-items:center;gap:8px;border:var(--a22-border);border-radius:var(--a22-r-control);padding:8px 12px;background:#fff;font-weight:600;color:var(--a22-navy);cursor:pointer}
.a22-datebox input[type=date]{border:0;font:inherit;color:inherit;background:transparent;padding:0;width:auto}
.a22-logo{height:64px;width:auto;display:block}
@media(max-width:599px){.a22-logo{height:48px}}
/* ============================================================ */
/* Course/account footer (.afoot) — exact CSS from the client's own */
/* approved mockup (22a-mockup-r15-app-shell.html, section C).      */
/* ============================================================ */
#afoot-course { background: var(--a22-navy); color: var(--a22-on-dark-mut); margin-top: var(--a22-s6); }
#afoot-course .afoot__in { max-width: var(--a22-max-wide); margin: 0 auto; padding: var(--a22-s5) var(--a22-gutter) var(--a22-s4); }
@media (min-width: 600px) { #afoot-course .afoot__in { padding-left: var(--a22-gutter-lg); padding-right: var(--a22-gutter-lg); } }
#afoot-course .afoot__row { display: grid; gap: var(--a22-s4); align-items: center; }
@media (min-width: 900px) { #afoot-course .afoot__row { grid-template-columns: auto 1fr auto; gap: var(--a22-s6); } }
#afoot-course .afoot__img { height: 44px; width: auto; display: block; }
#afoot-course a { color: var(--a22-on-dark); text-decoration: none; font-size: 14px; }
#afoot-course a:hover { text-decoration: underline; }
#afoot-course .afoot__help, #afoot-course .afoot__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
#afoot-course .afoot__help a { display: inline-flex; align-items: center; gap: 6px; }
#afoot-course .afoot__help svg { width: 16px; height: 16px; }
#afoot-course .afoot__help a:last-child svg { fill: #fff; }
#afoot-course .afoot__legal a { color: var(--a22-on-dark-mut); }
#afoot-course .afoot__fine { margin: var(--a22-s4) 0 0; padding-top: var(--a22-s3); border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; max-width: none; }