/*
Theme Name: خليج أونلاين 2026
Theme URI: https://www.facebook.com/mzyads/
Author: Mohamed Z Altatar
Author URI: https://www.facebook.com/mzyads/
Description: دليلك الشامل للخدمات الرقمية في السعودية والخليج. شروحات مبسطة لمنصات أبشر ونفاذ، أحدث أخبار التعليم والجامعات، حلول عملية للمشاكل التقنية، ودليل مميز للوظائف والفعاليات السياحية. قالب ووردبريس احترافي متوافق مع AdSense ومحسّن لمحركات البحث.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gulf-online-2026
Tags: blog, news, rtl-language-support, custom-menu, featured-images, threaded-comments, translation-ready, government-services, saudi-arabia, gulf-region, education, jobs

/*
 * ═══════════════════════════════════════════════════════════════════════════════
 * 
 *    █████╗ ██╗   ██╗████████╗██╗  ██╗ ██████╗ ██████╗ ██╗████████╗██╗   ██╗
 *   ██╔══██╗██║   ██║╚══██╔══╝██║  ██║██╔═══██╗██╔══██╗██║╚══██╔══╝╚██╗ ██╔╝
 *   ███████║██║   ██║   ██║   ███████║██║   ██║██████╔╝██║   ██║    ╚████╔╝ 
 *   ██╔══██║██║   ██║   ██║   ██╔══██║██║   ██║██╔══██╗██║   ██║     ╚██╔╝  
 *   ██║  ██║╚██████╔╝   ██║   ██║  ██║╚██████╔╝██║  ██║██║   ██║      ██║   
 *   ╚═╝  ╚═╝ ╚═════╝    ╚═╝   ╚═╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝╚═╝   ╚═╝      ╚═╝   
 *                          ███╗   ██╗███████╗██╗  ██╗██╗   ██╗███████╗
 *                          ████╗  ██║██╔════╝╚██╗██╔╝██║   ██║██╔════╝
 *                          ██╔██╗ ██║█████╗   ╚███╔╝ ██║   ██║███████╗
 *                          ██║╚██╗██║██╔══╝   ██╔██╗ ██║   ██║╚════██║
 *                          ██║ ╚████║███████╗██╔╝ ██╗╚██████╔╝███████║
 *                          ╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
 *                                        2 0 2 6
 * 
 * ═══════════════════════════════════════════════════════════════════════════════
 * 
 *   🎨 Theme Developer & Designer:
 *   ╔═══════════════════════════════════════════════════════════════════════╗
 *   ║                                                                       ║
 *   ║   👤  MOHAMED Z ALTATAR                                               ║
 *   ║   🔗  https://www.facebook.com/mzyads/                                ║
 *   ║   📅  © 2026 - All Rights Reserved                                    ║
 *   ║                                                                       ║
 *   ╚═══════════════════════════════════════════════════════════════════════╝
 * 
 *   ⚡ Features:
 *   • E-E-A-T Optimized for Google Search Quality Guidelines
 *   • AdSense Ready with Smart Ad Placements
 *   • Bilingual Support (Arabic RTL & English LTR)
 *   • Google Indexing API Integration
 *   • Advanced Schema.org Markup (Article, Person, BreadcrumbList)
 *   • Blazing Fast Performance (95+ PageSpeed Score)
 *   • Dark Mode Support
 *   • Mobile-First Responsive Design
 * 
 * ═══════════════════════════════════════════════════════════════════════════════
 */


/* ===================================================================
   CSS RESET & BASE
   =================================================================== */
:root {
    --primary-color: #1a73e8;
    --primary-hover: #1557b0;
    --text-color: #1a1a1a;
    --heading-color: #121212;
    --secondary-text: #545454;
    /* WCAG AA compliant - 7:1 contrast on white */
    --bg-color: #fafafa;
    --card-bg: #ffffff;
    --border-color: #e0e0e0;
    --blockquote-bg: #f8f9fa;
    --toc-bg: #f8f9fa;
    --primary-light: rgba(26, 115, 232, 0.1);
    --transition-speed: 0.3s;

    /* Footer Defaults (Light) */
    --footer-bg: #ffffff;
    --footer-text: #4b5563;
    --footer-heading: #111827;
    --footer-link: #4b5563;
    --footer-link-hover: #1a73e8;
    --footer-border: #e2e8f0;
}

[data-theme="dark"],
.dark-mode {
    --text-color: #f1f5f9;
    --heading-color: #ffffff;
    --secondary-text: #94a3b8;
    /* WCAG AA compliant - better contrast on dark bg */
    --bg-color: #0f172a;
    --card-bg: #1e293b;
    --border-color: #334155;
    --blockquote-bg: #1e293b;
    --toc-bg: #1e293b;
    --primary-light: rgba(59, 130, 246, 0.2);
    --input-bg: #1e293b;
    --input-border: #334155;
    --input-text: #ffffff;

    /* Footer Dark Refinements */
    --footer-bg: #020617;
    /* Deep Navy */
    --footer-text: #a1afc0;
    /* Slate Blue */
    --footer-heading: #ffffff;
    --footer-link: #64748b;
    --footer-link-hover: #3b82f6;
    --footer-border: #1e293b;
}

.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="url"],
.dark-mode input[type="search"],
.dark-mode textarea {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--input-text) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #64748b !important;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: var(--heading-color) !important;
}

.dark-mode .nexus-source-wrap,
.dark-mode .sources-wrap,
.dark-mode .fact-checked-badge,
.dark-mode .trust-seal-box,
.dark-mode .digital-signature-box {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* Trust & Integrity Components */
.digital-signature-box {
    margin: 20px 0;
    padding: 15px;
    border: 2px solid #3498db;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: #f0f7ff;
}

.sig-badge {
    background: #3498db;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.sig-title {
    display: block;
    color: #2c3e50;
    font-size: 16px;
    font-weight: 700;
}

.sig-meta {
    margin: 5px 0 0;
    font-size: 13px;
    color: #34495e;
}

.fact-check-widget {
    margin: 30px 0;
    padding: 20px;
    border: 1px solid #fee2e2;
    border-radius: 15px;
    background: #fffcfc;
}

.fact-check-header {
    margin: 0 0 15px;
    color: #b91c1c;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
}

.fact-check-table-wrap {
    overflow-x: auto;
}

.fact-check-widget table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: transparent;
    box-shadow: none;
    margin: 0;
}

.fact-check-widget thead {
    background: #fef2f2;
}

.fact-check-widget th {
    padding: 10px;
    border-bottom: 2px solid #fee2e2;
    color: #b91c1c;
}

.fact-check-widget td {
    padding: 12px 10px;
    border-bottom: 1px solid #fee2e2;
}

.fact-check-source-btn {
    background: #ef4444;
    color: #fff !important;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
}

.accuracy-reporting-section {
    margin: 40px 0;
    border-top: 2px dashed var(--border-color);
    padding-top: 20px;
}

#report-error-btn {
    background: var(--card-bg);
    color: var(--secondary-text);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
}

#report-error-btn:hover {
    background: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

#report-error-form-wrap {
    display: none;
    margin-top: 15px;
    background: var(--bg-color);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

#report-error-form-wrap h5 {
    margin: 0 0 10px;
    color: var(--heading-color);
}

.report-desc {
    font-size: 13px;
    color: var(--secondary-text);
    margin-bottom: 15px;
}

#report-message {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
    font-family: inherit;
    box-sizing: border-box;
    background: var(--card-bg);
    color: var(--text-color);
}

#submit-accuracy-report {
    margin-top: 10px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
}

#report-feedback {
    margin-top: 10px;
    font-size: 13px;
    display: none;
    padding: 10px;
    border-radius: 6px;
}

#report-feedback.success {
    background: #d1e7dd;
    color: #0f5132;
}

#report-feedback.error {
    background: #f8d7da;
    color: #842029;
}

.dark-mode #report-feedback.success {
    background: rgba(25, 135, 84, 0.2);
    color: #75b798;
}

.dark-mode #report-feedback.error {
    background: rgba(220, 53, 69, 0.2);
    color: #ea868f;
}

/* ===================================================================
   SOURCE SHORTCODE STYLES
   =================================================================== */
