/* ═══════════════════════════════════════════════════════════════════════
   AL-BURHAN HERITAGE THEME — v2.0
   "Illuminating Hearts Through Islamic Scholarship"

   A museum-quality digital experience evoking:
   Bayt al-Hikmah · Al-Qarawiyyin · The Alhambra · Ottoman Libraries

   Architecture : scoped entirely under body.theme-islamic
   Performance  : CSS-only animations + single ~2 KB JS module
   Accessibility: WCAG AA, prefers-reduced-motion respected
   ═══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ══════════════════════════════════════════════════════ */
.theme-islamic {
  /* ── Parchment Spectrum ── */
  --h-parchment:       #FAF6EE;
  --h-parchment-mid:   #F0E8D8;
  --h-parchment-deep:  #E4D9C3;
  --h-stone:           #D4C9B5;
  --h-marble:          #EDE8E2;

  /* ── Gold System ── */
  --h-gold:            #C8A86B;
  --h-gold-bright:     #E2C98C;
  --h-gold-dim:        #A8863A;
  --h-gold-dark:       #7A5E28;
  --h-bronze:          #8C6D3F;
  --h-copper:          #B87333;

  /* ── Deep Backgrounds ── */
  --h-navy:            #0D2240;
  --h-navy-mid:        #1B3A6B;
  --h-walnut:          #1A1008;
  --h-walnut-mid:      #2C1F14;
  --h-ink:             #100C06;

  /* ── Accent Colors ── */
  --h-emerald:         #1B5E3F;
  --h-olive:           #4A4A2A;
  --h-prayer-red:      #7B1818;
  --h-copper-light:    rgba(184,115,51,0.15);

  /* ── Typography ── */
  --h-font-display:    'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --h-font-body:       'EB Garamond', Georgia, 'Times New Roman', serif;
  --h-font-label:      'Inter', system-ui, sans-serif;
  --h-font-arabic:     'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  --h-font-urdu:       'Noto Nastaliq Urdu', 'Urdu Typesetting', serif;

  /* ── Warm Amber Shadows ── */
  --h-shadow-sm:       0 2px 8px rgba(100,65,15,0.08), 0 1px 3px rgba(100,65,15,0.05);
  --h-shadow:          0 4px 20px rgba(100,65,15,0.10), 0 2px 8px rgba(100,65,15,0.07);
  --h-shadow-md:       0 8px 36px rgba(100,65,15,0.13), 0 4px 14px rgba(100,65,15,0.08);
  --h-shadow-lg:       0 16px 56px rgba(80,50,10,0.16), 0 6px 20px rgba(80,50,10,0.10);
  --h-shadow-gold:     0 4px 24px rgba(200,168,107,0.28);
  --h-glow-gold:       0 0 24px rgba(200,168,107,0.35);

  /* ── Transitions ── */
  --h-ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --h-ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --h-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ══════════════════════════════════════════════════════
   2. SVG ASSET LIBRARY (data-URI custom properties)
   ══════════════════════════════════════════════════════ */
.theme-islamic {
  /* 8-pointed Islamic star tile — light background (60x60) */
  --svg-star-light: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='52,30 38.3,33.4 45.6,45.6 33.4,38.3 30,52 26.6,38.3 14.4,45.6 21.7,33.4 8,30 21.7,26.6 14.4,14.4 26.6,21.7 30,8 33.4,21.7 45.6,14.4 38.3,26.6' fill='none' stroke='%23C8A86B' stroke-opacity='.16' stroke-width='1.2'/%3E%3C/svg%3E");

  /* 8-pointed Islamic star tile — dark background (64x64) */
  --svg-star-dark: url("data:image/svg+xml,%3Csvg width='64' height='64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='55.5,32 40.8,35.6 48.6,48.6 35.6,40.8 32,55.5 28.4,40.8 15.4,48.6 23.2,35.6 8.5,32 23.2,28.4 15.4,15.4 28.4,23.2 32,8.5 35.6,23.2 48.6,15.4 40.8,28.4' fill='none' stroke='%23C8A86B' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E");

  /* Ornamental section divider — line diamond line (280x28) */
  --svg-ornament: url("data:image/svg+xml,%3Csvg width='280' height='28' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='14' x2='114' y2='14' stroke='%23C8A86B' stroke-width='1.2'/%3E%3Ccircle cx='120' cy='14' r='3.2' fill='%23C8A86B'/%3E%3Cpolygon points='140,3 153,14 140,25 127,14' fill='%23C8A86B'/%3E%3Ccircle cx='160' cy='14' r='3.2' fill='%23C8A86B'/%3E%3Cline x1='166' y1='14' x2='280' y2='14' stroke='%23C8A86B' stroke-width='1.2'/%3E%3C/svg%3E");

  /* Section-separator 8-pointed rosette (320x40) */
  --svg-separator: url("data:image/svg+xml,%3Csvg width='320' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='20' x2='125' y2='20' stroke='%23C8A86B' stroke-width='1' stroke-opacity='.5'/%3E%3Cpolygon points='160,8 163,16 171,16 165,21 167,29 160,24 153,29 155,21 149,16 157,16' fill='%23C8A86B' fill-opacity='.7'/%3E%3Cline x1='195' y1='20' x2='320' y2='20' stroke='%23C8A86B' stroke-width='1' stroke-opacity='.5'/%3E%3C/svg%3E");

  /* Muqarnas cornice tile (40x20, repeating) */
  --svg-muqarnas: url("data:image/svg+xml,%3Csvg width='40' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 L8,0 L8,6 Q8,14 14,16 Q20,18 26,16 Q32,14 32,6 L32,0 L40,0' fill='none' stroke='%23C8A86B' stroke-opacity='.4' stroke-width='1.5'/%3E%3C/svg%3E");

  /* Arabesque corner ornament (48x48) */
  --svg-corner: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,48 Q0,0 48,0' fill='none' stroke='%23C8A86B' stroke-opacity='.45' stroke-width='1.2'/%3E%3Cpath d='M0,38 Q10,10 38,0' fill='none' stroke='%23C8A86B' stroke-opacity='.25' stroke-width='1'/%3E%3Ccircle cx='4' cy='4' r='2.5' fill='%23C8A86B' fill-opacity='.5'/%3E%3Ccircle cx='44' cy='44' r='2' fill='%23C8A86B' fill-opacity='.3'/%3E%3C/svg%3E");

  /* Geometric hero overlay tile (80x80) */
  --svg-hero-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpolygon points='40,4 45.5,18.5 60.5,14.5 52.2,27 66,33 52.2,39 60.5,53 45.5,49 40,63.5 34.5,49 19.5,53 27.8,39 14,33 27.8,27 19.5,14.5 34.5,18.5' fill='none' stroke='rgba(200,168,107,0.1)' stroke-width='1'/%3E%3Ccircle cx='40' cy='33' r='8' fill='none' stroke='rgba(200,168,107,0.07)' stroke-width='1'/%3E%3C/svg%3E");
}


/* ══════════════════════════════════════════════════════
   3. BASE LAYER — PARCHMENT & TYPOGRAPHY
   ══════════════════════════════════════════════════════ */
.theme-islamic body {
  background-color: var(--h-parchment);
  color: #2C1F14;
}

/* Display & editorial headings */
.theme-islamic h1,
.theme-islamic h2,
.theme-islamic h3,
.theme-islamic h4,
.theme-islamic h5,
.theme-islamic h6 {
  font-family: var(--h-font-display) !important;
  letter-spacing: 0.01em;
  color: var(--h-navy);
}
.theme-islamic h1 { letter-spacing: -0.01em; }
.theme-islamic h2 { letter-spacing: 0.01em; }
.theme-islamic h3 { letter-spacing: 0.02em; }

/* ── DARK-CONTAINER UNIVERSAL TEXT INVERSION ────────────────
   The global h* rule above sets var(--h-navy) without !important.
   For every dark-background container the theme renders, headings
   and body copy must be forced to light colors with !important here,
   in one place, so no container is ever missed.
   ─────────────────────────────────────────────────────────── */
.theme-islamic .bg-dark-green h1,
.theme-islamic .bg-dark-green h2,
.theme-islamic .bg-dark-green h3,
.theme-islamic .bg-dark-green h4,
.theme-islamic .bg-dark-green h5,
.theme-islamic .bg-dark-green h6,
.theme-islamic section.bg-primary h1,
.theme-islamic section.bg-primary h2,
.theme-islamic section.bg-primary h3,
.theme-islamic section.bg-primary h4,
.theme-islamic section.bg-primary h5,
.theme-islamic section.bg-primary h6,
.theme-islamic .form-card-header h1,
.theme-islamic .form-card-header h2,
.theme-islamic .form-card-header h3,
.theme-islamic .form-card-header h4,
.theme-islamic .form-card-header h5,
.theme-islamic .form-card-header h6,
.theme-islamic .branch-card-header h1,
.theme-islamic .branch-card-header h2,
.theme-islamic .branch-card-header h3,
.theme-islamic .branch-card-header h4,
.theme-islamic .branch-card-header h5,
.theme-islamic .branch-card-header h6,
.theme-islamic .scholar-hero h1,
.theme-islamic .scholar-hero h2,
.theme-islamic .scholar-hero h3,
.theme-islamic .scholar-hero h4,
.theme-islamic .donation-impact-sidebar h1,
.theme-islamic .donation-impact-sidebar h2,
.theme-islamic .donation-impact-sidebar h3,
.theme-islamic .donation-impact-sidebar h4,
.theme-islamic .sidebar-newsletter h1,
.theme-islamic .sidebar-newsletter h2,
.theme-islamic .sidebar-newsletter h3,
.theme-islamic .sidebar-newsletter h4,
.theme-islamic .zakat-calc h1,
.theme-islamic .zakat-calc h2,
.theme-islamic .zakat-calc h3,
.theme-islamic .zakat-calc h4,
.theme-islamic .ab-card-header h1,
.theme-islamic .ab-card-header h2,
.theme-islamic .ab-card-header h3,
.theme-islamic .home-cta-course-inner h1,
.theme-islamic .home-cta-course-inner h2,
.theme-islamic .home-cta-course-inner h3,
.theme-islamic .vm-card-gold h1,
.theme-islamic .vm-card-gold h2,
.theme-islamic .vm-card-gold h3,
.theme-islamic .alumni-stats-bar h1,
.theme-islamic .alumni-stats-bar h2,
.theme-islamic .alumni-stats-bar h3,
.theme-islamic .scholar-stats-strip h1,
.theme-islamic .scholar-stats-strip h2,
.theme-islamic .scholar-stats-strip h3,
.theme-islamic .hero-section h4,
.theme-islamic .hero-section h5,
.theme-islamic .hero-section h6,
.theme-islamic .page-hero h4,
.theme-islamic .page-hero h5,
.theme-islamic .page-hero h6 {
  color: var(--h-parchment) !important;
}

/* Paragraph/body text inside dark containers */
.theme-islamic section.bg-primary p,
.theme-islamic .scholar-hero p {
  color: rgba(250,246,238,0.82) !important;
}

/* Non-heading text nodes inside dark headers */
.theme-islamic .branch-card-header .branch-name,
.theme-islamic .branch-card-header .branch-city,
.theme-islamic .branch-card-header .branch-type-badge,
.theme-islamic .scholar-hero .scholar-hero-name,
.theme-islamic .scholar-hero .scholar-hero-intro {
  color: #FFFFFF !important;
}

/* Body text — editorial feel */
.theme-islamic p,
.theme-islamic li,
.theme-islamic td,
.theme-islamic .card-text {
  font-family: var(--h-font-body);
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: #2C1F14;
}

/* Muted text — warm walnut, sufficient contrast on parchment */
.theme-islamic .text-muted,
.theme-islamic .form-text,
.theme-islamic small.text-muted {
  font-family: var(--h-font-body);
  color: rgba(44,31,20,0.70) !important;
  line-height: 1.7;
}

/* Gold links — scoped to content areas only (NOT nav/dropdown/footer) */
.theme-islamic main a:not(.btn):not([class*="nav"]):not([class*="card-"]):not([class*="btn"]),
.theme-islamic article a:not(.btn),
.theme-islamic .content-body a:not(.btn),
.theme-islamic p > a:not(.btn) {
  color: var(--h-gold-dim);
  text-decoration-color: rgba(200,168,107,0.4);
  transition: color 0.2s ease;
}
.theme-islamic main a:not(.btn):not([class*="nav"]):hover,
.theme-islamic article a:not(.btn):hover,
.theme-islamic p > a:not(.btn):hover {
  color: var(--h-gold);
}

/* Light & mid-tone backgrounds — parchment + star tile */
.theme-islamic .bg-light,
.theme-islamic .bg-white,
.theme-islamic .bg-light-green {
  background-color: var(--h-parchment-mid) !important;
  background-image: var(--svg-star-light) !important;
  background-size: 120px 120px !important;
}

/* Dark sections — rich navy with warm star texture */
.theme-islamic .bg-dark-green {
  background-color: var(--h-navy) !important;
  background-image: var(--svg-star-dark) !important;
  background-size: 128px 128px !important;
}
/* Dark section body text — must be light (dark walnut would be invisible on navy) */
.theme-islamic .bg-dark-green p,
.theme-islamic .bg-dark-green li,
.theme-islamic .bg-dark-green td,
.theme-islamic .bg-dark-green .card-text,
.theme-islamic .bg-dark-green .text-muted,
.theme-islamic .bg-dark-green small {
  color: rgba(250,246,238,0.80) !important;
}
.theme-islamic .bg-dark-green a:not(.btn) {
  color: var(--h-gold-bright) !important;
}
.theme-islamic .bg-dark-green a:not(.btn):hover {
  color: #FFFFFF !important;
}

/* Default page sections — parchment base */
.theme-islamic section:not([class*="bg-"]):not(.hero-section):not(.prayer-times-section) {
  background-color: var(--h-parchment);
  background-image: var(--svg-star-light);
  background-size: 120px 120px;
}

/* Arabic text */
.theme-islamic [lang="ar"],
.theme-islamic .arabic-text {
  font-family: var(--h-font-arabic) !important;
  line-height: 2.1;
}

/* Urdu text — Nastaliq has extreme descenders; needs generous height + no clipping */
.theme-islamic [lang="ur"],
.theme-islamic .urdu-text {
  font-family: var(--h-font-urdu) !important;
  line-height: 3.2 !important;
  padding-top: 0.4em !important;
  padding-bottom: 0.6em !important;
  overflow: visible !important;
  display: block;
}

/* Section super-labels */
.theme-islamic .section-label,
.theme-islamic .section-tag,
.theme-islamic .hero-badge {
  font-family: var(--h-font-label) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}


/* ══════════════════════════════════════════════════════
   4. NAVIGATION — THE GATEWAY
   ══════════════════════════════════════════════════════ */

/* Transparent state — warm frosted glass */
.theme-islamic .ab-navbar {
  background: rgba(10,20,38,0.48) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(200,168,107,0.15) !important;
  transition:
    background 0.45s cubic-bezier(0.4,0,0.2,1),
    backdrop-filter 0.45s cubic-bezier(0.4,0,0.2,1),
    border-color 0.45s cubic-bezier(0.4,0,0.2,1),
    box-shadow 0.45s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Scrolled state — parchment with gold border */
.theme-islamic .ab-navbar.scrolled {
  background: rgba(250,246,238,0.97) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  border-bottom: 1px solid rgba(200,168,107,0.32) !important;
  box-shadow: 0 2px 28px rgba(100,65,15,0.11), 0 1px 4px rgba(100,65,15,0.06) !important;
}

/* ── Logo: consistent font in BOTH states — only color changes on scroll ── */
/* app.css uses Poppins; theme scrolled rule was adding Cormorant only when scrolled
   → font snapped on scroll. Fix: lock to display font universally. */
.theme-islamic .ab-logo-name {
  font-family: var(--h-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}
.theme-islamic .ab-logo-tagline {
  font-family: var(--h-font-label) !important;
  letter-spacing: 0.04em !important;
  font-size: 0.6rem !important;
  line-height: 1.6 !important;
}

/* ── Nav links: consistent font in BOTH states — only color changes on scroll ── */
/* Body inherits var(--h-font-body) = EB Garamond (serif); nav links at 0.875rem
   look better with Inter (label font). Set once so scroll only changes color. */
.theme-islamic .ab-nav-links > li > a,
.theme-islamic .ab-nav-links > li > button {
  font-family: var(--h-font-label) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  transition: color 0.3s cubic-bezier(0.4,0,0.2,1),
              text-shadow 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Non-scrolled — white over hero image */
.theme-islamic .ab-navbar:not(.scrolled) .ab-nav-links > li > a,
.theme-islamic .ab-navbar:not(.scrolled) .ab-nav-links > li > button {
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45) !important;
}
.theme-islamic .ab-navbar:not(.scrolled) .ab-nav-links > li > a:hover,
.theme-islamic .ab-navbar:not(.scrolled) .ab-nav-links > li > button:hover {
  color: var(--h-gold-bright) !important;
  text-shadow: 0 0 20px rgba(226,201,140,0.45), 0 1px 6px rgba(0,0,0,0.45) !important;
}
.theme-islamic .ab-navbar:not(.scrolled) .ab-logo-name {
  color: rgba(255,255,255,0.96) !important;
}
.theme-islamic .ab-navbar:not(.scrolled) .ab-logo-tagline {
  color: rgba(255,255,255,0.56) !important;
}

/* Scrolled — navy on parchment (color only, font already set above) */
.theme-islamic .ab-navbar.scrolled .ab-nav-links > li > a,
.theme-islamic .ab-navbar.scrolled .ab-nav-links > li > button {
  color: var(--h-navy) !important;
}
.theme-islamic .ab-navbar.scrolled .ab-nav-links > li > a:hover,
.theme-islamic .ab-navbar.scrolled .ab-nav-links > li > button:hover {
  color: var(--h-gold-dim) !important;
}
.theme-islamic .ab-navbar.scrolled .ab-logo-name {
  color: var(--h-navy) !important;
}
.theme-islamic .ab-navbar.scrolled .ab-logo-tagline {
  color: rgba(44,31,20,0.55) !important;
}

/* Active link — gold in both states */
.theme-islamic .ab-nav-links > li > a.active {
  color: var(--h-gold) !important;
}
.theme-islamic .ab-nav-links > li > a.active::after {
  background: var(--h-gold) !important;
}

/* Dropdown menus — always solid parchment, always dark text */
.theme-islamic .ab-dropdown-menu {
  background: var(--h-parchment) !important;
  border: 1px solid rgba(200,168,107,0.28) !important;
  box-shadow: 0 12px 40px rgba(100,65,15,0.16), 0 4px 12px rgba(100,65,15,0.1) !important;
}
/* Dropdown links — always navy, regardless of navbar scroll state */
.theme-islamic .ab-dropdown-menu a,
.theme-islamic .ab-dropdown-menu a:link,
.theme-islamic .ab-dropdown-menu a:visited {
  color: var(--h-navy) !important;
  font-family: var(--h-font-display) !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.01em !important;
}
.theme-islamic .ab-dropdown-menu a:hover {
  background: var(--h-parchment-mid) !important;
  color: var(--h-gold-dim) !important;
}
.theme-islamic .ab-dropdown-menu a i {
  color: var(--h-gold-dim) !important;
}

/* Language toggle — adapts to scroll state */
.theme-islamic .ab-lang-toggle {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  transition: all 0.25s var(--h-ease) !important;
}
.theme-islamic .ab-navbar.scrolled .ab-lang-toggle {
  background: rgba(200,168,107,0.12) !important;
  color: var(--h-navy) !important;
  border: 1px solid rgba(200,168,107,0.35) !important;
}
.theme-islamic .ab-lang-toggle:hover,
.theme-islamic .ab-lang-toggle[aria-expanded="true"] {
  background: rgba(200,168,107,0.22) !important;
  color: var(--h-gold-dim) !important;
  border-color: rgba(200,168,107,0.5) !important;
}

/* Language menu — always solid parchment, always dark text */
.theme-islamic .ab-lang-menu {
  background: var(--h-parchment) !important;
  border: 1px solid rgba(200,168,107,0.28) !important;
  box-shadow: 0 12px 40px rgba(100,65,15,0.16) !important;
}
.theme-islamic .ab-lang-item {
  color: var(--h-navy) !important;
  font-family: var(--h-font-display) !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.01em !important;
}
.theme-islamic .ab-lang-item:hover {
  background: var(--h-parchment-mid) !important;
  color: var(--h-gold-dim) !important;
}
.theme-islamic .ab-lang-item.active {
  color: var(--h-gold-dim) !important;
  font-weight: 700 !important;
  background: rgba(200,168,107,0.08) !important;
}

/* Mobile menu */
.theme-islamic .ab-mobile-menu {
  background: var(--h-parchment) !important;
  border-top: 1px solid rgba(200,168,107,0.2) !important;
}
/* Mobile nav links — dark text */
.theme-islamic .ab-mobile-menu .ab-nav-links > li > a,
.theme-islamic .ab-mobile-menu .ab-nav-links > li > button {
  color: var(--h-navy) !important;
}
.theme-islamic .ab-mobile-menu .ab-nav-links > li > a:hover,
.theme-islamic .ab-mobile-menu .ab-nav-links > li > button:hover {
  color: var(--h-gold-dim) !important;
}


/* ══════════════════════════════════════════════════════
   5. HERO — THE GRAND ENTRANCE
   ══════════════════════════════════════════════════════ */

/* Gold arch border (slightly taller than the parchment arch) */
.theme-islamic .hero-section::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 168px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 38%,
    rgba(200,168,107,0.7) 43%,
    rgba(200,168,107,0.7) 100%
  );
  clip-path: polygon(
    0% 100%, 0% 44%,
    14% 44%, 18.5% 28%, 26.5% 11.5%, 38% 2.5%, 50% 0%,
    62% 2.5%, 73.5% 11.5%, 81.5% 28%, 86% 44%,
    100% 44%, 100% 100%
  );
  z-index: 7;
  pointer-events: none;
}

/* Parchment arch fill — "entering through a mosque doorway" */
.theme-islamic .hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: 162px;
  background: var(--h-parchment);
  clip-path: polygon(
    0% 100%, 0% 46%,
    15% 46%, 19% 30%, 27% 13%, 38.5% 3.5%, 50% 1%,
    61.5% 3.5%, 73% 13%, 81% 30%, 85% 46%,
    100% 46%, 100% 100%
  );
  z-index: 8;
  pointer-events: none;
}

