:root {
    /* Brand Colors */
    --color-primary: #211D75;
    --color-primary-dark: #0F0D35;
    --color-accent: #FFB824;
    --color-accent-light: #CDE8FE;
    --color-accent-light-bg: #FFF8EB;
    --color-primary-hover: #1A1760;

    /* Overlays */
    --overlay-dark: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);

    /* Neutral Colors */
    --color-surface: #FAFAFA;
    --color-content-bg: #FFFFFF;
    --color-border: #E0E0E0;
    --color-dark: #121212;
    --color-muted: #6C757D;

    /* State Colors */
    --color-success: #28a745;
    --color-danger: #FF4C4C;

    /* Typography Colors */
    --text-primary: var(--color-dark);
    --text-secondary: var(--color-muted);

    /* Spacing Scale */
    --space-xxs: 4px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 64px;

    /* Fluid Spacing */
    --space-fluid-sm: min(var(--space-sm), 4%);
    --space-fluid-md: min(var(--space-md), 6%);
    --space-fluid-lg: min(var(--space-lg), 8%);

    /* Container Padding */
    --container-padding-horizontal: min(2em, 8%);
    --container-padding-vertical: min(2em, 5%);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 32px;

    /* Fluid Typography Sizes (optimized for Al Jazeera Arabic font) */
    --font-xs: clamp(0.7rem, 0.45vw + 0.65rem, 0.8rem);
    --font-sm: clamp(0.8rem, 0.55vw + 0.75rem, 0.95rem);
    --font-md: clamp(0.95rem, 0.9vw + 0.85rem, 1.05rem);
    --font-lg: clamp(1.1rem, 1.1vw + 0.95rem, 1.3rem);
    --font-xl: clamp(1.4rem, 1.4vw + 1.15rem, 1.8rem);
    --font-xxl: clamp(1.9rem, 2.3vw + 1.4rem, 2.8rem);
    --font-display: clamp(2.8rem, 3.8vw + 1.9rem, 4.5rem);

}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Fonts */
@font-face {
    font-family: "Al-Jazeera-Regular";
    src: url(../fonts/Al-Jazeera-Arabic-Regular.ttf);
}

@font-face {
    font-family: "Al-Jazeera-Bold";
    src: url(../fonts/Al-Jazeera-Arabic-Bold.ttf);
}


/* Base Styles */
body {
    font-family: "Al-Jazeera-Regular", sans-serif;
    font-size: var(--font-md);
    color: var(--text-primary);
    direction: rtl;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: "Al-Jazeera-Bold";
    margin: 0;
    line-height: 1.6;
}

h1 {
    font-size: var(--font-display);
}

h2 {
    font-size: var(--font-xxl);
}

h3 {
    font-size: var(--font-xl);
}

h4 {
    font-size: var(--font-lg);
}

h5 {
    font-size: var(--font-md);
}

h6 {
    font-size: var(--font-sm);
}

p {
    font-size: var(--font-md);
    margin-bottom: 0;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: inherit;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
}

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

.btn-secondary {
    background-color: var(--color-accent);
    color: var(--color-dark);
    border: 1px solid var(--color-accent);
}

.btn-secondary:hover {
    background-color: #b0def0;
}

/* Utilities */
.text-muted {
    color: var(--text-secondary) !important;
}

.rounded {
    border-radius: var(--radius-lg) !important;
}

.section {
    padding: var(--container-padding-vertical) 0;
}

input::placeholder {
    text-align: right;
    font-size: var(--font-sm);
}

img {
    max-width: 100%;
    height: auto;
}

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

.overlay {
    background: rgba(0, 0, 0, 0.6);
    color: var(--text-primary);
}

.bg-primary {
    background: var(--color-primary) !important;
}

#preloadr {
    opacity: 1;
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #ffffff 0%, #f4f3fb 100%);
    z-index: 9999;
    transition: opacity .5s ease;
}

