/*
 Theme Name:   Astra Child
 Theme URI:    https://activearabia.fit
 Description:  Astra Child Theme for Active Arabia
 Author:       Active Arabia
 Template:     astra
 Version:      1.2.0
 Text Domain:  astra-child
*/

/* ============================================
   1. HERO / BANNER GAP FIX
   ============================================ */

.ast-single-entry-banner,
.ast-banner-data,
.page-hero,
.elementor-section:first-of-type,
.wp-block-cover:first-child {
    margin-top: 0 !important;
}

.ast-above-header-section,
.ast-above-header-bar {
    margin-bottom: 0;
}

body.home #content > .ast-container > .ast-row > *:first-child,
body.page #primary > .ast-article-single:first-child {
    margin-top: 0;
}

/* ============================================
   2. STICKY HEADER
   ============================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    will-change: background-color, box-shadow;
}

#page {
    overflow-x: clip;
}

.site-header.aa-scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}

.site-header.aa-scrolled .main-header-menu > .menu-item > a,
.site-header.aa-scrolled .main-navigation a,
.site-header.aa-scrolled .ast-header-html-markup {
    color: #1a1a1a !important;
}

.site-header.aa-scrolled .ast-builder-grid-row {
    background: transparent !important;
}

/* ============================================
   3. SCROLL PROGRESS BAR — #2D6A4F green
   ============================================ */

#aa-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: #2D6A4F;
    z-index: 10000;
    transition: width 0.08s linear;
    pointer-events: none;
    border-radius: 0 2px 2px 0;
}

/* ============================================
   4. READING TIME
   ============================================ */

.aa-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.83em;
    color: #888;
    margin: 0 0 18px;
    line-height: 1;
}

.aa-reading-time svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    opacity: 0.7;
}

/* ============================================
   5. RTL / ARABIC POST FIXES
   ============================================ */

body.post-is-arabic .entry-title,
body.post-is-arabic .entry-content,
body.post-is-arabic .entry-summary,
body.post-is-arabic .entry-meta {
    direction: rtl;
    text-align: right;
    font-family: 'Noto Sans Arabic', 'Segoe UI', Arial, sans-serif;
}

body.post-is-arabic .aa-reading-time {
    flex-direction: row-reverse;
    direction: rtl;
}

body.post-is-arabic .entry-content ul,
body.post-is-arabic .entry-content ol {
    padding-right: 1.5em;
    padding-left: 0;
    list-style-position: inside;
}

body.post-is-arabic blockquote {
    border-right: 4px solid #333;
    border-left: none;
    padding-right: 1em;
    padding-left: 0;
    margin-right: 0;
}

@media (max-width: 768px) {
    body.post-is-arabic .entry-content { padding-right: 0; padding-left: 0; }
    body.post-is-arabic .entry-content p { text-align: right; }
    body.post-is-arabic .ast-article-single .entry-header { text-align: right; direction: rtl; }
    body.post-is-arabic #primary { direction: rtl; }
    body.post-is-arabic .ast-article-single { direction: rtl; }
    body.post-is-arabic .entry-footer { direction: rtl; text-align: right; }
    body.post-is-arabic .ast-author-info { flex-direction: row-reverse; text-align: right; }
}

/* ============================================
   6. CATEGORY FILTER BAR
   ============================================ */

.aa-category-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 0 24px;
    margin: 0 0 28px;
    border-bottom: 1px solid #efefef;
    list-style: none;
}

.aa-category-filter li { margin: 0; }

.aa-category-filter a {
    display: inline-block;
    padding: 7px 18px;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #555;
    background: #f5f5f5;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.18s, color 0.18s, border-color 0.18s;
    white-space: nowrap;
}

