/**
 * Theme CSS — Dark & Light Mode
 * Dark mode is default; light mode provides the same quality experience.
 */

/* Light Mode */
html[data-theme="light"] {
    /* ── Core Colors ── */
    --bg: #f5f4ef;
    --bg-rgb: 245, 244, 239;
    --text: #1a2f38;
    --text-rgb: 26, 47, 56;
    --text-light: rgba(26, 47, 56, 0.72);
    --text-lighter: rgba(26, 47, 56, 0.48);

    /* Primary color is dynamically managed by JS (critical.js).
       Auto-darkening for light mode is handled in theme-toggle.js. */

    /* ── Shadows — soft depth for light mode ── */
    --shadow: 0 1px 3px rgba(26, 47, 56, 0.06), 0 1px 2px rgba(26, 47, 56, 0.04);
    --shadow-lg: 0 4px 16px rgba(26, 47, 56, 0.08), 0 2px 6px rgba(26, 47, 56, 0.04);
}

/* ── Base ── */
html[data-theme="light"] {
    background: var(--bg);
    transition: background 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html[data-theme="light"] body {
    background: var(--bg);
    color: var(--text);
    transition: background 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Logos — dark teal (#1a2f38) ── */
html[data-theme="light"] .navbar-logo-image,
html[data-theme="light"] .footer-logo-image,
html[data-theme="light"] .entrance-logo {
    filter: brightness(0) sepia(1) saturate(8) hue-rotate(166deg) brightness(0.22);
}

html[data-theme="light"] .hero-logo-image {
    filter: brightness(0) sepia(1) saturate(8) hue-rotate(166deg) brightness(0.22)
            drop-shadow(0 0 30px rgba(26, 47, 56, 0.15))
            drop-shadow(0 0 15px rgba(26, 47, 56, 0.08));
}

/* ── 3D Earth & Rings ── */
html[data-theme="light"] .earth-ring {
    border-color: rgba(26, 47, 56, 0.22);
    transition: border-color 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html[data-theme="light"] .hero-earth {
    filter: brightness(0) sepia(1) saturate(6) hue-rotate(166deg) brightness(0.45) saturate(0.9);
    transition: filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html[data-theme="light"] .hero-light {
    background: transparent;
}

/* ── Ring Planets — teal-toned ── */
html[data-theme="light"] .ring-planet {
    background: rgba(26, 47, 56, 0.65);
    border-color: rgba(26, 47, 56, 0.5);
    box-shadow: 0 0 12px rgba(26, 47, 56, 0.3), 0 0 20px rgba(26, 47, 56, 0.15);
    filter: none;
}

/* ── Blue Notes (stars canvas) — subtle teal dots ── */
html[data-theme="light"] .blue-notes-background {
    opacity: 0.35 !important;
    filter: invert(1) sepia(1) saturate(4) hue-rotate(166deg) brightness(0.4);
    pointer-events: none;
    transition: opacity 0.6s ease, filter 0.6s ease;
}

/* ── Entrance Overlay ── */
html[data-theme="light"] .entrance-overlay {
    background: var(--bg);
}

html[data-theme="light"] .entrance-overlay-vignette,
html[data-theme="light"] .entrance-overlay-glow {
    background: transparent;
}

html[data-theme="light"] .entrance-progress-bar {
    background: var(--primary);
}

html[data-theme="light"] .entrance-percent {
    color: rgba(26, 47, 56, 0.5);
}

/* ═══ Navbar ═══ */
html[data-theme="light"] .navbar {
    background: rgba(var(--bg-rgb), 0.88);
    border-bottom: 1px solid rgba(var(--text-rgb), 0.06);
}

html[data-theme="light"] .navbar.scrolled {
    background: rgba(var(--bg-rgb), 0.95);
    box-shadow: 0 1px 8px rgba(26, 47, 56, 0.06);
}

html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .side-nav-link:hover,
html[data-theme="light"] .side-nav-link.active {
    color: var(--text);
}

html[data-theme="light"] .language-dropdown-menu {
    background: rgba(var(--bg-rgb), 0.97);
    border-color: rgba(var(--text-rgb), 0.1);
    box-shadow: 0 4px 20px rgba(26, 47, 56, 0.1);
}

/* Mobile menu overlay */
html[data-theme="light"] .nav-wrapper.is-open {
    background: rgba(var(--bg-rgb), 0.98) !important;
}

/* ═══ Section Headings — remove dark-mode text-shadow in light mode ═══ */
html[data-theme="light"] .text-section-headline,
html[data-theme="light"] .what-we-do--minimal .text-section-headline,
html[data-theme="light"] .innovation-section .innovation-title,
html[data-theme="light"] .tradition-future-title,
html[data-theme="light"] .projects-section .projects-title,
html[data-theme="light"] .awards-header .awards-title,
html[data-theme="light"] .press-section .press-title,
html[data-theme="light"] .contact-section--minimal .text-section-headline,
html[data-theme="light"] .contact-section--minimal .contact-title {
    text-shadow: none;
}

/* ═══ Gallery ═══ */
/* Gallery items — borders & shadows */
html[data-theme="light"] .gallery-item {
    border-color: rgba(var(--text-rgb), 0.08);
    box-shadow: 0 2px 12px rgba(26, 47, 56, 0.06);
}

html[data-theme="light"] .gallery-item:hover {
    border-color: rgba(var(--primary-rgb), 0.25);
    box-shadow: 0 8px 32px rgba(26, 47, 56, 0.1);
}

/* Lightbox — slightly lighter overlay */
html[data-theme="light"] .gallery-lightbox {
    background: rgba(245, 244, 239, 0.95);
}

html[data-theme="light"] .gallery-lightbox-backdrop {
    background: rgba(26, 47, 56, 0.4);
}

html[data-theme="light"] .gallery-lightbox-img {
    box-shadow: 0 16px 64px rgba(26, 47, 56, 0.2);
}

/* ═══ Articles Carousel ═══ */
/* Carousel mask — edge fade matched to light background */
html[data-theme="light"] .articles-carousel-row::before {
    background: linear-gradient(to right,
        var(--bg) 0%,
        rgba(var(--bg-rgb), 0.8) 3%,
        rgba(var(--bg-rgb), 0.4) 6%,
        transparent 10%,
        transparent 90%,
        rgba(var(--bg-rgb), 0.4) 94%,
        rgba(var(--bg-rgb), 0.8) 97%,
        var(--bg) 100%) !important;
}

html[data-theme="light"] .articles-carousel-row::after {
    background: linear-gradient(to right,
        var(--bg) 0%,
        rgba(var(--bg-rgb), 0.8) 3%,
        rgba(var(--bg-rgb), 0.4) 6%,
        transparent 10%,
        transparent 90%,
        rgba(var(--bg-rgb), 0.4) 94%,
        rgba(var(--bg-rgb), 0.8) 97%,
        var(--bg) 100%) !important;
}

/* Article card — subtle border & shadow */
html[data-theme="light"] .article-carousel-item {
    background: rgba(var(--bg-rgb), 0.6);
    border-color: rgba(var(--text-rgb), 0.08);
    box-shadow: 0 1px 4px rgba(26, 47, 56, 0.04);
}

html[data-theme="light"] .article-carousel-item:hover {
    background: rgba(var(--bg-rgb), 0.9);
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: 0 4px 20px rgba(26, 47, 56, 0.08);
}

html[data-theme="light"] .article-carousel-item--new {
    background: rgba(var(--primary-rgb), 0.12);
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.15),
                0 4px 18px rgba(var(--primary-rgb), 0.18);
}

html[data-theme="light"] .article-carousel-item--new:hover {
    background: rgba(var(--primary-rgb), 0.18);
    border-color: rgba(var(--primary-rgb), 0.65);
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.22),
                0 8px 24px rgba(var(--primary-rgb), 0.22);
}

/* ═══ Awards Timeline ═══ */
html[data-theme="light"] .awards-timeline-item::before {
    background: var(--primary);
    box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.3);
}

html[data-theme="light"] .awards-timeline-progress {
    background: rgba(var(--text-rgb), 0.08);
}

html[data-theme="light"] .awards-timeline-item:hover::before {
    box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.5);
}

/* ═══ Footer ═══ */
html[data-theme="light"] .footer {
    background: rgba(var(--bg-rgb), 0.95);
    border-top-color: rgba(var(--text-rgb), 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html[data-theme="light"] .footer-bottom {
    border-top-color: rgba(var(--text-rgb), 0.08);
}

/* ═══ Scroll to Top ═══ */
html[data-theme="light"] .scroll-to-top {
    background: rgba(var(--bg-rgb), 0.85);
    border-color: rgba(var(--text-rgb), 0.1);
    box-shadow: 0 4px 16px rgba(26, 47, 56, 0.1);
}

html[data-theme="light"] .scroll-to-top:hover {
    background: rgba(var(--bg-rgb), 0.95);
    border-color: rgba(var(--primary-rgb), 0.4);
}

/* ═══ Form Elements ═══ */
html[data-theme="light"] .form-input,
html[data-theme="light"] .form-textarea {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(var(--text-rgb), 0.15);
}

html[data-theme="light"] .form-input:hover,
html[data-theme="light"] .form-textarea:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(var(--text-rgb), 0.25);
}

html[data-theme="light"] .form-input:focus,
html[data-theme="light"] .form-textarea:focus {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

html[data-theme="light"] .form-submit {
    color: #fff;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.25);
}

html[data-theme="light"] .form-submit:hover {
    box-shadow: 0 6px 24px rgba(var(--primary-rgb), 0.35);
}

/* ═══ Contact Block ═══ */
html[data-theme="light"] .contact-block--after-form {
    background: rgba(var(--text-rgb), 0.02);
    border-color: rgba(var(--text-rgb), 0.08);
}

html[data-theme="light"] .contact-block--after-form:hover {
    border-color: rgba(var(--text-rgb), 0.14);
    background: rgba(var(--text-rgb), 0.03);
}

/* ═══ Privacy Modal ═══ */
html[data-theme="light"] .privacy-modal-overlay {
    background: rgba(26, 47, 56, 0.3);
}

html[data-theme="light"] .privacy-modal {
    background: var(--bg);
    box-shadow: 0 20px 60px rgba(26, 47, 56, 0.15);
}

/* ═══ Photo Gallery Dots ═══ */
html[data-theme="light"] .photo-gallery-dot {
    background: rgba(var(--text-rgb), 0.12);
    border-color: rgba(var(--text-rgb), 0.2);
}

html[data-theme="light"] .photo-gallery-dot:hover {
    background: rgba(var(--primary-rgb), 0.25);
    border-color: rgba(var(--primary-rgb), 0.4);
}

/* Gallery slider – image shadows */
html[data-theme="light"] .gallery-slide img {
    box-shadow: 0 4px 20px rgba(26, 47, 56, 0.1);
}

/* ═══ Logo Marquee ═══ */
html[data-theme="light"] .logo-marquee-item {
    filter: brightness(0) sepia(1) saturate(4) hue-rotate(166deg) brightness(0.35);
    opacity: 0.7;
}

html[data-theme="light"] .logo-marquee-item:hover {
    filter: brightness(0) sepia(1) saturate(6) hue-rotate(166deg) brightness(0.25);
    opacity: 1;
}

/* ═══ Stats Counter ═══ */
html[data-theme="light"] .stats-counter-num {
    color: var(--primary);
}

/* ═══ Scroll Progress Bar ═══ */
html[data-theme="light"] .scroll-progress-bar {
    background: var(--primary);
}

/* ═══ Click Ripple ═══ */
html[data-theme="light"] .click-ripple {
    background: rgba(var(--primary-rgb), 0.15);
}

/* ═══ Story Chapter Indicator ═══ */
html[data-theme="light"] .story-chapter-indicator {
    color: var(--text-light);
}

html[data-theme="light"] .chapter-progress-bar {
    background: var(--primary);
}

/* Theme Toggle Button */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: 1px solid rgba(var(--text-rgb), 0.2);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text);
    position: relative;
    transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.theme-toggle-btn:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
}

.theme-toggle-btn .theme-icon {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-toggle-btn .sun-icon { opacity: 0; }
.theme-toggle-btn .moon-icon { opacity: 1; }
html[data-theme="light"] .theme-toggle-btn .sun-icon { opacity: 1; }
html[data-theme="light"] .theme-toggle-btn .moon-icon { opacity: 0; }

/* --- Dark Mode (default) --- */
/* What We Do Section — Dark Mode Background */
[data-theme="dark"] section#whatWeDo.what-we-do {
    background: transparent !important;
    position: relative;
    transition: none !important;
    z-index: 1;
}

/* What We Do Section — Text Colors (Dark Mode) */
[data-theme="dark"] section#whatWeDo.what-we-do .text-section-sub {
    color: var(--text-lighter) !important;
}

