/*
 Theme Name:   Sufi Healings
 Theme URI:    https://sufihealings.com
 Description:  Sufi Healings Child Theme for GeneratePress — Qadiri Green & Chishti Gold.
               "Love ALL — Hate None" — Bulleh Shah
 Author:       Sufi Healings
 Author URI:   https://sufihealings.com
 Template:     generatepress
 Version:      1.0.0
 License:      GPL-2.0+
 Text Domain:  sufihealings
*/

/* ═══════════════════════════════════════════════════════════════════
   SUFI HEALINGS DESIGN SYSTEM
   Inspired by:
   · Qadiri Order  — Emerald Green  (love, life, Prophet's lineage)
   · Chishti Order — Deep Gold      (warmth, sama, the heart's music)
   · Islamic Art   — Geometric      (the infinite pattern of Creation)
   · Sufi Teaching — "Love ALL, Hate None" — Bulleh Shah
   ═══════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Nunito:wght@300;400;600;700&family=Noto+Naskh+Arabic:wght@400;700&display=swap');

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Qadiri Green Palette */
  --qadiri-deep:    #0A3D2B;
  --qadiri:         #1A5F4A;
  --qadiri-mid:     #2E8B6A;
  --qadiri-light:   #4CAF8A;
  --qadiri-pale:    #E8F5F0;

  /* Chishti Gold Palette */
  --chishti-deep:   #7D4F00;
  --chishti:        #C8963E;
  --chishti-warm:   #D4A843;
  --chishti-light:  #F5D78E;
  --chishti-pale:   #FDF6E3;

  /* Neutrals */
  --ink:            #1A0A2E;
  --ink-soft:       #2D2D2D;
  --stone:          #6B7280;
  --cloud:          #F5EDD8;
  --pearl:          #FAFAF8;
  --white:          #FFFFFF;

  /* Semantic */
  --color-primary:        var(--qadiri);
  --color-primary-dark:   var(--qadiri-deep);
  --color-accent:         var(--chishti);
  --color-accent-light:   var(--chishti-warm);
  --color-bg:             var(--pearl);
  --color-bg-alt:         var(--cloud);
  --color-text:           var(--ink-soft);
  --color-heading:        var(--ink);
  --color-muted:          var(--stone);
  --color-border:         #E5E0D5;

  /* Typography */
  --font-heading:  'Amiri', 'Georgia', serif;
  --font-body:     'Nunito', 'Helvetica Neue', sans-serif;
  --font-arabic:   'Noto Naskh Arabic', serif;

  /* Spacing */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  /* Shadows */
  --shadow-sm:   0 2px 8px rgba(26,10,46,.07);
  --shadow-md:   0 4px 20px rgba(26,10,46,.10);
  --shadow-lg:   0 8px 40px rgba(26,10,46,.14);
  --shadow-gold: 0 4px 20px rgba(200,150,62,.25);
  --shadow-green:0 4px 20px rgba(26,95,74,.25);

  /* Geometric pattern (Islamic) */
  --pattern-opacity: .04;
}

/* ── Base Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.2rem; }

p { margin-bottom: 1.25rem; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color .2s, opacity .2s;
}
a:hover { color: var(--chishti); }

.arabic-text {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
  font-size: 1.4em;
  line-height: 2;
  color: var(--qadiri);
}

/* ── Site Header ───────────────────────────────────────────────── */
.site-header {
  background: var(--qadiri-deep) !important;
  border-bottom: 3px solid var(--chishti) !important;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 20px rgba(0,0,0,.3);
}

.site-header .header-widget,
.site-header .site-branding {
  padding: 0 !important;
}

.site-title a {
  color: var(--white) !important;
  font-family: var(--font-heading) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
.site-title a:hover { color: var(--chishti-warm) !important; }

.site-description {
  color: rgba(255,255,255,.65) !important;
  font-size: .8rem !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── Navigation ────────────────────────────────────────────────── */
.main-navigation a {
  color: rgba(255,255,255,.88) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: .88rem !important;
  letter-spacing: .05em;
  padding: 8px 14px !important;
  border-radius: var(--radius-sm);
  transition: background .2s, color .2s;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--chishti-warm) !important;
  background: rgba(255,255,255,.08) !important;
}

.main-navigation .sub-menu {
  background: var(--qadiri-deep) !important;
  border: 1px solid rgba(200,150,62,.2) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}
.main-navigation .sub-menu a {
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

/* ── Hero / Page Header ─────────────────────────────────────────── */
.hero-section,
.page-header,
.archive-header {
  background: linear-gradient(135deg, var(--qadiri-deep) 0%, var(--qadiri) 50%, #0D5C4A 100%);
  position: relative;
  overflow: hidden;
  padding: 80px 0 60px;
  text-align: center;
}

/* Islamic geometric background pattern */
.hero-section::before,
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.08'%3E%3Cpolygon points='30,2 57,15 57,45 30,58 3,45 3,15'/%3E%3Cpolygon points='30,10 50,20 50,40 30,50 10,40 10,20'/%3E%3Cline x1='30' y1='2' x2='30' y2='58'/%3E%3Cline x1='3' y1='15' x2='57' y2='45'/%3E%3Cline x1='57' y1='15' x2='3' y2='45'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.hero-section h1,
.page-header h1,
.archive-title {
  color: var(--white) !important;
  position: relative;
  z-index: 1;
}

.hero-subtitle {
  color: rgba(255,255,255,.8);
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Gold divider ornament */
.ornament {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  margin: 20px auto;
}
.ornament::before, .ornament::after {
  content: '';
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--chishti));
}
.ornament::after { background: linear-gradient(to left, transparent, var(--chishti)); }
.ornament-star { color: var(--chishti); font-size: 1.2rem; }

/* ── Content Layout ─────────────────────────────────────────────── */
.site-content,
.site-main { background: var(--color-bg); }

.content-area { max-width: 780px; }

/* ── Cards (Shrine, Blog, City) ─────────────────────────────────── */
.shc-shrine-grid,
.shc-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin: 32px 0;
}

.shc-shrine-card,
.shc-blog-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform .25s cubic-bezier(.25,.8,.25,1), box-shadow .25s;
  position: relative;
  border-top: 4px solid var(--qadiri);
}

.shc-shrine-card:hover,
.shc-blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Chishti gold accent on hover */
.shc-shrine-card:hover { border-top-color: var(--chishti); }

.shc-shrine-card .shc-verified {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--qadiri);
  color: var(--white);
  font-size: .7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: .06em;
}

.shc-shrine-name a {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-heading);
}
.shc-shrine-name a:hover { color: var(--qadiri); }

.shc-silsila {
  display: inline-block;
  background: var(--qadiri-deep);
  color: var(--chishti-light);
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: .08em;
  margin: 6px 0;
  text-transform: uppercase;
}

