/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Template: generatepress
Author: Tom Usborne
Author URI: https://generatepress.com/about
Description: GeneratePress child theme for Najaf Desert Newspaper
Version: 3.2.0
Updated: 2026-03-09
*/

/* ===================================================================
   NAJAF DESERT NEWSPAPER — UNIFIED DESIGN SYSTEM v2
   Palette: Black #282828 · Gold #c5a85a · Grey #e7e6e4 · Cream #fcfbf8
   Font: Mada
   =================================================================== */

:root {
    /* Design system fallbacks — GP Customizer output overrides these */
    --contrast: #282828;
    --contrast-2: #282828;
    --contrast-3: #5c5c5c;
    --base: #fcfbf8;
    --base-2: #fcfbf8;
    --base-3: #e7e6e4;
    --accent: #c5a85a;
    --accent-2: #5c5c5c;
    --accent-3: #282828;

    /* Najaf local tokens */
    --najaf-radius: 10px;
    --najaf-radius-sm: 8px;
    --najaf-radius-lg: 14px;
    --najaf-shadow: 0 2px 12px rgba(0,0,0,0.06);
    --najaf-shadow-hover: 0 8px 28px rgba(0,0,0,0.12);
    --najaf-transition: all 0.25s ease-in-out;
    --najaf-gold-glow: 0 0 0 3px rgba(197,168,90,0.2);
}

/* ===================================================================
   0. DARK MODE — Variable overrides + component adjustments
   Mechanism: <html data-theme="dark"> swaps CSS custom properties.
   Detection: inline <script> in <head> reads localStorage → OS pref → default light.
   Toggle: #najaf-theme-toggle button in header (generate_after_logo, priority 12).
   =================================================================== */

/* --- Dark palette: data-theme attribute on <html> --- */
[data-theme="dark"] {
    --contrast: #e7e6e4;
    --contrast-2: #d4d3d1;
    --contrast-3: #9a9a9a;
    --base: #1a1a1a;
    --base-2: #222222;
    --base-3: #333333;
    --accent: #c5a85a;
    --accent-2: #9a9a9a;
    --accent-3: #e7e6e4;
    --najaf-shadow: 0 2px 12px rgba(0,0,0,0.3);
    --najaf-shadow-hover: 0 8px 28px rgba(0,0,0,0.5);
}

/* --- OS preference for first-time visitors (no localStorage yet) --- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --contrast: #e7e6e4;
        --contrast-2: #d4d3d1;
        --contrast-3: #9a9a9a;
        --base: #1a1a1a;
        --base-2: #222222;
        --base-3: #333333;
        --accent: #c5a85a;
        --accent-2: #9a9a9a;
        --accent-3: #e7e6e4;
        --najaf-shadow: 0 2px 12px rgba(0,0,0,0.3);
        --najaf-shadow-hover: 0 8px 28px rgba(0,0,0,0.5);
    }
}

/* --- Splash screen dark mode --- */
[data-theme="dark"] #najaf-splash {
    background: #1a1a1a !important;
}
[data-theme="dark"] #najaf-splash .najaf-splash-subtitle,
[data-theme="dark"] #najaf-splash p:last-of-type {
    color: #9a9a9a !important;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) #najaf-splash {
        background: #1a1a1a !important;
    }
    :root:not([data-theme="light"]) #najaf-splash p:last-of-type {
        color: #9a9a9a !important;
    }
}

[data-theme="dark"] .site-header {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid rgba(197,168,90,0.15);
    box-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
[data-theme="dark"] .site-header a,
[data-theme="dark"] .site-header .najaf-brand-name a {
    color: var(--accent) !important;
}
[data-theme="dark"] .menu-bar-item.slideout-toggle,
[data-theme="dark"] .slideout-toggle a,
[data-theme="dark"] .slideout-toggle a span,
[data-theme="dark"] .slideout-toggle a svg,
[data-theme="dark"] .menu-toggle,
[data-theme="dark"] .menu-toggle span,
[data-theme="dark"] .menu-toggle svg,
[data-theme="dark"] #mobile-menu-control-wrapper {
    color: var(--accent) !important;
    fill: var(--accent) !important;
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

/* --- Selection colors: gold bg on dark text --- */
[data-theme="dark"] ::selection {
    background: var(--accent);
    color: #1a1a1a;
}
[data-theme="dark"] ::-moz-selection {
    background: var(--accent);
    color: #1a1a1a;
}

/* --- Images: slight dimming so bright images don't assault eyes --- */
[data-theme="dark"] img {
    filter: brightness(0.9);
}
/* Exclude logos from dimming */
[data-theme="dark"] .site-header img,
[data-theme="dark"] .site-footer img,
[data-theme="dark"] .site-footer svg,
[data-theme="dark"] #najaf-splash img,
[data-theme="dark"] .custom-logo {
    filter: none;
}
[data-theme="dark"] .site-footer .gb-element-0e5018eb a svg {
    fill: #fcfbf8 !important;
    color: #fcfbf8 !important;
    opacity: 1 !important;
}

/* --- Inputs & textareas: dark background with light text --- */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--base) !important;
    border-color: var(--base-3) !important;
    color: var(--contrast-2) !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: var(--base-2) !important;
    border-color: var(--accent) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--contrast-3) !important;
    opacity: 0.7;
}

/* --- Comment form inputs: dark --- */
[data-theme="dark"] .comment-form textarea,
[data-theme="dark"] .comment-form input[type="text"],
[data-theme="dark"] .comment-form input[type="email"],
[data-theme="dark"] .comment-form input[type="url"] {
    background: var(--base) !important;
    border-color: var(--base-3) !important;
    color: var(--contrast-2) !important;
}

/* --- Header search: already dark, ensure placeholder stays readable --- */
[data-theme="dark"] .site-header .najaf-header-search {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
}
[data-theme="dark"] .site-header .najaf-header-search:focus-within {
    background: rgba(255,255,255,0.16);
    border-color: var(--accent);
}
[data-theme="dark"] .site-header .najaf-header-search .najaf-header-search__input::placeholder {
    color: rgba(231,230,228,0.5);
}

/* --- News ticker: slightly lighter than body to stay distinguishable --- */
[data-theme="dark"] .ticker-outer,
[data-theme="dark"] .ticker-wrap {
    background: #2a2a2a;
    border-top-color: var(--accent);
}
[data-theme="dark"] .ticker-content span {
    color: var(--contrast-2);
}

/* --- Page header (archive): MUST stay dark, not flip to light --- */
[data-theme="dark"] .page-header {
    background: var(--base-3) !important;
    color: var(--contrast) !important;
}
[data-theme="dark"] .page-header .page-title {
    color: var(--contrast) !important;
}
[data-theme="dark"] .page-header .archive-description {
    color: var(--contrast-3);
}

/* --- Blockquote: gold border stays, background darkens --- */
[data-theme="dark"] blockquote,
[data-theme="dark"] .wp-block-quote {
    background: var(--base);
    border-right-color: var(--accent);
    color: var(--contrast-2);
}

/* --- Code blocks: inverted for dark mode --- */
[data-theme="dark"] pre,
[data-theme="dark"] .wp-block-code {
    background: #111111;
    color: var(--contrast-2);
}
[data-theme="dark"] code {
    background: var(--base-3);
}

/* --- Tab buttons (Plethora): verify contrast --- */
[data-theme="dark"] .plethoraplugins-tabs > ul > li > a {
    background: var(--base-3) !important;
    color: var(--contrast-2) !important;
    border-color: var(--base-3) !important;
}
[data-theme="dark"] .plethoraplugins-tabs > ul > li > a.active {
    background: var(--base) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
    border-bottom-color: var(--base) !important;
}
[data-theme="dark"] .plethoraplugins-tabs > ul > li > a:not(.active):hover {
    background: rgba(197,168,90,0.12) !important;
    border-color: var(--accent) !important;
}

/* --- Category pill buttons: ensure contrast on dark bg --- */
[data-theme="dark"] .alphabetical-category-index .qa-category-button,
[data-theme="dark"] .alphabetical-category-index .rebuttals-category-button {
    color: var(--contrast-2);
    border-color: var(--base-3);
}
[data-theme="dark"] .alphabetical-category-index .qa-category-button:hover,
[data-theme="dark"] .alphabetical-category-index .rebuttals-category-button:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #1a1a1a;
}

/* --- QA cards: border color on dark bg --- */
[data-theme="dark"] .qa-card {
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* --- Table header: stays dark --- */
[data-theme="dark"] table th,
[data-theme="dark"] .wp-block-table th {
    background: var(--base-3) !important;
    color: var(--contrast) !important;
}
[data-theme="dark"] table tbody tr:hover,
[data-theme="dark"] .wp-block-table tbody tr:hover {
    background: rgba(197,168,90,0.06);
}

/* --- Pagination: dark bg pages --- */
[data-theme="dark"] .gb-query-loop-pagination a,
[data-theme="dark"] .gb-query-loop-pagination .page-numbers,
[data-theme="dark"] .nav-links a,
[data-theme="dark"] .nav-links .page-numbers {
    border-color: var(--base-3);
    background: var(--base);
}

/* --- Contact form: error message readable in dark mode --- */
[data-theme="dark"] .najaf-form-error {
    background: rgba(180,60,60,0.15);
    color: #e88;
    border-color: rgba(180,60,60,0.35);
}
[data-theme="dark"] .najaf-form-success {
    background: rgba(197,168,90,0.1);
    color: var(--accent);
    border-color: rgba(197,168,90,0.25);
}

/* --- Comment reply link: visible border in dark mode --- */
[data-theme="dark"] .comment-reply-link {
    border-color: var(--accent);
}

/* --- Checkbox in dark mode --- */
[data-theme="dark"] .comment-form-cookies-consent input[type="checkbox"] {
    background: var(--base);
    border-color: var(--base-3);
}
[data-theme="dark"] .comment-form-cookies-consent input[type="checkbox"]:checked::after {
    color: #1a1a1a;
}

/* --- Category badge on cards: navy bg still works on dark --- */
[data-theme="dark"] .gb-loop-item-bfca2c91 .gb-text-82bd38a2 a {
    background-color: var(--base-3) !important;
    color: var(--accent) !important;
}

/* --- Separator/divider lines between sections --- */
[data-theme="dark"] .site-content .gb-container + .gb-container::before {
    background: linear-gradient(to left, var(--accent), var(--base-3));
}

/* --- Widget borders --- */
[data-theme="dark"] .widget ul li {
    border-bottom-color: var(--base-3);
}

/* --- Letter group border in category index --- */
[data-theme="dark"] .alphabetical-category-index .letter-group {
    border-bottom-color: rgba(255,255,255,0.08);
}

/* --- Tag links in dark mode --- */
[data-theme="dark"] .tagcloud a,
[data-theme="dark"] .tag-links a,
[data-theme="dark"] .tags-links a,
[data-theme="dark"] .wp-block-tag-cloud a,
[data-theme="dark"] .post-tags a {
    background: var(--base) !important;
    border-color: var(--base-3) !important;
}

/* --- Search modal dark --- */
[data-theme="dark"] .gp-modal .gp-modal__overlay {
    background-color: rgba(0,0,0,0.92) !important;
}

[data-theme="dark"] .site-footer {
    background-color: #1e1e1e !important;
    color: #d4d3d1 !important;
    border-top-color: var(--accent);
}
[data-theme="dark"] .site-footer a {
    color: #d4d3d1 !important;
}
[data-theme="dark"] .site-footer a:hover {
    color: var(--accent) !important;
}
[data-theme="dark"] .gb-element-4ba21f66 {
    border-top-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] .gb-element-4ba21f66 p,
[data-theme="dark"] .gb-element-4ba21f66 .gb-text-cb2765eb {
    color: rgba(255,255,255,0.5) !important;
}
[data-theme="dark"] .gb-element-eb22c4f2 a {
    color: rgba(255,255,255,0.5) !important;
}
[data-theme="dark"] .gb-element-eb22c4f2 a:hover {
    color: var(--accent) !important;
}

/* --- Contact Us CTA button in dark mode --- */
[data-theme="dark"] a.gb-text.gb-text-dd498259 {
    background: var(--base-3);
    color: var(--contrast) !important;
}
[data-theme="dark"] a.gb-text.gb-text-dd498259:hover {
    background: var(--accent);
    color: #1a1a1a !important;
}

/* ===================================================================
   0b. DARK MODE TOGGLE BUTTON
   Position: header row, between brand name and search bar.
   Icons: sun (shown in dark) / moon (shown in light).
   =================================================================== */
.najaf-theme-toggle {
    background: transparent;
    border: none;
    padding: 8px;
    width: 36px;
    height: 36px;
    min-width: 44px;   /* iOS touch target */
    min-height: 44px;  /* iOS touch target */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--accent);
    border-radius: var(--najaf-radius-sm);
    transition: var(--najaf-transition);
    flex-shrink: 0;
    position: relative;
    margin-right: 4px; /* RTL: small gap from brand name */
}
.najaf-theme-toggle:hover {
    background: rgba(197,168,90,0.12);
    box-shadow: 0 0 12px rgba(197,168,90,0.2);
}
.najaf-theme-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.najaf-theme-toggle svg {
    transition: transform 0.35s ease, opacity 0.25s ease;
    position: absolute;
}

