/* Respilon KSA base: fonts, reset, type, layout primitives. Every value comes from tokens.css.
 * Logical properties only (inline/block, start/end), so one stylesheet serves RTL and LTR. */

/* ---- Fonts: self hosted OFL variable subsets, one file per script, every weight in it.
 *      An Arabic page loads 2 files (cairo-arabic, cairo-latin for digits and Latin names),
 *      an English page 1 (assistant-latin) plus cairo-arabic only if Arabic text is on it. ---- */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/assistant-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable; /* the drawer locks scroll without the page jumping sideways */
}
body {
  margin: 0;
  font-family: var(--font-ar);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body-ar);
  color: var(--color-navy);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
html[lang^='en'] body {
  font-family: var(--font-en);
  line-height: var(--leading-body-en);
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video { display: block; max-inline-size: 100%; block-size: auto; }
svg { fill: currentColor; } /* an unstyled inline svg paints in the text colour, never default black */
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---- Type. Letter spacing stays 0: spacing out Arabic breaks the joins. ---- */
h1, h2, h3, h4 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  text-wrap: balance;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
.r-lead { font-size: var(--text-md); color: var(--color-ink-muted); }
.r-small { font-size: var(--text-sm); }
.r-muted { color: var(--color-ink-muted); }
.r-eyebrow { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-ink-muted); }
@media (min-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-xl); }
}
@media (min-width: 1200px) {
  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }
}

a {
  color: var(--color-blue);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-thickness var(--motion-fast) var(--ease-standard);
}
a:hover { text-decoration-thickness: 2px; }

/* ---- Focus: always visible, blue on light surfaces, gold on navy. ---- */
:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}
[data-surface='dark'] {
  background: var(--color-navy);
  color: var(--color-white);
}
[data-surface='dark'] a { color: var(--color-white); }
[data-surface='dark'] :focus-visible { outline-color: var(--color-gold); }

/* ---- Bidi. Numbers, SKUs, phones and Latin names sit isolated inside Arabic runs.
 *      isolate, never bidi-override: override reorders the digits of a price. ---- */
bdi, [data-latin], [data-sku], [data-ean], [data-phone], .r-num, .sku { unicode-bidi: isolate; }
/* A code breaks at its hyphen otherwise (CN- on one line, 2025-67604 on the next). */
[data-sku], [data-ean], [data-phone] { white-space: nowrap; }
[data-sku], [data-ean], [data-phone] { direction: ltr; }
/* A Latin name or code set on purpose in Arabic copy (the drafts' <span data-allow-lang>): read
 * left to right as one unit, or "7 DAY PROGRAM" shows as "DAY 7" with PROGRAM after it. */
[data-allow-lang] { unicode-bidi: isolate; direction: ltr; }
[dir='rtl'] [data-icon-dir] { transform: scaleX(-1); }

/* ---- Accessibility helpers ---- */
.r-sr-only,
.r-skip:not(:focus) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.r-skip:focus {
  position: fixed;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-6);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  color: var(--color-navy);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* ---- Layout ---- */
:root { --gutter: var(--gutter-mobile); --section-gap: var(--section-gap-mobile); }
@media (min-width: 768px) { :root { --gutter: var(--gutter-tablet); --section-gap: var(--section-gap-tablet); } }
@media (min-width: 1200px) { :root { --gutter: var(--gutter-desktop); --section-gap: var(--section-gap-desktop); } }

.r-container {
  inline-size: 100%;
  max-inline-size: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.r-measure { max-inline-size: var(--measure); }
/* The audit measures a section gap as the space between two [data-section] boxes plus their
 * inner block padding, so half the gap on each side gives exactly one gap between any two. */
[data-section] { padding-block: calc(var(--section-gap) / 2); }
.r-tint-cream { background: var(--color-cream); }
.r-tint-grey { background: var(--color-grey); }
.r-flow > * + * { margin-block-start: var(--space-4); }
.r-flow-lg > * + * { margin-block-start: var(--space-8); }

/* ---- Motion: nothing moves for readers who asked for less. ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}