/* ==========================================================================
   قرمصيص (Garmases) — Dark Theme
   Overrides Sahifa defaults with brand dark palette + Garmases dividers
   ========================================================================== */

/* ── 1. CSS Variables ──────────────────────────────────────────────────── */
:root {
    --garmasis-red:       #C42D2D;
    --garmasis-deep-red:  #8B1A1A;
    --garmasis-crimson:   #E63946;
    --meroe-gold:         #D4A843;
    --bright-gold:        #F0C75E;
    --tech-cyan:          #00D4AA;
    --meroe-dark:         #1A0F0A;
    --meroe-brown:        #2C1810;
    --meroe-sand:         #3D2B1F;
    --nile-dark:          #0D0906;
    --parchment:          #F5E6D0;
    --warm-white:         #FDF8F0;
    --sand-gray:          #9B8B78;
    --deep-charcoal:      #1C1411;

    --gradient-heritage: linear-gradient(135deg, #C42D2D, #D4A843, #8B1A1A);
    --gradient-gold:     linear-gradient(135deg, #B8860B, #F0C75E, #D4A843);

    --font-display-ar: 'Tajawal', sans-serif;
    --font-body-ar:    'Cairo', sans-serif;
    --font-mono:       'Space Mono', monospace;
}

/* ── 2. Base ────────────────────────────────────────────────────────────── */
html { overflow-x: hidden; }

body {
    background: var(--meroe-dark) !important; /* Sahifa sets body bg with !important */
    color: var(--parchment) !important;
    font-family: var(--font-body-ar);
}

#wrapper,
#wrapper.boxed-all,
#wrapper.wide-layout {
    background-color: var(--meroe-dark) !important;
}

/* ── 3. Typography ──────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: var(--meroe-gold);
    font-family: var(--font-display-ar);
}

a             { color: var(--garmasis-red); }
a:hover       { color: var(--garmasis-crimson); }
p, li, td, th { color: var(--parchment); }

/* Inline text elements — brand colors only, no size changes */
strong, b                { color: var(--parchment); }
em, i                    { color: var(--meroe-gold); }
small                    { color: var(--sand-gray); }
code                     { color: var(--tech-cyan); background: rgba(255, 255, 255, 0.05); padding: 0.1em 0.4em; border-radius: 4px; }
mark                     { color: var(--meroe-dark); background: rgba(212, 168, 67, 0.3); }
pre,
pre code {
    background: #0d0d0d !important;
    color: var(--tech-cyan) !important;
    border: 1px solid rgba(196, 45, 45, 0.2);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    line-height: 1.7;
}
pre code {
    background: transparent !important;
    padding: 0;
    border: none;
}
.wp-block-code,
.wp-block-code code {
    background: #0d0d0d !important;
    color: var(--tech-cyan) !important;
    border-radius: 6px;
    font-family: var(--font-mono);
}
abbr                     { color: var(--meroe-gold); text-decoration-color: rgba(212, 168, 67, 0.3); }
blockquote               { color: var(--meroe-gold); border-inline-start: 3px solid var(--garmasis-red); padding-inline-start: 1rem; }
blockquote p             { color: var(--meroe-gold); }
.en-term                 { color: var(--tech-cyan); background: rgba(0, 212, 170, 0.08); padding: 0.1em 0.4em; border-radius: 4px; direction: ltr; display: inline-block; }
.text-gradient           { background: var(--gradient-heritage); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── 4. Top Bar ─────────────────────────────────────────────────────────── */
#top-bar {
    background: var(--nile-dark) !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(196, 45, 45, 0.2);
}

#top-bar a,
#top-bar .top-bar-menu li a { color: var(--sand-gray) !important; }
#top-bar a:hover,
#top-bar .top-bar-menu li a:hover { color: var(--meroe-gold) !important; }

/* Search submit button in top bar */
#top-bar #searchsubmit,
#top-bar .search-btn,
#top-bar input[type="submit"] {
    background: var(--garmasis-red) !important;
    color: var(--parchment) !important;
    border: none !important;
    border-radius: 4px !important;
}

