/* =========================================================
   HOE — RTL / Arabic locale overrides
   ---------------------------------------------------------
   Loaded only when SiteLayout receives locale="ar".
   Strategy: most layout uses logical properties (margin-inline,
   padding-inline) so it RTL-flips automatically. This sheet
   handles the cases where main.css still references
   physical left/right + the Arabic font stack.
   ========================================================= */

/* ---------- 0. SELF-HOSTED ARABIC FONTS ----------
   Zawiya Bold (client-provided display face — square-kufi, signature look),
   Noto Kufi Arabic (display fallback), and Noto Sans Arabic (body). Files
   live in /assets/fonts/ with the same immutable long-cache headers as the
   Latin fonts — removes a third-party round-trip to Google Fonts, cuts
   ~150-300ms off Arabic LCP. */
@font-face {
  font-family: 'Zawiya';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/assets/fonts/zawiya-bold.woff2') format('woff2'),
       url('/assets/fonts/zawiya-bold.woff')  format('woff'),
       url('/assets/fonts/zawiya-bold.ttf')   format('truetype');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
/* Single Arabic typeface site-wide: Noto Kufi Arabic.
   We only have 700 + 900 weight files for Noto Kufi, but we declare
   the 700 file with a font-weight RANGE (300–700) so body text at
   weight 400/500/600 also resolves to the same font file instead of
   falling back to a system font. Visually everything Arabic is
   rendered in Noto Kufi — single font across the whole site. */
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('/assets/fonts/noto-kufi-arabic-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 800 900;
  src: url('/assets/fonts/noto-kufi-arabic-900.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

/* ---------- 1. ARABIC FONT STACK ----------
   Single family: Noto Kufi Arabic — geometric Kufi script, industrial,
   matches Archivo Black's authority for Arabic headings at heavy weights
   and is legible at body weight. Latin glyphs (HOE, YONGMAO, POTAIN, etc.)
   fall through to Archivo Black / JetBrains Mono because Noto Kufi
   doesn't cover Latin in our subset. */
:root[dir="rtl"] {
  /* Single Arabic family site-wide: Noto Kufi Arabic.
     Weight 300–700 → uses noto-kufi-arabic-700.woff2
     Weight 800–900 → uses noto-kufi-arabic-900.woff2
     All Arabic text — headings, body, mono labels — resolves to the
     SAME font file, so the typography is perfectly consistent. */
  --font-display: "Noto Kufi Arabic", "Archivo Black", "Arial Black", system-ui, sans-serif;
  --font-body:    "Noto Kufi Arabic", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Noto Kufi Arabic", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Arabic display headings: Noto Kufi carries diacritics + dots above
   and below the baseline that eat into adjacent lines at Latin-tight
   leading. Push the line-height up so multi-line hero headlines on
   inner pages (no per-line span wrapper) breathe properly. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
  letter-spacing: normal;
  line-height: 1.35;
  text-transform: none;
}

/* Hero display titles get extra room: bigger font = more risk of
   stacked dots/descenders colliding. Boost specificity so this beats
   Astro scoped <style> blocks on PageHero. */
[dir="rtl"] .display,
[dir="rtl"] .page-hero .page-hero__title,
[dir="rtl"] .hero h1 {
  letter-spacing: normal;
  line-height: 1.4;
  text-transform: none;
}

/* Hero headline: per-line wrappers need overflow:visible so descenders
   don't get clipped by the rise-animation mask. No extra margin —
   line-height alone provides the breathing room. */
[dir="rtl"] .hero h1 span.line {
  overflow: visible;
}

/* Arabic line height for body copy — Latin's 1.55 is too tight in Arabic. */
[dir="rtl"] body { line-height: 1.75; }

/* Eyebrow / mono labels — drop the wide letter-spacing because it shreds
   Arabic letter joining, and skip uppercase (no-op in Arabic anyway). */
[dir="rtl"] .eyebrow,
[dir="rtl"] .mono {
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Brand subtitle in Arabic ----------
   "بيت المعدات" renders narrower than its English equivalent
   "HOUSE OF EQUIPMENT" at the same font size (11 chars vs 18 chars).
   With the mobile shrink (.46rem) the Arabic sub becomes ~45px wide,
   narrower than "HOE" (54px) — it looks like a tucked-in fragment
   rather than a balanced label, and visually disconnects from the
   logo on the right. Bump the Arabic sub font + letter-spacing so it
   renders at a width that matches or exceeds the "HOE" name, restoring
   the unified brand block. Center the text block so the subtitle
   doesn't anchor only to "HOE"'s right edge. */
[dir="rtl"] .site-header .brand__sub,
[dir="rtl"] .site-footer .brand__sub {
  font-family: 'Noto Kufi Arabic', system-ui, sans-serif;
  letter-spacing: .15em;
  margin-top: -10px;
}
@media (max-width: 640px) {
  [dir="rtl"] .site-header .brand__sub {
    font-size: .62rem;
    letter-spacing: .18em;
  }
}

/* ---------- 2. PRIMARY NAV ACTIVE UNDERLINE ----------
   In LTR main.css the underline animates from right to left (initial state:
   left:0; right:100%). Mirror so it animates from left to right in RTL. */
[dir="rtl"] .primary-nav a:not(.btn)::after {
  left: auto;
  right: 0;
  left: 100%;
}
[dir="rtl"] .primary-nav a:not(.btn).is-active::after {
  right: 0;
  left: 0;
}

/* ---------- 3. HERO SCENE ----------
   Mirror the tower crane for RTL: position it on the LEFT (mirror of
   LTR's right-anchor) AND drop the scaleX(-1) so the jib points RIGHT
   in its natural orientation — reaching across toward the headline
   that now reads from the right. (Without dropping the flip the jib
   would point off-screen-left, away from the text.) */
[dir="rtl"] .hero__crane {
  right: auto;
  left: clamp(0px, 3vw, 80px);
  animation-name: crane-enter-rtl;
}
[dir="rtl"] .hero__coord          { /* coord box stays in flow — handled by container */ }
@media (max-width: 820px) {
  [dir="rtl"] .hero__crane { right: auto; left: 50px; }
}

@keyframes crane-enter-rtl {
  0%   { opacity: 0; transform: translateY(40px) scale(.94); }
  100% { opacity: .92; transform: translateY(0) scale(1); }
}

/* ---------- Construction vehicles: mirror + reverse for RTL ----------
   The SVGs in /pages/ar/index.astro face LEFT and the LTR keyframes
   move them right→left. Without intervention, in Arabic the vehicles
   appear to drive backward against the right-to-left reading direction.
   Mirror the SVGs with scaleX(-1) so the cab faces RIGHT, and replace
   the keyframes to drive left→right (cab leading, reading direction). */
[dir="rtl"] .hero__excavator { animation-name: excavator-drive-rtl, excavator-bounce; }
[dir="rtl"] .hero__truck     { animation-name: truck-drive-rtl, truck-bounce; }
[dir="rtl"] .hero__dust--excavator { animation-name: excavator-drive-rtl; }
[dir="rtl"] .hero__dust--truck     { animation-name: truck-drive-rtl; }

/* Staggered relay mirrored to LTR (2026-05-18 scene re-tune):
     0–35%  excavator drives RIGHT (enters off-left, exits off-right)
     35–65% both off-screen
     65–100% truck drives RIGHT
   80px off-screen buffer; widths match LTR (261px / 170px). */
@keyframes excavator-drive-rtl {
  0%   { transform: translateX(calc(-1 * (261px + 80px))) scaleX(-1); }
  35%  { transform: translateX(calc(100vw + 80px))         scaleX(-1); }
  100% { transform: translateX(calc(100vw + 80px))         scaleX(-1); }
}
@keyframes truck-drive-rtl {
  0%, 65% { transform: translateX(calc(-1 * (170px + 80px))) scaleX(-1); }
  100%    { transform: translateX(calc(100vw + 80px))         scaleX(-1); }
}

/* ---------- 4. STATS BAND ----------
   Vertical dividers swap side in RTL because the visual "first cell" is
   on the right and should have no left border, etc. */
[dir="rtl"] .stats__cell {
  border-right: 0;
  border-left: 1px solid var(--line);
}
[dir="rtl"] .stats__cell:last-child { border-left: 0; }
@media (max-width: 720px) {
  [dir="rtl"] .stats__cell:nth-child(odd) {
    border-right: 0;
    border-left: 1px solid var(--line);
  }
}

/* ---------- 5. PROJECT META BLOCK ----------
   .project__meta is absolutely positioned bottom-left of the project card. */
[dir="rtl"] .project__meta { left: auto; right: 24px; }

/* ---------- 6. PROJECT TAG ----------
   Top-left "Live / 2025 / 2024" badge — mirror to top-right. */
[dir="rtl"] .project__tag { left: auto; right: 20px; }

/* ---------- 7. PRODUCT ROW HOVER ----------
   Hover state slides padding inward -- switch left to right. */
[dir="rtl"] .product-row:hover {
  padding-left: 0;
  padding-right: clamp(20px, 3vw, 40px);
}

/* ---------- 8. FAQ ITEM HOVER ----------
   FAQ summary nudges right on hover; in RTL it nudges left. */
[dir="rtl"] .faq-item summary:hover {
  padding-left: 0;
  padding-right: 12px;
}

/* .faq-item__a uses padding-inline-end in Faq.astro's scoped style,
   so it flips automatically with dir="rtl" — no override needed here. */

/* ---------- 9. SPLIT BADGE ----------
   .split__badge floats bottom-right; mirror to bottom-left. */
[dir="rtl"] .split__badge {
  right: auto;
  left: -20px;
}

/* ---------- 10. CTA STRIP ----------
   CTA strip pull-quote element positions. */
[dir="rtl"] .cta-strip__bg { right: auto; left: clamp(0px, 3vw, 80px); }

/* ---------- 11. SCROLL CUE ----------
   "Scroll · Discover" cue is positioned absolute, left side in LTR. */
[dir="rtl"] .scroll-cue {
  left: auto;
  right: var(--gutter);
}

/* ---------- 12. SECTION RAIL ----------
   Right rail in LTR becomes left rail in RTL. */
[dir="rtl"] .section-rail {
  right: auto;
  left: 0;
}

/* ---------- 13. TESTIMONIAL QUOTE MARK ----------
   Decorative " mark in the testimonial cards. */
[dir="rtl"] .testimonial__quote-mark {
  left: auto;
  right: 36px;
}

/* ---------- 14. FORMS ----------
   Form labels — keep stacked, eyebrow letter-spacing handled above.
   Form inputs are full-width so no flip needed. */
[dir="rtl"] .contact-form .btn { align-self: flex-end; }

/* ---------- 15. UTILITY BAR ----------
   Phone/email pills sit on the right in LTR; container flex auto-flips.
   The pulse-dot inside the pill is positioned left, so keep it leading. */
[dir="rtl"] .utility-bar__pulse {
  margin-inline-end: .25rem;
}

/* Phone numbers / emails always render LTR even on Arabic pages. */
[dir="rtl"] [dir="ltr"] {
  unicode-bidi: embed;
  direction: ltr;
  display: inline-block;
}

/* ---------- 16. BUTTONS ----------
   Draw arrow marks with CSS instead of Unicode arrow glyphs. This avoids
   platform emoji-style boxes and double-mirroring in RTL containers. */
[dir="rtl"] .btn::after,
[dir="rtl"] .service__arrow::before,
[dir="rtl"] .product-row__cta::before,
[dir="rtl"] .blog-card__cta::after,
[dir="rtl"] .related-card__cta::after,
[dir="rtl"] .rtl-arrow-link::after {
  content: "";
  display: inline-block;
  inline-size: .55em;
  block-size: .55em;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(135deg);
  flex: 0 0 auto;
}

[dir="rtl"] .btn::after {
  font-size: 1rem;
}

[dir="rtl"] .btn:hover::after {
  transform: translateX(-6px) rotate(135deg);
}

[dir="rtl"] .service__arrow,
[dir="rtl"] .product-row__cta {
  position: relative;
  font-size: 0;
  transform: none;
}

[dir="rtl"] .service__arrow::before,
[dir="rtl"] .product-row__cta::before {
  inline-size: 12px;
  block-size: 12px;
}

[dir="rtl"] .service:hover .service__arrow {
  transform: none;
}

[dir="rtl"] .blog-card__cta,
[dir="rtl"] .related-card__cta,
[dir="rtl"] .rtl-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  letter-spacing: 0;
  text-transform: none;
}

[dir="rtl"] .blog-card__cta::after,
[dir="rtl"] .related-card__cta::after,
[dir="rtl"] .rtl-arrow-link::after {
  inline-size: .48em;
  block-size: .48em;
  border-width: 0 1.5px 1.5px 0;
}

/* ---------- 17. MARQUEE BRAND TICKER ----------
   Reverse the marquee scroll on Arabic pages so brand names sweep in the
   reading direction (right-to-left), matching how an Arabic reader's eye
   travels across the page. */
[dir="rtl"] .marquee__track { animation-direction: reverse; }

/* ---------- 18. BREADCRUMB SEPARATOR ----------
   Draw the separator so the browser never renders it as an emoji-like glyph. */
[dir="rtl"] .breadcrumb__sep {
  inline-size: .55em;
  block-size: .55em;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  display: inline-block;
  font-size: 0;
  opacity: .5;
  transform: rotate(135deg);
}

/* ---------- 19. NAV TOGGLE (mobile hamburger) ----------
   Anchored on the right in LTR; flip in RTL. The flexbox handles it,
   but we override any explicit padding nudges. */
[dir="rtl"] .nav-toggle { margin-inline-start: auto; }

/* ---------- 20. BULLET LISTS ----------
   The reset removes list-style, but some content uses ul + ::before bullets.
   Just nudge inside padding. */
[dir="rtl"] .bullet-list { padding-right: 0; }
[dir="rtl"] .bullet-list li { padding-right: 1.25rem; padding-left: 0; }
[dir="rtl"] .bullet-list li::before {
  content: "";
  inline-size: .45rem;
  block-size: .45rem;
  margin-block-start: .65em;
  background: var(--hi-vis-deep);
  right: 0;
  left: auto;
}

/* ---------- 21. H2 ACCENT UNDERLINE ----------
   The yellow underline bar on h2 .accent animates with transform-origin: left.
   In RTL, anchor it from the right so the visual entry point matches the
   reading direction. */
[dir="rtl"] h2 .accent::after {
  transform-origin: right;
}

/* ---------- 22. HERO SUBTITLE LEADING BAR ----------
   `.hero__sub::before` is a 64px yellow bar above the subtitle.
   It's a block element so it sits at the inline-start automatically;
   no override needed — but force margin-inline for safety. */
[dir="rtl"] .hero__sub::before {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* ---------- 23. BLOG CARD CTA ----------
   Keep the underline on the inline-start side for Arabic card links. */
[dir="rtl"] .blog-card__cta {
  align-self: flex-start;
}

/* ---------- 24. FAQ DETAILS ARROW MARKER ----------
   The native <summary> marker on FAQ <details> elements — Chrome ships an
   arrow on the start side, which in RTL is the right. We don't override it
   (browser handles it). But hover padding-nudge does need flipping (handled in §8). */

/* ---------- 25. POST BODY (BLOG ARTICLE) ----------
   Article body lists, blockquotes, tables — main.css uses physical padding-left;
   the Arabic slug page already overrides these to logical properties, but the
   English slug page uses padding-left. If someone reads an English post via /ar
   (won't happen — different routes), the styles wouldn't flip. No action needed. */

/* ---------- 26. CONTACT INFO CELL EYEBROWS ----------
   Eyebrows in contact info already inherit text-align: start via .eyebrow's
   flexbox alignment. No override needed. */

/* ---------- 27. NEWSLETTER FORM (FOOTER) ----------
   The newsletter input + button row uses flex; flips automatically.
   The form-feedback message inherits text alignment from body, which respects
   dir. No override needed. */

/* ---------- 28. ANIMATIONS — REDUCED MOTION ----------
   Respect user preference; same as English. The `prefers-reduced-motion`
   media query in main.css already covers Arabic pages because it's
   direction-agnostic. */

/* ---------- 29. PHONE NUMBERS / EMAILS / SKU CODES ----------
   Any inline Latin run inside Arabic text should render LTR. We rely on
   the dir="ltr" attribute on the anchor + bdi tags where needed. Force
   the embedded direction for any element marked with .ltr class as well. */
[dir="rtl"] .ltr,
[dir="rtl"] [data-ltr] {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* ---------- 30. SECTION-HEAD GRID ----------
   .section-head__left and __right swap visually via flex order;
   no manual flip needed — the inline-direction handles it. */

/* ---------- 31. UTILITY BAR RESPONSIVE ----------
   Mobile breakpoint: stacks vertically; on Arabic pages, the right column
   becomes the "second row" but text inside still reads RTL. Phone numbers
   keep their dir="ltr". */

/* ---------- 32. MOBILE OVERFLOW GUARDRAILS ----------
   Keep RTL pages from creating a blank horizontal canvas while still letting
   long mixed Arabic/LTR labels wrap inside their own boxes. */
:root[dir="rtl"],
[dir="rtl"] body {
  max-width: 100%;
}

:root[dir="rtl"] {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  :root[dir="rtl"] {
    overflow-x: hidden;
  }
}

@media (max-width: 820px) {
  [dir="rtl"] main,
  [dir="rtl"] .container,
  [dir="rtl"] .grid,
  [dir="rtl"] .split,
  [dir="rtl"] .section-head,
  [dir="rtl"] .product-row,
  [dir="rtl"] .blog-grid,
  [dir="rtl"] .related-grid,
  [dir="rtl"] .cta-strip__inner {
    min-width: 0;
  }

  [dir="rtl"] img,
  [dir="rtl"] picture,
  [dir="rtl"] video,
  [dir="rtl"] canvas,
  [dir="rtl"] svg {
    max-inline-size: 100%;
  }

  [dir="rtl"] .product-row,
  [dir="rtl"] .service,
  [dir="rtl"] .blog-card,
  [dir="rtl"] .related-card {
    max-inline-size: 100%;
  }

  [dir="rtl"] .product-row__sku,
  [dir="rtl"] .product-row__name,
  [dir="rtl"] .product-row__brand,
  [dir="rtl"] .product-row__spec,
  [dir="rtl"] .service__title,
  [dir="rtl"] .service__desc,
  [dir="rtl"] .blog-card__title,
  [dir="rtl"] .blog-card__excerpt,
  [dir="rtl"] .related-card__title,
  [dir="rtl"] .related-card__excerpt,
  [dir="rtl"] .post__title,
  [dir="rtl"] .post__body {
    overflow-wrap: anywhere;
  }
}