/*
Theme Name: Badil0
Theme URI: https://elbadil.com/
Author: Elbadil Team
Author URI: https://elbadil.com/
Description: قالب أخبار عربي احترافي للمواقع الإخبارية — RTL أولاً، فانيلا CSS فقط — معمارية 2026
Version: 1.0.0
Text Domain: badil0
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: news, magazine, rtl-language, arabic, dark-mode, responsive
*/

/* ════════════════════════════════════════════════════════════════
   فهرس الملف
   ──────────────────────────────────────────────────────────────
   1.  المتغيرات الجذرية (CSS Variables)
   2.  إعادة الضبط (Reset & Normalize)
   3.  الطباعة الأساسية (Base Typography)
   4.  الوصولية (Accessibility / Skip link)
   5.  شريط تقدم القراءة (Reading Progress Bar)
   6.  الحاوية والشبكة (Container & Grid System)
   7.  الهيدر اللاصق + الزجاجية (Sticky Glass Header)
   8.  القائمة الرئيسية + الميغا مينو (Nav + Mega Menu)
   9.  القائمة الجانبية للجوال (Side Menu Overlay)
   10. شريط البحث المنبثق (Search Overlay)
   11. شريط الأخبار العاجلة (News Ticker)
   12. شبكة المقالات / الأرشيف (Posts Grid)
   13. صفحة المقال المفرد (Single Post)
   14. صندوق الكاتب + المقالات المرتبطة (Author Box & Related)
   15. الشريط الجانبي + الويدجت (Sidebar / Widgets / Tabs)
   16. الفوتر (Footer)
   17. زر الوضع الليلي العائم (Dark Mode Toggle)
   18. أوضاع الظلام (Dark Mode Overrides)
   19. الاستجابة (Responsive Breakpoints)
   20. الطباعة (Print)
   ══════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────
   1) المتغيرات الجذرية — يتم استبدالها ديناميكيًا من PHP
   ────────────────────────────────────────────────────────────── */
body {
    --site-font: "Tajawal", sans-serif;
    --glob-gap: 50px;
    --glob-border-radius: 4px;
    --post-width: 300px;
    --post-gap: 20px;
    --content-width: 800px;
    --site-color: #e63946;
    --dark-bg-color: #1d1d1d;
    --body-bg-color: #edeef3;
    --light-bg: #FFFFFF;
    --body-color: #212529;
    --meta-color: #595959;
    --link-color: unset;
    --link-color-hover: var(--site-color);
    --overlay-text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
    --glob-shadow-color: rgba(0,0,0,0.2);
    --light-bg-alt: var(--body-bg-color);
    --light-border-color: rgba(0,0,0,0.05);
    --dark-bg-alt: rgba(0,0,0,0.5);
    --dark-color: #F5F5F5;
    --dark-border-color: rgba(255,255,255,0.07);

    /* ── متغيرات إضافية متوافقة مع ملفات bd-*.css ── */
    --site-color-rgb:       231, 57, 70;
    --site-color-darker-1:  #cc2f3b;
    --site-color-darker-2:  #b32835;
    --breaking-color:       #dc3545;
    --breaking-color-rgb:   220, 53, 69;

    /* نظام الألوان المرن */
    --card-bg:              var(--light-bg);
    --card-bg-rgb:          255, 255, 255;
    --header-bg:            var(--light-bg);
    --border-strong:        rgba(0,0,0,0.14);
    --text-secondary:       var(--meta-color);
    --text-muted:           rgba(89,89,89,0.65);

    /* الخطوط */
    --font-mono:            ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-size-base:       16px;
    --font-size-sm:         14px;
    --font-size-xs:         12px;
    --line-height-ar:       1.75;
    --line-height-tight:    1.3;

    /* المسافات المنتظمة */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  40px;
    --space-2xl: 64px;

    /* الحاوية */
    --container-max:        1280px;
    --header-height:        72px;
    --header-height-mobile: 56px;
    --header-shadow:        0 1px 0 rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.05);
    --post-column-width:    250px;

    /* الانتقالات الموحدة */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Skeleton Loading */
    --skeleton-from: #ececf0;
    --skeleton-to:   #f6f7fa;

    /* مشتقات داخلية للقالب */
    --bg-color: var(--light-bg);
    --text-color: var(--body-color);
    --surface: var(--light-bg);
    --surface-alt: var(--light-bg-alt);
    --border-color: var(--light-border-color);
    --header-h: 72px;
    --ticker-h: 40px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --speed: 220ms;
    --shadow-sm: 0 1px 2px var(--glob-shadow-color);
    --shadow-md: 0 6px 18px rgba(0,0,0,0.08);
    --shadow-lg: 0 14px 40px rgba(0,0,0,0.12);
}