.shc-saint { color: var(--stone); font-size: .88rem; }
.shc-hours { color: var(--stone); font-size: .82rem; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.shc-btn,
.wp-block-button__link,
.button,
input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--qadiri), var(--qadiri-mid));
  color: var(--white) !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .05em;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all .2s;
  text-decoration: none !important;
  box-shadow: var(--shadow-green);
}

.shc-btn:hover,
.wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover {
  background: linear-gradient(135deg, var(--qadiri-deep), var(--qadiri));
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(26,95,74,.35);
  color: var(--white) !important;
}

/* Gold CTA button variant */
.btn-gold,
.shc-btn-gold {
  background: linear-gradient(135deg, var(--chishti), var(--chishti-warm));
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover { background: linear-gradient(135deg, var(--chishti-deep), var(--chishti)); }

/* ── Prayer Times ─────────────────────────────────────────────── */
.shc-prayer-times {
  background: linear-gradient(135deg, var(--qadiri-deep), var(--qadiri));
  border-radius: var(--radius-lg);
  padding: 28px;
  color: var(--white);
  margin: 28px 0;
}

.shc-prayer-times h3 {
  color: var(--white) !important;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.shc-hijri {
  color: var(--chishti-light);
  font-size: .85rem;
  margin-bottom: 20px;
}

.shc-prayer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media(max-width:480px) { .shc-prayer-grid { grid-template-columns: repeat(2,1fr); } }

.shc-prayer {
  background: rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  text-align: center;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.12);
  transition: background .2s;
}
.shc-prayer:hover { background: rgba(255,255,255,.18); }

.shc-prayer span {
  display: block;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 6px;
}

.shc-prayer strong {
  display: block;
  font-size: 1.1rem;
  color: var(--chishti-light);
  font-family: var(--font-heading);
}

/* ── City Page Hero ─────────────────────────────────────────────── */
.shc-city-hero {
  background: linear-gradient(160deg, var(--qadiri-deep) 0%, #1A3A5C 60%, var(--qadiri) 100%);
  padding: 72px 24px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.shc-city-hero h1 {
  color: var(--white) !important;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.shc-hero-meta {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  margin-top: 28px;
}
.shc-hero-stat span:first-child {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--chishti-warm);
  font-family: var(--font-heading);
}
.shc-hero-stat span:last-child {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.6);
}

/* ── Nearby Cities ──────────────────────────────────────────────── */
.shc-neighborhood { margin: 40px 0; }
.shc-neighborhood h3 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-size: 1.4rem;
  margin-bottom: 20px;
}
.shc-nearby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
.shc-nearby-item {
  display: block;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 18px 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: all .2s;
  text-decoration: none;
}
.shc-nearby-item:hover {
  border-color: var(--qadiri-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.shc-nearby-city { display: block; font-weight: 700; color: var(--ink); font-size: .95rem; }
.shc-nearby-country { display: block; font-size: .75rem; color: var(--stone); margin: 2px 0; }
.shc-nearby-dist { display: block; font-size: .72rem; color: var(--qadiri); font-weight: 600; }
.shc-nearby-shrines { display: block; font-size: .7rem; color: var(--chishti); font-weight: 600; margin-top: 4px; }

/* ── Blog Cards ─────────────────────────────────────────────────── */
.shc-blog-card {
  border-top: none;
  border-left: 4px solid var(--qadiri);
}
.shc-blog-card:hover { border-left-color: var(--chishti); }
.shc-blog-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.shc-blog-card h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  padding: 16px 20px 8px;
  margin: 0;
}
.shc-blog-card h3 a { color: var(--ink); }
.shc-blog-card h3 a:hover { color: var(--qadiri); }
.shc-blog-card p {
  padding: 0 20px;
  font-size: .88rem;
  color: var(--stone);
  margin: 0 0 12px;
}
.shc-read-more {
  display: block;
  padding: 0 20px 20px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--qadiri);
}
.shc-read-more:hover { color: var(--chishti); }

/* ── FAQ / Rich Snippets ────────────────────────────────────────── */
.shc-faq { margin: 40px 0; }
.shc-faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: 20px 0;
}
.shc-faq-item summary {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shc-faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  color: var(--qadiri);
  transition: transform .2s;
}
.shc-faq-item[open] summary::after { content: '−'; }
.shc-faq-item p { margin-top: 14px; color: var(--stone); font-size: .95rem; }

/* ── Events List ────────────────────────────────────────────────── */
.shc-events { list-style: none; padding: 0; margin: 24px 0; }
.shc-events li {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: .95rem;
}
.shc-events li strong { color: var(--qadiri); margin-right: 8px; }
.shc-events li a { color: var(--ink); font-weight: 600; }
.shc-events li a:hover { color: var(--qadiri); }

/* ── WooCommerce Products ───────────────────────────────────────── */
.woocommerce ul.products li.product {
  background: var(--white) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  border: none !important;
  overflow: hidden !important;
  transition: transform .25s, box-shadow .25s !important;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-lg) !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading) !important;
  color: var(--ink) !important;
}
.woocommerce ul.products li.product .price { color: var(--qadiri) !important; font-weight: 700 !important; }
.woocommerce ul.products li.product .button {
  background: var(--qadiri) !important;
  color: var(--white) !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  transition: all .2s !important;
}
.woocommerce ul.products li.product .button:hover { background: var(--qadiri-deep) !important; }

.woocommerce .single_add_to_cart_button {
  background: linear-gradient(135deg, var(--qadiri), var(--qadiri-mid)) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
}

/* ── Sidebar Widgets ────────────────────────────────────────────── */
.widget {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  margin-bottom: 28px;
}

.widget-title,
.widget .widgettitle {
  font-family: var(--font-heading) !important;
  font-size: 1.1rem !important;
  color: var(--ink) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
  border-bottom: 2px solid var(--chishti) !important;
  position: relative;
}

.widget ul { padding: 0; list-style: none; }
.widget ul li {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: .9rem;
}
.widget ul li:last-child { border-bottom: none; }
.widget ul li a { color: var(--ink-soft); transition: color .2s; }
.widget ul li a:hover { color: var(--qadiri); }

/* ── Search Form ────────────────────────────────────────────────── */
.search-form input[type="search"] {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
}
.search-form input[type="search"]:focus { border-color: var(--qadiri); }
.search-form button[type="submit"] {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 10px 18px;
}