/* ── 5. Header ──────────────────────────────────────────────────────────── */
#theme-header,
.header-inner {
    background: var(--meroe-brown) !important;
    /* Replace Sahifa's orange border-top with Meroitic pattern */
    border-top: 6px solid;
    border-image: repeating-linear-gradient(
        90deg,
        #C42D2D 0px,   #C42D2D 20px,
        #D4A843 20px,  #D4A843 24px,
        transparent    24px, transparent 30px,
        #D4A843 30px,  #D4A843 34px,
        #C42D2D 34px,  #C42D2D 54px,
        transparent    54px, transparent 60px
    ) 1;
}

/* ── 6. Navigation ──────────────────────────────────────────────────────── */
#main-nav {
    background: var(--meroe-brown) !important; /* Sahifa uses !important here */
    /* Replace Sahifa's orange border-bottom with heritage gradient */
    border-bottom: 4px solid !important;
    border-image: var(--gradient-heritage) 1 !important;
}

#main-nav ul li a {
    color: var(--parchment) !important;
    border-color: rgba(196, 45, 45, 0.12) !important;
}

#main-nav ul li a:hover,
#main-nav ul li.current-menu-item > a,
#main-nav ul li.current-page-ancestor > a {
    color: var(--meroe-gold) !important;
    background: rgba(196, 45, 45, 0.1) !important;
}

/* Dropdown menus */
#main-nav ul ul {
    background: var(--meroe-sand) !important;
    border: 1px solid rgba(196, 45, 45, 0.15) !important;
}

#main-nav ul ul li a {
    border-bottom: 1px solid rgba(196, 45, 45, 0.20) !important;
}

/* ── 7. Breaking News Bar ───────────────────────────────────────────────── */
.breaking-news {
    background: var(--meroe-brown) !important; /* Sahifa uses !important */
    border-bottom: 1px solid rgba(196, 45, 45, 0.15);
}

.breaking-news span.breaking-news-title {
    background: var(--garmasis-red) !important; /* Sahifa uses !important */
}

.breaking-news ul a,
.breaking-news ul li a {
    background: transparent !important;
    color: var(--parchment) !important; /* Sahifa uses !important on ticker links */
}

/* ── 8. Main Content Area ───────────────────────────────────────────────── */
#main-content {
    background: var(--meroe-dark) !important;
}

/* ── 9. Category Boxes & Post Listings ─────────────────────────────────── */
.cat-box-content,
.post-listing,
#commentform {
    background: var(--meroe-brown) !important;
    /* Replace Sahifa's orange border-bottom with heritage gradient */
    border-bottom: 4px solid !important;
    border-image: var(--gradient-heritage) 1 !important;
    border-radius: 0;
}

/* Block titles — force RTL alignment (Sahifa hardcodes float:left) */
#respond #reply-title,
#respond h3,
.block-head h3,
.cat-box-title h2,
.widget-top h4 {
    float: right !important;
    margin-right: 0 !important;
    margin-left: 10px !important;
    text-align: right !important;
}

/* Section title bars */
.cat-box-title {
    border-bottom: 3px solid;
    border-image: var(--gradient-heritage) 1;
}

.cat-box-title h2,
.cat-box-title h2 a { color: var(--parchment) !important; }
.cat-box-title h2 a:hover { color: var(--meroe-gold) !important; }

/* Individual post items */
.post-listing-item,
.post-listing .post-listing-item {
    background: var(--meroe-brown);
    border-bottom: 1px solid rgba(196, 45, 45, 0.30);
}

.post-title a,
.post-listing .post-title a { color: var(--parchment) !important; }
.post-title a:hover,
.post-listing .post-title a:hover { color: var(--meroe-gold) !important; }

.post-meta,
.post-meta span,
.post-meta a { color: var(--sand-gray) !important; }

p.post-meta {
    border-bottom: 1px solid rgba(196, 45, 45, 0.25) !important;
}

/* ── 10. Sidebar & Widgets ──────────────────────────────────────────────── */
#sidebar .widget-container,
.widget-container {
    background: var(--meroe-brown) !important;
    border-bottom: 4px solid !important;
    border-image: var(--gradient-heritage) 1 !important;
}