/* Light mode: show moon, hide sun */
.najaf-toggle-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.najaf-toggle-moon { opacity: 1; transform: rotate(0deg) scale(1); }

/* Dark mode: show sun, hide moon */
[data-theme="dark"] .najaf-toggle-sun { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="dark"] .najaf-toggle-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }

/* OS dark preference fallback (no data-theme set yet) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .najaf-toggle-sun { opacity: 1; transform: rotate(0deg) scale(1); }
    :root:not([data-theme="light"]) .najaf-toggle-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
}

/* Mobile: keep 44px minimum touch target */
@media (max-width: 768px) {
    .najaf-theme-toggle {
        margin-right: 0;
        padding: 6px;
    }
}
@media (max-width: 480px) {
    .najaf-theme-toggle {
        min-width: 40px;
        min-height: 40px;
    }
}

/* ===================================================================
   1. GLOBAL RESETS & BASE
   =================================================================== */
html { overflow-x: clip !important; }
body {
    background-color: var(--base-2) !important;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip !important; /* !important to override GP offside.css .offside-js--init{overflow-x:hidden} which breaks position:sticky */
}

::selection { background: var(--accent); color: var(--contrast); }
::-moz-selection { background: var(--accent); color: var(--contrast); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Smooth transitions on ALL interactive elements */
a, button, input, textarea, select,
input[type="submit"], .gb-text a, .gb-button,
.wp-block-button__link, .page-numbers,
.cat-links a, .tag-links a, .tags-links a,
.entry-meta a, .post-navigation a,
.nav-links a, .read-more {
    transition: var(--najaf-transition);
}

img { border-radius: 0; }

/* Tighten global spacing between sections */
.site-content > * + *,
.gb-query-loop-wrapper + *,
* + .gb-query-loop-wrapper {
    margin-top: 0;
}

/* Center main content area to match header (max-width: 1200px) */
#primary.content-area {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}

/* ===================================================================
   2. HEADER — Compact, navy, professional, STICKY
   Both header and ticker are position:sticky.
   overflow-x:clip (with !important) on html/body — defeats GP offside.css
   .offside-js--init{overflow-x:hidden} which breaks sticky.
   WordPress core handles admin-bar clearance via html { margin-top: 32px }.
   =================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    margin-bottom: 0 !important;
}
/* Admin bar offsets:
   - Desktop (>782px): admin bar is position:fixed, height:32px
   - Tablet (601-782px): admin bar is position:fixed, height:46px
   - Phone (<=600px): admin bar is position:absolute (scrolls away),
     html has margin-top:46px so NO offset needed — header sticks at top:0 */
body.admin-bar .site-header {
    top: 32px;
}
body.admin-bar .ticker-outer {
    top: calc(var(--header-height, 60px) + 32px);
}
@media (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
    body.admin-bar .ticker-outer {
        top: calc(var(--header-height, 60px) + 46px);
    }
}
/* Phone: admin bar is absolute (scrolls away) — no offset needed */
@media (max-width: 600px) {
    body.admin-bar .site-header {
        top: 0;
    }
    body.admin-bar .ticker-outer {
        top: var(--header-height, 60px);
    }
}

.inside-header {
    padding: 8px 20px !important;
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap !important;
    flex-direction: row;  /* RTL flow: RIGHT-to-LEFT */
    justify-content: space-between;
    gap: 0.75rem;
}

/* Logo sizing — compact */
.site-header .header-image.is-logo-image {
    max-width: 60px;
    height: auto;
    border-radius: 6px;
    filter: invert(69%) sepia(67%) saturate(384%) hue-rotate(9deg) brightness(91%) contrast(86%)
           drop-shadow(0 1px 4px rgba(197,168,90,0.35));
}

/* Brand name — clickable text next to logo */
.najaf-brand-name {
    margin-right: 12px;  /* RTL: space between logo and text */
}
.najaf-brand-name a {
    color: var(--accent) !important;
    font-family: 'Mada', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: var(--najaf-transition);
    white-space: nowrap;
}
.najaf-brand-name a:hover {
    color: var(--base-2) !important;
}

/* Brand/title — gold on navy */
.main-title a {
    color: var(--accent) !important;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}
.main-title a:hover {
    color: var(--base-2) !important;
}

/* MOCKUP MATCH: Hide desktop primary navigation entirely — only show hamburger + search + brand */
/* Must hide the whole nav, not just children, otherwise it still participates in flex layout
   (GP Premium sets order:-5 and auto margins on it, creating uneven spacing) */
#site-navigation:not(.slideout-navigation) {
    display: none !important;
}

/* Hide the redundant GP mobile menu toggle (gold-bordered box) — keep only slideout toggle */
#mobile-menu-control-wrapper > button.menu-toggle,
button.menu-toggle[data-nav="site-navigation"] {
    display: none !important;
}

/* Always show mobile menu control wrapper (hamburger + search) on all screen sizes */
#mobile-menu-control-wrapper {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}

/* Force slideout toggle visible on ALL screen sizes (GP hides it on mobile) */
.menu-bar-item.slideout-toggle,
.menu-bar-item.slideout-toggle.hide-on-mobile {
    display: inline-flex !important;
}

/* Style the slideout toggle as the main hamburger button */
.slideout-toggle a {
    border: none !important;
    border-radius: var(--najaf-radius);
    padding: 0 !important;
    width: 44px;
    height: 44px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--najaf-transition);
    color: var(--accent) !important;
    background: transparent !important;
    box-sizing: border-box;
}
.slideout-toggle a:hover {
    background: rgba(197,168,90,0.1) !important;
    color: var(--accent) !important;
}
.slideout-toggle a svg {
    color: inherit;
    fill: currentColor;
    width: 20px !important;
    height: 20px !important;
}

/* Header layout: 3-zone — logo+brand RIGHT, search CENTER, hamburger LEFT (RTL) */
/* Hamburger pushed to far LEFT via order:1 */
.inside-header #mobile-menu-control-wrapper {
    flex-shrink: 0;
    order: 1; /* In RTL flex-row, higher order = further LEFT */
    margin: 0;  /* Remove auto margins that create gaps */
}

/* Hide the old search ICON button — replaced by inline search bar */
#mobile-menu-control-wrapper .menu-bar-item:has([data-gpmodal-trigger="gp-search"]),
#mobile-menu-control-wrapper .menu-bar-items > .menu-bar-item:first-child:not(.slideout-toggle) {
    display: none !important;
}

/* === Inline Header Search Bar === */
.najaf-header-search {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    max-width: 420px;
    min-width: 120px;
    height: 40px;
    background: rgba(252, 251, 248, 0.08);
    border: 1px solid rgba(252, 251, 248, 0.15);
    border-radius: 20px;
    overflow: hidden;
    transition: var(--najaf-transition);
    margin: 0 auto;  /* Center search bar in available flex space */
}
.najaf-header-search:focus-within {
    background: rgba(252, 251, 248, 0.13);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(197, 168, 90, 0.15);
}
/* Specificity boost: beat global input[type="search"] { background: var(--base-2) !important } */
.site-header .najaf-header-search .najaf-header-search__input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 6px 16px !important;
    font-family: 'Mada', sans-serif;
    font-size: 0.85rem;
    color: var(--base-2) !important;
    box-shadow: none !important;
    outline: none !important;
    height: 100%;
    min-width: 0;
    border-radius: 0 !important;
}
.site-header .najaf-header-search .najaf-header-search__input::placeholder {
    color: rgba(252, 251, 248, 0.4);
    font-size: 0.8rem;
}
/* Specificity boost: beat global body button[type="submit"] gold gradient */
.site-header .najaf-header-search .najaf-header-search__btn {
    flex-shrink: 0;
    border: none !important;
    background: transparent !important;
    color: var(--accent);
    padding: 0 12px;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--najaf-transition);
    box-shadow: none !important;
    border-radius: 0 !important;
}
.site-header .najaf-header-search .najaf-header-search__btn:hover {
    color: var(--base-2);
    background: rgba(197, 168, 90, 0.12) !important;
}

/* Nav links — compact */
.main-navigation .main-nav > ul > li > a {
    transition: var(--najaf-transition);
    font-size: 0.85rem !important;
    padding: 8px 6px !important;
    position: relative;
}

/* Desktop nav hover gold underline effect */
.main-navigation .main-nav > ul > li > a:hover {
    color: var(--accent) !important;
}
.main-navigation .main-nav > ul > li > a::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.3s ease;
}
.main-navigation .main-nav > ul > li > a:hover::after,
.main-navigation .main-nav > ul > li.current-menu-item > a::after {
    width: 100%;
}

/* Desktop dropdown menus */
.main-navigation .main-nav ul ul {
    background: var(--contrast) !important;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    border: none !important;
    min-width: 200px;
}
.main-navigation .main-nav ul ul li a {
    color: var(--base-2) !important;
    font-size: 0.85rem !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid rgba(252,251,248,0.06) !important;
}
.main-navigation .main-nav ul ul li a:hover {
    background: rgba(197,168,90,0.15) !important;
    color: var(--accent) !important;
}
.main-navigation .main-nav ul ul li:last-child a {
    border-bottom: none !important;
}

/* ===================================================================
   2b. HAMBURGER TOGGLE — Premium Navy/Gold aesthetic
   =================================================================== */
.menu-toggle {
    border: none;
    border-radius: var(--najaf-radius);
    background: transparent;
    color: var(--accent);
    padding: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: var(--najaf-transition);
    cursor: pointer;
}
.menu-toggle .menu-bars,
.menu-toggle svg {
    color: var(--accent);
    fill: var(--accent);
}
.menu-toggle:hover,
.menu-toggle:focus-visible {
    background: rgba(197,168,90,0.1);
    color: var(--accent);
}
.menu-toggle:hover .menu-bars,
.menu-toggle:focus-visible .menu-bars,
.menu-toggle:hover svg,
.menu-toggle:focus-visible svg {
    color: var(--accent);
    fill: var(--accent);
}
.menu-toggle.toggled {
    background: var(--accent);
    color: var(--contrast);
}
.menu-toggle.toggled .menu-bars,
.menu-toggle.toggled svg {
    color: var(--contrast);
    fill: var(--contrast);
}

/* Search widget in header */
.site-header .search-form,
.inside-header .search-form {
    display: flex;
    border-radius: var(--najaf-radius-sm);
    overflow: hidden;
    background: var(--base-2);
    max-width: 300px;
}
.site-header .search-field,
.inside-header .search-field {
    border: none !important;
    background: var(--base-2) !important;
    padding: 8px 12px !important;
    font-family: 'Mada', sans-serif;
    font-size: 0.9rem;
    color: var(--contrast-2);
    box-shadow: none !important;
}
.site-header .search-field:focus,
.inside-header .search-field:focus {
    background: var(--base) !important;
}

/* ===================================================================
   3. SLIDEOUT MENU — Premium Navy panel, newspaper index aesthetic
   =================================================================== */

/* Panel background — Navy */
.main-navigation.slideout-navigation {
    background: #282828 !important;
    box-shadow: -2px 0 12px rgba(0,0,0,0.15);
}

/* Bug 2 Fix: Force slideout menu to viewport-fixed positioning.
   The WP Customizer had .rtl #generate-slideout-menu { position: absolute }
   which anchored the menu to the document top instead of the viewport.
   That rule has been removed from the DB. This ensures fixed positioning
   survives any future GP/RTL overrides. */