/* ── Tags / Keywords ────────────────────────────────────────────── */
.shc-keywords { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.shc-keyword-tag {
  background: var(--qadiri-pale);
  color: var(--qadiri);
  border: 1px solid rgba(26,95,74,.15);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  transition: all .2s;
}
.shc-keyword-tag:hover {
  background: var(--qadiri);
  color: var(--white);
}

/* ── Breadcrumbs — visible on all backgrounds ───────────────────── */
/* Covers: Yoast SEO · GeneratePress · Custom .shc-breadcrumb       */

/* GeneratePress native breadcrumb */
.generate-breadcrumbs,
.generate-breadcrumbs .trail-browse,
.generate-breadcrumbs .trail-items,
.generate-breadcrumbs .trail-item {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 10px 0;
    font-size: .82rem;
    color: var(--stone) !important;
    list-style: none;
}
.generate-breadcrumbs a,
.generate-breadcrumbs .trail-item a {
    color: var(--qadiri) !important;
    text-decoration: none;
    font-weight: 600;
}
.generate-breadcrumbs a:hover { color: var(--chishti) !important; }
.generate-breadcrumbs .sep { color: var(--stone); margin: 0 2px; }
.generate-breadcrumbs .trail-end { color: var(--stone); }

/* Yoast SEO breadcrumb */
.breadcrumb-trail,
.breadcrumbs,
#breadcrumbs,
.yoast-breadcrumb {
    padding: 10px 0;
    font-size: .82rem;
    color: var(--stone) !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    visibility: visible !important;
    opacity: 1 !important;
}
.breadcrumb-trail a,
.breadcrumbs a,
#breadcrumbs a,
.yoast-breadcrumb a {
    color: var(--qadiri) !important;
    text-decoration: none;
    font-weight: 600;
}
.breadcrumb-trail a:hover,
.breadcrumbs a:hover,
.yoast-breadcrumb a:hover { color: var(--chishti) !important; }

/* Yoast separator (renders as › between items) */
.breadcrumb-trail .sep,
.yoast-breadcrumb .breadcrumb_last::before,
.breadcrumb-trail span::before {
    color: var(--stone);
    margin: 0 4px;
}
/* Current page (last item, no link) */
.breadcrumb-trail .breadcrumb_last,
.yoast-breadcrumb .breadcrumb_last {
    color: var(--stone);
    font-weight: 400;
}

/* GeneratePress breadcrumb container position */
.inside-page-hero .breadcrumb-trail,
.inside-page-hero .breadcrumbs,
.entry-header .breadcrumb-trail,
.entry-header .breadcrumbs {
    margin-bottom: 8px;
}

/* Shrine hero breadcrumb (white on dark green bg) */
.shf-shrine-hero .shc-breadcrumb a,
.shc-breadcrumb a { color: rgba(255,255,255,.85) !important; }
.shf-shrine-hero .shc-breadcrumb li,
.shc-breadcrumb li { color: rgba(255,255,255,.6); }

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer {
  background: var(--qadiri-deep) !important;
  color: rgba(255,255,255,.75) !important;
  border-top: 3px solid var(--chishti) !important;
}

.site-footer a {
  color: rgba(255,255,255,.65) !important;
  transition: color .2s;
}
.site-footer a:hover { color: var(--chishti-warm) !important; }

.site-footer h2,
.site-footer h3,
.site-footer .widget-title {
  color: var(--white) !important;
  border-bottom-color: var(--chishti) !important;
}

/* Footer tagline */
.footer-tagline {
  text-align: center;
  padding: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 20px;
  color: rgba(255,255,255,.5);
  font-size: .85rem;
  font-style: italic;
  letter-spacing: .08em;
}

.footer-tagline span {
  color: var(--chishti-warm);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-style: normal;
}

/* ── "Love ALL — Hate None" Callout ─────────────────────────────── */
.sufi-motto {
  background: linear-gradient(135deg, var(--qadiri-deep), var(--qadiri));
  border-radius: var(--radius-xl);
  padding: 48px 32px;
  text-align: center;
  margin: 48px 0;
  position: relative;
  overflow: hidden;
}
.sufi-motto::before {
  content: '☪';
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 120px;
  opacity: .04;
  color: var(--white);
}
.sufi-motto blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  color: var(--white);
  margin: 0 0 12px;
  border: none;
  padding: 0;
  font-style: italic;
}
.sufi-motto cite {
  color: var(--chishti-warm);
  font-style: normal;
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Verified Badge ─────────────────────────────────────────────── */
.shc-verified {
  background: linear-gradient(135deg, var(--qadiri), var(--qadiri-mid));
  color: var(--white);
  font-size: .68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Section Titles ─────────────────────────────────────────────── */
.section-heading {
  font-family: var(--font-heading);
  color: var(--ink);
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 8px;
}
.section-heading::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, var(--chishti), var(--qadiri));
  border-radius: 2px;
  margin-top: 12px;
}
.section-subtitle { color: var(--stone); margin-bottom: 32px; }

/* ── Page Backgrounds (alternating) ────────────────────────────── */
.section-light { background: var(--white); padding: 64px 0; }
.section-sand  { background: var(--color-bg-alt); padding: 64px 0; }
.section-dark  { background: var(--qadiri-deep); padding: 64px 0; color: var(--white); }
.section-dark .section-heading { color: var(--white); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .shc-shrine-grid,
  .shc-blog-grid  { grid-template-columns: 1fr; }
  .shc-nearby-grid{ grid-template-columns: repeat(2, 1fr); }
  .shc-hero-meta  { gap: 24px; }
  .shc-prayer-grid{ grid-template-columns: repeat(2, 1fr); }
  .sufi-motto     { padding: 36px 20px; }
}

/* ── Core Web Vitals Helpers ────────────────────────────────────── */
img, video { max-width: 100%; height: auto; }
img { loading: lazy; }
/* Reserve space for above-fold images to avoid CLS */
.hero-image-wrapper { aspect-ratio: 16/9; background: var(--qadiri-pale); }

/* ── Print ──────────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .sidebar { display: none; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ── Social Share Buttons ───────────────────────────────────────── */
.shc-share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 32px 0;
  padding: 20px;
  background: var(--qadiri-pale);
  border-radius: var(--radius-md);
}
.shc-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--white);
  color: var(--qadiri-deep) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: all .2s;
}
.shc-share-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.shc-share-btn.shc-wa:hover { background: #25D366; color: white !important; border-color: #25D366; }
.shc-share-btn.shc-fb:hover { background: #1877F2; color: white !important; border-color: #1877F2; }
.shc-share-btn.shc-tw:hover { background: #1DA1F2; color: white !important; border-color: #1DA1F2; }
.shc-share-btn.shc-tg:hover { background: #0088CC; color: white !important; border-color: #0088CC; }

/* ── Sufi motto styling extras ──────────────────────────────────── */
.sufi-motto blockquote { quotes: "“" "”" "‘" "’"; }

/* ── Print improvements ─────────────────────────────────────────── */
@media print {
  .shc-share, .site-header, .site-footer, .sidebar, .shc-neighborhood { display: none; }
}

/* ── Enriched Shrine Page Sections ──────────────────────────────── */
.shc-section {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin: 28px 0;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--qadiri);
}
.shc-section h2 {
  font-family: var(--font-heading);
  color: var(--qadiri-deep);
  font-size: 1.5rem;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--chishti);
  padding-bottom: 8px;
  display: inline-block;
}
.shc-saint-bio { border-left-color: var(--chishti); }
.shc-history { border-left-color: var(--qadiri-deep); }
.shc-miracles { border-left-color: var(--chishti-warm); background: var(--chishti-pale); }

.shc-visit-card .shc-visit-grid,
.shc-contact-card .shc-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.shc-visit-grid > div,
.shc-contact-grid > div {
  background: var(--cloud);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  color: var(--ink);
}
.shc-visit-grid strong,
.shc-contact-grid strong {
  display: block;
  color: var(--qadiri);
  font-size: .8rem;
  margin-bottom: 4px;
}

.shc-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.shc-gallery-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-md);
  transition: transform .2s;
}
.shc-gallery-grid a:hover img { transform: scale(1.04); }