.aa-category-filter a:hover { background: #e8e8e8; color: #111; }

.aa-category-filter a.aa-active-cat {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}

@media (max-width: 768px) {
    .aa-category-filter {
        gap: 6px;
        padding-bottom: 18px;
        margin-bottom: 20px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .aa-category-filter::-webkit-scrollbar { display: none; }
    .aa-category-filter a { padding: 6px 14px; font-size: 0.8rem; }
}

/* ============================================
   7. SOCIAL SHARE — FLOATING SIDEBAR
   Desktop: icon-only circles fixed to left edge
   Mobile:  full-width bottom bar with labels
   ============================================ */

/* Shared button styles */
#aa-share-sidebar .aa-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
}

#aa-share-sidebar .aa-share-btn:active { transform: scale(0.95); }

#aa-share-sidebar .aa-share-wa   { background: #25D366; color: #ffffff; }
#aa-share-sidebar .aa-share-x    { background: #000000; color: #ffffff; }
#aa-share-sidebar .aa-share-copy { background: #f0f0f0; color: #333333; }
#aa-share-sidebar .aa-share-copy.aa-copied { background: #d4edda; color: #1a5c2a; }

/* ── DESKTOP (≥ 1025 px): fixed left column, icons only ── */
@media (min-width: 1025px) {
    #aa-share-sidebar {
        position: fixed;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 9997;
        display: flex;
        flex-direction: column;
        gap: 10px;
        /* Fade in after a moment so it doesn't flash on page load */
        animation: aa-fadein 0.4s ease 0.6s both;
    }

    /* RTL: move sidebar to right edge */
    body.post-is-arabic #aa-share-sidebar {
        left: auto;
        right: 16px;
    }

    #aa-share-sidebar .aa-share-btn {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    }

    #aa-share-sidebar .aa-share-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 18px rgba(0, 0, 0, 0.24);
    }

    #aa-share-sidebar .aa-share-btn svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    /* Labels hidden on desktop — icons only */
    #aa-share-sidebar .aa-share-label {
        display: none;
    }
}

/* ── MOBILE / TABLET (≤ 1024 px): fixed bottom bar with labels ── */
@media (max-width: 1024px) {
    #aa-share-sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9997;
        display: flex;
        flex-direction: row;
        gap: 8px;
        background: #ffffff;
        border-top: 1px solid #e8e8e8;
        padding: 8px 12px;
        /* Respect home-indicator on iOS */
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.07);
    }

    #aa-share-sidebar .aa-share-btn {
        flex: 1;
        gap: 5px;
        padding: 10px 4px;
        border-radius: 10px;
        font-size: 0.78rem;
        line-height: 1.2;
        flex-direction: column; /* icon on top, label below */
    }

    #aa-share-sidebar .aa-share-btn svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    #aa-share-sidebar .aa-share-label {
        font-size: 0.7rem;
    }

    /* Push body up so bar doesn't cover content */
    body.single-post {
        padding-bottom: 74px;
    }

    /* Move lang switcher above the share bar on single posts */
    body.single-post #aa-lang-switcher {
        bottom: 82px;
    }
}

@keyframes aa-fadein {
    from { opacity: 0; transform: translateY(-50%) translateX(-6px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* ============================================
   8. RELATED POSTS
   ============================================ */

.aa-related-posts {
    margin: 40px 0 0;
    padding: 32px 0 0;
    border-top: 2px solid #1a1a1a;
}

.aa-related-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 24px;
    letter-spacing: -0.01em;
}

.aa-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.aa-related-card {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #efefef;
    transition: box-shadow 0.2s, transform 0.2s;
}

.aa-related-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
    transform: translateY(-2px);
}

.aa-related-img-wrap {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f5f5f5;
}

.aa-related-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

.aa-related-card:hover .aa-related-img-wrap img {
    transform: scale(1.04);
}

.aa-related-body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.aa-related-body.aa-rtl {
    direction: rtl;
    text-align: right;
    font-family: 'Noto Sans Arabic', sans-serif;
}

.aa-related-cat {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #2D6A4F;
    text-decoration: none;
}

.aa-related-body.aa-rtl .aa-related-cat {
    text-transform: none;
    letter-spacing: 0;
}

.aa-related-post-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    color: #1a1a1a;
}

.aa-related-post-title a { color: inherit; text-decoration: none; }
.aa-related-post-title a:hover { color: #2D6A4F; }

.aa-related-date {
    display: block;
    font-size: 0.78rem;
    color: #999;
    margin-top: auto;
    padding-top: 6px;
}

@media (max-width: 900px) {
    .aa-related-grid { grid-template-columns: repeat(2, 1fr); }
    .aa-related-grid .aa-related-card:nth-child(3) { display: none; }
}

@media (max-width: 600px) {
    .aa-related-grid { grid-template-columns: 1fr; }
    .aa-related-grid .aa-related-card:nth-child(3) { display: flex; }
    .aa-related-posts { margin-top: 28px; padding-top: 24px; }
}

/* ============================================
   9. LANGUAGE SWITCHER
   ============================================ */

#aa-lang-switcher {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 100px;
    padding: 7px 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    direction: ltr;
}