.nexus-source {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    background: var(--blockquote-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.nexus-source:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.source-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.source-value {
    font-weight: 700;
    color: var(--primary-color);
}

.source-trigger {
    cursor: pointer;
    background: var(--primary-color);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    border: none;
    line-height: 1;
    transition: transform 0.2s ease;
}

.source-trigger:hover {
    transform: scale(1.1);
    background: var(--primary-hover);
}

.source-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    width: 260px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

.source-dropdown.active {
    display: block;
}


.rtl .source-dropdown {
    right: 0;
    left: auto;
}

.dropdown-title {
    display: block;
    font-size: 12px;
    margin-bottom: 8px;
    color: #2d3748;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dropdown-link {
    font-size: 13px;
    color: var(--primary-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.dropdown-link:hover {
    text-decoration: underline;
}

.dark-mode .source-trigger {
    background: var(--primary-color);
    color: #fff;
}

.dark-mode .source-dropdown {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}


.dark-mode .dropdown-title {
    color: var(--secondary-text);
}

/* Dark Mode Refinements for Trust Components */
.dark-mode .digital-signature-box {
    background: rgba(52, 152, 219, 0.1);
    border-color: rgba(52, 152, 219, 0.4);
}

.dark-mode .sig-title {
    color: #fff;
}

.dark-mode .sig-meta {
    color: var(--secondary-text);
}

.dark-mode .fact-check-widget {
    background: rgba(185, 28, 28, 0.05);
    border-color: rgba(185, 28, 28, 0.2);
}

.dark-mode .fact-check-header {
    color: #f87171;
}

.dark-mode .fact-check-widget thead {
    background: rgba(185, 28, 28, 0.1);
}

.dark-mode .fact-check-widget th,
.dark-mode .fact-check-widget td {
    border-color: rgba(185, 28, 28, 0.2);
}

.dark-mode table {
    background: var(--card-bg) !important;
    box-shadow: none !important;
}

/* Dark Mode Refinement - Article & UI */
.dark-mode .site-main,
.dark-mode .container,
.dark-mode .container-narrow,
.dark-mode article {
    background-color: var(--bg-color) !important;
}

.dark-mode .article-header {
    border-color: var(--border-color) !important;
}

.dark-mode .article-category {
    background: rgba(26, 115, 232, 0.15) !important;
    color: #4dabf7 !important;
    border: 1px solid rgba(26, 115, 232, 0.3) !important;
}

.dark-mode .article-meta {
    color: var(--secondary-text) !important;
}

.dark-mode .article-badge {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.dark-mode .article-reading-meta {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 50px;
    padding: 4px 15px;
}

.dark-mode .article-content h2 {
    border-color: var(--border-color) !important;
}

/* Dark Mode Article Text - High Contrast */
.dark-mode .article-content,
.dark-mode .article-content p,
.dark-mode .article-content li,
.dark-mode .article-content span,
.dark-mode .entry-content,
.dark-mode .entry-content p {
    color: #f1f5f9 !important;
}

.dark-mode .article-content a {
    color: #60a5fa !important;
}

.dark-mode .article-content a:hover {
    color: #93c5fd !important;
}

.dark-mode .article-content strong,
.dark-mode .article-content b {
    color: #ffffff !important;
}

.dark-mode .last-updated-badge {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #34d399 !important;
}

/* ===================================================================
   RATING WIDGET STYLES
   =================================================================== */
.nexus-rating-widget {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    padding: 30px;
    margin: 3rem 0;
    border: 2px solid #dee2e6;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.rating-header {
    text-align: center;
    margin-bottom: 25px;
}

.rating-header h3 {
    margin: 0 0 10px;
    color: var(--primary-color);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Align Category and Editorial Badge in one line */
.article-top-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.rtl .article-top-meta,
[dir="rtl"] .article-top-meta {
    justify-content: flex-start;
}

.article-top-meta .editorial-badge-wrap {
    margin-bottom: 0 !important;
    justify-content: flex-start !important;
    float: none !important;
    display: inline-flex !important;
    width: auto !important;
}

.article-top-meta .article-category {
    margin-bottom: 0 !important;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Ensure badges look consistent in the row */
.article-badge {
    margin-bottom: 0 !important;
}

/* ===================================================================
   404 ERROR PAGE
   =================================================================== */
.error-404-wrap {
    text-align: center;
    padding: 4rem 2rem;
}

.error-code {
    font-size: 8rem;
    font-weight: 800;
    color: var(--border-color);
    line-height: 1;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.error-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--heading-color);
}

.error-text {
    font-size: 1.15rem;
    color: var(--secondary-text);
    max-width: 600px;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

.search-form-404 {
    max-width: 500px;
    margin: 0 auto 3rem;
}

.search-form-404 form {
    display: flex;
    gap: 0.5rem;
    background: var(--card-bg);
    padding: 0.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.search-form-404 input {
    flex: 1;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
}

.search-form-404 input:focus {
    outline: none;
}

.helpful-links-wrap {
    margin-top: 4rem;
}

.helpful-links-wrap h4 {
    margin-bottom: 1.5rem;
}

.helpful-links-grid {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-helpful {
    background: var(--blockquote-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.btn-helpful:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

@media (max-width: 576px) {
    .error-code {
        font-size: 5rem;
    }

    .error-title {
        font-size: 1.8rem;
    }

    .search-form-404 form {
        flex-direction: column;
    }

    .search-form-404 button {
        width: 100%;
    }
}

/* ===================================================================
   FINAL RESPONSIVENESS REFINEMENTS
   =================================================================== */
@media (max-width: 480px) {

    .container,
    .container-narrow {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .featured-post-content {
        padding: 1.5rem;
    }

    .post-card-body {
        padding: 1.25rem;
    }

    .article-header h1 {
        font-size: 1.75rem;
    }

    .author-links a {
        width: 100%;
        justify-content: center;
    }
}

.rating-subtitle {
    margin: 0;
    color: var(--secondary-text);
    font-size: 0.95rem;
}

.rating-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.rating-average-box {
    text-align: center;
}

.rating-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}

.rating-stars-display {
    color: #ffc107;
    font-size: 1.5rem;
    margin: 5px 0;
}

.rating-count {
    font-size: 0.85rem;
    color: var(--secondary-text);
}

.rating-bars {
    flex: 1;
    max-width: 300px;
}

.rating-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.bar-label {
    font-size: 0.85rem;
    color: var(--secondary-text);
    width: 70px;
}

.bar-track {
    flex: 1;
    height: 8px;
    background: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffc107 0%, #ff9800 100%);
    transition: width 0.3s;
}

.bar-count {
    font-size: 0.8rem;
    color: var(--secondary-text);
    width: 40px;
}

.rating-input {
    text-align: center;
}

.rating-prompt {
    margin-bottom: 15px;
    font-weight: 600;
    color: var(--heading-color);
}

.rating-stars {
    font-size: 2.5rem;
    cursor: pointer;
    user-select: none;
}

.rating-stars .star {
    color: #dee2e6;
    transition: all 0.2s;
    display: inline-block;
    margin: 0 3px;
}

.rating-thank-you {
    text-align: center;
    padding: 20px;
    background: #d1ecf1;
    border-radius: 10px;
    color: #0c5460;
}

.dark-mode .nexus-rating-widget {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .rating-stats {
    background: var(--bg-color) !important;
    box-shadow: none !important;
    border: 1px solid var(--border-color);
}

.dark-mode .bar-track {
    background: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .rating-thank-you {
    background: rgba(21, 87, 36, 0.2) !important;
    color: #75b798 !important;
}

/* ===================================================================
   CERTIFICATIONS STYLES
   =================================================================== */
.certifications-awards-section {
    margin: 3rem 0;
    padding: 40px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.certifications-header {
    text-align: center;
    margin-bottom: 40px;
}

.certifications-header h2 {
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.certifications-subtitle {
    color: var(--secondary-text);
    font-size: 1.1rem;
    margin: 0;
}

.certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.cert-card {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.cert-card h3 {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.3rem;
}

.cert-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cert-card li {
    padding: 12px 0;
    border-bottom: 1px dashed #e9ecef;
    display: flex;
    align-items: start;
    gap: 10px;
}

.cert-text {
    color: var(--text-color);
    line-height: 1.6;
}

.site-certs {
    border-top: 4px solid #00a389;
}

.site-certs h3,
.site-certs .check-icon {
    color: #00a389;
}

.award-certs {
    border-top: 4px solid #ffc107;
}

.award-certs h3 {
    color: #f57c00;
}

.award-certs .star-icon {
    color: #ffc107;
}

.team-certs {
    border-top: 4px solid #1a73e8;
}

.team-certs h3,
.team-certs .grad-icon {
    color: #1a73e8;
}

.footer-certifications {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 20px;
}

.footer-cert-title {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
}

.footer-cert-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.footer-cert-badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dark-mode .certifications-awards-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
}

.dark-mode .cert-card {
    background: var(--bg-color) !important;
    border-color: var(--border-color);
}

.dark-mode .cert-card li {
    border-bottom-color: var(--border-color);
}

/* ===================================================================
   COMMENT STYLES
   =================================================================== */
.comment-item {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    list-style: none;
}

.comment-inner {
    display: flex;
    gap: 1rem;
}

.comment-avatar {
    flex-shrink: 0;
}

.comment-avatar img {
    border-radius: 50%;
}

.comment-body {
    flex: 1;
}

.comment-meta {
    margin-bottom: 0.75rem;
}

.comment-author {
    color: var(--heading-color);
    font-weight: 700;
}

.comment-date {
    color: var(--secondary-text);
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

.comment-awaiting-moderation {
    color: #f57c00;
    font-style: italic;
    margin-bottom: 0.75rem;
}

.comment-content {
    color: var(--text-color);
    line-height: 1.6;
}

.comment-actions {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    display: flex;
    gap: 10px;
}

.reply-link a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.edit-link a {
    color: var(--secondary-text);
    text-decoration: none;
}

.dark-mode .comment-item {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color);
}

/* ===================================================================
   IN-PAGE SEARCH STYLES
   =================================================================== */
#nexus-inpage-search {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 15px;
    padding: 20px;
    margin: 30px 0;
}

.is-rtl#nexus-inpage-search {
    direction: rtl;
}

.is-ltr#nexus-inpage-search {
    direction: ltr;
}

#nexus-inpage-search h4 {
    margin: 0 0 15px;
    font-size: 16px;
    color: var(--heading-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

#nexus-inpage-search .search-box {
    position: relative;
}

#nexus-inpage-search input {
    width: 100%;
    padding: 12px 45px 12px 20px;
    font-size: 15px;
    border: 2px solid #ddd;
    border-radius: 50px;
    outline: none;
    transition: border-color 0.3s;
    box-sizing: border-box;
    background: #fff;
}

.is-rtl #nexus-inpage-search input {
    padding: 12px 20px 12px 45px;
}

#nexus-inpage-search .search-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #767676;
    /* WCAG AA - 4.5:1 contrast */
}

.is-rtl #nexus-inpage-search .search-icon {
    right: auto;
    left: 18px;
}

#nexus-inpage-results {
    margin-top: 15px;
    display: none;
}

#nexus-inpage-results.has-results {
    display: block;
}

.nexus-search-result {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    cursor: pointer;
    transition: all 0.2s;
}

.nexus-search-result:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.nexus-search-result .result-text {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.6;
}

.nexus-search-result .result-text mark {
    background: linear-gradient(120deg, #ffeaa7 0%, #fdcb6e 100%);
    padding: 2px 4px;
    border-radius: 3px;
}

.nexus-result-count {
    font-size: 13px;
    color: var(--secondary-text);
    margin-bottom: 10px;
    padding: 8px 15px;
    background: #fff;
    border-radius: 20px;
    display: inline-block;
    border: 1px solid #eee;
}

.nexus-no-results {
    text-align: center;
    padding: 20px;
    color: var(--secondary-text);
}

.dark-mode #nexus-inpage-search {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border-color: var(--border-color) !important;
}

.dark-mode #nexus-inpage-search input {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.dark-mode .nexus-search-result {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .nexus-result-count {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
}

/* ===================================================================
   GLOBAL DARK MODE LEAK FIXES
   =================================================================== */
.dark-mode table,
.dark-mode table tr,
.dark-mode table td {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.dark-mode table tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.dark-mode table thead,
.dark-mode table thead th {
    background: rgba(26, 115, 232, 0.2) !important;
    color: #fff !important;
    border-color: var(--border-color) !important;
}

.dark-mode .article-tags {
    background: rgba(255, 255, 255, 0.03) !important;
    padding: 15px !important;
    border-radius: 12px !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .article-tags a {
    background: var(--bg-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.dark-mode .article-tags a:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

.dark-mode .coi-disclosure {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--secondary-text) !important;
}


body {
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
    line-height: 1.7;
    color: var(--text-color);
    background-color: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

[lang="ar"],
.rtl,
.arabic-content {
    font-family: 'Tajawal', 'Segoe UI', sans-serif;
    direction: rtl;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0 !important;
    word-spacing: normal !important;
}

[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4,
[lang="ar"] h5,
[lang="ar"] h6,
.rtl h1,
.rtl h2,
.rtl h3,
.rtl h4,
.rtl h5,
.rtl h6 {
    letter-spacing: normal !important;
    word-spacing: normal;
    text-align: right;
    /* Right align for RTL, not center */
}

/* English headings - left aligned */
[lang="en"] h1,
[lang="en"] h2,
[lang="en"] h3,
[lang="en"] h4,
[lang="en"] h5,
[lang="en"] h6 {
    text-align: left;
}

/* Specific alignment for titles and metadata in articles */
.rtl .article-header {
    text-align: right;
    /* Right align, not center */
}

.rtl .post-card-body {
    text-align: right;
    /* Right align, not center */
}

.rtl .post-card-meta,
.rtl .article-meta {
    justify-content: flex-start;
    /* Align to start (right in RTL) */
}

.rtl .post-card-excerpt,
.rtl .article-content p {
    text-align: right;
    /* Body text remains right-aligned for readability */
}

[lang="ar"] p,
.rtl p {
    text-align: right;
    text-justify: auto;
    /* Avoid justify in Arabic as it causes unnatural stretching */
}

/* ===================================================================
   TYPOGRAPHY - Clean Academic Style (NYT Inspired)
   =================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--heading-color);
    margin-bottom: 0.5em;
}

h1 {
    font-size: 2.5rem;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 2rem;
    letter-spacing: -0.01em;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.1rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-bottom: 1.5em;
    color: var(--text-color);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--secondary-text);
    background: var(--blockquote-bg);
    padding: 1.5rem;
    border-radius: 0 8px 8px 0;
}

.rtl blockquote {
    border-left: none;
    border-right: 4px solid var(--primary-color);
    padding-left: 0;
    padding-right: 1.5rem;
    border-radius: 8px 0 0 8px;
}

/* ===================================================================
   LAYOUT CONTAINERS - Full Width Design
   =================================================================== */
.container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    box-sizing: border-box;
}

.container-narrow {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    box-sizing: border-box;
}

.site-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1;
    padding: 2rem 0;
}

/* ===================================================================
   HEADER - Clean & Professional
   =================================================================== */
.site-header {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.site-logo {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--heading-color);
    text-decoration: none;
    letter-spacing: -0.03em;
}

[lang="ar"] .site-logo,
.rtl .site-logo {
    letter-spacing: 0;
}

.site-logo span {
    color: var(--primary-color);
}

/* Navigation */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.main-nav a {
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 0;
    position: relative;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width var(--transition-speed) ease;
}

.main-nav a:hover::after,
.main-nav a.current::after {
    width: 100%;
}

.main-nav a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

/* Mobile Navigation Toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #333;
    margin: 5px 0;
    transition: 0.3s;
}

/* Mobile Menu Styles */
@media (max-width: 768px) {
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: #fff;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease;
        z-index: 999;
        padding: 80px 20px 20px;
        overflow-y: auto;
    }

    .main-nav.active {
        right: 0;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 0;
    }

    .main-nav li {
        border-bottom: 1px solid #eee;
    }

    .main-nav a {
        display: block;
        padding: 15px 10px;
    }

    .nav-toggle {
        display: flex;
        flex-direction: column;
        z-index: 1000;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(7px, 7px);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    body.menu-open {
        overflow: hidden;
    }

    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
    }
}

/* ===================================================================
   BREADCRUMBS - Schema.org Compatible
   =================================================================== */
.breadcrumbs {
    padding: 1rem 0;
    font-size: 0.875rem;
    color: var(--secondary-text);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    /* Left for English */
}

.rtl .breadcrumbs,
[dir="rtl"] .breadcrumbs {
    text-align: right;
    /* Right for Arabic */
}

.breadcrumbs a {
    color: var(--secondary-text);
}

.breadcrumbs a:hover {
    color: #1a73e8;
}

.breadcrumbs span.separator {
    margin: 0 0.5rem;
    color: #767676;
    /* WCAG AA compliant */
}

/* Featured Image in Single Posts */
.article-featured-image {
    margin: 0 0 2.5rem 0;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.article-featured-image img {
    width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: cover;
}

.article-featured-image figcaption {
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.03);
    font-size: 0.85rem;
    color: var(--secondary-text);
    text-align: center;
    font-style: italic;
    border-top: 1px solid var(--border-color);
}

.dark-mode .article-featured-image figcaption {
    background: rgba(255, 255, 255, 0.03);
}

/* ===================================================================
   ARTICLE CONTENT - Academic Style
   =================================================================== */
.article-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    text-align: left;
    /* Left align for English */
}

.rtl .article-header,
[dir="rtl"] .article-header {
    text-align: right;
    /* Right align for Arabic */
}

.article-header h1 {
    text-align: start !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: #666;
    margin-top: 1rem;
    justify-content: flex-start;
    /* Start alignment */
}

.rtl .article-meta,
[dir="rtl"] .article-meta {
    justify-content: flex-start;
    /* Still start, which is right in RTL */
}

.article-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.article-category {
    background: #e3f2fd;
    color: #1565c0;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.article-content {
    font-size: 1.125rem;
    line-height: 1.85;
    text-align: left;
    letter-spacing: -0.01em;
    font-weight: 400;
    color: var(--text-color);
}

/* English specific article styling */
[lang="en"] .article-content,
:not([lang="ar"]):not(.rtl) .article-content {
    font-family: 'Inter', 'Georgia', 'Times New Roman', serif;
    font-size: 1.15rem;
    line-height: 1.9;
    letter-spacing: -0.015em;
    word-spacing: 0.05em;
}

[lang="en"] .article-content p,
:not([lang="ar"]):not(.rtl) .article-content p {
    margin-bottom: 1.85em;
    color: var(--text-color);
    font-weight: 400;
}

.rtl .article-content,
[dir="rtl"] .article-content {
    text-align: right;
    /* Right for Arabic */
}

.article-content p {
    margin-bottom: 1.75em;
    text-align: inherit;
    /* Inherit from parent */
}

.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    text-align: inherit;
    /* Inherit from parent, not center */
}

.article-content h2 {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.article-content h3 {
    margin-top: 2rem;
}

.article-content ul,
.article-content ol {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
}

.article-content li {
    margin-bottom: 0.75rem;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 2rem 0;
}

.article-content figure {
    margin: 2rem 0;
}

.article-content figcaption {
    font-size: 0.875rem;
    color: #666;
    text-align: center;
    margin-top: 0.75rem;
    font-style: italic;
}

/* ===================================================================
   TABLE OF CONTENTS
   =================================================================== */
.toc-container {
    background: var(--toc-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.toc-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--heading-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toc-title::before {
    content: '📑';
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-list li {
    margin-bottom: 0.5rem;
}

.toc-list a {
    color: var(--secondary-text);
    font-size: 0.95rem;
    display: block;
    padding: 0.25rem 0;
    border-bottom: 1px dashed #ddd;
}

.toc-list a:hover {
    color: #1a73e8;
    text-decoration: none;
}

.toc-list .toc-h3 {
    padding-left: 1rem;
    font-size: 0.9rem;
}

/* ===================================================================
   AUTHOR BIO BOX - E-E-A-T Signal
   =================================================================== */
.author-bio {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    margin: 3rem 0;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.author-avatar {
    flex-shrink: 0;
}

.author-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    object-fit: cover;
    border: 4px solid transparent;
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
        linear-gradient(135deg, #1a73e8, #7c3aed, #00a389) border-box;
    box-shadow: 0 8px 20px rgba(26, 115, 232, 0.25);
    transition: all 0.3s ease;
}

.author-avatar img:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(26, 115, 232, 0.35);
}

.author-info {
    flex: 1;
}

.author-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 0.25rem;
}

.author-title {
    font-size: 0.9rem;
    color: #1a73e8;
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.author-description {
    font-size: 0.95rem;
    color: var(--secondary-text);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.author-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.author-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--secondary-text);
    transition: all 0.2s ease;
}

.author-links a:hover {
    background: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
    text-decoration: none;
}

.author-links a.scholar-link {
    background: #4285f4;
    color: #fff;
    border-color: #4285f4;
}

.author-links a.scholar-link:hover {
    background: #3367d6;
}

/* ===================================================================
   READ NEXT SECTION
   =================================================================== */
.read-next {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 2rem;
    margin: 3rem 0;
}

.read-next-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #333;
    text-align: left;
    /* Left for English */
}

.rtl .read-next-title,
[dir="rtl"] .read-next-title {
    text-align: right;
    /* Right for Arabic */
}

.read-next-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.read-next-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.read-next-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.read-next-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.read-next-card-content {
    padding: 1rem;
}

.read-next-card h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.read-next-card h4 a {
    color: #333;
}

.read-next-card h4 a:hover {
    color: #1a73e8;
}

.read-next-card .card-meta {
    font-size: 0.8rem;
    color: #767676;
    /* WCAG AA compliant */
}

/* Dark Mode Styles for Read Next Section */
html.dark-mode .read-next,
html.dark-scheme .read-next,
html[data-theme="dark"] .read-next {
    background: #111827 !important;
    /* Matches Like Bar & Tags Container */
    border: 1px solid #374151 !important;
}

html.dark-mode .read-next-title,
html.dark-scheme .read-next-title,
html[data-theme="dark"] .read-next-title {
    color: var(--heading-color, #f1f5f9) !important;
}

html.dark-mode .read-next-card,
html.dark-scheme .read-next-card,
html[data-theme="dark"] .read-next-card {
    background: #1f2937 !important;
    /* Card color */
    border: 1px solid #374151 !important;
}

html.dark-mode .read-next-card:hover,
html.dark-scheme .read-next-card:hover,
html[data-theme="dark"] .read-next-card:hover {
    background: #374151 !important;
    /* Lighter on hover */
    border: 1px solid #4b5563 !important;
}

html.dark-mode .read-next-card h4,
html.dark-scheme .read-next-card h4,
html[data-theme="dark"] .read-next-card h4 {
    color: var(--heading-color, #f1f5f9) !important;
}

html.dark-mode .read-next-card h4 a,
html.dark-scheme .read-next-card h4 a,
html[data-theme="dark"] .read-next-card h4 a {
    color: var(--heading-color, #f1f5f9) !important;
}

html.dark-mode .read-next-card .card-meta,
html.dark-scheme .read-next-card .card-meta,
html[data-theme="dark"] .read-next-card .card-meta {
    color: var(--secondary-text, #94a3b8) !important;
}

/* ===================================================================
   AD CONTAINERS - Neutral Class Names
   =================================================================== */

/* Article Tags Dark Mode */
.article-tags {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 12px;
    margin: 2rem 0;
    font-size: 0.95rem;
    color: #333;
}

.article-tags strong {
    color: #333;
    margin-left: 0.5rem;
    /* For RTL */
}

.article-tags a {
    display: inline-block;
    background: #fff;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    margin: 0.25rem;
    color: #666;
    text-decoration: none;
    border: 1px solid #e9ecef;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.article-tags a:hover {
    background: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
}

html.dark-mode .article-tags,
html.dark-scheme .article-tags,
html[data-theme="dark"] .article-tags,
body.dark-mode .article-tags,
body[data-theme="dark"] .article-tags {
    background: #111827 !important;
    /* Dark Navy matches Like Bar */
    color: #f3f4f6 !important;
    border: 1px solid #374151 !important;
    /* Matching Border */
}

html.dark-mode .article-tags strong,
html.dark-scheme .article-tags strong,
html[data-theme="dark"] .article-tags strong,
body.dark-mode .article-tags strong,
body[data-theme="dark"] .article-tags strong {
    color: #f3f4f6 !important;
}

html.dark-mode .article-tags a,
html.dark-scheme .article-tags a,
html[data-theme="dark"] .article-tags a,
body.dark-mode .article-tags a,
body[data-theme="dark"] .article-tags a {
    background: #1f2937 !important;
    color: #d1d5db !important;
    border-color: #374151 !important;
}

html.dark-mode .article-tags a:hover,
html.dark-scheme .article-tags a:hover,
html[data-theme="dark"] .article-tags a:hover {
    background: #374151 !important;
    color: #fff !important;
    border-color: #2563eb !important;
    /* Blue highlight */
}

body.dark-scheme .article-tags,
body[data-theme="dark"] .article-tags {
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid #334155;
}

body.dark-mode .article-tags strong,
body.dark-scheme .article-tags strong,
body[data-theme="dark"] .article-tags strong {
    color: #f1f5f9;
}

body.dark-mode .article-tags a,
body.dark-scheme .article-tags a,
body[data-theme="dark"] .article-tags a {
    background: #334155;
    color: #cbd5e1;
    border-color: #475569;
}

body.dark-mode .article-tags a:hover,
body.dark-scheme .article-tags a:hover,
body[data-theme="dark"] .article-tags a:hover {
    background: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
}

/* Ensure Read Next Title is visible in dark mode */
body.dark-mode .read-next-card h3,
body.dark-mode .read-next-card h4,
body.dark-mode .read-next-card .card-title,
body[data-theme="dark"] .read-next-card h3,
body[data-theme="dark"] .read-next-card h4 {
    color: #f1f5f9 !important;
}

.ads-wrap-top:empty,
.ads-wrap-mid:empty,
.ads-wrap-btm:empty {
    display: none !important;
}

/* Ads containers with content */
.ads-wrap-top,
.ads-wrap-mid,
.ads-wrap-btm {
    text-align: center;
    margin: 2rem 0;
}

.ads-wrap-top {
    margin-bottom: 2rem;
}

.ads-wrap-mid {
    margin: 2.5rem 0;
}

.ads-wrap-btm {
    margin-top: 2.5rem;
}

/* ===================================================================
   FORM STYLING - Professional & Balanced
   =================================================================== */
.contact-form {
    background: var(--card-bg);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    margin: 2rem 0;
}

.form-group {
    margin-bottom: 1.5rem;
    text-align: inherit;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.6rem;
    color: var(--heading-color);
    font-size: 0.95rem;
    /* Prevent Arabic text stretching */
    letter-spacing: normal !important;
    word-spacing: normal;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="password"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.9rem 1.1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: all var(--transition-speed) ease;
    box-sizing: border-box;
    text-align: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.1);
}

.form-group textarea {
    min-height: 140px;
    resize: vertical;
}

/* Checkbox Alignment Fix */
.privacy-agreement {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-weight: normal !important;
    cursor: pointer;
    margin-top: 1rem;
    color: #666;
    line-height: normal;
}

.privacy-agreement input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}

.privacy-agreement span {
    font-size: 0.9rem;
    text-align: inherit;
    letter-spacing: normal;
    word-spacing: normal;
}

/* RTL Form Adjustments */
.rtl .form-group label,
.rtl .privacy-agreement {
    text-align: right;
}

.rtl .contact-icon {
    margin-left: 0.5rem;
    margin-right: 0;
}

.btn {
    display: inline-block;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background: #1a73e8;
    color: #fff;
}

.btn-primary:hover {
    background: #1557b0;
    transform: translateY(-1px);
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.contact-info-card {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
}

.contact-info-card h4 {
    margin-bottom: 0.5rem;
    color: var(--heading-color);
}

.contact-info-card p {
    color: var(--secondary-text);
    margin: 0;
}

.contact-info-card a {
    color: var(--primary-color);
}

.map-embed {
    width: 100%;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    margin: 2rem 0;
    background: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ===================================================================
   LEGAL PAGES (Privacy, Terms)
   =================================================================== */
.legal-content {
    background: var(--card-bg);
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.legal-content h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.legal-content h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.legal-content ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.legal-content li {
    margin-bottom: 0.5rem;
}

.legal-updated {
    font-size: 0.875rem;
    color: var(--secondary-text);
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

/* ===================================================================
   ABOUT PAGE - Editorial Team
   =================================================================== */
.mission-statement {
    background: linear-gradient(135deg, var(--primary-color) 0%, #0d47a1 100%);
    color: #fff !important;
    padding: 5rem 3rem;
    border-radius: 30px;
    text-align: center;
    margin: 4rem auto;
    max-width: 900px;
    box-shadow: 0 20px 40px rgba(26, 115, 232, 0.15);
    position: relative;
    overflow: hidden;
}

.mission-statement::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.mission-statement p {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1.25rem;
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
}

.mission-statement h2 {
    color: #fff !important;
    margin-bottom: 1.5rem;
    font-size: 2.25rem;
    font-weight: 800;
}

/* About Page Value Cards */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.value-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color);
    padding: 3rem 2rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-color);
}

.value-icon {
    font-size: 2.5rem;
    width: 80px;
    height: 80px;
    background: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.value-card:hover .value-icon {
    background: var(--primary-color);
    transform: scale(1.1) rotate(5deg);
}

.value-card h4 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--heading-color);
}

.dark-mode .value-icon {
    background: rgba(255, 255, 255, 0.05);
}

.value-card p {
    font-size: 0.95rem;
    color: var(--secondary-text);
    line-height: 1.6;
    margin: 0;
}

/* Team Section for About Page */
.team-section-wrap {
    background: var(--bg-color);
    padding: 4rem 0;
    margin: 0 -1.5rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin-top: 2rem;
}

.team-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.team-card-image {
    height: 320px;
    position: relative;
    overflow: hidden;
}

.team-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card-body {
    padding: 1.5rem;
}

.team-card h4 {
    margin-bottom: 0.5rem;
    font-size: 1.15rem;
    color: var(--heading-color);
}

.team-card .verified-badge {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: #c5a059;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* About Page Refinements */
.about-header {
    text-align: center;
    margin-bottom: 3rem;
}

.about-header .subtitle {
    font-size: 1.25rem;
    color: var(--secondary-text);
    max-width: 700px;
    margin: 1rem auto;
}

.about-story-section {
    margin: 3rem 0;
}

.about-story-section .story-text {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-color);
}

.about-values-section {
    margin: 4rem 0;
}

.section-title {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--heading-color);
}



.custom-page-content {
    margin-top: 3rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.team-card {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.2s ease, background-color var(--transition-speed);
}

.team-card:hover {
    transform: translateY(-4px);
}

.team-card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.team-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card-body {
    padding: 1.5rem;
}

.team-card h4 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.team-card .role {
    color: #1a73e8;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.team-card .expertise {
    font-size: 0.85rem;
    color: var(--secondary-text);
    line-height: 1.5;
}

/* ===================================================================
   EDITORIAL POLICY PAGE
   =================================================================== */
.editorial-content {
    background: var(--card-bg);
    padding: 3rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.policy-section {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.policy-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.policy-section h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.policy-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--primary-color);
}

.compliance-note {
    background: rgba(76, 175, 80, 0.1);
    border-left: 4px solid #4caf50;
    padding: 1rem 1.5rem;
    border-radius: 0 8px 8px 0;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--text-color);
}

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    padding: 4rem 0 2rem;
    margin-top: auto;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-col h4 {
    color: var(--footer-heading);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
}

.rtl .footer-col h4::after {
    left: auto;
    right: 0;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col li {
    margin-bottom: 0.75rem;
}

.footer-col a {
    color: var(--footer-link);
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: var(--footer-link-hover);
    text-decoration: none;
}

.footer-bottom {
    border-top: 1px solid var(--footer-border);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer-bottom p {
    color: var(--secondary-text);
    font-size: 0.875rem;
    margin: 0;
}

.rtl .footer-bottom,
.rtl .footer-col {
    text-align: right;
}

.rtl .footer-bottom {
    flex-direction: row-reverse;
}

.footer-legal-links {
    display: flex;
    gap: 1.5rem;
}

.footer-legal-links a {
    color: var(--secondary-text);
    font-size: 0.875rem;
}

.footer-legal-links a:hover {
    color: var(--primary-color);
}

/* Theme Developer Credit */
.theme-credit {
    margin-top: 15px;
}

.theme-credit p {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.03);
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.85rem;
    color: var(--footer-text);
    margin: 0;
}

.dark-mode .theme-credit p {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-credit span {
    color: var(--footer-text);
    font-weight: 500;
}

.theme-credit a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%) !important;
    padding: 8px 16px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.35) !important;
}

.theme-credit a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(26, 115, 232, 0.5) !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%) !important;
}

.theme-credit a svg,
.theme-credit svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    width: 16px !important;
    height: 16px !important;
}

/* ===================================================================
   HOMEPAGE - Posts Grid
   =================================================================== */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.post-card {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.post-card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post-card:hover .post-card-image img {
    transform: scale(1.05);
}

.post-card-body {
    padding: 1.5rem;
}

.post-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.post-card h3 a {
    color: var(--heading-color);
}

.post-card h3 a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

.article-category {
    background: var(--primary-light);
    color: var(--primary-color);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.archive-header {
    text-align: center;
    margin-bottom: 4rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.archive-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--heading-color);
}

.archive-description {
    font-size: 1.125rem;
    color: var(--secondary-text);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.post-card-excerpt {
    font-size: 0.95rem;
    color: var(--secondary-text);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.post-card-meta {
    font-size: 0.85rem;
    color: var(--secondary-text);
    display: flex;
    gap: 1rem;
}

/* OLD FEATURED POST STYLES REMOVED - Using new styles at end of file */

/* OLD DARK MODE FEATURED POST STYLES REMOVED - Using new styles at end of file */

/* ===================================================================
   RESPONSIVE DESIGN
   =================================================================== */

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .nav-toggle {
        display: block;
    }

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--card-bg);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        display: none;
    }

    .main-nav.active {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        padding: 1rem;
        gap: 0;
    }

    .main-nav li {
        border-bottom: 1px solid var(--border-color);
    }

    .main-nav a {
        display: block;
        padding: 1rem;
    }

    .author-bio {
        flex-direction: column;
        text-align: center;
    }

    .author-links {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .posts-grid {
        grid-template-columns: 1fr;
    }

    .legal-content,
    .editorial-content {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    .contact-form {
        padding: 1.5rem;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   PRINT STYLES
   =================================================================== */
@media print {

    .site-header,
    .site-footer,
    .ads-wrap-top,
    .ads-wrap-mid,
    .ads-wrap-btm,
    .read-next,
    .author-links,
    .nav-toggle {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    .article-content {
        max-width: 100%;
    }
}

/* ===================================================================
   UTILITIES
   =================================================================== */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mt-4 {
    margin-top: 2rem;
}

.mt-5 {
    margin-top: 3rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 2rem;
}

.mb-5 {
    margin-bottom: 3rem;
}

.py-1 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-3 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-4 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.py-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ===================================================================
   ADVANCED E-E-A-T STYLES (NEW)
   =================================================================== */

.ai-disclosure-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: help;
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color);
}

.ai-disclosure-badge:hover {
    background-color: var(--border-color) !important;
    transform: translateY(-1px);
}

/* Base Badge Style */
.article-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Editorial Badge */
.editorial-badge {
    background: var(--card-bg);
    border: 1px solid #00a389;
    color: #00a389;
}

/* Fact Checked Badge */
.fact-checked-badge {
    background: var(--primary-light);
    color: var(--primary-color);
    border: 1px solid var(--border-color);
}

/* Last Updated Badge */
.last-updated-badge {
    background: var(--primary-light);
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Modern Word Count & Reading Time */
.article-reading-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--card-bg);
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
}

.post-card h3 a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.2s;
}

.post-card h3 a:hover {
    color: var(--primary-color);
}

/* Tags Style */
.article-tags a {
    display: inline-block;
    background: var(--card-bg);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    margin: 0.25rem;
    font-size: 0.85rem;
    color: var(--secondary-text);
    border: 1px solid var(--border-color);
    transition: all 0.2s;
}

.article-tags a:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.pros-cons-wrap {
    animation: fadeIn 0.5s ease-out;
}

.pros-box li::before {
    content: '';
    color: #00a389;
    font-weight: bold;
}

.cons-box li::before {
    content: '';
    color: #e74c3c;
    font-weight: bold;
}

.sources-wrap {
    box-shadow: 0 2px 10px rgba(26, 115, 232, 0.05);
}

.sources-wrap h5 {
    color: var(--primary-color);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.sources-wrap li a:hover {
    text-decoration: underline;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RTL Specific adjustments for Pros/Cons */
.rtl .pros-cons-wrap {
    text-align: right;
}

.rtl .pros-box h4 span,
.rtl .cons-box h4 span {
    margin-left: 10px;
    margin-right: 0;
}

/* Premium Review Box Hover */
.pros-cons-wrap:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
    border-color: var(--border-color) !important;
    transition: all 0.3s ease;
}

/* Editorial Badge Hover Effect */
.editorial-badge:hover {
    background-color: #00a389 !important;
    color: #fff !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 163, 137, 0.4);
}

/* Conflict of Interest Disclosure */
.coi-disclosure strong {
    color: var(--heading-color);
    font-weight: 700;
}

/* Author Signature Animation */
.author-signature img {
    cursor: crosshair;
}

.author-signature img:hover {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    transform: rotate(-2deg);
}

/* Response for Mobile */
@media (max-width: 768px) {
    .editorial-badge-wrap {
        float: none !important;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
    }
}

/* Fact Checked Badge */
.fact-checked-badge {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--primary-light);
    transition: all 0.2s ease;
}

.fact-checked-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Verified Author Badge */
.verified-badge {
    cursor: help;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.author-name {
    display: flex;
    align-items: center;
}

.rtl .author-name .verified-badge {
    margin-right: 8px;
    margin-left: 0;
}

/* AI Badge Hover */
.ai-disclosure-badge:hover {
    background-color: #f1f3f5 !important;
}

/* Verified Experience Badge Animation */
.verified-exp-badge {
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% {
        box-shadow: 0 0 0 0 rgba(240, 140, 0, 0.4);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(240, 140, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(240, 140, 0, 0);
    }
}

/* ===================================================================
   AUTHOR BIO BOX STYLES
   =================================================================== */
.author-bio {
    display: flex;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 30px;
    margin: 3rem 0;
    gap: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.author-bio:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.07);
    border-color: #1a73e8;
    transform: translateY(-3px);
}

.author-avatar {
    flex-shrink: 0;
}

.author-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    object-fit: cover;
    border: 4px solid transparent;
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
        linear-gradient(135deg, #1a73e8, #7c3aed, #00a389) border-box;
    padding: 0;
    box-shadow: 0 8px 20px rgba(26, 115, 232, 0.25);
    transition: all 0.3s ease;
}

.author-avatar img:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(26, 115, 232, 0.35);
}

.author-info {
    flex-grow: 1;
}

.author-name {
    margin: 0 0 5px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--heading-color);
}

.author-title {
    font-size: 0.9rem;
    color: #1a73e8;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.author-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--secondary-text);
    margin-bottom: 20px;
}

.author-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.author-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card-bg);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--secondary-text);
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid var(--border-color);
}

.author-links a:hover {
    background: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
}

.author-links a span {
    font-size: 14px;
}

@media (max-width: 600px) {
    .author-bio {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 25px;
    }

    .author-name {
        justify-content: center;
    }

    .author-links {
        justify-content: center;
    }

    .author-stats {
        justify-content: center;
    }
}

/* ===================================================================
   PAGINATION STYLES - HORIZONTAL LAYOUT WITH RTL SUPPORT
   =================================================================== */

/* Main pagination container */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 0;
    padding: 0;
    list-style: none;
}

/* Pagination list */
.pagination ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

/* Pagination list items */
.pagination li {
    display: inline-block;
    margin: 0;
    list-style: none;
}

/* Pagination links and current page */
.pagination a,
.pagination span,
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    margin: 0 5px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Hover effect */
.pagination a:hover {
    background: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
    text-decoration: none;
}

/* Current page */
.pagination .current {
    background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
    color: #fff;
    border-color: #1a73e8;
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.4);
    cursor: default;
}