.widget-top h4,
.widget-top h4 a { color: var(--meroe-gold) !important; }
.widget-top h4 a:hover { color: var(--bright-gold) !important; }

/* Widget list items */
.widget ul li {
    border-bottom: 1px solid rgba(196, 45, 45, 0.25) !important;
    color: var(--parchment) !important;
}

.widget ul li a { color: var(--parchment) !important; }
.widget ul li a:hover { color: var(--meroe-gold) !important; }

/* Tag cloud pills */
.tagcloud a,
.widget_tag_cloud .tagcloud a {
    background: var(--meroe-sand) !important;
    color: var(--parchment) !important;
    border: 1px solid rgba(196, 45, 45, 0.25) !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 0.8rem !important;
    transition: background 0.2s, color 0.2s;
}
.tagcloud a:hover,
.widget_tag_cloud .tagcloud a:hover {
    background: var(--garmasis-red) !important;
    color: var(--warm-white) !important;
    border-color: var(--garmasis-red) !important;
}

/* Tabbed widget top bar */
#tabbed-widget .widget-top {
    background: var(--meroe-brown);
    border-bottom: 2px solid var(--garmasis-red);
}

/* Tab items */
#tabbed-widget ul.tabs li a {
    color: var(--sand-gray);
}

/* Active tab */
#tabbed-widget ul.tabs li.active a {
    background: var(--meroe-dark);
    color: var(--meroe-gold);
    border-bottom: 2px solid var(--garmasis-red);
}

/* Tab hover */
#tabbed-widget ul.tabs li a:hover {
    color: var(--parchment);
}

/* ── 11. Dividers & Separators — Garmases Brand ─────────────────────────── */

/* Sahifa stripe decoration — hidden per brand rules */
body .stripe-line { display: none !important; }

/* .divider → Gold fade line */
.divider {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, #D4A843, transparent) !important;
    margin: 1rem 0 !important;
}

/* .divider-double → Heritage gradient bar */
.divider.divider-double {
    height: 4px !important;
    background: var(--gradient-heritage) !important;
    border-radius: 2px !important;
}

/* <hr> → Red fade line */
hr {
    border: none !important;
    height: 1px;
    background: linear-gradient(90deg, transparent, #C42D2D, transparent);
    margin: 1.5rem 0;
}

/* Widget underlines → Fade-right red */
.widget-top::after {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, #C42D2D, transparent);
    margin-top: 6px;
}

/* Section breaks between posts → dotted red */
.post-listing-item + .post-listing-item {
    border-top: 2px solid;
    border-image: radial-gradient(circle, #C42D2D 1px, transparent 1px) / 2px;
    background-image: radial-gradient(circle, rgba(196,45,45,0.4) 1px, transparent 1px);
    background-size: 8px 2px;
    background-repeat: repeat-x;
    background-position: top;
}

/* ── 12. Buttons & More Link ─────────────────────────────────────────────── */
.button,
a.button,
input[type="submit"],
button[type="submit"] {
    background: var(--gradient-gold) !important;
    color: var(--meroe-dark) !important;
    border: none !important;
    border-radius: 8px !important;
}

.button:hover,
a.button:hover,
input[type="submit"]:hover {
    box-shadow: 0 4px 16px rgba(212, 168, 67, 0.35) !important;
    color: var(--meroe-dark) !important;
}

a.more-link:hover { color: var(--meroe-gold) !important; }

/* ── 13. Form Inputs ─────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea,
select {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(196, 45, 45, 0.15) !important;
    color: var(--parchment) !important;
    border-radius: 8px !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
    border-color: var(--meroe-gold) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.15) !important;
}

input::placeholder,
textarea::placeholder { color: var(--sand-gray) !important; opacity: 0.7; }

/* ── 14. Mobile Menu (Sahifa #slide-out) ─────────────────────────────────── */
.wrapper-outer { overflow-x: hidden; }

#slide-out {
    background: var(--nile-dark);
    visibility: hidden;
}

/* Reveal only when hamburger is tapped (Sahifa adds .js-nav to body) */
body.js-nav #slide-out {
    visibility: visible;
}

#slide-out .social-icons a       { color: var(--sand-gray); }
#slide-out .social-icons a:hover { color: var(--meroe-gold); }