/* ──────────────────────────────────────────────────────────────
   2) إعادة الضبط
   ────────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    background-color: var(--body-bg-color);
    color: var(--body-color);
    font-family: var(--site-font);
    font-size: clamp(15px, 0.95vw + 0.7rem, 17px);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    direction: rtl;
    overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }

button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

a {
    color: var(--link-color, inherit);
    text-decoration: none;
    transition: color var(--speed) var(--ease);
}
a:hover { color: var(--link-color-hover); }

ul, ol { padding-inline-start: 1.2em; }

::selection { background: var(--site-color); color: #fff; }


/* ──────────────────────────────────────────────────────────────
   3) الطباعة الأساسية
   ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    line-height: 1.3;
    font-weight: 800;
    color: var(--text-color);
    text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 2.2vw + 1rem, 2.75rem); }
h2 { font-size: clamp(1.4rem, 1.5vw + 0.8rem, 2rem); }
h3 { font-size: clamp(1.15rem, 1vw + 0.7rem, 1.5rem); }
h4 { font-size: 1.125rem; }

p { margin: 0 0 1em; text-wrap: pretty; }

blockquote {
    margin: 1.5em 0;
    padding: 1em 1.25em;
    border-inline-start: 4px solid var(--site-color);
    background: var(--surface-alt);
    border-radius: var(--glob-border-radius);
    font-size: 1.05em;
    color: var(--text-color);
}

code, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--surface-alt);
    border-radius: calc(var(--glob-border-radius) / 1.2);
}
code { padding: 0.15em 0.4em; font-size: 0.92em; }
pre { padding: 1em; overflow-x: auto; line-height: 1.55; }


/* ──────────────────────────────────────────────────────────────
   4) الوصولية — رابط التخطي
   ────────────────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: 1rem;
    z-index: 9999;
    padding: 0.75rem 1rem;
    background: var(--site-color);
    color: #fff;
    border-radius: var(--glob-border-radius);
    box-shadow: var(--shadow-md);
    transition: inset-block-start var(--speed) var(--ease);
}
.skip-link:focus {
    inset-block-start: 1rem;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

:focus-visible {
    outline: 2px solid var(--site-color);
    outline-offset: 3px;
    border-radius: var(--glob-border-radius);
}


/* عناوين الأقسام */
.section-title {
    font-size: clamp(1.1rem, 1.3vw + 0.6rem, 1.4rem);
    font-weight: 800;
    margin: 0 0 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--site-color);
    color: var(--text-color);
}

/* سطر تقدم القراءة */
.reading-progress-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    z-index: 1000;
    background: transparent;
    pointer-events: none;
}
.reading-progress-bar::after {
    content: "";
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(
        to inline-end,
        var(--site-color),
        color-mix(in oklab, var(--site-color), #fff 35%)
    );
    transition: width 80ms linear;
}


/* ──────────────────────────────────────────────────────────────
   6) الحاوية والشبكة
   ────────────────────────────────────────────────────────────── */
.container {
    width: min(100% - 2rem, 1280px);
    margin-inline: auto;
}

.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--post-gap);
}

.col-lg-8 { grid-column: span 12; }
.col-lg-4 { grid-column: span 12; }
.col-lg-12 { grid-column: span 12; }

@media (min-width: 992px) {
    .col-lg-8 { grid-column: span 8; }
    .col-lg-4 { grid-column: span 4; }
    .col-lg-12 { grid-column: span 12; }
}

/* تخطيط محتوى المقال */
.content-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--glob-gap);
}
.content-layout-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: var(--glob-gap);
}
.content-layout-cell { min-width: 0; }

@media (max-width: 991px) {
    .content-layout-row { grid-template-columns: 1fr; }
}

/* الهيكل العام للصفحة */
#site {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background-color: var(--body-bg-color);
}
#site-main {
    flex: 1;
    padding-block: var(--glob-gap) calc(var(--glob-gap) * 1.2);
}


