/* Arabic is loaded as a separate layer; the other language layouts stay intact. */
@font-face {
  font-family: "Noto Sans Arabic";
  src: url("/assets/fonts/noto-sans-arabic-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF,
    U+FB50-FDFF, U+FE70-FEFF, U+10E60-10E7F, U+1EE00-1EEFF;
}

html[lang="ar"] {
  --font-heading: "Noto Sans Arabic", Manrope, Arial, sans-serif;
  --font-body: "Noto Sans Arabic", Manrope, Arial, sans-serif;
}

html[lang="ar"] body { text-align: start; line-height: 1.85; }

/* Arabic shaping needs natural spacing and room above and below each line. */
html[lang="ar"] :is(
  h1, h2, h3, h4, .section-subtitle, .map-label, .context-world,
  .site-footer h2, .example-tags, .quote-line-number, .quote-total-box output,
  .regional-step, .luma-wordmark, .luma-product-category
) { letter-spacing: normal !important; }

html[lang="ar"] :is(h1, h2) { line-height: 1.45 !important; }
html[lang="ar"] h3 { line-height: 1.6 !important; }
html[lang="ar"] :is(
  .content-intro, .resource-directory-copy > p, .world-area p,
  .ux-reading-section p, .ux-reading-section li, .ux-card p,
  .case-story-steps p, .case-story-steps ul, .case-depth-body > p,
  .case-visual figcaption p, .project-media figcaption p,
  .contact-next-steps p, .regional-preparation p, .regional-preparation li,
  .resource-flow p, .form-note, .quote-summary-note
) { line-height: 1.85; }

html[lang="ar"] :is(
  .btn-primary, .btn-secondary, .header-contact, .site-nav a,
  .line-badge, .context-world, .context-switch, .context-navigation a,
  .language-links a, .regional-navigation a, .world-action,
  .project-gallery button, .quote-quiet-button, .quote-field label
) { line-height: 1.65; }

/* Keep Latin identifiers, phone numbers and monetary values in their own run. */
html[lang="ar"] :is(
  a[href^="mailto:"]:not(.contact-direct-link):not(.btn-primary):not(.btn-secondary),
  a[href^="tel:"]:not(.contact-direct-link),
  .contact-direct-detail, .social-links a, .footer-bottom > span:first-child,
  input[type="email"], input[type="tel"], input[type="number"],
  input[inputmode="decimal"], input[inputmode="numeric"],
  .quote-line-amount strong, .quote-breakdown dd, .quote-total-box output,
  .luma-product-price, .luma-cart-total, .quote-summary-reference time
) {
  direction: ltr;
  unicode-bidi: isolate;
}
html[lang="ar"] :is(input[type="email"], input[type="tel"]) { text-align: start; }
html[lang="ar"] :is(input[type="number"], input[inputmode="decimal"], input[inputmode="numeric"]) {
  text-align: end;
  font-variant-numeric: tabular-nums;
}
html[lang="ar"] .contact-direct-detail { text-align: right; }
html[lang="ar"] :is(.language-name, .language-label, [hreflang] [lang]) { unicode-bidi: isolate; }
html[lang="ar"] #gallery-position { unicode-bidi: isolate; }

/* Header spacing follows the reading direction; the logo and flags do not flip. */
html[lang="ar"] .site-nav { margin-left: 0; margin-inline-start: auto; }
html[lang="ar"] .skip-link { left: auto; inset-inline-start: 8px; }
html[lang="ar"] .line-visual figcaption { left: auto; inset-inline-start: 26px; }
html[lang="ar"] .context-navigation { min-width: 0; }
html[lang="ar"] .context-world strong { white-space: nowrap; }
html[lang="ar"] .context-switch { white-space: nowrap; }

/* Only directional advance icons are reflected, never brand or technical art. */
html[lang="ar"] :is(
  .btn-arrow, .ux-arrow, .header-contact > span[aria-hidden],
  .context-switch > span[aria-hidden], .text-link > span[aria-hidden],
  .map-line > span:last-child, .resource-read > span[aria-hidden],
  .world-resource-links a > span:last-child, .resource-back > span[aria-hidden],
  .quote-back > span[aria-hidden]
) { display: inline-block; transform: scaleX(-1); }
html[lang="ar"] .world-action svg { transform: scaleX(-1); }
html[lang="ar"] .project-gallery :is([data-gallery-previous], [data-gallery-next]) svg {
  transform: scaleX(-1);
}
/* Image panning uses physical coordinates even when the surrounding UI is RTL. */
html[lang="ar"] .project-gallery .gallery-stage { direction: ltr; }
html[lang="ar"] .project-gallery .gallery-stage.has-error::after { direction: rtl; }
html[lang="ar"] .project-gallery [data-gallery-close] {
  margin-left: 0;
  margin-inline-start: auto;
}

/* Industrial remains the left entrance and Digital the right entrance. */
html[lang="ar"] .world-portals { direction: ltr; }
html[lang="ar"] .world-entry { direction: rtl; }

/* Physical left-edge accents become leading-edge accents in Arabic. */
html[lang="ar"] .map-line {
  border-left-width: 1px;
  border-inline-start: 3px solid var(--accent);
}
html[lang="ar"] .resource-directory-item {
  border-left-width: 1px;
  border-inline-start: 3px solid var(--accent);
}
html[lang="ar"] .resource-directory-copy { padding-inline: 4px 28px; }
html[lang="ar"] .guide-hero-art {
  border-left: 0;
  border-inline-start: 1px solid var(--border-color);
  padding-inline: 28px 0;
}
  html[lang="ar"] .guide-hero-art--photo { border: 0; padding: 0; }
html[lang="ar"] .contact-delivery-note {
  border-left: 0;
  border-inline-start: 3px solid var(--accent);
}
html[lang="ar"] .page-outline {
  border-left: 0;
  border-inline-start: 2px solid var(--accent);
  padding-inline: 20px 0;
}
html[lang="ar"] .page-interior .page-outline { border-inline-start-width: 1px; }

/* Lists and disclosure controls retain their native document order. */
html[lang="ar"] :is(
  .technical-list, .case-overview-grid ul, .case-story-steps ul,
  .legal-content ul
) { padding-left: 0; padding-inline-start: 20px; }
html[lang="ar"] .technical-list li { padding-inline: 7px 0; }
html[lang="ar"] .faq-list summary { padding-right: 0; padding-inline-end: 32px; }
html[lang="ar"] .faq-list summary::after { right: auto; inset-inline-end: 2px; }
html[lang="ar"] .card li { padding-left: 0; padding-inline-start: 17px; }
html[lang="ar"] .card li::before { left: auto; inset-inline-start: 0; }

html[lang="ar"] .combined-steps li {
  border-left: 0;
  border-inline-start: 1px solid var(--control-border);
  margin-left: 0;
  margin-inline-start: 15px;
  padding-inline: 44px 0;
}
html[lang="ar"] .combined-steps li::before { left: auto; inset-inline-start: -15px; }
html[lang="ar"] .contact-next-steps li { padding-inline: 40px 0; }
html[lang="ar"] .contact-next-steps li::before { left: auto; inset-inline-start: 0; }
html[lang="ar"] .regional-preparation li { padding-inline: 28px 0; }
html[lang="ar"] .regional-preparation li::before { left: auto; inset-inline-start: 0; }
html[lang="ar"] .combined-steps li::before,
html[lang="ar"] .contact-next-steps li::before,
html[lang="ar"] .regional-preparation li::before,
html[lang="ar"] .case-story-steps > li::before,
html[lang="ar"] .resource-flow li::before,
html[lang="ar"] .step-number,
html[lang="ar"] .method-list li > span {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

html[lang="ar"] .world-area { padding-inline: 0 34px; }
html[lang="ar"] .world-area > .ux-arrow { right: auto; inset-inline-end: 0; }
html[lang="ar"] .luma-product-art > span { left: auto; inset-inline-start: 15px; }
html[lang="ar"] .example-photo figcaption { margin-inline-end: auto; }
html[lang="ar"] .quote-editor-head { align-items: start; }
html[lang="ar"] .quote-quiet-button { flex-shrink: 0; }

@media (hover: hover) and (pointer: fine) {
  html[lang="ar"] .world-entry:hover .world-action svg { transform: translateX(-3px) scaleX(-1); }
}

@media (max-width: 1200px) {
  html[lang="ar"] .header-actions { margin-left: 0; margin-inline-start: auto; }
  html[lang="ar"] .site-nav { margin: 0; }
}

@media (max-width: 800px) {
  html[lang="ar"] .world-entry::before {
    background:
      linear-gradient(270deg, rgba(var(--world-rgb), .93), rgba(var(--world-rgb), .82) 45%, rgba(var(--world-rgb), .55)),
      linear-gradient(0deg, rgba(var(--world-rgb), .54), rgba(var(--world-rgb), 0) 60%);
  }
  html[lang="ar"] .page-outline {
    border-inline-start: 0;
    padding-inline: 0;
  }
  html[lang="ar"] .page-interior .page-outline { border-inline-start: 0; }
  html[lang="ar"] .world-area .technical-icon {
    float: right;
    margin-right: 0;
    margin-inline-end: 16px;
  }
  html[lang="ar"] .world-area p { margin-left: 0; margin-inline-start: 42px; }
  html[lang="ar"] .case-story-steps > li { padding-inline: 40px 0; }
  html[lang="ar"] .case-story-steps > li::before { left: auto; inset-inline-start: 0; }
}

@media (max-width: 1200px) {
  html[lang="ar"] .mobile-language-picker > .language-links {
    right: auto;
    left: 0;
    text-align: start;
  }
}

@media (max-width: 640px) {
  html[lang="ar"] .header-context-inner { gap: 0 8px; }
  html[lang="ar"] .context-navigation { gap: 10px; }
  html[lang="ar"] :is(.context-world, .context-switch, .context-navigation a) {
    font-size: .8rem;
    min-height: 48px;
  }
  html[lang="ar"] .site-nav a { min-width: 0; white-space: normal; }
  html[lang="ar"] .project-gallery [data-gallery-zoom-label] { line-height: 1.6; }
}

@media (max-width: 600px) {
  html[lang="ar"] .world-action { min-height: 48px; }
  html[lang="ar"] .resource-directory-art { left: auto; inset-inline-start: 20px; }
  html[lang="ar"] .resource-directory-copy { padding-inline: 20px; }
  html[lang="ar"] .resource-world { margin-left: 0; margin-inline-start: 54px; }
  html[lang="ar"] .resource-flow li { padding-inline: 42px 0; }
  html[lang="ar"] .resource-flow li::before { left: auto; inset-inline-start: 0; }
  html[lang="ar"] .resource-flow--areas li { padding-inline-start: 0; }
  html[lang="ar"] .case-story-steps > li { padding-inline-start: 34px; }
  html[lang="ar"] .quote-editor-head { flex-wrap: wrap; }
  html[lang="ar"] .quote-quiet-button { min-height: 48px; }
  html[lang="ar"] .quote-remove { width: 44px; height: 44px; flex-shrink: 0; }
  html[lang="ar"] .form-checkbox-group label { line-height: 1.85; }
  html[lang="ar"] .contact-direct-detail { font-size: .875rem; }
  html[lang="ar"] .project-gallery .gallery-copy { min-width: 0; }
}

@media (min-width: 360px) and (max-width: 600px) {
  html[lang="ar"] .resource-flow li { padding-inline: 0; }
  html[lang="ar"] .resource-flow li::before { inset-inline-start: auto; }
}

@media (max-width: 380px) {
  html[lang="ar"] .header-context-inner { gap: 0 6px; }
  html[lang="ar"] .context-navigation { gap: 8px; }
  html[lang="ar"] :is(.context-world, .context-switch, .context-navigation a) { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  html[lang="ar"] .world-action svg,
  html[lang="ar"] .world-entry:hover .world-action svg { transform: scaleX(-1) !important; }
}

@media print {
  html[lang="ar"] :is(.quote-breakdown, .quote-total-box) { margin-left: 0; margin-inline-start: auto; }
  html[lang="ar"] .case-story-steps > li { padding-inline: 0; }
}