body.post-is-arabic #aa-lang-switcher,
html[lang="ar"] #aa-lang-switcher {
    right: auto;
    left: 24px;
}

.aa-lang-opt {
    color: #bbb;
    text-decoration: none;
    padding: 2px 5px;
    border-radius: 4px;
    transition: color 0.15s;
    line-height: 1;
    cursor: pointer;
}

.aa-lang-opt:hover,
.aa-lang-opt:focus-visible {
    color: #1a1a1a;
    text-decoration: none;
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.aa-lang-opt.aa-lang-active {
    color: #1a1a1a;
    pointer-events: none;
    cursor: default;
}

.aa-lang-sep {
    color: #e0e0e0;
    user-select: none;
    font-weight: 300;
    padding: 0 2px;
    font-size: 1.1em;
}

@media (max-width: 480px) {
    #aa-lang-switcher {
        bottom: 16px;
        right: 16px;
        padding: 6px 13px;
        font-size: 0.74rem;
    }
    body.post-is-arabic #aa-lang-switcher,
    html[lang="ar"] #aa-lang-switcher {
        right: auto;
        left: 16px;
    }
}

/* ============================================
   10. DARK MODE — CSS variables + overrides
   ============================================ */

/* Light mode tokens (default) */
:root {
    --aa-bg:           #ffffff;
    --aa-bg2:          #f5f5f5;
    --aa-text:         #1a1a1a;
    --aa-text2:        #555555;
    --aa-muted:        #888888;
    --aa-border:       #efefef;
    --aa-border2:      #e0e0e0;
    --aa-green:        #2D6A4F;
    --aa-green-light:  #d4edda;
    --aa-card:         #ffffff;
    --aa-shadow:       rgba(0, 0, 0, 0.08);
    --aa-header-bg:    #ffffff;
    --aa-input-bg:     #f5f5f5;
}

/* Dark mode tokens */
[data-theme="dark"] {
    --aa-bg:           #1a1a1a;
    --aa-bg2:          #2d2d2d;
    --aa-text:         #f0f0f0;
    --aa-text2:        #b0b0b0;
    --aa-muted:        #777777;
    --aa-border:       #3a3a3a;
    --aa-border2:      #444444;
    --aa-green:        #52b788;
    --aa-green-light:  #1a3d2b;
    --aa-card:         #2d2d2d;
    --aa-shadow:       rgba(0, 0, 0, 0.4);
    --aa-header-bg:    #1a1a1a;
    --aa-input-bg:     #2d2d2d;
}

/* ── Global dark overrides ── */
[data-theme="dark"] body,
[data-theme="dark"] #page,
[data-theme="dark"] .site {
    background-color: var(--aa-bg) !important;
    color: var(--aa-text);
}

[data-theme="dark"] .site-header,
[data-theme="dark"] .site-header.aa-scrolled {
    background-color: var(--aa-header-bg) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .site-header.aa-scrolled .main-header-menu > .menu-item > a,
[data-theme="dark"] .site-header.aa-scrolled .main-navigation a,
[data-theme="dark"] .main-navigation a,
[data-theme="dark"] .ast-header-html-markup {
    color: var(--aa-text) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--aa-text);
}

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] .entry-content {
    color: var(--aa-text);
}

[data-theme="dark"] a {
    color: var(--aa-green);
}

[data-theme="dark"] .entry-title a {
    color: var(--aa-text);
}

[data-theme="dark"] .entry-title a:hover {
    color: var(--aa-green);
}

/* Cards & containers */
[data-theme="dark"] .ast-article-post,
[data-theme="dark"] .ast-article-single,
[data-theme="dark"] .aa-related-card,
[data-theme="dark"] .aa-toc {
    background-color: var(--aa-card);
    border-color: var(--aa-border);
}

