/* ==========================================================================
   Ultra CMS — Theme (single stylesheet)
   Editorial dark / gold accent. Replaces the previous front-1..3 / premium /
   theme-dark / theme-vivid stack — this is the only stylesheet the theme
   loads. Every class here matches what the .twig templates actually use.
   ========================================================================== */

/* ── Design Tokens ── */
:root,
[data-theme="dark"] {
    color-scheme: dark;
    --gold:           var(--theme-primary, #cda45a);
    --gold-light:     #e3c07f;
    --gold-dim:       rgba(205, 164, 90, 0.12);
    --gold-ink:       #16130a; /* text color when sitting on a gold fill */
    --purple:         var(--theme-secondary, #8b7fd8);
    --purple-dim:     rgba(139, 127, 216, 0.14);
    --red-alert:      #e5484d;

    --bg-base:        var(--theme-bg, #0b0c11);
    --bg-surface:     #121319;
    --bg-card:        #171821;
    --bg-card-hover:  #1d1f2b;
    --bg-glass:       rgba(255, 255, 255, 0.035);
    --bg-nav:         rgba(11, 12, 17, 0.94);

    --border-subtle:  rgba(255, 255, 255, 0.08);
    --border-accent:  rgba(205, 164, 90, 0.32);

    --text-primary:   var(--theme-text, #eef0f4);
    --text-secondary: #9a9db1;
    --text-muted:     #64687c;

    --font-heading:   'Cairo', 'Tajawal', -apple-system, sans-serif;
    --font-body:      'Tajawal', 'Cairo', -apple-system, sans-serif;
    --font-mono:      'Space Mono', monospace;

    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  22px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 10px rgba(0,0,0,.28);
    --shadow-md: 0 10px 28px rgba(0,0,0,.35);
    --shadow-lg: 0 18px 44px rgba(0,0,0,.45);

    --ease: 0.2s cubic-bezier(.4,0,.2,1);

    --bs-body-bg:      var(--bg-base);
    --bs-body-color:   var(--text-primary);
    --bs-primary:      var(--gold);
    --bs-secondary:    var(--purple);
    --bs-card-bg:      var(--bg-card);
    --bs-border-color: var(--border-subtle);
    --bs-link-color:   var(--gold);
    --bs-link-hover-color: var(--gold-light);
}

[data-theme="light"] {
    color-scheme: light;
    --bg-base:        #f4f6f9;
    --bg-surface:     #ffffff;
    --bg-card:        #ffffff;
    --bg-card-hover:  #f8fafc;
    --bg-glass:       rgba(0, 0, 0, 0.035);
    --bg-nav:         rgba(255, 255, 255, 0.95);

    --border-subtle:  rgba(0, 0, 0, 0.09);
    --border-accent:  rgba(205, 164, 90, 0.45);

    --text-primary:   #1a1d26;
    --text-secondary: #4b5563;
    --text-muted:     #848da0;

    --shadow-sm: 0 2px 10px rgba(0,0,0,.05);
    --shadow-md: 0 10px 28px rgba(0,0,0,.08);
    --shadow-lg: 0 18px 44px rgba(0,0,0,.12);

    --bs-body-bg:      var(--bg-base);
    --bs-body-color:   var(--text-primary);
    --bs-card-bg:      var(--bg-card);
    --bs-border-color: var(--border-subtle);
}

/* ── Base ── */
html { scroll-behavior: smooth; }

body {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text-primary); font-weight: 800; line-height: 1.4; text-wrap: pretty; }

a { color: var(--gold); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--gold-light); }

img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--gold); color: var(--gold-ink); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: #262838; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Bootstrap component overrides ── */
.text-muted, .text-secondary { color: var(--text-secondary) !important; }
.bg-white, .bg-light { background-color: var(--bg-card) !important; }
.text-dark { color: var(--text-primary) !important; }
.border, .border-top, .border-bottom, .border-subtle { border-color: var(--border-subtle) !important; }
.shadow-sm, .shadow { box-shadow: var(--shadow-sm) !important; }

.card { background-color: var(--bg-card); color: var(--text-primary); border-color: var(--border-subtle); }

.form-control, .form-select {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px var(--gold-dim);
}
.form-control::placeholder { color: var(--text-muted); }
.form-label { color: var(--text-secondary); }

.btn-primary { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 700; }
.btn-primary:hover, .btn-primary:focus { background: var(--gold-light); border-color: var(--gold-light); color: var(--gold-ink); }
.btn-outline-primary { color: var(--gold); border-color: var(--gold); }
.btn-outline-primary:hover { background: var(--gold); color: var(--gold-ink); }

.dropdown-menu { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: .5rem; }
.dropdown-item { color: var(--text-secondary); font-size: .88rem; padding: .55rem 1rem; border-radius: var(--radius-sm); transition: var(--ease); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--gold-dim); color: var(--gold); }

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

.breadcrumb-item a { color: var(--text-muted); }
.breadcrumb-item a:hover { color: var(--gold); }
.breadcrumb-item.active { color: var(--text-secondary); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }

.alert-success { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: #6ee7a8; }

/* ── Admin bar ── */
#admin-bar a:hover { opacity: .85; }

/* ── Navbar ── */
.navbar { 
    background: var(--bg-nav, rgba(11,12,17,0.92)) !important; 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px); 
    border-bottom: 1px solid var(--border-subtle); 
    padding: .65rem 0; 
    z-index: 1030;
}
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.navbar-brand { 
    font-family: var(--font-heading); 
    font-weight: 800; 
    letter-spacing: -.3px; 
    white-space: nowrap;
    flex-shrink: 0;
}
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}
.nav-link { 
    color: var(--text-secondary) !important; 
    font-weight: 600; 
    font-size: .88rem; 
    padding: .42rem .75rem !important; 
    border-radius: var(--radius-pill, 20px); 
    transition: var(--ease);
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px;
    line-height: 1.3;
}
.nav-link:hover, .nav-link.active { 
    color: var(--gold) !important; 
    background: var(--gold-dim); 
}
.nav-link.dropdown-toggle::after {
    margin-right: 4px;
    vertical-align: middle;
}

