/* ============================================================================
   site-chrome.css — the header + footer shared by every page on husamsaleh.net
   ----------------------------------------------------------------------------
   EXTRACTED VERBATIM FROM index.html, which is the canonical design.

   The static pages (index.html, consulting.html, articles.html, work.html,
   links.html, 404.html) still carry their OWN inline copy of these rules in
   their <style> blocks — they render correctly today and were deliberately
   left untouched. This file is what the Django app links instead, for
   /learn/* and /consulting/<slug>/.

   >>> UNTIL THE STATIC PAGES ARE MIGRATED ONTO THIS FILE, ANY CHANGE TO THE
   >>> NAV OR FOOTER MUST BE MADE IN BOTH PLACES.

   Collision policy — this file is loaded alongside page CSS that already owns
   generic class names (.btn, .wrap, .card, .section, .nav):
     * every custom property it defines is namespaced --hs-*;
     * button styling is only ever written as `.nav .btn`, never bare `.btn`,
       so a page's own .btn rules keep working outside the chrome;
     * the footer brings its own container (.site-foot .foot) instead of
       borrowing `.wrap`;
     * the footer/nav read the *page's* --maxw / --gutter when it defines them
       (falling back to the canonical values) so the chrome lines up with the
       measure of whatever page it sits on.
   ========================================================================= */

:root{
  --hs-paper:#ffffff;
  --hs-noir:#0c0c0c;
  --hs-ink:#111111;
  --hs-paper-soft:rgba(255,255,255,.66);
  --hs-paper-faint:rgba(255,255,255,.6);
  --hs-rule:rgba(17,17,17,.16);
  --hs-rule-soft:rgba(17,17,17,.09);
  --hs-rule-noir-soft:rgba(255,255,255,.09);
  --hs-maxw:1300px;
  --hs-gutter:clamp(20px,5vw,64px);
  --hs-ease:cubic-bezier(.2,.7,.2,1);
  --hs-font-display:"Saira",system-ui,sans-serif;--hs-font-brand:"Michroma","Saira",system-ui,sans-serif;
  --hs-font-ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
html[dir="rtl"]{
  --hs-font-display:"IBM Plex Sans Arabic","Saira",system-ui,sans-serif;--hs-font-brand:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --hs-font-ui:"IBM Plex Sans Arabic","Archivo",system-ui,sans-serif;
}

/* ----------------------------------------------------------------- nav ---
   Two modes:
     .nav              overlay — fixed, transparent, paper-coloured type; it
                       turns solid on scroll (.scrolled). Use it only on a
                       page whose first block is the noir hero, exactly as
                       index.html / consulting.html / work.html do.
     .nav.nav-solid    sticky and solid from the first pixel — the same
                       treatment .scrolled gives, for pages that open on
                       paper (e.g. /learn/*).
   -------------------------------------------------------------------------*/
.nav{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px var(--gutter,var(--hs-gutter));
  font-family:var(--hs-font-ui);
  color:var(--hs-paper);
  border-bottom:1px solid transparent;
  transition:background .45s var(--hs-ease),border-color .45s,padding .45s var(--hs-ease),color .45s;
}
.nav.scrolled,.nav.nav-solid{
  color:var(--hs-ink);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--hs-rule-soft);
  padding-block:12px;
}
.nav.nav-solid{position:sticky;top:0}
.nav:not(.scrolled):not(.nav-solid) :focus-visible{outline-color:var(--hs-paper)}

.nav .brand,.site-foot .brand{
  display:flex;align-items:center;gap:11px;flex:none;
  font-family:var(--hs-font-display);font-stretch:125%;font-weight:500;font-size:0.902rem;
  letter-spacing:0;white-space:nowrap;color:inherit;text-decoration:none;
}
.brand-logo{height:22px;width:auto;display:block}
.brand-logo-on-light{display:none}
.nav.scrolled .brand-logo-on-dark,.nav.nav-solid .brand-logo-on-dark{display:none}
.nav.scrolled .brand-logo-on-light,.nav.nav-solid .brand-logo-on-light{display:block}

.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{
  position:relative;font-size:.82rem;font-weight:500;letter-spacing:0;
  text-transform:none;opacity:.82;transition:opacity .25s;
  color:inherit;text-decoration:none;white-space:nowrap;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--hs-ease);
}
html[dir="rtl"] .nav-links a::after{transform-origin:right}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
html[dir="rtl"] .nav-links a{letter-spacing:0;text-transform:none}

/* Account items (Django /learn/* only) live in the same list as the rest of
   the nav, so they inherit the burger behaviour instead of forming a second
   navigation bar. The separator marks them as a group on desktop. */
.nav-has-acct .nav-links{gap:20px}
.nav-sep{width:1px;height:15px;background:currentColor;opacity:.26;flex:none}
.nav-acct-form{display:inline;margin:0;padding:0}
.nav-acct-btn{
  font-family:var(--hs-font-ui);font-size:.82rem;font-weight:500;
  letter-spacing:0;text-transform:none;opacity:.82;
  transition:opacity .25s;background:none;border:0;padding:0;
  color:inherit;cursor:pointer;line-height:inherit;
}
.nav-acct-btn:hover{opacity:1}
html[dir="rtl"] .nav-acct-btn{letter-spacing:0;text-transform:none}