#mobile-menu {
    border-top-color: rgba(196, 45, 45, 0.15);
}

#slide-out #mobile-menu a {
    color: var(--parchment);
    border-bottom-color: rgba(196, 45, 45, 0.1);
}

#slide-out #mobile-menu a:hover {
    background: rgba(196, 45, 45, 0.1);
    color: var(--meroe-gold);
}

#slide-out #mobile-menu ul ul {
    background: var(--meroe-brown);
}

#slide-out #mobile-menu ul li.menu-item-has-children i.mobile-arrows {
    border-color: rgba(196, 45, 45, 0.15);
    color: var(--sand-gray);
}

.search-mobile {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(196, 45, 45, 0.15);
    box-shadow: none;
}

.search-mobile #s-mobile { color: var(--parchment); }

/* ── 15. Footer ──────────────────────────────────────────────────────────── */
#theme-footer {
    background: var(--nile-dark) !important;
    color: var(--parchment) !important;
    /* Replace Sahifa's orange border-top with Meroitic pattern */
    border-top: 6px solid !important;
    border-image: repeating-linear-gradient(
        90deg,
        #C42D2D 0px,   #C42D2D 20px,
        #D4A843 20px,  #D4A843 24px,
        transparent    24px, transparent 30px,
        #D4A843 30px,  #D4A843 34px,
        #C42D2D 34px,  #C42D2D 54px,
        transparent    54px, transparent 60px
    ) 1 !important;
}

#theme-footer a        { color: var(--meroe-gold) !important; }
#theme-footer a:hover  { color: var(--bright-gold) !important; }
#theme-footer p,
#theme-footer li,
#theme-footer span     { color: var(--sand-gray) !important; }

/* Footer widget titles */
#footer-widget-area .widget-top h4,
#footer-widget-area .widget-top h4 a { color: var(--meroe-gold) !important; }

/* Footer divider between widget columns */
#footer-widget-area .widget-container {
    border-bottom: 1px solid rgba(212, 168, 67, 0.1) !important;
    background: transparent !important;
}

/* Bottom footer bar */
#footer-bottom,
.footer-bottom {
    background: var(--nile-dark) !important;
    border-top: 1px solid rgba(196, 45, 45, 0.12);
    color: var(--sand-gray) !important;
}

/* ─── §20 — Glossary Auto-Links ─────────────────────────────────────────── */
body .term-link {
    color: var(--tech-cyan);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.2s ease;
}
body .term-link:hover {
    color: var(--bright-gold);
    text-decoration-style: solid;
}
/* Inherit heading colour inside headings */
h1 .term-link,
h2 .term-link,
h3 .term-link {
    color: inherit;
    text-decoration: underline dotted;
}

/* ── §21. Featured Hero Slider ──────────────────────────────────────────── */
#featured-posts .featured-post {
    background-color: var(--meroe-brown);
    background-size: cover !important;
    background-position: center center !important;
    min-height: 260px;
    position: relative;
}
#featured-posts .featured-post::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,5,3,0.85) 0%, rgba(10,5,3,0.3) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
#featured-posts .featured-post .featured-post-inner,
#featured-posts .featured-post .post-meta,
#featured-posts .featured-post .post-title {
    position: relative;
    z-index: 2;
}
#featured-posts .featured-post .post-title a {
    font-family: var(--font-display-ar);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--warm-white) !important;
}
#featured-posts .featured-post .post-title a:hover { color: var(--meroe-gold) !important; }
#featured-posts .featured-post .post-meta,
#featured-posts .featured-post .post-meta span { color: rgba(245,230,208,0.65) !important; }

/* ── §22. Section Header Authority ─────────────────────────────────────── */
body .cat-box-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 4px;
}
body .cat-box-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    min-height: 1.3em;
    background: var(--garmasis-red);
    border-radius: 2px;
    flex-shrink: 0;
    order: 1;
}
body .cat-box-title h2,
body .cat-box-title h2 a {
    font-family: var(--font-display-ar) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    color: var(--parchment) !important;
    order: 0;
    margin: 0;
}
body .cat-box-title h2 a:hover { color: var(--meroe-gold) !important; }