/* Atmospheric overlay — cinematic vignette with warm amber undertone */
.theme-islamic .hero-slide-overlay {
  background:
    radial-gradient(ellipse 110% 90% at 50% 42%, rgba(8,18,32,0.22) 0%, rgba(8,18,32,0.80) 100%),
    linear-gradient(180deg, rgba(8,18,32,0.55) 0%, rgba(20,12,6,0.55) 55%, rgba(8,18,32,0.85) 100%) !important;
}

/* Replace diamond tile with authentic Islamic star pattern */
.theme-islamic .hero-geometric {
  background-image: var(--svg-hero-tile) !important;
  background-size: 80px 80px !important;
  opacity: 1;
}

/* Corner ornaments on hero content */
.theme-islamic .hero-content {
  position: relative;
}
.theme-islamic .hero-content::before,
.theme-islamic .hero-content::after {
  content: '';
  position: absolute;
  width: 48px; height: 48px;
  background: var(--svg-corner) no-repeat;
  background-size: 48px 48px;
  pointer-events: none;
  opacity: 0.6;
}
.theme-islamic .hero-content::before { top: -20px; left: -20px; }
.theme-islamic .hero-content::after  { bottom: -20px; right: -20px; transform: rotate(180deg); }

/* Hero headings & text — always white over dark overlay (overrides global heading rule) */
.theme-islamic .hero-section h1,
.theme-islamic .hero-section h2,
.theme-islamic .hero-section h3,
.theme-islamic .hero-section p {
  color: #FFFFFF !important;
}

/* Hero badge — manuscript seal */
.theme-islamic .hero-badge {
  background: rgba(200,168,107,0.15) !important;
  border: 1px solid rgba(200,168,107,0.5) !important;
  color: var(--h-gold-bright) !important;
  font-family: var(--h-font-label) !important;
  letter-spacing: 0.1em !important;
  backdrop-filter: blur(4px);
}

/* Hero title — monumental Cormorant display */
.theme-islamic .hero-title {
  font-family: var(--h-font-display) !important;
  font-size: clamp(2.4rem, 5.5vw, 4.8rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.12 !important;
  color: #FFFFFF !important;
  font-optical-sizing: auto;
  text-shadow: 0 2px 32px rgba(0,0,0,0.60), 0 1px 6px rgba(0,0,0,0.35);
}

/* Hero subtitle — lighter, slightly italic */
.theme-islamic .hero-subtitle {
  font-family: var(--h-font-display) !important;
  font-size: clamp(1.1rem, 2vw, 1.45rem) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  letter-spacing: 0.02em !important;
  color: rgba(255,255,255,0.88) !important;
  text-shadow: 0 1px 14px rgba(0,0,0,0.40);
}

/* Stats bar — deep navy */
.theme-islamic .hero-stats-bar {
  background: rgba(10,22,40,0.94) !important;
  border-top: 1px solid rgba(200,168,107,0.3) !important;
  position: relative;
}

/* Muqarnas pattern above stats bar */
.theme-islamic .hero-stats-bar::before {
  content: '';
  position: absolute;
  top: -20px; left: 0; right: 0;
  height: 20px;
  background: var(--svg-muqarnas) repeat-x center bottom;
  background-size: 40px 20px;
  pointer-events: none;
}

/* Stats counters — Cormorant Garamond numerals */
.theme-islamic .hero-stat .counter,
.theme-islamic .hero-stat [data-target],
.theme-islamic .hero-stat-number {
  font-family: var(--h-font-display) !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  color: var(--h-gold-bright) !important;
  letter-spacing: -0.02em;
}
.theme-islamic .hero-stat small {
  font-family: var(--h-font-label) !important;
  letter-spacing: 0.06em !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  opacity: 0.75;
}


/* ══════════════════════════════════════════════════════
   5b. INNER PAGE HERO
   ══════════════════════════════════════════════════════ */

/* Atmospheric overlay for inner page banners */
.theme-islamic .page-hero-bg {
  filter: brightness(0.32) !important;
}
.theme-islamic .page-hero-overlay {
  background:
    radial-gradient(ellipse 110% 100% at 50% 40%, rgba(8,18,32,0.18) 0%, rgba(8,18,32,0.70) 100%),
    linear-gradient(170deg, rgba(10,22,40,0.88) 0%, rgba(26,10,6,0.48) 55%, rgba(10,22,40,0.90) 100%) !important;
}

/* Inner page hero — pointed arch at bottom (same visual language as home hero) */
.theme-islamic .page-hero::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 68px;
  background: rgba(200,168,107,0.65);
  clip-path: polygon(
    0% 100%, 0% 52%,
    18% 52%, 24% 28%, 35% 8%, 50% 0%,
    65% 8%, 76% 28%, 82% 52%,
    100% 52%, 100% 100%
  );
  z-index: 3;
  pointer-events: none;
}
.theme-islamic .page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 62px;
  background: var(--h-parchment);
  clip-path: polygon(
    0% 100%, 0% 56%,
    19% 56%, 25% 32%, 36% 11%, 50% 2%,
    64% 11%, 75% 32%, 81% 56%,
    100% 56%, 100% 100%
  );
  z-index: 4;
  pointer-events: none;
}