[data-theme="dark"] section#whatWeDo.what-we-do .text-section-headline {
    color: var(--text) !important;
}

[data-theme="dark"] section#whatWeDo.what-we-do .text-section-body {
    color: var(--text-light) !important;
}

/* What We Do Section — Stats Counter (Dark Mode) */
[data-theme="dark"] section#whatWeDo.what-we-do .stats-counter-item {
    color: var(--text) !important;
}

[data-theme="dark"] section#whatWeDo.what-we-do .stats-counter-num {
    color: var(--primary) !important;
}

[data-theme="dark"] section#whatWeDo.what-we-do .stats-counter-label {
    color: var(--text-light) !important;
}

/* What We Do Section — Container */
section#whatWeDo.what-we-do .container {
    position: relative;
    z-index: 1;
}

/* What We Do Section — Smooth transition */
section#whatWeDo.what-we-do * {
    transition: color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background-color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Projects Section — Dark Mode */
[data-theme="dark"] section#projects.projects-section {
    background: transparent !important;
    position: relative;
    transition: none !important;
    z-index: 1;
}

/* Projects Section — Text Colors (Dark Mode) */
[data-theme="dark"] section#projects.projects-section .text-section-sub {
    color: var(--text-lighter) !important;
}

[data-theme="dark"] section#projects.projects-section .text-section-headline,
[data-theme="dark"] section#projects.projects-section .projects-title {
    color: var(--text) !important;
}