/* ──────────────────────────────────────────────────────────────
   7) الهيدر اللاصق + الزجاجية
   ────────────────────────────────────────────────────────────── */
.site-header,
#site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 500;
    inline-size: 100%;
    min-block-size: var(--header-h);

    background-color: color-mix(in oklab, var(--light-bg) 75%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);

    border-block-end: 1px solid var(--border-color);
    transition:
        background-color var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease),
        border-color var(--speed) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-block-size: var(--header-h);
}

.site-branding {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 900;
    font-size: 1.25rem;
    color: var(--text-color);
}
.site-branding .site-logo {
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--glob-border-radius);
    background: linear-gradient(135deg, var(--site-color), color-mix(in oklab, var(--site-color), #000 25%));
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
}

.header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.header-actions .icon-btn {
    inline-size: 40px;
    block-size: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--glob-border-radius);
    color: var(--text-color);
    transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.header-actions .icon-btn:hover {
    background: var(--surface-alt);
    color: var(--site-color);
}


/* ──────────────────────────────────────────────────────────────
   8) القائمة الرئيسية + الميغا مينو
   ────────────────────────────────────────────────────────────── */
.nav-menu {
    display: none;
}
@media (min-width: 992px) {
    .nav-menu {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }
}
.nav-menu > li { position: relative; }

.nav-menu > li > a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--glob-border-radius);
    font-weight: 700;
    color: var(--text-color);
    transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.nav-menu > li > a:hover,
.nav-menu > li.is-active > a {
    color: var(--site-color);
    background: var(--surface-alt);
}

/* الميغا مينو */
.nav-menu .mega-menu {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    inline-size: min(960px, 92vw);
    padding: 1.25rem;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;

    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: calc(var(--glob-border-radius) * 2);
    box-shadow: var(--shadow-lg);

    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed);
}
.nav-menu > li:hover > .mega-menu,
.nav-menu > li:focus-within > .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.mega-menu__col h4 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--meta-color);
    margin-block-end: 0.6rem;
}
.mega-menu__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.mega-menu__col a {
    display: block;
    padding: 0.35rem 0.4rem;
    border-radius: var(--glob-border-radius);
    color: var(--text-color);
    font-weight: 500;
}
.mega-menu__col a:hover { background: var(--surface-alt); color: var(--site-color); }


/* ──────────────────────────────────────────────────────────────
   9) القائمة الجانبية للجوال
   ────────────────────────────────────────────────────────────── */
.side-menu {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: min(320px, 86vw);
    z-index: 1100;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    border-inline-start: 1px solid var(--border-color);
    padding: 1.25rem;
    overflow-y: auto;

    transform: translateX(100%);
    transition: transform 320ms var(--ease);
}
html[dir="rtl"] .side-menu { transform: translateX(-100%); }
.side-menu.is-open { transform: translateX(0); }

.side-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--speed) var(--ease), visibility var(--speed);
}
.side-menu__backdrop.is-open { opacity: 1; visibility: visible; }

.side-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block-end: 1rem;
    margin-block-end: 1rem;
    border-block-end: 1px solid var(--border-color);
}
.side-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.side-menu a {
    display: block;
    padding: 0.7rem 0.75rem;
    border-radius: var(--glob-border-radius);
    font-weight: 600;
    color: var(--text-color);
}
.side-menu a:hover { background: var(--surface-alt); color: var(--site-color); }


/* ──────────────────────────────────────────────────────────────
   10) شريط البحث المنبثق
   ────────────────────────────────────────────────────────────── */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: start center;
    padding-block-start: 12vh;

    background: color-mix(in oklab, var(--body-bg-color) 60%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    opacity: 0;
    visibility: hidden;
    transition: opacity var(--speed) var(--ease), visibility var(--speed);
}
.search-overlay.is-open { opacity: 1; visibility: visible; }

