/* ============================================================
   Vita D3 ODF — Base: reset, typography, RTL foundation
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* fixed nav offset for anchor jumps */
  overflow-x: clip;         /* contain decorative halo bleed w/o breaking sticky nav */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--color-ink-900);
  background: var(--color-bg);
  background-image: var(--gradient-bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Arabic / RTL: swap fonts + direction. Toggled by JS on <html>. */
html[lang="ar"] { direction: rtl; }
html[lang="ar"] body { font-family: var(--font-body-ar); }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .u-display { font-family: var(--font-display-ar); }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink-900);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 5vw, var(--fs-3xl)); }
h2 { font-size: clamp(1.75rem, 4vw, var(--fs-2xl)); }
h3 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }

p { margin: 0 0 var(--space-4); max-width: 68ch; text-wrap: pretty; }

a {
  color: var(--color-teal-700);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-teal-500); }

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

button { font-family: inherit; cursor: pointer; }

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

/* Data / numerals: IU, mg, kg, film count, scores */
.u-data { font-family: var(--font-data); font-feature-settings: "tnum" 1; }
html[lang="ar"] .u-data { font-family: var(--font-data); direction: ltr; unicode-bidi: embed; }

/* Focus: visible, brand-colored, never removed */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow-teal);
  border-radius: var(--radius-sm);
}

/* Accessible hide */
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
  position: absolute; inset-inline-start: var(--space-4); top: -100px;
  background: var(--color-surface); color: var(--color-teal-700);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md); z-index: var(--z-overlay);
  font-weight: var(--fw-semibold);
  transition: top var(--dur-mid) var(--ease-out);
}
.skip-link:focus { top: var(--space-3); }

/* Language visibility helper: JS sets [data-active-lang] on <html>.
   Any element carrying dual-language nodes uses .lang-en / .lang-ar. */
html[data-active-lang="en"] .lang-ar,
html[data-active-lang="ar"] .lang-en { display: none !important; }

/* Utility text tokens */
.u-muted   { color: var(--color-ink-500); }
.u-eyebrow {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-sm); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-teal-700);
}
html[lang="ar"] .u-eyebrow { letter-spacing: 0; text-transform: none; }

.u-gold { color: var(--color-gold-700); }
.u-teal { color: var(--color-teal-700); }
.u-teal:hover { color: #c2820f; }