/* Inner page hero typography */
.theme-islamic .page-hero-title {
  font-family: var(--h-font-display) !important;
  font-size: clamp(1.9rem, 4vw, 3.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  color: #FFFFFF !important;
  font-optical-sizing: auto;
  text-shadow: 0 2px 28px rgba(0,0,0,0.55) !important;
}
.theme-islamic .page-hero-subtitle {
  font-family: var(--h-font-display) !important;
  font-size: clamp(1rem, 2vw, 1.22rem) !important;
  font-style: italic !important;
  color: rgba(255,255,255,0.85) !important;
  text-shadow: 0 1px 12px rgba(0,0,0,0.4) !important;
}

/* Breadcrumb — warm gold on dark hero */
.theme-islamic .page-breadcrumb .breadcrumb-item a {
  color: rgba(226,201,140,0.82) !important;
  transition: color 0.2s !important;
}
.theme-islamic .page-breadcrumb .breadcrumb-item a:hover {
  color: var(--h-gold-bright) !important;
}
.theme-islamic .page-breadcrumb .breadcrumb-item.active {
  color: var(--h-gold) !important;
}
.theme-islamic .page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(200,168,107,0.45) !important;
}


/* ══════════════════════════════════════════════════════
   6. ANNOUNCEMENT BARS
   ══════════════════════════════════════════════════════ */

/* Next Bayan Bar — walnut amber */
.theme-islamic .next-bayan-bar {
  background: var(--h-walnut-mid) !important;
  border-bottom: 1px solid rgba(200,168,107,0.2) !important;
}
.theme-islamic .next-bayan-label,
.theme-islamic .next-bayan-info strong {
  font-family: var(--h-font-display) !important;
  color: var(--h-gold-bright) !important;
}
.theme-islamic .next-bayan-dot {
  background: var(--h-gold) !important;
  box-shadow: 0 0 0 4px rgba(200,168,107,0.2) !important;
}
.theme-islamic .next-bayan-btn {
  background: rgba(200,168,107,0.15) !important;
  border: 1px solid rgba(200,168,107,0.4) !important;
  color: var(--h-gold-bright) !important;
}
.theme-islamic .next-bayan-btn:hover {
  background: rgba(200,168,107,0.28) !important;
}

/* News Ticker — dark walnut */
.theme-islamic .news-ticker-wrapper {
  background: var(--h-walnut) !important;
  border-bottom: 1px solid rgba(200,168,107,0.15) !important;
}
.theme-islamic .news-ticker-label {
  background: rgba(200,168,107,0.9) !important;
  color: var(--white) !important;
  font-family: var(--h-font-label) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-right: 1px solid rgba(200,168,107,0.2) !important;
}
.theme-islamic .ticker-item {
  color: rgba(250,246,238,0.82) !important;
  font-family: var(--h-font-display) !important;
  font-size: 0.95rem !important;
}
.theme-islamic .ticker-item:hover { color: var(--h-gold-bright) !important; }
.theme-islamic .ticker-sep { color: var(--h-gold-dim) !important; }


/* ══════════════════════════════════════════════════════
   7. SECTION ARCHITECTURE
   ══════════════════════════════════════════════════════ */

/* Section header — editorial manuscript */
.theme-islamic .section-header {
  position: relative;
  text-align: center;
  margin-bottom: 3rem;
}

/* Section label above the title */
.theme-islamic .section-label,
.theme-islamic .section-header > small,
.theme-islamic .section-header > .text-muted:first-child {
  font-family: var(--h-font-label) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--h-gold-dark) !important; /* #7A5E28 — 5.7:1 on parchment, passes WCAG AA */
  display: block;
  margin-bottom: 0.5rem;
}

/* Section title — Cormorant display */
.theme-islamic .section-title {
  font-family: var(--h-font-display) !important;
  font-size: clamp(1.8rem, 3.5vw, 2.85rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.25 !important;
  color: var(--h-navy) !important;
}

/* Replace plain gold bar with ornamental SVG divider */
.theme-islamic .section-header .section-title::after {
  content: '' !important;
  display: block !important;
  width: 280px !important;
  height: 28px !important;
  background: var(--svg-ornament) no-repeat center !important;
  background-size: 280px 28px !important;
  margin: 0.85rem auto 0 !important;
  border-radius: 0 !important;
}
[dir="rtl"] .theme-islamic .section-header .section-title::after,
.theme-islamic [dir="rtl"] .section-header .section-title::after {
  transform: scaleX(-1);
}

/* Section subtitle */
.theme-islamic .section-subtitle {
  font-family: var(--h-font-display) !important;
  font-size: 1.1rem !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: rgba(44,31,20,0.72) !important;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.85 !important;
}

/* Dark sections — gold heading treatment */
.theme-islamic .bg-dark-green .section-title,
.theme-islamic .bg-dark-green h1,
.theme-islamic .bg-dark-green h2,
.theme-islamic .bg-dark-green h3 {
  color: var(--h-gold-bright) !important;
}
.theme-islamic .bg-dark-green .section-subtitle {
  color: rgba(250,246,238,0.65) !important;
}
.theme-islamic .bg-dark-green .section-label,
.theme-islamic .bg-dark-green small.text-muted {
  color: rgba(200,168,107,0.75) !important;
}

/* Gold muqarnas top-border on dark sections */
.theme-islamic .bg-dark-green {
  position: relative;
}
.theme-islamic .bg-dark-green::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 20px;
  background: var(--svg-muqarnas) repeat-x center;
  background-size: 40px 20px;
  opacity: 0.38;
  pointer-events: none;
  z-index: 1;
}

/* Alternating sections — deeper parchment */
.theme-islamic section:nth-of-type(even):not([class*="bg-"]) {
  background-color: var(--h-parchment-mid);
  background-image: var(--svg-star-light);
  background-size: 120px 120px;
}


/* ══════════════════════════════════════════════════════
   8. CARDS — CHAMBERS OF KNOWLEDGE
   ══════════════════════════════════════════════════════ */

/* Base card */
.theme-islamic .card,
.theme-islamic .course-card,
.theme-islamic .news-card,
.theme-islamic .bayan-card,
.theme-islamic .branch-card,
.theme-islamic .resource-card,
.theme-islamic .pillar-card,
.theme-islamic .program-card,
.theme-islamic .donation-card {
  background: var(--h-parchment) !important;
  border: 1px solid rgba(200,168,107,0.22) !important;
  box-shadow: 0 2px 14px rgba(100,65,15,0.08), 0 1px 4px rgba(100,65,15,0.05) !important;
  transition:
    transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform;
}

.theme-islamic .card:hover,
.theme-islamic .course-card:hover,
.theme-islamic .news-card:hover,
.theme-islamic .bayan-card:hover,
.theme-islamic .program-card:hover {
  transform: translateY(-6px) scale(1.008) !important;
  box-shadow:
    0 18px 48px rgba(100,65,15,0.14),
    0 6px 18px rgba(100,65,15,0.09),
    0 0 0 1px rgba(200,168,107,0.22) inset !important;
  border-color: rgba(200,168,107,0.48) !important;
}

/* Gold accent left-border on hover */
.theme-islamic .course-card,
.theme-islamic .news-card,
.theme-islamic .program-card { position: relative; overflow: hidden; }

.theme-islamic .course-card::before,
.theme-islamic .news-card::before,
.theme-islamic .program-card::before {
  content: '';
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 3px;
  background: linear-gradient(to bottom, transparent, var(--h-gold), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--h-ease);
  border-radius: 0 2px 2px 0;
}
.theme-islamic .course-card:hover::before,
.theme-islamic .news-card:hover::before,
.theme-islamic .program-card:hover::before { opacity: 1; }

/* Card titles */
.theme-islamic .course-card-title,
.theme-islamic .news-card-title,
.theme-islamic .card-title,
.theme-islamic .bayan-card-title {
  font-family: var(--h-font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--h-navy) !important;
  line-height: 1.4 !important;
}

/* Card metadata */
.theme-islamic .course-card-meta,
.theme-islamic .news-card-meta,
.theme-islamic .card-meta {
  font-family: var(--h-font-label) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  color: var(--h-bronze) !important;
}
.theme-islamic .course-card-meta i,
.theme-islamic .news-card-meta i,
.theme-islamic .card-meta i { color: var(--h-gold-dim) !important; }

/* Category badges */
.theme-islamic .course-card-track,
.theme-islamic .news-card-category {
  font-family: var(--h-font-label) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  background: rgba(200,168,107,0.18) !important;
  color: var(--h-gold-dark) !important;
  border: 1px solid rgba(200,168,107,0.3) !important;
}

/* Card footer area */
.theme-islamic .course-card-footer {
  background: rgba(200,168,107,0.07) !important;
  border-top: 1px solid rgba(200,168,107,0.18) !important;
}

/* Card body text */
.theme-islamic .course-card-desc,
.theme-islamic .news-card-body p,
.theme-islamic .card-body p {
  font-family: var(--h-font-body) !important;
  font-size: 1rem !important;
  line-height: 1.78 !important;
  color: rgba(44,31,20,0.80) !important;
}

/* Bootstrap card header */
.theme-islamic .card-header {
  background: rgba(200,168,107,0.1) !important;
  border-bottom: 1px solid rgba(200,168,107,0.22) !important;
  color: var(--h-navy) !important;
  font-family: var(--h-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
.theme-islamic .card-body { background: transparent !important; }


/* ══════════════════════════════════════════════════════
   9. BUTTONS — ENGRAVED BRASS & PARCHMENT
   ══════════════════════════════════════════════════════ */

/* Primary gold button — engraved gold leaf + shimmer on hover */
.theme-islamic .btn-gold {
  background: linear-gradient(
    145deg,
    var(--h-gold-bright) 0%,
    var(--h-gold) 50%,
    var(--h-gold-dim) 100%
  ) !important;
  border: 1px solid var(--h-gold-dim) !important;
  color: var(--h-ink) !important;
  font-family: var(--h-font-label) !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2) !important;
  box-shadow:
    0 2px 10px rgba(100,65,15,0.22),
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.08) inset !important;
  transition: all 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
  position: relative;
  overflow: hidden;
}
.theme-islamic .btn-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%);
  background-size: 200% 100%;
  background-position: 200% center;
  transition: background-position 0.5s ease;
  pointer-events: none;
}
.theme-islamic .btn-gold:hover::after {
  background-position: -50% center;
}
.theme-islamic .btn-gold:hover {
  background: linear-gradient(
    145deg,
    #EDD89A 0%,
    var(--h-gold-bright) 50%,
    var(--h-gold) 100%
  ) !important;
  box-shadow:
    0 8px 24px rgba(100,65,15,0.28),
    0 1px 0 rgba(255,255,255,0.22) inset !important;
  transform: translateY(-2px) !important;
  color: var(--h-ink) !important;
  border-color: var(--h-gold) !important;
}

/* Outline button — parchment manuscript */
.theme-islamic .btn-outline {
  background: rgba(250,246,238,0.08) !important;
  border: 1px solid rgba(200,168,107,0.5) !important;
  color: var(--h-gold-bright) !important;
  font-family: var(--h-font-label) !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  backdrop-filter: blur(4px) !important;
  transition: all 0.25s var(--h-ease) !important;
}
.theme-islamic .btn-outline:hover {
  background: rgba(200,168,107,0.15) !important;
  border-color: var(--h-gold) !important;
  color: var(--h-gold-bright) !important;
}

/* Bootstrap primary */
.theme-islamic .btn-primary {
  background: var(--h-navy) !important;
  border-color: var(--h-navy) !important;
  font-family: var(--h-font-label) !important;
  letter-spacing: 0.04em !important;
}
.theme-islamic .btn-primary:hover {
  background: var(--h-navy-mid) !important;
  border-color: var(--h-navy-mid) !important;
  box-shadow: var(--h-shadow-gold) !important;
}

/* Outline-gold */
.theme-islamic .btn-outline-gold {
  border-color: var(--h-gold) !important;
  color: var(--h-gold-dim) !important;
}
.theme-islamic .btn-outline-gold:hover {
  background: var(--h-gold) !important;
  color: var(--h-ink) !important;
}

/* All buttons — shared lettering quality */
.theme-islamic .btn {
  font-family: var(--h-font-label);
  transition: all 0.25s var(--h-ease);
}
.theme-islamic .btn-lg {
  letter-spacing: 0.06em;
  padding: 0.8rem 2rem;
}

/* Badges */
.theme-islamic .badge {
  font-family: var(--h-font-label) !important;
  letter-spacing: 0.05em !important;
  font-size: 0.7rem !important;
}


/* ══════════════════════════════════════════════════════
   10. FORMS — MANUSCRIPT PRECISION
   ══════════════════════════════════════════════════════ */

.theme-islamic .form-control,
.theme-islamic .form-select,
.theme-islamic textarea.form-control {
  background: var(--h-parchment) !important;
  border: 1px solid rgba(200,168,107,0.3) !important;
  color: var(--h-ink) !important;
  transition: border-color 0.25s var(--h-ease), box-shadow 0.25s var(--h-ease) !important;
}
.theme-islamic .form-control:focus,
.theme-islamic .form-select:focus {
  background: var(--h-parchment) !important;
  border-color: var(--h-gold) !important;
  box-shadow: 0 0 0 3px rgba(200,168,107,0.18), var(--h-shadow-sm) !important;
  outline: none !important;
}
.theme-islamic .form-control::placeholder { color: rgba(44,31,20,0.45) !important; }

.theme-islamic .form-label {
  font-family: var(--h-font-label) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--h-navy) !important;
  text-transform: uppercase !important;
  margin-bottom: 0.4rem !important;
}
.theme-islamic .input-group-text {
  background: rgba(200,168,107,0.12) !important;
  border: 1px solid rgba(200,168,107,0.3) !important;
  color: var(--h-gold-dim) !important;
}


/* ══════════════════════════════════════════════════════
   11. FOOTER — THE ARCHIVE
   ══════════════════════════════════════════════════════ */

.theme-islamic .ab-footer {
  background-color: var(--h-walnut) !important;
  background-image: var(--svg-star-dark) !important;
  background-size: 128px 128px !important;
  position: relative;
}