.shc-video iframe {
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  border: none;
}

@media (max-width: 768px) {
  .shc-section { padding: 20px; }
  .shc-section h2 { font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   SHRINE DIRECTORY ARCHIVE — SEMANTIC LISTING
   ═══════════════════════════════════════════════════════════════ */

/* Layout */
.shc-container { max-width:1240px; margin:0 auto; padding:0 20px; }

.shc-archive-layout {
    display:grid;
    grid-template-columns:260px 1fr;
    gap:40px;
    margin-top:40px;
    align-items:start;
}
@media(max-width:900px){
    .shc-archive-layout{ grid-template-columns:1fr; }
    .shc-filter-sidebar{ display:none; }
}

/* Hero */
.shc-archive-hero {
    background:linear-gradient(135deg,var(--qadiri-deep) 0%,var(--qadiri) 60%,#0D5C4A 100%);
    padding:56px 0 44px;
    position:relative; overflow:hidden;
}
.shc-archive-hero::before {
    content:'';position:absolute;inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23fff' stroke-width='0.4' opacity='0.07'%3E%3Cpolygon points='30,2 57,15 57,45 30,58 3,45 3,15'/%3E%3Cpolygon points='30,10 50,20 50,40 30,50 10,40 10,20'/%3E%3Cline x1='30' y1='2' x2='30' y2='58'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events:none;
}
.shc-archive-title {
    color:#fff !important; font-size:clamp(1.8rem,4vw,3rem);
    margin-bottom:12px; position:relative; z-index:1;
}
.shc-archive-desc {
    color:rgba(255,255,255,.8); font-size:1rem; max-width:680px;
    position:relative; z-index:1; margin-bottom:28px;
}
.shc-hero-stats {
    display:flex; gap:36px; flex-wrap:wrap;
    position:relative; z-index:1;
}
.shc-hero-stat { text-align:center; }
.shc-hero-stat strong {
    display:block; font-size:2rem; font-weight:800;
    color:var(--chishti-warm); font-family:var(--font-heading);
}
.shc-hero-stat span { font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.6); }

/* Breadcrumb */
.shc-breadcrumb ol { display:flex; flex-wrap:wrap; gap:4px 8px; list-style:none; padding:0; margin-bottom:16px; }
.shc-breadcrumb li { font-size:.82rem; color:rgba(255,255,255,.6); }
.shc-breadcrumb li + li::before { content:'›'; margin-right:8px; }
.shc-breadcrumb a { color:rgba(255,255,255,.75); }
.shc-breadcrumb a:hover { color:var(--chishti-warm); }
.shc-breadcrumb [aria-current] { color:rgba(255,255,255,.4); }

/* Filter Sidebar */
.shc-filter-sidebar { position:sticky; top:80px; }
.shc-filter-group {
    background:#fff; border-radius:var(--radius-lg); padding:20px;
    margin-bottom:20px; box-shadow:var(--shadow-sm);
}
.shc-filter-heading {
    font-size:.85rem !important; text-transform:uppercase; letter-spacing:.08em;
    color:var(--stone) !important; margin-bottom:12px; border:none !important;
}
.shc-filter-list { list-style:none; padding:0; margin:0; }
.shc-filter-list li + li { margin-top:4px; }
.shc-filter-btn {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px; border-radius:var(--radius-sm);
    font-size:.88rem; color:var(--ink); text-decoration:none;
    transition:background .15s, color .15s;
}
.shc-filter-btn:hover { background:var(--qadiri-pale); color:var(--qadiri); }
.shc-filter-active { background:var(--qadiri) !important; color:#fff !important; font-weight:700; }
.shc-filter-active:hover { background:var(--qadiri-deep) !important; color:#fff !important; }
.shc-filter-count { font-size:.75rem; opacity:.7; }
.shc-filter-active .shc-filter-count { opacity:.85; }

/* Urs sidebar list */
.shc-urs-list { list-style:none; padding:0; margin:0; }
.shc-urs-item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--color-border); align-items:flex-start; }
.shc-urs-item:last-child { border-bottom:none; }
.shc-urs-date {
    background:var(--qadiri); color:#fff; border-radius:8px;
    padding:6px 10px; font-size:.75rem; font-weight:700; text-align:center;
    white-space:nowrap; min-width:44px;
}
.shc-urs-name { display:block; font-weight:600; font-size:.88rem; color:var(--ink); }
.shc-urs-name:hover { color:var(--qadiri); }
.shc-urs-city { font-size:.75rem; color:var(--stone); }

/* Active filter chips */
.shc-active-filters {
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    margin-bottom:20px; padding:12px 16px;
    background:var(--cloud); border-radius:var(--radius-md);
    font-size:.88rem;
}
.shc-active-tag {
    background:#fff; border:1px solid var(--qadiri-light);
    color:var(--qadiri); border-radius:20px;
    padding:4px 12px; font-size:.8rem; font-weight:600;
    display:inline-flex; align-items:center; gap:6px;
}
.shc-active-tag a { color:var(--stone); font-weight:700; text-decoration:none; }
.shc-active-tag a:hover { color:var(--qadiri-deep); }
.shc-result-count { color:var(--stone); margin-left:auto; font-size:.82rem; }

/* Directory Grid */
.shc-shrine-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:24px; list-style:none; padding:0; margin:0 0 40px;
}
@media(max-width:640px){ .shc-shrine-grid{ grid-template-columns:1fr; } }

/* Shrine Card — fully rewritten */
.shc-shrine-card { position:relative; }
.shc-shrine-card article {
    background:#fff; border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md); overflow:hidden;
    border-top:3px solid var(--qadiri);
    transition:transform .25s,box-shadow .25s,border-top-color .25s;
    height:100%; display:flex; flex-direction:column;
}
.shc-shrine-card article:hover {
    transform:translateY(-4px); box-shadow:var(--shadow-lg);
    border-top-color:var(--chishti);
}
.shc-card-thumb { display:block; overflow:hidden; }
.shc-card-thumb img { width:100%; height:200px; object-fit:cover; display:block; transition:transform .4s; }
.shc-shrine-card article:hover .shc-card-thumb img { transform:scale(1.04); }

.shc-verified-badge {
    position:absolute; top:12px; right:12px;
    background:var(--qadiri); color:#fff;
    font-size:.68rem; font-weight:700;
    padding:4px 10px; border-radius:20px;
    display:inline-flex; align-items:center; gap:4px;
    letter-spacing:.05em; z-index:2;
}

.shc-card-body { padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.shc-shrine-name { font-family:var(--font-heading); font-size:1.1rem; margin-bottom:8px; }
.shc-shrine-name a { color:var(--ink); }
.shc-shrine-name a:hover { color:var(--qadiri); }

.shc-card-saint { font-size:.85rem; color:var(--stone); margin-bottom:6px; display:flex; gap:6px; align-items:baseline; }
.shc-card-location { font-size:.82rem; color:var(--stone); display:flex; gap:4px; align-items:center; margin-bottom:10px; }

.shc-silsila-pill {
    display:inline-block;
    background:var(--qadiri-deep); color:var(--chishti-light);
    font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    padding:4px 12px; border-radius:20px; text-decoration:none;
    margin-bottom:12px; transition:background .2s;
}
.shc-silsila-pill:hover { background:var(--qadiri); color:#fff; }

/* Card metadata dl */
.shc-card-meta { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; font-size:.8rem; }
.shc-meta-item { display:flex; gap:6px; }
.shc-meta-item dt { color:var(--stone); min-width:52px; font-weight:600; }
.shc-meta-item dd { color:var(--ink); }
.shc-urs-upcoming dt { color:var(--chishti-deep); }
.shc-urs-upcoming dd { color:var(--chishti); font-weight:700; }

.shc-card-excerpt { font-size:.82rem; color:var(--stone); margin-bottom:14px; flex:1; line-height:1.5; }

.shc-card-cta {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--qadiri); color:#fff !important;
    padding:9px 18px; border-radius:var(--radius-sm);
    font-size:.82rem; font-weight:700; letter-spacing:.04em;
    text-decoration:none; transition:background .2s;
    margin-top:auto; align-self:flex-start;
}
.shc-card-cta:hover { background:var(--qadiri-deep); }

/* Pagination */
.shc-pagination { margin:32px 0 0; }
.shc-page-list { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; }
.shc-page-btn {
    display:flex; align-items:center; justify-content:center;
    min-width:40px; height:40px; padding:0 12px;
    border:1px solid var(--color-border); border-radius:var(--radius-sm);
    font-size:.88rem; font-weight:600; color:var(--ink); text-decoration:none;
    transition:all .15s;
}
.shc-page-btn:hover { border-color:var(--qadiri); color:var(--qadiri); }
.shc-page-active { background:var(--qadiri); border-color:var(--qadiri); color:#fff !important; }
.shc-page-ellipsis { display:flex; align-items:center; padding:0 8px; color:var(--stone); }

/* FAQ section at bottom */
.shc-directory-faq {
    margin:56px 0 0; padding:40px;
    background:#fff; border-radius:var(--radius-xl);
    box-shadow:var(--shadow-sm);
}
.shc-directory-faq h2 {
    font-size:1.4rem; color:var(--ink); margin-bottom:24px;
    border-bottom:2px solid var(--chishti); padding-bottom:12px; display:inline-block;
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE SHRINE PAGE — SEMANTIC LAYOUT
   ═══════════════════════════════════════════════════════════════ */

.shc-shrine-layout {
    display:grid;
    grid-template-columns:1fr 300px;
    gap:40px;
    margin:32px 0;
    align-items:start;
}
@media(max-width:1024px){ .shc-shrine-layout{ grid-template-columns:1fr; } }
@media(max-width:1024px){ .shc-shrine-sidebar{ order:-1; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; } }

/* Shrine hero image */
.shc-shrine-hero-img { margin-bottom:24px; border-radius:var(--radius-lg); overflow:hidden; }
.shc-shrine-hero-img img { width:100%; max-height:480px; object-fit:cover; }

/* Shrine header */
.shc-shrine-header { margin-bottom:28px; }
.shc-shrine-title { font-size:clamp(1.8rem,4vw,2.8rem) !important; margin-bottom:16px; color:var(--ink) !important; }

/* Meta band */
.shc-shrine-meta-band {
    display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px;
}
.shc-meta-pill {
    display:flex; flex-direction:column; gap:2px;
    background:#fff; border:1px solid var(--color-border);
    border-radius:var(--radius-sm); padding:8px 14px;
    box-shadow:var(--shadow-sm);
}
.shc-meta-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--stone); }
.shc-meta-value { font-size:.9rem; font-weight:600; color:var(--ink); }
.shc-silsila-link { color:var(--qadiri) !important; }

/* Section structure */
.shc-shrine-article .shc-section { margin-bottom:36px; }
.shc-shrine-article .shc-section h2 {
    font-family:var(--font-heading) !important;
    font-size:1.5rem !important; color:var(--qadiri-deep) !important;
    border-bottom:2px solid var(--chishti); padding-bottom:8px;
    display:inline-block; margin-bottom:16px;
}
.shc-shrine-article .shc-section h3 { font-size:1.1rem; color:var(--ink); margin:16px 0 8px; }

/* Visit DL */
.shc-visit-dl { display:flex; flex-direction:column; gap:0; }
.shc-visit-row {
    display:grid; grid-template-columns:160px 1fr;
    gap:8px; padding:12px 0; border-bottom:1px solid var(--color-border);
    font-size:.92rem;
}
.shc-visit-row:last-child { border-bottom:none; }
.shc-visit-row dt { font-weight:700; color:var(--qadiri); }
.shc-visit-row dd { color:var(--ink); }
.shc-urs-row dt { color:var(--chishti-deep); }
.shc-urs-row dd { color:var(--chishti); font-weight:700; }
@media(max-width:600px){ .shc-visit-row{ grid-template-columns:1fr; gap:2px; } }

/* Adab box */
.shc-adab-box {
    background:linear-gradient(135deg,var(--qadiri-pale),#fff);
    border-left:4px solid var(--qadiri);
    border-radius:0 var(--radius-md) var(--radius-md) 0;
    padding:20px 24px;
}

/* Maps button */
.shc-btn-maps {
    margin-top:16px;
    display:inline-flex; align-items:center; gap:8px;
    background:var(--qadiri); color:#fff !important;
    padding:11px 22px; border-radius:var(--radius-md);
    font-weight:700; font-size:.9rem; text-decoration:none;
    transition:background .2s;
}
.shc-btn-maps:hover { background:var(--qadiri-deep); }
.shc-btn-full { width:100%; justify-content:center; }
.shc-btn-outline {
    display:inline-flex; align-items:center; gap:6px; margin-top:10px;
    border:2px solid var(--qadiri); color:var(--qadiri); padding:9px 18px;
    border-radius:var(--radius-md); font-weight:700; font-size:.88rem;
    text-decoration:none; transition:all .2s;
}
.shc-btn-outline:hover { background:var(--qadiri); color:#fff; }

/* Gallery */
.shc-gallery-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:12px;
}
.shc-gallery-item { margin:0; }
.shc-gallery-item img {
    width:100%; aspect-ratio:4/3; object-fit:cover;
    border-radius:var(--radius-md); transition:transform .2s;
}
.shc-gallery-item a:hover img { transform:scale(1.05); }

/* Video */
.shc-video-wrap { border-radius:var(--radius-lg); overflow:hidden; }

/* Contact list */
.shc-contact-list { list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; }
.shc-contact-list a {
    display:inline-flex; align-items:center; gap:8px;
    color:var(--qadiri); font-weight:600; font-size:.92rem;
}
.shc-contact-list a:hover { color:var(--chishti); }

/* Sidebar widgets */
.shc-shrine-sidebar .shc-widget {
    background:#fff; border-radius:var(--radius-lg);
    padding:20px; box-shadow:var(--shadow-sm);
    border:1px solid var(--color-border); margin-bottom:20px;
}
.shc-widget-title {
    font-family:var(--font-heading) !important; font-size:1rem !important;
    color:var(--ink) !important; border-bottom:2px solid var(--chishti) !important;
    padding-bottom:8px !important; margin-bottom:14px !important;
    display:block !important;
}
.shc-quick-facts .shc-facts-dl { display:flex; flex-direction:column; gap:0; }
.shc-facts-dl dt { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--stone); margin-top:10px; }
.shc-facts-dl dd { font-size:.9rem; font-weight:600; color:var(--ink); }
.shc-verified-text { color:var(--qadiri) !important; }
.shc-widget-shrine-list { list-style:none; padding:0; }
.shc-widget-shrine-list li { padding:9px 0; border-bottom:1px solid var(--color-border); }
.shc-widget-shrine-list li:last-child { border-bottom:none; }
.shc-widget-shrine-list a { font-size:.88rem; font-weight:600; color:var(--ink); }
.shc-widget-shrine-list a:hover { color:var(--qadiri); }
.shc-widget-saint { display:block; font-size:.75rem; color:var(--stone); }
.shc-widget-dist { float:right; font-size:.72rem; color:var(--stone); }
.shc-widget-more { display:block; margin-top:12px; font-size:.82rem; color:var(--qadiri); font-weight:600; }

/* No results */
.shc-no-results { text-align:center; padding:60px 20px; color:var(--stone); }

/* Prose */
.shc-prose { line-height:1.8; }
.shc-prose p + p { margin-top:14px; }

/* ── Page breadcrumb wrapper (injected via functions.php) ────────── */
.shc-page-breadcrumb {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 20px;
    font-size: .82rem;
}
.shc-page-breadcrumb a {
    color: var(--qadiri) !important;
    font-weight: 600;
    text-decoration: none;
}
.shc-page-breadcrumb a:hover { color: var(--chishti) !important; }
.shc-page-breadcrumb span { color: var(--stone); }

/* Yoast breadcrumb enable check in Customizer ─────────────────────
   Appearance → Customize → Breadcrumbs → Enable must be ON         */

/* ═══════════════════════════════════════════════════════════════════
   SUFI HEALINGS — COMPLETE VISUAL FIX
   GeneratePress-specific selectors + full spiritual Islamic theme
   Fixes: Header white box · Nav gold-on-white · Sidebar colors ·
          Footer gap · Page titles · Category pages · Post headers
   ═══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   1. HEADER — Force dark green on ALL GeneratePress header containers
   ────────────────────────────────────────────────────────────────── */

/* GeneratePress wraps everything in .inside-header — this is the white box */
.site-header,
.inside-header,
.header-inner,
.site-header-inner,
.header-container,
.header-bar-container,
.header-bar,
.site-branding,
.header-image {
    background: var(--qadiri-deep) !important;
}

/* Navigation bar containers */
.site-navigation,
.inside-navigation,
.generate-inside-navigation,
.nav-float-left,
.nav-float-right,
.navigation-container,
.mobile-menu-control-wrapper,
#site-navigation,
.main-navigation,
.main-navigation ul {
    background: var(--qadiri-deep) !important;
}

/* Sticky header fix */
.has-sticky-header .site-header,
.sticky-enabled .site-header,
.site-header.sticky-header {
    background: var(--qadiri-deep) !important;
    box-shadow: 0 2px 24px rgba(0,0,0,.4) !important;
}

/* ──────────────────────────────────────────────────────────────────
   2. NAVIGATION LINKS — Fix gold-on-white (was white-on-white)
   ────────────────────────────────────────────────────────────────── */

/* All nav links white by default */
.main-navigation li a,
.site-navigation a,
.generate-inside-navigation a,
#site-navigation a,
.main-navigation > ul > li > a {
    color: rgba(255,255,255,.9) !important;
    background: transparent !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: .88rem !important;
    letter-spacing: .04em !important;
    padding: 10px 16px !important;
    display: inline-block;
    border-radius: 6px;
    transition: color .2s, background .2s;
}

/* Hover and active states */
.main-navigation li a:hover,
.main-navigation li:hover > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a,
.site-navigation a:hover {
    color: var(--chishti-warm) !important;
    background: rgba(255,255,255,.1) !important;
}

/* Dropdown sub-menu */
.main-navigation .sub-menu,
.main-navigation .children {
    background: var(--qadiri-deep) !important;
    border: 1px solid rgba(200,150,62,.25) !important;
    border-top: 2px solid var(--chishti) !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.3) !important;
    padding: 8px 0 !important;
}
.main-navigation .sub-menu li a,
.main-navigation .children li a {
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 0 !important;
    padding: 10px 20px !important;
}

/* Mobile hamburger */
.menu-toggle,
button.menu-toggle {
    background: transparent !important;
    color: var(--white) !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
}
.menu-toggle:hover { background: rgba(255,255,255,.1) !important; }
.menu-toggle .mobile-menu {
    color: var(--white) !important;
}

/* ──────────────────────────────────────────────────────────────────
   3. PAGE / POST TITLES — Remove small-caps, fix color and font
   ────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.site-title a,
.post-title,
.product-title {
    font-family: var(--font-heading) !important;
    font-variant: normal !important;          /* Kill the ALL-CAPS small-caps */
    text-transform: none !important;
    color: var(--ink) !important;
    line-height: 1.25 !important;
}