/* Meta, dates, muted text */
[data-theme="dark"] .entry-meta,
[data-theme="dark"] .posted-on,
[data-theme="dark"] .aa-reading-time,
[data-theme="dark"] .aa-related-date,
[data-theme="dark"] .aa-related-meta {
    color: var(--aa-muted);
}

/* Category filter */
[data-theme="dark"] .aa-category-filter {
    border-bottom-color: var(--aa-border);
}

[data-theme="dark"] .aa-category-filter a {
    background: var(--aa-bg2);
    color: var(--aa-text2);
    border-color: transparent;
}

[data-theme="dark"] .aa-category-filter a:hover {
    background: var(--aa-border2);
    color: var(--aa-text);
}

[data-theme="dark"] .aa-category-filter a.aa-active-cat {
    background: var(--aa-green);
    color: #ffffff;
    border-color: var(--aa-green);
}

/* Related posts */
[data-theme="dark"] .aa-related-posts {
    border-top-color: var(--aa-border2);
}

[data-theme="dark"] .aa-related-title {
    color: var(--aa-text);
}

[data-theme="dark"] .aa-related-post-title a {
    color: var(--aa-text);
}

[data-theme="dark"] .aa-related-post-title a:hover {
    color: var(--aa-green);
}

/* Share sidebar (copy button only; WA and X keep their brand colors) */
[data-theme="dark"] #aa-share-sidebar {
    background: var(--aa-bg2);
    border-top-color: var(--aa-border);
}

[data-theme="dark"] #aa-share-sidebar .aa-share-copy {
    background: var(--aa-bg2);
    color: var(--aa-text);
}

/* Lang switcher */
[data-theme="dark"] #aa-lang-switcher {
    background: var(--aa-bg2);
    border-color: var(--aa-border2);
}

[data-theme="dark"] .aa-lang-opt.aa-lang-active {
    color: var(--aa-text);
}

/* Footer & sidebar */
[data-theme="dark"] .widget,
[data-theme="dark"] .footer-widgets-outer-wrap,
[data-theme="dark"] #colophon {
    background-color: var(--aa-bg2);
    color: var(--aa-text2);
}

/* Blockquotes */
[data-theme="dark"] blockquote {
    border-left-color: var(--aa-green);
    background: var(--aa-bg2);
    color: var(--aa-text2);
}

/* Code blocks */
[data-theme="dark"] pre,
[data-theme="dark"] code {
    background: var(--aa-bg2);
    color: var(--aa-text);
}

/* ============================================
   11. DARK MODE TOGGLE BUTTON
   ============================================ */

#aa-dark-toggle {
    position: fixed;
    top: 14px;
    right: 20px;
    z-index: 10001;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--aa-border2, #e0e0e0);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--aa-text, #1a1a1a);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    padding: 0;
    font-size: 0;
}

#aa-dark-toggle:hover {
    background: var(--aa-bg2, #f5f5f5);
    border-color: var(--aa-green, #2D6A4F);
    color: var(--aa-green, #2D6A4F);
}

/* Light mode: show moon (to indicate "click for dark") */
#aa-dark-toggle .aa-dm-moon { display: block; }
#aa-dark-toggle .aa-dm-sun  { display: none;  }

/* Dark mode: show sun (to indicate "click for light") */
[data-theme="dark"] #aa-dark-toggle .aa-dm-moon { display: none;  }
[data-theme="dark"] #aa-dark-toggle .aa-dm-sun  { display: block; }

[data-theme="dark"] #aa-dark-toggle {
    border-color: var(--aa-border2);
    color: var(--aa-text);
}

@media (max-width: 768px) {
    #aa-dark-toggle {
        top: 10px;
        right: 56px; /* clear of hamburger menu */
        width: 32px;
        height: 32px;
    }

    #aa-dark-toggle svg {
        width: 15px;
        height: 15px;
    }
}

/* ============================================
   12. "NEW" BADGE
   ============================================ */

