/* Public Arabic (RTL) — load after type-search.webflow.css on ar/*.html only */

html[dir="rtl"] {
  /* Nav underlines (.navlink:hover / .w--current): adjust offset & weight here */
  --nav-underline-offset: 0.4em;
  --nav-underline-thickness: max(1px, 0.07em);
}

html[dir="rtl"] body,
html[dir="rtl"] body * {
  font-family: Cairo, sans-serif !important;
}

/* Masonry uses LTR % positioning; page-level RTL breaks column math — keep gallery layout identical to English. */
html[dir="rtl"] .masonry-container {
  direction: ltr;
}

html[dir="rtl"] .masonry-item {
  direction: rtl;
}

/* Logo: English bar reserves space on the right; Arabic mirrors to the left. */
html[dir="rtl"] .div-block-7 {
  right: auto !important;
  left: 15px;
}

/* BETA sits left of logo in LTR (right:100%); mirror to the right of logo when the mark is on the left. */
html[dir="rtl"] .nav-beta-badge {
  right: auto;
  margin-right: 0;
  left: 100%;
  margin-left: 6px;
  transform: translateY(calc(-50% + 10px));
}

@media screen and (min-width: 992px) {
  html[dir="rtl"] .div-block-3 {
    padding-right: env(safe-area-inset-right, 0px) !important;
    padding-left: calc(105px + env(safe-area-inset-left, 0px)) !important;
  }

  html[dir="rtl"] .index-top-dock .div-block-3 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html[dir="rtl"] .div-block-3.nav-bar--scroll-hidden {
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }
}

html[dir="rtl"] .nav-key-hint {
  margin-left: 0;
  margin-inline-start: 0.25em;
}

html[dir="rtl"] .tag-filter__chevron {
  transform: scaleX(-1);
}

/* Tags panel: base sheet uses right:0 (physical); in RTL that pins to inline-start. Use left:0 so the panel hangs from inline-end like English. */
html[dir="rtl"] .tag-filter__panel {
  right: auto;
  left: 0;
}

/* Search help bubble: same as tag panel — align to inline-end of trigger on RTL home. */
html[dir="rtl"] .search-help__bubble {
  right: auto;
  left: 0;
}

html[dir="rtl"] .featured-body {
  unicode-bidi: plaintext;
  text-align: start;
}

html[dir="rtl"] .featured-body p img {
  margin: 0.25em 0 0.35em 0.35em;
}

html[dir="rtl"] .index-scroll-top-fab svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .nav-lang-switch {
  font-family: Cairo, sans-serif !important;
}

/* Mobile / medium collapse: Webflow .w-nav-link { text-align: left }; .nav-menu padding-left — mirror for RTL */
html[dir="rtl"] .navbar .nav-menu.w-nav-menu {
  text-align: start;
}

html[dir="rtl"] .navbar .w-nav-link.navlink,
html[dir="rtl"] .navbar .nav-menu .w-nav-link {
  text-align: start;
  /* Cairo / Arabic nav: pull underline slightly below default (tune --nav-underline-offset) */
  text-underline-offset: var(--nav-underline-offset);
  text-decoration-thickness: var(--nav-underline-thickness);
}

html[dir="rtl"] .w-nav-overlay .nav-menu,
html[dir="rtl"] .navbar [data-nav-menu-open] {
  text-align: start;
}

@media screen and (max-width: 991px) {
  html[dir="rtl"] .nav-menu {
    padding-left: 0;
    padding-right: 20px;
  }
}

@media screen and (max-width: 767px) {
  html[dir="rtl"] .nav-menu {
    padding-right: 17px;
  }
}

/* Specimen (imagepage): .phase and .phase-req are hard-coded text-align:left in Webflow */
html[dir="rtl"] .phase {
  text-align: start;
}

html[dir="rtl"] #detail-phrase {
  text-align: start;
}

html[dir="rtl"] .phase-req {
  text-align: start;
}

/* Specimen grid: align labels, phrase, tags, and link values to logical start (right in RTL). */
html[dir="rtl"] #w-node-_7a685e58-9609-9605-640c-736999b9e2d0-8cd2b6cc > .w-layout-cell {
  text-align: start;
}

/* Specimen detail: LQIP + HQ alignment matches English via .postimage { align-items: end } in type-search.webflow.css (inline-end → physical left toward Arabic copy). */

/* Specimen: cap description measure (الوصف) on Arabic image page */
html[dir="rtl"] #detail-description {
  max-width: min(100%, 38rem);
  box-sizing: border-box;
}

html[dir="rtl"] #nav-links-cell {
  text-align: start;
}