/* =============================================================================
   Arabic — direction and type.

   LOADED ONLY BY ar/index.html AND ar/landing.html. tools/build-ar-pages.mjs
   adds the <link>; nothing in the English pages references this file. That is
   deliberate and it is the whole safety argument for this file: an English
   page cannot be affected by a rule in here, however badly written, because
   the stylesheet is never on the page.

   Everything is scoped under [dir="rtl"] as well, so the file is inert if it
   is ever loaded on an LTR page by accident.

   WHY OVERRIDES RATHER THAN LOGICAL PROPERTIES EVERYWHERE
   The app's markup is Tailwind, several hundred physical utilities deep
   (-ml-1, pl-5, left-3, text-left). Converting all of them to ms-/ps-/start-
   would touch every screen in the app and every one of those edits is a
   chance to change the English layout. This file changes nothing about
   English by construction, and it is far easier to review: every rule in it is
   a statement about what Arabic needs differently.
   ========================================================================== */

/* --- Type -----------------------------------------------------------------
   Three faces, mapped onto the two the Latin site uses:

     display  Fraunces, a high-contrast editorial serif
              -> Noto Kufi Arabic. At 40-64px a headline needs presence and
                 even colour; Kufi has both, and its geometric build sits
                 beside the Latin wordmark without arguing with it.

     body     Work Sans, a plain grotesque
              -> IBM Plex Sans Arabic. Designed as the Arabic companion to a
                 Latin grotesque, which is exactly the relationship here, and
                 it holds up at the 11-13px the swatch captions use.

     fallback Noto Naskh Arabic, for the long paragraphs in the report, where
              a naskh is easier to read than a kufi and the system face is
              whatever the device happens to have.

   Latin runs inside Arabic text — the brand, hex codes, "PDF" — keep their
   own faces, because every family below falls back to the Latin stack. */
/* The three families are requested by a <link> in the Arabic pages' heads, not
   by an @import here: an @import inside a stylesheet is discovered only after
   this file has been fetched and parsed, which puts the font request one full
   round trip later on the page that needs it most. */

