/** * Direction / RTL–LTR clean layer * Logical properties so FA / AR (rtl) and EN (ltr) share one responsive system. * Load last (after mobile.css) so it wins over legacy left/right rules. */ /* ---------- Base: inherit from ---------- */ html { text-align: start; } body { direction: inherit; text-align: start; unicode-bidi: plaintext; } [dir="ltr"] body { direction: ltr; text-align: left; } [dir="rtl"] body { direction: rtl; text-align: right; } /* ---------- Global overflow / measure ---------- */ .page-shell, .main-content, .homepage-layout, .three-column-layout, .two-column-layout, .main-column, .sidebar, .news-item-content, .search-input-group, .header-logo, .header-logo-link { min-width: 0; max-width: 100%; } .main-column { min-width: 0 !important; /* override legacy 350px that breaks phones */ } /* ---------- Language dropdown: logical inset ---------- */ .lang-switcher-dropdown { inset-inline-start: 0; inset-inline-end: auto; left: auto; right: auto; } [dir="ltr"] .lang-switcher-dropdown { inset-inline-start: auto; inset-inline-end: 0; } /* ---------- Accent borders (start edge) ---------- */ .special-categories li a, .sidebar .special-categories li a { border-inline-start: 3px solid transparent; border-inline-end: none; border-right: none; padding-inline-start: 0.5rem; padding-inline-end: 0; padding-right: 0; } .special-categories li a:hover, .sidebar .special-categories li a:hover { border-inline-start-color: var(--primary, var(--nm-azure, #173b5e)); border-right-color: transparent; } .about-text h3, .news-detail-lead, .news-detail-body.prose blockquote, .page-header h1, .section-title-accent { border-inline-start: 4px solid var(--primary, var(--nm-azure, #173b5e)); border-inline-end: none; border-right: none; padding-inline-start: 1rem; padding-inline-end: 0; } .feature-card::before { inset-inline-start: 0; inset-inline-end: auto; right: auto; left: auto; } [dir="ltr"] .feature-card::before { inset-inline-start: 0; } /* ---------- News items ---------- */ .news-item { padding-inline-start: 0; padding-inline-end: 0; padding-right: 0; } .news-item-content { gap: 1rem; } /* Desktop: image beside text. Mobile column is in the max-width:768 block below. Do NOT force row with [dir] here — it beats mobile .news-item-content { column }. */ @media (min-width: 769px) { .news-item-content, [dir="rtl"] .news-item-content, [dir="ltr"] .news-item-content { flex-direction: row; } } .news-item-text, .news-item-text h3, .news-item-text p { text-align: start; overflow-wrap: anywhere; } /* ---------- Popular links / logos ---------- */ .popular-link .logo-img, .popular-links .logo-img { margin-inline-end: 1rem; margin-inline-start: 0; margin-left: 0; } /* ---------- Header / search ---------- */ .header-search { margin-inline-start: 0; } @media (min-width: 769px) { .header-search { margin-inline-start: 2rem; } } .search-input-group { flex-direction: row; /* In RTL: input then button visually = button on the end (left). DOM often button after input. */ } [dir="rtl"] .search-input-group { flex-direction: row; } [dir="ltr"] .search-input-group { flex-direction: row; } .search-input { text-align: start; } /* ---------- Navbar ---------- */ .nav-toggle { margin-inline-start: 0; margin-left: 0; } .nav-list, .nav-link, .membership-btn { text-align: start; } .nav-menu .nav-link { justify-content: flex-start; } /* ---------- Sidebar & lists ---------- */ .sidebar, .sidebar-section, .sidebar-section h3, .widget-header h3 { text-align: start; } .page-footer, .footer-content, .footer-section { text-align: start; } /* ---------- Homepage layout: DOM order = sidebar then main ---------- */ /* Desktop only: row keeps sidebar beside main (RTL/LTR). Must NOT force row on mobile — that crushed .main-column to ~40px. */ @media (min-width: 769px) { .homepage-layout { flex-direction: row; } } @media (max-width: 768px) { .homepage-layout { flex-direction: column; } } /* * Directional icons are authored for RTL (site default): * back / prev → fa-*-right * forward / CTA → fa-*-left * Do NOT mirror them under [dir="rtl"] — that double-flips and looks wrong. * LTR pages flip per-component where needed (see homepage/books/province). */ /* Slider prev/next stay physical (‹ left, › right) regardless of page dir */ .slider-nav, .commanders-slider-nav, .commanders-slider-controls, .resistance-slider-controls { direction: ltr; } /* ---------- Forms ---------- */ input, textarea, select { text-align: start; } input[type="email"], input[type="url"], input[type="tel"], input[type="number"] { direction: ltr; text-align: start; unicode-bidi: isolate; } [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="number"] { text-align: left; } /* ---------- Tables ---------- */ table { text-align: start; } th, td { text-align: start; } /* ---------- Mobile / responsive RTL cleanup ---------- */ @media (max-width: 768px) { .container { width: 100%; max-width: 100%; box-sizing: border-box; padding-inline: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)); padding-left: unset; padding-right: unset; } .top-header .container, .navbar .container, .main-content > .container { padding-inline: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)); } /* Full-bleed slider without physical L/R bias — only for in-column sliders */ .main-column .image-slider.image-slider-in-column, .three-column-layout .image-slider { margin-inline: 0; margin-left: unset; margin-right: unset; width: 100%; max-width: 100%; align-self: stretch; } .slide-content { text-align: start; inset-inline: 12px; left: auto; right: auto; } .news-item-content, [dir="rtl"] .news-item-content, [dir="ltr"] .news-item-content { flex-direction: column; } .news-item-image { width: 100%; flex: none; height: 180px; max-width: 100%; } .stats-grid, .quick-access-grid, .features-grid { direction: inherit; } .nav-menu { text-align: start; } .nav-menu .nav-link, .nav-menu .membership-btn { justify-content: flex-start; text-align: start; width: 100%; } /* FAB cluster: end corner in both dirs */ .nav-lang-switcher { inset-inline-end: max(0.75rem, env(safe-area-inset-right)); inset-inline-start: auto; right: auto; left: auto; } /* Sidebar carousels: prevent sideways bleed */ .martyrs-slider-container, .commanders-slider-container, .resistance-slider-container, .featured-martyrs-slider, .sidebar-section { max-width: 100%; overflow-x: hidden; } .martyr-grid { width: 100%; max-width: 100%; } /* Martyr / profile / list pages */ .martyr-profile-header, .profile-header, .page-header, .search-results-header { text-align: start; } .breadcrumb, .breadcrumbs { text-align: start; flex-wrap: wrap; justify-content: flex-start; } } @media (max-width: 480px) { .logo-text, .nav-brand .logo h1, h1, h2, h3 { overflow-wrap: anywhere; word-break: break-word; } .stat-label, .chip, .badge, .tag { max-width: 100%; white-space: normal; } } /* ---------- Desktop RTL sidebar rhythm ---------- */ @media (min-width: 769px) { .homepage-layout .sidebar-left, .homepage-layout .sidebar { /* stay on the inline-start side visually via DOM + row / row-reverse above */ flex: 0 0 clamp(240px, 22vw, 300px); } .three-column-layout { direction: inherit; } } /* ---------- Martyr / list extras ---------- */ .martyr-name, .martyr-title, .accordion-head, .writings-accordion-head, .search-title, .search-stats, .detail-row .detail-value, .detail-item { text-align: start !important; } .detail-row .detail-label, .code-label { margin-inline-end: 0.5rem; margin-left: 0; } .testimony-quote { border-inline-start: 3px solid var(--primary, var(--nm-azure, #173b5e)) !important; border-right: none !important; } /* ---------- Print ---------- */ @media print { [dir="rtl"] body, [dir="ltr"] body { direction: inherit; text-align: start; } }