/* Legal pages – يعتمد على tokens.css فقط (نهاري 100%)
   - A11y + Responsive + Focus
   - RTL-ready + Scroll offset + Print styles
*/

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:0;background:var(--bg);color:var(--fg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-height:1.7;
}
a{color:inherit;text-decoration:none}
.link{color:var(--brand);font-weight:800}
.link:hover,.toc a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:1000;
  background:#0d172a;color:#e6ecff;
  border-bottom:1px solid #111827;
  box-shadow:0 6px 24px rgba(0,0,0,.08);
  backdrop-filter:saturate(140%);
}
.topbar__in{
  max-width:1000px;margin:0 auto;
  display:flex;align-items:center;gap:12px;
  padding:10px 16px
}
.topbar__brand{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.topbar__brand b{font-weight:900;font-size:20px}

/* Focus (A11y) */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}

/* Hero */
.hero{background:var(--hero-bg);color:var(--hero-fg)}
.hero__in{max-width:1000px;margin:0 auto;padding:26px 16px;display:grid;gap:12px}
.hero__title{font-weight:900;font-size:clamp(22px,3.6vw,34px);line-height:1.25;margin:0}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px;opacity:.95}
.badge{background:var(--chip);border:1px solid var(--chip-stroke);border-radius:999px;padding:6px 10px;font-size:13px}

/* Cross-nav بين الصفحات القانونية */
.legal-nav{display:flex;gap:8px;justify-content:center;margin:10px 0}
.btn-legal{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--soft);color:var(--fg);font-weight:800}
.btn-legal[aria-current="page"]{box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--brand) 35%, transparent);border-color:color-mix(in oklab, var(--brand) 40%, var(--line))}

/* Content */
.container{max-width:1000px;margin-inline:auto;padding:24px 16px}
.toc{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.toc h2{margin:0 0 8px;font-size:16px;font-weight:900}
.toc a{display:block;padding:6px 0;color:var(--brand);font-weight:800}
.section{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin:14px 0;
  scroll-margin-top:80px; /* لتفادي الهيدر اللزق */
}
.section h2{font-size:20px;font-weight:900;margin:0 0 8px}
.section h3{font-size:16px;font-weight:800;margin:10px 0 6px}
.list{margin:6px 0 0;padding-inline-start:18px}
.list li{margin:6px 0}
.note{background:var(--soft);border:1px dashed var(--line);border-radius:12px;padding:12px;margin-top:10px}
.callout{border-inline-start:4px solid var(--brand);padding:10px;border-radius:10px;background:var(--soft)}
@supports (background: color-mix(in oklab, red 10%, transparent)){
  .callout{background:color-mix(in oklab, var(--brand) 10%, transparent)}
}
.muted{color:var(--muted)}

/* Grid */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:780px){.grid-2{grid-template-columns:1fr}}

/* Active section (TOC + Section) */
.section.is-active{box-shadow:var(--shadow);border-color:#dfe4ee1a}
.toc a.is-active{position:relative}
.toc a.is-active::before{
  content:"";position:absolute;inset-inline-start:-8px;top:50%;
  transform:translateY(-50%);width:6px;height:6px;border-radius:999px;background:var(--brand)
}
/* إبراز الهدف عند الوصول مباشرة بـ #hash */
:target{box-shadow:var(--shadow);}

/* Long words & bidi safety */
.section p,.section li{word-wrap:break-word;overflow-wrap:break-word}

/* Footer */
.footer{background:#0b0b0f;color:#eaeaea;margin-top:20px}
.footer__in{max-width:1000px;margin:0 auto;padding:18px 16px;display:grid;gap:10px}
.f_copy{border-top:1px solid #161823;margin-top:8px;padding-top:8px;color:#aab0bd;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* Responsive */
@media (max-width:640px){
  .hero__in,.container,.topbar__in{padding-inline:12px}
}

/* Print: صفحة قانونية نظيفة */
@media print{
  :root{color-scheme:light}
  body{background:#fff;color:#000}
  .topbar,.legal-nav,.footer{display:none}
  .section,.toc{border:0;box-shadow:none}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-weight:400; font-size:90%}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