.search-overlay__form {
    width: min(720px, 92vw);
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: calc(var(--glob-border-radius) * 2);
    box-shadow: var(--shadow-lg);
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.search-overlay__form input[type="search"] {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--text-color);
    font: inherit;
    font-size: 1.15rem;
    padding: 0.85rem 0.75rem;
    outline: none;
}
.search-overlay__form button[type="submit"] {
    padding: 0.75rem 1.1rem;
    border-radius: var(--glob-border-radius);
    background: var(--site-color);
    color: #fff;
    font-weight: 700;
    transition: transform var(--speed) var(--ease), filter var(--speed) var(--ease);
}
.search-overlay__form button[type="submit"]:hover { filter: brightness(1.05); transform: translateY(-1px); }


/* ──────────────────────────────────────────────────────────────
   11) شريط الأخبار العاجلة
   ────────────────────────────────────────────────────────────── */
.news-ticker {
    display: flex;
    align-items: stretch;
    min-block-size: var(--ticker-h);
    background: var(--surface);
    border-block-end: 1px solid var(--border-color);
    font-size: 0.92rem;
    overflow: hidden;
}
.news-ticker__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-inline: 1rem;
    background: var(--site-color);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.02em;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.news-ticker__label::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: #fff;
    animation: tickerPulse 1.2s infinite var(--ease);
}
@keyframes tickerPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
}
.news-ticker__track {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.news-ticker__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 2.5rem;
    white-space: nowrap;
    block-size: 100%;
    padding-inline: 1rem;
    animation: tickerScroll 40s linear infinite;
}
.news-ticker__track:hover .news-ticker__list { animation-play-state: paused; }
.news-ticker__list a { color: var(--text-color); font-weight: 600; }
.news-ticker__list a:hover { color: var(--site-color); }
@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}


/* ──────────────────────────────────────────────────────────────
   12) شبكة المقالات / الأرشيف
   ────────────────────────────────────────────────────────────── */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--post-width), 100%), 1fr));
    gap: var(--post-gap);
}

.archive-loop-item {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: calc(var(--glob-border-radius) * 2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.archive-loop-item:hover {
    transform: translateY(-3px) scale(1.005);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in oklab, var(--site-color) 35%, var(--border-color));
}

.archive-loop-item .featured-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--surface-alt);
}
.archive-loop-item .featured-image img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease);
}
.archive-loop-item:hover .featured-image img { transform: scale(1.06); }

.archive-loop-item .category-badge {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 2;
    padding: 0.25rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 800;
    background: var(--site-color);
    color: #fff;
    border-radius: var(--glob-border-radius);
    text-shadow: var(--overlay-text-shadow);
}

.archive-loop-item .post-body {
    padding: 1rem 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}

.entry-title {
    font-size: clamp(1rem, 0.6vw + 0.85rem, 1.2rem);
    line-height: 1.4;
    margin: 0;
    font-weight: 800;
}
.entry-title a { color: var(--text-color); }
.entry-title a:hover { color: var(--site-color); }

.entry-excerpt {
    color: var(--meta-color);
    font-size: 0.95em;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: var(--meta-color);
    margin-block-start: auto;
}
.entry-meta > * { display: inline-flex; align-items: center; gap: 0.3rem; }
.entry-meta .meta-author { font-weight: 700; color: var(--text-color); }
.entry-meta .meta-sep::before { content: "•"; opacity: .5; }

/* البطاقة الكبيرة (المميزة) */
.archive-loop-item--featured {
    grid-column: 1 / -1;
}
@media (min-width: 768px) {
    .archive-loop-item--featured {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
    }
    .archive-loop-item--featured .featured-image { aspect-ratio: auto; block-size: 100%; }
    .archive-loop-item--featured .post-body { padding: 1.5rem 1.75rem; gap: 0.85rem; }
    .archive-loop-item--featured .entry-title { font-size: clamp(1.35rem, 1.2vw + 1rem, 1.9rem); }
}


/* ──────────────────────────────────────────────────────────────
   13) صفحة المقال المفرد
   ────────────────────────────────────────────────────────────── */
article.post {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: calc(var(--glob-border-radius) * 2);
    padding: clamp(1rem, 2vw, 2rem);
}
article.post .post-header { margin-block-end: 1.25rem; }
article.post .post-header .entry-title {
    font-size: clamp(1.6rem, 2vw + 0.8rem, 2.4rem);
    margin-block-end: 0.75rem;
}
article.post .post-header .entry-meta { font-size: 0.9rem; }

