/* ==========================================================================
   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:   var(--font-lang, system-ui, sans-serif);   /* the builder's choice overrides */
    --font-body:      var(--font-lang, system-ui, 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-inline-start: 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-block: .42rem; padding-inline: .85rem; padding-inline-start: 2.2rem; 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; inset-inline-start: .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; inset-inline-end: 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-inline-start: 14px; position: relative; }
.section-header h3::before, .section-header h4::before { content: ''; position: absolute; inset-inline-start: 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-inline-end: 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);
}
.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-inline-start: 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-inline-start: 14px; position: relative; }
.post-content h2::before, .post-content h3::before { content: ''; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px; width: 3px; background: var(--gold); border-radius: 2px; }
.post-content blockquote { background: var(--bg-surface); border-inline-start: 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; inset-inline-end: 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-inline-start: 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; inset-inline-start: 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. */
/* ── ما كان سطرياً ──
   كان كلُّ صفٍّ ومنطقةٍ يخرجان من `renderHeaderRows()` بأنماطٍ سطرية،
   والسطريُّ يغلب الملف: فقاعدةُ `@media` لا تستطيع أن تعيد ترتيب الهيدر
   على الهاتف مهما كُتب لها. صارت هنا، فصار الترتيبُ قابلاً للتغيّر. */
.uc-hrow__bar {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
}
.uc-hzone {
    display: flex;
    align-items: center;
    gap: 14px;
    /* `flex-shrink: 0`: كان `0 1 auto` فينكمش الجانبان أمام وسطٍ ينمو.
       فيتقلّص حقلُ البحث إلى شريحةٍ بلا عرض — تُرى كعنصرٍ غريبٍ قبل
       أيقونة البحث — وتلتفّ أيقوناتُ السوشيال عموداً.

       وتحت ٩٩٢ لا خطر: صفوفُ سطح المكتب مخفيّةٌ كلُّها وما يظهر شريطُ
       الهاتف. */
    flex: 0 0 auto;
}
.uc-hzone--start  { justify-content: flex-start; }
.uc-hzone--center { justify-content: center; flex: 1 1 auto; min-width: 0; }
.uc-hzone--end    { justify-content: flex-end; }

/* في الهيدر لا تلتفّ الأيقونات: `.sb-social` مبنيّةٌ لقسمٍ في الصفحة
   يتّسع لسطرين، وفي صفّ هيدرٍ ارتفاعُه ثابت يخرج السطرُ الثاني منه. */
.uc-hzone .sb-social { flex-wrap: nowrap; }
.uc-hzone .sb-social a { flex: 0 0 auto; }

/* وحقلُ البحث لا ينزل تحت عرضٍ يُكتب فيه. */
.uc-hzone .search-form-inline { flex: 0 0 auto; }
.uc-hzone .search-form-inline input { min-width: 180px; }
@media (max-width: 1200px) {
    .uc-hzone .search-form-inline input { min-width: 130px; }
}

/* ── نقطةُ فصلٍ واحدة للهيدر ──
   كان ترتيبا سطح المكتب والجوال يتبادلان عند ٩٩٢ (`d-lg-*` من بوتستراب)
   وقواعدُ الهيدر هنا عند ٧٦٧. فما بين العددين يظهر ترتيبُ الجوال
   بأنماط سطح المكتب — شريطٌ لا هو هذا ولا ذاك. */
.uc-header__at--mobile { display: none; }
@media (max-width: 991.98px) {
    .uc-header__at--desktop { display: none; }
    .uc-header__at--mobile  { display: block; }
}

/* ── شريطُ الهاتف ── */
.uc-mbar {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 0;
}
.uc-mbar__logo { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.uc-mbar__logo img { max-height: 40px; width: auto; }
.uc-mbar__end  { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.uc-mbar__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-md, 8px);
    background: transparent;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
}
.uc-mbar__btn:hover { background: var(--bg-surface); }

/* ── اللوحةُ التي يفتحها الزرّ ──
   `hidden` هو الحارس، لا `display:none` في صنف: العنصرُ المخفيُّ بالسمة
   لا يقرؤه قارئُ الشاشة ولا يصله التبويب، وفتحُه سطرٌ واحدٌ في JS. */
.uc-sidemenu { position: fixed; inset: 0; z-index: 1080; }
.uc-sidemenu[hidden] { display: none !important; }
.uc-sidemenu__veil { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.uc-sidemenu__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(320px, 84vw);
    background: var(--bg-card, #fff);
    box-shadow: 0 0 40px rgba(0,0,0,.25);
    padding: 56px 18px 18px;
    overflow-y: auto;
    transform: translateX(0);
}
.uc-sidemenu--fullscreen .uc-sidemenu__panel { width: 100%; }
.uc-sidemenu__x {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    width: 36px; height: 36px;
    border: 0; border-radius: 50%;
    background: var(--bg-surface, #f1f5f9);
    color: inherit; font-size: 16px; cursor: pointer;
}
/* القائمةُ داخل اللوحة تنزل عموداً: هي نفسُها `nav-menu` التي تُرصّ
   أفقياً في الهيدر، ولا يُعاد بناؤها هنا كي لا يفترق شكلُ الروابط. */
/* `!important` هنا مقصود: المصيّر يُخرج `flex-row` من بوتستراب على هذا
   العنصر بعينه، وهي `flex-direction: row !important`. وطرحُ الصنف من
   المصيّر يكسر رصَّ القائمة سطراً في الهيدر نفسه. */
.uc-sidemenu .nav-menu,
.uc-sidemenu .nav-menu .navbar-nav {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 2px !important;
    width: 100%;
}
.uc-sidemenu .nav-menu .nav-item { flex: 0 0 auto; width: 100%; }
.uc-sidemenu .nav-menu .nav-link {
    display: block;
    padding: 12px 8px;
    font-size: 16px;
    white-space: normal;
    border-bottom: 1px solid var(--border-subtle);
}
.uc-sidemenu .nav-menu .nav-link:last-child { border-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
    .uc-sidemenu__panel { animation: uc-slide-in .18s ease-out; }
    .uc-sidemenu--fullscreen .uc-sidemenu__panel { animation: uc-fade-in .16s ease-out; }
}
@keyframes uc-slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes uc-fade-in  { from { opacity: 0; } to { opacity: 1; } }
[dir="rtl"] .uc-sidemenu__panel { inset-inline-start: 0; }
@keyframes uc-slide-in-rtl { from { transform: translateX(100%); } to { transform: translateX(0); } }

.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 }` كانت هنا، وصارت
       لا تُطبَّق أبداً: صفوفُ سطح المكتب مخفيّةٌ كلُّها تحت ٩٩٢، وما يظهر
       هو `uc-mbar`. قاعدةٌ لا تُطبَّق تُقرأ لاحقاً كأنها تحرس شيئاً. */
    .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); }
/* category-tabs uses the same Bootstrap pills and had no rule of its own: its active pill took Bootstrap's blue while
   the theme's .nav-link.active tinted the text — «أطباق رئيسية» blue on blue on the recipes demo's homepage. */
/* !important where the site-wide .nav-link rule above sets it — colour and padding — or these would lose to it. */
.sb-category-tabs .nav-pills { gap: 8px; }
.sb-category-tabs .nav-pills .nav-link { color: var(--text-muted) !important; font-size: 13px; font-weight: 700; padding: 6px 14px !important; border-radius: var(--radius-sm); background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.sb-category-tabs .nav-pills .nav-link:hover { color: var(--theme-primary, var(--gold)) !important; background: var(--bg-surface); }
.sb-category-tabs .nav-pills .nav-link.active { background: var(--theme-primary, var(--gold)); border-color: transparent; color: #fff !important; }
.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;
    inset-inline-start: 0;
    width: 60px;
    height: 2px;
    background: var(--gold, #d4a843);
}
.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);
}
[dir="rtl"] .mnbr-more-btn:hover {
    transform: translateX(-2px);
}
[dir="ltr"] .mnbr-more-btn:hover {
    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;
    inset-inline-end: 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;
    inset-inline: 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; }



/* ═══════════════════════════════════════════════════════════════════
   ودجات الوصفات

   تقرأ ما يملؤه المحرّر أصلاً — الوقت والمطبخ والتقييم — فلا واحدةَ
   منها تحتاج ضبطاً قبل أن تعمل.
   ═══════════════════════════════════════════════════════════════════ */
.mnbr-sec-t {
  font-size: 1.35rem; font-weight: 800; margin: 0 0 14px;
  padding-inline-start: 12px; border-inline-start: 4px solid var(--theme-primary, #c2410c);
}

/* طبق اليوم */
.mnbr-rotd {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 22px; align-items: center; margin: 26px 0;
  background: var(--bg-card, #fff); border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 18px; overflow: hidden;
}
.mnbr-rotd__img { position: relative; aspect-ratio: 4 / 3; }
.mnbr-rotd__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mnbr-rotd__tag {
  position: absolute; inset-inline-start: 14px; inset-block-start: 14px;
  background: var(--theme-primary, #c2410c); color: #fff;
  font-size: 12px; font-weight: 700; padding: 5px 13px; border-radius: 999px;
}
.mnbr-rotd__b { padding: 8px 22px 22px; }
.mnbr-rotd__t { font-size: 1.7rem; line-height: 1.35; margin: 0 0 10px; }
.mnbr-rotd__t a { color: inherit; text-decoration: none; }
.mnbr-rotd__x { color: var(--text-secondary, #64748b); margin: 0 0 14px; line-height: 1.9; }
.mnbr-rotd__m { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.mnbr-rotd__m span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-secondary, #64748b);
}
.mnbr-rotd__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--theme-primary, #c2410c); color: #fff; text-decoration: none;
  padding: 11px 22px; border-radius: 999px; font-weight: 700; font-size: 14px;
}

/* وصفات سريعة */
.mnbr-quick { margin: 26px 0; }
.mnbr-quick__g {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
}
.mnbr-quick__c {
  display: block; text-decoration: none; color: inherit; position: relative;
  border-radius: 14px; overflow: hidden; background: var(--bg-card, #fff);
  border: 1px solid var(--border-subtle, #e2e8f0);
}
.mnbr-quick__c img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.mnbr-quick__t {
  display: block; padding: 10px 12px 12px; font-size: 13.5px; font-weight: 700; line-height: 1.6;
}
.mnbr-quick__m {
  position: absolute; inset-inline-end: 8px; inset-block-start: 8px;
  background: rgba(15, 23, 42, .82); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}

/* مطابخ العالم */
.mnbr-cuisines { margin: 26px 0; }
.mnbr-cuisines__g { display: flex; flex-wrap: wrap; gap: 10px; }
.mnbr-cuisine {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  padding: 9px 16px; border-radius: 999px; background: var(--bg-card, #fff);
  border: 1px solid var(--border-subtle, #e2e8f0); color: inherit; transition: all .18s;
}
.mnbr-cuisine:hover { border-color: var(--theme-primary, #c2410c); }
.mnbr-cuisine__n { font-size: 14px; font-weight: 700; }
.mnbr-cuisine__c {
  font-size: 11px; color: var(--text-muted, #94a3b8);
  background: var(--bg-surface, #f1f5f9); padding: 1px 8px; border-radius: 999px;
}

/* الأعلى تقييماً */
.mnbr-top { margin: 26px 0; }
.mnbr-top__g {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px;
}
.mnbr-top__c {
  display: block; text-decoration: none; color: inherit;
  border-radius: 14px; overflow: hidden; background: var(--bg-card, #fff);
  border: 1px solid var(--border-subtle, #e2e8f0);
}
.mnbr-top__c img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.mnbr-top__t { display: block; padding: 10px 12px 4px; font-size: 13.5px; font-weight: 700; line-height: 1.6; }
.mnbr-top__r {
  display: block; padding: 0 12px 12px; font-size: 12.5px; font-weight: 700; color: #b45309;
}
.mnbr-top__r em { font-style: normal; color: var(--text-muted, #94a3b8); font-weight: 400; }

@media (max-width: 780px) {
  .mnbr-rotd { grid-template-columns: 1fr; }
  .mnbr-rotd__t { font-size: 1.35rem; }
}


/* شارة جودة الفيديو — على المصغّرة، مقابل شارة المدّة. */
.vid-q {
  position: absolute; inset-inline-start: 8px; inset-block-end: 8px;
  background: rgba(15, 23, 42, .82); color: #fff;
  font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 4px;
}
.card-channel i { opacity: .75; }


/* كبسولات التصفية — صفٌّ يمرّ أفقياً على الجوال بلا أن يلتفّ. */
.mnbr-pills {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.mnbr-pills::-webkit-scrollbar { display: none; }
.mnbr-pill {
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  background: var(--bg-surface, #f1f5f9); color: var(--text-secondary, #64748b);
  border: 1px solid transparent; transition: all .16s;
}
.mnbr-pill:hover { color: var(--theme-primary, #c2410c); }
.mnbr-pill.is-on {
  background: var(--theme-primary, #c2410c); color: #fff;
}


/* من ثلاجتك — كبسولات مكوّنات تُختار ثم تُبحث. */
.mnbr-fridge { margin: 26px 0; }
.mnbr-fr__x { color: var(--text-secondary, #64748b); font-size: 14px; margin: 0 0 12px; }
.mnbr-fr__g { display: flex; flex-wrap: wrap; gap: 8px; }
.mnbr-fr__c {
  border: 1px solid var(--border-subtle, #e2e8f0); background: var(--bg-card, #fff);
  color: inherit; border-radius: 999px; padding: 8px 16px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; transition: all .16s;
}
.mnbr-fr__c:hover { border-color: var(--theme-primary, #c2410c); }
.mnbr-fr__c.is-on {
  background: var(--theme-primary, #c2410c); border-color: var(--theme-primary, #c2410c); color: #fff;
}
.mnbr-fr__go { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.mnbr-fr__btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--theme-primary, #c2410c); color: #fff;
  padding: 10px 22px; border-radius: 999px; font-weight: 700; font-size: 14px;
  transition: opacity .16s;
}
.mnbr-fr__btn.is-off { opacity: .4; pointer-events: none; }
.mnbr-fr__say { font-size: 13px; color: var(--text-secondary, #64748b); }


/* ═══════════════════════════════════════════════════════════════════
   الشريط الجانبي

   كان قوائم Bootstrap عارية بـ`text-dark` مكتوباً بيده: لونٌ ثابت يختفي
   على خلفية داكنة ويقاوم لون الموقع على الفاتحة. كلُّ لونٍ هنا من
   التوكنات.
   ═══════════════════════════════════════════════════════════════════ */
.sb-widget { border-radius: 14px; }

/* عنوان الودجت: خطٌّ قصير بلون العلامة يفصله عمّا تحته. */
.sb-wt {
  font-size: 15px; font-weight: 800; margin: 0 0 14px; padding: 0 0 10px;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0); position: relative;
}
.sb-wt > span { position: relative; }
.sb-wt > span::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: -11px;
  width: 100%; height: 2px; background: var(--theme-primary, #c2410c);
}

/* صفُّ منشور: مصغّرة صغيرة، وعنوان سطرين، وبيانٌ واحد. */
.sb-plist { list-style: none; margin: 0; padding: 0; }
.sb-p + .sb-p { border-top: 1px solid var(--border-subtle, #eef1f5); }
.sb-p > a {
  display: flex; align-items: center; gap: 11px; padding: 11px 0;
  text-decoration: none; color: inherit;
}
.sb-p > a:hover .sb-pt { color: var(--theme-primary, #c2410c); }

.sb-pi {
  flex: 0 0 64px; width: 64px; height: 48px; border-radius: 8px;
  overflow: hidden; background: var(--bg-surface, #f1f5f9); position: relative;
}
.sb-pi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-pi--none {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: var(--text-muted, #94a3b8); font-size: 15px;
}

.sb-pb { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sb-pt {
  font-size: 13.5px; font-weight: 600; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; transition: color .16s;
}
.sb-pm {
  font-size: 11.5px; color: var(--text-muted, #94a3b8);
  display: inline-flex; align-items: center; gap: 5px;
}
.sb-pm i { font-size: 10px; }

/* رقمُ الترتيب — في «الأكثر مشاهدة» وحدها: الترتيب معلومةٌ هناك. */
.sb-plist--rank .sb-pr {
  flex: 0 0 22px; font-size: 17px; font-weight: 800; line-height: 1;
  color: var(--border-default, #cbd5e1); text-align: center;
  font-variant-numeric: tabular-nums;
}
.sb-plist--rank .sb-p:nth-child(-n+3) .sb-pr { color: var(--theme-primary, #c2410c); }

/* التصنيفات بعددها */
.sb-cats { list-style: none; margin: 0; padding: 0; }
.sb-cats li + li { border-top: 1px solid var(--border-subtle, #eef1f5); }
.sb-cats a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; text-decoration: none; color: inherit; font-size: 13.5px;
  font-weight: 600; transition: color .16s;
}
.sb-cats a:hover { color: var(--theme-primary, #c2410c); }
.sb-cats em {
  font-style: normal; font-size: 11.5px; font-weight: 700;
  color: var(--text-muted, #94a3b8); background: var(--bg-surface, #f1f5f9);
  padding: 2px 9px; border-radius: 999px; min-width: 30px; text-align: center;
}

/* البحث */
.sb-search { display: flex; gap: 8px; }
.sb-search input {
  flex: 1; min-width: 0; border: 1px solid var(--border-subtle, #e2e8f0);
  background: var(--bg-base, #fff); color: inherit;
  border-radius: 9px; padding: 10px 13px; font-size: 13.5px; font-family: inherit;
}
.sb-search input:focus {
  outline: none; border-color: var(--theme-primary, #c2410c);
}
.sb-search button {
  flex: 0 0 auto; border: 0; border-radius: 9px; padding: 0 15px;
  background: var(--theme-primary, #c2410c); color: #fff; cursor: pointer;
}

/* شارات المصغّرة في كل بطاقة، لا في واحدة. */
.mnbr-tab-thumb, .mnbr-sub-thumb, .uc-card__image { position: relative; }
.mnbr-tab-thumb .mnbr-dur, .mnbr-sub-thumb .mnbr-dur, .uc-card__image .mnbr-dur,
.mnbr-tab-thumb .vid-q,    .mnbr-sub-thumb .vid-q,    .uc-card__image .vid-q,
.mnbr-tab-thumb .pt-cook,  .mnbr-sub-thumb .pt-cook,  .uc-card__image .pt-cook {
  position: absolute; inset-block-end: 6px;
  background: rgba(15, 23, 42, .82); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  line-height: 1.6;
}
.mnbr-tab-thumb .mnbr-dur, .mnbr-sub-thumb .mnbr-dur, .uc-card__image .mnbr-dur,
.mnbr-tab-thumb .pt-cook,  .mnbr-sub-thumb .pt-cook,  .uc-card__image .pt-cook {
  inset-inline-end: 6px;
}
.mnbr-tab-thumb .vid-q, .mnbr-sub-thumb .vid-q, .uc-card__image .vid-q {
  inset-inline-start: 6px;
}
.uc-card__image .mnbr-dur, .uc-card__image .vid-q, .uc-card__image .pt-cook {
  inset-block-end: 8px; font-size: 11px;
}


/* ═══════════════════════════════════════════════════════════════════
   شبكة المربّعات — الصورة هي البطاقة

   العنوان على تدرّجٍ أسفل الصورة لا في سطرٍ تحتها: السطر يقصّ الشبكة
   ويجعل ارتفاع البطاقات مختلفاً بطول العنوان.
   ═══════════════════════════════════════════════════════════════════ */
.mnbr-tiles { margin: 26px 0; }
.mnbr-tiles__g {
  display: grid;
  grid-template-columns: repeat(var(--tile-cols, 4), minmax(0, 1fr));
  gap: 14px;
}
.mnbr-tile {
  display: block; position: relative; text-decoration: none; color: inherit;
  border-radius: 14px; overflow: hidden; background: var(--bg-surface, #f1f5f9);
  transition: transform .2s ease, box-shadow .2s ease;
}
.mnbr-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(15,23,42,.55); }

.mnbr-tile__img { display: block; position: relative; }
.mnbr-tiles--wide   .mnbr-tile__img { aspect-ratio: 16 / 9; }
.mnbr-tiles--square .mnbr-tile__img { aspect-ratio: 1 / 1; }
.mnbr-tiles--tall   .mnbr-tile__img { aspect-ratio: 3 / 4; }
.mnbr-tile__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.mnbr-tile:hover .mnbr-tile__img img { transform: scale(1.05); }
.mnbr-tile__none {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: var(--text-muted, #94a3b8); font-size: 26px;
}

/* الشارات داخل المربّع، في زواياه. */
.mnbr-tile__img .mnbr-dur,
.mnbr-tile__img .vid-q,
.mnbr-tile__img .pt-cook {
  position: absolute; inset-block-end: 8px;
  background: rgba(15, 23, 42, .84); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 5px;
  line-height: 1.6; z-index: 2;
}
.mnbr-tile__img .mnbr-dur, .mnbr-tile__img .pt-cook { inset-inline-end: 8px; }
.mnbr-tile__img .vid-q { inset-inline-start: 8px; }

.mnbr-tile__cat {
  position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 2;
  background: var(--theme-primary, #c2410c); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}

/* التدرّج والعنوان فوقه. */
.mnbr-tile__b {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1;
  padding: 34px 12px 12px;
  background: linear-gradient(to top, rgba(6, 10, 18, .92) 12%, rgba(6, 10, 18, .55) 55%, transparent);
}
.mnbr-tile__t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: #fff; font-size: 13.5px; font-weight: 700;
  line-height: 1.6; text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

@media (max-width: 900px) { .mnbr-tiles__g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .mnbr-tiles__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ══════════════════════════════════════════════════════════════════════
   شريط بيانات المقال — .mb

   التخطيط واحد: صفوفٌ فيها خلايا، والعنصر في أيّها وضعه المالك في المنشئ.
   والشكل قشرةٌ فوقه: ما يليق بخبرٍ لا يليق بوصفة، وحلقةُ فيديو تحتاج
   داكناً وشاراتٍ صلبة لا صندوقاً فاتحاً.

   والعناصر (.mb-i, .mb-author, .mb-share) تُصاغ مرّةً هنا، فلا يعيد كل
   شكلٍ تعريفها ويختلف عن أخيه في تفصيلٍ لم يقصده أحد.
   ══════════════════════════════════════════════════════════════════════ */
.mb { margin: 0 0 1.6rem; }
.mb__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.mb__cell { display: flex; align-items: center; min-width: 0; }

/* ── الشريطُ يملأ عرضه ──
   كان الصفُّ بلا توزيع، فتتراصّ الخلايا عند البداية ويبقى نصفُ الشريط
   خالياً — يُقرأ عطلاً لا تصميماً.

   و`space-between` على الصفّ كلِّه ليس الحلّ: خمسُ خلايا موزَّعةً على
   عرض المقال تتباعد حتى تبدو غيرَ مرتبطة. بل الكاتبُ في طرفٍ والبقيّةُ
   مجموعةٌ في الطرف الآخر — وهي القراءةُ الطبيعية: مَن كتب، ثم تفاصيلُ
   النشر. والخليّةُ الأخيرةُ إن كانت مشاركةً أو طباعةً تنزاح معها. */
.mb__row > .mb__cell:first-child:not(:only-child) { margin-inline-end: auto; }

/* وعلى الشاشة الضيّقة يعود التراصّ: الدفعُ إلى الطرفين هناك يترك
   سطراً فيه عنصران متباعدان بعرض الشاشة. */
@media (max-width: 560px) {
    .mb__row > .mb__cell:first-child:not(:only-child) { margin-inline-end: 0; }
    .mb__row { gap: 8px 12px; }
}

/* ── العنصر الواحد ── */
.mb-i {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .84rem; font-weight: 600; line-height: 1;
    color: var(--text-secondary); text-decoration: none;
    transition: var(--ease); white-space: nowrap;
}
.mb-i > i { font-size: .82rem; color: var(--gold); opacity: .92; }
a.mb-i:hover, .mb-i--btn:hover { color: var(--gold); }
.mb-i--soft { color: var(--text-muted); font-weight: 500; }
.mb-i--soft > i { color: var(--text-muted); }
.mb-i--star > i { color: #f5b301; }
.mb-i--star em { font-style: normal; color: var(--text-muted); font-size: .78rem; }
.mb-i--btn { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }

/* ── الكاتب ── */
.mb-author { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.mb-author img { width: 40px; height: 40px; border-radius: var(--radius-pill); object-fit: cover;
                 border: 1px solid var(--border-accent); flex-shrink: 0; }
.mb-author__b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mb-author__n { font-size: .88rem; font-weight: 800; color: var(--text-primary);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-author__r { font-size: .72rem; font-weight: 600; color: var(--text-muted); }
.mb-author:hover .mb-author__n { color: var(--gold); }

/* ── المشاركة ── */
.mb-share { display: inline-flex; align-items: center; gap: 6px; }
.mb-share a {
    width: 30px; height: 30px; border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; color: var(--text-secondary); text-decoration: none;
    border: 1px solid var(--border-subtle); background: var(--bg-glass);
    transition: var(--ease);
}
.mb-share a:hover { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }

/* ══ بطاقة — صندوقٌ هادئ. الشكل الافتراضي للمواقع الإخبارية. ══ */
.mb--card {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    padding: 14px 18px; display: flex; flex-direction: column; gap: 10px;
}
.mb--card .mb__row--2 { padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.mb--card .mb__row--2 .mb-i { font-size: .79rem; color: var(--text-muted); }

/* ══ سطر — بلا خلفية، وفواصل نقطية. أهدأ ما يمكن، للمدوّنات. ══
   الفاصلة على الخليّة لا بين الصفوف: عنصرٌ لم يُصيَّر (شارة «محدّث» في
   مقالٍ لم يُعدَّل) كان يترك نقطةً معلّقة بلا ما بعدها. */
.mb--line { padding: 0 0 12px; border-bottom: 1px solid var(--border-subtle); }
.mb--line .mb__row { gap: 6px 0; }
.mb--line .mb__cell + .mb__cell::before {
    content: '·'; color: var(--text-muted); opacity: .6;
    margin: 0 12px; font-weight: 700;
}
.mb--line .mb-author img { width: 30px; height: 30px; }
.mb--line .mb-author__r { display: none; }
.mb--line .mb-author__n { font-size: .84rem; font-weight: 700; }
.mb--line .mb__row--2 { margin-top: 6px; opacity: .82; }

/* ══ مقسوم — الكاتب فوق والأرقام تحت، بينهما خطّ. للأخبار الطويلة. ══ */
.mb--split { display: flex; flex-direction: column; gap: 0; }
.mb--split .mb__row--1 { padding-bottom: 12px; justify-content: space-between; }
.mb--split .mb__row--2 {
    padding: 10px 0 0; border-top: 2px solid var(--border-subtle);
    gap: 8px 20px;
}
.mb--split .mb__row--2 .mb-i { font-size: .78rem; text-transform: none; }
.mb--split .mb-author img { width: 46px; height: 46px; }
.mb--split .mb-author__n { font-size: .95rem; }

/* ══ سينمائي — داكن وعريض بشاراتٍ صلبة. للقناة والمدّة والمشاهدات. ══
   لا يتبع الوضع الفاتح: مشغّل الفيديو داكنٌ دائماً، وشريطٌ فاتح تحته
   يقطع الصفحة نصفين. */
.mb--cinema {
    background: #0d0d12; border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-md); padding: 13px 18px;
    display: flex; flex-direction: column; gap: 9px;
}
.mb--cinema .mb-i {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--radius-pill); padding: 6px 13px;
    color: #dfe1e8; font-size: .8rem; font-weight: 700;
}
.mb--cinema .mb-i > i { color: var(--gold); }
.mb--cinema a.mb-i:hover { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.mb--cinema a.mb-i:hover > i { color: var(--gold-ink); }
.mb--cinema .mb-author__n { color: #f2f3f7; }
.mb--cinema .mb-author__r { color: #8b8fa3; }
.mb--cinema .mb-share a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.09); color: #dfe1e8; }
.mb--cinema .mb__row--2 { opacity: .8; }
.mb--cinema .mb__row--2 .mb-i { background: none; border: 0; padding: 0; font-weight: 600; color: #8b8fa3; }

/* ══ مطبخ — مربّعاتٌ متساوية بأيقوناتٍ كبيرة، وصفٌّ هادئ تحتها. ══
   الطاهي يبحث عن الوقت والتقييم قبل أن يقرأ سطراً، فيصيران مربّعين
   يُلمحان لا سطراً يُمسَح بالعين. */
.mb--kitchen { display: flex; flex-direction: column; gap: 12px; }
.mb--kitchen .mb__row--1 {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px;
}
.mb--kitchen .mb__row--1 .mb__cell {
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: 14px 8px;
    flex-direction: column; align-items: center; justify-content: center;
    transition: var(--ease);
}
.mb--kitchen .mb__row--1 .mb__cell:hover { border-color: var(--border-accent); background: var(--bg-card-hover); }
.mb--kitchen .mb__row--1 .mb-i {
    flex-direction: column; gap: 7px; text-align: center;
    font-size: .82rem; font-weight: 800; color: var(--text-primary);
    white-space: normal;
}
.mb--kitchen .mb__row--1 .mb-i > i { font-size: 1.15rem; }
.mb--kitchen .mb__row--2 { gap: 8px 18px; }
.mb--kitchen .mb-author img { width: 34px; height: 34px; }
.mb--kitchen .mb-author__r { display: none; }

/* ── الجوال: خمس خلايا في صفٍّ لا تتّسع لها شاشةٌ بعرض 390 ── */
@media (max-width: 575.98px) {
    .mb__row { gap: 8px 12px; }
    .mb--card { padding: 12px 14px; }
    .mb--cinema { padding: 11px 13px; }
    .mb--kitchen .mb__row--1 { grid-template-columns: repeat(2, 1fr); }
    .mb--line .mb__cell + .mb__cell::before { margin: 0 8px; }
    .mb-author img { width: 34px; height: 34px; }
}

/* شارةُ الصعوبة على مصغّرة الوصفة.
   لونٌ لكل درجة: «سهلة» و«للمحترفين» يجب أن تُفرَّقا في نظرة، لا بقراءة. */
.pt-diff {
  position: absolute; top: 8px; inset-inline-start: 8px;
  font-size: 11px; font-weight: 800; line-height: 1;
  padding: 4px 8px; border-radius: 6px; color: #fff;
  background: rgba(15, 23, 42, .82); backdrop-filter: blur(3px);
}
.pt-diff--easy   { background: rgba(22, 163, 74, .92); }
.pt-diff--medium { background: rgba(217, 119, 6, .92); }
.pt-diff--hard   { background: rgba(220, 38, 38, .92); }


/* ══════════════════════════════════════════════════════════════════════
   قوالب الهيدر الستّة

   `uc-header--{layout}` كان اسماً يُسنَد في المصيّر ولا يُستعمل، فستّةُ
   أزرارٍ في المنشئ لا تغيّر حرفاً. صار يصل الوسم، وهذه هي أشكالُه.

   والخلفيةُ هنا لا في `style=` السطريّ: السطريُّ يغلب الملفّ، فقالبُ
   «شفاف» ما كان يستطيع أن يكون شفافاً مهما كُتب له.
   ══════════════════════════════════════════════════════════════════════ */

/* Near-opaque like #site-header.site-header, and blurred like it: without the blur, text scrolling under the sticky bar ghosted through it. */
.uc-header--built { background: var(--bg-nav); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* ── كلاسيكي: الافتراضي. شعارٌ يمين، وقائمةٌ في صفٍّ تحته. ── */
.uc-header--classic .uc-hrow--main { padding: 16px 0; }

/* ── مركزي: الشعار وحده في صفّه، أكبر، والقائمة متمركزةٌ تحته. ── */
.uc-header--centered .uc-hrow--main { padding: 22px 0 14px; }
.uc-header--centered .uc-hrow--main .uc-hzone--center { justify-content: center; }
.uc-header--centered .uc-hrow--main img,
.uc-header--centered .uc-hrow--main .site-logo img { max-height: 68px; }
.uc-header--centered .uc-hrow--nav { justify-content: center; }
.uc-header--centered .uc-hrow--nav .uc-container { justify-content: center; }
.uc-header--centered .uc-hrow--nav .uc-hzone--end { position: absolute; inset-inline-end: 24px; }
.uc-header--centered .uc-hrow--nav .uc-container { position: relative; }

/* ── مقسّم: صفٌّ واحد، والشعارُ في وسطه بين القائمة والأدوات. ── */
.uc-header--split .uc-hrow--main { padding: 12px 0; }
.uc-header--split .uc-hzone--center { justify-content: center; }
.uc-header--split .uc-hzone--start,
.uc-header--split .uc-hzone--end { flex: 1 1 0; min-width: 0; }
/* The logo is the one thing in the row that must stay whole: as `1 1 auto` it gave way to a long menu and broke
   into three lines over it. The menu scrolls inside its zone instead. */
.uc-header--split .uc-hzone--center { flex: 0 0 auto; }
.uc-header--split .uc-hzone--start { overflow: hidden; }

/* ── مجلة: الأكثف. مساحةُ الإعلان لا تنكمش، وشريطُ العاجل يمتدّ. ── */
.uc-header--magazine .uc-hrow--main { padding: 18px 0; }
.uc-header--magazine .uc-hrow--main .uc-hzone--end { flex: 0 0 auto; }
.uc-header--magazine .uc-hrow--nav {
  background: var(--theme-primary, #0f172a);
  border-top: 0;
}
.uc-header--magazine .uc-hrow--nav a { color: #fff; }
/* A breaking-news zone is as wide as the row, not as its ticker: sized to content (`.uc-hzone` is `0 0 auto`) the
   scrolling line of headlines made it wider than the page, and the whole page slid sideways. */
.uc-hrow--breaking .uc-hzone { flex: 1 1 auto; min-width: 0; overflow: hidden; }

/* The hero's lead card is as tall as its side column (`h-100`), but its photo was a fixed 360px: beside three or four
   side cards the rest of the card stood empty. The photo now fills whatever height the card has, 360px at least. */
.sb-hero .hero-card > a:first-child { flex: 1 1 auto; position: relative; display: block; min-height: 360px; }
.sb-hero .hero-card > a:first-child img { position: absolute; inset: 0; width: 100%; height: 100% !important; }
.sb-hero .hero-card > .card-body { flex: 0 0 auto; }

/* The phone arrangement of a built header: a text logo stays one line (it broke into three beside the search), and
   the search element is its button alone — the 180px field left no room for the logo. The button still submits to
   /search, which opens the search page. */
.uc-header__at--mobile .uc-logo__text { white-space: nowrap; font-size: 1.2rem !important; }
.uc-header__at--mobile .uc-hzone--center { overflow: hidden; }
.uc-header__at--mobile .search-form-inline input { display: none; }
.uc-header__at--mobile .search-form-inline .btn { margin: 0 !important; }
@media (max-width: 991.98px) {
  /* الإعلانُ 728 بكسلاً يكسر الصفَّ على الهاتف، ويأكل الشاشة الأولى. */
  .uc-header--magazine .uc-hrow--main .uc-hzone--end { display: none; }
}

/* ── بسيط: نحيل، بلا حدود، بلا تثبيت. ── */
.uc-header--minimal .uc-hrow--main { padding: 10px 0; }
.uc-header--minimal .uc-hrow { border: 0; }

/* ── شفاف: يطفو فوق أوّل قسمٍ في الصفحة. ──
   `position:absolute` لا `fixed`: الثابتُ يبقى فوق النصّ عند التمرير
   ويحجب سطرين منه، والمقصود أن يندمج بالغلاف ثم يمضي. ومن أراد بقاءه
   يشغّل «التثبيت» فيغلب `sticky-top` هذا. */
.uc-header--transparent:not(.sticky-top) {
  position: absolute; inset-inline: 0; top: 0;
  background: transparent; border: 0;
}
.uc-header--transparent .uc-hrow { background: transparent; border: 0; }
.uc-header--transparent .uc-hrow--main { padding: 18px 0; }
/* The menu between the logo and the search scrolls inside its zone rather than running under the search field. */
.uc-header--transparent .uc-hzone--center { overflow: hidden; }
.uc-header--transparent .uc-hzone a,
.uc-header--transparent .uc-hzone .nav-link { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
/* وحين يُثبَّت، يكتسب خلفيةً — وإلّا صار نصّاً أبيض على صفحةٍ بيضاء. */
.uc-header--transparent.sticky-top { background: var(--bg-nav); }
.uc-header--transparent.sticky-top .uc-hzone a,
.uc-header--transparent.sticky-top .uc-hzone .nav-link { color: inherit; text-shadow: none; }


/* شريطُ العاجل داخل الهيدر — عنصرٌ في صفٍّ لا قسمٌ مستقلّ. */
.uc-brk { display: flex; align-items: center; gap: 12px; min-width: 0; width: 100%; }
.uc-brk__l {
  flex: 0 0 auto; font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 4px; background: #fff; color: var(--theme-primary, #dc2626);
}
.uc-brk__t { display: flex; gap: 22px; min-width: 0; overflow: hidden; white-space: nowrap; }
.uc-brk__i { color: inherit; text-decoration: none; font-size: .84rem; opacity: .95; }
.uc-brk__i:hover { color: inherit; text-decoration: underline; }
/* على الهاتف عنوانٌ واحد: ثلاثةٌ تلتفّ سطرين وتدفع المحتوى خارج الشاشة. */
@media (max-width: 767.98px) {
  .uc-brk__i:nth-child(n+2) { display: none; }
}


/* صندوق الكاتب — العنصر الذي كان له مفتاحٌ ولا وجود له. */
.author-box { border-radius: 14px; }
.author-box__ava {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%;
  overflow: hidden; display: grid; place-items: center;
  background: var(--theme-primary, var(--gold, #64748b)); color: #fff;
  font-size: 1.4rem; font-weight: 800;
}
.author-box__ava img { width: 100%; height: 100%; object-fit: cover; }
.author-box__body { min-width: 0; }
.author-box__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.author-box__name { font-weight: 800; font-size: 1.05rem; color: inherit; text-decoration: none; }
.author-box__name:hover { color: var(--theme-primary, var(--gold)); }
.author-box__role { font-size: .78rem; color: var(--text-secondary); }
.author-box__bio { margin: 6px 0 0; font-size: .92rem; line-height: 1.9; color: var(--text-secondary); }
@media print { .author-box { display: none !important; } }


/* فقرةُ النشرة داخل بطاقةٍ حمراء: الحاويةُ `text-white` والفقرةُ ترث،
   لكنّ قاعدةً تكتب لها رماديّاً فتغلب — ‎١٫٥٦ على الأحمر. */
.sb-block-newsletter .text-white p,
.sb-block-newsletter .text-white .opacity-75 {
    color: #ffffff !important;
}

/* زرُّ النشرة على أرضٍ حمراء: النصُّ الداكنُ عليه ‎٣٫٨٤، والأبيضُ ‎٤٫٦. */
.sb-block-newsletter .btn,
.sb-ne .btn,
.sb-ne button {
    color: #ffffff !important;
}

/* ── مبدّل اللغة في الترويسة ──
   الجهةُ منطقيّة: تُحاذي حافّةَ النهاية أيّاً كان اتّجاه الصفحة. */
.uc-locale { position: relative; display: inline-flex; }
.uc-locale__menu {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: 148px;
    padding: 6px;
    border-radius: 10px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-subtle, rgba(0,0,0,.1));
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
    display: none;
    z-index: 1080;
}
.uc-locale:hover .uc-locale__menu,
.uc-locale:focus-within .uc-locale__menu { display: block; }
.uc-locale__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 11px;
    border-radius: 7px;
    font-size: 13px;
    text-decoration: none;
    color: var(--text-primary, inherit);
}
.uc-locale__item:hover { background: rgba(127,127,127,.12); }
.uc-locale__item.is-current { font-weight: 700; }