/* Zero Grad base: tokens, type, header, footer. Every page loads it; the
   landing/courses/bootcamp pages add zg.css, the articles add articles-zg.css.
   Same look as the course lessons: Noto Sans Arabic for text, Caveat
   "chalk" for the big Latin headings. The accent is the logo's colour: navy on the paper
   (light) ground, paper on the dark one; yellow chalk only on the gray board. Light/dark follows theme.js
   (data-theme on <html>, or the device when nothing is saved). */
:root{
  --bg:#f5f2ea; --surface:#fffdf8; --surface-2:#efeadf; --ink:#1c1e22; --muted:#5b616b; --line:#ddd6c6;
  --accent:#101f40; --on-accent:#f5f2ea; --chalk-g:#15803d; --chalk-o:#c2410c; --board:#232323;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 6px 24px rgba(0,0,0,.05);
  --radius:14px; --max:1080px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141414; --surface:#1d1d1d; --surface-2:#262626; --ink:#ececec; --muted:#a1a1a1; --line:#333;
    --accent:#f5f2ea; --on-accent:#141414; --chalk-g:#4ade80; --chalk-o:#fb923c;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#141414; --surface:#1d1d1d; --surface-2:#262626; --ink:#ececec; --muted:#a1a1a1; --line:#333;
  --accent:#f5f2ea; --on-accent:#141414; --chalk-g:#4ade80; --chalk-o:#fb923c;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Noto Sans Arabic",system-ui,sans-serif;font-size:17px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img{max-width:100%}
.en{direction:ltr;unicode-bidi:isolate}
.wrap{max-width:var(--max);margin:auto;padding:0 16px}
.chalk{font-family:"Caveat",cursive;color:var(--accent);font-weight:700;direction:ltr;unicode-bidi:isolate;line-height:1.05}
.chalk.g{color:var(--chalk-g)}

/* header */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:1rem;min-height:60px}
/* The official logo files (brand: never retype the wordmark): navy on light, paper on dark. */
.logo{display:flex;align-items:center;padding:4px 0;flex:none}
.logo img{display:block;height:26px;width:auto}
.logo .on-dark{display:none}
:root[data-theme="dark"] .logo .on-light{display:none}
:root[data-theme="dark"] .logo .on-dark{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo .on-light{display:none}
  :root:not([data-theme="light"]) .logo .on-dark{display:block}
}
nav.main{display:flex;gap:.25rem;margin-inline-start:auto;align-items:center;overflow-x:auto;scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main a,nav.main span{padding:.35rem .7rem;border-radius:999px;text-decoration:none;font-size:.93rem;white-space:nowrap;color:var(--muted)}
nav.main a:hover{color:var(--ink);background:var(--surface-2)}
nav.main a[aria-current="page"]{color:var(--ink);background:var(--surface-2);font-weight:500}
nav.main .soon{opacity:.75;cursor:default}
nav.main .soon small{font-size:.7rem;border:1px solid var(--line);border-radius:999px;padding:0 .4rem;margin-inline-start:.3rem}
.theme-toggle{flex:none;width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
}
@media (max-width:760px){
  .topbar .wrap{flex-wrap:wrap;gap:.25rem .5rem;padding-top:.45rem;padding-bottom:.35rem}
  .logo{order:1}.theme-toggle{order:2;margin-inline-start:auto}
  nav.main{order:3;width:100%;margin:0;justify-content:flex-start}
  nav.main a,nav.main span{padding:.25rem .55rem;font-size:.86rem}
}
@media (max-width:420px){
  nav.main{flex-wrap:wrap;overflow:visible;gap:.1rem}
  nav.main a,nav.main span{padding:.2rem .45rem;font-size:.84rem}
  nav.main .soon small{display:none}
}

/* footer */
footer{color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);padding:1.5rem 0;margin-top:4rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}