/* Muqarnas cornice at top of footer */
.theme-islamic .ab-footer::before {
  content: '';
  display: block;
  height: 24px;
  background: var(--svg-muqarnas) repeat-x center top;
  background-size: 40px 20px;
  opacity: 0.35;
  pointer-events: none;
}

/* Footer brand */
.theme-islamic .footer-brand .ab-logo-name {
  font-family: var(--h-font-display) !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.04em !important;
  color: var(--h-gold-bright) !important;
}
.theme-islamic .footer-tagline {
  color: rgba(250,246,238,0.6) !important;
  font-family: var(--h-font-display) !important;
  font-style: italic !important;
  letter-spacing: 0.02em !important;
}

/* Footer headings */
.theme-islamic .footer-heading {
  font-family: var(--h-font-label) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--h-gold) !important;
  border-bottom: 1px solid rgba(200,168,107,0.2) !important;
  padding-bottom: 0.6rem !important;
  margin-bottom: 1rem !important;
}
.theme-islamic .footer-heading::after { display: none !important; }

/* Footer links */
.theme-islamic .footer-links a {
  color: rgba(250,246,238,0.7) !important;
  font-family: var(--h-font-display) !important;
  font-size: 0.95rem !important;
  transition: color 0.2s, padding-left 0.2s !important;
}
.theme-islamic .footer-links a:hover {
  color: var(--h-gold-bright) !important;
  padding-left: 6px !important;
}

/* Footer social icons */
.theme-islamic .footer-social a {
  background: rgba(200,168,107,0.1) !important;
  border: 1px solid rgba(200,168,107,0.2) !important;
  color: rgba(250,246,238,0.7) !important;
  transition: all 0.25s var(--h-ease) !important;
}
.theme-islamic .footer-social a:hover {
  background: rgba(200,168,107,0.25) !important;
  border-color: var(--h-gold) !important;
  color: var(--h-gold-bright) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--h-shadow-gold) !important;
}

/* Footer contact */
.theme-islamic .footer-contact-item {
  color: rgba(250,246,238,0.72) !important;
  font-family: var(--h-font-display) !important;
}
.theme-islamic .footer-contact-item i { color: var(--h-gold) !important; }

/* Footer bottom bar */
.theme-islamic .ab-footer-bottom {
  background: rgba(10,14,20,0.6) !important;
  border-top: 1px solid rgba(200,168,107,0.15) !important;
}
.theme-islamic .ab-footer-bottom p,
.theme-islamic .ab-footer-bottom small {
  color: rgba(250,246,238,0.5) !important;
  font-family: var(--h-font-label) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.04em !important;
}
.theme-islamic .ab-footer-bottom a:hover { color: var(--h-gold) !important; }


/* ══════════════════════════════════════════════════════
   12. COMPONENT OVERRIDES
   ══════════════════════════════════════════════════════ */

/* ── Prayer Times ── */
.theme-islamic .prayer-times-section {
  background-color: var(--h-parchment-mid) !important;
  background-image: var(--svg-star-light) !important;
  background-size: 120px 120px !important;
}
.theme-islamic .prayer-times-title {
  color: var(--h-navy) !important;
  font-family: var(--h-font-display) !important;
}
.theme-islamic .prayer-times-city {
  color: rgba(27,58,107,0.65) !important;
}
.theme-islamic .prayer-times-city-select {
  background: rgba(200,168,107,0.15) !important;
  border-color: rgba(200,168,107,0.40) !important;
  color: var(--h-navy) !important;
}
.theme-islamic .prayer-times-city-select option {
  background: var(--h-parchment) !important;
  color: var(--h-navy) !important;
}
.theme-islamic .prayer-time-item {
  background: rgba(200,168,107,0.15) !important;
  border-color: rgba(200,168,107,0.30) !important;
}
.theme-islamic .pt-name {
  color: var(--h-bronze) !important;
}
.theme-islamic .pt-time {
  color: var(--h-navy) !important;
  font-family: var(--h-font-display) !important;
}
.theme-islamic .prayer-time-item.pt-next {
  background: linear-gradient(135deg, var(--h-navy) 0%, var(--h-navy-mid) 100%) !important;
  border-color: var(--h-gold-dim) !important;
  box-shadow: var(--h-shadow-gold) !important;
}
.theme-islamic .prayer-time-item.pt-next .pt-name { color: rgba(200,168,107,0.85) !important; }
.theme-islamic .prayer-time-item.pt-next .pt-time { color: var(--h-gold-bright) !important; }

/* ── Program & Pillar Cards ── */
.theme-islamic .program-icon,
.theme-islamic .pillar-icon {
  background: rgba(200,168,107,0.12) !important;
  border: 1px solid rgba(200,168,107,0.25) !important;
  color: var(--h-gold-dim) !important;
}
.theme-islamic .program-card:hover .program-icon,
.theme-islamic .pillar-card:hover .pillar-icon {
  background: rgba(200,168,107,0.22) !important;
  box-shadow: var(--h-shadow-gold) !important;
}

/* ── Donation Progress ── */
.theme-islamic .donation-amount {
  font-family: var(--h-font-display) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--h-gold-dim) !important;
}
.theme-islamic .progress {
  background: var(--h-parchment-deep) !important;
  border-radius: 4px !important;
}
.theme-islamic .progress-bar {
  background: linear-gradient(90deg, var(--h-gold-dim), var(--h-gold-bright)) !important;
}

/* ── Stats counters (public pages) ── */
.theme-islamic .stat-number,
.theme-islamic .stats-number {
  font-family: var(--h-font-display) !important;
  font-size: 3rem !important;
  font-weight: 700 !important;
  color: var(--h-gold-bright) !important;
  letter-spacing: -0.02em !important;
}

/* ── Accordion ── */
.theme-islamic .accordion-item {
  background: var(--h-parchment) !important;
  border: 1px solid rgba(200,168,107,0.22) !important;
  margin-bottom: 0.5rem !important;
}
.theme-islamic .accordion-button {
  background: var(--h-parchment) !important;
  color: var(--h-navy) !important;
  font-family: var(--h-font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.theme-islamic .accordion-button:not(.collapsed) {
  background: rgba(200,168,107,0.1) !important;
  color: var(--h-navy) !important;
  border-bottom: 1px solid rgba(200,168,107,0.2) !important;
}
.theme-islamic .accordion-body {
  font-family: var(--h-font-body) !important;
  line-height: 1.85 !important;
  color: rgba(44,31,20,0.78) !important;
}

/* ── Tables ── */
.theme-islamic .table { color: var(--h-ink) !important; }
.theme-islamic .table thead th {
  background: rgba(200,168,107,0.12) !important;
  color: var(--h-navy) !important;
  font-family: var(--h-font-label) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-color: rgba(200,168,107,0.2) !important;
  border-bottom: 2px solid rgba(200,168,107,0.3) !important;
}
.theme-islamic .table td,
.theme-islamic .table th { border-color: rgba(200,168,107,0.15) !important; }
.theme-islamic .table-hover tbody tr:hover {
  background: rgba(200,168,107,0.06) !important;
}

/* ── Pagination ── */
.theme-islamic .page-link {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.25) !important;
  color: var(--h-navy) !important;
  font-family: var(--h-font-display) !important;
}
.theme-islamic .page-link:hover {
  background: rgba(200,168,107,0.15) !important;
  color: var(--h-gold-dim) !important;
  border-color: var(--h-gold) !important;
}
.theme-islamic .page-item.active .page-link {
  background: var(--h-navy) !important;
  border-color: var(--h-navy) !important;
  color: var(--h-gold-bright) !important;
}

/* ── Gallery ── */
.theme-islamic .gallery-item {
  border: 2px solid rgba(200,168,107,0.2) !important;
  transition: all 0.3s var(--h-ease) !important;
}
.theme-islamic .gallery-item:hover {
  border-color: var(--h-gold) !important;
  box-shadow: var(--h-shadow-gold) !important;
}

/* ── Alerts ── */
.theme-islamic .alert-info {
  background: rgba(27,58,107,0.08) !important;
  border-color: rgba(27,58,107,0.2) !important;
  color: var(--h-navy) !important;
}

/* ── Islamic Theme Badge — hidden in production ── */
.theme-islamic .islamic-theme-badge {
  display: none !important;
}


/* ══════════════════════════════════════════════════════
   12b. EXTENDED COMPONENT OVERRIDES
   (track cards, stats, VM cards, filter tabs, podcasts,
    highlight cards, CTA strip, forms, founder block)
   ══════════════════════════════════════════════════════ */

/* ── Section Tag (small-caps badge above headings) ── */
/* Solid navy bg + gold text — premium, no transparency */
.theme-islamic .section-tag {
  background: var(--h-navy) !important;
  color: var(--h-gold-bright) !important;
  border: 1px solid rgba(200,168,107,0.40) !important;
  font-family: var(--h-font-label) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}
/* On dark-green/navy containers, solid navy badge is invisible — override to transparent gold */
.theme-islamic .bg-dark-green .section-tag,
.theme-islamic section.bg-primary .section-tag,
.theme-islamic .bg-primary .section-tag {
  background: rgba(200,168,107,0.15) !important;
  color: var(--h-gold-bright) !important;
  border-color: rgba(200,168,107,0.50) !important;
}

/* ── Stat Boxes (About page — founding year, students, etc.) ── */
.theme-islamic .stat-box {
  background: rgba(200,168,107,0.50) !important;
  border: 1px solid rgba(200,168,107,0.22) !important;
  box-shadow: var(--h-shadow-sm) !important;
}
.theme-islamic .stat-value {
  font-family: var(--h-font-display) !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  color: var(--h-navy) !important;
}
.theme-islamic .stat-plus { color: var(--h-gold-dim) !important; }
.theme-islamic .stat-label {
  font-family: var(--h-font-label) !important;
  letter-spacing: 0.08em !important;
  color: var(--h-bronze) !important;
}

/* ── Vision & Mission Cards ── */
.theme-islamic .vm-card {
  background: var(--h-parchment) !important;
  border: 1px solid rgba(200,168,107,0.25) !important;
  box-shadow: var(--h-shadow) !important;
  transition: transform 0.35s var(--h-spring), box-shadow 0.35s var(--h-ease) !important;
}
.theme-islamic .vm-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--h-shadow-md) !important;
  border-color: rgba(200,168,107,0.45) !important;
}
.theme-islamic .vm-card-gold {
  background: linear-gradient(145deg, var(--h-navy) 0%, var(--h-navy-mid) 100%) !important;
  border: 1px solid rgba(200,168,107,0.3) !important;
}
.theme-islamic .vm-icon {
  background: rgba(200,168,107,0.14) !important;
  color: var(--h-gold-dim) !important;
}
.theme-islamic .vm-card-gold .vm-icon {
  background: rgba(200,168,107,0.20) !important;
  color: var(--h-gold-bright) !important;
}
.theme-islamic .vm-title {
  font-family: var(--h-font-display) !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: var(--h-navy) !important;
}
.theme-islamic .vm-card-gold .vm-title { color: var(--h-gold-bright) !important; }
.theme-islamic .vm-desc {
  font-family: var(--h-font-body) !important;
  color: rgba(44,31,20,0.75) !important;
  line-height: 1.8 !important;
}
.theme-islamic .vm-card-gold .vm-desc { color: rgba(250,246,238,0.80) !important; }

/* ── Founder Section ── */
.theme-islamic .founder-blockquote {
  font-family: var(--h-font-display) !important;
  font-size: 1.2rem !important;
  font-style: italic !important;
  color: var(--h-navy) !important;
  border-left: 4px solid var(--h-gold) !important;
  line-height: 1.9 !important;
}
[dir="rtl"] .theme-islamic .founder-blockquote {
  border-left: none !important;
  border-right: 4px solid var(--h-gold) !important;
}
.theme-islamic .founder-name {
  font-family: var(--h-font-display) !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  color: var(--h-navy) !important;
}
.theme-islamic .founder-title-badge {
  background: rgba(200,168,107,0.15) !important;
  color: var(--h-gold-dark) !important;
  border: 1px solid rgba(200,168,107,0.30) !important;
  font-family: var(--h-font-label) !important;
  letter-spacing: 0.05em !important;
}

/* ── Track Cards (Courses page — Seerat, Shabab, Atfal, Taleem) ── */
.theme-islamic .track-card {
  background: var(--h-parchment) !important;
  border: 1px solid rgba(200,168,107,0.22) !important;
  box-shadow: var(--h-shadow-sm) !important;
  transition: transform 0.38s var(--h-spring), box-shadow 0.35s var(--h-ease), border-color 0.3s var(--h-ease) !important;
}
.theme-islamic .track-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--h-shadow-md) !important;
  border-color: rgba(200,168,107,0.48) !important;
}
.theme-islamic .track-title {
  font-family: var(--h-font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: var(--h-navy) !important;
}
.theme-islamic .track-desc {
  font-family: var(--h-font-body) !important;
  color: rgba(44,31,20,0.72) !important;
  line-height: 1.78 !important;
}

/* ── Courses Filter Bar & Filter Tabs ── */
.theme-islamic .courses-filter-bar {
  background: var(--h-parchment) !important;
  border: 1px solid rgba(200,168,107,0.22) !important;
  box-shadow: var(--h-shadow-sm) !important;
}
.theme-islamic .filter-tab {
  background: transparent !important;
  border: 1.5px solid rgba(200,168,107,0.30) !important;
  color: rgba(44,31,20,0.65) !important;
  font-family: var(--h-font-label) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  transition: all 0.22s var(--h-ease) !important;
}
.theme-islamic .filter-tab:hover {
  border-color: var(--h-gold) !important;
  color: var(--h-gold-dark) !important;
  background: rgba(200,168,107,0.08) !important;
}
.theme-islamic .filter-tab.active {
  background: var(--h-navy) !important;
  border-color: var(--h-navy) !important;
  color: var(--h-gold-bright) !important;
}
.theme-islamic .search-input {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.30) !important;
  color: var(--h-ink) !important;
}
.theme-islamic .search-input:focus {
  border-color: var(--h-gold) !important;
  box-shadow: 0 0 0 3px rgba(200,168,107,0.15) !important;
}

