/* ============================================================
   Dr. Mohammad Qatanani Website — Main Stylesheet
   Primary: #689D38 | Off-white theme
   ============================================================ */

/* Google Fonts (also preloaded in header.php) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Amiri:wght@400;700&family=Tajawal:wght@400;500;700;800&display=swap');

/* ============================================================
   CSS Variables
   ============================================================ */
:root {
    /* Olive-dominant palette with a teal (#2596be) accent — direction C */
    --primary:        #5b6a34;  /* olive (dominant brand) */
    --primary-dark:   #3c4522;  /* deep olive */
    --primary-light:  #8a9459;  /* light olive */
    --primary-ultra:  #eef0e2;  /* pale olive tint */
    --accent:         #2596be;  /* teal accent */
    --accent-dark:    #1d7c9c;
    --accent-soft:    #e4f1f6;
    --gold:           #c2962a;  /* reserved warm accent */
    --off-white:      #F5F0E4;
    --bg-main:        #F1EBDD;  /* warm paper */
    --bg-card:        #FBF8F0;  /* card cream */
    --text-dark:      #232116;  /* ink */
    --text-body:      #4a463a;
    --text-muted:     #8c8676;
    --border:         #E7DDC7;
    --shadow:         0 2px 16px rgba(60,69,34,0.06);
    --shadow-hover:   0 14px 36px rgba(35,33,22,0.14);
    --radius:         10px;
    --radius-sm:      6px;
    --transition:     0.22s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   Base Reset & Typography
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', 'Tajawal', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-body);
    line-height: 1.7;
    font-size: 15px;
}

body.rtl {
    font-family: 'Tajawal', 'Inter', sans-serif;
    direction: rtl;
    text-align: right;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-dark);
    font-family: 'Space Grotesk', 'Tajawal', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

body.rtl h1, body.rtl h2, body.rtl h3,
body.rtl h4, body.rtl h5, body.rtl h6 {
    font-family: 'Tajawal', 'Space Grotesk', sans-serif;
    letter-spacing: 0;
}

a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-dark); }

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

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 10px; }

/* ============================================================
   Buttons
   ============================================================ */
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 8px 22px;
    font-weight: 600;
    transition: all var(--transition);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}
.btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
    border-radius: var(--radius-sm);
    padding: 8px 22px;
    font-weight: 600;
    transition: all var(--transition);
}
.btn-outline-primary:hover {
    background: var(--primary);
    color: #fff;
}
.btn-sm { padding: 5px 14px; font-size: 13px; }
.btn-lg { padding: 12px 30px; font-size: 16px; }

/* ============================================================
   TOP BAR
   ============================================================ */
.top-bar {
    background: var(--primary-dark);
    color: #fff;
    font-size: 12.5px;
    padding: 6px 0;
}
.top-bar a { color: rgba(255,255,255,0.85); }
.top-bar a:hover { color: #fff; }
.lang-toggle {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    border-radius: 20px;
    padding: 3px 14px;
    font-size: 12px;
    font-weight: 600;
    transition: all var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.lang-toggle:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* ============================================================
   HEADER / NAVBAR
   ============================================================ */
.site-header {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-brand-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 10px 0;
}

.brand-logo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-ultra);
}

.brand-logo-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary-ultra);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.brand-logo-placeholder i {
    color: var(--primary);
    font-size: 22px;
}

.brand-text-en {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.2;
}
.brand-text-ar {
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.2;
}

/* Two-row nav */
.nav-row {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}
.nav-row .nav-link {
    color: var(--text-dark);
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 13px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}
.nav-row .nav-link:hover,
.nav-row .nav-link.active {
    background: var(--primary-ultra);
    color: var(--primary-dark);
}
.nav-row .nav-link.active {
    font-weight: 700;
}
.nav-row .dropdown-menu {
    border: none;
    box-shadow: var(--shadow-hover);
    border-radius: var(--radius);
    padding: 8px;
}
.nav-row .dropdown-item {
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    padding: 8px 14px;
    transition: all var(--transition);
}
.nav-row .dropdown-item:hover {
    background: var(--primary-ultra);
    color: var(--primary-dark);
}

