/* ============================================================
   PETRONA — Arabic / RTL override layer
   Loaded ONLY on /ar/* pages, after css/main.css.
   Does not modify main.css. Every rule here either:
     (a) retypes the page via the --font-display/--font-body
         custom properties main.css already uses everywhere, or
     (b) neutralises a Latin-only typographic technique
         (tracked uppercase, italic) that breaks in Arabic, or
     (c) mirrors a small, confirmed list of physical-direction
         rules from main.css (left/right, margin/padding-left).
   Rules intentionally NOT mirrored (kept identical to English)
   are noted inline — see the implementation report for why.
   ============================================================ */

/* ---------- Arabic fonts ---------- */
@font-face{
  font-family:'Markazi Arabic';
  src:url('../fonts/markazi-arabic-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Markazi Arabic';
  src:url('../fonts/markazi-arabic-700-normal.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Noto Sans Arabic';
  src:url('../fonts/notosans-arabic-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Noto Sans Arabic';
  src:url('../fonts/notosans-arabic-700-normal.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}

/* ---------- Retype the page via main.css's own tokens ----------
   Every font-family in main.css routes through var(--font-display)
   or var(--font-body) — redefining them once retypes the whole page. */
html[dir="rtl"]{
  direction:rtl;
  --font-display:'Markazi Arabic',Georgia,serif;
  --font-body:'Noto Sans Arabic','Segoe UI',system-ui,sans-serif;
  /* letter-spacing is inherited, so this is a baseline for any
     plain text node that has no letter-spacing rule of its own.
     It does NOT reach elements main.css tracks directly (.field
     label, .stat .stat-l, etc.) — a direct declaration on an
     element always wins over an inherited value regardless of
     specificity, so those are neutralised explicitly below instead. */
  letter-spacing:normal;
}

/* ---------- Neutralise Latin-only tracking/case treatments ----------
   Wide letter-spacing breaks Arabic letter-joining; uppercase has no
   meaning in Arabic. Applied to every selector in main.css that sets
   letter-spacing and/or text-transform:uppercase on text that can be
   Arabic — audited by grepping every letter-spacing declaration in
   main.css (18 rules total). Two are deliberately excluded because
   they carry Latin-only technical content and must keep their own
   tracking: .cert-card__meta .num (ISO codes) and .lang-switch
   ("EN"/"العربية" pill, already !important in main.css). */
html[dir="rtl"] .display,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .spec,
html[dir="rtl"] .btn,
html[dir="rtl"] .textlink,
html[dir="rtl"] .nav-list a,
html[dir="rtl"] .brand-word,
html[dir="rtl"] .scroll-cue,
html[dir="rtl"] .collection-card__index,
html[dir="rtl"] .finish-list .num,
html[dir="rtl"] .value .num,
html[dir="rtl"] .stat .stat-l,
html[dir="rtl"] .contact-line .label,
html[dir="rtl"] .footer-col h4,
html[dir="rtl"] .contact-card .label,
html[dir="rtl"] .field label{
  letter-spacing:normal;
  text-transform:none;
}

/* ---------- Emphasis: no italic in Arabic ----------
   English uses <em>{font-style:italic} inside .display headings.
   Arabic substitutes the brand's terracotta accent colour instead
   of a synthetic (and broken-looking) oblique. */
html[dir="rtl"] .display em{
  font-style:normal;
  color:var(--terracotta);
  letter-spacing:normal;
}

/* ---------- Hero scroll cue: mirror side + no vertical Arabic script ----------
   main.css pins .scroll-cue to the physical right edge. Under RTL,
   .hero__foot's flex order reverses (see "Deliberately NOT mirrored"
   note below — that reversal is native flex behaviour, not a rule
   here), which moves .hero__actions (the "استكشف منتجاتنا" CTA) to
   the LEFT and .hero__tag (supporting copy) to the RIGHT, alongside
   the headline. A cue still pinned right therefore lands on top of
   the headline instead of the CTA it's meant to sit above.
   Mirroring to left:var(--gutter) puts it back above the CTA, its
   intended anchor, matching the English composition on the opposite
   side. main.css also sets writing-mode:vertical-rl for the rotated
   "Scroll" word; Arabic has no vertical-writing convention, so it
   runs horizontally instead. */
html[dir="rtl"] .scroll-cue{
  right:auto;
  left:var(--gutter);
  writing-mode:horizontal-tb;
}

/* ---------- Confirmed physical-direction mirrors ---------- */
html[dir="rtl"] .skip-link{ left:auto; right:-999px; }
html[dir="rtl"] .skip-link:focus{ right:0; }

html[dir="rtl"] .nav-list a::after{ left:auto; right:0; }

html[dir="rtl"] .spec span b{ margin-left:0; margin-right:.5em; }

html[dir="rtl"] .collection-card__index{ left:auto; right:1.25rem; }

html[dir="rtl"] .finish-list li{ transition:padding-right .35s var(--ease); }
html[dir="rtl"] .finish-list li:hover{ padding-left:0; padding-right:1rem; }
html[dir="rtl"] .finish-list p{ text-align:left; }
@media (max-width:600px){
  html[dir="rtl"] .finish-list p{ text-align:right; }
}

html[dir="rtl"] .form-status{ border-left:none; border-right:2px solid var(--sage); }
html[dir="rtl"] .form-status.is-error{ border-right-color:var(--terracotta); }

/* ---------- Contact form: Safari RTL grid-blowout fix ----------
   main.css never sets min-width anywhere, and while .contact-grid
   correctly uses minmax(0,Nfr) to guard its own track, the nested
   .form-row{grid-template-columns:1fr 1fr} does not carry the same
   protection, and neither .field nor its input/select/textarea set
   min-width:0. Per the CSS Grid spec, a grid item's default
   min-width is `auto`, which resolves to its content's min-content
   size unless overridden — here that's mostly the Arabic label text
   ("الشركة (اختياري)", "رقم الهاتف (اختياري)"), which is a longer
   unbroken run than its English equivalent. When that min-content
   exceeds the item's 1fr share, engines differ in how they resolve
   it: Chromium tends to shrink the control anyway, while Safari
   honours the min-content floor and lets the item overflow its
   track instead of shrinking to fit.
   Under RTL, .form-row's second DOM child (company, phone) lands in
   the grid's physically LEFT-hand track (column order reverses
   under dir="rtl", DOM/auto-placement order doesn't), so it's
   specifically the left-column fields whose border-bottom extends
   past the white card in Safari — matching the reported symptom
   exactly. Setting min-width:0 only ever permits a grid item to
   shrink further; it can't push anything wider, so it's a no-op
   wherever a browser wasn't already blowing the track out. Fixed
   here rather than in main.css to keep it scoped to the Arabic
   contact form only, per the requested fix scope. */
html[dir="rtl"] .form-row > .field,
html[dir="rtl"] .field input,
html[dir="rtl"] .field select,
html[dir="rtl"] .field textarea{
  min-width:0;
}

/* ---------- Honeypot: prevent RTL horizontal-overflow bug ----------
   main.css hides this field at left:-9999px. In an LTR document that offset
   never expands the page's scrollable area, but under dir="rtl" browsers
   include it in the leftward (backward) scrollable overflow, producing a
   ~10,000px-wide phantom scroll region on every page with the contact form.
   Confirmed by measuring document.documentElement.scrollWidth: 1440px on
   the English page, 11439px on the Arabic page, with identical CSS.
   Clipping instead of offsetting keeps the field invisible without ever
   expanding layout in either direction. */
html[dir="rtl"] .hp-field{
  left:auto!important; right:auto!important;
  width:1px!important; height:1px!important;
  overflow:hidden!important;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- Brands & Partners: preserve approved visual order ----------
   The logo wall is a fixed brand composition, not reading content —
   under dir="rtl" CSS Grid auto-placement would otherwise start
   column 1 at the physical right edge and mirror the whole matrix.
   Forcing direction:ltr on just the grid keeps the exact left-to-right
   logo order approved for English, while the heading around it stays
   RTL like the rest of the section. */
html[dir="rtl"] .brands__grid{
  direction:ltr;
}

/* ---------- Deliberately NOT mirrored ----------
   .wa-float{right:1.4rem}     WhatsApp buttons stay bottom-right by regional convention
   .nav-toggle span{left/right} symmetric width declaration, not directional
   flex "row" item order       reverses automatically per CSS spec under dir="rtl"
   (.scroll-cue IS mirrored — see the hero scroll cue rule above — because
   its anchor, the CTA, moves via that same flex reversal.) */

/* ---------- Mixed-content safety ----------
   Keeps embedded phone numbers, emails, SKUs and standard codes in their
   own LTR run inside RTL paragraphs where authors mark them explicitly. */
html[dir="rtl"] [dir="ltr"]{ unicode-bidi:isolate; }