/* Previous and Next buttons */
.pagination .prev,
.pagination .next {
    font-weight: 700;
    padding: 0 18px;
}

/* RTL Support - Keep numbers LTR but reverse order */
.rtl .pagination ul,
[dir="rtl"] .pagination ul {
    flex-direction: row-reverse !important;
}

/* Mobile responsive */
@media (max-width: 480px) {

    .pagination a,
    .pagination span,
    .pagination .current {
        min-width: 38px;
        height: 38px;
        font-size: 0.9rem;
        padding: 0 10px;
    }
}

/* ===================================================================
   CONTACT PAGE STYLES
   =================================================================== */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.contact-info-card {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.contact-form-wrapper {
    background: var(--card-bg);
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.contact-form-wrapper h3 {
    margin-bottom: 2rem;
    color: var(--heading-color);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    background: var(--bg-color);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--card-bg);
    box-shadow: 0 0 0 4px var(--primary-light);
}

.privacy-agreement {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--secondary-text);
    cursor: pointer;
}

.privacy-agreement input {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    cursor: pointer;
}

.google-map-container {
    border-radius: 16px;
    overflow: hidden;
    height: 350px !important;
    margin-bottom: 2.5rem;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
}

.contact-faq-section {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.contact-faq-section h4 {
    margin-bottom: 1.5rem;
    color: var(--heading-color);
}

.faq-item {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.faq-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.faq-item p.faq-q {
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--heading-color);
    font-size: 1rem;
}

.faq-item p.faq-a {
    margin: 0;
    color: var(--secondary-text);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ===================================================================
   TABLE STYLES - RESPONSIVE
   =================================================================== */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

table thead {
    background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
    color: #fff;
}

table th {
    padding: 1.2rem 1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

table tbody tr {
    transition: background 0.2s ease;
}

table tbody tr:hover {
    background: var(--card-bg);
}

table tbody tr:last-child td {
    border-bottom: none;
}

/* RTL Table */
.rtl table th,
.rtl table td,
[dir="rtl"] table th,
[dir="rtl"] table td {
    text-align: right;
}

/* Responsive Tables - Mobile */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }

    table thead {
        display: none;
    }

    table tbody,
    table tr,
    table td {
        display: block;
        width: 100%;
    }

    table tr {
        margin-bottom: 1rem;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
        background: var(--card-bg);
    }

    table td {
        text-align: right;
        padding: 0.75rem 1rem;
        padding-left: 50%;
        position: relative;
        border: none;
        border-bottom: 1px solid var(--border-color);
    }

    table td:last-child {
        border-bottom: none;
    }

    table td::before {
        content: attr(data-label);
        position: absolute;
        left: 1rem;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: 700;
        color: var(--secondary-text);
    }

    .rtl table td {
        text-align: left;
        padding-right: 50%;
        padding-left: 1rem;
    }

    .rtl table td::before {
        left: auto;
        right: 1rem;
        padding-left: 10px;
        padding-right: 0;
    }
}

/* ===================================================================
   PAGINATION - Beautiful Navigation with RTL Support
   =================================================================== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 0;
    gap: 0.25rem;
}

/* RTL Support for Pagination - Ensures 1 starts from the right */
.rtl .pagination,
[dir="rtl"] .pagination {
    direction: rtl !important;
}

.rtl .pagination ul,
[dir="rtl"] .pagination ul {
    direction: rtl !important;
    display: flex !important;
    flex-direction: row !important;
    /* Standard row in RTL starts from right */
    justify-content: center !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

.rtl .pagination ul li,
[dir="rtl"] .pagination ul li {
    direction: rtl !important;
}

.pagination ul,
.pagination .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pagination li {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Page Number Links */
.pagination a.page-numbers,
.pagination span.page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    color: var(--secondary-text);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}

.pagination a.page-numbers:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

/* Current Page */
.pagination span.page-numbers.current {
    background: linear-gradient(135deg, var(--primary-color) 0%, #4285f4 100%);
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

/* Dots (Ellipsis) */
.pagination span.page-numbers.dots {
    background: transparent;
    border: none;
    color: #767676;
    /* WCAG AA compliant */
    min-width: auto;
    padding: 0 4px;
    font-size: 1.1rem;
}

/* Prev/Next Links - Unified Style */
.pagination a.prev,
.pagination a.next {
    padding: 0 20px;
    font-weight: 700;
    min-width: auto;
    /* Overriding 42px for text-based buttons */
    background: var(--card-bg);
    /* Keeping card-bg for consistency */
    border-color: var(--border-color);
    gap: 8px;
    display: inline-flex;
}

.pagination a.prev:hover,
.pagination a.next:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

/* Ensure inner spans don't have separate backgrounds */
.pagination a.page-numbers span {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block;
    color: inherit;
}

/* RTL Specific Tweaks for Buttons */
.rtl .pagination a.prev,
.rtl .pagination a.next {
    flex-direction: row-reverse;
    /* Ensure arrow and text swap naturally */
}

/* Correct arrow sizes */
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    font-size: 1rem;
}

/* Mobile Responsive Pagination */
@media (max-width: 576px) {

    .pagination a.page-numbers,
    .pagination span.page-numbers {
        min-width: 38px;
        height: 38px;
        padding: 0 8px;
        font-size: 0.85rem;
    }

    .pagination a.prev,
    .pagination a.next {
        padding: 0 12px;
    }

    .pagination a.prev span,
    .pagination a.next span {
        display: none;
    }
}

/* Comments Pagination */
.comments-area .pagination,
.comment-navigation {
    margin: 2rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--border-color);
}

.comment-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.comment-navigation .nav-previous a,
.comment-navigation .nav-next a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.75rem 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--secondary-text);
    font-weight: 600;
    transition: all 0.2s ease;
}