/* Entry/post title specifically */
.entry-title,
.entry-title a,
h1.entry-title {
    color: var(--qadiri-deep) !important;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
    font-weight: 700 !important;
}
.entry-title a:hover { color: var(--qadiri) !important; }

/* ──────────────────────────────────────────────────────────────────
   4. SIDEBAR WIDGETS — Force correct Sufi branding (high specificity)
   ────────────────────────────────────────────────────────────────── */

/* Widget container */
.widget-area .widget,
.sidebar .widget,
aside .widget,
#secondary .widget {
    background: var(--white) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 14px !important;
    padding: 22px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 12px rgba(26,10,46,.07) !important;
}

/* Widget titles — override everything with high specificity */
.widget-area .widget .widget-title,
.widget-area .widget h2.widget-title,
.widget-area .widget h3.widget-title,
.widget-area .widget .widgettitle,
.sidebar .widget-title,
.sidebar h2,
#secondary .widget-title,
#secondary h2 {
    font-family: var(--font-heading) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    font-variant: normal !important;
    text-transform: none !important;
    color: var(--qadiri-deep) !important;
    border: none !important;
    border-bottom: 2px solid var(--chishti) !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
    letter-spacing: .02em !important;
}

/* Widget links */
.widget-area .widget a,
.sidebar .widget a,
#secondary .widget a {
    color: var(--qadiri) !important;
    text-decoration: none;
    transition: color .2s;
}
.widget-area .widget a:hover,
#secondary .widget a:hover { color: var(--chishti) !important; }