.rtl #generate-slideout-menu,
#generate-slideout-menu {
    position: fixed !important;
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
}

/* Admin bar fix: Push slideout panel + overlay below the WP admin bar.
   Desktop admin bar = 32px. Mobile (≤782px) = 46px.
   Targets .offside (the actual positioned nav) AND the overlay. */
body.admin-bar .offside,
body.admin-bar #generate-slideout-menu {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
    height: calc(100dvh - 32px) !important;
}
body.admin-bar .slideout-overlay {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
}
@media (max-width: 782px) {
    body.admin-bar .offside,
    body.admin-bar #generate-slideout-menu {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
        height: calc(100dvh - 46px) !important;
    }
    body.admin-bar .slideout-overlay {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
    }
}

/* Panel width */
#generate-slideout-menu {
    max-width: min(320px, 85vw);
}

/* Inner wrapper */
.slideout-navigation .inside-navigation {
    padding: 0;
    position: relative;
}

/* ---- Header band — deeper navy with gold accent border ---- */
.slideout-navigation .inside-navigation::before {
    content: "\635\62D\64A\641\629\20\635\62D\631\627\621\20\627\644\646\62C\641";
    display: flex;
    align-items: center;
    background: #1a1a1a;
    color: #fcfbf8;
    padding: 0.8rem 1rem;
    padding-left: 48px;  /* clear space for the absolute X button in RTL */
    font-size: 1.05rem;
    font-weight: 700;
    font-family: 'Mada', sans-serif;
    text-align: right;
    border-bottom: 2px solid var(--accent);
    min-height: 44px;
    box-sizing: border-box;
}

/* ---- Close button — gold X, left-aligned in header band (RTL) ---- */
.slideout-navigation .slideout-exit {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 5;
    width: 44px !important;
    height: 44px;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--accent) !important;
    background: transparent !important;
    border: none !important;
    font-size: 1.3rem;
    cursor: pointer;
    transition: var(--najaf-transition);
    border-radius: var(--najaf-radius);
}
.slideout-navigation .slideout-exit:hover {
    background: rgba(197,168,90,0.15) !important;
    color: var(--accent) !important;
}

/* ---- Parent items = Section headers (slightly lighter navy) ---- */
.slideout-navigation .main-nav > ul > li.menu-item-has-children > a {
    background: #1e1e1e !important;
    color: #fcfbf8 !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    padding: 0.55rem 1rem !important;
    border-bottom: 1px solid rgba(197,168,90,0.15) !important;
    border-top: none !important;
    text-align: right;
    letter-spacing: 0.02em;
    text-transform: none;
}
.slideout-navigation .main-nav > ul > li.menu-item-has-children > a:hover {
    color: var(--accent) !important;
    background: #333333 !important;
}

/* ---- Top-level standalone items (no children) ---- */
.slideout-navigation .main-nav > ul > li:not(.menu-item-has-children) > a {
    color: #fcfbf8 !important;
    background: #282828 !important;
    border-bottom: 1px solid rgba(252,251,248,0.08) !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.88rem !important;
    text-align: right;
    font-weight: 500;
}
.slideout-navigation .main-nav > ul > li:not(.menu-item-has-children) > a:hover {
    color: var(--accent) !important;
    background: #1e1e1e !important;
}

/* ---- Sub-menu items — indented, smaller, olive left-border hierarchy ---- */
.slideout-navigation .main-nav ul ul {
    background: #1a1a1a !important;
    border-right: none !important;
    border-left: none !important;
    margin: 0 !important;
    padding: 0;
}
.slideout-navigation .main-nav ul ul li a {
    padding: 0.45rem 2rem 0.45rem 1rem !important;
    font-size: 0.84rem !important;
    font-weight: 400 !important;
    color: rgba(252,251,248,0.75) !important;
    background: #1a1a1a !important;
    border-bottom: 1px solid rgba(252,251,248,0.05) !important;
    border-right: 3px solid var(--accent-2);
    text-align: right;
    line-height: 1.5 !important;
}
.slideout-navigation .main-nav ul ul li a:hover {
    color: var(--accent) !important;
    background: #222222 !important;
    border-right-color: var(--accent);
}
.slideout-navigation .main-nav ul ul li:last-child a {
    border-bottom: none !important;
}

/* Current menu item — gold text */
.slideout-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--accent) !important;
    font-weight: 700;
}

/* ---- Dropdown toggle arrows ---- */
.slideout-navigation .dropdown-menu-toggle {
    padding: 0.55rem 0.75rem !important;
    background: transparent !important;
    border: none !important;
    font-size: 0.7rem;
    transition: var(--najaf-transition);
    color: rgba(252,251,248,0.7) !important;
}
.slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle {
    color: rgba(252,251,248,0.8) !important;
}
.slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle:hover {
    color: var(--accent) !important;
}
.slideout-navigation .main-nav ul ul .dropdown-menu-toggle {
    color: rgba(252,251,248,0.6) !important;
}
.slideout-navigation .dropdown-menu-toggle:hover {
    color: var(--accent) !important;
}

/* Top-level ul reset */
.slideout-navigation .main-nav > ul {
    margin: 0;
    padding: 0;
}

/* ===================================================================
   4. SEARCH MODAL
   =================================================================== */
.gp-search-modal .search-modal-form {
    border-radius: var(--najaf-radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.search-modal-form .search-field {
    font-family: 'Mada', sans-serif;
    font-size: 1rem;
    padding: 14px 18px;
}

/* ===================================================================
   5. NEWS TICKER — Front page only
   =================================================================== */
.ticker-outer {
    display: block !important;
    visibility: visible !important;
    background: var(--contrast);
    margin: -1px 0 1rem;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: var(--header-height, 60px);
    z-index: 99;
    overflow: hidden;
}

.ticker-wrap {
    background: var(--contrast);
    color: var(--base-2);
    margin: 0;
    max-width: 100%;
    border-radius: 0;
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    min-height: 45px !important;
    height: auto;
    border-top: 2px solid var(--accent);
    position: relative;
    z-index: 0;
    box-sizing: border-box;
}
.ticker-label {
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    font-weight: 600;
    white-space: nowrap;
    background: var(--accent);
    color: var(--contrast);
    font-size: 1rem;
    line-height: 1.5;
    min-height: 45px;
    border-radius: 0 8px 8px 0;
}
.ticker-track {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 45px;
}
.ticker-content {
    display: flex;
    gap: 2rem;
    animation: najaf-ticker 30s linear infinite; /* fallback; the ticker script sets a constant-speed duration */
    white-space: nowrap;
}
.ticker-content span { font-size: 1rem; line-height: 1.5; color: var(--base-2); }
/* Separator: gold diamond, centered in the gap between two items */
.ticker-content span::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-inline-start: 2rem;
    vertical-align: middle;
    background: var(--accent);
    transform: rotate(45deg);
}
.ticker-content a { color: var(--base-2); text-decoration: none; }
.ticker-content a:hover { color: var(--accent); }

@keyframes najaf-ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
[dir="rtl"] .ticker-content { animation-name: najaf-ticker-rtl; }
@keyframes najaf-ticker-rtl {
    0%   { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

/* ===================================================================
   6. CONTENT AREAS — Tighter spacing
   =================================================================== */
/* Front page — no article padding/bg */
.home .inside-article,
.page-template-default .inside-article {
    background: transparent !important;
    box-shadow: none !important;
}

/* Tightened padding from GP default 96px */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation {
    padding: 16px 14px !important;
}

/* Front page needs zero padding */
.home .separate-containers .inside-article {
    padding: 0 !important;
}

/* Content containers */
.separate-containers .inside-article {
    border-radius: var(--najaf-radius);
    overflow: hidden;
}

/* Reduce spacing between GP containers */
.separate-containers .site-main > *:not(:first-child) {
    margin-top: 0.35rem;
}

/* Tighten grid gaps in card layouts */
.gb-grid-wrapper {
    gap: 0.75rem !important;
}

/* Remove excessive bottom margin before footer */
.site-main > :last-child {
    margin-bottom: 0 !important;
}

/* Front page — reduce GB container inner padding */
.home .gb-inside-container {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Single post — close gap between hero and content */
.single .gb-element-cbfb2688 {
    margin-bottom: 0 !important;
}
.single .gb-element-5bd40b80 {
    margin-top: 0 !important;
}

/* Widen post prose to match About page reading width.
   The GB content template caps .gb-element-bbf26f5d at 720px; lift it
   to 1172px (1200px container − 28px .inside-article padding). */
.single .gb-element-bbf26f5d {
    max-width: 1172px !important;
}

/* Reduce excessive margin from GP separate-containers */
.separate-containers .site-main > * {
    margin-bottom: 0 !important;
}

/* ===================================================================
   7. PAGE HERO SECTIONS
   =================================================================== */
.gb-element-8c8d8b5f,
.gb-element-78d302b0 {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 0 0 var(--najaf-radius-lg) var(--najaf-radius-lg) !important;
}

.gb-element-8c8d8b5f::after,
.gb-element-78d302b0::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(40,40,40,0.3), transparent);
    pointer-events: none;
    border-radius: 0 0 var(--najaf-radius-lg) var(--najaf-radius-lg);
}

/* "آخر المنشورات" section — reduce excessive top spacing */
.gb-element-f44477c5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
/* Hide empty spacer div inside section container */
.gb-element-f44477c5 > div:empty {
    display: none;
}

/* Section heading row (icon + title) — right-align for RTL */
.gb-element-7a2276e2 {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

/* Section heading text — styled with gold accent bar */
.gb-text-ce385660 {
    font-size: 1.35rem !important;
    font-weight: 700;
    color: var(--contrast);
    margin-bottom: 1rem !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
}
/* Gold accent bar before section heading */
.gb-text-ce385660::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 1.2em;
    background: linear-gradient(to bottom, var(--accent), var(--accent-2));
    border-radius: 3px;
    flex-shrink: 0;
}

/* ===================================================================
   8. POST CARDS — White, rounded, elevated with scale hover
   =================================================================== */
.gb-loop-item.gb-loop-item-bfca2c91 {
    background: var(--base) !important;
    border-radius: var(--najaf-radius) !important;
    overflow: hidden;
    transition: var(--najaf-transition);
    box-shadow: var(--najaf-shadow) !important;
}
.gb-loop-item.gb-loop-item-bfca2c91:hover {
    box-shadow: var(--najaf-shadow-hover) !important;
    transform: translateY(-3px);
}

/* Card content wrapper — contains category badge, image, title, meta */
.gb-loop-item-bfca2c91 .gb-element-aa1e1150 {
    background: var(--base) !important;
    border-radius: var(--najaf-radius) !important;
    padding: 0 !important;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Card image — homepage (<a> wrapping <img>) + archive (standalone <img>) */
.gb-loop-item-bfca2c91 .gb-element-aa1e1150 > a:has(img) {
    display: block;
    overflow: hidden;
    border-radius: var(--najaf-radius) var(--najaf-radius) 0 0;
    aspect-ratio: 16/9;
    order: 1;
}
.gb-loop-item-bfca2c91 .gb-element-7efc952d {
    overflow: hidden;
    border-radius: var(--najaf-radius) var(--najaf-radius) 0 0;
}
.gb-loop-item-bfca2c91 .gb-element-aa1e1150 > a:has(img) img,
.gb-loop-item-bfca2c91 .gb-element-7efc952d img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-in-out;
}
.gb-loop-item-bfca2c91:hover .gb-element-aa1e1150 > a:has(img) img,
.gb-loop-item-bfca2c91:hover .gb-element-7efc952d img {
    transform: scale(1.04);
}

/* Category badge — overlay on image, top-right (RTL) */
.gb-loop-item-bfca2c91 .gb-text-82bd38a2 {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 2;
    margin-bottom: 0 !important;
    order: 0;
}
.gb-loop-item-bfca2c91 .gb-text-82bd38a2 a {
    background-color: var(--contrast) !important;
    color: var(--accent) !important;
    border-radius: 50px !important;
    font-size: 0.65rem !important;
    padding: 0.2rem 0.55rem !important;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    line-height: 1.3;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    backdrop-filter: blur(4px);
}
.gb-loop-item-bfca2c91 .gb-text-82bd38a2 a:hover {
    background-color: var(--accent) !important;
    color: var(--contrast) !important;
}

/* Card title — below image, vertically centered */
.gb-loop-item-bfca2c91 .gb-text-8b8c54c7 {
    order: 2;
    padding: 0.75rem 0.85rem 0.35rem;
    min-height: 3.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.gb-loop-item-bfca2c91 .gb-text-8b8c54c7 a {
    font-size: 0.95rem;
    line-height: 1.4;
}
.gb-loop-item-bfca2c91 .gb-text-8b8c54c7 a {
    color: var(--contrast) !important;
    text-decoration: none;
    transition: var(--najaf-transition);
    line-height: 1.6;
}
.gb-loop-item-bfca2c91 .gb-text-8b8c54c7 a:hover {
    color: var(--accent) !important;
}

/* Card meta (date/author) — below title */
.gb-loop-item-bfca2c91 .gb-text-4483d13d {
    order: 3;
    padding: 0 0.85rem 0.65rem !important;
}
.gb-loop-item-bfca2c91 .gb-text-4483d13d,
.gb-loop-item-bfca2c91 .gb-text-4483d13d * {
    font-size: 0.78rem;
}

/* Front page hero card badges */
.gb-text-9dbddb04 {
    border-radius: 50px !important;
}

/* Cards without featured images — cream placeholder */
.gb-loop-item-bfca2c91 .gb-element-aa1e1150 > a:has(img):not(:has(img[src*='data:image'])):empty,
.gb-loop-item-bfca2c91 .gb-element-aa1e1150:not(:has(a > img)) {
    min-height: 120px;
    background: linear-gradient(135deg, var(--base-3) 0%, var(--base-2) 100%);
}

/* ===================================================================
   9. HERO POST — Front page featured
   =================================================================== */
.gb-element-c5c3024d {
    border-radius: var(--najaf-radius-lg) !important;
    overflow: hidden;
    position: relative;
}
.gb-element-c5c3024d::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 40%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}
.gb-element-c5c3024d > * {
    position: relative;
    z-index: 2;
}
.gb-element-c5c3024d h2,
.gb-element-c5c3024d h2 a,
.gb-element-c5c3024d .gb-text a {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.gb-element-c5c3024d p,
.gb-element-c5c3024d .gb-text:not(:has(a)) {
    color: rgba(255,255,255,0.9) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.gb-text-f7ae6ccf a {
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.gb-text-f7ae6ccf a:hover {
    color: var(--accent) !important;
}

/* ===================================================================
   10. SINGLE POST — Hero + Reading experience
   =================================================================== */
.single .site-main {
    max-width: none !important;
    margin: 0 auto;
    padding: 0;
}

/* Hero overlay */
.gb-element-cbfb2688 {
    background-color: var(--contrast) !important;
    color: var(--base-2) !important;
}

/* Featured image — the GB template forces aspect-ratio 1/1 + object-fit
   cover on the image itself. Above 767px the container's 16/9 ratio and
   the image's absolute positioning neutralize that, but on mobile those
   rules drop away and the square crops ~45% of the artwork's width.
   Let the image keep its natural ratio on mobile instead. */
@media (max-width: 767px) {
    .gb-media-ebbaefeb {
        aspect-ratio: auto !important;
        height: auto !important;
    }
}

/* Title cream */
.gb-text-9d5dd66f { color: var(--base-2) !important; }

/* Author area */
.gb-element-3cd3285e { color: var(--base-2) !important; }

/* Author name link gold */
.gb-text-fc6b2da1,
.gb-text-fc6b2da1 a { color: var(--accent) !important; }

/* Category badges on single hero */
.gb-text-f065b849 a {
    background: var(--accent) !important;
    color: var(--base) !important;
    border-radius: 50px !important;
    font-weight: 600;
}
.gb-text-f065b849 a:hover {
    background: var(--accent-2) !important;
}

/* Post content reading area */
.gb-element-bbf26f5d {
    max-width: 720px !important;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Post content wrapper */
.gb-element-5bd40b80 {
    padding: 1.5rem 1rem !important;
}

/* Post body text */
.dynamic-entry-content,
.entry-content {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--contrast-2);
}
.dynamic-entry-content h2,
.entry-content h2 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    color: var(--contrast);
}
.dynamic-entry-content p,
.entry-content p {
    margin-bottom: 1.15rem;
}

/* Post date */
.gb-text-b82af7fd { color: var(--contrast-3) !important; }

/* ===================================================================
   11. SINGLE POST NAV — Next/Prev
   =================================================================== */
.gb-element-34099acb,
.gb-element-f27387ae {
    background-color: var(--base) !important;
    border-radius: var(--najaf-radius-sm) !important;
    box-shadow: var(--najaf-shadow);
    overflow: hidden;
    transition: var(--najaf-transition);
}
.gb-element-34099acb:hover,
.gb-element-f27387ae:hover {
    box-shadow: var(--najaf-shadow-hover);
    transform: translateY(-2px);
}

.gb-element-92f0846d {
    margin-top: 0.75rem;
}

/* ===================================================================
   12. COMMENTS AREA — Modern card redesign
   =================================================================== */
.comments-area {
    max-width: 720px;
    margin: 0 auto;
    background: var(--base) !important;
    border-radius: var(--najaf-radius-lg) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    padding: 32px !important;
    overflow: hidden;
}

/* Comment reply title — navy with gold accent bar */
.comment-reply-title,
.comments-title {
    font-size: 1.2rem;
    color: var(--contrast);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    position: relative;
    font-weight: 700;
}
.comment-reply-title::after,
.comments-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
}

/* Comment form fields — full width, cream bg, gold focus */
.comment-form label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    color: var(--contrast);
    font-size: 0.88rem;
}
.comment-form .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
}
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--base-3) !important;
    background: var(--base-2) !important;
    border-radius: var(--najaf-radius-sm) !important;
    padding: 12px 14px !important;
    font-family: 'Mada', sans-serif;
    font-size: 0.92rem;
    color: var(--contrast-2);
    transition: var(--najaf-transition);
}
.comment-form textarea {
    min-height: 150px;
    resize: vertical;
}
.comment-form textarea:focus,
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus {
    border-color: var(--accent) !important;
    box-shadow: var(--najaf-gold-glow) !important;
    background: var(--base) !important;
    outline: none;
}
.comment-form textarea::placeholder,
.comment-form input::placeholder {
    color: var(--contrast-3);
    opacity: 0.7;
}