.aa-new-badge {
    display: inline-block;
    background: var(--aa-green, #2D6A4F);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 6px;
    line-height: 1.4;
    vertical-align: middle;
}

/* Arabic badge: no uppercase/letter-spacing */
.post-is-arabic .aa-new-badge,
[lang="ar"] .aa-new-badge {
    text-transform: none;
    letter-spacing: 0;
    font-family: 'Noto Sans Arabic', sans-serif;
}

/* ============================================
   13. CATEGORY COUNT
   ============================================ */

.aa-cat-count {
    opacity: 0.65;
    font-weight: 400;
    font-size: 0.9em;
}

/* ============================================
   14. TABLE OF CONTENTS
   ============================================ */

.aa-toc {
    background: var(--aa-bg2, #f8f8f8);
    border: 1px solid var(--aa-border, #efefef);
    border-left: 3px solid var(--aa-green, #2D6A4F);
    border-radius: 6px;
    padding: 18px 22px;
    margin: 0 0 28px;
    font-size: 0.9rem;
}

.aa-toc-rtl {
    border-left: none;
    border-right: 3px solid var(--aa-green, #2D6A4F);
    text-align: right;
    font-family: 'Noto Sans Arabic', sans-serif;
}

.aa-toc-title {
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--aa-green, #2D6A4F);
    margin: 0 0 12px;
}

.aa-toc-rtl .aa-toc-title {
    text-transform: none;
    letter-spacing: 0;
}

.aa-toc-list {
    margin: 0;
    padding-left: 1.2em;
    list-style: decimal;
}

.aa-toc-rtl .aa-toc-list {
    padding-left: 0;
    padding-right: 1.2em;
}

.aa-toc-list li {
    margin: 6px 0;
    line-height: 1.4;
}

.aa-toc-list a {
    color: var(--aa-text2, #555);
    text-decoration: none;
    transition: color 0.15s;
}

.aa-toc-list a:hover {
    color: var(--aa-green, #2D6A4F);
    text-decoration: underline;
}

/* ============================================
   15. NOTO SANS ARABIC — comments
   ============================================ */

body.post-is-arabic .comment-content,
body.post-is-arabic .comment-author .fn,
body.post-is-arabic .comments-title,
body.post-is-arabic #respond .comment-reply-title,
body.post-is-arabic .comment-form label,
body.post-is-arabic .comment-form input,
body.post-is-arabic .comment-form textarea {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Arial, sans-serif;
    direction: rtl;
    text-align: right;
}

/* smooth scroll for TOC anchor links */
html {
    scroll-behavior: smooth;
}

/* ============================================
   NOTO SANS ARABIC — all headings (Task 1)
   ============================================ */

body.post-is-arabic h1,
body.post-is-arabic h2,
body.post-is-arabic h3,
body.post-is-arabic h4,
body.post-is-arabic h5,
body.post-is-arabic h6 {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Arial, sans-serif;
}

/* ============================================
   "NEW" BADGE — overlay on featured image (Task 2)
   ============================================ */

.aa-thumb-wrap {
    position: relative;
    display: block;
    overflow: hidden;
}

.aa-thumb-wrap img {
    display: block;
    width: 100%;
}

.aa-badge-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    margin: 0;
    pointer-events: none;
}

/* RTL: badge on right side */
.post-is-arabic .aa-badge-overlay,
[lang="ar"] .aa-badge-overlay {
    left: auto;
    right: 10px;
}

/* ============================================
   TOC — collapsible toggle + active section (Task 5)
   ============================================ */

.aa-toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--aa-green, #2D6A4F);
    padding: 0;
    margin-bottom: 12px;
    font-family: inherit;
}

.aa-toc-rtl .aa-toc-toggle {
    text-transform: none;
    letter-spacing: 0;
    flex-direction: row-reverse;
}

.aa-toc-chevron {
    display: inline-block;
    font-size: 0.6em;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.aa-toc-toggle[aria-expanded="false"] .aa-toc-chevron {
    transform: rotate(180deg);
}

.aa-toc-list.aa-toc-collapsed {
    display: none;
}

.aa-toc-list a.aa-toc-active {
    color: var(--aa-green, #2D6A4F);
    font-weight: 600;
    text-decoration: none;
}

/* ============================================
   LAZY LOAD FADE-IN (Task 6)
   ============================================ */

img.aa-lazy {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

img.aa-lazy.aa-loaded {
    opacity: 1;
}

/* ============================================
   BACK TO TOP BUTTON (Task 9)
   ============================================ */

#aa-back-to-top {
    position: fixed;
    bottom: 80px;
    right: 24px;
    z-index: 9996;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #2D6A4F;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s;
    pointer-events: none;
}

#aa-back-to-top.aa-btt-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#aa-back-to-top:hover {
    background: #1f5038;
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.24);
}

#aa-back-to-top.aa-btt-visible:hover {
    transform: translateY(-2px);
}

/* Arabic single posts: social share is on right, back-to-top stays right */
body.post-is-arabic #aa-back-to-top {
    right: 24px;
    left: auto;
}

[data-theme="dark"] #aa-back-to-top {
    background: var(--aa-green, #52b788);
    color: #111111;
}

[data-theme="dark"] #aa-back-to-top:hover {
    background: #3d9a6a;
}

@media (max-width: 1024px) {
    body.single-post #aa-back-to-top {
        bottom: 90px; /* above the mobile share bar */
    }
}

@media (max-width: 480px) {
    #aa-back-to-top {
        width: 38px;
        height: 38px;
        right: 12px;
        bottom: 90px;
    }
}