[data-theme="dark"] section#projects.projects-section .text-section-body {
    color: var(--text-light) !important;
}

/* Projects Section — Logo Marquee (Dark Mode) */
[data-theme="dark"] section#projects.projects-section .logo-marquee-item {
    filter: none;
}

[data-theme="dark"] section#projects.projects-section .logo-marquee-item:hover {
    filter: brightness(1.1);
}

/* Projects Section — Partners Header Divider (Dark Mode) */
[data-theme="dark"] section#projects.projects-section .partners-header::after {
    background: linear-gradient(90deg, transparent, rgba(var(--text-rgb), 0.06), transparent);
}

/* Gallery Section — Dark Mode */
[data-theme="dark"] section#photoGallery.gallery-section,
[data-theme="dark"] section#photoGallery.photo-gallery-section {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* Light Mode — Section Overrides */

/* What We Do — Light Mode */
[data-theme="light"] section#whatWeDo.what-we-do {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

[data-theme="light"] section#whatWeDo.what-we-do .text-section-sub {
    color: var(--text-lighter) !important;
}

[data-theme="light"] section#whatWeDo.what-we-do .text-section-headline {
    color: var(--text) !important;
}

[data-theme="light"] section#whatWeDo.what-we-do .text-section-body {
    color: var(--text-light) !important;
}