.nav-right{display:flex;align-items:center;gap:16px}
.nav-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0;border:1px solid currentColor;
  border-radius:3px;background:transparent;color:inherit;cursor:pointer;opacity:.9;
}
.nav-burger span{
  display:block;width:17px;height:1.5px;background:currentColor;margin:0 auto;
  transition:transform .3s var(--hs-ease),opacity .2s;
}
.nav.open .nav-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.open .nav-burger span:nth-child(2){opacity:0}
.nav.open .nav-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Language pill. <button> on the static pages (JS switches in place),
   <a href="?lang=..."> on the Django pages (the server renders one language
   per request) — identical to look at either way. */
.lang-toggle{display:inline-flex;align-items:center;gap:3px;border:1px solid currentColor;border-radius:2px;padding:2px}
.lang-toggle button,.lang-toggle a{
  appearance:none;background:none;border:0;cursor:pointer;color:inherit;
  border-radius:2px;padding:5px 11px;font-size:.74rem;font-weight:600;
  letter-spacing:.04em;opacity:.6;transition:opacity .25s,background .25s;
  font-family:var(--hs-font-ui);line-height:1;text-decoration:none;display:block;
}
.lang-toggle button.active,.lang-toggle a.active{background:currentColor;opacity:1}
.lang-toggle button.active span,.lang-toggle a.active span{color:var(--hs-noir)}
.nav.scrolled .lang-toggle button.active span,.nav.scrolled .lang-toggle a.active span,
.nav.nav-solid .lang-toggle button.active span,.nav.nav-solid .lang-toggle a.active span{color:var(--hs-paper)}
.lang-toggle button:not(.active):hover,.lang-toggle a:not(.active):hover{opacity:1}

/* Chrome buttons. Deliberately scoped to `.nav` so a page's own `.btn`
   rules are neither overridden nor inherited here. */
.nav .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--hs-font-ui);font-weight:600;font-size:.84rem;
  letter-spacing:0;text-transform:none;padding:10px 18px;
  border-radius:2px;border:1px solid currentColor;white-space:nowrap;
  text-decoration:none;cursor:pointer;
  transition:transform .35s var(--hs-ease),background .35s,color .35s,border-color .35s;
}
.nav .btn .arrow{transition:transform .35s var(--hs-ease)}
.nav .btn:hover .arrow{transform:translate(3px,-3px)}
html[dir="rtl"] .nav .btn:hover .arrow{transform:translate(-3px,-3px)}
html[dir="rtl"] .nav .btn{letter-spacing:0;text-transform:none;font-size:.86rem}
.nav .btn-solid{background:var(--hs-paper);border-color:var(--hs-paper)}
.nav .btn-solid span,.nav .btn-solid .arrow{color:var(--hs-noir)}
.nav .btn-solid:hover{transform:translateY(-3px)}
.nav.scrolled .btn-solid,.nav.nav-solid .btn-solid{background:var(--hs-ink);border-color:var(--hs-ink)}
.nav.scrolled .btn-solid span,.nav.scrolled .btn-solid .arrow,
.nav.nav-solid .btn-solid span,.nav.nav-solid .btn-solid .arrow{color:var(--hs-paper)}
/* The in-menu CTA duplicate. Must come AFTER `.nav .btn` — equal specificity,
   so the later rule is the one that decides whether it shows. */
.nav .nav-cta-m{display:none}

/* -------------------------------------------------------------- footer ---*/
.site-foot{
  background:var(--hs-noir);color:var(--hs-paper);
  border-top:1px solid var(--hs-rule-noir-soft);
  padding-block:34px;font-family:var(--hs-font-ui);margin-top:auto;
}
.site-foot .foot{
  max-width:var(--maxw,var(--hs-maxw));margin:0 auto;
  padding-inline:var(--gutter,var(--hs-gutter));
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
}
.site-foot .brand{color:var(--hs-paper)}
.site-foot .role{font-size:.82rem;letter-spacing:0;color:var(--hs-paper-faint);text-transform:none}
.site-foot .cp{font-size:.82rem;color:var(--hs-paper-faint)}
.site-foot :focus-visible{outline-color:var(--hs-paper)}
html[dir="rtl"] .site-foot .role{letter-spacing:0;text-transform:none;font-size:.88rem}
.site-foot .foot-outer{
  max-width:var(--maxw,var(--hs-maxw));margin:0 auto;
  padding-inline:var(--gutter,var(--hs-gutter));
}
.site-foot .foot-more{margin-top:22px;padding-top:22px;border-top:1px solid var(--hs-rule-noir-soft);display:flex;flex-direction:column;gap:12px}
.site-foot .foot-links,.site-foot .foot-else{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px}
.site-foot .foot-more a{font-size:.82rem;color:var(--hs-paper-soft);transition:color .25s}
.site-foot .foot-more a:hover{color:var(--hs-paper)}
.site-foot .foot-lab{font-size:.8rem;font-weight:600;color:var(--hs-paper-faint)}
html[dir="rtl"] .site-foot .foot-more a{font-size:.88rem}
html[dir="rtl"] .site-foot .foot-lab{font-size:.84rem}