article.post .featured-image {
    margin-block: 1rem 1.5rem;
    border-radius: var(--glob-border-radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--surface-alt);
}
article.post .featured-image img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.entry-content {
    max-inline-size: var(--content-width);
    margin-inline: auto;
    line-height: 1.75;
    font-size: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
    color: var(--text-color);
}
.entry-content > * { margin-block: 0 1.1em; }
.entry-content h2, .entry-content h3 { margin-block: 1.6em 0.6em; }
.entry-content a {
    color: var(--site-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}
.entry-content figure { margin: 1.5em 0; }
.entry-content figcaption {
    text-align: center;
    font-size: 0.85em;
    color: var(--meta-color);
    margin-block-start: 0.35em;
}

/* أزرار المشاركة */
.post-share-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-block: 1.5rem;
    padding-block: 1rem;
    border-block: 1px solid var(--border-color);
}
.post-share-buttons .label {
    font-weight: 800;
    margin-inline-end: 0.5rem;
    color: var(--meta-color);
}
.post-share-buttons a {
    inline-size: 40px;
    block-size: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-alt);
    color: var(--text-color);
    transition: transform var(--speed) var(--ease), background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.post-share-buttons a:hover {
    background: var(--site-color);
    color: #fff;
    transform: translateY(-2px);
}

/* الوسوم */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-block: 1.25rem;
}
.post-tags a {
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--text-color);
    font-size: 0.85em;
    font-weight: 600;
    border: 1px solid var(--border-color);
}
.post-tags a:hover { background: var(--site-color); color: #fff; border-color: transparent; }


/* ──────────────────────────────────────────────────────────────
   14) صندوق الكاتب + المقالات المرتبطة الداخلية
   ────────────────────────────────────────────────────────────── */
.author-box {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem 1.25rem;
    align-items: start;
    padding: 1.25rem;
    margin-block: 1.5rem;
    background: var(--surface-alt);
    border: 1px solid var(--border-color);
    border-radius: calc(var(--glob-border-radius) * 2);
}
.author-box__avatar {
    inline-size: 72px;
    block-size: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface);
}
.author-box__avatar {
    align-self: center;
}
.author-box__avatar img,
.author-box__avatar-img {
    inline-size: 72px;
    block-size: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface);
}
.author-box__name { margin: 0; font-size: 1.05rem; font-weight: 800; }
.author-box__role { font-size: 0.85rem; color: var(--meta-color); margin-block-end: 0.5rem; }
.author-box__bio { margin: 0; color: var(--text-color); }
.author-box__social {
    display: inline-flex;
    gap: 0.4rem;
    margin-block-start: 0.6rem;
}
.author-box__social a {
    inline-size: 32px; block-size: 32px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}
.author-box__social a:hover { background: var(--site-color); color: #fff; }

/* المقالات المرتبطة بين الفقرات */
.related-posts-inline {
    margin-block: 2rem;
    padding: 1rem 1.1rem;
    background: var(--surface-alt);
    border-inline-start: 3px solid var(--site-color);
    border-radius: var(--glob-border-radius);
}
.related-posts-inline__label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--site-color);
    margin-block-end: 0.4rem;
}
.related-posts-inline a {
    display: block;
    font-weight: 700;
    color: var(--text-color);
    font-size: 1.05em;
}
.related-posts-inline a:hover { color: var(--site-color); }


/* ──────────────────────────────────────────────────────────────
   15) الشريط الجانبي / الويدجت / التابات
   ────────────────────────────────────────────────────────────── */
#secondary {
    display: grid;
    gap: var(--post-gap);
}
.sticky-sidebar {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 1rem);
    align-self: start;
}

.widget {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: calc(var(--glob-border-radius) * 2);
    padding: 1.1rem 1.15rem;
}
.widget + .widget { margin-block-start: var(--post-gap); }

.widget-title {
    position: relative;
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 1rem;
    padding-block-end: 0.7rem;
    border-block-end: 1px solid var(--border-color);
}
.widget-title::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 0;
    inline-size: 48px;
    block-size: 2px;
    background: var(--site-color);
    border-radius: 2px;
}

.widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.widget li a {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    color: var(--text-color);
    font-weight: 600;
}
.widget li a:hover { color: var(--site-color); }