/* ── Podcast Cards ── */
.theme-islamic .podcast-card {
  background: var(--h-parchment) !important;
  border: 1px solid rgba(200,168,107,0.22) !important;
  box-shadow: var(--h-shadow-sm) !important;
  transition: transform 0.35s var(--h-spring), box-shadow 0.35s var(--h-ease), border-color 0.3s var(--h-ease) !important;
}
.theme-islamic .podcast-card:hover {
  box-shadow: var(--h-shadow) !important;
  border-color: rgba(200,168,107,0.45) !important;
  transform: translateX(4px) !important;
}
[dir="rtl"] .theme-islamic .podcast-card:hover { transform: translateX(-4px) !important; }
.theme-islamic .podcast-card-title {
  font-family: var(--h-font-display) !important;
  font-size: 0.96rem !important;
  font-weight: 600 !important;
  color: var(--h-navy) !important;
}
.theme-islamic .podcast-card-meta {
  font-family: var(--h-font-label) !important;
  color: var(--h-bronze) !important;
}
.theme-islamic .podcast-play-btn {
  background: var(--h-navy) !important;
  border-color: var(--h-navy) !important;
  color: var(--h-gold-bright) !important;
  transition: background 0.22s var(--h-ease) !important;
}
.theme-islamic .podcast-play-btn:hover {
  background: var(--h-navy-mid) !important;
  box-shadow: var(--h-shadow-gold) !important;
}

/* ── Highlight Cards (Home — News, Podcast, Testimonial triptych) ── */
.theme-islamic .highlight-card {
  background: var(--h-parchment) !important;
  border: 1px solid rgba(200,168,107,0.25) !important;
  box-shadow: var(--h-shadow-sm) !important;
  transition: transform 0.38s var(--h-spring), box-shadow 0.35s var(--h-ease) !important;
}
.theme-islamic .highlight-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--h-shadow-md) !important;
  border-color: rgba(200,168,107,0.45) !important;
}
.theme-islamic .highlight-card-news  { background: var(--h-parchment) !important; }
.theme-islamic .highlight-card-podcast { background: var(--h-parchment-mid) !important; }
.theme-islamic .highlight-card-testimonial { background: rgba(200,168,107,0.3) !important; }
.theme-islamic .highlight-card-icon { color: var(--h-gold-dim) !important; font-size: 1.85rem !important; }
.theme-islamic .highlight-card-title {
  font-family: var(--h-font-display) !important;
  font-weight: 600 !important;
  color: var(--h-navy) !important;
}
.theme-islamic .highlight-card-desc {
  font-family: var(--h-font-body) !important;
  color: rgba(44,31,20,0.72) !important;
  line-height: 1.78 !important;
}
.theme-islamic .highlight-card-link {
  color: var(--h-gold-dark) !important;
  font-family: var(--h-font-label) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.05em !important;
}
.theme-islamic .highlight-card-link:hover { color: var(--h-gold) !important; }
.theme-islamic .highlight-card-quote {
  font-family: var(--h-font-display) !important;
  font-style: italic !important;
  color: rgba(44,31,20,0.95) !important;
  line-height: 1.85 !important;
}
.theme-islamic .highlight-card-name {
  font-family: var(--h-font-display) !important;
  font-weight: 600 !important;
  color: var(--h-navy) !important;
}
.theme-islamic .highlight-card-desig {
  font-family: var(--h-font-label) !important;
  color: var(--h-bronze) !important;
}
.theme-islamic .highlight-card-avatar-init {
  background: var(--h-navy) !important;
  color: var(--h-gold-bright) !important;
}

/* ── Home CTA Course Strip ── */
.theme-islamic .home-cta-course-inner {
  background: linear-gradient(145deg, var(--h-walnut) 0%, var(--h-navy) 100%) !important;
  border: 1px solid rgba(200,168,107,0.22) !important;
  box-shadow: var(--h-shadow-lg) !important;
  background-image: var(--svg-star-dark) !important;
  background-size: 128px 128px !important;
}
.theme-islamic .home-cta-course-title {
  font-family: var(--h-font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}
.theme-islamic .home-cta-course-badge {
  font-family: var(--h-font-label) !important;
  letter-spacing: 0.08em !important;
}
.theme-islamic .home-cta-deadline { color: rgba(250,246,238,0.82) !important; }
.theme-islamic .home-cta-free {
  background: rgba(200,168,107,0.20) !important;
  color: var(--h-gold-bright) !important;
  border-radius: 100px;
}

/* ── Form Cards (enrollment, contact) ── */
.theme-islamic .form-card {
  background: var(--h-parchment) !important;
  border: 1px solid rgba(200,168,107,0.22) !important;
}
.theme-islamic .form-card-header {
  background: var(--h-navy) !important;
  border-bottom: 1px solid rgba(200,168,107,0.28) !important;
}
.theme-islamic .form-card-header h2,
.theme-islamic .form-card-header h3,
.theme-islamic .form-card-header h4 {
  color: var(--h-parchment) !important;
  font-family: var(--h-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}
/* Global .text-muted override (dark walnut) makes these invisible on navy form-card-header.
   Higher specificity (0,3,0 vs 0,2,0) wins. */
.theme-islamic .form-card-header p,
.theme-islamic .form-card-header .text-muted,
.theme-islamic .form-card-header small {
  color: rgba(250,246,238,0.75) !important;
}

/* ── Value Cards (About pillars/values) ── */
.theme-islamic .value-card {
  background: var(--h-parchment) !important;
  border: 1px solid rgba(200,168,107,0.22) !important;
  box-shadow: var(--h-shadow-sm) !important;
}
.theme-islamic .value-card:hover {
  box-shadow: var(--h-shadow) !important;
  border-color: rgba(200,168,107,0.45) !important;
}
.theme-islamic .value-card i { color: var(--h-gold-dim) !important; }
.theme-islamic .value-card h4 {
  font-family: var(--h-font-display) !important;
  color: var(--h-navy) !important;
}

/* ── Pillar Cards (dark bg — text already correct, icon needs gold) ── */
.theme-islamic .pillar-arabic {
  font-family: var(--h-font-arabic) !important;
  color: var(--h-gold-bright) !important;
}
.theme-islamic .pillar-title {
  font-family: var(--h-font-display) !important;
  font-weight: 600 !important;
}
.theme-islamic .pillar-shine {
  font-family: var(--h-font-display) !important;
  font-style: italic !important;
  color: var(--h-gold) !important;
}
/* pillar-card background was changed to parchment by the card rule;
   app.css sets pillar-desc to white (for dark bg) — override to dark text.
   .bg-dark-green p has specificity 0,2,1+!important which beats 0,2,0+!important,
   so we need 0,3,0 scoped rules to win. */
.theme-islamic .pillar-desc {
  color: rgba(44,31,20,0.72) !important;
}
.theme-islamic .pillar-title {
  color: var(--h-navy) !important;
}
/* Specificity boost for pillar cards sitting inside .bg-dark-green sections */
.theme-islamic .bg-dark-green .pillar-title {
  color: var(--h-navy) !important;
}
.theme-islamic .bg-dark-green .pillar-shine {
  color: var(--h-gold) !important;
}
.theme-islamic .bg-dark-green .pillar-desc {
  color: rgba(44,31,20,0.72) !important;
}

/* ── Urdu overflow protection for new components ── */
html[lang="ur"] .theme-islamic .podcast-card-title,
html[lang="ur"] .theme-islamic .track-title,
html[lang="ur"] .theme-islamic .vm-title,
html[lang="ur"] .theme-islamic .highlight-card-title,
html[lang="ur"] .theme-islamic .home-cta-course-title {
  line-height: 2.8 !important;
  overflow: visible !important;
  padding-bottom: 0.45em !important;
}


/* ══════════════════════════════════════════════════════
   13. SCROLL REVEAL ANIMATIONS
   Classes added by IntersectionObserver in islamic-theme.js
   ══════════════════════════════════════════════════════ */

/* Initial hidden state */
.theme-islamic .h-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s var(--h-ease-out) var(--reveal-delay, 0s),
    transform 0.65s var(--h-ease-out) var(--reveal-delay, 0s);
}

/* Revealed */
.theme-islamic .h-reveal.h-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Fade-only variant (large elements) */
.theme-islamic .h-reveal-fade {
  opacity: 0;
  transition: opacity 0.8s var(--h-ease-out) var(--reveal-delay, 0s);
}
.theme-islamic .h-reveal-fade.h-revealed { opacity: 1; }

/* Hero entrance keyframes */
@keyframes h-enter-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes h-enter-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes h-gold-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(100,65,15,0.25), 0 0 0 0 rgba(200,168,107,0); }
  50%       { box-shadow: 0 2px 8px rgba(100,65,15,0.25), 0 0 0 6px rgba(200,168,107,0.15); }
}

/* Staggered hero entrance */
.theme-islamic .hero-badge {
  animation: h-enter-fade 0.9s var(--h-ease-out) 0.15s both;
}
.theme-islamic .hero-title {
  animation: h-enter-up 1.1s cubic-bezier(0,0,0.2,1) 0.3s both;
}
.theme-islamic .hero-subtitle {
  animation: h-enter-up 1.0s cubic-bezier(0,0,0.2,1) 0.52s both;
}
.theme-islamic .hero-actions {
  animation: h-enter-up 0.9s cubic-bezier(0,0,0.2,1) 0.72s both;
}

/* Gold shimmer on hero title text */
@keyframes h-gold-shimmer {
  0%   { background-position: -200% center; }
  60%  { background-position: 200% center; }
  100% { background-position: 200% center; }
}
.theme-islamic .hero-title {
  background: linear-gradient(
    105deg,
    #FFFFFF 0%, #FFFFFF 30%,
    var(--h-gold-bright) 50%,
    #FFFFFF 70%, #FFFFFF 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: h-enter-up 1.1s cubic-bezier(0,0,0.2,1) 0.3s both,
             h-gold-shimmer 6s ease-in-out 1.8s infinite;
}

/* Gold pulse on primary hero CTA */
.theme-islamic .hero-actions .btn-gold {
  animation: h-gold-pulse 3.5s ease infinite 2.5s;
}

/* Hero parallax — JS shifts background-position on .hero-slide (not the container) */
.theme-islamic .hero-slider {
  will-change: auto;
}


/* ══════════════════════════════════════════════════════
   14. MOBILE EXPERIENCE
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Arch simplified on mobile */
  .theme-islamic .hero-section::before,
  .theme-islamic .hero-section::after { height: 90px; }

  .theme-islamic .hero-section::after {
    clip-path: polygon(
      0% 100%, 0% 40%,
      20% 40%, 25% 20%, 35% 6%, 50% 0%,
      65% 6%, 75% 20%, 80% 40%,
      100% 40%, 100% 100%
    );
  }
  .theme-islamic .hero-section::before {
    clip-path: polygon(
      0% 100%, 0% 38%,
      20% 38%, 25% 18%, 35% 4%, 50% -2%,
      65% 4%, 75% 18%, 80% 38%,
      100% 38%, 100% 100%
    );
  }

  /* Corner ornaments — off on small screens */
  .theme-islamic .hero-content::before,
  .theme-islamic .hero-content::after { display: none; }

  /* Section ornament — narrower */
  .theme-islamic .section-header .section-title::after {
    width: 200px !important;
    background-size: 200px 28px !important;
  }

  /* Typography scale */
  .theme-islamic .hero-title {
    font-size: clamp(1.85rem, 7vw, 2.8rem) !important;
    line-height: 1.2 !important;
  }
  .theme-islamic .section-title {
    font-size: clamp(1.5rem, 5vw, 2.2rem) !important;
  }

  /* Muqarnas reduced on mobile */
  .theme-islamic .hero-stats-bar::before {
    height: 12px;
    background-size: 24px 12px;
    top: -12px;
  }
  .theme-islamic .ab-footer::before {
    height: 12px;
    background-size: 24px 12px;
  }
  .theme-islamic .bg-dark-green::before {
    height: 12px;
    background-size: 24px 12px;
  }

  /* Parallax — reset background-position on mobile */
  .theme-islamic .hero-slide {
    background-position-y: 50% !important;
  }
}

@media (max-width: 480px) {
  .theme-islamic .hero-stats-bar::before { display: none; }
  .theme-islamic .bg-dark-green::before  { display: none; }
}


/* ══════════════════════════════════════════════════════
   15. RTL — ARABIC & URDU NATIVELY DESIGNED
   ══════════════════════════════════════════════════════ */

/* Footer links — RTL indent */
[dir="rtl"] .theme-islamic .footer-links a:hover,
.theme-islamic [dir="rtl"] .footer-links a:hover {
  padding-left: 0 !important;
  padding-right: 6px !important;
}

/* Corner ornaments — mirrored */
[dir="rtl"] .theme-islamic .hero-content::before,
.theme-islamic [dir="rtl"] .hero-content::before { transform: scaleX(-1); }
[dir="rtl"] .theme-islamic .hero-content::after,
.theme-islamic [dir="rtl"] .hero-content::after  { transform: rotate(180deg) scaleX(-1); }

/* Card gold border — right side in RTL */
[dir="rtl"] .theme-islamic .course-card::before,
[dir="rtl"] .theme-islamic .news-card::before,
[dir="rtl"] .theme-islamic .program-card::before,
.theme-islamic [dir="rtl"] .course-card::before,
.theme-islamic [dir="rtl"] .news-card::before {
  left: auto;
  right: 0;
  border-radius: 2px 0 0 2px;
}

/* Section ornament — mirrored for RTL */
[dir="rtl"] .theme-islamic .section-header .section-title::after,
.theme-islamic [dir="rtl"] .section-header .section-title::after {
  transform: scaleX(-1);
}

/* Arabic headings */
[dir="rtl"] .theme-islamic .section-title,
.theme-islamic [dir="rtl"] .section-title,
[dir="rtl"] .theme-islamic h1,
[dir="rtl"] .theme-islamic h2,
[dir="rtl"] .theme-islamic h3 {
  font-family: var(--h-font-arabic) !important;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem) !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
}

