/* ══════════════════════════════════════════════════════════
   CHROME — header, navigation, footer.
   Loaded by every page. chrome.py writes one header and one
   footer into every page; this styles them. Both must stay in
   step, so chrome styling lives here and nowhere else.
   ══════════════════════════════════════════════════════════ */

/* ── topbar ── */
.topbar{background:var(--ink,#08131F);color:#C2D3E6;text-align:center;
 font-size:.8rem;padding:.6rem 1rem;line-height:1.45}
.topbar b{color:#fff;font-weight:600}

/* ── header ── */
#hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
 backdrop-filter:blur(18px);border-bottom:1px solid var(--line,#DCE5F2);
 transition:box-shadow 220ms cubic-bezier(.16,1,.3,1)}
#hdr.stuck{box-shadow:0 6px 24px -14px rgba(8,19,31,.28)}
.nav{display:flex;align-items:center;gap:1.6rem;max-width:1160px;
 margin:0 auto;padding:.85rem 1.5rem}

/* ── logo lockup ── */
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.logo svg{width:34px;height:34px;flex:none}
.wm{display:flex;flex-direction:column;line-height:1.1}
.wm .n{font-size:1.06rem;font-weight:800;letter-spacing:-.01em;color:var(--ink,#08131F)}
.wm .n em{font-style:normal;font-weight:500;color:var(--cobalt-br,#2563EB)}
.wm .t{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.68rem;
 letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft,#5E7590);margin-top:.15rem}

/* ── menu ── */
.menu{display:flex;align-items:center;gap:1.5rem;margin-inline-start:auto}
.menu a{display:inline-flex;align-items:center;font-size:.94rem;
 color:var(--ink-mid,#3C5470);text-decoration:none;white-space:nowrap;
 min-height:44px;padding:0 .1rem;touch-action:manipulation;transition:color 160ms}
.menu a:hover{color:var(--ink,#08131F)}
.menu a.cta{background:var(--cobalt-br,#2563EB);color:#fff;font-weight:600;
 padding:.68rem 1.25rem;border-radius:11px;min-height:44px;
 display:inline-flex;align-items:center;transition:background 180ms,transform 180ms}
.menu a.cta:hover{background:var(--cobalt,#1D4ED8);color:#fff;transform:translateY(-1px)}
.menu a:focus-visible{outline:2.5px solid var(--cobalt-br,#2563EB);outline-offset:3px;border-radius:6px}

/* ── burger ── */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;
 width:44px;height:44px;margin-inline-start:auto;background:none;
 border:1px solid var(--line,#DCE5F2);border-radius:10px;cursor:pointer;
 padding:0 11px;touch-action:manipulation;position:relative;z-index:81}
.burger span{display:block;height:2px;width:100%;background:var(--ink,#08131F);
 border-radius:2px;transition:transform 220ms,opacity 160ms}
.menu.open ~ .burger span:nth-child(1),.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.burger:focus-visible{outline:2.5px solid var(--cobalt-br,#2563EB);outline-offset:2px}

@media(max-width:1080px){
 .burger{display:flex}
 .menu{display:none;position:absolute;top:100%;inset-inline-start:0;inset-inline-end:0;
  flex-direction:column;align-items:stretch;gap:0;background:#fff;
  border-bottom:1px solid var(--line,#DCE5F2);padding:.6rem 1.5rem 1.2rem;
  box-shadow:0 18px 40px -22px rgba(8,19,31,.3);
  z-index:80;isolation:isolate;transform:translateZ(0);
  max-height:calc(100dvh - 100%);overflow-y:auto;-webkit-overflow-scrolling:touch}
 .menu.open{display:flex}
 .menu a{display:block;width:100%;padding:1rem .25rem;min-height:48px;line-height:1.4}
 .menu a:active{background:rgba(37,99,235,.07)}
 .menu a.cta{padding:1rem!important;margin-top:.9rem;justify-content:center}
 body.menu-open{overflow:hidden;touch-action:none}
 body.menu-open .menu{touch-action:auto}
}

/* ── footer ── */
footer{background:var(--ink,#08131F);color:#A3B8D0;padding:3rem 0 2.4rem;margin-top:5rem}
footer .wrap,footer .wide{max-width:1160px;margin:0 auto;padding:0 1.5rem}
footer a{color:#C2D3E6;text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:#fff}
footer p{font-size:.88rem;line-height:1.7;margin:0 0 .8rem;max-width:none}
footer .disc{font-size:.85rem;line-height:1.7;color:#8CA4C0;
 border:1px solid rgba(255,255,255,.12);border-radius:12px;
 padding:1.1rem 1.3rem;margin-bottom:1.6rem}
footer .disc b{color:#fff}
footer .fcol{color:#fff;font-size:.72rem;font-family:'JetBrains Mono',monospace;
 letter-spacing:.16em;text-transform:uppercase;margin:0 0 .9rem;font-weight:500}

/* ── language switcher ── */
.langs{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.3rem 0 1.1rem}
.langs a,.langs .lang-current{display:inline-flex;align-items:center;justify-content:center;
 min-width:44px;min-height:36px;padding:.35rem .7rem;border-radius:9px;
 font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.75rem;letter-spacing:.06em;
 text-decoration:none;border:1px solid rgba(255,255,255,.16);
 touch-action:manipulation;transition:all 170ms}
.langs a{color:#A3B8D0;background:rgba(255,255,255,.03)}
.langs a:hover{color:#fff;border-color:rgba(255,255,255,.36);background:rgba(255,255,255,.09)}
.langs .lang-current{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.langs a:focus-visible{outline:2.5px solid #60A5FA;outline-offset:3px}

/* ── social ── */
.social{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.3rem 0 1.1rem}
.social a{display:inline-flex;align-items:center;justify-content:center;
 width:44px;height:44px;flex:none;border-radius:12px;color:#A3B8D0;padding:0;
 border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);
 text-decoration:none;touch-action:manipulation;transition:all 180ms}
.social a:hover{color:#fff;border-color:rgba(255,255,255,.36);
 background:rgba(255,255,255,.09);transform:translateY(-2px)}
.social a:focus-visible{outline:2.5px solid #60A5FA;outline-offset:3px}
.social svg{width:19px;height:19px;display:block}

/* ── skip link ── */
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;
 background:var(--ink,#08131F);color:#fff;padding:.9rem 1.3rem;
 border-radius:0 0 10px 0;text-decoration:none;font-weight:600}
.skip:focus{inset-inline-start:0}

[dir="rtl"] .burger span{transform-origin:right center}
@media(prefers-reduced-motion:reduce){
 .menu a.cta,.social a,.langs a,#hdr,.burger span{transition:none}
 .menu a.cta:hover,.social a:hover{transform:none}
}

/* ── footer grid ──
   Five explicit columns. auto-fit collapsed at this width and pushed the
   last column onto its own row, leaving a gap on the right. */
.fgrid{display:grid;grid-template-columns:1.7fr repeat(4,minmax(0,1fr));
 gap:2rem 1.8rem;align-items:start;
 padding-bottom:2.2rem;margin-bottom:1.8rem;border-bottom:1px solid rgba(255,255,255,.12)}
.fgrid > div{min-width:0}
.fbrand{padding-inline-end:1.5rem}
.fbrand .logo{margin-bottom:.9rem}
.fbrand .wm .n{color:#fff}
.fbrand .wm .n em{color:#60A5FA}
.fbrand .wm .t{color:#8CA4C0}
.fmotto{font-size:.88rem;color:#A3B8D0;margin:0 0 1.1rem;max-width:28ch;line-height:1.6}
.fgrid .fcol{margin-bottom:.5rem}
.fgrid a{display:block;font-size:.87rem;color:#A3B8D0;text-decoration:none;
 padding:.34rem 0;line-height:1.38;min-height:30px;text-wrap:pretty}
.fgrid a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fgrid .social{margin:0 0 .9rem}
.fgrid .social a{display:inline-flex;padding:0;min-height:44px}
.fgrid .langs{margin:0}
.fgrid .langs a,.fgrid .langs .lang-current{display:inline-flex;padding:.35rem .7rem;min-height:36px}
.fbot{font-size:.78rem;color:#8CA4C0;line-height:1.7;margin:0}
.fbot a{color:#A3B8D0}

@media(max-width:1080px){
 .fgrid{grid-template-columns:1fr 1fr 1fr 1fr;gap:1.8rem 1.4rem}
 .fbrand{grid-column:1/-1;padding-inline-end:0}
}
@media(max-width:760px){
 .fgrid{grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem}
}
@media(max-width:480px){
 .fgrid{grid-template-columns:1fr;gap:1.4rem}
 .fgrid a{padding:.5rem 0;min-height:40px}
}

/* ── Arabic: letter-spacing breaks cursive joining, and uppercase is a no-op ── */
[lang="ar"] .wm .t,[lang="ar"] .fcol,[lang="ar"] .eyebrow,
[lang="ar"] .langs a,[lang="ar"] .langs .lang-current,
[lang="ar"] .topbar,[lang="ar"] .meta,[lang="ar"] .acard-eyebrow{
 letter-spacing:normal;text-transform:none}
[lang="ar"] .wm .t,[lang="ar"] .fcol{
 font-family:'Noto Naskh Arabic','Segoe UI',Tahoma,sans-serif;font-size:.8rem}