.nav-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* Mobile nav */
.navbar-toggler {
    border: none;
    padding: 6px;
    color: var(--primary);
}
.navbar-toggler:focus { box-shadow: none; }

/* Admin banner in header */
.admin-nav-badge {
    background: var(--primary);
    color: #fff;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
}

/* ============================================================
   PAGE HERO / BANNER
   ============================================================ */
.page-hero {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);
    color: #fff;
    padding: 48px 0 36px;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-hero h1 {
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    position: relative;
}
.page-hero .hero-subtitle {
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    position: relative;
}
.hero-stat {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 10px;
    padding: 12px 20px;
    display: inline-block;
    backdrop-filter: blur(6px);
}
.hero-stat .stat-num { font-size: 1.4rem; font-weight: 800; }
.hero-stat .stat-label { font-size: 12px; opacity: 0.85; }

/* ============================================================
   HOME HERO SECTION
   ============================================================ */
.home-hero {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    padding: 70px 0;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.home-hero::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0; right: 0;
    height: 50px;
    background: var(--bg-main);
    clip-path: ellipse(55% 100% at 50% 100%);
}
.home-hero h1 { color: #fff; font-size: 2.2rem; font-weight: 800; }
.home-hero p { color: rgba(255,255,255,0.88); font-size: 16px; }
.imam-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid rgba(255,255,255,0.3);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.imam-photo-placeholder {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 5px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.imam-photo-placeholder i { font-size: 80px; color: rgba(255,255,255,0.5); }

/* ============================================================
   SECTION TITLES
   ============================================================ */
.section-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 24px;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 4px;
    background: var(--primary);
    border-radius: 2px;
}
.rtl .section-title::after { left: auto; right: 0; }

/* ============================================================
   VIDEO / LECTURE CARDS
   ============================================================ */
.lecture-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
}
.lecture-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary-light);
}
.lecture-thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
}
.lecture-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.lecture-card:hover .lecture-thumb img { transform: scale(1.05); }

.play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition);
}
.lecture-card:hover .play-overlay { opacity: 1; }
.play-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 4px 20px rgba(104,157,56,0.5);
    transition: transform var(--transition);
}
.play-btn:hover { transform: scale(1.1); }

.lecture-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.rtl .lecture-badge { left: auto; right: 10px; }

.lecture-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.lecture-category {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.lecture-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
    line-height: 1.4;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lecture-date {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
}

/* Featured badge */
.featured-badge {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================================
   VIDEO MODAL
   ============================================================ */
.video-modal .modal-content {
    background: #111;
    border: none;
    border-radius: var(--radius);
}
.video-modal .modal-header {
    background: var(--primary-dark);
    color: #fff;
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: none;
    padding: 14px 20px;
}
.video-modal .modal-title { color: #fff; font-size: 15px; }
.video-modal .btn-close { filter: invert(1); }
.video-embed-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-embed-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

/* ============================================================
   FILTER SIDEBAR
   ============================================================ */
.filter-sidebar {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    position: sticky;
    top: 80px;
}
.filter-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.filter-list { list-style: none; padding: 0; margin: 0; }
.filter-list li { margin-bottom: 4px; }
.filter-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-size: 13.5px;
    font-weight: 500;
    transition: all var(--transition);
    text-decoration: none;
}
.filter-list a:hover,
.filter-list a.active {
    background: var(--primary-ultra);
    color: var(--primary-dark);
    font-weight: 700;
}
.filter-count {
    background: var(--border);
    color: var(--text-muted);
    border-radius: 20px;
    font-size: 11px;
    padding: 1px 8px;
    font-weight: 600;
}
.filter-list a.active .filter-count {
    background: var(--primary);
    color: #fff;
}

/* ============================================================
   SEARCH BAR
   ============================================================ */
.search-wrap {
    position: relative;
}
.search-wrap input {
    border: 1.5px solid var(--border);
    border-radius: 30px;
    padding: 10px 48px 10px 20px;
    font-size: 14px;
    width: 100%;
    background: var(--bg-card);
    transition: all var(--transition);
    outline: none;
}
.rtl .search-wrap input { padding: 10px 20px 10px 48px; }
.search-wrap input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(104,157,56,0.15);
}
.search-wrap .search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
}
.rtl .search-wrap .search-icon { right: auto; left: 16px; }