[data-theme="light"] section#whatWeDo.what-we-do .stats-counter-num {
    color: var(--primary) !important;
}

[data-theme="light"] section#whatWeDo.what-we-do .stats-counter-label {
    color: var(--text-light) !important;
}

/* Projects — Light Mode */
[data-theme="light"] section#projects.projects-section {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

[data-theme="light"] section#projects.projects-section .text-section-sub {
    color: var(--text-lighter) !important;
}

[data-theme="light"] section#projects.projects-section .text-section-headline,
[data-theme="light"] section#projects.projects-section .projects-title {
    color: var(--text) !important;
}

[data-theme="light"] section#projects.projects-section .text-section-body {
    color: var(--text-light) !important;
}

[data-theme="light"] section#projects.projects-section .partners-header::after {
    background: linear-gradient(90deg, transparent, rgba(var(--text-rgb), 0.08), transparent);
}

/* Gallery — Light Mode */
[data-theme="light"] section#photoGallery.gallery-section,
[data-theme="light"] section#photoGallery.photo-gallery-section {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* Awards – Light Mode */
[data-theme="light"] section#awards {
    background: transparent !important;
}

/* Press – Light Mode */
[data-theme="light"] section#press {
    background: transparent !important;
}

/* Contact – Light Mode */
[data-theme="light"] .contact-section--minimal {
    background: transparent !important;
}