/* ودجت التابات */
.tabbed-widget__tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--surface-alt);
    border-radius: var(--glob-border-radius);
    margin-block-end: 1rem;
}
.tabbed-widget__tab {
    padding: 0.55rem 0.5rem;
    border-radius: calc(var(--glob-border-radius) - 1px);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--meta-color);
    transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.tabbed-widget__tab.is-active {
    background: var(--surface);
    color: var(--text-color);
    box-shadow: var(--shadow-sm);
}
.tabbed-widget__panel { display: none; }
.tabbed-widget__panel.is-active { display: block; }

.tabbed-widget .post-mini {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 0.7rem;
    align-items: center;
    padding-block: 0.5rem;
    border-block-end: 1px dashed var(--border-color);
}
.tabbed-widget .post-mini:last-child { border-block-end: 0; }
.tabbed-widget .post-mini img {
    inline-size: 72px;
    block-size: 56px;
    object-fit: cover;
    border-radius: var(--glob-border-radius);
    background: var(--surface-alt);
}
.tabbed-widget .post-mini__title {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}
.tabbed-widget .post-mini__title a { color: var(--text-color); }
.tabbed-widget .post-mini__title a:hover { color: var(--site-color); }
.tabbed-widget .post-mini__meta {
    font-size: 0.75rem;
    color: var(--meta-color);
    margin-block-start: 0.15rem;
}


/* ──────────────────────────────────────────────────────────────
   16) الفوتر
   ────────────────────────────────────────────────────────────── */
.site-footer,
#site-footer {
    margin-block-start: var(--glob-gap);
    background: var(--light-bg);
    border-block-start: 1px solid var(--border-color);
    color: var(--text-color);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--post-gap);
    padding-block: clamp(2rem, 4vw, 3.5rem);
}
.footer-grid > .footer-col { grid-column: span 12; }
@media (min-width: 768px) {
    .footer-grid > .footer-col { grid-column: span 6; }
}
@media (min-width: 1100px) {
    .footer-grid > .footer-col--brand { grid-column: span 4; }
    .footer-grid > .footer-col { grid-column: span 2; }
    .footer-grid > .footer-col--wide { grid-column: span 4; }
}

.footer-col h4 {
    font-size: 0.95rem;
    margin-block-end: 0.9rem;
    color: var(--text-color);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.footer-col a { color: var(--meta-color); font-weight: 500; }
.footer-col a:hover { color: var(--site-color); }

.footer-newsletter {
    display: flex;
    gap: 0.5rem;
    margin-block-start: 0.75rem;
}
.footer-newsletter input {
    flex: 1;
    min-inline-size: 0;
    padding: 0.7rem 0.85rem;
    background: var(--surface-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--glob-border-radius);
    color: var(--text-color);
    font: inherit;
}
.footer-newsletter button {
    padding: 0.7rem 1.1rem;
    border-radius: var(--glob-border-radius);
    background: var(--site-color);
    color: #fff;
    font-weight: 700;
}
.footer-newsletter button:hover { filter: brightness(1.05); }

.footer-copyrights {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding-block: 1.1rem;
    border-block-start: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--meta-color);
}
.footer-copyrights a { color: var(--text-color); font-weight: 700; }
.footer-copyrights a:hover { color: var(--site-color); }
.footer-copyrights ul {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ──────────────────────────────────────────────────────────────
   17) زر الوضع الليلي العائم
   ────────────────────────────────────────────────────────────── */
#dark-mode-toggle {
    position: fixed;
    inset-block-end: 1.25rem;
    inset-inline-start: 1.25rem;
    z-index: 950;

    inline-size: 48px;
    block-size: 48px;
    display: grid;
    place-items: center;

    background: var(--surface);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    box-shadow: var(--shadow-md);

    transition:
        transform var(--speed) var(--ease),
        background-color var(--speed) var(--ease),
        color var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease);
}
#dark-mode-toggle:hover {
    transform: translateY(-2px) rotate(-12deg);
    box-shadow: var(--shadow-lg);
    color: var(--site-color);
}
#dark-mode-toggle .icon-sun  { display: none; }
#dark-mode-toggle .icon-moon { display: block; }
html.dark-mode #dark-mode-toggle .icon-sun  { display: block; }
html.dark-mode #dark-mode-toggle .icon-moon { display: none; }