/* Comment form field spacing */
.comment-form p {
    margin-bottom: 1rem;
}

/* Submit button — gold bg, navy text, full width mobile */
/* Submit button — unified gold gradient system */
.comment-form input[type="submit"],
.comment-form .submit {
    background: linear-gradient(135deg, #d4b95e 0%, var(--accent) 50%, #b09545 100%) !important;
    color: var(--contrast) !important;
    border: none !important;
    padding: 0.65rem 1.8rem !important;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--najaf-radius) !important;
    font-family: 'Mada', sans-serif;
    cursor: pointer;
    transition: var(--najaf-transition);
    box-shadow: 0 3px 10px rgba(197,168,90,0.25);
}
.comment-form input[type="submit"]:hover,
.comment-form .submit:hover {
    background: linear-gradient(135deg, #b09545 0%, #9a8340 100%) !important;
    color: var(--contrast) !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(197,168,90,0.35);
}

/* Cookies consent checkbox — gold accent */
.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--contrast-3);
}
.comment-form-cookies-consent input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid var(--base-3);
    border-radius: 4px;
    background: var(--base-2);
    cursor: pointer;
    position: relative;
    margin-top: 2px;
    transition: var(--najaf-transition);
}
.comment-form-cookies-consent input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.comment-form-cookies-consent input[type="checkbox"]:checked::after {
    content: "\2713";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--contrast);
    font-size: 12px;
    font-weight: 700;
}
.comment-form-cookies-consent label {
    font-weight: 400 !important;
    color: var(--contrast-3) !important;
    font-size: 0.83rem !important;
    line-height: 1.5;
    margin-bottom: 0 !important;
}

/* Individual comments — card-like */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}
.comment-list .comment {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--base-3);
}
.comment-list .comment:last-child {
    border-bottom: none;
}

/* Comment body */
.comment-body {
    position: relative;
}

/* Avatar rounded */
.comment-list .avatar,
.comment-body .avatar {
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Author name gold */
.comment-author .fn,
.comment-author .fn a,
.comment-author b {
    color: var(--accent) !important;
    font-weight: 600;
    font-size: 0.95rem;
}
.comment-author .fn a:hover {
    color: var(--accent-2) !important;
}

/* Comment date — soft */
.comment-metadata,
.comment-metadata a {
    font-size: 0.8rem !important;
    color: var(--contrast-3) !important;
}
.comment-metadata a:hover {
    color: var(--accent) !important;
}

/* Reply link */
.comment-reply-link {
    font-size: 0.82rem;
    color: var(--accent) !important;
    font-weight: 600;
    padding: 4px 10px;
    border: 1px solid var(--accent);
    border-radius: 5px;
    display: inline-block;
}
.comment-reply-link:hover {
    background: var(--accent);
    color: var(--contrast) !important;
}

/* Nested replies — indented with gold right border (RTL) */
.comment-list .children {
    list-style: none;
    padding-right: 1.5rem;
    padding-left: 0;
    margin: 0;
    border-right: 2px solid var(--accent);
}

/* Cancel reply link */
.comment-reply-title small a {
    color: var(--accent) !important;
    font-size: 0.85rem;
    font-weight: 400;
}
.comment-reply-title small a:hover {
    color: var(--accent-2) !important;
}

/* ===================================================================
   13. PAGINATION — navy current, gold hover
   =================================================================== */
.gb-query-loop-pagination a,
.gb-query-loop-pagination .page-numbers,
.nav-links a,
.nav-links .page-numbers {
    border-radius: 6px !important;
    transition: var(--najaf-transition);
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid var(--base-3);
    background: var(--base);
    color: var(--contrast);
}
.gb-query-loop-pagination .page-numbers.current,
.nav-links .page-numbers.current {
    background: var(--contrast) !important;
    color: var(--base-2) !important;
    border-color: var(--contrast) !important;
}
.gb-query-loop-pagination a:hover,
.gb-query-loop-pagination .page-numbers:hover:not(.current),
.nav-links a:hover {
    background: var(--accent) !important;
    color: var(--contrast) !important;
    border-color: var(--accent) !important;
}

/* ===================================================================
   14. BLOCKQUOTES & PULL QUOTES
   =================================================================== */
blockquote, .wp-block-quote {
    border-right: 4px solid var(--accent);
    border-left: none;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    background: var(--base-2);
    border-radius: 0 8px 8px 0;
    color: var(--contrast);
    font-size: 1.05rem;
    font-style: normal;
}
blockquote cite, .wp-block-quote cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--contrast-3);
}
[dir="rtl"] blockquote, [dir="rtl"] .wp-block-quote {
    border-right: 4px solid var(--accent);
    border-left: none;
    border-radius: var(--najaf-radius-sm) 0 0 var(--najaf-radius-sm);
}
.wp-block-pullquote {
    border-top: 3px solid var(--accent);
    border-bottom: 3px solid var(--accent);
    padding: 1.5rem 0;
    text-align: center;
}
.wp-block-pullquote blockquote { border: none; background: transparent; }

/* ===================================================================
   15. CODE BLOCKS
   =================================================================== */
pre, .wp-block-code {
    background: var(--contrast);
    color: var(--base-2);
    border-radius: var(--najaf-radius-sm);
    padding: 1rem 1.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    overflow-x: auto;
    direction: ltr;
    text-align: left;
}
code {
    background: var(--base-3);
    padding: 0.15rem 0.4rem;
    font-size: 0.85em;
    border-radius: 3px;
}
pre code { background: transparent; padding: 0; }

/* ===================================================================
   16. FORMS & INPUTS — Design system consistency
   =================================================================== */
input[type="text"], input[type="email"], input[type="url"],
input[type="search"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"],
textarea, select {
    border-radius: var(--najaf-radius-sm) !important;
    font-family: 'Mada', sans-serif;
    transition: var(--najaf-transition);
    background: var(--base-2) !important;
    border: 1px solid var(--base-3) !important;
    padding: 10px 14px;
    color: var(--contrast-2);
    font-size: 0.92rem;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--accent) !important;
    box-shadow: var(--najaf-gold-glow) !important;
    background: var(--base) !important;
    outline: none;
}