/* LTR — Section indicator positioned on the right */
html[dir="ltr"] .story-chapter-indicator,
html:not([dir="rtl"]) .story-chapter-indicator {
    right: 40px !important;
    left: auto !important;
    align-items: flex-end !important;
}

html[dir="ltr"] .story-chapter-indicator .chapter-info,
html:not([dir="rtl"]) .story-chapter-indicator .chapter-info {
    flex-direction: row-reverse;
    text-align: right;
}

/* RTL — Section indicator stays on the right */
html[dir="rtl"] .story-chapter-indicator {
    right: 40px !important;
    left: auto !important;
    direction: ltr;
    align-items: flex-end !important;
}

html[dir="rtl"] .story-chapter-indicator .chapter-info {
    flex-direction: row-reverse;
    text-align: right;
}

/* RTL — Keep Earth & rings position (no mirroring) */
html[dir="rtl"] .hero-earth-container,
html[dir="rtl"] .hero-earth-container .hero-earth,
html[dir="rtl"] .hero-earth-container .earth-ring,
html[dir="rtl"] .hero-earth-container .ring-planet,
html[dir="rtl"] .hero-light {
    direction: ltr;
}

/* RTL — Gallery track stays LTR */
html[dir="rtl"] .gallery-slider,
html[dir="rtl"] .gallery-track {
    direction: ltr;
}

/* RTL — Project logos stay LTR */
html[dir="rtl"] .projects-section .logo-marquee-wrapper,
html[dir="rtl"] .projects-section .logo-marquee,
html[dir="rtl"] .projects-section .logo-marquee-track,
html[dir="rtl"] .projects-section .logo-marquee-inner,
html[dir="rtl"] .projects-section .logo-marquee-group,
html[dir="rtl"] .projects-section .logo-marquee-item {
    direction: ltr;
}

/* RTL — Article cards stay LTR */
html[dir="rtl"] .articles-carousel-wrapper,
html[dir="rtl"] .articles-carousel-rows,
html[dir="rtl"] .articles-carousel-row,
html[dir="rtl"] .articles-carousel,
html[dir="rtl"] .articles-carousel-track,
html[dir="rtl"] .articles-carousel-inner,
html[dir="rtl"] .articles-carousel-group,
html[dir="rtl"] .article-carousel-item,
html[dir="rtl"] .article-carousel-thumb,
html[dir="rtl"] .article-carousel-content,
html[dir="rtl"] .article-carousel-meta,
html[dir="rtl"] .article-carousel-title,
html[dir="rtl"] .article-carousel-date {
    direction: ltr;
}

/* Arabic: slightly larger base font */
html[dir="rtl"] {
    font-size: 107%;
}

/* RTL — Arabic: navbar stays LTR, font sizes match LTR */