/* ──────────────────────────────────────────────────────────────
   18) الوضع الليلي — Dark Mode Overrides
   (المحددات مطابقة تمامًا لسكربت FOUC في localStorage)
   ────────────────────────────────────────────────────────────── */
html.dark-mode,
html.dark-mode body {
    --bg-color: var(--dark-bg-color, #1d1d1d);
    --text-color: #F5F5F5;
    background-color: var(--bg-color);
    color: var(--text-color);
}
html.dark-mode .site-header,
html.dark-mode .site-footer {
    background-color: var(--dark-bg-color);
    border-color: var(--dark-border-color);
}

/* تمرير الألوان داخل النظام في الوضع الليلي */
html.dark-mode body {
    --surface: #262626;
    --surface-alt: var(--dark-bg-alt);
    --border-color: var(--dark-border-color);
    --meta-color: #a8a8a8;
    --link-color: var(--dark-color);
    --body-bg-color: #141414;
}
html.dark-mode #site { background-color: var(--body-bg-color); }
html.dark-mode .site-header,
html.dark-mode #site-header {
    background-color: color-mix(in oklab, var(--dark-bg-color) 75%, transparent);
}

html.dark-mode .archive-loop-item,
html.dark-mode article.post,
html.dark-mode .widget,
html.dark-mode .search-overlay__form,
html.dark-mode .side-menu,
html.dark-mode .nav-menu .mega-menu,
html.dark-mode #dark-mode-toggle {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--text-color);
}

html.dark-mode .news-ticker { background-color: var(--surface); border-color: var(--border-color); }
html.dark-mode .news-ticker__list a { color: var(--text-color); }

html.dark-mode .tabbed-widget__tabs,
html.dark-mode .author-box,
html.dark-mode .related-posts-inline,
html.dark-mode .post-tags a,
html.dark-mode .post-share-buttons a,
html.dark-mode .footer-newsletter input,
html.dark-mode blockquote,
html.dark-mode code,
html.dark-mode pre {
    background-color: var(--surface-alt);
    border-color: var(--border-color);
    color: var(--text-color);
}

html.dark-mode .tabbed-widget__tab.is-active { background: var(--surface); }
html.dark-mode .entry-title a,
html.dark-mode .nav-menu > li > a,
html.dark-mode .author-box__name,
html.dark-mode .widget li a,
html.dark-mode .footer-copyrights a {
    color: var(--text-color);
}
html.dark-mode .entry-title a:hover,
html.dark-mode .nav-menu > li > a:hover,
html.dark-mode .widget li a:hover,
html.dark-mode .footer-copyrights a:hover {
    color: var(--site-color);
}

html.dark-mode .footer-col a { color: var(--meta-color); }
html.dark-mode ::selection { background: var(--site-color); color: #fff; }


/* ──────────────────────────────────────────────────────────────
   19) الاستجابة — Mobile First Breakpoints
   ────────────────────────────────────────────────────────────── */

/* جوال صغير — افتراضي */
@media (max-width: 600px) {
    :root, body { --glob-gap: 28px; --post-gap: 14px; }
    .site-header__inner { gap: 0.5rem; }
    .news-ticker { font-size: 0.85rem; }
    .news-ticker__label { padding-inline: 0.75rem; }
    article.post { padding: 1rem; }
    .post-share-buttons a { inline-size: 36px; block-size: 36px; }
}

/* تابلت */
@media (min-width: 601px) and (max-width: 991px) {
    .nav-menu { display: none; }
}

/* ديسكتوب */
@media (min-width: 992px) {
    :root, body { --glob-gap: 50px; }
    .menu-toggle { display: none; }
}

/* شاشات كبيرة جدًا */
@media (min-width: 1400px) {
    .container { width: min(100% - 2rem, 1340px); }
}

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .news-ticker__list { animation: none; }
}


/* ──────────────────────────────────────────────────────────────
   20) الطباعة
   ────────────────────────────────────────────────────────────── */
@media print {
    .site-header,
    .site-footer,
    #secondary,
    #dark-mode-toggle,
    .news-ticker,
    .reading-progress-bar,
    .post-share-buttons,
    .related-posts-inline { display: none !important; }

    body { background: #fff; color: #000; }
    article.post {
        border: 0;
        padding: 0;
    }
    .entry-content { max-inline-size: none; }
    a { color: #000; text-decoration: underline; }
}