/* Urdu headings */
html[lang="ur"] .theme-islamic .section-title,
html[lang="ur"] .theme-islamic h1,
html[lang="ur"] .theme-islamic h2 {
  font-family: var(--h-font-urdu) !important;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem) !important;
  line-height: 2.8 !important;
  padding-block: 0.4em !important;
}
/* Urdu logo tagline — navbar contains it so prevent clipping */
html[lang="ur"] .theme-islamic .ab-logo-tagline {
  line-height: 2.4 !important;
  padding-block: 0.25em !important;
}
/* Ensure Urdu card titles aren't clipped by overflow:hidden on card container */
html[lang="ur"] .theme-islamic .card-title,
html[lang="ur"] .theme-islamic .course-card-title,
html[lang="ur"] .theme-islamic .news-card-title {
  line-height: 2.8 !important;
  padding-bottom: 0.5em !important;
  overflow: visible !important;
}


/* ══════════════════════════════════════════════════════
   13. PAGE-SPECIFIC COMPONENT OVERRIDES
   Inline <style> blocks in views appear AFTER external
   stylesheets in cascade order, so !important is required
   to override hardcoded hex values in per-page styles.
   ══════════════════════════════════════════════════════ */

/* ── 13a. bg-primary sections (subscribe CTAs, etc.) ── */
.theme-islamic section.bg-primary,
.theme-islamic .section-padding.bg-primary {
  background: var(--h-navy) !important;
}
/* CTA "Register Now" / "Subscribe" buttons in bg-primary sections.
   btn-light gets rgba(200,168,107,0.10) globally — invisible on navy.
   Override to solid gold so the CTA stands out. */
.theme-islamic section.bg-primary .btn-light,
.theme-islamic .section-padding.bg-primary .btn-light {
  background: var(--h-gold) !important;
  border-color: var(--h-gold-dim) !important;
  color: var(--h-navy) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
.theme-islamic section.bg-primary .btn-light:hover,
.theme-islamic .section-padding.bg-primary .btn-light:hover {
  background: var(--h-gold-bright) !important;
  border-color: var(--h-gold) !important;
  color: var(--h-navy) !important;
  box-shadow: 0 4px 20px rgba(200,168,107,0.45) !important;
}
/* Inline Telegram button inside bg-primary that uses rgba white */
.theme-islamic .bg-primary .btn[style*="rgba(255,255,255"] {
  background: rgba(200,168,107,0.18) !important;
  border-color: rgba(200,168,107,0.40) !important;
  color: var(--h-parchment) !important;
}

/* ── 13b. CAUSE CARDS — Donation page ───────────────── */
.theme-islamic .cause-card {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.25) !important;
  box-shadow: 0 2px 16px rgba(8,18,32,0.08) !important;
}
.theme-islamic .cause-card-title {
  color: var(--h-navy) !important;
}
.theme-islamic .cause-card-desc {
  color: rgba(44,31,20,0.65) !important;
}
.theme-islamic .cause-progress-bar-wrap {
  background: rgba(200,168,107,0.18) !important;
}
.theme-islamic .cause-progress-bar {
  background: linear-gradient(90deg, var(--h-gold-dark), var(--h-gold-bright)) !important;
}
.theme-islamic .cause-raised {
  color: var(--h-navy) !important;
}
.theme-islamic .cause-pct {
  color: var(--h-gold-dark) !important;
}
.theme-islamic .cause-goal {
  color: rgba(44,31,20,0.50) !important;
}
.theme-islamic .cause-card-footer {
  border-top-color: rgba(200,168,107,0.20) !important;
}

/* ── 13c. DONATION FORM — amounts, steps, payment ───── */
.theme-islamic .donate-step-title {
  color: var(--h-navy) !important;
}
.theme-islamic .step-num {
  background: var(--h-navy) !important;
  color: var(--h-gold-bright) !important;
}
.theme-islamic .donation-amounts-form .donation-amount {
  background: rgba(168,134,58,0.06) !important;
  border-color: rgba(200,168,107,0.38) !important;
  color: var(--h-navy) !important;
}
.theme-islamic .donation-amounts-form .donation-amount:hover,
.theme-islamic .donation-amounts-form .donation-amount.active {
  background: var(--h-gold-dim) !important;
  border-color: var(--h-gold-dim) !important;
  color: var(--h-parchment) !important;
}
.theme-islamic .payment-method-card {
  border-color: rgba(200,168,107,0.32) !important;
  background: var(--h-parchment) !important;
}
.theme-islamic .payment-method-card i {
  color: var(--h-gold-dim) !important;
}
.theme-islamic .payment-method-card span {
  color: var(--h-navy) !important;
}
.theme-islamic .payment-method-card small {
  color: rgba(44,31,20,0.50) !important;
}
.theme-islamic .payment-method-option input:checked + .payment-method-card {
  border-color: var(--h-gold-dim) !important;
  background: rgba(168,134,58,0.10) !important;
}
.theme-islamic .donate-step {
  border-bottom-color: rgba(200,168,107,0.18) !important;
}

/* ── 13d. DONATION IMPACT SIDEBAR ───────────────────── */
.theme-islamic .donation-impact-sidebar {
  background: var(--h-navy) !important;
}
.theme-islamic .donation-impact-sidebar h3 {
  color: var(--h-gold-bright) !important;
}
.theme-islamic .impact-icon {
  background: rgba(200,168,107,0.15) !important;
  color: var(--h-gold-bright) !important;
}
.theme-islamic .impact-item strong {
  color: #FAF6EE !important;
}
.theme-islamic .impact-item p {
  color: rgba(250,246,238,0.72) !important;
}

/* ── 13e. ZAKAT CALCULATOR ───────────────────────────── */
.theme-islamic .zakat-calc {
  background: linear-gradient(135deg, var(--h-navy) 0%, var(--h-walnut) 100%) !important;
}
.theme-islamic .zakat-calc-title {
  color: #FAF6EE !important;
}
.theme-islamic .zakat-calc-subtitle {
  color: rgba(250,246,238,0.72) !important;
}
.theme-islamic .zakat-input-group label {
  color: rgba(250,246,238,0.80) !important;
}

/* ── 13f. TRUST & BANK BOXES ─────────────────────────── */
.theme-islamic .trust-box {
  background: rgba(200,168,107,0.07) !important;
}
.theme-islamic .trust-box h4 {
  color: var(--h-navy) !important;
}
.theme-islamic .trust-list li {
  color: rgba(44,31,20,0.80) !important;
}
.theme-islamic .trust-list i {
  color: var(--h-gold-dark) !important;
}
.theme-islamic .bank-transfer-box {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.28) !important;
}
.theme-islamic .bank-transfer-box h4 {
  color: var(--h-navy) !important;
}
.theme-islamic .bank-detail {
  color: rgba(44,31,20,0.80) !important;
  border-bottom-color: rgba(200,168,107,0.18) !important;
}
.theme-islamic .bank-detail span {
  color: rgba(44,31,20,0.55) !important;
}

/* ── 13g. BAYAN CARDS (index) ───────────────────────── */
.theme-islamic .bayan-card {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.22) !important;
  box-shadow: 0 2px 12px rgba(8,18,32,0.07) !important;
}
.theme-islamic .bayan-card:hover {
  box-shadow: 0 6px 28px rgba(8,18,32,0.14) !important;
}
.theme-islamic .bayan-card-title a {
  color: var(--h-navy) !important;
}
.theme-islamic .bayan-card-title a:hover {
  color: var(--h-gold-dark) !important;
}
.theme-islamic .bayan-excerpt {
  color: rgba(44,31,20,0.62) !important;
}
.theme-islamic .bayan-meta {
  color: rgba(44,31,20,0.50) !important;
}
.theme-islamic .bayan-cat-tab {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.40) !important;
  color: var(--h-navy) !important;
}
.theme-islamic .bayan-cat-tab:hover,
.theme-islamic .bayan-cat-tab.active {
  background: var(--h-navy) !important;
  border-color: var(--h-navy) !important;
  color: var(--h-gold-bright) !important;
}
.theme-islamic .bayan-cat-badge {
  background: var(--h-navy) !important;
  color: var(--h-gold-bright) !important;
}

/* ── 13h. BAYAN SHOW — detail, sidebar, related ──────── */
.theme-islamic .bayan-detail-title {
  color: var(--h-navy) !important;
}
.theme-islamic .bayan-detail-meta {
  color: rgba(44,31,20,0.58) !important;
}
.theme-islamic .bayan-description {
  color: rgba(44,31,20,0.84) !important;
}
.theme-islamic .bayan-related-wrap,
.theme-islamic .bayan-sidebar-card {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.22) !important;
  box-shadow: 0 2px 12px rgba(8,18,32,0.07) !important;
}
.theme-islamic .bayan-related-heading,
.theme-islamic .bayan-sidebar-heading {
  color: var(--h-navy) !important;
  border-bottom-color: rgba(200,168,107,0.25) !important;
}
.theme-islamic .bayan-related-item {
  border-bottom-color: rgba(200,168,107,0.18) !important;
  color: rgba(44,31,20,0.84) !important;
}
.theme-islamic .bayan-related-cat {
  color: var(--h-gold-dark) !important;
}
.theme-islamic .bayan-related-title {
  color: rgba(44,31,20,0.88) !important;
}
.theme-islamic .bayan-related-item:hover .bayan-related-title {
  color: var(--h-navy) !important;
}
.theme-islamic .bayan-sidebar-link {
  color: rgba(44,31,20,0.78) !important;
}
.theme-islamic .bayan-sidebar-link:hover,
.theme-islamic .bayan-sidebar-link.active {
  background: rgba(168,134,58,0.10) !important;
  color: var(--h-navy) !important;
}

/* ── 13i. BRANCH CARDS ───────────────────────────────── */
.theme-islamic .branch-card {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.22) !important;
  box-shadow: 0 2px 12px rgba(8,18,32,0.07) !important;
}
.theme-islamic .branch-card:hover {
  box-shadow: 0 6px 24px rgba(8,18,32,0.14) !important;
}
.theme-islamic .branch-card-header {
  background: var(--h-navy) !important;
}
.theme-islamic .branch-name {
  color: var(--h-navy) !important;
}
.theme-islamic .branch-address,
.theme-islamic .branch-contact {
  color: rgba(44,31,20,0.60) !important;
}
.theme-islamic .branch-address a,
.theme-islamic .branch-contact a {
  color: rgba(44,31,20,0.60) !important;
}
.theme-islamic .branch-card-footer {
  border-top-color: rgba(200,168,107,0.20) !important;
}
.theme-islamic .branch-stats {
  color: rgba(250,246,238,0.90) !important;
}

/* ── 13j. ALUMNI PAGE ───────────────────────────────── */
.theme-islamic .alumni-stats-bar {
  background: var(--h-navy) !important;
}
.theme-islamic .alumni-stat {
  border-right-color: rgba(200,168,107,0.20) !important;
}
.theme-islamic .alumni-featured-card,
.theme-islamic .alumni-card {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.22) !important;
  box-shadow: 0 2px 12px rgba(8,18,32,0.07) !important;
}
.theme-islamic .alumni-featured-card:hover,
.theme-islamic .alumni-card:hover {
  box-shadow: 0 6px 24px rgba(8,18,32,0.14) !important;
}
.theme-islamic .alumni-name {
  color: var(--h-navy) !important;
}
.theme-islamic .alumni-role {
  color: rgba(44,31,20,0.70) !important;
}
.theme-islamic .alumni-city {
  color: rgba(44,31,20,0.52) !important;
}
.theme-islamic .alumni-quote {
  color: rgba(44,31,20,0.68) !important;
  border-left-color: var(--h-gold-dim) !important;
}
.theme-islamic .alumni-card-footer {
  border-top-color: rgba(200,168,107,0.20) !important;
}
.theme-islamic .alumni-social-btn {
  background: rgba(200,168,107,0.10) !important;
  color: var(--h-navy) !important;
}
.theme-islamic .alumni-social-btn:hover {
  background: var(--h-navy) !important;
  color: var(--h-gold-bright) !important;
}

/* ── 13k. CAMPUS SHOW — detail, hours, mini-card ──────── */
.theme-islamic .campus-detail-card {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.22) !important;
  box-shadow: 0 2px 8px rgba(8,18,32,0.06) !important;
}
.theme-islamic .cdc-title {
  color: var(--h-navy) !important;
}
.theme-islamic .cdc-icon {
  color: var(--h-gold-dim) !important;
}
.theme-islamic .cdc-label {
  color: rgba(44,31,20,0.50) !important;
}
.theme-islamic .cdc-value {
  color: rgba(44,31,20,0.84) !important;
}
.theme-islamic .cdc-value a {
  color: var(--h-navy) !important;
}
.theme-islamic .hours-row {
  border-bottom-color: rgba(200,168,107,0.15) !important;
}
.theme-islamic .hours-day {
  color: rgba(44,31,20,0.84) !important;
}
.theme-islamic .hours-time {
  color: rgba(44,31,20,0.58) !important;
}
.theme-islamic .campus-mini-card {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.22) !important;
}
.theme-islamic .campus-mini-card:hover {
  border-color: var(--h-gold-dim) !important;
}
.theme-islamic .cmc-city {
  color: var(--h-gold-dark) !important;
}
.theme-islamic .cmc-name {
  color: var(--h-navy) !important;
}
.theme-islamic .cmc-arrow {
  color: var(--h-gold-dim) !important;
}

/* ── 13l. CAMPUS INDEX cards ─────────────────────────── */
.theme-islamic .campus-card {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.22) !important;
}
.theme-islamic .campus-card-name {
  color: var(--h-navy) !important;
}
.theme-islamic .campus-card-city {
  color: var(--h-gold-dark) !important;
}
.theme-islamic .campus-card-address {
  color: rgba(44,31,20,0.60) !important;
}
.theme-islamic .campus-card-phone {
  color: var(--h-navy) !important;
}
.theme-islamic .campus-info-card {
  background: rgba(200,168,107,0.07) !important;
}
.theme-islamic .campus-info-card h4 {
  color: var(--h-navy) !important;
}

