/**
 * ar-rtl.css — Arabic RTL Override Stylesheet
 * Injected only into /ar/ pages by scripts/translate.js at build time.
 * This file lives in public/ so Vite copies it to dist/ar-rtl.css automatically.
 */

/* ── Arabic Font ──────────────────────────────────────────────────────────────*/
:root {
  --font-arabic: 'Noto Sans Arabic', 'Segoe UI', sans-serif;
  --font-latin: 'Inter', 'Outfit', system-ui, sans-serif;
}

html[dir="rtl"],
html[dir="rtl"] body {
  font-family: var(--font-arabic) !important;
  direction: rtl;
}

/* ── Global Text Direction ────────────────────────────────────────────────────*/
html[dir="rtl"] .text-left {
  text-align: right !important;
}

html[dir="rtl"] .text-right {
  text-align: left !important;
}

/* ── Navigation Bar ───────────────────────────────────────────────────────────*/
/* Header container flows naturally in RTL (Logo on the right, nav menu and CTA buttons on the left).
   No row-reverse needed on header max-w-7xl container, nav menu, or action button containers. */

/* Brand logo container — always LTR to preserve the [Icon] [English Brand Name] order */
html[dir="rtl"] a[href*="index.html"].flex.items-center.gap-3,
html[dir="rtl"] header a[href*="index.html"].flex.items-center.gap-3,
html[dir="rtl"] footer a[href*="index.html"].flex.items-center.gap-3 {
  flex-direction: row !important;
  direction: ltr !important;
}

/* Language toggle link in nav — always Latin font */
html[dir="rtl"] #lang-toggle-link,
html[dir="rtl"] #mobile-lang-toggle-link {
  font-family: var(--font-latin) !important;
  letter-spacing: 0.05em;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── Logo / Brand Name — always English style ────────────────────────────────*/
/* The brand name is an English proper noun — must NEVER be Arabic-ified */
html[dir="rtl"] header a .flex.flex-col span:first-child,
html[dir="rtl"] header a span.font-display {
  font-family: var(--font-latin) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* Tagline under logo */
html[dir="rtl"] header a .flex.flex-col span:last-child {
  font-family: var(--font-latin) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* ── Mobile Drawer ────────────────────────────────────────────────────────────*/
html[dir="rtl"] #mobile-drawer {
  right: auto !important;
  left: 0 !important;
  border-right: 1px solid rgb(30 41 59 / 0.5);
  border-left: none !important;
  translate: 0 0 !important;
  transform: none !important;
}

html[dir="rtl"] #mobile-drawer.translate-x-full {
  translate: -100% 0 !important;
  transform: none !important;
}

/* JS adds/removes this class to open/close the drawer.
   The main.js drawer logic works fine in RTL since it toggles translate classes. */

/* ── Flex Row Reversal for Key Layouts ───────────────────────────────────────*/
/* Removed generic gap-3 reversal to let buttons and internal components flow naturally in RTL */

/* Hero content — keep centered */
html[dir="rtl"] .flex.flex-col.items-center {
  align-items: center;
}

/* ── Grid & Card Layouts ──────────────────────────────────────────────────────*/
html[dir="rtl"] .grid {
  direction: rtl;
}

/* ── Spacing Overrides ────────────────────────────────────────────────────────*/
html[dir="rtl"] .pl-4  { padding-left: 0;      padding-right: 1rem; }
html[dir="rtl"] .pr-4  { padding-right: 0;     padding-left: 1rem; }
html[dir="rtl"] .pl-6  { padding-left: 0;      padding-right: 1.5rem; }
html[dir="rtl"] .pr-6  { padding-right: 0;     padding-left: 1.5rem; }
html[dir="rtl"] .pl-8  { padding-left: 0;      padding-right: 2rem; }
html[dir="rtl"] .pl-10 { padding-left: 0;      padding-right: 2.5rem; }
html[dir="rtl"] .ml-auto { margin-left: 0;     margin-right: auto; }
html[dir="rtl"] .mr-auto { margin-right: 0;    margin-left: auto; }

/* ── Border & Decoration ──────────────────────────────────────────────────────*/
html[dir="rtl"] .border-l {
  border-left: none;
  border-right-width: var(--tw-border-opacity, 1px);
}

html[dir="rtl"] [class*="border-l-"] {
  border-left: none;
}

/* ── Form Elements ────────────────────────────────────────────────────────────*/
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] label {
  text-align: right;
}

/* Step tabs in RFQ form */
html[dir="rtl"] #form-step-tabs {
  flex-direction: row-reverse;
}

/* ── Stats / Numbers — always LTR (excluding headings) ───────────────────────*/
html[dir="rtl"] :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)[class*="text-4xl"],
html[dir="rtl"] :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)[class*="text-5xl"],
html[dir="rtl"] :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)[class*="text-6xl"],
html[dir="rtl"] :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)[class*="text-7xl"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── Hero Scroll Hint ─────────────────────────────────────────────────────────*/
html[dir="rtl"] #hero-scroll-hint {
  direction: ltr; /* keep arrow pointing down regardless */
}

/* ── Lucide Icons — flip directional icons ───────────────────────────────────*/
html[dir="rtl"] [data-lucide="arrow-right"],
html[dir="rtl"] [data-lucide="chevron-right"],
html[dir="rtl"] [data-lucide="arrow-left"],
html[dir="rtl"] [data-lucide="chevron-left"] {
  transform: scaleX(-1);
}

/* ── Headings ─────────────────────────────────────────────────────────────────*/
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 {
  letter-spacing: 0;       /* Arabic doesn't use tracking */
  font-weight: 800;
  line-height: 1.4;
  direction: rtl !important;
}

/* ── Tracking / Letter-spacing removal ───────────────────────────────────────*/
/* Arabic text should have zero letter-spacing */
html[dir="rtl"] [class*="tracking-"] {
  letter-spacing: 0 !important;
}

/* ── Uppercase removal (Arabic has no uppercase) ─────────────────────────────*/
html[dir="rtl"] [class*="uppercase"],
html[dir="rtl"] .uppercase {
  text-transform: none !important;
}

/* Preserve uppercase for brand name (English proper noun) */
html[dir="rtl"] .brand-name {
  text-transform: uppercase !important;
  font-family: var(--font-latin) !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  letter-spacing: 0.08em !important;
}

/* ── Marquee / Ticker Continuous Loop Override ────────────────────────────────*/
html[dir="rtl"] .marquee-container,
html[dir="rtl"] .marquee-track {
  direction: ltr !important;
}

html[dir="rtl"] .marquee-item {
  direction: rtl !important;
}