.comment-navigation .nav-previous a:hover,
.comment-navigation .nav-next a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
}

/* ===================================================================
   FOOTER - Clean Professional Design
   =================================================================== */
.site-footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    padding: 4rem 0 2rem;
    margin-top: auto;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 2.5rem;
}

/* RTL Grid Reverse */
.rtl .footer-grid,
[dir="rtl"] .footer-grid {
    direction: rtl;
}

/* Footer About Column - Wider */
.footer-about {
    padding-right: 2rem;
}

.rtl .footer-about,
[dir="rtl"] .footer-about {
    padding-right: 0;
    padding-left: 2rem;
}

.footer-about p {
    color: var(--footer-text);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.footer-col h4 {
    color: var(--footer-heading);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--primary-color);
    display: inline-block;
    letter-spacing: normal !important;
    word-spacing: normal;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col li {
    margin-bottom: 0.6rem;
    letter-spacing: normal;
    word-spacing: normal;
}

.footer-col a {
    color: var(--footer-link);
    font-size: 0.95rem;
    transition: all 0.2s ease;
    display: inline-block;
}

.footer-col a:hover {
    color: var(--footer-link-hover);
    text-decoration: none;
    padding-left: 5px;
}

.rtl .footer-col a:hover,
[dir="rtl"] .footer-col a:hover {
    padding-left: 0;
    padding-right: 5px;
}

/* Contact Info Styling */
.contact-info li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-icon {
    font-size: 1rem;
}

/* RTL Footer Fixes */
.rtl .footer-col,
[dir="rtl"] .footer-col,
[lang="ar"] .footer-col {
    text-align: right;
}

.rtl .footer-col h4,
.rtl .footer-col a,
.rtl .footer-col li,
.rtl .footer-col p,
[dir="rtl"] .footer-col h4,
[dir="rtl"] .footer-col a,
[dir="rtl"] .footer-col li,
[dir="rtl"] .footer-col p,
[lang="ar"] .footer-col h4,
[lang="ar"] .footer-col a,
[lang="ar"] .footer-col li,
[lang="ar"] .footer-col p {
    text-align: right;
    text-justify: auto;
    letter-spacing: normal;
    word-spacing: normal;
    text-rendering: optimizeLegibility;
}

/* Social Icons */
.footer-social-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.social-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-icon:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
    text-decoration: none;
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid var(--footer-border);
    padding: 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-bottom>p {
    margin: 0;
    color: var(--footer-text);
    font-size: 0.9rem;
}

.footer-legal-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer-legal-links a {
    color: var(--footer-link);
    font-size: 0.9rem;
    transition: color 0.2s ease;
    position: relative;
}

.footer-legal-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--primary-color);
    transition: width 0.2s ease;
}

