/* ============================================================================
   SADER — BASE
   Modern reset + font loading + base typography + layout primitives + RTL.
   Depends on tokens.css (must be linked BEFORE this file).
   ----------------------------------------------------------------------------
   FONTS: imported here for convenience, but for best performance the section
   pages SHOULD use the <link rel="preconnect"> + <link> tags documented in
   DESIGN.md (preloading Fraunces beats @import). The @import below guarantees
   the foundation preview + any page that forgets the links still renders.
   ============================================================================ */

/* Latin + Arabic fonts — self-hosted (Fraunces, Inter, Almarai). No external CDN. */
@import url("/static/fonts/fonts.css");

/* ==========================================================================
   RESET
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the fixed header */
  scroll-padding-block-start: calc(var(--header-h) + var(--space-5));
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
  background-color: var(--bg);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img, video { object-fit: cover; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; }

[hidden] { display: none !important; }

/* Honor reduced-data / save-data could be added per-section as needed. */

/* ==========================================================================
   TYPOGRAPHY — base element styling driven by tokens
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  /* Fraunces optical sizing — large headings get the high-contrast cut */
  font-optical-sizing: auto;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--fs-h4); letter-spacing: var(--tracking-tight); font-weight: var(--fw-medium); }
h5 { font-size: var(--fs-body); font-weight: var(--fw-semi); }
h6 { font-size: var(--fs-small); font-weight: var(--fw-semi); }

p { max-width: 68ch; }

strong, b { font-weight: var(--fw-semi); }

em, i { font-style: italic; }

small { font-size: var(--fs-caption); }

/* Body links inside prose */
.prose a,
a.link {
  color: var(--text);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
  padding-block-end: 1px;
}
.prose a:hover,
a.link:hover { color: var(--accent-deep); background-size: 100% 2px; }

/* Long-form prose rhythm */
.prose > * + * { margin-block-start: 1.2em; }
.prose h2, .prose h3 { margin-block-start: 1.8em; }

::selection {
  background-color: var(--brass);
  color: var(--ink-brown);
}

/* ==========================================================================
   SCROLLBAR — subtle, warm, brand-aware
   ========================================================================== */
@supports (scrollbar-color: auto) {
  html {
    scrollbar-color: var(--brass-deep) transparent;
    scrollbar-width: thin;
  }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--brass-deep);
  border: 3px solid var(--bg);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--brass); }

/* ==========================================================================
   FOCUS — visible brass ring for keyboard users only
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--space-4);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-5);
  background: var(--espresso);
  color: var(--text-on-dark);
  border: 1px solid var(--line-brass);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.skip-link:focus { inset-block-start: var(--space-4); }

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-inline-size: var(--container-wide); }
.container--narrow { max-inline-size: var(--container-narrow); }
.container--flush  { padding-inline: 0; }  /* full-bleed grids */

/* Section vertical rhythm */
.section {
  position: relative;
  padding-block: var(--section-pad);
  background-color: var(--bg);
  color: var(--text);
}
.section--tight { padding-block: var(--section-pad-tight); }
.section--flush-top    { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

/* Full-bleed helper inside a constrained parent */
.full-bleed {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Visually hidden but accessible */
.visually-hidden,
.sr-only {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   RTL / BILINGUAL ARCHITECTURE
   The whole system uses CSS logical properties, so direction flips for free.
   Here we only (1) swap the font stacks to the Arabic families and (2) tune
   leading / numerals for Arabic. NO separate stylesheet, NO layout rewrite.
   ========================================================================== */
[dir="rtl"] {
  --font-display: var(--font-serif-ar);
  --font-body:    var(--font-sans-ar);
  --lh-body:      var(--lh-body-ar);
  /* Arabic display reads better with neutral tracking */
  --tracking-display: 0;
  --tracking-tight:   0;
  /* Almarai ships only 300/400/700/800 — remap the 500/600 tokens to the
     nearest real weights so Arabic text never faux-renders.               */
  --fw-medium: 400;
  --fw-semi:   700;
}

[dir="rtl"] body { line-height: var(--lh-body-ar); }

/* Arabic display should not be italicised the way Fraunces is; keep upright. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { font-style: normal; }

/* Use Almarai's heaviest weight on big headings to preserve display hierarchy
   now that Arabic has no serif/sans contrast. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-weight: 800; }

/* ── Arabic hero titles — one shared treatment across every page ───────────
   The homepage hero (s-hero__headline, tuned in s-hero.css) is the reference:
   a composed display size SMALLER than the Latin ramp (Almarai reads larger
   per px), at the regular weight, with only the <em> accent word in bold so it
   pops like "Legal" does in the English hero. Mirror it on every other hero so
   the Arabic site reads as one family. Scoped to RTL — Latin pages untouched. */
[dir="rtl"] .s-about-hero__title,
[dir="rtl"] .s-archive-hero__headline,
[dir="rtl"] .s-contact-hero__headline,
[dir="rtl"] .sp-hero__title,
[dir="rtl"] .sd-hero__title,
[dir="rtl"] .s-newsroom__title,
[dir="rtl"] .s-publication__title,
[dir="rtl"] .s-gen-detail__name {
  font-size: clamp(1.875rem, 1.2rem + 3.6vw, 4.5rem);
  font-weight: var(--fw-regular);
  line-height: 1.22;
}
[dir="rtl"] .s-about-hero__title em,
[dir="rtl"] .s-archive-hero__headline em,
[dir="rtl"] .s-contact-hero__headline em,
[dir="rtl"] .sp-hero__title em {
  font-weight: 700;
}

/* Keep Latin numerals/brand tokens (years like 1863, "SADER") crisp even
   inside RTL prose — wrap such fragments in <span class="ltr"> / [lang="en"]. */
.ltr, [lang="en"] {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-sans);
}
[dir="rtl"] .ltr--serif, [dir="rtl"] [lang="en"].is-serif {
  font-family: var(--font-serif);
}

/* Mirror inline media that implies direction (arrows handled in components). */

/* ==========================================================================
   RESPONSIVE TYPE — small refinements at the extremes
   (most scaling is handled by clamp() in tokens.css)
   ========================================================================== */
@media (max-width: 640px) {
  p { max-width: none; }
}

/* ==========================================================================
   REDUCED MOTION — global safety net.
   Components gate their motion behind (prefers-reduced-motion: no-preference);
   this block additionally neutralises anything that slips through and makes
   .reveal content immediately visible.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}