/* ==========================================================================
   NOLA WEBSITE — ARABIC & HEBREW RTL STYLESHEET
   Implements Section 17:
   - Covers both Arabic (ar) and Hebrew (he)
   - Directional mirroring, logical layout, drawer animation
   - Bidirectional text isolation (<bdi>, emails, URLs, company entities)
   ========================================================================== */

html[dir="rtl"] {
  text-align: start;
  direction: rtl;
}

html[dir="rtl"] body,
html[dir="rtl"] p,
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"] div,
html[dir="rtl"] span,
html[dir="rtl"] input,
html[dir="rtl"] textarea {
  text-align: start;
}

/* --- Bidirectional text isolation (<bdi>, Latin company names, emails, symbols) --- */
bdi,
.bdi-isolate,
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] .latin-name {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-block;
}

/* --- Mirror Navbar & Header Spacing ---
   LTR logo: 4rem toward the menu button, 2rem toward the center.
   LTR links: 2rem padding + 2rem margin on the side facing the language control.
   Mirror those with physical sides so the gaps stay the same width in RTL. */
html[dir="rtl"] .Menu_logo__L8aFW {
  padding-left: 2rem !important;
  padding-right: 4rem !important;
}

html[dir="rtl"] .Navbar_utilityLinks {
  margin-right: 0 !important;
  margin-left: 2rem !important;
  padding-right: 0 !important;
  padding-left: 2rem !important;
  flex-direction: row;
}

html[dir="rtl"] .Navbar_utilityLink,
html[dir="rtl"] .Drawer_linkItem,
html[dir="rtl"] .Drawer_dropdownMenu a {
  letter-spacing: 0;
}

html[dir="rtl"] .Navbar_progressBar {
  left: auto !important;
  right: 0 !important;
}

/* --- Mirror Drawer Menu Overlay --- */
html[dir="rtl"] .Menu_menuOverlay__U6NCq {
  left: auto !important;
  right: 0 !important;
  transform: translateX(100%) !important;
}

html[dir="rtl"] .Menu_menuOverlay__U6NCq.open {
  transform: translateX(0) !important;
}

html[dir="rtl"] .Drawer_dropdownMenu {
  padding-left: 0 !important;
  padding-right: 1.5rem !important;
}

html[dir="rtl"] .Drawer_linkArrow {
  transform: scaleX(-1) !important;
  display: inline-block;
}

html[dir="rtl"] .Drawer_linkItem:hover .Drawer_linkArrow {
  transform: scaleX(-1) translateX(4px) !important;
}

/* --- Mirror Search Overlay --- */
html[dir="rtl"] .Menu_searchOverlay {
  right: auto !important;
  left: 80px !important;
  justify-content: flex-start !important;
}

html[dir="rtl"] .SearchOverlay_bgClose {
  right: auto !important;
  left: -80px !important;
}

html[dir="rtl"] .SearchOverlay_input {
  transform: translateX(-100%) !important;
  text-align: right !important;
}

html[dir="rtl"] .Menu_searchOverlay.open .SearchOverlay_input {
  transform: translateX(0) !important;
}

/* Phone search button is 44px and sits on the left. The 80px offset
   left a strip of the page between the arrow and the field. */
@media (max-width: 767px) {
  html[dir="rtl"] .Menu_searchOverlay {
    left: 44px !important;
    right: auto !important;
    width: calc(100vw - 44px) !important;
  }

  html[dir="rtl"] .SearchOverlay_bgClose {
    left: -44px !important;
    right: auto !important;
  }
}

/* --- Directional Icons Mirroring --- */
html[dir="rtl"] svg.ArrowIcon,
html[dir="rtl"] .SliderTile_btn__fieYp svg,
html[dir="rtl"] .ValueTile_icon__Remd5 svg,
html[dir="rtl"] .CorpServices_cardCta svg,
html[dir="rtl"] .HeroTextLink svg {
  transform: scaleX(-1) !important;
}

/* Do NOT flip brand logos, photos, charts, or maps */
html[dir="rtl"] .Logo_brand__header,
html[dir="rtl"] .Footer_logoRow__new img,
html[dir="rtl"] img,
html[dir="rtl"] video,
html[dir="rtl"] .leaflet-container,
html[dir="rtl"] .mapboxgl-map {
  transform: none !important;
}

/* --- Form Inputs in RTL --- */
html[dir="rtl"] .contactForm_formGroup label,
html[dir="rtl"] form label {
  text-align: right !important;
  display: block;
}

html[dir="rtl"] input[type="text"],
html[dir="rtl"] textarea {
  text-align: right !important;
  direction: rtl !important;
}

/* Keep phone & email input direction LTR for logical entry, with right-aligned presentation */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"] {
  text-align: right !important;
  direction: ltr !important;
}

/* --- Editorial Layout Borders / Sidebars --- */
html[dir="rtl"] .LegalSidebar {
  border-right: none !important;
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding-right: 0 !important;
  padding-left: 2rem !important;
}

html[dir="rtl"] .AboutSidebar_link span.bullet {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

html[dir="rtl"] .AboutSidebar {
  border-right: none !important;
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[dir="rtl"] .nola-stats-row {
  flex-direction: row-reverse !important;
}

/* Blockquotes / Callout Highlights */
html[dir="rtl"] blockquote,
html[dir="rtl"] .ArticleBody blockquote,
html[dir="rtl"] div[style*="border-left"] {
  border-left: none !important;
  border-right: 3px solid var(--color-primary, #0c4a47) !important;
  padding-left: 0 !important;
  padding-right: 1.5rem !important;
}

/* --- Footer Alignment --- */
html[dir="rtl"] .Footer_logoDivider__new {
  margin: 0 !important;
}

html[dir="rtl"] .Footer_logoTagline__new {
  font-weight: 300 !important;
  text-align: right !important;
}

html[dir="rtl"] .Footer_policies__CWbZC {
  display: flex;
  gap: 1.5rem;
  justify-content: flex-end;
}

/* Mobile header logo is absolutely centered. The desktop RTL inset
   (padding-right: 2rem) widens that box and shifts the mark off center. */
@media (max-width: 768px) {
  html[dir="rtl"] .Menu_navbar__woOc_ .Menu_logo__L8aFW {
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* Homepage hero: the copy sits on the start edge and the scene card
   swaps to the left. The photograph itself stays put. */
@media (min-width: 1024px),
       (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  html[dir="rtl"] .Header_maxi__O4_hA .Header_tileDesc__qxduL,
  html[dir="rtl"] .Header_tileWrapper__2fr6M.active .Header_tileDesc__qxduL {
    left: auto !important;
    right: var(--global-padding-x) !important;
    width: min(46vw, 34rem) !important;
  }

  html[dir="rtl"] .HeroMobileCard {
    right: auto !important;
    left: var(--global-padding-x) !important;
  }

  html[dir="rtl"] .Header_explore__WHBSN {
    left: auto !important;
    right: var(--global-padding-x) !important;
    flex-direction: row-reverse !important;
  }
}