/* ── Dark mode patch: cover Astra blog-layout-4 classes ── */

/* Post card surfaces (homepage, category, blog archives) */
[data-theme="dark"] .ast-article-inner,
[data-theme="dark"] .blog-layout-4,
[data-theme="dark"] .ast-article-single .post-content {
    background-color: var(--aa-card) !important;
    border-color: var(--aa-border) !important;
}

/* Post titles on cards: light text */
[data-theme="dark"] .entry-title.ast-blog-single-element,
[data-theme="dark"] .entry-title.ast-blog-single-element a,
[data-theme="dark"] h2.entry-title a,
[data-theme="dark"] h1.entry-title a {
    color: var(--aa-text) !important;
}

[data-theme="dark"] .entry-title.ast-blog-single-element a:hover,
[data-theme="dark"] h2.entry-title a:hover,
[data-theme="dark"] h1.entry-title a:hover {
    color: var(--aa-green) !important;
}

/* Excerpt body text on cards */
[data-theme="dark"] .ast-excerpt-container,
[data-theme="dark"] .ast-excerpt-container p {
    color: var(--aa-text2) !important;
}

/* Meta row: date, author, separator */
[data-theme="dark"] .entry-meta,
[data-theme="dark"] .entry-meta a,
[data-theme="dark"] .posted-on,
[data-theme="dark"] .posted-by,
[data-theme="dark"] .author-name,
[data-theme="dark"] .ast-blog-meta-container {
    color: var(--aa-text2) !important;
}

[data-theme="dark"] .entry-meta a:hover,
[data-theme="dark"] .posted-by a:hover {
    color: var(--aa-green) !important;
}

/* Category pills above title (English, Health, etc.) */
[data-theme="dark"] .cat-links a,
[data-theme="dark"] .ast-taxonomy-container a {
    color: var(--aa-green) !important;
}

/* Page banner / archive header (the "Health" white block) */
[data-theme="dark"] .ast-archive-description,
[data-theme="dark"] .ast-page-header-section,
[data-theme="dark"] .page-header,
[data-theme="dark"] .ast-archive-title,
[data-theme="dark"] .entry-banner-section,
[data-theme="dark"] .entry-banner,
[data-theme="dark"] .ast-archive-banner {
    background-color: var(--aa-bg2) !important;
    color: var(--aa-text) !important;
}

[data-theme="dark"] .ast-archive-title,
[data-theme="dark"] .entry-title {
    color: var(--aa-text) !important;
}

/* Site header should be dark in dark mode (currently still white in screenshot) */
[data-theme="dark"] .site-header,
[data-theme="dark"] .ast-primary-header-bar,
[data-theme="dark"] .main-header-bar,
[data-theme="dark"] .ast-above-header,
[data-theme="dark"] .ast-below-header {
    background-color: var(--aa-header-bg) !important;
    border-color: var(--aa-border) !important;
}

[data-theme="dark"] .site-title,
[data-theme="dark"] .site-title a,
[data-theme="dark"] .site-description,
[data-theme="dark"] .main-navigation a,
[data-theme="dark"] .main-header-menu a {
    color: var(--aa-text) !important;
}