#preloadr[data-hidden="true"] {
    opacity: 0;
    pointer-events: none;
}

.hodhod-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
}

.hodhod-loader__logo-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.hodhod-loader__logo {
    position: relative;
    display: block;
    width: 90px;
    height: 90px;
    object-fit: contain;
    z-index: 3;
    animation: hodhod-logo-pulse 1.8s ease-in-out infinite;
    filter: drop-shadow(0 6px 14px rgba(33, 29, 117, 0.25));
}

.hodhod-loader__ring {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    border: 4px solid rgba(33, 29, 117, 0.12);
    border-top-color: #211D75;
    border-right-color: #211D75;
    box-sizing: border-box;
    animation: hodhod-spin 1.4s linear infinite;
    z-index: 1;
}

.hodhod-loader__ring--2 {
    top: 14px;
    left: 14px;
    right: 14px;
    bottom: 14px;
    width: auto;
    height: auto;
    border-width: 3px;
    border-color: rgba(33, 29, 117, 0.08);
    border-bottom-color: #211D75;
    border-left-color: #211D75;
    animation: hodhod-spin 2.2s linear infinite reverse;
    z-index: 2;
}

.hodhod-loader__bar {
    position: relative;
    width: 220px;
    height: 6px;
    background: rgba(33, 29, 117, 0.12);
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
}

.hodhod-loader__bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 45%;
    background: linear-gradient(90deg, rgba(33, 29, 117, 0) 0%, #211D75 50%, rgba(33, 29, 117, 0) 100%);
    border-radius: 6px;
    will-change: transform;
    animation: hodhod-bar-slide 1.6s ease-in-out infinite;
}

.hodhod-loader__dots {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.hodhod-loader__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #211D75;
    opacity: 0.25;
    animation: hodhod-dot-bounce 1.2s ease-in-out infinite;
}

.hodhod-loader__dot:nth-child(2) { animation-delay: 0.15s; }
.hodhod-loader__dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes hodhod-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes hodhod-logo-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(0.92); opacity: .85; }
}

@keyframes hodhod-bar-slide {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(260%); }
}

@keyframes hodhod-dot-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.25; }
    50%      { transform: translateY(-6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hodhod-loader__logo,
    .hodhod-loader__ring,
    .hodhod-loader__bar-fill,
    .hodhod-loader__dot {
        animation: none;
    }
}

.w-60 {
    width: 60%;
}

@media (max-width: 767.98px) {

    .w-60 {
        width: 100%;
    }
}

/* =========================================================
   Hodhod - Polish layer (non-destructive micro-refinements)
   يحسّن جودة النص والمسافات والتفاعلات بدون كسر التصميم
   ========================================================= */

/* Smoother global font rendering */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    letter-spacing: 0.1px;
}

/* Heading refinement: kerning only, keep original line-height */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -0.1px;
}

/* Paragraph comfort (scoped to content areas to avoid breaking layouts) */
.article-body p,
.about-content p,
.special-page-content p,
.page-content p {
    line-height: 1.95;
    color: #222;
    letter-spacing: 0.15px;
    margin-bottom: var(--space-md);
}

/* Text selection branded */
::selection {
    background: rgba(33, 29, 117, 0.18);
    color: var(--color-primary);
}
::-moz-selection {
    background: rgba(33, 29, 117, 0.18);
    color: var(--color-primary);
}

/* Muted text a touch more readable */
.text-muted,
.small.text-muted {
    color: #6b7280 !important;
}

/* Softer, consistent link behavior (doesn't override existing colors) */
a {
    transition: color .25s ease, opacity .25s ease;
}
a:hover {
    opacity: .88;
}

/* Focus ring accessibility (keyboard only) */
:focus-visible {
    outline: 2px solid rgba(33, 29, 117, 0.55);
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
}