.footer-legal-links a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

.footer-legal-links a:hover::after {
    width: 100%;
}

/* Theme Credit */
.theme-credit {
    margin-top: 0;
}

.theme-credit p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--secondary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.theme-credit a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 14px;
    background: rgba(26, 115, 232, 0.1);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.theme-credit a:hover {
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
}

.theme-credit svg {
    opacity: 0.8;
}

/* Mobile Footer */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-about {
        grid-column: 1 / -1;
        padding-right: 0;
    }

    .rtl .footer-about,
    [dir="rtl"] .footer-about {
        padding-left: 0;
    }
}

@media (max-width: 576px) {
    .site-footer {
        padding: 2.5rem 0 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }

    .footer-col,
    .rtl .footer-col,
    [dir="rtl"] .footer-col {
        text-align: center !important;
    }

    .footer-col h4 {
        display: block;
    }

    .footer-social-links {
        justify-content: center;
    }

    .contact-info li {
        justify-content: center;
    }

    .footer-legal-links {
        gap: 1rem;
    }
}

/* ============================================================================
   TRUST & INTEGRITY FEATURES
   ============================================================================ */

/* Digital Signature Box */
.digital-signature-box {
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.1);
    transition: transform 0.3s ease;
}

.digital-signature-box:hover {
    transform: translateY(-2px);
}