/* ===================================================================
   UNIFIED BUTTON SYSTEM — Zero !important, proper specificity
   Primary: Gold gradient · Secondary: Navy · Tertiary: Olive
   =================================================================== */

/* Base: all buttons */
body button,
body input[type="submit"],
body .button,
body .wp-block-button__link {
    border-radius: var(--najaf-radius);
    font-family: 'Mada', sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: var(--najaf-transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    line-height: 1.4;
}

/* PRIMARY — Gold gradient, navy text */
body input[type="submit"],
body button[type="submit"],
body .wp-block-button__link,
body .gb-button.gb-button-text,
body .button.is-primary,
body .najaf-form-submit {
    background: linear-gradient(135deg, #d4b95e 0%, var(--accent) 50%, #b09545 100%);
    color: var(--contrast);
    border: none;
    padding: 0.65rem 1.8rem;
    box-shadow: 0 2px 8px rgba(197,168,90,0.25);
}
body input[type="submit"]:hover,
body button[type="submit"]:hover,
body .wp-block-button__link:hover,
body .gb-button.gb-button-text:hover,
body .button.is-primary:hover,
body .najaf-form-submit:hover {
    background: linear-gradient(135deg, #b09545 0%, #9a8340 100%);
    color: var(--contrast);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(197,168,90,0.35);
}
body input[type="submit"]:active,
body button[type="submit"]:active,
body .wp-block-button__link:active,
body .gb-button.gb-button-text:active,
body .button.is-primary:active,
body .najaf-form-submit:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(197,168,90,0.2);
}

/* PRIMARY focus-visible — accessibility ring */
body input[type="submit"]:focus-visible,
body button[type="submit"]:focus-visible,
body .wp-block-button__link:focus-visible,
body .gb-button.gb-button-text:focus-visible,
body .button.is-primary:focus-visible,
body .najaf-form-submit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    box-shadow: var(--najaf-gold-glow);
}

/* SECONDARY — Navy bg, cream text */
body .wp-block-button.is-style-outline .wp-block-button__link,
body .button.is-secondary {
    background: var(--contrast);
    color: var(--base-2);
    border: none;
    padding: 0.65rem 1.8rem;
    box-shadow: 0 2px 8px rgba(40,40,40,0.2);
}
body .wp-block-button.is-style-outline .wp-block-button__link:hover,
body .button.is-secondary:hover {
    background: #333333;
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(40,40,40,0.3);
}
body .wp-block-button.is-style-outline .wp-block-button__link:active,
body .button.is-secondary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(40,40,40,0.15);
}

/* TERTIARY — Olive bg, cream text */
body .button.is-tertiary {
    background: var(--accent-2);
    color: var(--base-2);
    border: none;
    padding: 0.65rem 1.8rem;
}
body .button.is-tertiary:hover {
    background: #4a4a4a;
    color: var(--base);
    transform: translateY(-1px);
}
body .button.is-tertiary:active {
    transform: translateY(0);
}

/* Homepage hero CTA — override GB inline styles to match button system */
.gb-text-9dbddb04 {
    background: linear-gradient(135deg, #d4b95e 0%, var(--accent) 50%, #b09545 100%) !important;
    color: var(--contrast) !important;
    border-radius: var(--najaf-radius) !important;
    padding: 0.65rem 1.8rem !important;
    font-size: 0.95rem !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(197,168,90,0.25);
    transition: var(--najaf-transition);
}
.gb-text-9dbddb04:hover {
    background: linear-gradient(135deg, #b09545 0%, #9a8340 100%) !important;
    color: var(--contrast) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(197,168,90,0.35);
}

/* Read more links */
.read-more,
a.read-more,
.entry-content .more-link {
    color: var(--accent) !important;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.read-more:hover,
a.read-more:hover,
.entry-content .more-link:hover {
    color: var(--accent-2) !important;
}

/* Tag links */
.tagcloud a,
.tag-links a,
.tags-links a,
.wp-block-tag-cloud a,
.post-tags a,
.entry-meta .cat-links a,
.entry-meta .tags-links a {
    background: var(--base-2) !important;
    color: var(--contrast-2) !important;
    border: 1px solid var(--base-3) !important;
    border-radius: 50px !important;
    padding: 4px 10px !important;
    font-size: 0.8rem !important;
    display: inline-block;
    font-weight: 500;
}
.tagcloud a:hover,
.tag-links a:hover,
.tags-links a:hover,
.wp-block-tag-cloud a:hover,
.post-tags a:hover,
.entry-meta .cat-links a:hover,
.entry-meta .tags-links a:hover {
    background: var(--accent) !important;
    color: var(--contrast) !important;
    border-color: var(--accent) !important;
}

/* Category links in meta */
.cat-links a {
    color: var(--accent) !important;
    font-weight: 600;
}
.cat-links a:hover {
    color: var(--accent-2) !important;
}

/* ===================================================================
   16b. TABLE STYLES — Clean, alternating rows
   =================================================================== */
table,
.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    border-radius: var(--najaf-radius-sm);
    overflow: hidden;
    border: 1px solid var(--base-3);
}
table th,
.wp-block-table th {
    background: var(--contrast) !important;
    color: var(--base-2) !important;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: right;
    border-bottom: 2px solid var(--accent);
}
table td,
.wp-block-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--base-3);
    font-size: 0.9rem;
}
table tbody tr:nth-child(even),
.wp-block-table tbody tr:nth-child(even) {
    background: var(--base-2);
}
table tbody tr:hover,
.wp-block-table tbody tr:hover {
    background: rgba(197,168,90,0.06);
}

/* ===================================================================
   17. FOOTER — Centered layout matching reference design
   Structure: footer > .wp-block-group (outer flex wrapper)
     ├── .wp-block-group (nav+logo row)
     ├── .gb-element-0e5018eb (social icons)
     ├── .gb-element-4ba21f66 (copyright)
     └── .gb-element-eb22c4f2 (privacy/terms)
   =================================================================== */

/* Footer wrapper — dark background, gold accent border */
.site-footer {
    background-color: var(--contrast) !important;
    margin-top: 0 !important;
    border-top: 2px solid var(--accent);
}

/* Footer text colors */
.site-footer,
.site-footer p,
.site-footer .widget,
.site-footer .widget-title {
    color: var(--base-2) !important;
}

/* SVG icons — cream, gold on hover */
.site-footer svg,
.site-footer .gb-icon svg {
    color: var(--base-2) !important;
    fill: var(--base-2);
}
.site-footer svg:hover,
.site-footer a:hover svg,
.site-footer .gb-icon a:hover svg {
    color: var(--accent) !important;
    fill: var(--accent);
}

/* Footer links — grey, gold on hover */
.site-footer a {
    transition: var(--najaf-transition);
    color: var(--base-3) !important;
}
.site-footer a:hover {
    color: var(--accent) !important;
}

/* --- Outer flex wrapper: column layout, centered, constrained --- */
footer.gb-element-c471d0fb {
    padding: 2.5rem 1.5rem 1.5rem !important;
}
footer.gb-element-c471d0fb > .wp-block-group {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
}

/* --- Top row: Logo + Nav — stack vertically, centered --- */
footer.gb-element-c471d0fb .wp-container-core-group-is-layout-480676bd {
    flex-direction: column-reverse !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    flex-wrap: nowrap !important;
}

/* Logo image — centered, larger for visual weight */
.site-footer figure.wp-block-image {
    margin: 0 !important;
    text-align: center;
}
.site-footer figure.wp-block-image img {
    width: 80px !important;
    height: auto !important;
    filter: invert(69%) sepia(67%) saturate(384%) hue-rotate(9deg) brightness(91%) contrast(86%)
           drop-shadow(0 1px 4px rgba(197,168,90,0.35));
}

/* Nav links container — centered text */
.gb-element-cf54df02 {
    text-align: center;
}

/* 'القائمة' heading — gold, with subtle underline */
.gb-element-cf54df02 .gb-text-3f17a632 {
    color: var(--accent) !important;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--accent);
    display: inline-flex;
}

/* Nav link items — stack with gap */
.gb-element-cf54df02 p.gb-text + p.gb-text {
    margin-top: 0.3rem;
}
.gb-element-cf54df02 p.gb-text a {
    font-size: 0.9rem;
}

/* --- Social icons row — centered with gap --- */
.gb-element-0e5018eb {
    justify-content: center !important;
    width: 100%;
    gap: 1rem !important;
    padding-top: 0.5rem;
}

/* Social icon link — pill button style */
.gb-element-0e5018eb > a {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(252, 251, 248, 0.08);
    border: 1px solid rgba(252, 251, 248, 0.12);
    border-radius: 50%;
    transition: var(--najaf-transition);
}
.gb-element-0e5018eb > a:hover {
    background: var(--accent);
    border-color: var(--accent);
}
.gb-element-0e5018eb > a:hover svg {
    color: var(--contrast) !important;
    fill: var(--contrast) !important;
}
.gb-element-0e5018eb svg {
    width: 18px !important;
    height: 18px !important;
}

/* --- Divider between top section and bottom bar --- */
.gb-element-4ba21f66 {
    width: 100% !important;
    text-align: center !important;
    padding-top: 1.25rem !important;
    border-top: 1px solid rgba(252, 251, 248, 0.1);
    flex-basis: 100% !important;
    flex-shrink: 0 !important;
}
.gb-element-4ba21f66 p,
.gb-element-4ba21f66 .gb-text-cb2765eb {
    font-size: 0.85rem !important;
    color: rgba(231, 230, 228, 0.55) !important;
    line-height: 1.6;
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- Privacy / Terms links — centered inline --- */
.gb-element-eb22c4f2 {
    width: 100% !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}
.gb-element-eb22c4f2 p {
    font-size: 0.85rem !important;
}
.gb-element-eb22c4f2 p + p::before {
    content: '·';
    margin-left: 0.5rem;
    color: rgba(231, 230, 228, 0.35);
}
.gb-element-eb22c4f2 a {
    color: rgba(231, 230, 228, 0.55) !important;
    font-size: 0.85rem;
}
.gb-element-eb22c4f2 a:hover {
    color: var(--accent) !important;
}

/* Footer copyright/info bar (GP native — fallback) */
.site-info {
    padding: 10px 0 !important;
    font-size: 0.85rem;
    color: var(--base-3);
    text-align: center;
    border-top: 1px solid rgba(252,251,248,0.08);
}
.site-info a {
    color: var(--accent) !important;
}
.site-info a:hover {
    color: var(--base-2) !important;
}

/* Inside footer */
.inside-site-info {
    max-width: 1200px;
    margin: 0 auto;
}

/* ===================================================================
   18. BACK TO TOP — GP built-in only, positioned bottom-left for RTL
   =================================================================== */
.generate-back-to-top {
    background: var(--accent) !important;
    color: var(--contrast) !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
    font-size: 18px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15) !important;
    transition: var(--najaf-transition) !important;
    /* Position bottom-left for RTL */
    right: auto !important;
    left: 2rem !important;
}
.generate-back-to-top:hover,
.generate-back-to-top:focus {
    background: var(--accent-2) !important;
    color: var(--base-2) !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;
}

/* ===================================================================
   19. WIDGETS
   =================================================================== */
