/* =============================================================================
   zaztekai.com — ONE LOOK FOR THE WHOLE SITE
   -----------------------------------------------------------------------------
   Direction A ("clean editorial") with the ZAZ mascot and handwritten notes
   from direction C. Loaded LAST on every page so it can:

     1. Re-point every module's own colour tokens at one palette. The modules
        grew up with three navies (#001f3f, #0B2545, #0E2038) and three reds
        (#ff0000, #cc0000, #D0342C). They now all resolve to the same two.
     2. Style the ZAZTEK AI header (.zai-hd) that js/main.js injects on this
        domain, and that the static pages carry written out.
     3. Turn each Genie's navy module bar into a light sub-bar under that
        header, so a page has one heavy band, not two.

   It changes appearance only — no layout a script depends on, no display:none
   on anything a form needs. Delete the <link> and every page goes back to
   exactly how it was.
   ============================================================================= */

:root{
  /* --- the palette ------------------------------------------------------- */
  /* ZAZTEK International's own colours, from css/style.css on
     zaztekinternational.com: navy #001f3f / #002d5a, red #ff0000 / #cc0000,
     white, slate #f1f5f9, border #e2e8f0, grey text #64748b.
     #ff0000 is for buttons and large type; small red text uses #cc0000,
     which is the one that stays readable on white. */
  --zai-navy:#001f3f;   --zai-navy-2:#002d5a;  --zai-navy-3:#0a3d70;  --zai-navy-4:#00152b;
  --zai-red:#ff0000;    --zai-red-d:#cc0000;   --zai-red-tint:#fff1f1;
  --zai-paper:#ffffff;  --zai-paper-2:#f1f5f9; --zai-card:#FFFFFF;
  --zai-line:#e2e8f0;   --zai-line-2:#cbd5e1;
  --zai-ink:#001f3f;    --zai-text:#1e2f45;    --zai-mut:#64748b;
  --zai-tint:#eaf0f8;   --zai-ok:#15803d;      --zai-ok-tint:#e8f7ee;
  --zai-on-navy:#cbd5e1; --zai-on-navy-mut:#7f9ec4; --zai-red-on-navy:#ff4d4d;
  --zai-hl:#ff0000;
  --zai-display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --zai-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --zai-hand:'Caveat','Segoe Print','Comic Sans MS',cursive;
  --zai-r:14px; --zai-r-lg:20px;
  --zai-shadow:0 1px 2px rgba(11,37,69,.05),0 18px 40px -24px rgba(11,37,69,.28);

  /* --- css/style.css + assets/zaz-header.css tokens ---------------------- */
  --primary:var(--zai-red);  --primary-dark:var(--zai-red-d);
  --secondary:var(--zai-navy); --secondary-light:var(--zai-navy-2);
  --bg:var(--zai-paper); --fg:var(--zai-ink);
  /* NOT --muted: style.css uses it as a background, genie.css as a text
     colour, and both load on the Genie pages. Each keeps its own. */
  --muted-fg:var(--zai-mut);
  --border:var(--zai-line); --card:var(--zai-card);

  /* --- math-genie/assets/genie.css (also Statistics/Grammar/Accounting) -- */
  --navy:var(--zai-navy); --navy-2:var(--zai-navy-2);
  --red:var(--zai-red);   --red-dark:var(--zai-red-d);
  --paper:var(--zai-paper); --surface-2:var(--zai-paper-2);
  --rule:var(--zai-line); --text:var(--zai-text); --info:#1E5A9E;
}

/* Module-scoped tokens (grammar.css and acct.css set theirs on the wrapper). */
.gg,.ag{--navy:var(--zai-navy);--red:var(--zai-red);--line:var(--zai-line);--ink:var(--zai-ink)}

