/* ==========================================================================
   ANUPANA — rtl.css
   --------------------------------------------------------------------------
   The Arabic layer. Loaded only by pages under /ar/.

   site.css and pages.css are authored entirely in logical properties, so
   setting dir="rtl" on <html> mirrors everything they lay out with no
   per-component overrides. That was the point of the Phase 1 constraint.

   The premium editions (premium.css, midnight.css) were written later,
   without that discipline, and use physical left/right in eighteen places.
   Section 5 of this file overrides the ones the Midnight edition actually
   hits. It is the only reason this file contains layout rules at all.
   ========================================================================== */


/* ==========================================================================
   1. ARABIC TYPE
   Instrument Serif has no Arabic cut, which was stated in DESIGN_SYSTEM.md §8
   rather than glossed over. Amiri stands in for it: a Naskh revival with real
   calligraphic contrast, so it plays the same role in Arabic that a high
   contrast serif plays in Latin. Body stays in the Plex family — IBM Plex
   Sans Arabic is the official sibling of the Latin face, so the two scripts
   share proportions and colour on the page.
   ========================================================================== */

@font-face {
  font-family: "Amiri";
  src: url("../fonts/amiri-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ff-display: "Amiri", "Noto Naskh Arabic", "Times New Roman", serif;
  --ff-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  /* ------------------------------------------------------------------
     LETTER-SPACING MUST BE ZERO. This is the one that breaks Arabic.
     Arabic is a joining script: tracking forces gaps between letters that
     are supposed to be connected, so a tracked label does not read as
     "spaced out", it reads as a broken word. Every tracking token is
     therefore neutralised here, including --ls-caps, which the small
     uppercase labels use throughout the Latin site.
     ------------------------------------------------------------------ */
  --ls-display: 0em;
  --ls-title: 0em;
  --ls-heading: 0em;
  --ls-body: 0em;
  --ls-caps: 0em;

  /* Arabic carries taller ascenders and deeper descenders than Latin, and
     Naskh in particular needs room above and below the baseline. Every
     line-height opens up a step; without this the display sizes clip and
     the body copy feels cramped even though the Latin values are correct. */
  --lh-display: 1.25;
  --lh-title: 1.35;
  --lh-heading: 1.45;
  --lh-snug: 1.6;
  --lh-body: 1.9;
  --lh-loose: 2;

  /* Arabic runs longer than English for the same content and has no
     capitals to anchor the eye, so the comfortable measure is shorter. */
  --measure: 60ch;
  --measure-lede: 46ch;
  --measure-narrow: 36ch;
  --measure-wide: 68ch;
}

/* Amiri sets small for its point size next to Plex. Nudge the display roles
   up so the Arabic and Latin versions carry the same visual weight. */
.t-display { font-size: calc(var(--fs-1000) * 0.88); }
.t-title { font-size: calc(var(--fs-800) * 0.94); }

/* Uppercase is meaningless in Arabic — it has no letter case — and leaving
   it on invites the browser to do nothing while the rule sits there
   misleading whoever reads the CSS next. */
.t-label,
.demo-marker,
.card__meta,
.entry__spec-key,
.spec__key,
.glance__key,
.quote__attrib,
.band__attrib,
.error__code { text-transform: none; }


/* ==========================================================================
   2. DIRECTIONAL GLYPHS
   Logical properties mirror boxes, not artwork. Anything whose meaning is
   tied to reading direction has to be flipped by hand.

   The brand mark is NOT flipped: a vessel under a falling drop is
   symmetrical about the vertical axis and reads identically either way.
   The FAQ "+" is not flipped either, for the same reason.
   ========================================================================== */

[dir="rtl"] .icon-directional { transform: scaleX(-1); }


/* ==========================================================================
   3. NUMBERS AND TIMES
   Latin digits are normal in Gulf usage and are what the clinic's hours are
   written in, so they stay. But a run of Latin digits inside RTL text needs
   an explicit direction or the bidi algorithm reorders ranges like
   09:00–20:00 into 20:00–09:00.
   ========================================================================== */

.timetable__time,
.glance__val,
.index__num,
.entry__num,
.step__num,
.card__num {
  direction: ltr;
  unicode-bidi: isolate;
  /* Inside an LTR-isolated box "start" means left, which put the numeral at
     the far edge away from its heading. "end" is the right edge, where the
     surrounding Arabic text begins. */
  text-align: end;
}

/* The opening hours mix Arabic words with a time range on one line, so the
   container stays RTL and the range is bracketed with LRM marks in the
   translation instead. Forcing the container LTR here would reverse the
   word order for an Arabic reader. */


/* ==========================================================================
   4. THE LANGUAGE SWITCH
   Present on both language trees, so it is styled in this file and in
   site.css identically. Kept as plain links, not a select: two languages do
   not need a control, and a link is reachable, crawlable and needs no JS.
   ========================================================================== */

.langswitch { font-family: var(--ff-body); }


/* ==========================================================================
   5. MIDNIGHT EDITION OVERRIDES
   premium.css and midnight.css set tracking and physical directions as
   literals, so the token resets in section 1 cannot reach them. Everything
   here is scoped to [dir="rtl"] and mirrors a specific physical rule in
   those files; the colours are theirs, quoted so the mirrored edge matches.
   ========================================================================== */

/* Tracking. The single most damaging thing you can do to Arabic is
   letter-space it: it pulls joined letters apart and the word breaks. The
   premium sheets track kickers, brand text and every heading, so this is
   forced rather than negotiated. */
html[dir="rtl"] * { letter-spacing: 0 !important; }

/* Naskh needs air. The premium sheets hard-set tight Latin leading
   (.92–1.1) on every display element; Amiri clips at those values. */
[dir="rtl"] :is(.midnight-copy h1, .premium-intro h2, .premium-section-heading h2,
                .premium-journal h2, .premium-story h3, .premium-therapy-links h3,
                .premium-footer h2, .enquiry-intro h1, .enquiry-intro h2,
                .enquiry-card-heading h3, .appointment-dialog h2,
                .appointment-dialog h3, .direct-contact-card h3) {
  line-height: 1.25;
}
[dir="rtl"] .premium-brand { line-height: 1.3; }

/* Header: the brand pushes everything else to the inline end. premium.css
   does it with margin-right:auto, which in RTL pushes the wrong way. */
[dir="rtl"] .premium-brand { margin-inline: 0 auto; }

/* Hero scrim: darkens the side the copy sits on. Copy is now on the right. */
[dir="rtl"] .midnight-hero::before {
  background: linear-gradient(270deg, rgba(6, 24, 37, .4), transparent 68%);
}

/* Accent edges drawn with border-left. */
[dir="rtl"] .appointment-demo-note,
[dir="rtl"] .form-error-summary,
[dir="rtl"] .whatsapp-preview { border-inline-end: 0; }
[dir="rtl"] .appointment-demo-note { border-inline-start: 2px solid #bd9c65; }
[dir="rtl"] .form-error-summary { border-inline-start: 3px solid #9c342e; }
[dir="rtl"] .whatsapp-preview { border-inline-start: 2px solid #bd9c65; }

/* "Optional" sits at the inline end of its label. */
[dir="rtl"] .field-optional { margin-inline: auto 0; }

/* The native select arrow moves to the left in RTL; make room there. */
[dir="rtl"] .form-field select { padding-inline: .9rem 1.6rem; }

/* Hover nudge on therapy headings travels with the reading direction. */
[dir="rtl"] .premium-therapy-links a:hover h3 { transform: translateX(-4px); }

/* The WhatsApp preview is the visitor's own Arabic message. */
[dir="rtl"] .whatsapp-preview { direction: rtl; text-align: start; }

@media (max-width: 760px) {
  [dir="rtl"] .premium-contact { margin-inline: auto 0; }
  [dir="rtl"] .midnight-hero::before {
    background: linear-gradient(270deg, rgba(6, 24, 37, .55), rgba(6, 24, 37, .12));
  }
}

@media (max-width: 480px) {
  [dir="rtl"] .enquiry-privacy { text-align: start; }
}