/* Read-More links and buttons inside cards */
[data-theme="dark"] .read-more a,
[data-theme="dark"] .ast-button,
[data-theme="dark"] .button {
    color: var(--aa-green) !important;
}

/* ── Dark mode patch v2: single post page ── */

/* Single post content card — use higher specificity to beat Astra */
[data-theme="dark"] .ast-separate-container .ast-article-single,
[data-theme="dark"] .ast-separate-container .content-area,
[data-theme="dark"] .ast-narrow-container .ast-article-single,
[data-theme="dark"] body.single .ast-article-single,
[data-theme="dark"] body.single .content-area,
[data-theme="dark"] body.single .content-area.primary,
[data-theme="dark"] .ast-article-single {
    background-color: var(--aa-card) !important;
    color: var(--aa-text) !important;
}

/* Single post title and body */
[data-theme="dark"] .ast-article-single .entry-title,
[data-theme="dark"] .ast-article-single .entry-content,
[data-theme="dark"] .ast-article-single .entry-content p,
[data-theme="dark"] .ast-article-single .entry-content li,
[data-theme="dark"] .ast-article-single h1,
[data-theme="dark"] .ast-article-single h2,
[data-theme="dark"] .ast-article-single h3,
[data-theme="dark"] .ast-article-single h4 {
    color: var(--aa-text) !important;
}

/* "By Active Arabia / 2 May 2026" byline + reading time row */
[data-theme="dark"] .ast-article-single .entry-meta,
[data-theme="dark"] .ast-article-single .entry-meta a,
[data-theme="dark"] .ast-article-single .ast-blog-meta-container,
[data-theme="dark"] .ast-article-single .author-name,
[data-theme="dark"] .ast-article-single .posted-on,
[data-theme="dark"] .aa-reading-time {
    color: var(--aa-text2) !important;
}

/* Hyperlinks inside the article body */
[data-theme="dark"] .ast-article-single .entry-content a {
    color: var(--aa-green) !important;
}

/* Code blocks, blockquotes, tables in single posts */
[data-theme="dark"] .ast-article-single pre,
[data-theme="dark"] .ast-article-single code,
[data-theme="dark"] .ast-article-single blockquote {
    background-color: var(--aa-bg2) !important;
    color: var(--aa-text) !important;
    border-color: var(--aa-border) !important;
}

[data-theme="dark"] .ast-article-single table th,
[data-theme="dark"] .ast-article-single table td {
    background-color: var(--aa-card) !important;
    color: var(--aa-text) !important;
    border-color: var(--aa-border) !important;
}

/* Featured image section above title (lighter strip in screenshot) */
[data-theme="dark"] .ast-single-post-featured-section {
    background-color: var(--aa-bg) !important;
}

/* Comment area, if present */
[data-theme="dark"] .ast-comment-list,
[data-theme="dark"] .comment-respond,
[data-theme="dark"] .comment-reply-title,
[data-theme="dark"] #commentform,
[data-theme="dark"] #commentform input,
[data-theme="dark"] #commentform textarea {
    background-color: var(--aa-card) !important;
    color: var(--aa-text) !important;
    border-color: var(--aa-border) !important;
}

/* ── Dark mode patch v3: Gutenberg blocks on homepage ── */

/* Latest posts block — title links */
[data-theme="dark"] .wp-block-latest-posts__post-title,
[data-theme="dark"] .wp-block-latest-posts__post-title a,
[data-theme="dark"] .wp-block-latest-posts a,
[data-theme="dark"] .wp-block-latest-posts__list a {
    color: var(--aa-text) !important;
}

[data-theme="dark"] .wp-block-latest-posts__post-title a:hover,
[data-theme="dark"] .wp-block-latest-posts__list a:hover {
    color: var(--aa-green) !important;
}

/* Latest posts block — date below each post */
[data-theme="dark"] .wp-block-latest-posts__post-date {
    color: var(--aa-text2) !important;
}

/* Block group / section wrappers — make them transparent so page bg shows through */
[data-theme="dark"] .wp-block-group,
[data-theme="dark"] .wp-block-group.is-layout-constrained,
[data-theme="dark"] .wp-block-group.is-layout-flow {
    background-color: transparent !important;
    color: var(--aa-text);
}

