/* ===========================
   RTL Overflow - Clip Approach
   Uses clip to prevent white space without breaking layout
   =========================== */

/* 1) RTL direction */
html[dir="rtl"] {
  direction: rtl;
}

/* 2) Box-sizing */
html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after {
  box-sizing: border-box;
}

/* 3) Use clip instead of hidden - more effective at preventing white space */
html[dir="rtl"] {
  overflow-x: clip;  /* clip is better than hidden - prevents white space on zoom */
  overflow-y: visible;
  width: 100%;
}

html[dir="rtl"] body {
  overflow-x: clip;
  overflow-y: visible;
  width: 100%;
  position: static !important;
  min-height: auto !important;
  top: auto !important;
  height: auto !important;
  margin: 0;
  padding: 0;
}

/* 4) Ensure main content containers don't exceed viewport */
html[dir="rtl"] .main-wrapper,
html[dir="rtl"] main {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/* 5) Constrain only direct children of body to prevent overflow */
html[dir="rtl"] body > * {
  max-width: 100%;
  overflow-x: clip;
}

/* 6) But allow specific elements that need scrolling */
html[dir="rtl"] .table-wrapper,
html[dir="rtl"] .table-wrap,
html[dir="rtl"] .lang-dropdown-content-top,
html[dir="rtl"] .footnote-popover-content {
  overflow-x: auto;
  max-width: 100%;
}

/* 7) JW letter layout */
html[dir="rtl"] .letter-wrap,
html[dir="rtl"] .letter-content,
html[dir="rtl"] #letter {
  overflow: visible !important;
}

html[dir="rtl"] .letter-wrap .search-wrap {
  position: sticky !important;
  top: 80px !important;
  z-index: 1020 !important;
}

@media (max-width: 768px) {
  html[dir="rtl"] .letter-wrap .search-wrap {
    top: 0 !important;
  }
}

/* 8) Special fix for jw.html - constrain container without affecting scroll */
html[dir="rtl"] .letter-wrap {
  contain: layout;  /* CSS containment - prevents overflow without breaking scroll */
}