/* ============================================================
   ARTICLES
   ============================================================ */
.article-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all var(--transition);
    border: 1px solid var(--border);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}
.article-thumb {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--primary-ultra);
    display: flex;
    align-items: center;
    justify-content: center;
}
.article-thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-thumb .no-thumb { color: var(--primary-light); font-size: 48px; }
.article-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.article-date { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.article-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-excerpt {
    color: var(--text-body);
    font-size: 13.5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.article-read-more {
    margin-top: 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.article-read-more:hover { color: var(--primary-dark); gap: 8px; }

/* ============================================================
   BOOKS
   ============================================================ */
.book-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    display: flex;
    gap: 16px;
    transition: all var(--transition);
}
.book-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.book-cover {
    width: 80px;
    height: 110px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--primary-ultra);
    display: flex;
    align-items: center;
    justify-content: center;
}
.book-cover i { color: var(--primary); font-size: 32px; }
.book-info { flex: 1; }
.book-title { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.book-desc { font-size: 13px; color: var(--text-body); margin-bottom: 14px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: var(--primary-dark);
    color: rgba(255,255,255,0.85);
    padding: 50px 0 20px;
    margin-top: 60px;
}
.footer-brand { color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 10px; }
.footer-tagline { font-size: 13px; color: rgba(255,255,255,0.65); }
.footer-heading { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.8px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: rgba(255,255,255,0.7); font-size: 13.5px; transition: color var(--transition); }
.footer-links a:hover { color: var(--primary-light); }
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    font-size: 15px;
    transition: all var(--transition);
    margin-right: 8px;
}
.rtl .footer-social a { margin-right: 0; margin-left: 8px; }
.footer-social a:hover { background: var(--primary-light); color: #fff; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-top: 32px;
    padding-top: 20px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.5);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.empty-state i { font-size: 56px; color: var(--border); margin-bottom: 16px; }
.empty-state h5 { color: var(--text-muted); font-weight: 600; }
.empty-state p { font-size: 13.5px; }

/* Admin empty hint */
.admin-empty-hint {
    display: inline-block;
    background: var(--primary-ultra);
    border: 1.5px dashed var(--primary-light);
    border-radius: var(--radius);
    padding: 10px 18px;
    font-size: 13px;
    color: var(--primary-dark);
    margin-top: 10px;
}

/* ============================================================
   NOTIFICATIONS BADGE
   ============================================================ */
.notif-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #e53e3e;
    color: #fff;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}

/* ============================================================
   BIOGRAPHY PAGE
   ============================================================ */
.bio-content {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 36px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    line-height: 1.9;
}
.bio-content p { margin-bottom: 16px; font-size: 15.5px; }
.bio-content h3 { color: var(--primary-dark); margin: 24px 0 12px; }

/* ============================================================
   Q&A
   ============================================================ */
.qa-item {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.qa-question {
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
    font-size: 15px;
}
.qa-question::before {
    content: 'Q: ';
    color: var(--primary);
}
.rtl .qa-question::before { content: 'س: '; }
.qa-answer {
    color: var(--text-body);
    font-size: 14.5px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* ============================================================
   ADMIN NOTICE BAR (visible to admin when section is empty)
   ============================================================ */
.admin-notice-bar {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    font-size: 13px;
    color: #856404;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.admin-notice-bar a { color: var(--primary-dark); font-weight: 700; }

/* ============================================================
   CATEGORY PILLS (lectures page top filter)
   ============================================================ */
.category-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.cat-pill {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid var(--border);
    color: var(--text-body);
    background: var(--bg-card);
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cat-pill:hover,
.cat-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination .page-link {
    color: var(--primary);
    border-color: var(--border);
    border-radius: var(--radius-sm);
    margin: 0 3px;
}
.pagination .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
}
.pagination .page-link:hover { background: var(--primary-ultra); color: var(--primary-dark); }

/* ============================================================
   UTILITY
   ============================================================ */
.bg-primary-light { background: var(--primary-ultra) !important; }
.text-primary { color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }
.rounded-card { border-radius: var(--radius) !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .filter-sidebar { position: static; margin-bottom: 24px; }
    .home-hero { padding: 48px 0; text-align: center; }
    .imam-photo, .imam-photo-placeholder { margin: 0 auto 24px; }
    .page-hero h1 { font-size: 1.6rem; }
}
@media (max-width: 767px) {
    .nav-row { gap: 1px; }
    .nav-row .nav-link { font-size: 13px; padding: 7px 10px; }
    .lecture-card, .article-card { margin-bottom: 16px; }
    .bio-content { padding: 20px; }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.4s ease forwards; }

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   ★ PREMIUM RESKIN — Direction C (olive dominant, teal accent)
   Overrides above. Warm paper, editorial type, restrained.
   ============================================================ */

/* ---- links / generic accents ---- */
a:hover { color: var(--accent-dark); }

/* ---- top bar + header ---- */
.top-bar { background: var(--primary-dark); }
.site-header { border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.lang-toggle { border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 5px; }
.lang-toggle:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.brand-text-en { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.01em; }
/* real logo: show full artwork (not circular-cropped) */
.brand-logo { height: 52px; width: auto; max-width: 150px; border-radius: 0; border: none; object-fit: contain; }
.brand-role { font-size: 11px; color: var(--text-muted); font-weight: 500; letter-spacing: .01em; margin-top: 1px; }
.navbar-brand-wrap .brand-text { line-height: 1.15; }
@media (max-width: 991px) { .brand-logo { height: 44px; } .brand-role { display: none; } }

/* nav active/hover -> teal with a fine underline */
.nav-row .nav-link { position: relative; font-weight: 500; }
.nav-row .nav-link:hover,
.nav-row .nav-link.active { color: var(--accent-dark); background: transparent; }
.nav-row .nav-link.active::after {
    content: ''; position: absolute; left: 10px; right: 10px; bottom: -3px;
    height: 2px; background: var(--accent); border-radius: 2px;
}

/* ---- HOME HERO: light paper, ink text, calligraphy + star pattern ---- */
.home-hero {
    position: relative;
    overflow: hidden;
    background: var(--bg-main);
    color: var(--text-dark);
    padding: 62px 0 54px;
    border-bottom: 1px solid var(--border);
}
.home-hero .container { position: relative; z-index: 1; }
/* faint olive calligraphy watermark behind the whole banner */
.home-hero::after {
    content: ''; display: block; position: absolute; z-index: 0; pointer-events: none;
    inset: 0;
    background-color: var(--primary);
    opacity: 0.15;
    -webkit-mask: url("../img/calligraphy.svg") center / 58% auto no-repeat;
            mask: url("../img/calligraphy.svg") center / 58% auto no-repeat;
}
@media (max-width: 991px) { .home-hero::after { opacity: .13; -webkit-mask-size: 82% auto; mask-size: 82% auto; } }
.home-hero .hero-title {
    color: var(--text-dark);
    font-size: 2.7rem;
    font-weight: 700;
    line-height: 1.04;
}
.home-hero p { color: var(--text-body); }
.hero-eyebrow {
    color: var(--accent-dark);
    font: 700 12px/1 'Inter', sans-serif;
    letter-spacing: .2em; text-transform: uppercase; margin-bottom: 16px;
}
.rtl .hero-eyebrow { letter-spacing: .08em; }
.hero-tagline {
    color: var(--primary);
    font-family: 'Space Grotesk', 'Tajawal', sans-serif;
    font-weight: 500; font-size: 18px; margin-bottom: 14px;
}
.rtl .hero-tagline { font-family: 'Tajawal', sans-serif; }
.hero-lead { color: var(--text-body); font-size: 15.5px; line-height: 1.75; max-width: 480px; margin-bottom: 26px; }
/* constrained lead block hugs the reading start (right in RTL, left in LTR) */
.rtl .hero-lead { margin-inline-start: 0; margin-inline-end: auto; }

.home-hero .hero-portrait { position: relative; display: inline-block; }
.home-hero .imam-photo,
.home-hero .imam-photo-placeholder {
    width: 210px; max-width: 100%; height: 252px; border-radius: 10px;
    object-fit: cover; border: none; box-shadow: 0 24px 55px rgba(35,33,22,.22); margin: 0 auto;
}
.home-hero .imam-photo-placeholder { background: #e3dcc9; }
.home-hero .imam-photo-placeholder i { color: #b3a98c; }
.home-hero .hero-portrait::after {
    content: ''; position: absolute; inset: 10px; border: 1px solid var(--accent);
    opacity: .55; border-radius: 6px; pointer-events: none;
}

/* ---- buttons ---- */
.btn-accent { background: var(--accent); border: none; color: #fff; border-radius: 6px; font-weight: 700; }
.btn-accent:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); }
.btn-olive-outline { background: transparent; border: 1.5px solid var(--primary); color: var(--primary-dark); border-radius: 6px; font-weight: 700; }
.btn-olive-outline:hover { background: var(--primary); color: #fff; }
/* remap Bootstrap primary usages site-wide */
.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-dark); --bs-btn-hover-border-color: var(--accent-dark); --bs-btn-active-bg: var(--accent-dark); }
.btn-outline-primary { --bs-btn-color: var(--primary-dark); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-hover-color: #fff; }
.pagination { --bs-pagination-color: var(--primary-dark); --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent); --bs-pagination-hover-color: var(--accent-dark); }
.badge.bg-secondary { background: var(--primary) !important; }
.badge.bg-danger { background: var(--accent) !important; }

/* ---- section titles ---- */
.section-title { font-size: 1.55rem; font-weight: 700; }
.section-title::after { background: var(--primary); height: 3px; }

/* ---- cards: teal on interaction, olive brand tags ---- */
.lecture-card, .article-card, .book-card { border-radius: var(--radius); }
.lecture-card:hover { border-color: var(--accent); }
.article-card:hover, .book-card:hover { border-color: var(--accent); }
.lecture-badge { background: var(--accent); border-radius: 4px; font-weight: 800; letter-spacing: .03em; }
.play-btn { background: var(--primary); box-shadow: 0 4px 20px rgba(60,69,34,.45); }
.lecture-category { color: var(--primary); }
.lecture-title, .article-title, .book-title { font-family: 'Space Grotesk', 'Tajawal', sans-serif; }
.rtl .lecture-title, .rtl .article-title, .rtl .book-title { font-family: 'Tajawal', sans-serif; }

/* ---- inner page hero: deep olive band ---- */
.page-hero { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%); }

/* ---- category tiles on home ---- */
.filter-sidebar { border-radius: var(--radius); }

@media (max-width: 991px) {
    .home-hero { text-align: center; }
    .home-hero .hero-portrait { margin-top: 12px; }
    .hero-lead { margin-left: auto; margin-right: auto; }
}

/* ---- home: Published Works (books) ---- */
.home-book { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow);
    transition: all var(--transition); position: relative; }
.home-book:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--accent); }
.home-book-cover { height: 280px; background: var(--primary-ultra); display: flex; align-items: center;
    justify-content: center; overflow: hidden; padding: 16px; }
.home-book-cover img { max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain; border-radius: 3px; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.home-book-cover i { font-size: 52px; color: var(--primary-light); }

/* ---- book carousel (coverflow: center sharp, sides blurred behind) ---- */
.book-carousel { position: relative; }
.bc-viewport { overflow: hidden; padding: 30px 0; }
/* keep the carousel's horizontal layout LTR in both languages, so the left
   arrow always moves left and the right arrow moves right; card text stays RTL */
.bc-viewport, .bc-track { direction: ltr; }
.rtl .bc-slide .home-book { direction: rtl; text-align: right; }
.bc-track { display: flex; align-items: center; width: max-content; position: relative;
    transition: transform .5s cubic-bezier(.4,0,.2,1); will-change: transform; }
.bc-slide { flex: 0 0 300px; margin: 0 -46px;
    transition: transform .5s cubic-bezier(.4,0,.2,1), filter .5s ease, opacity .5s ease; }
.bc-slide .home-book { width: 300px; margin: 0 auto; }
.bc-slide:not(.is-active) { transform: scale(.8); filter: blur(2.5px) grayscale(.2); opacity: .6; z-index: 1; }
.bc-slide.is-active { transform: scale(1); filter: none; opacity: 1; z-index: 3; }
/* further-out books stay visible, just smaller / blurrier / fainter (receding stack) */
.bc-slide.is-far { transform: scale(.66); filter: blur(3.5px) grayscale(.3); opacity: .32; z-index: 0; }
.bc-slide:not(.is-active) .home-book { cursor: pointer; }
.bc-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--primary-dark); font-size: 24px; line-height: 1; cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.12); transition: all var(--transition); }
.bc-prev { left: 6px; }
.bc-next { right: 6px; }
.bc-nav:disabled { opacity: .35; cursor: default; }
.bc-nav:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-50%) scale(1.06); }
.bc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.bc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); border: none;
    padding: 0; cursor: pointer; transition: all var(--transition); }