/* ---------------------------------------------------------- responsive ---
   Two collapse points, one behaviour. A plain nav carries six links and folds
   into the burger at 1000px, exactly like the static pages. A nav that also
   carries the /learn account items (.nav-has-acct) carries up to four more —
   Courses, Dashboard, My Courses, Log out for a signed-in staff user, the
   widest case at ~1428px — so it folds at 1430px instead. The two blocks below
   are identical apart from the leading selector; keep _site_header.html's
   data-collapse in step with these numbers.
   -------------------------------------------------------------------------*/
@media (max-width:1430px){
  .nav-has-acct .nav-burger{display:flex}
  .nav-has-acct .nav-cta-d{display:none}
  .nav-has-acct .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--hs-noir);color:var(--hs-paper);
    border-bottom:1px solid var(--hs-rule-noir-soft);
    padding:6px var(--gutter,var(--hs-gutter)) 20px;
    max-height:calc(100dvh - 60px);overflow:auto;
    transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .28s var(--hs-ease),transform .28s var(--hs-ease),visibility .28s;
    box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  }
  .nav-has-acct.open .nav-links{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav-has-acct .nav-links a:not(.btn),.nav-has-acct .nav-links .nav-acct-btn{
    display:block;width:100%;text-align:start;
    padding:15px 2px;font-size:.98rem;letter-spacing:.02em;text-transform:none;
    opacity:.92;color:var(--hs-paper);border-bottom:1px solid var(--hs-rule-noir-soft);
  }
  .nav-has-acct .nav-links a:not(.btn)::after{display:none}
  .nav-has-acct .nav-links .nav-acct-form{display:block}
  .nav-has-acct .nav-sep{display:none}
  .nav-has-acct .nav-cta-m{display:inline-flex;justify-content:center;margin-top:16px}
  .nav-has-acct .nav-cta-m,.nav-has-acct.scrolled .nav-cta-m,.nav-has-acct.nav-solid .nav-cta-m{
    background:var(--hs-paper);border-color:var(--hs-paper);color:var(--hs-noir);
  }
  /* Selector weight matters here: `.nav.nav-solid .btn-solid span` above would
     otherwise paint this label paper-on-paper inside the dark drawer. */
  .nav-has-acct .nav-cta-m span,.nav-has-acct .nav-cta-m .arrow,
  .nav-has-acct.scrolled .nav-cta-m span,.nav-has-acct.scrolled .nav-cta-m .arrow,
  .nav-has-acct.nav-solid .nav-cta-m span,.nav-has-acct.nav-solid .nav-cta-m .arrow{color:var(--hs-noir)}
}
@media (max-width:1000px){
  .nav-burger{display:flex}
  /* `.nav .btn` above sets display:inline-flex; a media query adds no
     specificity, so this has to out-weigh it, not merely follow it. */
  .nav .nav-cta-d{display:none}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--hs-noir);color:var(--hs-paper);
    border-bottom:1px solid var(--hs-rule-noir-soft);
    padding:6px var(--gutter,var(--hs-gutter)) 20px;
    max-height:calc(100dvh - 60px);overflow:auto;
    transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .28s var(--hs-ease),transform .28s var(--hs-ease),visibility .28s;
    box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  }
  .nav.open .nav-links{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav-links a:not(.btn),.nav-links .nav-acct-btn{
    display:block;width:100%;text-align:start;
    padding:15px 2px;font-size:.98rem;letter-spacing:.02em;text-transform:none;
    opacity:.92;color:var(--hs-paper);border-bottom:1px solid var(--hs-rule-noir-soft);
  }
  .nav-links a:not(.btn)::after{display:none}
  .nav-links .nav-acct-form{display:block}
  .nav-sep{display:none}
  .nav .nav-cta-m{display:inline-flex;justify-content:center;margin-top:16px}
  .nav .nav-cta-m,.nav.scrolled .nav-cta-m,.nav.nav-solid .nav-cta-m{
    background:var(--hs-paper);border-color:var(--hs-paper);color:var(--hs-noir);
  }
  .nav .nav-cta-m span,.nav .nav-cta-m .arrow,
  .nav.scrolled .nav-cta-m span,.nav.scrolled .nav-cta-m .arrow,
  .nav.nav-solid .nav-cta-m span,.nav.nav-solid .nav-cta-m .arrow{color:var(--hs-noir)}
}
@media (max-width:620px){
  .lang-toggle button,.lang-toggle a{padding:9px 14px}
}
@media (max-width:430px){
  .nav{padding-inline:16px}
  .nav .brand,.site-foot .brand{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .nav,.nav *,.site-foot,.site-foot *{transition:none!important;animation:none!important}
}