/* style_rtl.css */

/* =========================================
   Base RTL direction
========================================= */
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* =========================================
   Global nav (burger / slide menu)
========================================= */
html[dir="rtl"] .nav-links {
  align-items: flex-end;
  text-align: right;
}

html[dir="rtl"] .nav-links a::after {
  left: auto;
  right: 0;
}

html[dir="rtl"] .burger {
  right: auto;
  left: 20px;
}

html[dir="rtl"] .nav-links {
  right: auto;
  left: -300px;
  box-shadow: 2px 0 6px rgba(0,0,0,0.2);
}

html[dir="rtl"] .nav-links.active {
  left: 0;
}

html[dir="rtl"] .lang-selector {
  margin-left: 0;
  margin-right: 20px;
}

/* Hero area: keep LTR for logo treatments that assume LTR */
html[dir="rtl"] .titleA-hero {
  direction: ltr !important;
  text-align: left !important;
  overflow: hidden !important;
}

html[dir="rtl"] .titleA-hero-logo {
  max-width: 100% !important;
}

/* Arabic font preference */
html[lang="ar"] body {
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    "Tahoma",
    "Arial",
    sans-serif;
}

/* =========================================
   Tables in main (generic)
========================================= */
html[dir="rtl"] main table th,
html[dir="rtl"] main table td {
  text-align: right;
  border-right: none;
  border-left: 1px solid rgba(79, 79, 127, 0.12);
}

html[dir="rtl"] main table th:last-child,
html[dir="rtl"] main table td:last-child {
  border-left: none;
}

/* =========================================
   News list RTL fixes
========================================= */
html[dir="rtl"] .news-row__summary {
  direction: rtl;
  grid-template-columns: auto 1fr 190px;
  grid-template-areas: "right title date";
}

@media (max-width: 768px) {
  html[dir="rtl"] .news-row__summary {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "right date"
      "right title";
  }
}

html[dir="rtl"] .news-row__right {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] .news-header {
  direction: rtl;
}

html[dir="rtl"] .news-rss {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] .news-row:hover .news-row__chev {
  transform: translateX(-2px);
}

html[dir="rtl"] .news-row[open] .news-row__chev {
  transform: rotate(-90deg);
}

/* =========================================
   World News (RTL support)
========================================= */

/* Filter meta row: keep layout stable in RTL */
html[dir="rtl"] .worldnews__filtermeta .worldnews__metarow {
  flex-direction: row-reverse;
}

/* Place the Legend button naturally on the left side in RTL */
html[dir="rtl"] .worldnews__legendrow {
  margin-left: 0;
  margin-right: auto;
}

/* Refresh button spacing: swap margin direction */
html[dir="rtl"] .worldnews__refreshbtn {
  margin-left: 0;
  margin-right: 10px;
}

/* Lede/title signboard: mirror the “pulse dot” and paddings */
html[dir="rtl"] .worldnews__title {
  padding-left: 0;
  padding-right: 18px;
  text-align: right;
}

/* underline accent: anchor from right */
html[dir="rtl"] .worldnews__title::after {
  left: auto;
  right: 18px;
  transform-origin: right center;
}

/* pulse dot: move to right */
html[dir="rtl"] .worldnews__left::after {
  left: auto;
  right: 16px;
  transform-origin: 50% 50%;
}

/* mobile pulse dot position */
@media (max-width: 480px) {
  html[dir="rtl"] .worldnews__left::after {
    left: auto;
    right: 14px;
  }
}

html[dir="rtl"] .worldnews__lede {
  padding-left: 0;
  padding-right: 18px;
  text-align: right;
}

/* Table cells: align right (visual order is handled by dir=rtl on the page) */
html[dir="rtl"] .worldnews__table thead th,
html[dir="rtl"] .worldnews__table tbody td {
  text-align: right;
}

/* If you have any source link blocks that used row-reverse */
html[dir="rtl"] .worldnews__sourcelink {
  flex-direction: row-reverse;
}

/* Any hint badges: pin to the right */
html[dir="rtl"] .worldnews__maphint {
  left: auto;
  right: 10px;
}

/* Legend overlay: make header and list spacing feel native in Arabic */
html[dir="rtl"] .worldnews__legendhead {
  flex-direction: row-reverse; /* title on right, close on left */
}

html[dir="rtl"] .worldnews__legendtitle {
  text-align: right;
}

html[dir="rtl"] .worldnews__legendlist {
  padding-left: 0;
  padding-right: 18px;
}

/* chip/icon margins: swap to avoid “LTR-looking” gaps */
html[dir="rtl"] .worldnews__legendchip {
  margin-right: 0;
  margin-left: 6px;
}

html[dir="rtl"] .worldnews__legendicon {
  margin-right: 0;
  margin-left: 8px;
}

/* =========================================
   Leaflet UI: RTL-friendly control placement
   (Optional but recommended: move controls to top-right)
========================================= */
html[dir="rtl"] .leaflet-top.leaflet-left {
  left: auto !important;
  right: 10px !important;
}

html[dir="rtl"] .leaflet-top.leaflet-right {
  right: auto !important;
  left: 10px !important;
}

html[dir="rtl"] .leaflet-bottom.leaflet-left {
  left: auto !important;
  right: 10px !important;
}

html[dir="rtl"] .leaflet-bottom.leaflet-right {
  right: auto !important;
  left: 10px !important;
}

/* =========================================
   Floating map (World News): mirror fixed side
   (only applies when worldnews.js adds --floating)
========================================= */
html[dir="rtl"] .worldnews__mapcard--floating {
  right: auto;
  left: 80px;
  transform-origin: top left;
}