.navbar-search-input {
    background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
    color: var(--text-primary); padding: .42rem 2.2rem .42rem .85rem; width: 140px; font-size: .82rem;
    outline: none; transition: var(--ease);
}
.navbar-search-input:focus { border-color: var(--border-accent); width: 190px; box-shadow: 0 0 0 3px var(--gold-dim); }
.navbar-search-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: .8rem; pointer-events: none; }

.navbar-profile-link {
    display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); text-decoration: none; font-size: .82rem;
    padding: .38rem .8rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); transition: var(--ease);
    white-space: nowrap;
}
.navbar-profile-link:hover { border-color: var(--border-accent); color: var(--gold); }

@media (min-width: 992px) and (max-width: 1280px) {
    .navbar-nav {
        overflow-x: auto;
        max-width: 55vw;
        scrollbar-width: none;
    }
    .navbar-nav::-webkit-scrollbar { display: none; }
}

@media (max-width: 991px) {
    .navbar-collapse { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1.25rem; margin-top: .75rem; }
    .navbar-nav { flex-direction: column; align-items: stretch; }
    .nav-link { padding: .65rem 1rem !important; }
}

/* ── Buttons ── */
.btn-gold {
    background: var(--gold); color: var(--gold-ink); font-weight: 700; border: none; border-radius: var(--radius-pill);
    padding: .5rem 1.3rem; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: var(--ease);
}
.btn-gold:hover { background: var(--gold-light); color: var(--gold-ink); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ── Breaking ticker (default + site-builder markup) ── */
.ticker-wrap, .uc-ticker {
    background: var(--bg-surface); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: .5rem 0; font-size: .88rem;
}
.ticker-inner, .uc-ticker__row { display: flex; align-items: center; gap: 12px; overflow: hidden; }
.ticker-badge, .uc-ticker__badge {
    background: var(--red-alert); color: #fff; font-weight: 800; font-size: .74rem; padding: 3px 12px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.ticker-badge-pulse { width: 7px; height: 7px; background: #fff; border-radius: 50%; animation: pulseRed 1.6s infinite; }
@keyframes pulseRed { 0% { transform: scale(.9); opacity: 1; } 50% { transform: scale(1.35); opacity: .45; } 100% { transform: scale(.9); opacity: 1; } }
.ticker-content, .uc-ticker__track { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker-link, .uc-ticker__item { color: var(--text-primary); font-weight: 600; transition: var(--ease); }
.ticker-link:hover, .uc-ticker__item:hover { color: var(--gold); }

/* ── Hero / slider ── */
.hero-card { border-radius: var(--radius-lg); overflow: hidden; position: relative; background: var(--bg-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); }
.hero-overlay { background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 48%, transparent 100%); }
.trending-badge {
    background: var(--gold); color: var(--gold-ink); font-size: .72rem; font-weight: 800; letter-spacing: .4px;
    padding: 4px 14px; border-radius: var(--radius-pill); text-transform: uppercase;
}
@media (max-width: 767px) { .hero-caption { padding: 1.5rem 1rem 1rem; } .hero-card { border-radius: var(--radius-md); } }

/* ── Category pills ── */
.category-pills-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: .5rem 0 0; }
.category-pill {
    background: var(--bg-glass); color: var(--text-secondary); border: 1px solid var(--border-subtle);
    padding: 7px 20px; border-radius: var(--radius-pill); font-size: .875rem; font-weight: 600; transition: var(--ease); text-decoration: none;
}
.category-pill:hover, .category-pill.active { background: var(--gold); color: var(--gold-ink); border-color: transparent; }

/* ── Post / news card ── */
.post-card {
    background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden;
    transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease); display: flex; flex-direction: column; height: 100%;
}
.post-card:hover { transform: translateY(-4px); border-color: var(--border-accent); box-shadow: var(--shadow-lg); }
.post-card .card-img-wrap { position: relative; overflow: hidden; aspect-ratio: 16/9; background: var(--bg-surface); }
.post-card .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .card-img-wrap img { transform: scale(1.05); }
.post-card .cat-badge { position: absolute; top: 12px; right: 12px; }
.post-card .card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; background: transparent; }
.post-card .card-title { font-size: 1.02rem; font-weight: 700; line-height: 1.55; margin-bottom: .6rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card .card-title a { color: var(--text-primary); }
.post-card:hover .card-title a { color: var(--gold); }
.post-card .card-text { color: var(--text-secondary); font-size: .85rem; line-height: 1.7; flex: 1; }
.post-card .card-footer-meta { display: flex; justify-content: space-between; font-size: .78rem; color: var(--text-muted); padding-top: .75rem; margin-top: auto; border-top: 1px solid var(--border-subtle); }

.cat-badge {
    background: var(--gold); color: var(--gold-ink); font-weight: 800; font-size: .72rem; padding: 4px 12px;
    border-radius: var(--radius-pill); text-decoration: none; z-index: 2;
}

/* ── Trending sidebar ── */
.trending-sidebar { background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 1.5rem; }
.trending-sidebar .section-title { font-size: 1rem; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 8px; margin-bottom: 1.25rem; }
.trending-item { display: flex; gap: 12px; padding: .75rem 0; border-bottom: 1px solid var(--border-subtle); }
.trending-item:last-child { border-bottom: none; padding-bottom: 0; }
.trending-num { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 900; color: var(--gold); opacity: .8; line-height: 1; min-width: 30px; }
.trending-title { font-size: .92rem; font-weight: 700; color: var(--text-primary); line-height: 1.5; }
.trending-item:hover .trending-title { color: var(--gold); }
.trending-meta { font-size: .75rem; color: var(--text-muted); }

/* ── Section headers ── */
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border-subtle); }
.section-header h3, .section-header h4 { margin: 0; font-size: 1.25rem; font-weight: 800; padding-right: 14px; position: relative; }
.section-header h3::before, .section-header h4::before { content: ''; position: absolute; right: 0; top: 4px; bottom: 4px; width: 3px; background: var(--gold); border-radius: 2px; }