.bc-dot.is-active { background: var(--primary); width: 22px; border-radius: 5px; }
@media (max-width: 575px) {
    .bc-slide { flex-basis: 260px; margin: 0 -30px; }
    .bc-slide .home-book { width: 260px; }
    .bc-nav { width: 40px; height: 40px; font-size: 20px; }
}
.home-book-body { padding: 16px 18px; display: flex; flex-direction: column; flex: 1; }
.home-book-title { font-family: 'Space Grotesk', 'Tajawal', sans-serif; font-weight: 600; font-size: 17px;
    color: var(--text-dark); margin-bottom: 6px; line-height: 1.3; }
.rtl .home-book-title { font-family: 'Tajawal', sans-serif; }
.home-book-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* ---- biography: top video embed ---- */
.bio-video-wrap { max-width: 860px; margin: 0 auto; }
.bio-video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-hover); background: #000; }
.bio-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bio-video-empty { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; aspect-ratio: 16 / 9; border: 2px dashed var(--border); border-radius: var(--radius);
    background: var(--off-white); color: var(--text-muted); }
.bio-video-empty i { font-size: 40px; color: #c4302b; }
.bio-body { max-width: 860px; }
.bio-content p { margin-bottom: 1.05rem; }
.bio-content p:last-child { margin-bottom: 0; }

/* ---- books page: rich book item ---- */
.book-item { display: flex; gap: 22px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); position: relative;
    transition: all var(--transition); }
