/* ============================================================
 * Arabic / RTL overrides — applied only when html[dir="rtl"].
 * Loaded on /ar/* pages via build.mjs.
 * ============================================================ */

html[dir="rtl"] { direction: rtl; }

/* ---------- Dubai font (locally hosted under /fonts/dubai/) ---------- */
@font-face {
  font-family: "Dubai";
  src: url("/fonts/dubai/Dubai-Light.woff2") format("woff2"),
       url("/fonts/dubai/Dubai-Light.woff") format("woff");
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: "Dubai";
  src: url("/fonts/dubai/Dubai-Regular.woff2") format("woff2"),
       url("/fonts/dubai/Dubai-Regular.woff") format("woff");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Dubai";
  src: url("/fonts/dubai/Dubai-Medium.woff2") format("woff2"),
       url("/fonts/dubai/Dubai-Medium.woff") format("woff");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Dubai";
  src: url("/fonts/dubai/Dubai-Bold.woff2") format("woff2"),
       url("/fonts/dubai/Dubai-Bold.woff") format("woff");
  font-weight: 700; font-display: swap;
}

/* Apply Dubai to all text on RTL pages */
html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] p, html[dir="rtl"] a, html[dir="rtl"] span,
html[dir="rtl"] div, html[dir="rtl"] input,
html[dir="rtl"] textarea, html[dir="rtl"] button,
html[dir="rtl"] label {
  font-family: "Dubai", "Tajawal", "Segoe UI", system-ui, sans-serif !important;
}

/* ---------- text alignment ---------- */
html[dir="rtl"] .heading-01,
html[dir="rtl"] .heading-02,
html[dir="rtl"] .heading-03,
html[dir="rtl"] .heading-04,
html[dir="rtl"] .heading-05,
html[dir="rtl"] .heading-06,
html[dir="rtl"] .heading-07,
html[dir="rtl"] .heading-08,
html[dir="rtl"] .heading-8,
html[dir="rtl"] .body-01,
html[dir="rtl"] .body-02,
html[dir="rtl"] .body-02-medium,
html[dir="rtl"] .sub-title,
html[dir="rtl"] .sub-title-semibold,
html[dir="rtl"] .section-heade-titile,
html[dir="rtl"] .section-header-text {
  text-align: right;
  word-break: normal;
  overflow-wrap: break-word;
}

html[dir="rtl"] .text-field,
html[dir="rtl"] .textarea {
  text-align: right;
  direction: rtl;
}

/* ---------- font-size adjustments (Arabic glyphs are wider) ---------- */
html[dir="rtl"] .heading-01 { font-size: clamp(48px, 8vw, 110px); line-height: 1.15; }
html[dir="rtl"] .heading-04 { line-height: 1.25; }
html[dir="rtl"] .heading-8  { font-size: clamp(40px, 7vw, 96px); line-height: 1.2; }

/* ---------- hero (homepage) — kill the LTR-only stagger spaces ---------- */
html[dir="rtl"] .hero-title-3 .heading-8 { white-space: normal; }
html[dir="rtl"] .home-hero-inline .hero-line-2 { display: none; } /* underline accent fights with RTL */

/* ---------- section header (eyebrow + main heading) ---------- */
/* Already a flex row in LTR — direction:rtl reverses naturally. Just ensure spacing. */
html[dir="rtl"] .section-header {
  align-items: flex-start;
}
html[dir="rtl"] .section-heade-titile {
  /* eyebrow text */
  flex-shrink: 0;
}

/* ---------- about-container product showcase ----------
 * In LTR: product titles on left, description card on right.
 * In RTL: swap so titles are on the right (start), card on the left (end).
 * The container is a flex row by default; direction:rtl handles the reversal,
 * but we explicitly normalize edge cases in case Webflow set flex-direction. */
html[dir="rtl"] .about-container > * { direction: rtl; }

/* ---------- numbers / Latin runs — keep LTR inside Arabic context ---------- */
html[dir="rtl"] .number-style,
html[dir="rtl"] [class*="number-box"],
html[dir="rtl"] .contact-block .body-02-medium {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* ---------- arrow icons — flip horizontally so they point logically forward ---------- */
html[dir="rtl"] .btn-arrow-img,
html[dir="rtl"] .arrow-icon,
html[dir="rtl"] [class*="arrow"] img,
html[dir="rtl"] .scroll-icon {
  transform: scaleX(-1);
}

/* ---------- footer ---------- */
html[dir="rtl"] .footer-bottom,
html[dir="rtl"] .footer-content,
html[dir="rtl"] .footer-wrapper {
  direction: rtl;
}
html[dir="rtl"] .footer-copyright-center { text-align: right; }
html[dir="rtl"] .privacy-terms-wrap { direction: rtl; }

/* ---------- language switcher stays LTR (codes EN/IT/etc.) ---------- */
html[dir="rtl"] .lang-switcher { direction: ltr; }

/* ---------- form layout ---------- */
html[dir="rtl"] .form-field-wrap label { display: block; text-align: right; }

/* ---------- phone/email values that are inherently LTR ---------- */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}