/* ── Category hero ── */
.category-hero { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 2.5rem; text-align: center; }
.category-hero h1 { font-weight: 900; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.category-hero .cat-icon { color: var(--gold); }
.category-hero .cat-count { display: inline-block; margin-top: 1rem; background: var(--gold-dim); color: var(--gold); border: 1px solid var(--border-accent); padding: 4px 16px; border-radius: var(--radius-pill); font-size: .85rem; font-weight: 700; }

/* ── Pagination ── */
.pagination-dark { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.pagination-dark .page-link { background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-secondary); border-radius: var(--radius-sm); width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-weight: 600; transition: var(--ease); text-decoration: none; }
.pagination-dark .page-link:hover { background: var(--gold-dim); border-color: var(--border-accent); color: var(--gold); }
.pagination-dark .page-item.active .page-link { background: var(--gold); border-color: transparent; color: var(--gold-ink); }

/* ── Single post ── */
#readProgress { background: var(--gold); }
.post-header { margin-bottom: 1.75rem; }
.post-meta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; color: var(--text-muted); font-size: .875rem; }
.post-meta i { color: var(--gold); margin-left: 4px; }

.post-quick-tools .post-tool-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    transition: var(--ease);
    cursor: pointer;
}
.post-quick-tools .post-tool-btn:hover {
    border-color: var(--border-accent);
    color: var(--gold);
    background: var(--gold-dim);
    transform: translateY(-1px);
}
.post-meta-bar {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    transition: var(--ease);
}
.post-meta-pills .meta-pill {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--ease);
}
.post-meta-pills .meta-pill:hover {
    border-color: var(--border-accent);
    background: var(--gold-dim);
    color: var(--gold) !important;
}
.text-gold { color: var(--gold) !important; }
.post-featured-img { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2rem; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); }

.glass-card { background: var(--bg-glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
#postToc { border-right: 3px solid var(--gold); }
#postTocList a { color: var(--text-secondary); font-size: .9rem; text-decoration: none; transition: var(--ease); }
#postTocList a:hover { color: var(--gold); }

.post-content { font-size: 1.12rem; line-height: 2.05; color: var(--text-secondary); }
.post-content p { margin-bottom: 1.6rem; }
.post-content h2, .post-content h3, .post-content h4 { color: var(--text-primary); margin-top: 2.4rem; margin-bottom: 1.1rem; padding-right: 14px; position: relative; }
.post-content h2::before, .post-content h3::before { content: ''; position: absolute; right: 0; top: 6px; bottom: 6px; width: 3px; background: var(--gold); border-radius: 2px; }
.post-content blockquote { background: var(--bg-surface); border-right: 3px solid var(--gold); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 1.4rem 1.6rem; margin: 1.75rem 0; font-style: italic; color: var(--text-primary); }
.post-content img { border-radius: var(--radius-md); margin: 1.75rem 0; border: 1px solid var(--border-subtle); }
.post-content a { color: var(--gold); border-bottom: 1px solid var(--border-accent); }

.tag-link { background: var(--bg-glass); border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: .82rem; font-weight: 600; padding: 4px 14px; border-radius: var(--radius-pill); transition: var(--ease); text-decoration: none; display: inline-block; }
.tag-link:hover { background: var(--gold-dim); color: var(--gold); border-color: var(--border-accent); }

.share-btn { width: 40px; height: 40px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: .95rem; border: 1px solid var(--border-subtle); background: var(--bg-glass); transition: var(--ease); text-decoration: none; }
.share-btn:hover { transform: translateY(-2px); color: #fff; }
.share-btn.twitter:hover { background: #000; border-color: #000; }
.share-btn.facebook:hover { background: #1877f2; border-color: #1877f2; }
.share-btn.whatsapp:hover { background: #25d366; border-color: #25d366; }
.share-btn.telegram:hover { background: #229ed9; border-color: #229ed9; }

.related-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; transition: var(--ease); height: 100%; }
.related-card:hover { transform: translateY(-3px); border-color: var(--border-accent); }
.related-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.related-body { padding: 1rem; }
.related-title a { color: var(--text-primary); font-weight: 700; font-size: .9rem; line-height: 1.45; }
.related-title a:hover { color: var(--gold); }

.comments-section { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2rem; margin-top: 2.5rem; }
.dark-input { background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-sm) !important; color: var(--text-primary) !important; padding: .75rem 1rem !important; }
.dark-input:focus { border-color: var(--border-accent) !important; box-shadow: 0 0 0 3px var(--gold-dim) !important; }
.comment-item { padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: 1.25rem; }
.comment-item:last-child { border-bottom: none; margin-bottom: 0; }
.comment-name { color: var(--text-primary); font-weight: 700; }
.comment-text { color: var(--text-secondary); line-height: 1.8; }
.comment-date { color: var(--text-muted); font-size: .8rem; }

/* ── Search page ── */
.search-hero { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 2.5rem; text-align: center; }
.search-input-wrap { max-width: 600px; margin: 0 auto; position: relative; }
.search-input-wrap input { background: var(--bg-base); border: 2px solid var(--border-accent); border-radius: var(--radius-pill); padding: .85rem 5.5rem .85rem 1.5rem; font-size: 1rem; color: var(--text-primary); width: 100%; }
.search-input-wrap input:focus { outline: none; box-shadow: 0 0 0 4px var(--gold-dim); border-color: var(--gold); }
.search-input-wrap .search-icon { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); color: var(--gold); }

/* ── Author page ── */
.author-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 2.5rem; display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.author-avatar-wrap { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid var(--border-accent); }
.author-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
.author-avatar-fallback { width: 100%; height: 100%; background: var(--gold-dim); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 800; }
.author-role-badge { display: inline-block; background: var(--gold-dim); color: var(--gold); padding: 4px 14px; border-radius: var(--radius-pill); font-size: .82rem; font-weight: 700; }
.author-stats { display: flex; gap: 2rem; text-align: center; margin-right: auto; }
.author-stat strong { display: block; font-size: 1.8rem; font-weight: 800; color: var(--text-primary); font-family: var(--font-mono); }
.author-stat span { color: var(--text-muted); font-size: .82rem; }
.author-pagination a { color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 14px; text-decoration: none; transition: var(--ease); }
.author-pagination a:hover { border-color: var(--border-accent); color: var(--gold); }
.author-pagination a.active { background: var(--gold); color: var(--gold-ink); border-color: transparent; }

/* ── Profile (settings) page ── */
.profile-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; }
.profile-card-header { background: linear-gradient(160deg, var(--bg-surface), var(--bg-card)); border-bottom: 1px solid var(--border-subtle); text-align: center; padding: 2.75rem 2rem; }
.profile-avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border-accent); }
.profile-avatar-edit { width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); display: flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; }
.profile-role-badge { background: var(--gold-dim); color: var(--gold); }
.profile-card-body { padding: 2rem 2.5rem; }