/* Recent posts list */
.widget_recent_entries ul li,
.widget ul li {
    padding: 9px 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    font-size: .9rem !important;
    line-height: 1.4 !important;
}
.widget ul li:last-child { border-bottom: none !important; }

/* Search widget */
.widget_search .search-field,
.widget .search-field {
    border: 2px solid var(--color-border) !important;
    border-radius: 8px 0 0 8px !important;
    padding: 10px 14px !important;
    font-family: var(--font-body) !important;
    width: calc(100% - 52px) !important;
    font-size: .9rem !important;
    background: var(--pearl) !important;
    color: var(--ink) !important;
}
.widget_search .search-field:focus { border-color: var(--qadiri) !important; outline: none !important; }
.widget_search .search-submit,
.widget .search-submit {
    background: var(--qadiri) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 10px 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background .2s !important;
    font-family: var(--font-body) !important;
}
.widget_search .search-submit:hover { background: var(--qadiri-deep) !important; }

/* Categories widget */
.widget_categories ul li a,
.widget_product_categories ul li a {
    color: var(--qadiri) !important;
    font-weight: 600;
}
.widget_categories ul li a::before {
    content: '☪ ';
    font-size: .7em;
    opacity: .6;
}

/* ──────────────────────────────────────────────────────────────────
   5. FOOTER — Fix gap and tagline position
   ────────────────────────────────────────────────────────────────── */