[dir="rtl"] body,
[dir="rtl"] .font-sans {
  font-family: 'IBM Plex Sans Arabic', 'Noto Naskh Arabic', 'Work Sans',
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

[dir="rtl"] .font-display,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .hero-title,
[dir="rtl"] .season-name,
[dir="rtl"] .st-title,
[dir="rtl"] .st-h1,
[dir="rtl"] .oc__title,
[dir="rtl"] .st-amount strong,
[dir="rtl"] .st-amount span {
  font-family: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', 'Fraunces', serif;
}

/* Fraunces is set in italic in a few places. There is no italic in Arabic —
   a slanted Arabic face is a Latin habit applied to a script that does not
   have the convention — so the emphasis is carried by weight instead. */
[dir="rtl"] em,
[dir="rtl"] i,
[dir="rtl"] .st-amount span {
  font-style: normal;
  font-weight: 600;
}

/* Kufi has taller ascenders and no descender tail to speak of, so the tight
   Latin display leading reads cramped and the negative tracking closes the
   joins. Both are relaxed, and only for Arabic. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .hero-title,
[dir="rtl"] .season-name,
[dir="rtl"] .st-title,
[dir="rtl"] .st-h1 {
  letter-spacing: 0;
  line-height: 1.45;
}

/* Tailwind's tracking utilities are applied inline all over the app and all of
   them are wrong for Arabic, where letters join. */
[dir="rtl"] .tracking-tight,
[dir="rtl"] .tracking-widest,
[dir="rtl"] [class*="tracking-["] {
  letter-spacing: 0;
}

/* The uppercase eyebrows. Arabic has no case, so text-transform does nothing
   to the letters and the wide tracking it was paired with just breaks the
   joins apart. */
[dir="rtl"] .uppercase,
[dir="rtl"] .oc-why__label,
[dir="rtl"] .st-sec-label,
[dir="rtl"] .oc-legend__role,
[dir="rtl"] .st-tag,
[dir="rtl"] .eyebrow,
[dir="rtl"] .example-label,
[dir="rtl"] .oc__eyebrow,
[dir="rtl"] .oc-row__title,
[dir="rtl"] .code-panel__label {
  text-transform: none;
  letter-spacing: 0;
}

/* --- Things that must flip ------------------------------------------------
   Each of these is a physical property in css/styles.css or a Tailwind
   utility in the markup that points at a specific edge. */

/* Quote and callout rules: the bar belongs on the side the text starts. */
[dir="rtl"] .faq-a,
[dir="rtl"] blockquote,
[dir="rtl"] .optional-block__body,
[dir="rtl"] .light-notice__body {
  text-align: start;
}

[dir="rtl"] [class*="border-l-"] {
  border-left-width: 0;
  border-right-width: 2px;
  border-right-style: solid;
  border-right-color: inherit;
}

/* Custom list bullets are absolutely positioned at left: 0 with a matching
   padding-left. Both edges move together or the marker lands on the text. */
[dir="rtl"] .st-list,
[dir="rtl"] .hero-points,
[dir="rtl"] .gets__list,
[dir="rtl"] .price-list {
  padding-left: 0;
  padding-right: 0;
}

[dir="rtl"] ol,
[dir="rtl"] ul.list-decimal,
[dir="rtl"] .pl-5 {
  padding-left: 0;
  padding-right: 1.25rem;
}

/* "Push me to the far end" — every one of these meant the end of the line,
   not the right of the screen. */
[dir="rtl"] .ml-auto,
[dir="rtl"] .find-season__cta,
[dir="rtl"] .oc-hint__cta,
[dir="rtl"] .home-outfits__arrow {
  margin-left: unset;
  margin-inline-start: auto;
}

/* Overlapping dot stacks. The overlap has to run the other way or the stack
   reads as drawn back to front. */
[dir="rtl"] .verdict__dot + .verdict__dot { margin-left: 0; margin-right: -5px; }
[dir="rtl"] .oc-dot + .oc-dot { margin-left: 0; margin-right: max(-5.97cqw, -16px); }
[dir="rtl"] .season-pick__dot + .season-pick__dot { margin-left: 0; margin-right: -4px; }
[dir="rtl"] .home-outfits__dots span + span { margin-left: 0; margin-right: -9px; }

/* Inline icons that sit before their text. */
[dir="rtl"] .st-secure svg,
[dir="rtl"] .hero-note-icon {
  margin-right: 0;
  margin-inline-end: 5px;
}

/* The pay card's terms column is set right-aligned to sit under the price;
   in Arabic the price is on the right, so the column goes left. */
[dir="rtl"] .st-hybrid .st-terms { text-align: left; }

/* Dialog close buttons are pinned to one corner, and the heading reserves
   room for them on that same side. */
[dir="rtl"] .idle-close,
[dir="rtl"] .hiw-close { right: auto; left: 0.15rem; }
[dir="rtl"] .idle-card--text h2 { padding-right: 0; padding-left: 34px; }

/* The back chevron, the "continue" arrows and the disclosure chevron all
   point along the reading direction, which has reversed. SVG is not mirrored
   by dir on its own. */
[dir="rtl"] #back-step svg,
[dir="rtl"] .st-back svg,
[dir="rtl"] .st-button svg,
[dir="rtl"] .st-go svg,
[dir="rtl"] .hero-cta span[aria-hidden],
[dir="rtl"] .home-outfits__arrow,
[dir="rtl"] .optional-block__chevron,
[dir="rtl"] .type__link,
[dir="rtl"] .btn svg {
  transform: scaleX(-1);
}

/* …but not these: a clock, a camera, a padlock and a tick are objects, not
   direction. Mirroring them makes them look broken, and the rule above is
   broad enough to catch some of them. */
[dir="rtl"] .hero-points svg,
[dir="rtl"] .st-icon svg,
[dir="rtl"] .st-tick svg,
[dir="rtl"] .st-badge svg,
[dir="rtl"] .scroll-hint-arrow,
[dir="rtl"] .gets__tick svg,
[dir="rtl"] .share-btn svg,
[dir="rtl"] .hiw-btn svg,
[dir="rtl"] .subtitle-lock,
[dir="rtl"] .mystery-lock,
[dir="rtl"] .signature-badge,
[dir="rtl"] .brand img,
[dir="rtl"] .preview-cta-disc svg,
[dir="rtl"] .tap-hint svg {
  transform: none;
}

/* The arrow glyphs written as text rather than drawn. →  becomes ←, and the
   two are swapped rather than mirrored so the glyph is a real character and
   stays in the font. */
[dir="rtl"] .type__link,
[dir="rtl"] .hero-cta span[aria-hidden] {
  transform: none;
}

/* The drape frame's loupe, the sampler's readout and the photo hint are
   pinned to a corner of the canvas. */
[dir="rtl"] #draft-readout { left: auto; right: 0.75rem; }

/* --- The landing page's hero carousel -------------------------------------
   Left as a left-to-right component inside a right-to-left page, on purpose.

   It is a scroll-snap strip whose script positions slides by index. Under
   dir=rtl the strip starts at its far end, so the page opened on slide four
   and the arrows walked backwards; the fix is either to flip the arithmetic in
   build-landing.mjs's script — which is shared with the English page and would
   put a direction branch in the middle of it — or to tell this one component
   that its axis has not changed. The second is true: the slides are
   photographs with English set into them, and the arrows point along the
   strip, not along the text.

   The slide captions and the section heading around it stay Arabic and
   right-to-left; only the strip's own axis is pinned. */
[dir="rtl"] .st-hero .st-carousel {
  direction: ltr;
}

[dir="rtl"] .st-hero .st-arrow svg {
  transform: none;
}


/* The progress bar is a flex row of equal segments, which reverses on its own
   under dir=rtl — the filled steps correctly start on the right. Nothing to
   do here, and this comment is so nobody "fixes" it. */

/* --- Latin inside Arabic --------------------------------------------------
   Hex codes, prices, the brand and the English half of a season name. bdi
   handles the ordering; these keep the Latin face so a hex is not set in a
   font that has no Latin to set it with. */
[dir="rtl"] bdi[dir="ltr"],
[dir="rtl"] .code-panel__code,
[dir="rtl"] [data-shade-hex],
[dir="rtl"] .footer-lang a[lang="en"] {
  font-family: 'Work Sans', -apple-system, sans-serif;
}

/* The English half of a season name, on the three screens that carry it.
   The isolate fixes the ORDER; it does not stop the line breaking between
   "(Dark" and "Autumn)", which put one bracket at each end of two different
   lines in a 46px display face. nowrap forces the break to fall between the
   Arabic name and the English one, which is where it belongs — and the
   English then reads as the gloss it is rather than competing with the
   headline.

   display:block, not nowrap alone: with the two names in one inline flow the
   Arabic wrapped and the English landed at the visual left of the FIRST line,
   so the reading order came out الخريف → (Dark Autumn) → الداكن. Its own line
   is the only arrangement that reads in one direction. */
/* .season-name is a flex row, so display:block on the child does nothing and
   the gloss was laid out BESIDE the name — far enough beside it that it
   overflowed the heading's own box to the left. The row has to be allowed to
   wrap, and the gloss given a full-width basis, before it takes its own line. */
[dir="rtl"] .season-name {
  flex-wrap: wrap;
  align-items: baseline;
}

[dir="rtl"] .season-name bdi,
[dir="rtl"] .oc__eyebrow bdi {
  display: block;
  flex-basis: 100%;
  /* dir="ltr" on the isolate makes its own text-align:start the LEFT edge, so
     the gloss sat under the far end of a right-aligned headline. */
  text-align: right;
  white-space: nowrap;
  font-size: 0.62em;
  font-weight: 500;
  opacity: 0.72;
}

/* A number at the start of an Arabic line — "25 colors", "30 seconds" — is
   neutral to the bidi algorithm and can jump to the wrong end of the sentence.
   The isolate keeps it where it was written. */
[dir="rtl"] .st-num,
[dir="rtl"] .step__time,
[dir="rtl"] .oc-card__num,
[dir="rtl"] .fam__count {
  unicode-bidi: isolate;
}