/* Block headings (e.g., "أحدث المقالات") */
[data-theme="dark"] .wp-block-heading {
    color: var(--aa-text) !important;
}

/* Outline-style buttons (the hero "اكتشف المقالات" CTA) */
[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link,
[data-theme="dark"] .wp-block-button .wp-block-button__link {
    color: var(--aa-text) !important;
    border-color: var(--aa-green) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="dark"] .wp-block-button .wp-block-button__link:hover {
    background-color: var(--aa-green) !important;
    color: #fff !important;
    border-color: var(--aa-green) !important;
}

/* Cover block (hero) — keep image but ensure overlay/text stays readable */
[data-theme="dark"] .wp-block-cover .wp-block-cover__inner-container,
[data-theme="dark"] .wp-block-cover .wp-block-heading,
[data-theme="dark"] .wp-block-cover .has-white-color {
    color: #fff !important;
}

/* Footer */
[data-theme="dark"] .site-footer,
[data-theme="dark"] .site-footer-below-section-1,
[data-theme="dark"] .ast-builder-footer-grid-columns,
[data-theme="dark"] .footer-widget-area,
[data-theme="dark"] .ast-small-footer,
[data-theme="dark"] .site-info {
    background-color: var(--aa-bg2) !important;
    color: var(--aa-text2) !important;
    border-color: var(--aa-border) !important;
}

[data-theme="dark"] .site-footer a,
[data-theme="dark"] .site-info a {
    color: var(--aa-green) !important;
}

/* ── Animation pass: lightweight motion (Task #10) ── */

/* Initial state: any element with data-animate sits hidden + offset */
[data-animate="fade-up"] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    will-change: opacity, transform;
}

/* Reveal state: when JS adds .aa-animate-in */
[data-animate="fade-up"].aa-animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Hero stagger: heading, subtitle, CTA fire at increasing delays */
[data-animate="hero"] [data-animate="fade-up"]:nth-of-type(1).aa-animate-in { transition-delay: 0ms; }
[data-animate="hero"] [data-animate="fade-up"]:nth-of-type(2).aa-animate-in { transition-delay: 150ms; }
[data-animate="hero"] [data-animate="fade-up"]:nth-of-type(3).aa-animate-in { transition-delay: 300ms; }

/* Card hover: subtle lift (transform only, no layout reflow) */
.ast-article-inner,
.aa-related-card,
.wp-block-latest-posts__list > li {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    will-change: transform;
}

.ast-article-inner:hover,
.aa-related-card:hover,
.wp-block-latest-posts__list > li:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--aa-shadow);
}

/* Featured image zoom on card hover */
.ast-article-inner .post-thumb-img-content,
.aa-related-card .aa-related-img-wrap,
.wp-block-latest-posts__featured-image {
    overflow: hidden;
    border-radius: inherit;
}

.ast-article-inner .post-thumb-img-content img,
.aa-related-card .aa-related-img-wrap img,
.wp-block-latest-posts__featured-image img {
    transition: transform 0.4s ease-out;
    will-change: transform;
}

.ast-article-inner:hover .post-thumb-img-content img,
.aa-related-card:hover .aa-related-img-wrap img,
.wp-block-latest-posts__list > li:hover .wp-block-latest-posts__featured-image img {
    transform: scale(1.03);
}

/* Button hover: subtle background shift, no scaling */
.wp-block-button__link,
.ast-button {
    transition: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
}

/* Internal content links: animated underline (RTL-safe) */
.entry-content a:not(.wp-block-button__link) {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 0.25s ease-out;
}

.entry-content a:not(.wp-block-button__link):hover {
    background-size: 100% 1px;
}

/* Respect user preference: kill all animations if reduced-motion is on */
@media (prefers-reduced-motion: reduce) {
    [data-animate="fade-up"],
    [data-animate="fade-up"].aa-animate-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .ast-article-inner,
    .aa-related-card,
    .wp-block-latest-posts__list > li,
    .ast-article-inner img,
    .aa-related-card img,
    .wp-block-latest-posts__featured-image img {
        transition: none !important;
    }
    .ast-article-inner:hover,
    .aa-related-card:hover,
    .wp-block-latest-posts__list > li:hover {
        transform: none !important;
    }
}