/* ── 13m. CHANNELS PAGE ─────────────────────────────── */
.theme-islamic .channel-card {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.22) !important;
  box-shadow: 0 4px 20px rgba(8,18,32,0.08) !important;
}
.theme-islamic .channel-name {
  color: var(--h-navy) !important;
}
.theme-islamic .channel-handle {
  color: rgba(44,31,20,0.52) !important;
}
.theme-islamic .channel-desc {
  color: rgba(44,31,20,0.82) !important;
}
.theme-islamic .channel-playlists-label {
  color: rgba(44,31,20,0.48) !important;
}
.theme-islamic .channel-playlist-link {
  color: rgba(44,31,20,0.78) !important;
  border-bottom-color: rgba(200,168,107,0.15) !important;
}
.theme-islamic .channel-playlist-link:hover {
  color: var(--h-navy) !important;
}
.theme-islamic .channel-playlist-link i {
  color: var(--h-gold-dim) !important;
}
.theme-islamic .extra-platform-card {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.22) !important;
  color: rgba(44,31,20,0.80) !important;
  box-shadow: 0 2px 6px rgba(8,18,32,0.05) !important;
}
.theme-islamic .extra-platform-card:hover {
  color: var(--h-navy) !important;
}
.theme-islamic .channels-all-title {
  color: var(--h-navy) !important;
}

/* ── 13n. SCHOLAR / USTAD-G HERO ────────────────────── */
.theme-islamic .scholar-hero {
  background: linear-gradient(135deg, var(--h-walnut) 0%, var(--h-navy) 60%, #162D56 100%) !important;
}
.theme-islamic .scholar-hero-title-line {
  color: var(--h-gold-bright) !important;
}
.theme-islamic .scholar-title-tag {
  border-color: rgba(200,168,107,0.42) !important;
  color: var(--h-gold-bright) !important;
  background: rgba(200,168,107,0.12) !important;
}
.theme-islamic .scholar-stats-strip {
  background: var(--h-navy) !important;
}
.theme-islamic .scholar-stat-item {
  border-right-color: rgba(200,168,107,0.20) !important;
}
.theme-islamic .scholar-stat-icon {
  color: var(--h-gold-bright) !important;
}
.theme-islamic .scholar-bio-text p {
  color: rgba(44,31,20,0.84) !important;
}
.theme-islamic .award-highlight {
  background: linear-gradient(135deg, var(--h-parchment), rgba(200,168,107,0.07)) !important;
  border-color: var(--h-gold-dim) !important;
}
.theme-islamic .award-highlight-title {
  color: var(--h-navy) !important;
}
.theme-islamic .award-highlight-desc {
  color: rgba(44,31,20,0.60) !important;
}
.theme-islamic .scholar-portrait-img {
  border-color: rgba(200,168,107,0.40) !important;
}
.theme-islamic .scholar-award-badge {
  background: var(--h-gold-dim) !important;
}
.theme-islamic .scholar-award-badge i,
.theme-islamic .scholar-award-badge span {
  color: var(--h-navy) !important;
}

/* ── 13o. VISION PAGE ───────────────────────────────── */
.theme-islamic .vision-card-large {
  background: linear-gradient(135deg, var(--h-navy) 0%, var(--h-walnut) 100%) !important;
  box-shadow: 0 20px 60px rgba(8,18,32,0.28) !important;
}
.theme-islamic .vision-highlight {
  color: var(--h-gold-bright) !important;
}
.theme-islamic .mission-pillar {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.22) !important;
  box-shadow: 0 2px 6px rgba(8,18,32,0.05) !important;
}
.theme-islamic .mp-title {
  color: var(--h-navy) !important;
}
.theme-islamic .mp-desc {
  color: rgba(44,31,20,0.62) !important;
}
.theme-islamic .value-tile {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.22) !important;
  box-shadow: 0 2px 8px rgba(8,18,32,0.05) !important;
}
.theme-islamic .value-tile:hover {
  box-shadow: 0 8px 24px rgba(8,18,32,0.12) !important;
}
.theme-islamic .vt-name {
  color: var(--h-navy) !important;
}
.theme-islamic .vt-desc {
  color: rgba(44,31,20,0.62) !important;
}
.theme-islamic .goal-card {
  background: rgba(200,168,107,0.10) !important;
  border-color: rgba(200,168,107,0.30) !important;
}
.theme-islamic .goal-year {
  color: var(--h-gold-bright) !important;
}
.theme-islamic .goal-title {
  color: #FAF6EE !important;
}
.theme-islamic .goal-desc {
  color: rgba(250,246,238,0.70) !important;
}

/* ── Strategic Goals section (dark gradient inline bg, no bg-* class) ── */
/* Base .section-tag is now solid navy — navy on navy = invisible.
   Override to transparent gold border with bright gold text on dark bg. */
.theme-islamic .goals-section .section-tag {
  background: rgba(200,168,107,0.15) !important;
  color: var(--h-gold-bright) !important;
  border-color: rgba(200,168,107,0.50) !important;
}
.theme-islamic .goals-section h2,
.theme-islamic .goals-section h3 {
  color: var(--h-parchment) !important;
}

/* ── Campus Overview Map ── */
/* Remove star-pattern bg-image from the map section; give the map wrap
   a proper heritage border and shadow. */
.theme-islamic .campus-map-overview-section {
  background-image: none !important;
}
.theme-islamic .campus-overview-map-wrap {
  border: 2px solid rgba(200,168,107,0.35) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow:
    0 8px 32px rgba(8,18,32,0.14),
    0 2px 8px rgba(8,18,32,0.06),
    0 0 0 4px rgba(200,168,107,0.08) !important;
}

/* ── Alumni CTA Section (dark green gradient, no bg-* class) ── */
.theme-islamic .alumni-cta-section h2,
.theme-islamic .alumni-cta-section h3,
.theme-islamic .alumni-cta-section p {
  color: rgba(250,246,238,0.92) !important;
}
.theme-islamic .alumni-cta-section .btn-light {
  background: var(--h-gold) !important;
  border-color: var(--h-gold-dim) !important;
  color: var(--h-navy) !important;
  font-weight: 700 !important;
}
.theme-islamic .alumni-cta-section .btn-light:hover {
  background: var(--h-gold-bright) !important;
  border-color: var(--h-gold) !important;
}

/* ── White card components not in the base card override list ── */
/* All these have background:#fff in per-page <style> blocks;
   !important in this external CSS overrides them (external CSS wins
   over non-!important inline style when specificity is equal, and
   these rules have higher specificity anyway). */
.theme-islamic .home-channel-card,
.theme-islamic .mission-pillar,
.theme-islamic .value-tile,
.theme-islamic .gender-filter-btn,
.theme-islamic .seerat-circle-card,
.theme-islamic .seerat-curriculum-card,
.theme-islamic .majalis-card-full,
.theme-islamic .video-card,
.theme-islamic .qna-featured-card,
.theme-islamic .qna-item,
.theme-islamic .qna-item-a,
.theme-islamic .scholar-fact-card,
.theme-islamic .scholar-platform-card,
.theme-islamic .ustad-tl-content,
.theme-islamic .appearance-card,
.theme-islamic .pub-card,
.theme-islamic .shabab-stat,
.theme-islamic .shabab-pillars,
.theme-islamic .shabab-program-card,
.theme-islamic .platform-link,
.theme-islamic .seerat-fact-box,
.theme-islamic .bayan-cat-tab {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.20) !important;
}
.theme-islamic .home-channel-card:hover {
  box-shadow: 0 12px 36px rgba(8,18,32,0.12) !important;
}
.theme-islamic .home-channel-name { color: var(--h-navy) !important; }
.theme-islamic .home-channel-desc { color: rgba(44,31,20,0.65) !important; }
.theme-islamic .home-channel-cta  { color: var(--h-gold-dim) !important; }

/* bayan category filter tab active state */
.theme-islamic .bayan-cat-tab.active,
.theme-islamic .bayan-cat-tab:hover {
  background: var(--h-navy) !important;
  border-color: var(--h-navy) !important;
  color: var(--h-parchment) !important;
}

/* gender / course filter tabs */
.theme-islamic .gender-filter-btn {
  color: var(--h-navy) !important;
}
.theme-islamic .gender-filter-btn.active,
.theme-islamic .gender-filter-btn:hover {
  background: var(--h-navy) !important;
  color: var(--h-parchment) !important;
}

/* ── Scholar Quote ── */
/* section:not([class*="bg-"]) applies background-color:parchment (no !important),
   but the section's inline gradient wins. Force text white in case of any override. */
.theme-islamic .scholar-quote-section .scholar-quote-text {
  color: #FFFFFF !important;
}
.theme-islamic .scholar-quote-section .scholar-quote-mark {
  color: rgba(200,168,107,0.45) !important;
}
.theme-islamic .scholar-quote-section .scholar-quote-cite {
  color: var(--h-gold-bright) !important;
}

/* ── Expertise Cards ── */
/* Inline style on .expertise-icon sets color per item — keep it.
   Override .expertise-card heading/desc text to match theme. */
.theme-islamic .expertise-card {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.22) !important;
}
.theme-islamic .expertise-name {
  color: var(--h-navy) !important;
  font-family: var(--h-font-display) !important;
  font-weight: 600 !important;
}
.theme-islamic .expertise-desc {
  color: rgba(44,31,20,0.65) !important;
}

/* ── Value Tiles (vision page) — ensure vt-icon stays visible ── */
/* Icons use inline style color — ensure nothing overrides the <i> color. */
.theme-islamic .vt-icon i {
  color: inherit !important;
}

/* ── City Chips ── */
.theme-islamic .city-chip {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.35) !important;
  color: var(--h-navy) !important;
  font-family: var(--h-font-label) !important;
  font-size: 0.78rem !important;
}
.theme-islamic .city-chip:hover,
.theme-islamic .city-chip.active {
  background: var(--h-navy) !important;
  border-color: var(--h-navy) !important;
  color: var(--h-parchment) !important;
}

/* ── 13p. NEWS / ARTICLE PAGE ───────────────────────── */
.theme-islamic .article-content {
  color: rgba(44,31,20,0.84) !important;
}
.theme-islamic .article-content h2,
.theme-islamic .article-content h3 {
  color: var(--h-navy) !important;
}
.theme-islamic .article-content blockquote {
  border-left-color: var(--h-gold-dim) !important;
  color: rgba(44,31,20,0.70) !important;
}
.theme-islamic .article-tag {
  background: rgba(200,168,107,0.08) !important;
  border-color: rgba(200,168,107,0.30) !important;
  color: rgba(44,31,20,0.68) !important;
}
.theme-islamic .article-share a,
.theme-islamic .article-share button {
  background: rgba(200,168,107,0.09) !important;
  border-color: rgba(200,168,107,0.28) !important;
  color: var(--h-navy) !important;
}
.theme-islamic .article-share a:hover,
.theme-islamic .article-share button:hover {
  background: var(--h-navy) !important;
  color: var(--h-gold-bright) !important;
  border-color: var(--h-navy) !important;
}
.theme-islamic .article-footer {
  border-top-color: rgba(200,168,107,0.22) !important;
}
.theme-islamic .sidebar-widget {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.22) !important;
  box-shadow: 0 2px 8px rgba(8,18,32,0.06) !important;
}
.theme-islamic .sidebar-widget-title {
  color: var(--h-navy) !important;
  border-bottom-color: rgba(200,168,107,0.35) !important;
}
.theme-islamic .sidebar-news-item {
  border-bottom-color: rgba(200,168,107,0.18) !important;
}
.theme-islamic .sidebar-news-title a {
  color: rgba(44,31,20,0.88) !important;
}
.theme-islamic .sidebar-news-title a:hover {
  color: var(--h-navy) !important;
}
.theme-islamic .sidebar-news-date {
  color: rgba(44,31,20,0.48) !important;
}
.theme-islamic .sidebar-newsletter {
  background: var(--h-navy) !important;
}
.theme-islamic .sidebar-newsletter .sidebar-widget-title {
  color: #FAF6EE !important;
  border-bottom-color: rgba(200,168,107,0.28) !important;
}
.theme-islamic .sidebar-newsletter p {
  color: rgba(250,246,238,0.72) !important;
}

/* ── 13q. CONTACT PAGE ───────────────────────────────── */
.theme-islamic .contact-info-card {
  background: rgba(200,168,107,0.50) !important;
  border-left-color: var(--h-gold-dim) !important;
}
.theme-islamic .contact-info-card h4 {
  color: var(--h-navy) !important;
}
.theme-islamic .contact-info-card p,
.theme-islamic .contact-info-card a {
  color: rgba(44,31,20,0.80) !important;
}
.theme-islamic .contact-info-card a:hover {
  color: var(--h-navy) !important;
}
.theme-islamic .social-link-contact {
  background: var(--h-navy) !important;
  color: var(--h-gold-bright) !important;
}
.theme-islamic .social-link-contact:hover {
  background: var(--h-gold-dim) !important;
  color: var(--h-navy) !important;
}

/* ── 13r. FAQ PAGE ───────────────────────────────────── */
.theme-islamic .faq-search-section {
  background: rgba(200,168,107,0.06) !important;
  border-bottom-color: rgba(200,168,107,0.20) !important;
}
.theme-islamic .faq-category-title {
  color: var(--h-navy) !important;
}
.theme-islamic .faq-count {
  background: rgba(13,34,64,0.09) !important;
  color: var(--h-navy) !important;
}
.theme-islamic .faq-item {
  border-color: rgba(200,168,107,0.25) !important;
  border-radius: var(--h-radius) !important;
  overflow: hidden;
}
.theme-islamic .faq-question {
  background: var(--h-parchment) !important;
  color: rgba(44,31,20,0.88) !important;
}
.theme-islamic .faq-question:hover,
.theme-islamic .faq-question.active {
  background: rgba(168,134,58,0.08) !important;
  color: var(--h-navy) !important;
}
.theme-islamic .faq-answer {
  background: rgba(200,168,107,0.04) !important;
  border-top-color: rgba(200,168,107,0.20) !important;
}
.theme-islamic .faq-answer-inner {
  color: rgba(44,31,20,0.80) !important;
}
.theme-islamic .faq-cta {
  background: rgba(200,168,107,0.07) !important;
  border-radius: var(--h-radius) !important;
}
.theme-islamic .faq-cta h3 {
  color: var(--h-navy) !important;
}