.widget-title {
    color: var(--contrast);
    font-size: 1.05rem;
    font-weight: 700;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* ===================================================================
   20. BREADCRUMBS
   =================================================================== */
.inside-article .entry-header .breadcrumbs { font-size: 0.85rem; color: var(--contrast-3); }
.inside-article .entry-header .breadcrumbs a { color: var(--accent); }
.inside-article .entry-header .breadcrumbs a:hover { color: var(--accent-2); }

/* ===================================================================
   21. ENTRY META
   =================================================================== */
.entry-meta { font-size: 0.85rem; color: var(--contrast-3); }
.entry-meta a { color: var(--accent); }
.entry-meta a:hover { color: var(--accent-2); }

/* Subtle section divider between meta and content */
.entry-meta + .entry-content {
    border-top: 1px solid var(--base-3);
    padding-top: 1.25rem;
    margin-top: 0.75rem;
}

/* ===================================================================
   22. SEARCH & ARCHIVE RESULTS — Not a generic list
   =================================================================== */
.search-results .inside-article,
.archive:not(.home) .inside-article {
    background: var(--base) !important;
    border-radius: var(--najaf-radius) !important;
    margin-bottom: 0.5rem;
    box-shadow: var(--najaf-shadow);
    transition: var(--najaf-transition);
}
.search-results .inside-article:hover,
.archive:not(.home) .inside-article:hover {
    box-shadow: var(--najaf-shadow-hover);
    transform: translateY(-2px);
}
.search-results .entry-title a,
.archive .entry-title a { color: var(--contrast); }
.search-results .entry-title a:hover,
.archive .entry-title a:hover { color: var(--accent); }

/* Archive page header — styled */
.page-header {
    background: var(--contrast) !important;
    color: var(--base-2) !important;
    border-radius: var(--najaf-radius);
    padding: 24px 28px !important;
    margin-bottom: 1rem;
}
.page-header .page-title {
    color: var(--base-2) !important;
    font-size: 1.3rem;
    margin: 0;
}
.page-header .archive-description {
    color: var(--base-3);
    font-size: 0.9rem;
}

/* Search result cards — cream placeholder for missing images */
.search .gb-loop-item-bfca2c91 .gb-element-7efc952d:not(:has(img)) {
    min-height: 140px;
    background: linear-gradient(135deg, var(--base-3) 0%, var(--base-2) 100%);
    position: relative;
}

/* ===================================================================
   23. PRAYER TIMES
   The prayer page (51703) carries its own design: prayer/prayer.css,
   built by tools/prayer-page in the repo. These rules only open the
   page frame so the design's background runs edge to edge between
   the site header and footer, as the design fills the whole screen.
   =================================================================== */
.najaf-prayer-page #primary.content-area {
    max-width: none;
    width: 100%;
    min-width: 0; /* flex item: never let the table widen the page */
    padding-inline: 0;
}
.najaf-prayer-page.separate-containers .site-main { margin: 0 !important; }
.najaf-prayer-page.separate-containers .inside-article {
    padding: 0 !important;
    border-radius: 0;
}

/* ===================================================================
   24. SECTION TITLES — Gradient icon bar
   =================================================================== */
.section-title, .gb-headline.section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.3rem;
    color: var(--contrast);
    margin-bottom: 0.35rem;
}
.section-icon {
    width: 8px;
    height: 28px;
    background: linear-gradient(to bottom, var(--accent), var(--accent-2));
    border-radius: 4px;
    display: inline-block;
    flex-shrink: 0;
}

.gb-loop-item,
.qa-card,
.inside-article {
    box-shadow: none !important;
}

/* ===================================================================
   25. FEATURED LAST POST (Archive)
   =================================================================== */
.gb-query-loop .gb-loop-item:last-child:nth-child(3n+1) {
    max-width: 33.333%;
}

/* ===================================================================
   26. GP SPECIFIC OVERRIDES — Clean generic WP look
   =================================================================== */
/* GP navigation spacing */
.main-navigation .navigation-search input[type="search"] {
    background: var(--base-2) !important;
    border: none !important;
    padding: 10px 14px !important;
    border-radius: var(--najaf-radius-sm) !important;
}

/* GP sidebar widgets */
.widget ul li {
    padding: 8px 0;
    border-bottom: 1px solid var(--base-3);
}
.widget ul li:last-child {
    border-bottom: none;
}
.widget ul li a {
    color: var(--contrast-2);
}
.widget ul li a:hover {
    color: var(--accent);
}

/* ===================================================================
   QA ARCHIVE PAGES — Constrained, card-based Q&A layout
   =================================================================== */

/* 1. Container width — comfortable reading width, centered */
body.tax-qa_category .site-content .content-area {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Hide duplicate GP default archive title (GB hero already provides it) */
body.tax-qa_category .page-header {
    display: none !important;
}

/* overflow:hidden for .gb-element-8c8d8b5f now applied globally in section 7 */

/* 2. Q&A Card styling — flat, no card container effect */
body.tax-qa_category .qa-card {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 2rem 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: none !important;
}

/* Question area — flat, distinguished by gold right-border only */
body.tax-qa_category .qa-question {
    background: transparent !important;
    padding: 1.2rem 1.5rem !important;
    border-radius: 0 !important;
    border-right: 4px solid var(--accent) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--contrast) !important;
    line-height: 1.8 !important;
    margin-bottom: 1rem !important;
}

/* Answer area — white with subtle styling */
body.tax-qa_category .qa-answer {
    padding: 1.2rem 1.5rem !important;
    border-radius: var(--najaf-radius) !important;
    border-right: 4px solid var(--accent-2) !important;
    line-height: 1.9;
}
body.tax-qa_category .qa-answer .dynamic-entry-content {
    font-size: 1rem;
    color: var(--contrast-2);
}

/* 3. Typography — السؤال and الجواب labels as section headers */
body.tax-qa_category .gb-text-8286e098 {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--accent) !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.35rem;
    display: block;
    letter-spacing: 0.02em;
}
body.tax-qa_category .gb-text-1be05109 {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--contrast) !important;
    margin-bottom: 0.5rem !important;
    margin-top: 1.5rem !important;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--accent);
    display: inline-block;
    letter-spacing: 0.02em;
}

/* Article spacing — clean gaps between Q&A cards */
body.tax-qa_category article.dynamic-content-template {
    margin-bottom: 0;
    padding: 0;
}
body.tax-qa_category article.dynamic-content-template + article.dynamic-content-template {
    margin-top: 0;
}


/* ===================================================================
   RESPONSIVE BREAKPOINTS
   =================================================================== */

@media (max-width: 1024px) {
    .ticker-wrap { margin: 0.5rem 1rem; }
    .separate-containers .inside-article { padding: 20px 16px !important; }
    .gb-query-loop .gb-loop-item:last-child:nth-child(3n+1) { max-width: none; }
}

/* Mobile card layout fixes merged into main 768px media query below */

@media (max-width: 768px) {
    .inside-header { padding: 6px 12px !important; gap: 0.5rem; }

    /* Search bar: compact on tablet/mobile */
    .najaf-header-search {
        max-width: none;
        height: 36px;
    }
    .site-header .najaf-header-search .najaf-header-search__input {
        font-size: 0.78rem;
        padding: 4px 10px !important;
    }
    .site-header .najaf-header-search .najaf-header-search__input::placeholder {
        font-size: 0.72rem;
    }

    /* Fix horizontal overflow on mobile */
    .site-content,
    .inside-article,
    .gb-element-f44477c5,
    .gb-element-db08f3d6 {
        max-width: 100% !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    .gb-element-f44477c5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .gb-looper-e8a19db8 {
        max-width: 100% !important;
    }
    /* Ensure category badge fits within card on mobile */
    .gb-loop-item-bfca2c91 .gb-text-82bd38a2 {
        right: 8px !important;
        top: 8px !important;
        max-width: calc(100% - 16px);
    }
    .gb-loop-item-bfca2c91 .gb-text-82bd38a2 a {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.5rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Ticker mobile — compact, flush, no gaps.
       position:sticky and top set in base rule (line ~568).
       Do NOT use !important on top — must not override admin-bar offsets. */
    .ticker-outer {
        padding: 0 0.75rem !important;
    }
    .ticker-wrap {
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 36px !important;
    }
    .ticker-label {
        padding: 4px 10px !important;
        font-size: 0.75rem !important;
        min-height: 36px !important;
        border-radius: 0 6px 6px 0 !important;
    }
    .ticker-track {
        min-height: 36px !important;
    }
    .ticker-content span {
        font-size: 0.8rem !important;
        line-height: 1.4;
    }

    /* Mobile padding */
    .separate-containers .inside-article {
        padding: 16px !important;
    }

    /* GP Premium handles sticky via JS on #site-navigation.
       On mobile we disable GP's JS sticky classes so the nav scrolls naturally. */
    .main-navigation.is_stuck,
    .main-navigation.navigation-stick {
        position: relative !important;
        top: auto !important;
    }

    .separate-containers .comments-area,
    .separate-containers .page-header { padding: 16px 12px !important; }

    .home .separate-containers .inside-article { padding: 0 !important; }

    .gb-element-5bd40b80 { padding: 0.75rem 0 !important; }
    .gb-element-bbf26f5d { padding: 0 !important; }

    .generate-back-to-top {
        left: 1rem !important;
        bottom: 1rem !important;
        width: 42px !important;
        height: 42px !important;
        line-height: 42px !important;
    }

    blockquote, .wp-block-quote { padding: 0.75rem 1rem; margin: 1rem 0; }

    /* Slideout mobile — tighter spacing */
    .slideout-navigation .main-nav > ul > li.menu-item-has-children > a {
        font-size: 0.84rem;
        padding: 0.5rem 0.85rem;
    }
    .slideout-navigation .main-nav ul ul li a {
        font-size: 0.82rem;
        padding: 0.4rem 1.5rem 0.4rem 0.85rem;
    }

    /* Comments mobile — full width submit */
    .comments-area {
        padding: 20px 16px !important;
        border-radius: var(--najaf-radius) !important;
    }
    .comment-form input[type="submit"],
    .comment-form .submit {
        width: 100%;
        text-align: center;
    }

    /* Search form full width on mobile */
    .site-header .search-form,
    .inside-header .search-form {
        max-width: none;
        width: 100%;
    }

    /* QA archive mobile — tighter cards */
    body.tax-qa_category .site-content .content-area {
        padding: 0 1rem;
    }
    body.tax-qa_category .qa-card {
        padding: 1.25rem !important;
        border-radius: var(--najaf-radius) !important;
    }
    body.tax-qa_category .qa-question,
    body.tax-qa_category .qa-answer {
        padding: 1rem !important;
}

    /* Issue 2 Fix: Reduce mobile whitespace — aggressive padding/margin reduction
       for a dense, efficient mobile reading experience. */
    .separate-containers .site-main {
        margin: 10px 0 !important;
    }
    .gb-inside-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .page-header {
        padding: 16px 12px !important;
    }
    .entry-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        font-size: 0.95rem;
    }
    /* Category/taxonomy archive index — tighter letter groups */
    .alphabetical-category-index .letter-group {
        margin-bottom: 20px;
        padding-bottom: 12px;
    }
    .alphabetical-category-index .letter-heading {
        font-size: 2em;
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .ticker-label { font-size: 0.72rem; padding: 0 0.5rem; }
    .gb-loop-item-bfca2c91 .gb-element-aa1e1150 { padding: 0.65rem !important; }
    .comments-area { padding: 16px 12px !important; }
    .comment-reply-title, .comments-title { font-size: 1.05rem; }

    /* Header: hide brand name on phones — make room for search */
    .najaf-brand-name {
        display: none;
    }
    .najaf-header-search {
        max-width: none;
    }
}

/* Bug Fix: Header clipping on very small screens (iPhone 5/SE, 320px).
   Shrink logo, reduce title font, tighten padding so all elements fit. */
@media (max-width: 360px) {
    .inside-header {
        padding: 6px 8px !important;
        gap: 4px;
    }
    .site-header .header-image.is-logo-image {
        max-width: 40px;
    }
    .najaf-brand-name {
        display: none; /* Hide brand text on very small screens to make room for search */
    }
    .najaf-header-search {
        max-width: none;
        height: 34px;
    }
    .site-header .najaf-header-search .najaf-header-search__input {
        padding: 4px 10px !important;
        font-size: 0.78rem;
    }
    .site-header .najaf-header-search .najaf-header-search__btn {
        padding: 0 10px;
    }
    #mobile-menu-control-wrapper .menu-bar-items {
        gap: 2px;
    }
    #mobile-menu-control-wrapper .menu-bar-item {
        padding: 0 4px;
    }
    .menu-toggle {
        padding: 0 6px !important;
    }
}

/* ===================================================================
   CATEGORY INDEX BUTTONS — Premium outlined pill system
   Replaces muddy brown (#665c43) from Customizer CSS.
   Used on فهرس المسائل + فهرس الإشكالات pages.
   =================================================================== */

/* Letter group container */
body .alphabetical-category-index .letter-group {
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(40,40,40,0.12);
    padding-bottom: 1.25rem;
}

/* Letter heading — Navy with gold underline accent */
body .alphabetical-category-index .letter-heading {
    font-size: 2.2em;
    font-weight: 800;
    color: var(--contrast);
    margin-bottom: 1rem;
    font-family: 'Mada', sans-serif;
    position: relative;
    display: inline-block;
}
body .alphabetical-category-index .letter-heading::after {
    content: '';
    position: absolute;
    bottom: -4px;
    right: 0;
    width: 100%;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
}

