/* ============================================================
   MOEDATECH  ·  DOCS PAGES            docs.css        2026-09-08
   Shared by /resources and /policies.

   Deliberately ONE stylesheet for both: they are the same kind of
   page — a title, a standfirst, then stacked prose sections — and
   a second near-identical file would only drift.

   The scale, spacing and colour vocabulary are lifted from
   compliance.css so these pages read as siblings of /compliance
   rather than as something bolted on. Anything that is not a
   deliberate difference should stay identical to it.

   Everything is written with LOGICAL properties (margin-inline,
   border-inline-start, text-align:start) so the Arabic locale
   mirrors without a single RTL override.
   ============================================================ */

.doc {
  --d-ink:   var(--ink, #0e0f10);
  --d-soft:  var(--ink-soft, #323232);
  --d-mut:   var(--ink-muted, #4e4e4e);
  --d-line:  var(--hairline, #ddd3c7);
  --d-card:  var(--bg-raised, #fff);
  --d-sunk:  var(--bg-sunk, #e8dfd5);
  --d-acc:   #e65d00;
  --d-acc-d: #c04d00;                 /* white on this is 4.9:1 */
  --d-r:     var(--radius-card, 26px);
  --d-pill:  var(--radius-pill, 999px);
  --d-ease:  var(--ease-out, cubic-bezier(.23, 1, .32, 1));
  --d-gut:   clamp(18px, 4vw, 56px);
  --d-max:   1180px;

  color: var(--d-ink);
  font-family: var(--font, "Figtree", ui-sans-serif, system-ui, sans-serif);
}

.doc-in {
  max-width: var(--d-max);
  margin-inline: auto;
  padding-inline: var(--d-gut);
}

/* ---- hero ------------------------------------------------- */

.doc-hero { padding-block: clamp(44px, 6vw, 84px) clamp(30px, 3.4vw, 44px); }

.doc-kicker {
  display: block;
  margin-bottom: 14px;
  color: var(--d-acc-d);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Arabic has no case, and letterspacing breaks the joins. */
[lang="ar"] .doc-kicker { text-transform: none; letter-spacing: 0; }

.doc-hero h1 {
  margin: 0;
  max-width: 19ch;
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
[lang="ar"] .doc-hero h1 { letter-spacing: 0; line-height: 1.18; }

.doc-lede {
  margin: 18px 0 0;
  max-width: 60ch;
  color: var(--d-soft);
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  line-height: 1.62;
}
[lang="ar"] .doc-lede { line-height: 1.9; }

/* ---- sections --------------------------------------------- */

.doc-sec { padding-block: clamp(38px, 4.6vw, 68px); }
.doc-sec + .doc-sec { padding-block-start: 0; }

.doc-sec h2 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
}
[lang="ar"] .doc-sec h2 { letter-spacing: 0; line-height: 1.3; }

.doc-note {
  margin: 0 0 clamp(22px, 2.6vw, 32px);
  max-width: 64ch;
  color: var(--d-mut);
  font-size: 1.02rem;
  line-height: 1.62;
}
[lang="ar"] .doc-note { line-height: 1.9; }

/* ---- the "not signed off yet" band -------------------------
   Same component as compliance.css's .cmp-draft. It exists so a
   page can ship with sections that are honestly marked as not
   final, instead of quietly reading as though they were.         */

.doc-draft {
  display: block;
  margin: 0 0 clamp(26px, 3vw, 38px);
  padding: 14px 18px;
  border: 1px solid var(--d-acc);
  border-inline-start: 4px solid var(--d-acc);
  border-radius: 14px;
  background: color-mix(in srgb, var(--d-acc) 7%, transparent);
  color: var(--d-soft);
  font-size: .95rem;
  line-height: 1.6;
}
.doc-draft b { color: var(--d-acc-d); }

/* ---- resource cards ----------------------------------------- */

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 14px;
}

.doc-card {
  display: block;
  padding: 22px 24px 24px;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r);
  background: var(--d-card);
  color: inherit;
  text-decoration: none;
  transition: transform .34s var(--d-ease), border-color .34s var(--d-ease);
}
.doc-card:hover,
.doc-card:focus-visible { transform: translateY(-2px); border-color: var(--d-acc); }

.doc-card b {
  display: block;
  margin-bottom: 6px;
  font-size: 1.06rem;
  font-weight: 650;
  letter-spacing: -.01em;
}
.doc-card span { display: block; color: var(--d-mut); font-size: .94rem; line-height: 1.55; }
[lang="ar"] .doc-card span { line-height: 1.85; }

.doc-card i {
  display: block;
  margin-top: 12px;
  color: var(--d-acc-d);
  font-size: .86rem;
  font-style: normal;
  font-weight: 600;
}
.doc-card i::after { content: " \2192"; }
[dir="rtl"] .doc-card i::after { content: " \2190"; }

/* ---- prose (policy body) ------------------------------------ */

.doc-prose { max-width: 68ch; }
.doc-prose h3 {
  margin: clamp(24px, 2.6vw, 34px) 0 8px;
  font-size: 1.16rem;
  font-weight: 650;
  letter-spacing: -.012em;
}
[lang="ar"] .doc-prose h3 { letter-spacing: 0; }
.doc-prose h3:first-child { margin-block-start: 0; }
.doc-prose p { margin: 0 0 12px; color: var(--d-soft); font-size: 1rem; line-height: 1.68; }
[lang="ar"] .doc-prose p { line-height: 1.95; }
.doc-prose ul { margin: 0 0 14px; padding-inline-start: 1.15em; }
.doc-prose li { margin-bottom: 7px; color: var(--d-soft); font-size: 1rem; line-height: 1.62; }
[lang="ar"] .doc-prose li { line-height: 1.9; }
.doc-prose a { color: var(--d-acc-d); text-underline-offset: 3px; }

/* ---- term / practice rows ----------------------------------- */

.doc-defs { margin: 0; display: grid; gap: 10px; }

.doc-def {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 2.2fr;
  gap: 4px 26px;
  padding: 16px 20px;
  border: 1px solid var(--d-line);
  border-radius: 16px;
  background: var(--d-card);
}
@media (max-width: 640px) { .doc-def { grid-template-columns: 1fr; } }

.doc-def dt { font-weight: 650; font-size: .99rem; }
.doc-def dd { margin: 0; color: var(--d-mut); font-size: .96rem; line-height: 1.6; }
[lang="ar"] .doc-def dd { line-height: 1.88; }

/* ---- jump links --------------------------------------------- */

.doc-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.doc-toc a {
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid var(--d-line);
  border-radius: var(--d-pill);
  background: var(--d-card);
  color: var(--d-soft);
  font-size: .9rem;
  font-weight: 550;
  text-decoration: none;
  transition: border-color .3s var(--d-ease), color .3s var(--d-ease);
}
.doc-toc a:hover, .doc-toc a:focus-visible { border-color: var(--d-acc); color: var(--d-acc-d); }

/* Anchored sections must not land under the sticky header. */
.doc-sec[id] { scroll-margin-top: 92px; }

/* ---- closing note ------------------------------------------- */

.doc-meta {
  margin: 0;
  padding-block: clamp(30px, 4vw, 56px);
  border-block-start: 1px solid var(--d-line);
  color: var(--d-mut);
  font-size: .92rem;
  line-height: 1.6;
}
[lang="ar"] .doc-meta { line-height: 1.88; }

@media (prefers-reduced-motion: reduce) {
  .doc-card, .doc-toc a { transition: none; }
  .doc-card:hover, .doc-card:focus-visible { transform: none; }
}


/* ============================================================
   THE HEADER SHELL
   Ported verbatim from compliance.css, which took it from faq.css.
   header.hdr's flex rules come from the equipment pages' Webflow
   stylesheet, which these pages do not load — so every page of this
   family has to carry its own copy. Kept byte-identical on purpose:
   if the header is retuned, it must be retuned in all three.

   The .v4nav list and the .v4mm panels are NOT styled here. Those come
   from the skin, which only runs if the page id is in the v4skin-gate
   list in the SITE HEAD code. A new page missing from that list renders
   as a bare bulleted list — that is the whole failure mode.
   ============================================================ */
/* ========================== the header shell ==============================
   Ported verbatim from faq.css when this page stopped loading it. The page
   hands the skin a <header class="hdr"> and the skin fills it, but header.hdr's
   own flex rules come from the equipment pages' Webflow stylesheet, which this
   page does not load - so they have to live here. The numbers were measured off
   /en/equipment-light rather than guessed: flex, padding 16px 30px, gap 16px,
   66px tall, brand with a 24px logo, language pill 23px high pushed to the far
   side by the PAIRED auto margins.

   Paired auto margin: the brand AND the nav each take margin-inline-end:auto,
   so the free space splits in two and the nav lands in the middle. With only
   one of the pair the nav never centres - and in Arabic, where the nav is
   lifted out of flow, this is the only thing keeping the language pill away
   from the logo. Logical properties throughout, so RTL mirrors on its own. */
body.clean { background: var(--bg, #f3efea); }

header.hdr {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 30px;
  background: transparent;
}
header.hdr .brand {
  display: flex;
  align-items: center;
  min-height: 34px;
  flex: 0 1 auto;
  text-decoration: none;
  margin-inline-end: auto;
}
header.hdr .brand img {
  display: block;
  width: auto;
  height: 24px;
  /* the file is dark-on-transparent already; brightness(0) is what the other
     pages apply to flatten it to ink */
  filter: brightness(0);
}
header.hdr .v4nav { margin-inline-end: auto; }

header.hdr .ctl-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  margin-inline-start: 10px;
  height: 23px;
  padding: 0 14px;
  border: 1px solid var(--ink, #000);
  border-radius: var(--radius-pill, 999px);
  color: var(--ink, #000);
  font-family: var(--font, Inter, sans-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.15px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
header.hdr .ctl-lang:hover { background: var(--ink, #000); color: var(--bg, #f3efea); }

@media (max-width: 900px) {
  /* the skin's own breakpoint wraps .v4nav to its own row; match it */
  header.hdr { flex-wrap: wrap; padding: 12px 18px; gap: 10px; }
  header.hdr .v4nav { order: 3; width: 100%; margin-inline-end: 0 !important; }
}