/* ── §23. Navigation Desktop Cleanup ───────────────────────────────────── */
@media (min-width: 768px) {
    #mobile-toggle,
    .menu-toggle { display: none !important; }

    #main-nav ul > li > a {
        font-family: var(--font-display-ar);
        font-weight: 600;
        font-size: 0.9rem;
        letter-spacing: 0.03em;
        padding: 14px 16px;
        transition: color 0.2s ease, background 0.2s ease;
    }
}

/* ── §24. Post Card Hierarchy ───────────────────────────────────────────── */
.post-listing .post-title a,
body .cat-box-content .post-title a {
    font-family: var(--font-display-ar);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5;
    transition: color 0.2s ease;
}
.post-meta, .post-meta span { font-size: 0.73rem; }

.post-thumbnail, .post-image {
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

/* ── §24b. Single Post Title — override BebasNeue ───────────────────────── */
body.single h1.post-title,
body.single h1.entry-title {
    font-family: var(--font-display-ar) !important;
    font-size: 2.2rem !important;
    line-height: 1.3;
}

/* ── §25. More-Link as Button ───────────────────────────────────────────── */
a.more-link {
    display: inline-block;
    padding: 4px 14px !important;
    border: 1px solid rgba(196,45,45,0.35) !important;
    border-radius: 20px !important;
    background: transparent !important;
    color: var(--garmasis-red) !important;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    transition: background 0.2s ease, border-color 0.2s ease;
}
a.more-link:hover {
    background: rgba(196,45,45,0.1) !important;
    border-color: var(--garmasis-red) !important;
    color: var(--garmasis-crimson) !important;
}

/* ── §26. Widget Titles ─────────────────────────────────────────────────── */
.widget-top h4,
.widget-top h4 a {
    font-family: var(--font-display-ar) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
}

/* ── §27. Tab Widget Active State ───────────────────────────────────────── */
#tabbed-widget ul.tabs {
    border-bottom: 2px solid rgba(196,45,45,0.2);
    margin-bottom: -2px;
}
#tabbed-widget ul.tabs li.active a {
    border-bottom: 2px solid var(--meroe-gold) !important;
    color: var(--meroe-gold) !important;
    font-weight: 700 !important;
}

/* ── §28. Breaking News Bar ─────────────────────────────────────────────── */
.breaking-news {
    border-bottom: 2px solid rgba(196,45,45,0.4) !important;
}
.breaking-news .breaking-news-title {
    font-family: var(--font-mono) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
    padding: 6px 14px !important;
}

/* ── §29. Top Nav (RTL Sahifa uses #top-nav, not #top-bar) ─────────── */
#top-nav {
    background: var(--nile-dark) !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(196,45,45,0.2) !important;
    height: auto !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
}
#top-nav .container {
    width: 100%;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
#top-nav a,
#top-nav .top-menu li a {
    color: var(--sand-gray) !important;
}
#top-nav a:hover,
#top-nav .top-menu li a:hover {
    color: var(--meroe-gold) !important;
}
#top-nav .search-button,
#top-nav input[type="submit"] {
    background: var(--garmasis-red) !important;
    color: var(--parchment) !important;
    border: none !important;
}

/* ── §30. Home Button (strip Sahifa icon, show Arabic text) ─────────── */
#main-nav ul li.menu-item-home a,
#main-nav ul li.menu-item-home.current-menu-item a {
    background-image: none !important;
    text-indent: 0 !important;
    width: auto !important;
    height: auto !important;
    background-position: unset !important;
}

/* ── §31. Main Nav — vertical breathing room ─────────────────────────── */
#main-nav ul > li > a {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    line-height: 1.4 !important;
}