/* Buttons container */
.alphabetical-category-index .buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

/* Category pill buttons — Outlined Navy variant */
body .alphabetical-category-index .qa-category-button,
body .alphabetical-category-index .rebuttals-category-button {
    display: inline-block;
    background: transparent;
    color: var(--contrast);
    padding: 0.55rem 1.25rem;
    border-radius: 50px;
    border: 2px solid var(--contrast);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    font-family: 'Mada', sans-serif;
    transition: var(--najaf-transition);
    line-height: 1.4;
}

/* Hover — Gold fill with lift */
body .alphabetical-category-index .qa-category-button:hover,
body .alphabetical-category-index .rebuttals-category-button:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--contrast);
    transform: translateY(-2px);
    box-shadow: var(--najaf-shadow-hover, 0 4px 12px rgba(197,168,90,0.3));
}

/* Focus-visible for keyboard nav */
body .alphabetical-category-index .qa-category-button:focus-visible,
body .alphabetical-category-index .rebuttals-category-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Active press state */
body .alphabetical-category-index .qa-category-button:active,
body .alphabetical-category-index .rebuttals-category-button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ===================================================================
   MIGRATED FROM WP CUSTOMIZER — Consolidated here for single-source CSS.
   The Customizer Additional CSS has been cleared.
   =================================================================== */

/* --- Navigation underline hover effect (desktop) --- */
@media (min-width: 992px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        display: block;
        width: 0;
        height: 3px;
        border-radius: 2px;
        background-color: var(--accent);
        transition: all 300ms ease-in-out;
    }
}
.main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .menu-item > a:focus::after,
.main-navigation .menu > .current-menu-item > a::after {
    width: 24px;
}

/* --- Remove bullets on WP category list block --- */
.wp-block-categories {
    list-style: none;
    margin-left: unset;
}

/* --- Desktop: remove search icon right padding --- */
@media (min-width: 992px) {
    .main-navigation .menu-bar-item > a {
        padding-right: 0;
    }
}

/* --- Post card hover animation (desktop) --- */
/* Post card hover — REMOVED competing translateY(-6px) rule.
   The GB-specific .gb-loop-item-bfca2c91:hover rule (Section 8)
   handles card hover with translateY(-3px) scale(1.01). */

/* --- LiteSpeed lazy-load fade transitions --- */
img[data-lazyloaded] {
    opacity: 0;
}
img.litespeed-loaded {
    transition: opacity 0.5s linear 0.2s;
    opacity: 1;
}

/* ===================================================================
   PLETHORA TABS — Premium Navy/Gold palette
   Replaces muddy brown #665c43 from former Customizer CSS.
   =================================================================== */

/* Tab bar container */
.plethoraplugins-tabs-container .plethoraplugins-tabs > ul {
    margin-bottom: 0 !important;
    padding-right: 0 !important;
    gap: 4px !important;
    border-bottom: none !important;
    justify-content: center !important;
}

/* Tab button spacing */
.plethoraplugins-tabs > ul > li {
    margin: 2px !important;
}

/* Tab buttons — Navy pill style */
.plethoraplugins-tabs > ul > li > a {
    background: var(--contrast) !important;
    color: var(--base-2) !important;
    border: 2px solid var(--contrast) !important;
    border-bottom: none !important;
    border-radius: var(--najaf-radius-sm) var(--najaf-radius-sm) 0 0 !important;
    font-family: 'Mada', sans-serif;
    font-weight: 600;
    transition: var(--najaf-transition);
}

/* Active tab — Gold accent border, white bg */
.plethoraplugins-tabs > ul > li > a.active {
    background: var(--base) !important;
    color: var(--contrast) !important;
    border-color: var(--accent) !important;
    border-bottom-color: var(--base) !important;
}

/* Hover on inactive tabs */
.plethoraplugins-tabs > ul > li > a:not(.active):hover {
    background: rgba(40,40,40,0.85) !important;
    border-color: var(--accent) !important;
}

/* Tab content area */
.plethoraplugins-tabs--content > .js-plethoraplugins-tab-panel {
    border: none !important;
    background: transparent !important;
}

/* Fix whitespace in tab content */
.plethoraplugins-tabs--content,
.js-plethoraplugins-tab-panel {
    height: auto !important;
    min-height: initial !important;
}
.js-plethoraplugins-tab-panel figure.wp-block-image {
    margin-bottom: 0;
}

/* Mobile: horizontal scroll for tabs */
@media (orientation: portrait) {
    .plethoraplugins-tabs > ul.js-plethoraplugins-tabs {
        flex-wrap: wrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
    }
}

/* ===================================================================
   RTL-SPECIFIC FIXES
   =================================================================== */
[dir="rtl"] .ticker-content span { margin-left: 0; margin-right: 2rem; }
[dir="rtl"] .ticker-label { border-radius: var(--najaf-radius-sm) 0 0 var(--najaf-radius-sm); }
[dir="rtl"] .slideout-navigation .main-nav ul li a { text-align: right; }
[dir="rtl"] .slideout-navigation .main-nav ul li[class*="current-menu-"] > a {
    border-right: none !important;
    border-left: none !important;
}
[dir="rtl"] .comment-list .children {
    padding-right: 1.5rem;
    padding-left: 0;
    border-right: 2px solid var(--accent);
    border-left: none;
}
[dir="rtl"] .comment-reply-title::after,
[dir="rtl"] .comments-title::after {
    right: 0;
    left: auto;
}
[dir="rtl"] input[type="search"] { padding-right: 1rem; }
[dir="rtl"] .generate-back-to-top {
    left: 2rem !important;
    right: auto !important;
}
[dir="rtl"] blockquote, [dir="rtl"] .wp-block-quote {
    border-right: 4px solid var(--accent);
    border-left: none;
    border-radius: var(--najaf-radius-sm) 0 0 var(--najaf-radius-sm);
}
[dir="rtl"] table th,
[dir="rtl"] .wp-block-table th,
[dir="rtl"] table td,
[dir="rtl"] .wp-block-table td {
    text-align: right;
}

/* ===================================================================
   PRINT STYLES
   =================================================================== */
@media print {
    .site-header, .site-footer, .ticker-wrap,
    .generate-back-to-top,
    .gb-element-92f0846d, .comments-area { display: none !important; }

    .dynamic-entry-content, .entry-content {
        font-size: 12pt;
        line-height: 1.6;
        color: #000;
    }
}

/* ===================================================================
   CONTACT FORM
   =================================================================== */
.najaf-contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.najaf-form-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--contrast-2);
    font-size: 1rem;
}

.najaf-form-field .required {
    color: var(--accent);
}

.najaf-form-field input[type="text"],
.najaf-form-field input[type="email"],
.najaf-form-field textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--contrast-3);
    border-radius: var(--najaf-radius, 10px);
    background: var(--base-2);
    color: var(--contrast-2);
    font-family: inherit;
    font-size: 1rem;
    transition: var(--najaf-transition);
}

.najaf-form-field input:focus,
.najaf-form-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--najaf-gold-glow, 0 0 0 3px rgba(197,168,90,0.2));
}

/* Contact form submit — inherits from unified button system above */
.najaf-form-submit {
    align-self: flex-start;
}

.najaf-form-msg {
    padding: 0.9rem 1.2rem;
    border-radius: var(--najaf-radius, 10px);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.najaf-form-success {
    background: rgba(92, 92, 92, 0.08);
    color: var(--accent-2);
    border: 1px solid rgba(92, 92, 92, 0.25);
}

.najaf-form-error {
    background: rgba(180, 60, 60, 0.08);
    color: #8B2020;
    border: 1px solid rgba(180, 60, 60, 0.25);
}


/* ===================================================================
   SEARCH MODAL — Navy scrim + RTL icon fix
   =================================================================== */
.gp-modal .gp-modal__overlay {
    background-color: rgba(40, 40, 40, 0.9) !important;
}
.search-modal-fields {
    flex-direction: row-reverse;
}

/* ===================================================================
   OFF-CANVAS CLOSE BUTTON — Improve visibility
   =================================================================== */
.slideout-navigation .slideout-exit {
    font-size: 1.5rem;
    background: rgba(197,168,90,0.1) !important;
    border: 1px solid rgba(197,168,90,0.25) !important;
}

/* ===================================================================
   ARCHIVE PAGE — Tighter whitespace
   =================================================================== */
.archive:not(.home) .page-header { margin-bottom: 1rem !important; }
.archive:not(.home) .site-content { padding-top: 0.5rem; }

/* ===================================================================
   ARCHIVE GRID — Prevent orphaned single card in last row
   =================================================================== */
.archive .gb-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
    .archive .gb-grid-wrapper {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   POST 133 FONT OVERRIDE — GenerateBlocks hardcoded font-family
   =================================================================== */
.gb-element-post-133 *,
[class*="gb-element"] .gb-headline {
    font-family: 'Mada', sans-serif !important;
}


/* ===================================================================
   تواصل معنا (CONTACT US) — Style link as proper CTA button
   =================================================================== */
a.gb-text.gb-text-dd498259 {
    display: inline-block;
    background: var(--contrast);
    color: var(--base-2) !important;
    padding: 0.65rem 1.8rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none !important;
    transition: var(--najaf-transition);
    box-shadow: var(--najaf-shadow);
}
a.gb-text.gb-text-dd498259:hover {
    background: var(--accent);
    color: var(--contrast) !important;
    box-shadow: var(--najaf-shadow-hover);
    transform: translateY(-2px);
}


/* ===================================================================
   SPECTRA/UAG ROGUE COLOR OVERRIDES
   Neutralize off-brand colors from uploads/uag-plugin/custom-style-blocks.css
   =================================================================== */
.uagb-highlight {
    color: var(--accent) !important;
}
.uagb-blockquote__tweet-style-classic a,
.uagb-blockquote__tweet-style-bubble a {
    background-color: var(--accent) !important;
    color: var(--contrast) !important;
}
.uagb-counter-circle__progress,
.uagb-counter-bar__progress {
    stroke: var(--accent) !important;
    background-color: var(--accent) !important;
}
.uagb-counter-circle__background,
.uagb-counter-bar__background {
    stroke: var(--base-3) !important;
    background-color: var(--base-3) !important;
}
.uagb-timeline__line__inner {
    background-color: var(--accent) !important;
}
.uagb-post__taxonomy.highlighted {
    background: var(--contrast) !important;
    color: var(--base-2) !important;
}

.entry-content p,
.entry-content li,
.entry-content blockquote,
.entry-content td,
.page-content p,
.comment-content p {
    text-align: justify;
}

/* ===================================================================
   SPLASH / LOADING SCREEN
   =================================================================== */
#najaf-splash {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fcfbf8;
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
}
@keyframes najaf-pulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
}
@media (max-width: 768px) {
    #najaf-splash .najaf-splash-logo,
    #najaf-splash p {
        display: none;
    }
    #najaf-splash .najaf-splash-bg {
        opacity: 1 !important;
    }
}
/* ===================================================================
   RELIGIOUS PRESS (الصحافة الدينية)
   Landing page + section archives. Markup: functions.php §13.
   =================================================================== */
.najaf-press {
    --press-ink: #282828;          /* dark surfaces — stays dark in both themes */
    --press-on-ink: #fcfbf8;
    --press-on-ink-muted: #cfcdc8;
    --press-gold-text: #866a1e;    /* gold that passes contrast as text on cream */
    --press-surface: var(--base);
    --press-line: var(--base-3);

    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1rem;
    box-sizing: border-box;
}
[data-theme="dark"] .najaf-press {
    --press-ink: #2a2a2a;
    --press-gold-text: var(--accent);
    --press-surface: var(--base-2);
}
/* The page wrapper already supplies the gutter. It is a flex item, so let it
   shrink below the nowrap tab/topic rows instead of widening the page. */
#primary .najaf-press { padding-inline: 0; }
.najaf-press-page #primary { width: 100%; min-width: 0; }
/* These wrappers clip overflow, which would stop the section tabs sticking */
.najaf-press-page .site-content,
.najaf-press-page .inside-article { overflow: visible; }

/* --- Intro --- */
.press-intro { padding-block: 2.5rem 1.75rem; }
.press-intro__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--contrast);
}
.press-intro__lead {
    max-width: 68ch;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--contrast-3);
}