/* Branded scrollbar (desktop only) */
@media (min-width: 992px) {
    html {
        scrollbar-width: thin;
        scrollbar-color: rgba(33, 29, 117, 0.45) transparent;
    }
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    ::-webkit-scrollbar-track {
        background: transparent;
    }
    ::-webkit-scrollbar-thumb {
        background: rgba(33, 29, 117, 0.35);
        border-radius: 10px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(33, 29, 117, 0.55);
        background-clip: padding-box;
        border: 2px solid transparent;
    }
}

/* Graceful alt text when images fail */
img {
    font-style: italic;
    color: var(--text-secondary);
}

/* Slightly softer card/button transitions (only where not already defined) */
.btn {
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.btn:hover {
    transform: translateY(-1px);
}
.btn:active {
    transform: translateY(0);
}

/* Tables a bit more breathable (if ever rendered by CKEditor) */
.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
    font-size: 0.95em;
}
.article-body table th,
.article-body table td {
    padding: 10px 14px;
    border: 1px solid #e6e6ef;
    text-align: right;
}
.article-body table th {
    background: #f4f3fb;
    color: var(--color-primary);
    font-family: "Al-Jazeera-Bold", sans-serif;
}
.article-body table tr:nth-child(even) td {
    background: #fafafe;
}

/* Better list spacing inside article bodies */
.article-body ul,
.article-body ol {
    padding-inline-start: 24px;
    margin: var(--space-sm) 0 var(--space-md);
}
.article-body ul {
    list-style: disc;
}
.article-body ol {
    list-style: decimal;
}
.article-body li {
    margin-bottom: 8px;
    line-height: 1.9;
}

/* Headings inside articles get a subtle accent bar */
.article-body h2,
.article-body h3,
.article-body h4 {
    margin: var(--space-lg) 0 var(--space-sm);
    color: var(--color-primary);
    position: relative;
    padding-inline-start: 14px;
}
.article-body h2::before,
.article-body h3::before,
.article-body h4::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: var(--color-primary);
    border-radius: 4px;
    opacity: .75;
}

/* Article inline links: subtle underline, brand color */
.article-body a:not(.tag):not(.btn) {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: rgba(33, 29, 117, 0.35);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color .25s ease, color .25s ease;
}
.article-body a:not(.tag):not(.btn):hover {
    text-decoration-color: var(--color-primary);
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .btn:hover {
        transform: none;
    }
}

.section-badge {
    display: flex;
    padding: 6px 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: max-content;
    border-right: 2px solid var(--color-accent);
    color: var(--color-accent);
    font-family: "Al-Jazeera-Bold";
    background: #FFF8EB;
    font-size: var(--font-lg);
    margin-bottom: var(--space-md);


}


.section-title {
    font-weight: bold;
    font-size: var(--font-xl);
    color: var(--color-primary);
    line-height: 1.2;
    position: relative;
    padding-bottom: 10px;
    padding-inline-start: 14px;
    margin-bottom: 0;
    white-space: nowrap;
}

/* Vertical accent bar before the section title (RTL-aware) */
.section-title::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border-radius: 4px;
}

.section-title::after {
    content: none;
}

/* Modern solid gradient divider replacing the weak dashed one */
.header-divider {
    border-bottom: none;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        rgba(33, 29, 117, 0.25) 30%,
        rgba(33, 29, 117, 0.08) 100%
    );
    border-radius: 2px;
}

.btn-view-all {
    background: var(--color-primary);
    color: #fff;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: var(--font-sm);
    height: 40px;
    border: 1px solid var(--color-primary);
    box-shadow: 0 2px 8px rgba(33, 29, 117, 0.12);
    transition: background-color 0.25s ease,
                color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.25s ease;
    white-space: nowrap;
}

.btn-view-all i {
    transition: transform 0.25s ease;
}

.btn-view-all:hover {
    background: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
    box-shadow: 0 4px 14px rgba(255, 184, 36, 0.35);
    transform: translateY(-1px);
}

.btn-view-all:hover i {
    transform: translateX(-4px);
}