/* ------------------------------------------------------------------
   Arabic / RTL layer for the Media & Awareness mirror.
   Loaded after the site stylesheet; only overrides what direction
   and Arabic script actually require.
   ------------------------------------------------------------------ */

/* --- Typography -------------------------------------------------- */
html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] p, html[dir="rtl"] a, html[dir="rtl"] span, html[dir="rtl"] li,
html[dir="rtl"] button, html[dir="rtl"] summary, html[dir="rtl"] input,
html[dir="rtl"] label, html[dir="rtl"] div {
  font-family: 'Tajawal', 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Letter-spacing breaks the cursive joins in Arabic — neutralise every
   tracking-* utility. Uppercase is a no-op on Arabic but dropped for clarity. */
html[dir="rtl"] [class*="tracking-"] { letter-spacing: 0 !important; }
html[dir="rtl"] .uppercase { text-transform: none; }

/* Arabic needs a little more leading than the Latin original */
html[dir="rtl"] h1 { line-height: 1.25; }
html[dir="rtl"] h2, html[dir="rtl"] h3 { line-height: 1.35; }

/* --- Direction flips --------------------------------------------- */

/* skip-to-content link */
html[dir="rtl"] .focus\:left-2:focus { left: auto; right: .5rem; }

/* navbar inner wrapper: pl-6 md:pl-12 pr-0 */
html[dir="rtl"] .pl-6.pr-0 { padding-left: 0; padding-right: 1.5rem; }
@media (min-width: 768px) {
  html[dir="rtl"] .md\:pl-12.pr-0 { padding-left: 0; padding-right: 3rem; }
}

/* desktop dropdown panels are anchored left-0 in the source */
html[dir="rtl"] .nav-dropdown-panel { left: auto; right: 0; }

/* poster accent bar, mobile search icon */
html[dir="rtl"] .left-3 { left: auto; right: .75rem; }
/* "Featured" badge */
html[dir="rtl"] .right-3 { right: auto; left: .75rem; }

/* decorative hero blur blobs */
html[dir="rtl"] .left-10 { left: auto; right: 2.5rem; }
html[dir="rtl"] .right-10 { right: auto; left: 2.5rem; }

/* floating donate beacon */
html[dir="rtl"] .right-6 { right: auto; left: 1.5rem; }

/* seasons / episodes column sits at the row's end */
html[dir="rtl"] .text-right { text-align: left; }

/* mobile disclosure sub-lists and the "Get Help" rule */
html[dir="rtl"] .border-l-2 { border-left-width: 0; border-right-width: 2px; }
html[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
html[dir="rtl"] .pl-3 { padding-left: 0; padding-right: .75rem; }
html[dir="rtl"] .ml-2 { margin-left: 0; margin-right: .5rem; }
html[dir="rtl"] .mr-2 { margin-right: 0; margin-left: .5rem; }

/* the donate button's angled edge mirrors with the layout */
html[dir="rtl"] .-skew-x-12 { --tw-skew-x: 12deg; }

/* Latin brand names inside Arabic runs keep their own direction */
html[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* The footer used to close the page; without it the white .App backdrop
   shows through below the last section (tall viewports, overscroll).
   Match the CTA gradient's end colour instead. */
html[dir="rtl"] body,
html[dir="rtl"] .App { background-color: #1A1622; }