.site-footer,
.footer-container,
.inside-footer,
.footer-widgets-container,
.site-footer .inside-site-info {
    background: var(--qadiri-deep) !important;
    color: rgba(255,255,255,.7) !important;
}

.site-footer a,
.site-footer .inside-site-info a {
    color: rgba(255,255,255,.7) !important;
    transition: color .2s;
}
.site-footer a:hover { color: var(--chishti-warm) !important; }

/* Footer widget titles */
.site-footer .widget-title,
.site-footer h2,
.site-footer h3 {
    color: var(--white) !important;
    font-family: var(--font-heading) !important;
    font-variant: normal !important;
    font-size: 1rem !important;
    border-bottom: 1px solid rgba(200,150,62,.4) !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
}

/* The copyright bar inside footer */
.site-info,
.inside-site-info,
.copyright-bar {
    background: var(--qadiri-deep) !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
    padding: 14px 20px !important;
    text-align: center !important;
    font-size: .82rem !important;
    color: rgba(255,255,255,.55) !important;
}

/* Footer tagline — pull into footer background */
.footer-tagline {
    background: var(--qadiri-deep) !important;
    color: rgba(255,255,255,.55) !important;
    text-align: center !important;
    padding: 16px 20px 24px !important;
    font-size: .9rem !important;
    font-style: italic !important;
    letter-spacing: .06em !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    margin: 0 !important;
}
.footer-tagline span {
    color: var(--chishti-warm) !important;
    font-family: var(--font-heading) !important;
    font-size: 1.1rem !important;
    font-style: normal !important;
    font-variant: normal !important;
}

/* ──────────────────────────────────────────────────────────────────
   6. POST / ARTICLE CONTENT — Blog posts, pillars, category pages
   ────────────────────────────────────────────────────────────────── */

/* Article container */
.content-area .entry,
.content-area article,
article.post,
article.page {
    background: var(--white) !important;
    border-radius: 14px !important;
    padding: 36px !important;
    box-shadow: 0 2px 16px rgba(26,10,46,.07) !important;
    margin-bottom: 32px !important;
}
@media(max-width:768px){
    .content-area .entry,
    .content-area article { padding: 20px !important; }
}

/* Post meta (date, author, category) */
.entry-meta,
.post-meta,
.posted-on,
.byline {
    font-size: .82rem !important;
    color: var(--stone) !important;
    margin-bottom: 20px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: center;
}
.entry-meta a,
.post-meta a { color: var(--qadiri) !important; font-weight: 600; }

/* Post excerpt cards (archive/category pages) */
.entry-summary,
.post-summary {
    color: var(--stone) !important;
    font-size: .95rem !important;
    line-height: 1.7 !important;
}

/* Read more link */
.read-more,
.more-link,
a.more-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--qadiri) !important;
    color: var(--white) !important;
    padding: 9px 20px !important;
    border-radius: 8px !important;
    font-size: .85rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background .2s !important;
    margin-top: 12px !important;
}
.read-more:hover, .more-link:hover { background: var(--qadiri-deep) !important; color: var(--white) !important; }

/* Post featured image */
.post-thumbnail,
.entry-thumbnail,
.featured-image {
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}
.post-thumbnail img,
.entry-thumbnail img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: transform .4s !important;
}
.post-thumbnail:hover img { transform: scale(1.02); }

/* ──────────────────────────────────────────────────────────────────
   7. CATEGORY / ARCHIVE PAGES — Islamic spiritual header
   ────────────────────────────────────────────────────────────────── */

/* Archive hero banner */
.archive-header,
.taxonomy-description,
.page-header,
.term-description-wrap {
    background: linear-gradient(135deg, var(--qadiri-deep), var(--qadiri)) !important;
    padding: 52px 32px !important;
    text-align: center !important;
    border-radius: 0 0 20px 20px !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 32px !important;
}
.archive-header::before,
.page-header::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23fff' stroke-width='0.4' opacity='0.07'%3E%3Cpolygon points='30,2 57,15 57,45 30,58 3,45 3,15'/%3E%3Cline x1='30' y1='2' x2='30' y2='58'/%3E%3C/g%3E%3C/svg%3E") !important;
    pointer-events: none !important;
}
.archive-title,
.page-header h1,
.archive-header h1,
.archive-header .page-title {
    color: var(--white) !important;
    font-variant: normal !important;
    text-transform: none !important;
    font-size: clamp(1.6rem, 4vw, 2.8rem) !important;
    position: relative !important;
    z-index: 1 !important;
}
.term-description,
.archive-description,
.category-description {
    color: rgba(255,255,255,.8) !important;
    max-width: 640px !important;
    margin: 12px auto 0 !important;
    font-size: 1rem !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Category post grid on archive pages */
.archive .content-area,
.category .content-area,
.tag .content-area {
    display: grid !important;
    gap: 24px !important;
}

/* ──────────────────────────────────────────────────────────────────
   8. ELEMENTOR SPECIFICS — Fix Elementor-built pages
   ────────────────────────────────────────────────────────────────── */

/* Override Elementor heading color/font */
.elementor-heading-title {
    font-family: var(--font-heading) !important;
    font-variant: normal !important;
    text-transform: none !important;
}
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3 {
    font-family: var(--font-heading) !important;
    font-variant: normal !important;
}

/* ──────────────────────────────────────────────────────────────────
   9. PAGINATION — Styled consistently
   ────────────────────────────────────────────────────────────────── */

.pagination,
.navigation.posts-navigation,
.posts-navigation {
    margin: 32px 0 !important;
}
.page-numbers,
.posts-navigation a,
.pagination a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 8px !important;
    font-size: .88rem !important;
    font-weight: 600 !important;
    color: var(--qadiri) !important;
    text-decoration: none !important;
    transition: all .2s !important;
    background: var(--white) !important;
}
.page-numbers:hover,
.posts-navigation a:hover,
.pagination a:hover {
    background: var(--qadiri) !important;
    color: var(--white) !important;
    border-color: var(--qadiri) !important;
}
.page-numbers.current {
    background: var(--qadiri) !important;
    color: var(--white) !important;
    border-color: var(--qadiri) !important;
}
.page-numbers.dots { border: none !important; background: none !important; }