/* ── 13s. MAJALIS & TESTIMONIAL CARDS ───────────────── */
.theme-islamic .majalis-card {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.22) !important;
  border-left-color: var(--h-gold-dim) !important;
}
.theme-islamic .testimonial-card {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.22) !important;
  box-shadow: 0 2px 8px rgba(8,18,32,0.06) !important;
}
.theme-islamic .testimonial-stars {
  color: var(--h-gold-dim) !important;
}
.theme-islamic .testimonial-quote {
  color: rgba(44,31,20,0.75) !important;
}
.theme-islamic .testimonial-name {
  color: var(--h-navy) !important;
}
.theme-islamic .testimonial-role {
  color: rgba(44,31,20,0.56) !important;
}
.theme-islamic .testimonial-avatar-initial {
  background: var(--h-navy) !important;
  color: var(--h-gold-bright) !important;
}

/* ── 13t. AB-CARD (generic reusable card) ─────────────── */
.theme-islamic .ab-card {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.22) !important;
}
.theme-islamic .ab-card-header {
  background: var(--h-navy) !important;
  border-bottom-color: rgba(200,168,107,0.20) !important;
}
.theme-islamic .ab-card-title {
  color: var(--h-gold-bright) !important;
}

/* ── 13u. MISC — light backgrounds & borders ─────────── */
/* Any section/div using Bootstrap's var(--light) or #F9FAFB
   that isn't already targeted gets a parchment tint */
.theme-islamic .faq-search-section,
.theme-islamic .courses-filter-section {
  background: rgba(200,168,107,0.05) !important;
}

/* Pagination active page */
.theme-islamic .page-item.active .page-link {
  background: var(--h-navy) !important;
  border-color: var(--h-navy) !important;
  color: var(--h-gold-bright) !important;
}
.theme-islamic .page-link {
  color: var(--h-navy) !important;
  border-color: rgba(200,168,107,0.30) !important;
  background: var(--h-parchment) !important;
}
.theme-islamic .page-link:hover {
  background: rgba(168,134,58,0.10) !important;
  border-color: var(--h-gold-dim) !important;
  color: var(--h-navy) !important;
}

/* ══════════════════════════════════════════════════════
   14. MOBILE NAV · FORMS · ALERTS · BADGES · MODALS
   ══════════════════════════════════════════════════════ */

/* ── 14a. Mobile menu — the critical miss ──────────────
   app.css sets .ab-mobile-links a { color: rgba(255,255,255,0.9) }
   Theme overrides .ab-mobile-menu bg to parchment but only covered
   .ab-nav-links — NOT .ab-mobile-links. White on parchment = invisible. */
.theme-islamic .ab-mobile-links a {
  color: var(--h-navy) !important;
  border-bottom-color: rgba(200,168,107,0.15) !important;
  font-family: var(--h-font-display) !important;
  letter-spacing: 0.01em !important;
}
.theme-islamic .ab-mobile-links a:hover {
  color: var(--h-gold-dark) !important;
  background: rgba(200,168,107,0.08) !important;
}
.theme-islamic .ab-mobile-links a i {
  color: var(--h-gold-dim) !important;
}
/* Donate link in mobile menu — keep it visually distinct as a CTA */
.theme-islamic .ab-mobile-links a[href*="donat"] {
  color: var(--h-gold-dim) !important;
  font-weight: 700 !important;
}

/* Mobile close button — overrides inline style="color:rgba(255,255,255,.8)" */
.theme-islamic .mobile-menu-close {
  color: var(--h-navy) !important;
}

/* Mobile menu footer divider — overrides inline style white border */
.theme-islamic .ab-mobile-menu .mt-auto {
  border-top: 1px solid rgba(200,168,107,0.22) !important;
}

/* Mobile logo inside menu */
.theme-islamic .ab-mobile-menu .ab-logo-name {
  color: var(--h-navy) !important;
}
.theme-islamic .ab-mobile-menu .ab-logo-tagline {
  color: rgba(44,31,20,0.55) !important;
}

/* Hamburger toggle — white on scrolled parchment navbar = invisible */
.theme-islamic .ab-navbar.scrolled .ab-mobile-toggle {
  color: var(--h-navy) !important;
}
.theme-islamic .ab-navbar.scrolled .ab-mobile-toggle:hover {
  background: rgba(200,168,107,0.12) !important;
}

/* ── 14b. Form checkboxes & radio buttons ────────────── */
.theme-islamic .form-check-input {
  background-color: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.40) !important;
}
.theme-islamic .form-check-input:checked {
  background-color: var(--h-navy) !important;
  border-color: var(--h-navy) !important;
}
.theme-islamic .form-check-input:focus {
  border-color: var(--h-gold-dim) !important;
  box-shadow: 0 0 0 0.2rem rgba(200,168,107,0.22) !important;
}
.theme-islamic .form-check-label {
  color: rgba(44,31,20,0.84) !important;
}

/* ── 14c. Button variants not yet covered ────────────── */
.theme-islamic .btn-outline-primary {
  border-color: var(--h-gold-dim) !important;
  color: var(--h-gold-dark) !important;
  background: transparent !important;
}
.theme-islamic .btn-outline-primary:hover,
.theme-islamic .btn-outline-primary:focus,
.theme-islamic .btn-outline-primary:active {
  background: var(--h-gold-dim) !important;
  border-color: var(--h-gold-dim) !important;
  color: var(--h-navy) !important;
}
.theme-islamic .btn-outline-secondary {
  border-color: rgba(200,168,107,0.44) !important;
  color: var(--h-navy) !important;
  background: transparent !important;
}
.theme-islamic .btn-outline-secondary:hover {
  background: rgba(200,168,107,0.10) !important;
  border-color: var(--h-gold-dim) !important;
  color: var(--h-navy) !important;
}
.theme-islamic .btn-light {
  background: rgba(200,168,107,0.10) !important;
  border-color: rgba(200,168,107,0.28) !important;
  color: var(--h-navy) !important;
}
.theme-islamic .btn-light:hover {
  background: rgba(200,168,107,0.18) !important;
  border-color: var(--h-gold-dim) !important;
}
.theme-islamic .btn-danger {
  background: rgba(185,28,28,0.82) !important;
  border-color: rgba(185,28,28,0.82) !important;
}

/* ── 14d. Alert variants ─────────────────────────────── */
.theme-islamic .alert-success {
  background: rgba(13,34,64,0.06) !important;
  border-color: rgba(200,168,107,0.30) !important;
  color: var(--h-navy) !important;
}
.theme-islamic .alert-success .alert-heading,
.theme-islamic .alert-success strong {
  color: var(--h-navy) !important;
}
.theme-islamic .alert-success i {
  color: var(--h-gold-dark) !important;
}
.theme-islamic .alert-warning {
  background: rgba(200,168,107,0.11) !important;
  border-color: rgba(200,168,107,0.36) !important;
  color: rgba(44,31,20,0.88) !important;
}
.theme-islamic .alert-warning .alert-heading,
.theme-islamic .alert-warning strong {
  color: var(--h-navy) !important;
}
.theme-islamic .alert-danger,
.theme-islamic .alert-error {
  background: rgba(185,28,28,0.07) !important;
  border-color: rgba(185,28,28,0.22) !important;
  color: rgb(120,10,10) !important;
}
.theme-islamic .alert-danger .alert-heading,
.theme-islamic .alert-danger strong,
.theme-islamic .alert-error .alert-heading {
  color: rgb(120,10,10) !important;
}

/* ── 14e. Badge variants ─────────────────────────────── */
.theme-islamic .badge.bg-primary,
.theme-islamic .badge.bg-info,
.theme-islamic .badge.bg-success,
.theme-islamic .badge.bg-warning {
  background: rgba(200,168,107,0.18) !important;
  color: var(--h-navy) !important;
}
.theme-islamic .badge.bg-danger {
  background: rgba(185,28,28,0.10) !important;
  color: rgb(120,10,10) !important;
}
.theme-islamic .badge.bg-secondary {
  background: rgba(200,168,107,0.12) !important;
  color: var(--h-navy) !important;
}
.theme-islamic .badge.text-bg-primary {
  background: var(--h-navy) !important;
  color: var(--h-gold-bright) !important;
}

/* ── 14f. Welcome modal (announcement popup) ─────────── */
.theme-islamic .welcome-modal-content {
  background: var(--h-parchment) !important;
  border: 1px solid rgba(200,168,107,0.28) !important;
  border-radius: 1.25rem !important;
  overflow: hidden !important;
}
.theme-islamic .welcome-modal-body {
  background: linear-gradient(160deg, var(--h-navy) 0%, var(--h-walnut) 100%) !important;
}
.theme-islamic .welcome-modal-icon {
  background: rgba(200,168,107,0.18) !important;
  color: var(--h-gold-bright) !important;
}
.theme-islamic .welcome-modal-title {
  color: var(--h-parchment) !important;
}
.theme-islamic .welcome-modal-desc {
  color: rgba(250,246,238,0.82) !important;
}
.theme-islamic .welcome-modal-close {
  color: rgba(250,246,238,0.62) !important;
}
.theme-islamic .welcome-modal-close:hover {
  color: var(--h-parchment) !important;
}
.theme-islamic .welcome-modal-dismiss,
.theme-islamic .btn-link.welcome-modal-dismiss {
  color: var(--h-gold-bright) !important;
}

/* ── 14g. Gallery lightbox modal ────────────────────── */
.theme-islamic .modal-content.bg-dark {
  background: var(--h-navy) !important;
  border: 1px solid rgba(200,168,107,0.22) !important;
}
.theme-islamic .modal-content.bg-dark .modal-header {
  border-bottom-color: rgba(200,168,107,0.22) !important;
}
.theme-islamic .modal-content.bg-dark .btn-close {
  filter: invert(1) opacity(0.72) !important;
}
.theme-islamic .modal-content.bg-dark h5,
.theme-islamic .modal-content.bg-dark h6 {
  color: var(--h-parchment) !important;
}
.theme-islamic .modal-content.bg-dark .text-white-50 {
  color: rgba(250,246,238,0.60) !important;
}

/* ── 14h. Breadcrumbs ───────────────────────────────── */
.theme-islamic .breadcrumb-item {
  font-family: var(--h-font-label) !important;
  font-size: 0.8rem !important;
}
.theme-islamic .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(226,201,140,0.55) !important;
}
.theme-islamic .page-breadcrumb .breadcrumb-item a {
  color: rgba(226,201,140,0.84) !important;
}
.theme-islamic .page-breadcrumb .breadcrumb-item a:hover {
  color: var(--h-gold-bright) !important;
}
.theme-islamic .page-breadcrumb .breadcrumb-item.active {
  color: rgba(250,246,238,0.68) !important;
}

/* ── 14i. Tables on parchment ───────────────────────── */
.theme-islamic table:not(.admin-table) thead th {
  color: var(--h-navy) !important;
  background: rgba(200,168,107,0.08) !important;
  border-bottom-color: rgba(200,168,107,0.28) !important;
  font-family: var(--h-font-label) !important;
  letter-spacing: 0.04em !important;
  font-size: 0.82rem !important;
}
.theme-islamic table:not(.admin-table) td {
  color: rgba(44,31,20,0.82) !important;
  border-color: rgba(200,168,107,0.15) !important;
}
.theme-islamic table:not(.admin-table) tbody tr:hover td {
  background: rgba(200,168,107,0.04) !important;
}

/* ── 14j. Nav tabs/pills ────────────────────────────── */
.theme-islamic .nav-tabs {
  border-bottom-color: rgba(200,168,107,0.25) !important;
}
.theme-islamic .nav-tabs .nav-link {
  color: rgba(44,31,20,0.70) !important;
  border-color: transparent !important;
  font-family: var(--h-font-label) !important;
}
.theme-islamic .nav-tabs .nav-link:hover {
  color: var(--h-navy) !important;
  border-color: rgba(200,168,107,0.22) !important;
}
.theme-islamic .nav-tabs .nav-link.active {
  background: var(--h-parchment) !important;
  border-color: rgba(200,168,107,0.30) rgba(200,168,107,0.30) var(--h-parchment) !important;
  color: var(--h-navy) !important;
  font-weight: 600 !important;
}
.theme-islamic .nav-pills .nav-link {
  color: rgba(44,31,20,0.72) !important;
  font-family: var(--h-font-label) !important;
}
.theme-islamic .nav-pills .nav-link.active {
  background: var(--h-navy) !important;
  color: var(--h-gold-bright) !important;
}

/* ══════════════════════════════════════════════════════
   16. ACCESSIBILITY — PREFERS-REDUCED-MOTION
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  .theme-islamic .h-reveal,
  .theme-islamic .h-reveal-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .theme-islamic .hero-badge,
  .theme-islamic .hero-title,
  .theme-islamic .hero-subtitle,
  .theme-islamic .hero-actions,
  .theme-islamic .hero-actions .btn-gold {
    animation: none !important;
  }
  /* Restore solid white when shimmer is disabled */
  .theme-islamic .hero-title {
    background: none !important;
    -webkit-text-fill-color: #FFFFFF !important;
    color: #FFFFFF !important;
  }

  .theme-islamic .hero-slide {
    background-position-y: 50% !important;
  }

  .theme-islamic .btn-gold,
  .theme-islamic .footer-social a,
  .theme-islamic .course-card,
  .theme-islamic .news-card,
  .theme-islamic .card {
    transition: none !important;
    animation: none !important;
  }
}