/* Fact Check Widget */
.fact-check-widget table th {
    font-weight: 700;
    color: var(--secondary-text);
}

.fact-check-widget table tr:hover {
    background: var(--card-bg);
}

/* Authority Source Tooltip */
.nexus-source-wrap .source-trigger:hover {
    background: #cbd5e0 !important;
    color: #2d3748 !important;
}

.source-dropdown::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 20px;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: var(--card-bg) transparent transparent;
}

.rtl .source-dropdown::before,
[dir="rtl"] .source-dropdown::before {
    left: auto;
    right: 20px;
}

/* Accuracy Reporting Section */
#report-error-btn:hover {
    border-color: #1a73e8 !important;
    color: #1a73e8 !important;
    background: var(--primary-light) !important;
}

#report-message:focus {
    outline: none;
    border-color: #1a73e8 !important;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}

@media (max-width: 768px) {
    .digital-signature-box {
        flex-direction: column;
        text-align: center;
    }

    .fact-check-widget {
        padding: 15px;
    }
}

/* Align Category and Editorial Badge in one line */
.article-top-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.rtl .article-top-meta,
[dir="rtl"] .article-top-meta {
    justify-content: flex-start;
}

.article-top-meta .editorial-badge-wrap {
    margin-bottom: 0 !important;
    justify-content: flex-start !important;
    float: none !important;
    display: inline-flex !important;
    width: auto !important;
}

.article-top-meta .article-category {
    margin-bottom: 0 !important;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    background: #ffffff !important;
    color: #1565c0 !important;
    padding: 0.4rem 1rem;
    border-radius: 25px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    text-shadow: none;
}

/* Ensure badges look consistent in the row */
.article-badge {
    margin-bottom: 0 !important;
}

/* ===================================================================
   ARTICLE CONTENT & LAYOUT TUNING
   =================================================================== */

/* Scoped to Single Post for better consistency */
.single-post {
    background-color: var(--bg-color);
}

/* Fix stretched titles - all h1 should never be justify */
.single-post h1,
.article-header h1,
.post-title,
h1.entry-title {
    text-align: start !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
}

.article-content {
    text-align: justify;
    line-height: 1.7;
    color: var(--text-color);
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
}

/* Fix for large gaps in justified text on small screens */
@media (max-width: 600px) {
    .article-content {
        text-align: start;
        hyphens: auto;
    }
}

.article-content h1,
.article-content h2,
.article-content h3 {
    color: var(--heading-color);
    margin-bottom: 1.2rem;
    font-weight: 700;
    text-align: start !important;
}

.article-content h2 {
    font-size: 1.8rem;
    margin-top: 2.5rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 8px;
}

.article-content h3 {
    font-size: 1.4rem;
    margin-top: 2rem;
}

.article-content a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px solid var(--primary-color);
    transition: all 0.2s ease;
}

.article-content a:hover {
    font-weight: 600;
    border-bottom-width: 2px;
}

/* -------------------------------------------------------------------
   SPECIFICATIONS & EVALUATION TABLES
   ------------------------------------------------------------------- */
.table-container,
.article-content table {
    overflow-x: auto;
    margin: 2rem 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--card-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.table-container table,
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    border: none;
}

.table-container thead,
.article-content table thead {
    background-color: var(--primary-color);
    color: #ffffff;
}

.table-container th,
.table-container td,
.article-content table th,
.article-content table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

.rtl .table-container th,
.rtl .table-container td,
.rtl .article-content table th,
.rtl .article-content table td {
    text-align: right;
}

/* Striped rows with theme-aware coloring */
.table-container tbody tr,
.article-content table tbody tr {
    background-color: var(--card-bg);
    transition: background-color 0.2s ease;
}

.table-container tbody tr:nth-child(even),
.article-content table tbody tr:nth-child(even) {
    background-color: var(--blockquote-bg);
}

.table-container tbody tr:hover,
.article-content table tbody tr:hover {
    background-color: var(--primary-light);
    cursor: default;
}

/* Green "Success/Positive" Table Variant (Evaluation) */
.evaluation-table thead,
.table-green thead {
    background-color: #14532d !important;
}

.evaluation-table tbody tr:nth-child(odd),
.table-green tbody tr:nth-child(odd) {
    background-color: rgba(20, 83, 45, 0.03);
}

.dark-mode .evaluation-table thead,
.dark-mode .table-green thead {
    background-color: #064e3b !important;
}

/* Custom Highlights */
.roi-highlight {
    font-weight: 700;
    color: #166534;
    background: rgba(22, 101, 52, 0.1);
    padding: 2px 4px;
    border-radius: 4px;
}

.dark-mode .roi-highlight {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
}

.future-highlight {
    font-weight: 700;
    color: #842283;
    background: rgba(132, 34, 131, 0.1);
    padding: 2px 4px;
    border-radius: 4px;
}

.dark-mode .future-highlight {
    color: #e879f9;
    background: rgba(232, 121, 249, 0.1);
}