.book-item:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); }
/* whole-card link to the detail page (listing only) */
.book-item-linked { cursor: pointer; }
.book-item .book-actions { position: relative; z-index: 2; }   /* buttons sit above the card link */
.book-card-link { z-index: 1; }
body.qa-editing .book-card-link { pointer-events: none; }      /* keep inline editing usable */
.book-item-linked:hover .book-item-title { color: var(--accent-dark); }
.book-cover-col { flex: none; display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.book-cover-slot { position: relative; }
.book-cover-label { display: block; text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 5px; }
.book-cover-img { cursor: zoom-in; }

/* click-to-zoom lightbox */
.qz-overlay {
    position: fixed; inset: 0; z-index: 6000; display: none;
    align-items: center; justify-content: center;
    background: rgba(18,18,12,.86); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.qz-overlay.open { display: flex; }
.qz-stage {
    max-width: 92vw; max-height: 88vh; overflow: hidden; border-radius: 8px;
    box-shadow: 0 30px 90px rgba(0,0,0,.55); cursor: zoom-in;
}
.qz-img {
    display: block; max-width: 92vw; max-height: 88vh; object-fit: contain;
    transition: transform .1s ease-out; will-change: transform;
}
.qz-close {
    position: fixed; top: 16px; right: 22px; z-index: 6001;
    background: none; border: none; color: #fff; font-size: 38px; line-height: 1;
    cursor: pointer; opacity: .85;
}
.qz-close:hover { opacity: 1; }
.book-cover-img { width: 130px; height: 186px; object-fit: cover; border-radius: 6px; box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.book-cover-ph { width: 130px; height: 186px; border-radius: 6px; background: var(--primary-ultra);
    display: grid; place-items: center; color: var(--primary-light); font-size: 40px; }
.book-info-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.book-item-title { font-family: 'Space Grotesk', 'Tajawal', sans-serif; font-size: 21px;
    color: var(--text-dark); margin-bottom: 8px; line-height: 1.2; }
.rtl .book-item-title { font-family: 'Tajawal', sans-serif; }
.book-audience { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.book-audience i { color: var(--primary); margin-inline-end: 5px; }
.book-meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.book-meta i { color: var(--accent-dark); margin-inline-end: 4px; }
.book-meta .bm-price { color: var(--primary-dark); font-weight: 700; }
.book-meta .bm-price i { color: var(--gold); }
.book-item-desc { font-size: 14px; line-height: 1.75; color: var(--text-body); margin-bottom: 16px; }
.book-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.btn-soft { background: var(--accent-soft); color: var(--accent-dark); border: 1px solid transparent; font-weight: 600; }
.btn-soft:hover { background: var(--accent); color: #fff; }
@media (max-width: 575px) {
    .book-item { flex-direction: column; align-items: center; text-align: center; }
    .book-cover-col, .book-cover-img, .book-cover-ph { width: 100%; max-width: 200px; height: auto; }
    .book-cover-img { max-height: 280px; }
    .book-meta, .book-actions { justify-content: center; }
}

.home-book { text-decoration: none; color: inherit; }
.home-book-more { color: var(--accent-dark); font-weight: 700; font-size: 13px; display: inline-flex;
    align-items: center; gap: 6px; }
.home-book:hover .home-book-more { gap: 9px; }

/* book detail: back link in page hero */
.hero-back { display: inline-block; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600;
    text-decoration: none; margin-bottom: 8px; }
.hero-back:hover { color: #fff; }

/* ---- home: Programs ---- */
.home-program { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 24px; height: 100%; display: flex; gap: 16px; box-shadow: var(--shadow);
    transition: all var(--transition); position: relative; }
.home-program:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); }
.home-program-icon { width: 52px; height: 52px; flex: none; border-radius: 12px; background: var(--primary-ultra);
    color: var(--primary); display: grid; place-items: center; font-size: 22px; }
.home-program h4 { font-size: 19px; color: var(--primary-dark); margin-bottom: 6px; }
.home-program-sched { font-size: 13px; color: var(--primary); font-weight: 600; margin-bottom: 8px; }
.home-program-desc { font-size: 14px; line-height: 1.7; color: var(--text-body); }

/* ---- home: category tiles ---- */
.cat-tile { position: relative; background: var(--bg-card); border-radius: var(--radius);
    padding: 20px; text-align: center; border: 1px solid var(--border); transition: all var(--transition); }
.cat-tile:hover { border-color: var(--primary); background: var(--primary-ultra); transform: translateY(-2px); }
.cat-icon { color: var(--primary); margin-bottom: 8px; }
.cat-name { font-weight: 700; font-size: 13.5px; color: var(--text-dark); }
.cat-count { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.cat-empty { border-style: dashed; opacity: .6; }
.cat-hidden-tag { position: absolute; top: 6px; right: 6px; font-size: 9px; font-weight: 700;
    background: #6b7280; color: #fff; padding: 2px 6px; border-radius: 4px; letter-spacing: .03em; }
.rtl .cat-hidden-tag { right: auto; left: 6px; }

/* ---- home: Follow / social band ---- */
.follow-band { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    color: #fff; padding: 54px 0; text-align: center; }
.follow-band h2 { color: #fff; font-size: 1.7rem; margin-bottom: 8px; }
.follow-band p { color: rgba(255,255,255,.8); font-size: 15px; margin-bottom: 24px; }
.follow-icons { display: flex; gap: 14px; justify-content: center; }
.follow-icons a { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.12); color: #fff; font-size: 19px; transition: all var(--transition); }
.follow-icons a:hover { background: var(--accent); transform: translateY(-3px); color: #fff; }