/* ── Static page ── */
.page-article { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2.5rem; }

/* ── Error pages ── */
.error-code { background: linear-gradient(135deg, var(--gold), var(--gold-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; }
.error-code.is-danger { background: linear-gradient(135deg, #e5484d, #a71d2a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.error-btn-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border-accent); border-radius: var(--radius-pill); font-weight: 600; }
.error-btn-outline:hover { border-color: var(--gold); color: var(--gold); }

/* ── Footer ── */
footer { background: var(--bg-surface); border-top: 1px solid var(--border-subtle); color: var(--text-secondary); margin-top: 3.5rem; }
footer a { color: var(--text-secondary); }
footer a:hover { color: var(--gold); }
.footer-quick-link { display: flex; align-items: center; gap: 8px; }
.footer-quick-link i { color: var(--gold); font-size: .75rem; }
.social-icon-btn { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--bg-glass); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: var(--ease); }
.social-icon-btn:hover { color: #fff; border-color: transparent; }
.social-icon-btn.fb:hover { background: #1877f2; }
.social-icon-btn.tw:hover { background: #000; }
.social-icon-btn.yt:hover { background: #ff0000; }
.social-icon-btn.ig:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.footer-pill-link { font-size: .8rem; padding: 5px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); color: var(--text-muted); transition: var(--ease); }
.footer-pill-link:hover { color: var(--gold); border-color: var(--border-accent); }

/* ── Site Builder blocks (home-builder.html.twig, builder_header/footer/ticker/sidebar) ── */
.uc-container, .sb-homepage .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.sb-homepage { background: var(--bg-base); color: var(--text-primary); padding: 24px 0 60px; }
.sb-row { margin-bottom: 40px; }
.sb-heading { font-family: var(--font-heading); font-size: 22px; font-weight: 800; margin: 0 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle); position: relative; }
.sb-heading::after { content: ''; position: absolute; bottom: -1px; right: 0; width: 44px; height: 2px; background: var(--gold); }

.uc-header { background: var(--bg-base); border-bottom: 1px solid var(--border-subtle); }
.uc-header__utility-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 13px; color: var(--text-muted); }
.uc-icon-btn { background: none; border: none; color: var(--text-muted); padding: 6px; border-radius: 6px; transition: var(--ease); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.uc-icon-btn:hover { color: var(--gold); background: var(--gold-dim); }
.uc-icon-sun { display: none; }
.uc-icon-moon { display: inline-block; }
[data-theme="dark"] .uc-icon-moon { display: none !important; }
[data-theme="dark"] .uc-icon-sun { display: inline-block !important; }
.uc-header__masthead { text-align: center; padding: 20px 0 16px; }
.uc-logo__text { font-family: var(--font-heading); font-weight: 800; font-size: 36px; color: var(--gold); }
.uc-nav { border-top: 1px solid var(--border-subtle); }
.uc-nav__row { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.uc-nav__link { padding: 14px 2px; font-size: 15px; font-weight: 600; color: var(--text-secondary); border-bottom: 3px solid transparent; text-decoration: none; transition: var(--ease); }
.uc-nav__link:hover { color: var(--gold); }
.uc-nav__link.is-active { color: var(--gold); font-weight: 800; border-bottom-color: var(--gold); }

/* ── Manual header builder (rows/zones — renderHeaderRows) ──
   A row's zones wrap by default (topbar/main only ever hold a few
   elements); the nav row can carry a full category list, so it scrolls
   horizontally in one line instead of wrapping into a ragged stack. */
.uc-hzone { flex-wrap: wrap; row-gap: 8px; }
.uc-hrow--nav .uc-container { flex-wrap: wrap; row-gap: 6px; }
.uc-hrow--nav .uc-hzone {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
}
.uc-hrow--nav .uc-hzone::-webkit-scrollbar { display: none; }

.nav-menu { min-width: 0; }
.nav-menu .navbar-nav { flex-wrap: nowrap; }
.nav-menu .nav-item { flex: none; }
.nav-menu .nav-link {
    display: inline-block;
    padding: 8px 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: var(--ease);
}
.nav-menu .nav-link:hover { color: var(--gold); }
.nav-menu .nav-link.is-active { color: var(--gold); border-bottom-color: var(--gold); }

@media (max-width: 767px) {
    .uc-hrow--main .uc-container { flex-wrap: wrap; }
    .nav-menu .nav-link { font-size: 13px; padding: 6px 3px; }
}

.uc-slider--split { display: flex; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-card); }
.uc-slider--split .uc-slide { display: none; width: 100%; text-decoration: none; color: inherit; }
.uc-slider--split .uc-slide.is-active { display: flex; width: 100%; }
.uc-slider--split .uc-slide__image { flex: 1.2; aspect-ratio: 16/10; background: var(--bg-surface); background-size: cover; background-position: center; }
.uc-slider--split .uc-slide__body { flex: 1; padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.uc-slider--split .uc-slide__cat { color: var(--gold); font-weight: 700; font-size: 13px; }
.uc-slider--split .uc-slide__title { margin: 0; font-size: 22px; font-weight: 800; color: var(--text-primary); }
.uc-slider--split .uc-slide__excerpt { margin: 0; font-size: 14px; color: var(--text-secondary); line-height: 1.8; }
.uc-slider--split .uc-slide-dots { display: flex; gap: 6px; margin-top: 4px; }
.uc-slider--split .uc-slide-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--border-subtle); padding: 0; }
.uc-slider--split .uc-slide-dots button.is-active { background: var(--gold); width: 18px; border-radius: 4px; }
@media (max-width: 768px) { .uc-slider--split .uc-slide.is-active { flex-direction: column; } .uc-slider--split .uc-slide__body { padding: 20px; } }

.uc-posts-carousel { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.uc-posts-carousel .uc-card { scroll-snap-align: start; flex: 0 0 260px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: var(--ease); }
.uc-posts-carousel .uc-card:hover { transform: translateY(-3px); border-color: var(--border-accent); }
.uc-posts-carousel .uc-card__image { aspect-ratio: 16/9; background: var(--bg-surface); background-size: cover; background-position: center; }
.uc-posts-carousel .uc-card__body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.uc-posts-carousel .uc-card__cat { color: var(--gold); font-size: 11px; font-weight: 700; }
.uc-posts-carousel .uc-card__title { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--text-primary); line-height: 1.5; }
.uc-posts-carousel .uc-card__time { font-size: 11px; color: var(--text-muted); margin-top: auto; }

.uc-posts-magazine { display: flex; gap: 24px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 20px; }
.uc-posts-magazine .uc-mag-lead { flex: 1.3; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.uc-posts-magazine .uc-mag-lead__image { aspect-ratio: 16/10; background: var(--bg-surface); border-radius: var(--radius-md); background-size: cover; background-position: center; }
.uc-posts-magazine .uc-mag-lead__title { margin: 0; font-size: 19px; font-weight: 800; color: var(--text-primary); }
.uc-posts-magazine .uc-mag-lead:hover .uc-mag-lead__title { color: var(--gold); }
.uc-posts-magazine .uc-mag-list { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.uc-posts-magazine .uc-mag-item { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: inherit; align-items: center; }
.uc-posts-magazine .uc-mag-item:last-child { border-bottom: none; }
.uc-posts-magazine .uc-mag-item__thumb { width: 76px; height: 58px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--bg-surface); background-size: cover; background-position: center; }
.uc-posts-magazine .uc-mag-item__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.5; }
.uc-posts-magazine .uc-mag-item:hover .uc-mag-item__title { color: var(--gold); }
@media (max-width: 800px) { .uc-posts-magazine { flex-direction: column; } }

.sb-posts-tabbed { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 20px; }
.sb-posts-tabbed .nav-pills { border-bottom: 1px solid var(--border-subtle); padding-bottom: 10px; gap: 8px; }
.sb-posts-tabbed .nav-pills .nav-link { color: var(--text-muted); font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: var(--radius-sm); background: var(--bg-surface); border: 1px solid transparent; }
.sb-posts-tabbed .nav-pills .nav-link.active { background: var(--gold); color: var(--gold-ink); }
.sb-posts-tabbed .list-group-item { background: transparent; color: var(--text-primary); padding: 12px 0; border-bottom: 1px solid var(--border-subtle) !important; }
.sb-posts-tabbed .list-group-item:last-child { border-bottom: none !important; }

/* `flex:1` alone was written for the sidebar, where four tiles share ~320px
   and each lands near 72px. The same block also renders in the header bar and
   the footer, where the container is over 1300px wide — so four icons stretched
   to 321px each. A cap keeps the sidebar behaviour and stops the stretch. */
.sb-social { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 20px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sb-social a { flex: 1 1 auto; max-width: 88px; min-width: 44px; display: flex; align-items: center; justify-content: center; height: 42px; border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-subtle); transition: var(--ease); }
.sb-social a:hover { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
/* In a bar, the links ARE the element: no panel, no padding, icon-sized. */
.sb-social--bare { background: none; border: 0; border-radius: 0; padding: 0; gap: 8px; }
.sb-social--bare a { max-width: 40px; min-width: 40px; height: 40px; }

.sb-newsletter { background: linear-gradient(135deg, var(--bg-card), var(--bg-surface)); border: 1px solid var(--border-accent); border-radius: var(--radius-lg); padding: 28px 24px; color: var(--text-primary); }
.sb-newsletter h3 { font-size: 18px; font-weight: 800; }
.sb-newsletter p { font-size: 13px; color: var(--text-secondary); }
.sb-newsletter .form-control { background: var(--bg-base); border: 1px solid var(--border-subtle); }
.sb-newsletter .btn { background: var(--gold); color: var(--gold-ink); border: none; font-weight: 700; }
.sb-newsletter .btn:hover { background: var(--gold-light); }

.uc-footer { background: var(--bg-surface); color: var(--text-secondary); margin-top: 48px; }
.uc-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 56px 0 32px; }
.uc-footer__heading { margin: 0 0 12px; font-size: 14px; font-weight: 800; color: var(--text-primary); }
.uc-footer__link, .uc-footer__text { display: block; font-size: 14px; color: var(--text-secondary); text-decoration: none; margin-bottom: 10px; }
.uc-footer__link:hover { color: var(--gold); }
.uc-footer__logo { color: var(--gold); font-size: 28px; }
.uc-footer__social { display: flex; gap: 10px; }
.uc-footer__social-btn { width: 34px; height: 34px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: var(--ease); }
.uc-footer__social-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.uc-footer__bottom { border-top: 1px solid var(--border-subtle); padding: 18px 0; text-align: center; font-size: 13px; color: var(--text-muted); }
@media (max-width: 900px) { .uc-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .uc-footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Jannah-Style Premium Blocks & Widgets System (Ultra CMS)
   ========================================================================== */

/* ── Container Expansion on Wide Displays (Fixes claustrophobic frame) ── */
@media (min-width: 1200px) {
    .container, .uc-container {
        max-width: 1260px;
    }
}
@media (min-width: 1400px) {
    .container, .uc-container {
        max-width: 1380px;
    }
}
@media (min-width: 1600px) {
    .container, .uc-container {
        max-width: 1460px;
    }
}

/* ── Jannah Section Block Header ── */
.mnbr-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-subtle, rgba(0,0,0,0.08));
    position: relative;
}
.mnbr-block-header::after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 60px;
    height: 2px;
    background: var(--gold, #d4a843);
}
[dir="ltr"] .mnbr-block-header::after {
    right: auto;
    left: 0;
}
.mnbr-block-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.mnbr-title-accent {
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--gold, #d4a843);
    border-radius: 2px;
}
.mnbr-more-btn {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bg-card-hover, rgba(0,0,0,0.04));
    transition: var(--ease);
}
.mnbr-more-btn:hover {
    color: #fff;
    background: var(--gold, #d4a843);
    transform: translateX(-2px);
}

/* ── Jannah 2-Column Category (Large First + List) ── */
.mnbr-category-block {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 16px);
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: var(--ease);
}
.mnbr-category-block:hover {
    border-color: var(--border-accent);
}

/* Lead Post */
.mnbr-lead-card {
    text-decoration: none;
    color: inherit;
    display: block;
    margin-bottom: 16px;
    border-bottom: 1px dashed var(--border-subtle);
    padding-bottom: 16px;
}
.mnbr-lead-thumb {
    /* It is an <a>, so it defaults to display:inline — and aspect-ratio is
       ignored on inline non-replaced elements. The box collapsed to the text
       line height while the <img> inside overflowed it, so the card reported
       145px while its content needed 257px and the list below was drawn on
       top of the title. */
    display: block;
    position: relative;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin-bottom: 12px;
    background: var(--bg-surface);
}
.mnbr-lead-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.mnbr-lead-card:hover .mnbr-lead-thumb img {
    transform: scale(1.05);
}
.mnbr-cat-pill {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--gold, #d4a843);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    z-index: 2;
}
.mnbr-lead-title {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.45;
    margin-bottom: 6px;
    transition: color 0.15s;
}
.mnbr-lead-card:hover .mnbr-lead-title {
    color: var(--gold, #d4a843);
}
.mnbr-lead-excerpt {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 8px;
}
.mnbr-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.76rem;
    color: var(--text-muted);
}
.mnbr-meta i {
    color: var(--gold, #d4a843);
    margin-inline-end: 4px;
}

/* Sub-list items */
.mnbr-sub-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mnbr-sub-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    padding: 8px;
    border-radius: var(--radius-sm, 8px);
    transition: background 0.15s ease;
}
.mnbr-sub-item:hover {
    background: var(--bg-card-hover);
}
.mnbr-sub-thumb {
    width: 90px;
    height: 65px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-surface);
}
.mnbr-sub-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}
.mnbr-sub-item:hover .mnbr-sub-thumb img {
    transform: scale(1.08);
}
.mnbr-sub-info {
    flex: 1;
    min-width: 0;
}
.mnbr-sub-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}
.mnbr-sub-item:hover .mnbr-sub-title {
    color: var(--gold, #d4a843);
}

/* ── Jannah Tabbed Sidebar Widget ── */
.mnbr-tabbed-widget {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    margin-bottom: 24px;
}
.mnbr-tabs-nav {
    display: flex;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}
.mnbr-tab-btn {
    flex: 1;
    padding: 12px 6px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.mnbr-tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-card-hover);
}
.mnbr-tab-btn.is-active {
    color: var(--gold, #d4a843);
    border-bottom-color: var(--gold, #d4a843);
    background: var(--bg-card);
}
.mnbr-tab-panes {
    padding: 14px;
}
.mnbr-tab-pane {
    display: none;
}
.mnbr-tab-pane.is-active {
    display: block;
    animation: mnbrFadeIn 0.25s ease;
}
@keyframes mnbrFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.mnbr-tab-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mnbr-tab-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    padding: 6px;
    border-radius: var(--radius-sm, 8px);
    transition: background 0.15s ease;
}
.mnbr-tab-item:hover {
    background: var(--bg-card-hover);
}
.mnbr-tab-rank {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
}
.mnbr-tab-rank.rank-1 {
    background: linear-gradient(135deg, #d4a843, #f59e0b);
    color: #fff;
}
.mnbr-tab-rank.rank-2 {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    color: #fff;
}
.mnbr-tab-rank.rank-3 {
    background: linear-gradient(135deg, #b45309, #d97706);
    color: #fff;
}
.mnbr-tab-rank.rank-subtle {
    background: var(--bg-surface);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}
.mnbr-tab-thumb {
    width: 68px;
    height: 52px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-surface);
}
.mnbr-tab-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mnbr-tab-info {
    flex: 1;
    min-width: 0;
}
.mnbr-tab-title {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    margin: 0 0 3px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}
.mnbr-tab-item:hover .mnbr-tab-title {
    color: var(--gold, #d4a843);
}
.mnbr-tab-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    gap: 8px;
}

/* ── Jannah Symmetrical 4-City Weather Widget ── */
.sb-weather-widget {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    margin-bottom: 24px;
}
.sb-weather-header {
    padding: 12px 16px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}
.sb-weather-grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px;
}
.sb-wx-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
    transition: var(--ease);
}
.sb-wx-card:hover {
    border-color: var(--gold, #d4a843);
    transform: translateY(-2px);
}
.sb-wx-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.sb-wx-temp {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--gold, #d4a843);
    line-height: 1;
    margin: 4px 0;
}
.sb-wx-icon {
    font-size: 1.5rem;
    line-height: 1;
}
.sb-wx-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ── Jannah Overlay Grid Cards (For sections like Arab World) ── */
.mnbr-card-overlay {
    position: relative;
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    height: 240px;
    display: block;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    transition: var(--ease);
}
.mnbr-card-overlay:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.mnbr-overlay-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}
.mnbr-card-overlay:hover .mnbr-overlay-bg {
    transform: scale(1.06);
}
.mnbr-overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}
.mnbr-overlay-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    z-index: 2;
    color: #fff;
}
.mnbr-overlay-cat {
    display: inline-block;
    background: var(--gold, #d4a843);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 6px;
}
.mnbr-overlay-title {
    color: #fff !important;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 6px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mnbr-overlay-meta {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.75);
    display: flex;
    gap: 10px;
}

/* ── Enhanced Default Post Cards (Aspect Ratio 16/10 & Zoom) ── */
.post-card {
    border-radius: var(--radius-lg, 16px) !important;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle) !important;
    transition: var(--ease);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.post-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-accent) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.post-card-thumb-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--bg-surface);
}
.post-card-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.post-card:hover .post-card-thumb-wrap img {
    transform: scale(1.06);
}
.post-card .card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.post-card .card-title {
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.45;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-card .card-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.15s;
}
.post-card:hover .card-title a {
    color: var(--gold, #d4a843);
}
.post-card-meta {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.74rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
}


/* ══════════════════════════════════════════════════════════════════
   Split slider — corrections
   Three defects fixed together:
   1) The dots container is emitted as a SIBLING of the slides inside a
      flex row, so it claimed its own column (~74px wide, full height)
      and appeared as a dark vertical bar beside the slide. It is taken
      out of flow and pinned inside instead.
   2) The stacking breakpoint watched the VIEWPORT (max-width:768px),
      but the slider lives in col-lg-8 — on a 1200px screen its own box
      is only ~560px, so it stayed side-by-side and the title collapsed
      into a narrow strip. A container query measures the slider itself.
   3) overflow:hidden on the root clipped the body, so only the first
      part of the text was visible. The slide now sizes to its content.
   ══════════════════════════════════════════════════════════════════ */
.uc-slider--split {
  position: relative;
  container-type: inline-size;
  align-items: stretch;
}

/* The height is the design decision, not a by-product.
   Before this, `aspect-ratio:16/10` on the image plus `align-self:stretch`
   gave the image a definite cross size, from which the ratio derived a main
   size of 554px on an 811px slider — the image chose both its own width and
   the slider's height, and the text lived on the 257px left over. The
   inspector's "الارتفاع" control was computed in blockSlider() and then
   dropped on the way into the split branch, so it did nothing at all.
   Now the renderer passes it down as --uc-slide-h and the ratio is off. */
.uc-slider--split .uc-slide.is-active {
  align-items: stretch;
  min-height: var(--uc-slide-h, 420px);
  min-width: 0;
}
.uc-slider--split .uc-slide__image {
  aspect-ratio: auto;
  flex: 0 0 58%;
  align-self: stretch;
  min-height: 100%;
}
.uc-slider--split .uc-slide__body {
  flex: 1 1 42%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  padding-bottom: 46px;  /* clearance for the pinned dots */
  /* `center` overflows BOTH edges when content is taller than the box, so a
     long headline escaped past the top of the slider and `overflow:hidden`
     on the root sliced it off mid-letter. `safe` centres while there is room
     and falls back to start-aligned once there isn't. */
  justify-content: safe center;
}

/* A slide must never be sized by how long an editor's headline happens to be.
   Clamping is what keeps every slide in the rotation the same height.
   The budget: 420px box less 32px top and 46px bottom padding leaves 342px.
   Four title lines (123) + four excerpt lines (101) + the category (20) +
   three 14px gaps (42) = 286 — the headline gets the slack, not the excerpt,
   because at three lines every one of the five headlines was being cut. */
.uc-slider--split .uc-slide__title {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.uc-slider--split .uc-slide__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.uc-slider--split .uc-slide-dots {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-start: 18px;
  z-index: 2;
  margin: 0;
  width: auto;
  height: auto;
  flex-direction: row;
  align-items: center;
}

/* Narrow column → stack. The breakpoint watches the slider's own box, not
   the viewport: in col-lg-8 the slider is ~560px on a 1200px screen, so a
   viewport media query left it side-by-side with the text in a strip.
   Stacked, the image gets its ratio back and the row height is free. */
@container (max-width: 720px) {
  .uc-slider--split .uc-slide.is-active { flex-direction: column; min-height: 0; }
  .uc-slider--split .uc-slide__image { aspect-ratio: 16 / 9; width: 100%; flex: none; min-height: 0; }
  .uc-slider--split .uc-slide__body { padding: 20px 20px 46px; }
  .uc-slider--split .uc-slide__title { font-size: 19px; -webkit-line-clamp: 4; }
}

/* ══════════════════════════════════════════════════════════════════
   Equal-height blocks in one row
   .mnbr-category-block already asks for height:100%, but the request
   died on the way up: Bootstrap stretches the .col-* to the row height,
   then .sb-block sits in between at auto height, so 100% resolved
   against the content — and two category blocks side by side ended up
   different heights whenever their article counts differed.
   Only a column holding a SINGLE block stretches; a column stacking
   several (newsletter + spacer + social) must keep its natural flow.
   :first-of-type/:last-of-type rather than :only-child because
   renderBlock() can append a <style> sibling for responsive rules.
   ══════════════════════════════════════════════════════════════════ */
.sb-row [class*="col-"] > div.sb-block:first-of-type:last-of-type {
  height: 100%;
}

/* ══════════════════════════════════════════════════════════════════
   Ad slot — placeholder
   An ad block with no code had no stylesheet whatsoever, so it drew a
   blank hole in the page that read as a layout bug. This makes an empty
   slot look intentional and sellable, and lets it absorb the leftover
   height of a stacked column so neighbouring columns bottom out level.
   ══════════════════════════════════════════════════════════════════ */
.sb-ad--placeholder { height: 100%; }

.sb-ad-ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  padding: 22px 18px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg, 16px);
  border: 1.5px dashed var(--border-accent, rgba(212,168,67,.45));
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(212,168,67,.14) 0%, transparent 60%),
    var(--bg-card, #fff);
  overflow: hidden;
  transition: var(--ease, all .2s ease);
}
.sb-ad-ph::after {                 /* soft sheen, keeps the panel from reading flat */
  content: '';
  position: absolute;
  inset-inline-end: -30%;
  inset-block-start: -60%;
  width: 70%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,.10), transparent);
  transform: rotate(18deg);
  pointer-events: none;
}
a.sb-ad-ph:hover {
  border-color: var(--gold, #d4a843);
  box-shadow: 0 10px 28px rgba(212,168,67,.16);
}

.sb-ad-ph__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--gold, #d4a843);
  background: rgba(212,168,67,.14);
}
.sb-ad-ph__title {
  font-family: var(--font-heading, inherit);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary, #111);
}
.sb-ad-ph__sub {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-secondary, #666);
  max-width: 30ch;
}
.sb-ad-ph__size {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .5px;
  padding: 2px 9px;
  border-radius: 99px;
  color: var(--text-secondary, #666);
  background: var(--bg-surface, rgba(0,0,0,.05));
}

/* A wide leaderboard has no room to stack — lay it out in a row. */
.sb-ad-ph--wide {
  flex-direction: row;
  gap: 14px;
  text-align: start;
}
.sb-ad-ph--wide .sb-ad-ph__sub { max-width: none; }

@media (max-width: 575px) {
  .sb-ad-ph--wide { flex-direction: column; text-align: center; }
  .sb-ad-ph__title { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════════
   Column alignment inside a builder row
   Bootstrap stretches the .col-* to the row height, but the blocks
   inside stack at their natural height and leave the short column
   ending well above the tall one. Making the column a flex box lets a
   designated filler — the ad slot — absorb what is left over, so both
   columns bottom out level without stretching a newsletter or a social
   bar out of shape.
   ══════════════════════════════════════════════════════════════════ */
.sb-row [class*="col-"] {
  display: flex;
  flex-direction: column;
}
.sb-row [class*="col-"] > div.sb-block { flex: 0 0 auto; }

/* An ad slot is the filler: it is the one block that looks right at any
   height. Only when it shares the column with something else — on its
   own it keeps its declared size. */
.sb-row [class*="col-"] > div.sb-block-ad:not(:first-of-type:last-of-type) {
  flex: 1 1 auto;
  min-height: 0;
}

/* The filler must not become an 800px-tall advert. The BLOCK keeps
   absorbing the leftover height so the columns still bottom out level,
   but the visible panel is capped at a real skyscraper size and centred
   inside the space it holds. */
.sb-row [class*="col-"] > div.sb-block-ad:not(:first-of-type:last-of-type) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sb-row [class*="col-"] > div.sb-block-ad:not(:first-of-type:last-of-type) > .sb-ad--placeholder {
  width: 100%;
  max-height: 600px;
}

/* ══════════════════════════════════════════════════════════════════
   Brand — logo swap by theme
   The wordmark is dark ink on the white header and must invert in dark
   mode. Both files ship in the markup and CSS picks one, so the correct
   logo is painted on the first frame instead of being swapped by JS
   after the theme is read.
   ══════════════════════════════════════════════════════════════════ */
.site-logo-img--dark { display: none !important; }
[data-theme="dark"] .site-logo-img--light { display: none !important; }
[data-theme="dark"] .site-logo-img--dark  { display: block !important; }


/* ══════════════════════════════════════════════════════════════════════
   الهيدر الافتراضي — كان شفافاً على كل تركيب

   renderHeader() has two paths. The drag-and-drop one emits its own inline
   background; the layout-matrix one emits only `class="site-header sticky-top"`
   — and this stylesheet had no rule for `.site-header` at all. Bootstrap's
   sticky-top supplied position and z-index and nothing else, so the bar had
   no background whatsoever.

   That path is not an edge case: defaultSections() always provides
   header_layout_desktop, so a site with no saved header — every fresh install —
   takes it. The failure only becomes visible when something passes underneath:
   on a post page the featured image scrolls straight through the logo and the
   menu. It looked fine on the homepage, which is why it survived this long.

   --bg-nav is deliberately near-opaque rather than solid; the blur is what
   makes that read as a design choice instead of an accident.
   ══════════════════════════════════════════════════════════════════════ */
#site-header.site-header {
  background: var(--bg-nav);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}


/* ══════════════════════════════════════════════════════════════════════
   مصفوفة تخطيط الهيدر والفوتر — كانت بلا ورقة أنماط بالكامل

   renderContentLayoutOutput() has emitted .content-layout-row /
   -row-inner / -cell since the header builder was written, and this
   stylesheet had zero rules for any of them. Five cells meant to sit across
   one bar were five plain block divs, so every element stacked: the social
   icons on one line, the logo on the next, the menu on the next, the search
   icon alone, the sign-in button alone. Exactly what the owner reported —
   "no alignment" — and it was never a spacing bug, it was a missing file.

   The matrix's own contract makes the layout: five cells per row, and an
   EMPTY cell is a spacer. So the filled cells size to their content and the
   empty ones absorb what is left, which is how
   [logo | · | menu | search | login] becomes a real header bar.

   Both the header and the footer render through this same function, which is
   why one set of rules fixes both.
   ══════════════════════════════════════════════════════════════════════ */
.content-layout-row {
  width: 100%;
}
/* A dark row is dark in BOTH site themes — it is the row's own setting, not
   the visitor's. So the colour is literal here rather than a theme token that
   would turn white the moment the site is in light mode. */
.content-layout-row[data-theme="dark"] {
  background: #0f1420;
  color: #e8edf3;
}
.content-layout-row[data-theme="dark"] a,
.content-layout-row[data-theme="dark"] .uc-footer__link {
  color: #cbd5e1;
}
.content-layout-row[data-theme="dark"] a:hover { color: var(--gold, #d9a441); }

/* Rows after the first are separated by a hairline rather than by margin, so
   a two-row header reads as one bar with a divider, not two stacked bars. */
.content-layout-row + .content-layout-row {
  border-top: 1px solid var(--border-subtle);
}
.content-layout-row[data-theme="dark"] + .content-layout-row[data-theme="dark"] {
  border-top-color: rgba(255, 255, 255, .08);
}

.content-layout-row-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding: 8px 0;
}

/* A filled cell is as wide as what it holds. */
.content-layout-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 0;
}

/* An empty cell is the spacer that pushes the rest apart — the whole point of
   the five-cell matrix, and the reason a header can be arranged without
   writing any CSS per site. */
.content-layout-cell-empty {
  flex: 1 1 0;
  min-width: 0;
}

/* The menu is the one cell that should give up space before the others: the
   logo and the buttons must never be squeezed to make room for a long nav. */
.content-layout-cell[data-cell-type="menu_header"],
.content-layout-cell[data-cell-type="menu_footer"],
.content-layout-cell[data-cell-type="menu_categories"] {
  flex: 1 1 auto;
  justify-content: center;
  overflow: hidden;
}
.content-layout-cell[data-cell-type="menu_header"] .nav,
.content-layout-cell[data-cell-type="menu_footer"] .nav,
.content-layout-cell ul.nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.content-layout-cell ul.nav::-webkit-scrollbar { display: none; }

.content-layout-cell[data-cell-type="logo"] img { max-height: 44px; width: auto; }
.content-layout-cell[data-cell-type="site_copyrights"] { flex: 1 1 auto; font-size: 13px; }

/* On a phone the five-cell row would squeeze everything to nothing. Wrap, and
   let the spacers collapse so the remaining items sit evenly. */
@media (max-width: 767.98px) {
  .content-layout-row-inner { flex-wrap: wrap; gap: 10px; min-height: 0; }
  .content-layout-cell-empty { flex-basis: 100%; height: 0; }
  .content-layout-cell[data-cell-type="menu_header"] { order: 9; flex-basis: 100%; justify-content: flex-start; }
}

/* The social bar inside a header/footer row is icons, not a widget panel. */
.social-links-bar { display: flex; align-items: center; }