::selection{background:var(--zai-red);color:#fff}
:focus-visible{outline:2px solid var(--zai-red);outline-offset:2px}

/* =============================================================================
   BRAND MARK — the red Z tile plus ZAZTEK·AI
   ============================================================================= */
.zai-logo{display:inline-flex;align-items:center;gap:0;text-decoration:none!important;
  font-family:var(--zai-display);font-weight:800;font-size:1.12rem;letter-spacing:-.03em;color:var(--zai-navy)!important;line-height:1}
.zai-logo svg{width:34px;height:34px;flex:none;display:block;margin-right:.6rem}
.zai-logo span{color:var(--zai-red);margin-left:.08em}
.zai-logo img{display:none}               /* the old business-site logo image */

/* =============================================================================
   THE HEADER  (.zai-hd)
   Same markup whether main.js injected it or the page carries it.
   ============================================================================= */
header.zai-hd{position:sticky;top:0;z-index:300;background:var(--zai-navy);
  border-bottom:3px solid var(--zai-red);transition:box-shadow .25s}
.zai-hd .zai-logo{color:#fff!important}
header.zai-hd.scrolled{box-shadow:0 8px 30px -18px rgba(11,37,69,.35)}
.zai-hd .zai-in{max-width:1180px;margin:0 auto;padding:0 1.25rem;height:68px;display:flex;align-items:center;gap:1.5rem}
.zai-hd nav.zai-nav{display:flex;align-items:center;gap:.25rem;margin-left:auto}
.zai-hd .zai-nav > a,.zai-hd .zai-dd > button{font:500 .93rem var(--zai-body);color:var(--zai-on-navy);text-decoration:none;
  padding:.5rem .8rem;border-radius:10px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;transition:background .15s,color .15s}
.zai-hd .zai-nav > a:hover,.zai-hd .zai-dd > button:hover,.zai-hd .zai-dd:focus-within > button{background:rgba(255,255,255,.08);color:#fff}
.zai-hd .zai-nav > a.here,.zai-hd .zai-dd.here > button{color:#fff;box-shadow:inset 0 -2px 0 var(--zai-red)}
.zai-hd .zai-nav > a.zai-ext{font-size:.82rem;color:var(--zai-on-navy-mut)}
.zai-hd .zai-dd{position:relative}
.zai-hd .zai-dd > button svg{width:10px;height:10px;opacity:.55;transition:transform .2s}
.zai-hd .zai-dd:hover > button svg,.zai-hd .zai-dd:focus-within > button svg{transform:rotate(180deg)}
.zai-hd .zai-menu{position:absolute;top:calc(100% + 10px);left:-.5rem;min-width:300px;background:#fff;border:1px solid var(--zai-line);
  border-radius:var(--zai-r);box-shadow:0 24px 50px -20px rgba(11,37,69,.3);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
.zai-hd .zai-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.zai-hd .zai-dd:hover .zai-menu,.zai-hd .zai-dd:focus-within .zai-menu{opacity:1;visibility:visible;transform:none}
.zai-hd .zai-menu a{display:flex;gap:.75rem;align-items:flex-start;padding:.65rem .7rem;border-radius:10px;text-decoration:none;color:var(--zai-ink)}
.zai-hd .zai-menu a:hover{background:var(--zai-paper)}
.zai-hd .zai-menu a i{font-style:normal;width:34px;height:34px;flex:none;border-radius:10px;background:var(--zai-tint);display:grid;place-items:center;color:var(--zai-navy)}
.zai-hd .zai-menu a i svg{width:18px;height:18px}
.zai-hd .zai-menu a b{display:block;font:600 .9rem var(--zai-display)}
.zai-hd .zai-menu a small{display:block;font-size:.78rem;color:var(--zai-mut);line-height:1.4;margin-top:2px}
.zai-hd .zai-menu a:hover b{color:var(--zai-red)}

/* The account button main.js upgrades into a dropdown once signed in. */
.zai-hd #accountBtn,.zai-hd .zai-signin{font:600 .92rem var(--zai-body);background:var(--zai-red);color:#fff!important;border:0;
  padding:.62rem 1.15rem;border-radius:10px;text-decoration:none;margin-left:.5rem;white-space:nowrap;transition:background .15s}
.zai-hd #accountBtn:hover,.zai-hd .zai-signin:hover{background:var(--zai-red-d)}

.zai-hd .hamburger,.zai-hd .zai-burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;margin-left:.25rem}
.zai-hd .hamburger span,.zai-hd .zai-burger span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;border-radius:2px}

.mobile-menu.zai-mm{position:fixed;top:71px;right:0;bottom:0;width:min(320px,88vw);background:var(--zai-paper);border-left:1px solid var(--zai-line);
  padding:1.25rem;z-index:299;transform:translateX(100%);transition:transform .25s;overflow-y:auto;display:block;visibility:hidden}
.mobile-menu.zai-mm.open{transform:none;visibility:visible}
.mobile-menu.zai-mm nav{display:flex;flex-direction:column;gap:.15rem;align-items:stretch}
.mobile-menu.zai-mm .zai-mh{font:600 .72rem var(--zai-body);letter-spacing:.14em;text-transform:uppercase;color:var(--zai-red);margin:1rem 0 .3rem}
.mobile-menu.zai-mm a{display:block;padding:.6rem .4rem;border-radius:8px;color:var(--zai-ink);text-decoration:none;font-size:1rem}
.mobile-menu.zai-mm a:hover{background:var(--zai-paper-2)}

@media (max-width:900px){
  .zai-hd nav.zai-nav{display:none}
  .zai-hd .hamburger,.zai-hd .zai-burger{display:block}
  .zai-hd #accountBtn,.zai-hd .zai-signin{margin-left:auto}
}

/* =============================================================================
   LEGACY HEADERS — the LMS pages still write the business header out by hand.
   Same paper bar, so the change of page is not a change of site.
   ============================================================================= */
body > header:not(.zai-hd):not(.mg-top):not(.spk-head){background:var(--zai-navy);border-bottom:3px solid var(--zai-red)}
body > header:not(.zai-hd) .header-inner{height:68px}
body > header:not(.zai-hd) .zai-logo{color:#fff!important}
body > header:not(.zai-hd) .header-inner nav a{color:var(--zai-on-navy)}
body > header:not(.zai-hd) .header-inner nav a:hover,body > header:not(.zai-hd) .header-inner nav a.active{color:#fff}
body > header:not(.zai-hd) .header-inner nav a.active::after{background:var(--zai-red)}
body > header:not(.zai-hd) .hamburger span{background:#fff}
body > header:not(.zai-hd) .btn-outline{color:#fff;border-color:rgba(255,255,255,.35);background:transparent}
body > header:not(.zai-hd) .btn-outline:hover{border-color:#fff;color:#fff}

/* =============================================================================
   THE GENIE MODULE BAR  (.mg-top) — light, under the header
   genie.css draws it navy with a red rule, and assets-zaztek.css pins the navy
   with !important. Two selectors' worth of weight wins it back.
   ============================================================================= */
body .mg-top{background:#fff!important;color:var(--zai-ink)!important;border-bottom:1px solid var(--zai-line)!important;box-shadow:0 1px 0 rgba(11,37,69,.02)}
body .mg-top .wrap{padding-block:12px;max-width:1180px}
body .mg-top .mg-brand a{color:var(--zai-navy)!important}
body .mg-top .mg-brand b{font-family:var(--zai-display);font-weight:700;letter-spacing:-.02em}
body .mg-top .mg-brand a[href="/"]{color:var(--zai-mut)!important}
body .mg-top .mg-lamp{background:var(--zai-red-tint)!important;border:1px solid #F6CFCF;border-radius:11px;width:38px;height:38px;font-size:19px}
body .mg-top nav a{color:var(--zai-text)!important;font-weight:500;padding:7px 12px;border-radius:9px}
body .mg-top nav a:hover{background:var(--zai-paper-2)!important;color:var(--zai-red)!important}
body .mg-top nav a.on,body .mg-top nav a[aria-current="page"]{background:var(--zai-navy)!important;color:#fff!important}
body .mg-top nav a.mg-home{border:1px solid var(--zai-line-2)!important;color:var(--zai-navy)!important}
body .mg-top nav a.mg-home:hover{background:var(--zai-navy)!important;color:#fff!important;border-color:var(--zai-navy)!important}
body .mg-top nav span{color:var(--zai-mut)!important}

/* With the ZAZTEK AI header above it, the bar does not need its own way home,
   its own "ZAZTEK International" line, or a second Sign in. */
body:has(header.zai-hd) .mg-top nav a.mg-home,
body:has(header.zai-hd) .mg-top .mg-brand > a[href="/"],
body:has(header.zai-hd) .mg-top nav a[href^="/login.html"]{display:none!important}

/* The toolbar sits flush under the bar. */
body .mg-toolbar{background:rgba(255,255,255,.9);border-bottom:1px solid var(--zai-line)}
body .mg-foot{background:transparent;border-top:1px solid var(--zai-line);color:var(--zai-mut)}

/* =============================================================================
   SHARED POLISH — buttons, cards, chips, inputs
   ============================================================================= */
.btn-primary,.mg-btn.primary,.mg-btn-primary{background:var(--zai-red)!important;border-color:var(--zai-red)!important;color:#fff!important}
.btn-primary:hover,.mg-btn.primary:hover,.mg-btn-primary:hover{background:var(--zai-red-d)!important}

.chip{border-radius:999px!important;transition:background .15s,border-color .15s}
.chip:hover{border-color:var(--zai-navy)!important}

input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=tel],select,textarea{
  border-radius:10px;transition:border-color .15s,box-shadow .15s}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=number]:focus,input[type=search]:focus,input[type=tel]:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--zai-navy)!important;box-shadow:0 0 0 3px rgba(11,37,69,.10)}

/* Handwritten note — the touch from direction C. Use sparingly. */
.zai-note{font-family:var(--zai-hand);font-weight:700;font-size:1.55rem;line-height:1;color:var(--zai-red-d);display:inline-block;transform:rotate(-2.5deg)}
.zai-hl{color:var(--zai-red)}

/* =============================================================================
   FOOTER (.zai-ft) — shared by the static pages
   ============================================================================= */
.zai-ft{background:var(--zai-navy);color:#B8C5D9;font-size:.92rem}
.zai-ft a{color:#DCE5F2;text-decoration:none}
.zai-ft a:hover{color:#fff}
.zai-ft .zai-fin{max-width:1180px;margin:0 auto;padding:3rem 1.25rem 1.5rem}
.zai-ft .zai-fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.zai-ft h4{font:600 .72rem var(--zai-body);letter-spacing:.14em;text-transform:uppercase;color:#8FA3C0;margin:0 0 .9rem}
.zai-ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.zai-ft .zai-logo{color:#fff!important}
.zai-ft .zai-fbot{border-top:1px solid rgba(255,255,255,.1);margin-top:2.5rem;padding-top:1.25rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:#8FA3C0}
@media (max-width:760px){.zai-ft .zai-fgrid{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* zaz-header.css underlines nav a.active; the AI header marks place by colour. */
.zai-hd nav a.active::after{display:none}
.zai-hd nav a.active{color:#fff}

/* =============================================================================
   SIGN-IN / SIGN-UP CARDS — ZAZ peeks over the top of the card
   Applies to .auth-card (signup.html), .zai-auth-card (login.html) and
   .lms-auth (the LMS sign-in pages).
   ============================================================================= */
.auth-wrap,.zai-auth-wrap{background:var(--zai-paper-2)!important;background-image:linear-gradient(#e2e8f0 1px,transparent 1px),linear-gradient(90deg,#e2e8f0 1px,transparent 1px)!important;
  background-size:30px 30px!important;padding-top:5.5rem!important}
.auth-card,.zai-auth-card,.lms-auth{position:relative;background:#fff;border:1px solid var(--zai-line)!important;border-radius:22px!important;
  box-shadow:0 40px 70px -40px rgba(11,37,69,.45)!important}
.auth-card:before,.zai-auth-card:before,.lms-auth:before{content:"";position:absolute;right:28px;top:-62px;width:78px;height:86px;
  background:url(/assets/zaz-mascot.svg) center/contain no-repeat;pointer-events:none}
.auth-card h1,.zai-auth-card h1,.lms-auth h1{font-family:var(--zai-display);font-weight:800;letter-spacing:-.035em;color:var(--zai-navy)}
.auth-card .btn-primary,.lms-auth .btn-primary{border-radius:12px!important}
.auth-input{background:#fff;border-color:var(--zai-line-2)!important}

/* The signed-in account pill main.js swaps in for "Sign in". */
.zai-hd #accountMenuWrap #accountToggle{background:#fff!important;border:1px solid var(--zai-line-2)!important;border-radius:999px!important;color:var(--zai-navy)!important;font:600 .9rem var(--zai-body)}
.zai-hd #accountMenuWrap #accountToggle:hover{border-color:var(--zai-navy)!important}
#accountDropdown{border-radius:14px!important;border-color:var(--zai-line)!important;box-shadow:0 24px 50px -20px rgba(11,37,69,.3)!important}
@media (max-width:900px){.zai-hd #accountMenuWrap{margin-left:auto!important}}

/* .mg-btn is used across all four Genies but was never given a style, so it
   rendered as the browser's grey default button. This is that style. */
.mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:600 .95rem var(--zai-body);
  background:var(--zai-navy);color:#fff;border:1px solid var(--zai-navy);border-radius:10px;padding:.65rem 1.25rem;cursor:pointer;
  text-decoration:none;transition:background .15s,border-color .15s}
.mg-btn:hover{background:var(--zai-red);border-color:var(--zai-red)}
.mg-btn:disabled{opacity:.55;cursor:default;background:var(--zai-navy)}
.mg-btn.ghost{background:#fff;color:var(--zai-navy);border-color:var(--zai-line-2)}
.mg-btn.ghost:hover{border-color:var(--zai-navy);background:#fff;color:var(--zai-navy)}
.zai-mm nav a.active::after{display:none}
.zai-mm nav a.active{color:var(--zai-red);background:var(--zai-paper-2)}

/* On a phone the module tabs scroll sideways instead of stacking three deep. */
@media (max-width:640px){
  body .mg-top .wrap{gap:10px}
  body .mg-top nav{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:calc(-1 * var(--gutter,20px));padding-inline:var(--gutter,20px)}
  body .mg-top nav::-webkit-scrollbar{display:none}
  body .mg-top nav a{white-space:nowrap;flex:none}
}