/* ── §32. Contact Form ───────────────────────────────────────────────── */
.garmases-contact-form {
    max-width: 620px;
    margin: 0 auto;
}
.garmases-contact-form p {
    margin-bottom: 1rem;
}
.garmases-contact-form label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-family: var(--font-body-ar);
    font-size: 0.95rem;
    color: var(--sand-gray);
}
.garmases-contact-form input[type="text"],
.garmases-contact-form input[type="email"],
.garmases-contact-form textarea {
    width: 100%;
    padding: 0.65rem 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: var(--parchment);
    font-family: var(--font-body-ar);
    font-size: 1rem;
    transition: border-color 0.2s;
}
.garmases-contact-form input[type="text"]:focus,
.garmases-contact-form input[type="email"]:focus,
.garmases-contact-form textarea:focus {
    outline: none;
    border-color: var(--garmasis-red);
}
.garmases-contact-form textarea {
    resize: vertical;
    min-height: 120px;
}
.garmases-contact-form button[type="submit"] {
    background: var(--garmasis-red);
    color: var(--parchment);
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-family: var(--font-body-ar);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.garmases-contact-form button[type="submit"]:hover {
    background: var(--meroe-gold);
    color: var(--meroe-dark);
}

/* ── §33. Off-brand Sahifa Overrides (Audit 2026-02-22) ─────────────────── */

/* Archive / category page titles */
h1.page-title,
.archive-title,
.page-title,
.cat-title h1,
.cat-title h2 {
    color: var(--meroe-gold) !important;
}

/* .tie-date — Sahifa post date metadata renders #FFFFFF by default */
.tie-date,
.post-meta .tie-date,
.post-meta .tie-date a,
.post-meta span.tie-date {
    color: var(--sand-gray) !important;
}

/* Featured slider secondary slides (.featured-title) resolve to #FFFFFF */
.featured-title h2,
.featured-title h2 a,
.featured-title h3,
.featured-title h3 a {
    color: var(--parchment) !important;
}
.featured-title h2 a:hover,
.featured-title h3 a:hover {
    color: var(--meroe-gold) !important;
}

/* Light-theme leakage: .other-news widget uses #F7F7F7 bg */
.other-news,
.other-news .news-item,
.other-news .news-item-inner {
    background: var(--meroe-brown) !important;
    color: var(--parchment) !important;
}
.other-news a               { color: var(--parchment) !important; }
.other-news a:hover         { color: var(--meroe-gold) !important; }
.other-news .news-item h4 a { color: var(--parchment) !important; }

/* Scroll-nav tab strip inside post carousels (#F7F7F7 bg) */
.scroll-nav,
.cat-box-content .scroll-nav {
    background: var(--meroe-sand) !important;
    border-bottom: 1px solid rgba(196, 45, 45, 0.2) !important;
}
.scroll-nav a {
    color: var(--sand-gray) !important;
    background: transparent !important;
}
.scroll-nav a:hover {
    color: var(--meroe-gold) !important;
    background: rgba(196, 45, 45, 0.08) !important;
}
.scroll-nav a.active,
.scroll-nav a.activeSlide {
    color: var(--meroe-gold) !important;
    background: var(--meroe-dark) !important;
    border-bottom: 2px solid var(--garmasis-red) !important;
}

/* FlexSlider / carousel dot indicators */
.flex-control-nav a,
.tie-slider-nav a,
.flex-control-paging a {
    background: var(--sand-gray) !important;
    border-color: var(--sand-gray) !important;
    box-shadow: none !important;
}
.flex-control-nav a.flex-active,
.tie-slider-nav a.active,
.flex-control-paging a:hover {
    background: var(--garmasis-red) !important;
    border-color: var(--garmasis-red) !important;
}

/* FlexSlider prev/next arrows (#222222) */
.flex-direction-nav a.flex-prev,
.flex-direction-nav a.flex-next,
.flex-direction-nav a {
    background: var(--meroe-brown) !important;
    color: var(--parchment) !important;
    border: 1px solid rgba(196, 45, 45, 0.2) !important;
    opacity: 0.85;
}
.flex-direction-nav a:hover {
    background: var(--meroe-sand) !important;
    opacity: 1;
}

/* Live search results dropdown (#FFFFFF bg) */
#live-search_results,
.live-search-results,
#live-search_results ul,
#live-search_results li {
    background: var(--meroe-brown) !important;
    border-color: rgba(196, 45, 45, 0.25) !important;
    color: var(--parchment) !important;
}
#live-search_results a,
.live-search-results a {
    color: var(--parchment) !important;
    border-bottom: 1px solid rgba(196, 45, 45, 0.15) !important;
}
#live-search_results a:hover,
.live-search-results a:hover {
    color: var(--meroe-gold) !important;
    background: rgba(196, 45, 45, 0.08) !important;
}

