/* ============================================================
   Khateeb Kids Clinic — shared foundation
   Typography, spacing, RTL-safe primitives, common components.

   Everything directional uses CSS logical properties, so the same
   rules serve Arabic (RTL, default) and English (LTR) with no
   [dir="rtl"] override sheet.
   ============================================================ */

/* ---------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg, video { display: block; max-width: 100%; }
/* width/height attributes are kept on <img> to reserve space and avoid CLS,
   but a resolved height makes the browser ignore `aspect-ratio`. Releasing
   height back to auto lets our ratio rules win while CLS protection stays. */
img[width][height] { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
:where(ul, ol)[role="list"] { list-style: none; padding: 0; }

/* ------------------------------------------------------ variables */
:root {
  /* Type families. Plex Sans Arabic carries Latin too, so a single
     stack renders both scripts inside one superfamily. */
  --font-ui: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-latin: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-display: "Baloo Bhaijaan 2", "IBM Plex Sans Arabic", system-ui, sans-serif;

  /* Type ramp — capped and semantic (docs/01 D7) */
  --fs-display: clamp(2.1rem, 1.4rem + 3.2vw, 3.75rem);
  --fs-h1: clamp(1.7rem, 1.25rem + 2.1vw, 2.75rem);
  --fs-h2: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  --fs-h3: 1.2rem;
  --fs-title: 1.0625rem;
  --fs-body: 1rem;
  --fs-label: 0.875rem;
  --fs-caption: 0.78125rem;

  /* Arabic needs more vertical room than Latin at the same nominal size
     (W3C alreq: ascenders/descenders extend further). */
  --lh-tight: 1.2;
  --lh-heading: 1.3;
  --lh-body: 1.6;

  /* 4pt base grid, 8pt default step */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(48, 40, 29, .06), 0 1px 3px rgba(48, 40, 29, .05);
  --shadow-md: 0 4px 10px rgba(48, 40, 29, .06), 0 2px 4px rgba(48, 40, 29, .04);
  --shadow-lg: 0 18px 40px rgba(48, 40, 29, .10), 0 6px 12px rgba(48, 40, 29, .05);
  --shadow-xl: 0 34px 70px rgba(48, 40, 29, .16), 0 10px 22px rgba(48, 40, 29, .07);

  --maxw: 1180px;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Arabic runs one step larger for the same optical size (docs/01 D6, docs/03) */
html[lang="ar"] { --fs-body: 1.0625rem; --fs-label: 0.9375rem; --fs-caption: 0.8125rem; }

/* ---------------------------------------------------------- base */
body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-page);
  font-feature-settings: "kern";
}
html[lang="en"] body { font-family: var(--font-latin); }

h1, h2, h3, h4 { line-height: var(--lh-heading); font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }

/* Numerals stay Western in both languages (docs/03 — Egyptian press,
   Vezeeta and government hotlines all use 0123456789). */
.num, time, [data-num] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Latin text inside an Arabic sentence keeps LTR ordering */
bdi, .ltr { direction: ltr; unicode-bidi: isolate; }

/* A number followed by a Latin unit ("19.4 kg") is TWO bidi runs. In an RTL
   paragraph they lay out right-to-left and render as "kg 19.4". Isolating the
   pair as a single LTR run is the fix — needed anywhere units meet numerals. */
.unit { direction: ltr; unicode-bidi: isolate; display: inline-block; }

::selection { background: var(--c-blue-100); color: var(--c-blue-900); }

/* ------------------------------------------------------- a11y */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; inset-inline-start: var(--s-4); inset-block-start: -100px;
  z-index: 999; background: var(--action-primary);
  /* Not #fff: --action-primary lightens in dark mode, so the on-brand
     foreground token has to move with it. */
  color: var(--text-on-brand);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-weight: 600;
  transition: inset-block-start .18s var(--ease);
}
.skip-link:focus { inset-block-start: var(--s-4); }

/* Motion is opt-in, never opt-out (docs/02 D17) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------- layout */
.wrap { width: min(100% - 2 * var(--s-4), var(--maxw)); margin-inline: auto; }
.stack > * + * { margin-block-start: var(--flow, var(--s-4)); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.grid { display: grid; gap: var(--s-4); }

/* --------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 48px;                 /* clears Material 48, Apple 44, WCAG 2.5.8 */
  padding-inline: var(--s-5);
  border-radius: var(--r-full);
  font-weight: 600; font-size: var(--fs-label);
  text-decoration: none; white-space: nowrap;
  transition: background-color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--action-primary); color: var(--text-on-brand);
  box-shadow: 0 2px 8px rgba(var(--brand-rgb), .28);
}
.btn--primary:hover { background: var(--action-primary-hover); }
.btn--ghost {
  background: transparent; color: var(--text-brand);
  border: 1.5px solid var(--border-brand);
}
.btn--ghost:hover { background: var(--surface-brand-soft); }
.btn--quiet {
  background: var(--surface-sunken); color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}
.btn--quiet:hover { border-color: var(--border-default); }
/* WhatsApp's own green (#25D366 / #1DAA61) only reaches 3.01:1 with white —
   below the 4.5:1 floor for a button label. This is WhatsApp's darker brand
   green, which reads as WhatsApp and measures 5.40:1. */
.btn--wa { background: #0C7A45; color: #fff; }
.btn--wa:hover { background: #0A6539; }
.btn--sm { min-height: 40px; padding-inline: var(--s-4); font-size: var(--fs-caption); }
.btn--block { width: 100%; }

/* Directional glyphs must flip with the writing direction */
.flip-rtl { display: inline-block; }
html[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* ----------------------------------------------------- cards */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* ----------------------------------------------------- chips */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px var(--s-3);
  border-radius: var(--r-full);
  font-size: var(--fs-caption); font-weight: 600;
  background: var(--surface-sunken); color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.chip--brand { background: var(--surface-brand-soft); color: var(--text-brand); border-color: transparent; }
.chip--accent { background: var(--accent-soft); color: var(--status-error); border-color: transparent; }
.chip--ok { background: var(--status-success-soft); color: var(--status-success); border-color: transparent; }
.chip--warn { background: var(--status-warning-soft); color: var(--status-warning); border-color: transparent; }

/* --------------------------------------- placeholder marking
   Anything unconfirmed by the client is visibly flagged so it can
   never be mistaken for real content (docs/04 §3). */
[data-ph] { position: relative; }
[data-ph]::after {
  content: "?";
  position: absolute; inset-block-start: -6px; inset-inline-end: -6px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--status-warning); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
  opacity: 0; transition: opacity .2s var(--ease); pointer-events: none;
}
body.show-ph [data-ph]::after { opacity: 1; }
body.show-ph [data-ph] {
  outline: 1.5px dashed var(--status-warning);
  outline-offset: 3px; border-radius: 3px;
}

/* ------------------------------------------------ i18n swap */
[data-en], [data-ar] { display: inherit; }