/* ──────────────────────────────────────────────────────────────────
   10. COMMENTS — Spiritual welcome for visitors
   ────────────────────────────────────────────────────────────────── */

.comment-form-comment label,
.comment-form label {
    font-weight: 700 !important;
    font-size: .85rem !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--stone) !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    border: 2px solid var(--color-border) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-family: var(--font-body) !important;
    font-size: .95rem !important;
    width: 100% !important;
    transition: border-color .2s !important;
    background: var(--pearl) !important;
    color: var(--ink) !important;
}
.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--qadiri) !important;
    outline: none !important;
}

.comment-form .submit,
.comment-form input[type="submit"] {
    background: linear-gradient(135deg, var(--qadiri), var(--qadiri-mid)) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 32px !important;
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    cursor: pointer !important;
    transition: all .2s !important;
    letter-spacing: .04em !important;
}
.comment-form .submit:hover,
.comment-form input[type="submit"]:hover {
    background: linear-gradient(135deg, var(--qadiri-deep), var(--qadiri)) !important;
    transform: translateY(-1px) !important;
}

/* Comment list items */
.comment-body {
    background: var(--white) !important;
    border-radius: 10px !important;
    padding: 20px !important;
    border-left: 3px solid var(--qadiri-pale) !important;
    margin-bottom: 16px !important;
}
.comment-author .fn { color: var(--qadiri-deep) !important; font-weight: 700 !important; }

/* ──────────────────────────────────────────────────────────────────
   11. PILLAR POST SPECIAL STYLING — Long-form content
   ────────────────────────────────────────────────────────────────── */

/* Table of Contents (if plugin used) */
.ez-toc-container,
.wp-block-table-of-contents,
[class*="toc-"],
.table-of-contents {
    background: var(--qadiri-pale) !important;
    border: 1px solid rgba(26,95,74,.15) !important;
    border-left: 4px solid var(--qadiri) !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 20px 24px !important;
    margin: 28px 0 !important;
}
.ez-toc-title,
[class*="toc-title"],
.table-of-contents h3 {
    color: var(--qadiri-deep) !important;
    font-family: var(--font-heading) !important;
    font-size: 1rem !important;
    font-variant: normal !important;
    margin-bottom: 10px !important;
}

/* Blockquote — Islamic spiritual quote style */
blockquote,
.wp-block-quote {
    background: linear-gradient(135deg, var(--qadiri-deep), var(--qadiri)) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 28px 32px !important;
    margin: 28px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}
blockquote p,
.wp-block-quote p {
    color: var(--white) !important;
    font-family: var(--font-heading) !important;
    font-size: 1.1rem !important;
    font-style: italic !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}
blockquote cite,
.wp-block-quote cite {
    display: block !important;
    margin-top: 12px !important;
    color: var(--chishti-light) !important;
    font-size: .85rem !important;
    font-style: normal !important;
    letter-spacing: .08em !important;
    position: relative !important;
    z-index: 1 !important;
}
blockquote::before {
    content: '"' !important;
    position: absolute !important;
    top: -20px !important;
    left: 20px !important;
    font-size: 120px !important;
    color: rgba(255,255,255,.06) !important;
    font-family: Georgia, serif !important;
    z-index: 0 !important;
    line-height: 1 !important;
}

/* Content headings — Islamic-styled dividers */
.entry-content h2,
.page-content h2,
.post-content h2 {
    font-family: var(--font-heading) !important;
    color: var(--qadiri-deep) !important;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--chishti) !important;
    display: inline-block !important;
    margin-top: 36px !important;
    margin-bottom: 16px !important;
    font-variant: normal !important;
}
.entry-content h3,
.page-content h3 {
    font-family: var(--font-heading) !important;
    color: var(--qadiri) !important;
    font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
    font-variant: normal !important;
    margin-top: 24px !important;
}

/* ──────────────────────────────────────────────────────────────────
   12. BODY / PAGE BACKGROUND — Warm spiritual cream
   ────────────────────────────────────────────────────────────────── */

body {
    background-color: var(--cloud) !important;
}
.content-area,
.site-content,
.site-main,
#content {
    background: transparent !important;
}

/* Content wrapper keeps white articles on cream background */
.generate-columns-container,
.content-container,
.inside-article {
    background: transparent !important;
}

/* ──────────────────────────────────────────────────────────────────
   13. ISLAMIC GEOMETRIC HEADER ORNAMENT
   ────────────────────────────────────────────────────────────────── */

/* Gold line at bottom of every header */
.site-header::after {
    content: '' !important;
    display: block !important;
    height: 3px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--chishti) 20%,
        var(--chishti-warm) 50%,
        var(--chishti) 80%,
        transparent 100%) !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}
.site-header { position: relative !important; }

/* ──────────────────────────────────────────────────────────────────
   14. "LOVE ALL — HATE NONE" MOTTO BLOCK
   ────────────────────────────────────────────────────────────────── */

.sufi-motto {
    background: linear-gradient(135deg, var(--qadiri-deep), var(--qadiri)) !important;
    border-radius: 20px !important;
    padding: 44px 32px !important;
    text-align: center !important;
    margin: 48px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}
.sufi-motto::before {
    content: '☪' !important;
    position: absolute !important;
    top: -10px !important; right: 20px !important;
    font-size: 110px !important;
    opacity: .05 !important;
    color: var(--white) !important;
    pointer-events: none !important;
}
.sufi-motto blockquote {
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
}
.sufi-motto blockquote p {
    font-family: var(--font-heading) !important;
    font-size: clamp(1.4rem, 3.5vw, 2rem) !important;
    color: var(--white) !important;
    font-style: italic !important;
}
.sufi-motto blockquote::before { display: none !important; }
.sufi-motto cite {
    color: var(--chishti-warm) !important;
    font-size: .9rem !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}