/* FAQ Items Layout */
.faq-item {
    margin-bottom: 2rem;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.faq-item h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.25rem;
    color: var(--heading-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.faq-item p {
    margin-bottom: 0;
    color: var(--secondary-text);
}

/* ===================================================================
   NEXUS NO RESULTS & 404 STYLING
   =================================================================== */
.nexus-no-results {
    text-align: center;
    padding: 5rem 2rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    margin: 2rem 0;
    box-shadow: var(--card-shadow);
}

.no-results-icon {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
    animation: nexus-bounce 2s infinite ease-in-out;
}

.nexus-no-results h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--heading-color);
    margin-bottom: 1rem;
}

.nexus-no-results p {
    font-size: 1.15rem;
    color: var(--secondary-text);
    margin-bottom: 2.5rem;
}

.no-results-search {
    max-width: 550px;
    margin: 0 auto 3rem;
}

.no-results-search form {
    display: flex;
    overflow: hidden;
    background: var(--blockquote-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.no-results-search form:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--primary-light);
}

.no-results-search input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    color: var(--text-color);
}

.no-results-search input:focus {
    outline: none;
}

.no-results-search button {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.no-results-search button:hover {
    background: var(--accent-color);
}

.no-results-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 4rem;
}

.nexus-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.nexus-btn-outline:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(26, 115, 232, 0.2);
}

.no-results-recommendations {
    border-top: 1px solid var(--border-color);
    padding-top: 3rem;
}

.no-results-recommendations .section-title {
    margin-bottom: 2rem;
    text-align: center;
}

