/* ============================================================================
   BURJAK INSTITUTE — BI-WEB-P1 — CORE PRODUCTION CANDIDATE CP-1.1
   Shared shell: global navigation, mobile native <details> disclosure,
   Option-A identity masthead (new content pages only), footer, skip link.
   -------------------------------------------------------------------------
   CP-1.1 corrections vs CP-1.0:
     + mobile nav uses a TRUE native disclosure: <details><summary>+<ul> — the
       list lives INSIDE <details>; a SEPARATE desktop list is emitted from the
       same single-source model. Only the breakpoint-appropriate list is exposed
       (the other is display:none, so it leaves the accessibility tree) — no
       duplicate active navigation.
     + CONTROLLED PALETTE ONLY (Ink/Paper/Anchor/Deep/Whisper + hair). No accent.
   `.ssi-` namespace; `--ssi-*` tokens never override frozen page tokens.
   Self-hosted Noto; no CDN; no analytics; no tracking; no JS beyond <details>.
   ============================================================================ */
@font-face{font-family:"Noto Serif";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/noto-serif-400.woff2") format("woff2");}
@font-face{font-family:"Noto Serif";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/noto-serif-600.woff2") format("woff2");}
@font-face{font-family:"Noto Naskh Arabic";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/noto-naskh-arabic-400.woff2") format("woff2");}
@font-face{font-family:"Noto Naskh Arabic";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/noto-naskh-arabic-700.woff2") format("woff2");}

:root{
  --ssi-ink:#1B1B1B; --ssi-paper:#FEFDFB; --ssi-muted:#6f6f69;
  --ssi-hair:rgba(27,27,27,.15); --ssi-anchor:#1F3A5F; --ssi-deep:#16293F; --ssi-whisper:#E9EEF4;
  --ssi-serif:"Noto Serif",Georgia,"Times New Roman",serif;
  --ssi-naskh:"Noto Naskh Arabic",serif;
  --ssi-gutter:40px; --ssi-measure:1080px;
}

.ssi-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ssi-paper);
  color:var(--ssi-anchor);font-family:var(--ssi-serif);font-size:14px;padding:10px 16px;
  border:1px solid var(--ssi-anchor);text-decoration:none;border-radius:2px}
.ssi-skip:focus{left:12px;top:12px}
html[lang="ar"] .ssi-skip{font-family:var(--ssi-naskh);left:auto;right:-9999px}
html[lang="ar"] .ssi-skip:focus{right:12px;left:auto}

/* ---- Global navigation (wordmark-less; 5 destinations) ---- */
.ssi-nav{background:var(--ssi-paper);border-bottom:1px solid var(--ssi-hair);font-family:var(--ssi-serif)}
html[lang="ar"] .ssi-nav{font-family:var(--ssi-naskh)}
.ssi-nav-inner{max-width:var(--ssi-measure);margin:0 auto;padding:0 var(--ssi-gutter);
  min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Desktop list (shown ≥901px) */
.ssi-nav-desktop{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ssi-nav-desktop a{display:inline-block;padding:16px 0;color:var(--ssi-ink);text-decoration:none;
  font-size:13px;letter-spacing:.02em;line-height:1;white-space:nowrap}
html[lang="ar"] .ssi-nav-desktop a{font-size:14.5px;letter-spacing:0}
.ssi-nav-desktop a:hover{color:var(--ssi-anchor)}
.ssi-nav-desktop a[aria-current="page"]{color:var(--ssi-anchor);box-shadow:inset 0 -1px 0 0 var(--ssi-anchor)}

/* Mobile disclosure (native <details>; hidden ≥901px) */
.ssi-navbox{display:none;margin:0}
.ssi-navbox>summary{list-style:none;cursor:pointer;padding:14px 0;font-size:14px;color:var(--ssi-ink);line-height:1}
html[lang="ar"] .ssi-navbox>summary{font-family:var(--ssi-naskh);font-size:15px}
.ssi-navbox>summary::-webkit-details-marker{display:none}
.ssi-navbox>summary::after{content:"\00a0\25be";color:var(--ssi-anchor)}
.ssi-navbox[open]>summary::after{content:"\00a0\25b4"}
.ssi-nav-mobile{list-style:none;margin:4px 0 10px;padding:0}
.ssi-nav-mobile li{display:block}
.ssi-nav-mobile a{display:block;padding:10px 0;color:var(--ssi-ink);text-decoration:none;font-size:15px;line-height:1.2}
html[lang="ar"] .ssi-nav-mobile a{font-size:16px}
.ssi-nav-mobile a[aria-current="page"]{color:var(--ssi-anchor);box-shadow:inset 0 -1px 0 0 var(--ssi-anchor)}

/* Language switch */
.ssi-lang{color:var(--ssi-anchor);text-decoration:none;font-size:12.5px;letter-spacing:.02em;
  padding:16px 0;display:inline-block;line-height:1;white-space:nowrap}
.ssi-lang[lang="ar"]{font-family:var(--ssi-naskh);font-size:14px;letter-spacing:0}
.ssi-lang[lang="en"]{font-family:var(--ssi-serif)}
.ssi-lang:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- Identity masthead — NEW content pages only (Option A prototype) ---- */
.ssi-mast{background:var(--ssi-paper);border-bottom:1px solid var(--ssi-hair);text-align:center;padding:40px 24px 30px}
.ssi-mast-wordmark{margin:0;font-family:var(--ssi-serif);font-weight:400;letter-spacing:.34em;text-transform:uppercase;font-size:14px;color:var(--ssi-ink)}
.ssi-reg{font-size:.6em;vertical-align:.5em;line-height:0;letter-spacing:0;margin-inline-start:.06em;color:var(--ssi-muted)}
.ssi-mast-slogan{margin:8px 0 0;color:var(--ssi-anchor)}
html[lang="ar"] .ssi-mast-slogan{font-family:var(--ssi-naskh);font-size:14px}
html[lang="en"] .ssi-mast-slogan{font-family:var(--ssi-serif);font-size:11.5px;letter-spacing:.01em}
.ssi-mast-hair{border:0;border-top:1px solid var(--ssi-anchor);opacity:.5;width:56px;margin:22px auto 20px}
.ssi-mast-title{margin:0;color:var(--ssi-ink)}
html[lang="ar"] .ssi-mast-title{font-family:var(--ssi-naskh);font-weight:700;font-size:26px;line-height:1.4}
html[lang="en"] .ssi-mast-title{font-family:var(--ssi-serif);font-weight:600;font-size:25px;line-height:1.3}

/* ---- Footer ---- */
.ssi-foot{background:var(--ssi-paper);border-top:1px solid var(--ssi-hair);margin-top:8px;font-family:var(--ssi-serif);color:var(--ssi-ink)}
html[lang="ar"] .ssi-foot{font-family:var(--ssi-naskh)}
.ssi-foot-inner{max-width:var(--ssi-measure);margin:0 auto;padding:24px var(--ssi-gutter) 30px}
/* CP-2.1 (D-03): centered footer composition — legal notice and navigation
   centered across the website; same balanced composition in AR and EN; the
   former Arabic text-align:right override on the legal notice is removed. */
.ssi-foot-legal{margin:0 auto;max-width:70ch;font-size:13px;line-height:1.7;color:#3a3a36;text-align:center}
html[lang="ar"] .ssi-foot-legal{font-size:14px;line-height:1.9}
.ssi-foot-legal .ssi-lat{font-family:var(--ssi-serif)}
.ssi-foot-nav{list-style:none;margin:14px 0 0;padding:0;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.ssi-foot-nav a{color:var(--ssi-anchor);text-decoration:none;font-size:12.5px;letter-spacing:.02em;padding:11px 0;display:inline-block}
html[lang="ar"] .ssi-foot-nav a{font-size:14px;letter-spacing:0}
.ssi-foot-nav a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- Focus visibility ---- */
.ssi-nav a:focus-visible,.ssi-lang:focus-visible,.ssi-foot-nav a:focus-visible,
.ssi-skip:focus-visible,.ssi-navbox>summary:focus-visible{outline:2px solid var(--ssi-anchor);outline-offset:3px;border-radius:1px}

/* ---- Responsive ---- */
@media (max-width:1024px){:root{--ssi-gutter:32px} .ssi-nav-desktop{gap:18px}}

/* At ≤900px the 5-destination row is switched to the native <details> disclosure
   (keeps the full Arabic labels intact rather than shortening them). */
@media (max-width:900px){
  .ssi-nav-desktop{display:none}
  .ssi-navbox{display:block}        /* native default keeps the <details> collapse working */
}
@media (max-width:640px){
  :root{--ssi-gutter:16px}
  .ssi-nav-inner{min-height:52px;gap:12px}
  .ssi-mast{padding:30px 16px 22px}
  html[lang="ar"] .ssi-mast-title{font-size:22px}
  html[lang="en"] .ssi-mast-title{font-size:21px}
  .ssi-foot-inner{padding:20px 16px 26px}
}

@media print{.ssi-nav,.ssi-skip{display:none} .ssi-foot{border-top-color:#ccc} body{background:#fff}}