/* Font sizes match LTR — only alignment follows RTL */
/* Navbar: keeps LTR layout in RTL pages, text right-aligned */
html[dir="rtl"] .navbar,
html[dir="rtl"] .nav-wrapper,
html[dir="rtl"] .nav-content,
html[dir="rtl"] .nav-actions,
html[dir="rtl"] .side-nav,
html[dir="rtl"] .side-nav-menu {
    direction: ltr;
}

html[dir="rtl"] .nav-headline {
    font-size: var(--fs-lg);
    text-align: right;
}

html[dir="rtl"] .nav-link {
    font-size: var(--fs-base);
    text-align: right;
}

html[dir="rtl"] .nav-action-btn {
    font-size: var(--fs-sm);
    text-align: right;
}

html[dir="rtl"] .side-nav-link {
    font-size: var(--fs-sm);
    text-align: right;
}

html[dir="rtl"] .language-dropdown-item {
    font-size: var(--fs-sm);
    text-align: right;
}

/* Footer: LTR layout in Arabic */
html[dir="rtl"] .footer,
html[dir="rtl"] .footer-inner,
html[dir="rtl"] .footer-content,
html[dir="rtl"] .footer-links,
html[dir="rtl"] .footer-block {
    direction: ltr;
}

html[dir="rtl"] .footer-links a,
html[dir="rtl"] .nav-link {
    text-align: right;
}

html[dir="rtl"] .form-row,
html[dir="rtl"] .contact-row {
    direction: rtl;
}

/* Contact page: keep LTR layout in Arabic */
html[dir="rtl"] .contact-page .contact-row,
html[dir="rtl"] .contact-page .form-row,
html[dir="rtl"] .contact-page .contact-section--minimal .contact-form,
html[dir="rtl"] .contact-page .contact-section--minimal .contact-block--after-form,
html[dir="rtl"] .contact-page .contact-inner,
html[dir="rtl"] .contact-page .text-section-inner {
    direction: ltr;
}

html[dir="rtl"] .contact-page .contact-section--minimal .contact-form,
html[dir="rtl"] .contact-page .contact-section--minimal .contact-block--after-form {
    text-align: left;
}

html[dir="rtl"] .contact-page .contact-row {
    grid-template-columns: 1fr 1fr;
    text-align: left;
}

/* RTL: timeline same as LTR (bar on left) */
/* (RTL timeline uses base padding-left/left) */

@media (max-width: 1024px) {
    html[dir="ltr"] .story-chapter-indicator,
    html:not([dir="rtl"]) .story-chapter-indicator {
        right: 30px !important;
    }
    html[dir="rtl"] .story-chapter-indicator {
        right: 30px !important;
        left: auto !important;
    }
}

@media (max-width: 768px) {
    html[dir="ltr"] .story-chapter-indicator,
    html:not([dir="rtl"]) .story-chapter-indicator {
        right: 20px !important;
    }
    html[dir="rtl"] .story-chapter-indicator {
        right: 20px !important;
        left: auto !important;
    }
    /* Navbar font sizes match LTR */
    html[dir="rtl"] .nav-headline {
        font-size: var(--fs-base);
    }
    html[dir="rtl"] .nav-action-btn {
        font-size: var(--fs-sm) !important;
    }
    html[dir="rtl"] .nav-wrapper.is-open .side-nav-link {
        font-size: var(--fs-lg) !important;
    }
}

@media (max-width: 480px) {
    html[dir="ltr"] .story-chapter-indicator,
    html:not([dir="rtl"]) .story-chapter-indicator {
        right: 16px !important;
    }
    html[dir="rtl"] .story-chapter-indicator {
        right: 16px !important;
        left: auto !important;
    }
    /* Navbar font sizes match LTR */
    html[dir="rtl"] .nav-headline {
        font-size: var(--fs-sm);
    }
    html[dir="rtl"] .nav-action-btn {
        font-size: var(--fs-sm) !important;
    }
}

/* Smooth Theme Transition */
body.theme-transitioning * {
    transition: background-color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}