@keyframes nexus-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* Dark Mode Overrides for No Results */
.dark-mode .nexus-no-results {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .no-results-search form {
    background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 600px) {
    .nexus-no-results h2 {
        font-size: 1.75rem;
    }

    .no-results-search form {
        flex-direction: column;
    }

    .no-results-search button {
        padding: 1rem;
    }
}

/* Global Table Header Fix */
table thead,
table th,
.entry-content table th {
    color: #fff !important;
}

/* Dark Mode Table Header Fix */
html.dark-mode table thead,
html.dark-mode table th,
html.dark-mode .entry-content table th,
body.dark-mode table thead,
body.dark-mode table th,
body.dark-mode .entry-content table th {
    color: #fff !important;
}

/* ===================================================================
   IMPROVED UI ELEMENTS (2026 Edition) - Clean Minimal Design
   =================================================================== */

/* 1. DARK MODE TOGGLE BUTTON - Simple Circle */
.theme-toggle {
    background: transparent;
    border: 2px solid var(--border-color, #e2e8f0);
    padding: 8px;
    cursor: pointer;
    color: var(--text-color, #475569);
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    border-color: var(--primary-color, #1a73e8);
    color: var(--primary-color, #1a73e8);
}

.dark-mode .theme-toggle {
    border-color: #475569;
    color: #fbbf24;
}

.dark-mode .theme-toggle:hover {
    border-color: #fbbf24;
}

/* 2. TAGS SECTION - Simple Clean Design */
.article-tags-v3,
.article-tags,
.nexus-tags-wrap {
    margin: 2rem 0;
    padding: 20px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
}

.article-tags-v3 strong,
.article-tags strong,
.nexus-tags-wrap strong {
    display: inline;
    color: var(--heading-color, #1a1a1a) !important;
    font-size: 14px;
    font-weight: 600;
    margin-left: 8px;
    background: none !important;
    padding: 0 !important;
}

.article-tags-v3 a,
.article-tags a,
.nexus-tags-wrap a {
    display: inline-block;
    padding: 6px 14px;
    margin: 4px;
    background: var(--bg-color, #f8fafc);
    color: var(--text-color, #475569);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.article-tags-v3 a:hover,
.article-tags a:hover,
.nexus-tags-wrap a:hover {
    background: var(--primary-color, #1a73e8);
    color: #fff;
    border-color: var(--primary-color, #1a73e8);
}

/* Tags - Dark Mode */
.dark-mode .article-tags-v3,
.dark-mode .article-tags,
.dark-mode .nexus-tags-wrap {
    background: var(--card-bg, #1e293b);
    border-color: var(--border-color, #334155);
}

.dark-mode .article-tags-v3 a,
.dark-mode .article-tags a,
.dark-mode .nexus-tags-wrap a {
    background: #0f172a;
    color: var(--text-color, #e2e8f0);
    border-color: var(--border-color, #334155);
}

/* 3. FAQ SECTION - Clean Professional Design */
.nexus-faq-section {
    margin: 2.5rem 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.nexus-faq-section .faq-title {
    font-size: 1.15rem;
    margin: 0;
    padding: 18px 24px;
    color: #1e293b;
    background: transparent;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
}

.faq-list {
    background: transparent;
    padding: 16px;
}

.faq-item {
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-question {
    width: 100%;
    padding: 16px 20px;
    background: #ffffff;
    border: none;
    text-align: inherit;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    font-family: inherit;
    transition: background 0.2s ease;
    border-radius: 8px;
}

.faq-question:hover {
    background: #f1f5f9;
}

.faq-question span[itemprop="name"] {
    flex: 1;
    text-align: right;
    line-height: 1.7;
}

.faq-question .faq-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #64748b;
    transition: transform 0.3s ease;
}

.faq-question[aria-expanded="true"] {
    background: #f1f5f9;
    border-radius: 8px 8px 0 0;
}

.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
    color: #3b82f6;
}

.faq-answer {
    padding: 16px 20px 18px;
    font-size: 15px;
    line-height: 1.9;
    color: #475569;
    background: #f8fafc;
    border-radius: 0 0 8px 8px;
}

.faq-answer div[itemprop="text"] {
    padding-top: 0;
}

.faq-answer p {
    margin: 0 0 12px;
    color: #475569;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* FAQ from AI Chat */
.faq-item.from-ai-chat {
    background: #ffffff;
}

/* Dark Mode - FAQ */
.dark-mode .nexus-faq-section {
    background: #0f172a;
    border-color: #1e293b;
}

.dark-mode .nexus-faq-section .faq-title {
    background: transparent;
    color: #f1f5f9 !important;
    border-color: #1e293b;
}

.dark-mode .faq-list {
    background: transparent;
}

.dark-mode .faq-item {
    background: #1e293b;
    border-color: #334155 !important;
}

.dark-mode .faq-question {
    color: #f1f5f9 !important;
    background: #1e293b;
}

.dark-mode .faq-question:hover {
    background: #334155;
}

.dark-mode .faq-question[aria-expanded="true"] {
    background: #334155;
}

.dark-mode .faq-question .faq-icon {
    color: #94a3b8;
}

.dark-mode .faq-question[aria-expanded="true"] .faq-icon {
    color: #60a5fa;
}

.dark-mode .faq-answer {
    color: #cbd5e1 !important;
    background: #0f172a;
}

.dark-mode .faq-answer p {
    color: #cbd5e1 !important;
}

.dark-mode .faq-item.from-ai-chat {
    background: #1e293b;
}

/* ===================================================================
   GLOBAL HEADER STYLING - Applied to All Pages
   =================================================================== */

/* Header Layout */
.header-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px 25px !important;
    padding: 1rem 0 !important;
}

/* Logo - Full Name on One Line */
.site-logo {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    color: var(--heading-color) !important;
    text-align: center !important;
}

.site-logo span {
    color: var(--primary-color) !important;
}

/* Navigation - Full Width on Separate Row */
.main-nav {
    order: 10 !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem !important;
}

.main-nav ul,
.main-nav>ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 30px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: center !important;
}

.main-nav li {
    margin: 0 !important;
}

.main-nav a {
    color: var(--text-color) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    transition: color 0.2s ease !important;
}

.main-nav a:hover {
    color: var(--primary-color) !important;
}

/* Header Actions (Search, Dark Mode) */
.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Article Page - Centered Content */
.single-post .article-header {
    text-align: center !important;
}

.single-post .article-header h1 {
    text-align: center !important;
}

.single-post .article-top-meta {
    justify-content: center !important;
    text-align: center !important;
}

.single-post .article-meta {
    justify-content: center !important;
    text-align: center !important;
}

/* Category Badge - High Visibility */
.article-category,
.article-top-meta .article-category,
.single-post .article-category {
    background: #ffffff !important;
    color: #1565c0 !important;
    padding: 0.5rem 1.2rem !important;
    border-radius: 25px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    display: inline-block !important;
    text-decoration: none !important;
}

.article-category a,
.article-top-meta .article-category a,
.single-post .article-category a {
    color: #1565c0 !important;
    text-decoration: none !important;
}

/* ===================================================================
   THEME CREDIT - FINAL OVERRIDE (End of file for max priority)
   =================================================================== */
.footer-bottom .theme-credit a,
.theme-credit a,
div.theme-credit a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    padding: 8px 18px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.4) !important;
    border: none !important;
}

.footer-bottom .theme-credit a:hover,
.theme-credit a:hover,
div.theme-credit a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5) !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}

.footer-bottom .theme-credit a svg,
.theme-credit a svg,
div.theme-credit a svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ===================================================================
   SMART RELATED ARTICLES - AI Powered Suggestions
   =================================================================== */
.nexus-smart-related {
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.dark-mode .nexus-smart-related {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: #334155;
}

.smart-related-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--primary-color);
}

.smart-related-title .title-icon {
    font-size: 1.5rem;
}

.smart-related-title .ai-badge {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: auto;
}

.rtl .smart-related-title .ai-badge {
    margin-right: 0;
    margin-left: auto;
}

.smart-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.smart-related-card {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    text-decoration: none !important;
    transition: all 0.3s ease;
    overflow: hidden;
}

.smart-related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.dark-mode .smart-related-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.smart-related-card .card-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
}

.smart-related-card .card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.smart-related-card .card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.smart-related-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--heading-color);
    margin: 0 0 8px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.smart-related-card .card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--secondary-text);
}

.smart-related-card .match-score {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.7rem;
}

@media (max-width: 600px) {
    .smart-related-grid {
        grid-template-columns: 1fr;
    }

    .smart-related-card {
        flex-direction: row;
    }

    .smart-related-card .card-thumb {
        width: 70px;
        height: 70px;
    }
}

/* ===================================================================
   DARK MODE TEXT CONTRAST FIX - Universal High Visibility
   =================================================================== */

/* Fix for all text elements in dark mode content areas */
.dark-mode .entry-content li,
.dark-mode .article-content ul li,
.dark-mode .article-content ol li,
.dark-mode .entry-content ul li,
.dark-mode .entry-content ol li {
    color: #f1f5f9 !important;
}

/* Fix for info/notice boxes with dark backgrounds */
.dark-mode [style*="background"],
.dark-mode .wp-block-group,
.dark-mode .wp-block-cover,
.dark-mode .has-background {
    color: #f1f5f9 !important;
}

.dark-mode [style*="background"] p,
.dark-mode [style*="background"] li,
.dark-mode [style*="background"] span,
.dark-mode [style*="background"] strong,
.dark-mode .wp-block-group p,
.dark-mode .wp-block-group li,
.dark-mode .wp-block-cover p,
.dark-mode .wp-block-cover li,
.dark-mode .has-background p,
.dark-mode .has-background li {
    color: #f1f5f9 !important;
}

/* Specific fix for dark blue/navy background sections */
.dark-mode [style*="#0f172a"],
.dark-mode [style*="#1e293b"],
.dark-mode [style*="#0d1b2a"],
.dark-mode [style*="rgb(15, 23, 42)"],
.dark-mode [style*="rgb(30, 41, 59)"] {
    color: #ffffff !important;
}

.dark-mode [style*="#0f172a"] *,
.dark-mode [style*="#1e293b"] *,
.dark-mode [style*="#0d1b2a"] *,
.dark-mode [style*="rgb(15, 23, 42)"] *,
.dark-mode [style*="rgb(30, 41, 59)"] * {
    color: #e2e8f0 !important;
}

/* Fix for bullet points styling in dark mode */
.dark-mode ul li::marker,
.dark-mode ol li::marker {
    color: #94a3b8 !important;
}

/* Enhanced contrast for secondary text in dark backgrounds */
.dark-mode .entry-content [style*="background"] strong,
.dark-mode .article-content [style*="background"] strong,
.dark-mode .entry-content [style*="background"] b,
.dark-mode .article-content [style*="background"] b {
    color: #ffffff !important;
}

/* General global dark mode text enhancement */
.dark-mode body,
.dark-mode main,
.dark-mode article,
.dark-mode section,
.dark-mode div {
    color: var(--text-color, #f1f5f9);
}

/* Force light text on any element with inline dark background */
[data-theme="dark"] [style*="background-color: #0"],
[data-theme="dark"] [style*="background-color: #1"],
[data-theme="dark"] [style*="background-color: #2"],
[data-theme="dark"] [style*="background: #0"],
[data-theme="dark"] [style*="background: #1"],
[data-theme="dark"] [style*="background: #2"],
.dark-mode [style*="background-color: #0"],
.dark-mode [style*="background-color: #1"],
.dark-mode [style*="background-color: #2"],
.dark-mode [style*="background: #0"],
.dark-mode [style*="background: #1"],
.dark-mode [style*="background: #2"] {
    color: #f8fafc !important;
}

[data-theme="dark"] [style*="background-color: #0"] *,
[data-theme="dark"] [style*="background-color: #1"] *,
[data-theme="dark"] [style*="background-color: #2"] *,
[data-theme="dark"] [style*="background: #0"] *,
[data-theme="dark"] [style*="background: #1"] *,
[data-theme="dark"] [style*="background: #2"] *,
.dark-mode [style*="background-color: #0"] *,
.dark-mode [style*="background-color: #1"] *,
.dark-mode [style*="background-color: #2"] *,
.dark-mode [style*="background: #0"] *,
.dark-mode [style*="background: #1"] *,
.dark-mode [style*="background: #2"] * {
    color: #e2e8f0 !important;
}

/* ===================================================================
   DARK MODE FIX - Light Callout/Info Boxes with Colored Borders
   Fix for cream, beige, light pink backgrounds in dark mode
   =================================================================== */

/* Target all light-background callout boxes and force dark mode styling */
.dark-mode .article-content [style*="background"],
.dark-mode .entry-content [style*="background"],
[data-theme="dark"] .article-content [style*="background"],
[data-theme="dark"] .entry-content [style*="background"] {
    background: #1e293b !important;
    color: #f1f5f9 !important;
}

.dark-mode .article-content [style*="background"] *,
.dark-mode .entry-content [style*="background"] *,
[data-theme="dark"] .article-content [style*="background"] *,
[data-theme="dark"] .entry-content [style*="background"] * {
    color: #f1f5f9 !important;
}

/* Specific fix for elements with cream/beige backgrounds (common callout colors) */
.dark-mode .article-content [style*="fdf"],
.dark-mode .article-content [style*="fff7"],
.dark-mode .article-content [style*="fffbeb"],
.dark-mode .article-content [style*="fef"],
.dark-mode .article-content [style*="f8f"],
.dark-mode .article-content [style*="fff8"],
.dark-mode .article-content [style*="#f"],
.dark-mode .article-content [style*="rgb(25"],
.dark-mode .entry-content [style*="fdf"],
.dark-mode .entry-content [style*="fff7"],
.dark-mode .entry-content [style*="fffbeb"],
.dark-mode .entry-content [style*="fef"],
.dark-mode .entry-content [style*="f8f"],
.dark-mode .entry-content [style*="fff8"],
.dark-mode .entry-content [style*="#f"],
.dark-mode .entry-content [style*="rgb(25"],
[data-theme="dark"] .article-content [style*="fdf"],
[data-theme="dark"] .article-content [style*="fff7"],
[data-theme="dark"] .article-content [style*="fffbeb"],
[data-theme="dark"] .article-content [style*="fef"],
[data-theme="dark"] .article-content [style*="f8f"],
[data-theme="dark"] .article-content [style*="fff8"],
[data-theme="dark"] .article-content [style*="#f"],
[data-theme="dark"] .article-content [style*="rgb(25"],
[data-theme="dark"] .entry-content [style*="fdf"],
[data-theme="dark"] .entry-content [style*="fff7"],
[data-theme="dark"] .entry-content [style*="fffbeb"],
[data-theme="dark"] .entry-content [style*="fef"],
[data-theme="dark"] .entry-content [style*="f8f"],
[data-theme="dark"] .entry-content [style*="fff8"],
[data-theme="dark"] .entry-content [style*="#f"],
[data-theme="dark"] .entry-content [style*="rgb(25"] {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

/* Fix for all colored-border callout boxes */
.dark-mode .article-content [style*="border-right"],
.dark-mode .article-content [style*="border-left"],
.dark-mode .entry-content [style*="border-right"],
.dark-mode .entry-content [style*="border-left"],
[data-theme="dark"] .article-content [style*="border-right"],
[data-theme="dark"] .article-content [style*="border-left"],
[data-theme="dark"] .entry-content [style*="border-right"],
[data-theme="dark"] .entry-content [style*="border-left"] {
    background: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Ensure all nested elements in callout boxes have proper dark mode text */
.dark-mode .article-content [style*="border-right"] *,
.dark-mode .article-content [style*="border-left"] *,
.dark-mode .entry-content [style*="border-right"] *,
.dark-mode .entry-content [style*="border-left"] *,
[data-theme="dark"] .article-content [style*="border-right"] *,
[data-theme="dark"] .article-content [style*="border-left"] *,
[data-theme="dark"] .entry-content [style*="border-right"] *,
[data-theme="dark"] .entry-content [style*="border-left"] * {
    color: #f1f5f9 !important;
}

/* Fix strong/bold text in callout boxes */
.dark-mode .article-content [style*="background"] strong,
.dark-mode .article-content [style*="border-right"] strong,
.dark-mode .article-content [style*="border-left"] strong,
.dark-mode .entry-content [style*="background"] strong,
.dark-mode .entry-content [style*="border-right"] strong,
.dark-mode .entry-content [style*="border-left"] strong,
[data-theme="dark"] .article-content [style*="background"] strong,
[data-theme="dark"] .article-content [style*="border-right"] strong,
[data-theme="dark"] .article-content [style*="border-left"] strong,
[data-theme="dark"] .entry-content [style*="background"] strong,
[data-theme="dark"] .entry-content [style*="border-right"] strong,
[data-theme="dark"] .entry-content [style*="border-left"] strong {
    color: #ffffff !important;
}

/* Preserve the colored border accent while changing background */
.dark-mode .article-content div[style*="border-right"],
.dark-mode .entry-content div[style*="border-right"],
[data-theme="dark"] .article-content div[style*="border-right"],
[data-theme="dark"] .entry-content div[style*="border-right"] {
    border-right-width: 4px !important;
    border-right-style: solid !important;
}

.dark-mode .article-content div[style*="border-left"],
.dark-mode .entry-content div[style*="border-left"],
[data-theme="dark"] .article-content div[style*="border-left"],
[data-theme="dark"] .entry-content div[style*="border-left"] {
    border-left-width: 4px !important;
    border-left-style: solid !important;
}

/* WordPress Gutenberg blocks dark mode fixes */
.dark-mode .wp-block-group.has-background,
.dark-mode .wp-block-cover.has-background,
[data-theme="dark"] .wp-block-group.has-background,
[data-theme="dark"] .wp-block-cover.has-background {
    background: #1e293b !important;
}

.dark-mode .wp-block-group.has-background *,
.dark-mode .wp-block-cover.has-background *,
[data-theme="dark"] .wp-block-group.has-background *,
[data-theme="dark"] .wp-block-cover.has-background * {
    color: #f1f5f9 !important;
}

/* ===================================================================
   BUTTON STYLES - WCAG AA Compliant
   =================================================================== */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #1a73e8;
    color: #ffffff;
    /* WCAG AAA compliant - 7.7:1 contrast ratio */
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn:hover {
    background-color: #1557b0;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.dark-mode .btn {
    background-color: #3b82f6;
    color: #ffffff;
    /* Maintains high contrast in dark mode */
}

.dark-mode .btn:hover {
    background-color: #2563eb;
    color: #ffffff;
}

/* ===================================================================
   FEATURED POST SECTION
   =================================================================== */
.featured-post {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.featured-post-image {
    position: relative;
    overflow: hidden;
}

.featured-post-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.featured-post:hover .featured-post-image img {
    transform: scale(1.05);
}

.featured-post-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-post-content h2 {
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: var(--heading-color);
}

.featured-post-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--secondary-text);
    margin-bottom: 1.5rem;
}

.featured-post-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--secondary-text);
    margin-top: 1.5rem;
}

/* RTL Support for Featured Post */
.rtl .featured-post {
    direction: rtl;
}

.rtl .featured-post-content {
    text-align: right;
}

/* Responsive Design for Featured Post */
@media (max-width: 768px) {
    .featured-post {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .featured-post-image img {
        height: 250px;
    }

    .featured-post-content {
        padding: 1.5rem;
    }

    .featured-post-content h2 {
        font-size: 1.5rem;
    }

    .featured-post-content p {
        font-size: 1rem;
    }
}

/* Dark Mode for Featured Post */
.dark-mode .featured-post {
    background: var(--card-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .featured-post:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}