/* Pagination — inactive links use #777777, should be --sand-gray */
.pagination a,
.page-numbers a,
.nav-links a,
nav.navigation a,
.wp-pagenavi a {
    color: var(--sand-gray) !important;
}
.pagination a:hover,
.page-numbers a:hover,
.nav-links a:hover {
    color: var(--meroe-gold) !important;
}
.pagination .current,
.page-numbers .current,
.wp-pagenavi .current {
    background: var(--garmasis-red) !important;
    color: var(--parchment) !important;
    border-color: var(--garmasis-red) !important;
}

/* Article border-bottom (#F2F2F2 breaks dark theme) */
article,
.post-listing {
    border-color: rgba(196, 45, 45, 0.15) !important;
}

/* Mobile menu: body text #DDDDDD → --parchment */
#slide-out { color: var(--parchment); }

/* Hamburger icon bars (#333333) */
.menu-toggle span,
.hamburger span,
#mobile-toggle span,
.tie-hamburger span {
    background: var(--parchment) !important;
}

/* Contact form input text (#fff → --parchment) */
.garmases-contact-form input[type="text"],
.garmases-contact-form input[type="email"],
.garmases-contact-form textarea {
    color: var(--parchment) !important;
}

/* Sidebar widget links that resolve to #E4C789 (off-brand warm gold) */
#sidebar .widget ul li a,
.complementary .widget ul li a {
    color: var(--parchment) !important;
}
#sidebar .widget ul li a:hover,
.complementary .widget ul li a:hover {
    color: var(--meroe-gold) !important;
}

/* ── §34. Cat-Tabs & Other-News White Fixes (Audit 2026-02-22) ──────────── */

/* .cat-tabs-header — Sahifa renders rgb(247,247,247) background */
.cat-tabs-header {
    background: var(--meroe-brown) !important;
    border-bottom: 1px solid rgba(196, 45, 45, 0.2) !important;
}
.cat-tabs-header ul li a {
    color: var(--sand-gray) !important;
    background: transparent !important;
}
.cat-tabs-header ul li a:hover {
    color: var(--meroe-gold) !important;
}
/* Active tab — Sahifa renders rgb(255,255,255) */
.cat-tabs-header ul li.active,
.cat-tabs-header ul li.active a {
    background: var(--meroe-dark) !important;
    color: var(--meroe-gold) !important;
}

/* li.other-news — white/light-gray borders from Sahifa */
li.other-news {
    border-color: rgba(196, 45, 45, 0.18) !important;
}

/* li.first-news — light-gray bottom border */
li.first-news {
    border-bottom-color: rgba(196, 45, 45, 0.18) !important;
}

/* ── §35. Mobile Breakpoint — phones < 480px ────────────────────────────── */
@media (max-width: 480px) {
    /* Contact form: full-width, tighter padding */
    .garmases-contact-form {
        padding: 0 0.5rem;
    }
    .garmases-contact-form button[type="submit"] {
        width: 100%;
        padding: 0.75rem 1rem;
    }

    /* Post cards: single column, no side padding bleed */
    .post-listing,
    .small-post,
    .tie-col-md-4,
    .tie-col-md-3 {
        width: 100% !important;
        float: none !important;
        margin-inline-start: 0 !important;
    }

    /* Hero title: readable on small screens */
    body.single .entry-title {
        font-size: 1.9rem;
        line-height: 1.3;
    }

    /* Main nav: collapse padding */
    #main-nav ul > li > a {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        font-size: 0.85rem !important;
    }

    /* Breaking news ticker: wrap gracefully */
    #breaking-news .breaking-news-inner {
        flex-wrap: wrap;
    }
    #breaking-news .breaking-news-label {
        width: 100%;
        margin-bottom: 0.25rem;
    }

    /* Sidebar: full width below content */
    #sidebar,
    .complementary {
        width: 100% !important;
        float: none !important;
        padding-inline-start: 0 !important;
    }
}