/* --- Section tabs: stick under the site header --- */
.press-nav {
    position: sticky;
    top: var(--header-height, 76px);
    z-index: 90;
    background: var(--base-2);
    border-bottom: 1px solid var(--press-line);
}
body.admin-bar .press-nav { top: calc(var(--header-height, 76px) + 32px); }
@media (max-width: 782px) {
    body.admin-bar .press-nav { top: calc(var(--header-height, 76px) + 46px); }
}
@media (max-width: 600px) {
    body.admin-bar .press-nav { top: var(--header-height, 76px); }
}
.press-nav__inner {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}
.press-nav__inner::-webkit-scrollbar { display: none; }
.najaf-press .press-nav__link {
    flex: 0 0 auto;
    padding: 0.85rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--contrast-3);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
.najaf-press .press-nav__link:hover { color: var(--contrast); border-bottom-color: var(--press-line); }
.najaf-press .press-nav__link[aria-current] { color: var(--contrast); border-bottom-color: var(--accent); }

/* --- Section divider: the section title sits on a plate between two gold rules --- */
.press-section { padding-block: 0.5rem 1rem; }
.press-divider {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-block: 3.5rem 1.5rem;
}
.press-divider::before,
.press-divider::after {
    content: "";
    flex: 1;
    height: 2px;
    background: linear-gradient(to left, var(--accent), transparent);
}
.press-divider::before { background: linear-gradient(to right, var(--accent), transparent); }
.press-divider__title {
    margin: 0;
    padding: 0.55rem 1.6rem;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--contrast);
    background: var(--press-surface);
    border: 1px solid var(--accent);
    border-radius: var(--najaf-radius-sm);
}
/* --- Moving topic strip (same family as the news ticker) --- */
.press-strip {
    display: flex;
    align-items: stretch;
    margin-bottom: 1.75rem;
    background: var(--press-ink);
    border-radius: var(--najaf-radius);
    overflow: hidden;
}
.najaf-press--archive .press-strip { margin-block: 1.25rem 0; }
/* Homepage block — inset to line up with the "آخر المنشورات" card grid above it */
#primary .najaf-press--home { padding: 0 2rem 2.5rem; }
@media (max-width: 767px) {
    #primary .najaf-press--home { padding-inline: 1rem; }
}
.press-strip__label {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding-inline: 1.1rem;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--accent);
    color: #282828;
}
.press-strip__track {
    display: flex;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem);
    mask-image: linear-gradient(to right, transparent, #000 2.5rem);
}
.press-strip__track::-webkit-scrollbar { display: none; }
.najaf-press .press-strip__list {
    display: flex;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}
.press-strip__list li {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
.press-strip__list li::after {
    content: "";
    width: 5px;
    height: 5px;
    margin-inline: 1.15rem;
    background: var(--accent);
    transform: rotate(45deg);
}
.press-strip__list li:first-child { padding-inline-start: 1.15rem; }
.najaf-press .press-strip__list a {
    padding-block: 0.7rem;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--press-on-ink);
    text-decoration: none;
}
.najaf-press .press-strip__list a:hover,
.najaf-press .press-strip__list a[aria-current] { color: var(--accent); }
.najaf-press .press-strip__list a[aria-current] {
    text-decoration: underline;
    text-underline-offset: 0.4em;
    text-decoration-thickness: 2px;
}

/* --- Sub-headings: gold bar, as the site's section titles --- */
.press-subhead {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 2rem 0 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--contrast);
}
.press-subhead::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 28px;
    border-radius: 4px;
    background: linear-gradient(to bottom, var(--accent), var(--accent-2));
}

/* --- Grids --- */
.press-grid { display: grid; gap: 1.25rem; }
.press-grid--feature,
.press-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.press-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.press-grid--lead,
.press-grid--analysis { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.press-grid--lead .press-card--lead { grid-row: span 3; }
.press-grid--analysis .press-card--lead { grid-row: span 2; }

/* --- Cards --- */
.press-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--press-surface);
    border: 1px solid var(--press-line);
    border-radius: var(--najaf-radius);
    box-shadow: var(--najaf-shadow);
    overflow: hidden;
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.press-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--najaf-shadow-hover);
}
.press-card:focus-within { box-shadow: var(--najaf-gold-glow); }
.press-card__media {
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, var(--base-3) 0%, var(--base-2) 100%);
}
.press-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* cover art carries its title band at the bottom */
    transition: transform 0.4s ease-out;
}
.press-card:hover .press-card__media img { transform: scale(1.04); }
.press-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.95rem 1.1rem 1.05rem;
}
.press-card__topic {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--press-gold-text);
}
.press-card__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.55;
}
.najaf-press .press-card__title a {
    color: var(--contrast);
    text-decoration: none;
}
.najaf-press .press-card__title a:hover { color: var(--press-gold-text); }
/* Whole card is the link target */
.press-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.press-card__title a:focus-visible { outline: none; }
.press-card__excerpt {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--contrast-3);
}
.press-card__date {
    margin-top: auto;
    padding-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--contrast-3);
}

/* Feature + interview: image beside text */
.press-card--feature,
.press-card--interview { flex-direction: row; }
/* Feature picture: shown whole at its own shape, never cropped. It sits inset
   and centred, so wide and square artwork both fit beside the text. */
.press-card--feature { align-items: center; }
.press-card--feature .press-card__media {
    flex-basis: 48%;
    aspect-ratio: auto;
    margin: 0.75rem;
    margin-inline-end: 0;
    border-radius: var(--najaf-radius-sm);
    background: none;
}
.press-card--feature .press-card__media img { height: auto; }
.press-card--interview .press-card__media { flex-basis: 38%; aspect-ratio: auto; min-height: 210px; }
.press-card--feature .press-card__body,
.press-card--interview .press-card__body { justify-content: center; padding: 1.4rem 1.5rem; }
.press-card--feature .press-card__title { font-size: 1.3rem; }
.press-card--interview .press-card__title { font-size: 1.15rem; }
.press-card--interview .press-card__excerpt::before { content: "«\00a0"; color: var(--press-gold-text); }
.press-card--interview .press-card__excerpt::after { content: "\00a0»"; color: var(--press-gold-text); }

/* Lead story */
.press-card--lead .press-card__title { font-size: 1.4rem; }
.press-card--lead .press-card__body { padding: 1.2rem 1.4rem 1.3rem; }

/* Stories beside the lead: thumbnail + title rows */
.press-grid--lead .press-card--card { flex-direction: row; }
.press-grid--lead .press-card--card .press-card__media {
    position: relative;
    flex-basis: 40%;
    min-height: 118px; /* 16:9 frame; grows only if the text beside it is taller */
}
/* Out of flow, so a square picture cannot make the row taller than a wide one */
.press-grid--lead .press-card--card .press-card__media img {
    position: absolute;
    inset: 0;
}
.press-grid--lead .press-card--card .press-card__body { justify-content: center; }

/* Religious News block: news artwork is designed square, so every frame in
   this block is square and the picture shows whole. All other sections, and
   the mixed lists (homepage block, أحدث المنشورات), keep their 16:9 frames. */
.press-section--news .press-card__media { aspect-ratio: 1 / 1; }
/* Rows beside the lead: the square sits inset and centred, as in the feature
   cards, so a row taller than the picture leaves even space around it. */
.press-section--news .press-grid--lead .press-card--card { align-items: center; }
.press-section--news .press-grid--lead .press-card--card .press-card__media {
    align-self: center;
    min-height: 0;
    margin: 0.75rem;
    margin-inline-end: 0;
    border-radius: var(--najaf-radius-sm);
}
/* Equal columns: a square lead at 1.55fr is taller than three rows can fill */
@media (min-width: 981px) {
    .press-section--news .press-grid--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Homepage Religious Press block: a mixed list. News posts get the square
   frame their artwork is made for; posts from other sections keep 16:9.
   Pictures beside the lead sit inset and centred at their own frame shape,
   so the row height can no longer stretch them into a tall crop. */
.najaf-press--home .press-card--from-news .press-card__media { aspect-ratio: 1 / 1; }
.najaf-press--home .press-grid--lead .press-card--card { align-items: center; }
.najaf-press--home .press-grid--lead .press-card--card .press-card__media {
    align-self: center;
    min-height: 0;
    margin: 0.75rem;
    margin-inline-end: 0;
    border-radius: var(--najaf-radius-sm);
}
/* A square news lead: equal columns, as in the News block */
@media (min-width: 981px) {
    .najaf-press--home .press-grid--square-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Text-only analysis */
.press-card--text .press-card__body { padding: 1.3rem 1.4rem; }
.press-card--text .press-card__title { font-size: 1.15rem; }

/* Doctrinal media: dark panels */
.press-card--panel {
    background: var(--press-ink);
    border-color: var(--press-ink);
}
.press-card--panel .press-card__body { gap: 0.7rem; padding: 1.75rem 1.9rem; }
.press-card--panel .press-card__title { font-size: 1.3rem; }
.najaf-press .press-card--panel .press-card__title a { color: var(--press-on-ink); }
.najaf-press .press-card--panel .press-card__title a:hover { color: var(--accent); }
.press-card--panel .press-card__excerpt { color: var(--press-on-ink-muted); }
.press-card--panel .press-card__topic,
.press-card--panel .press-card__date { color: var(--accent); }

/* --- "All …" link + empty state --- */
.najaf-press .press-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-block: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--press-gold-text);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 0.45em;
}
.press-all::after {
    content: "";
    width: 0.45em;
    height: 0.45em;
    border: solid currentColor;
    border-width: 0 0 2px 2px;
    transform: rotate(45deg);
    transition: transform 0.25s ease-out;
}
.najaf-press .press-all:hover { color: var(--contrast); }
.press-all:hover::after { transform: translateX(-4px) rotate(45deg); }
.press-empty {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    font-size: 0.95rem;
    color: var(--contrast-3);
    border: 1px dashed var(--press-line);
    border-radius: var(--najaf-radius);
}

/* --- Section archives: the loop prints the same cards as "أهم المنشورات"
       (functions.php §13j-5), in the same two-column grid. --- */
.najaf-press.press-grid--archive {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* restated: the loop template sets its own columns */
    gap: 1.25rem;
    max-width: none;
    padding: 0;
    /* The archive template's gutter is wider than the Religious Press page's;
       pull the grid out so a card here is as wide as a card there. */
    margin-inline: -18px;
}
@media (max-width: 1024px) {
    .najaf-press.press-grid--archive { margin-inline: -16px; }
}
@media (max-width: 980px) {
    .najaf-press.press-grid--archive { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .najaf-press.press-grid--archive { margin-inline: -8px; }
}

/* --- Responsive --- */
@media (max-width: 980px) {
    .press-grid--feature,
    .press-grid--lead,
    .press-grid--analysis { grid-template-columns: minmax(0, 1fr); }
    .press-grid--lead .press-card--lead,
    .press-grid--analysis .press-card--lead { grid-row: auto; }
    .press-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .press-intro { padding-block: 1.75rem 1.25rem; }
    .press-divider { margin-block: 2.75rem 1.25rem; }
    .press-divider__title { padding: 0.45rem 1.1rem; font-size: 1.1rem; }
    .press-grid--two,
    .press-grid--three { grid-template-columns: minmax(0, 1fr); }
    .press-card--feature,
    .press-card--interview { flex-direction: column; }
    .press-card--feature { align-items: stretch; }
    .press-card--feature .press-card__media { flex-basis: auto; margin: 0; border-radius: 0; }
    .press-card--interview .press-card__media { flex-basis: auto; aspect-ratio: 16 / 9; min-height: 0; }
    .press-card--feature .press-card__body,
    .press-card--interview .press-card__body { padding: 1rem 1.1rem 1.1rem; }
    .press-card--feature .press-card__title,
    .press-card--lead .press-card__title,
    .press-card--panel .press-card__title { font-size: 1.15rem; }
    .press-card--panel .press-card__body { padding: 1.3rem 1.25rem; }
    .press-grid--lead .press-card--card .press-card__media { flex-basis: 36%; min-height: 96px; }
    .press-grid--lead .press-card--card .press-card__title { font-size: 0.98rem; }
    .press-strip__label { padding-inline: 0.8rem; font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
    .press-card,
    .press-card__media img,
    .press-all::after { transition: none; }
    .press-card:hover { transform: none; }
    .press-card:hover .press-card__media img { transform: none; }
}