/* ============================================
   ICOSF Theme — Main Stylesheet
   ============================================ */

/* ─── Font Faces ─── */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-v16-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-v15-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-v15-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-v15-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Amiri';
  src: url('../fonts/amiri-v27-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-off-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ─── Typography — Poppins primary, gradient on display headings ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text);
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 4rem); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; }
h4 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); font-weight: 600; }
h5 { font-size: 1.125rem; font-weight: 600; }
h6 { font-size: 1rem; font-weight: 600; }

/* Solid heading color (gradient text removed for the minimalistic look) */
section h2 {
  background: none;
  -webkit-text-fill-color: var(--color-heading);
  color: var(--color-heading);
}

/* Hero h1 stays pure white for readability against the photo background */
.hero__heading,
.hero h1 {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--color-white) !important;
  color: var(--color-white) !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

/* Keep dark/light section h2 in white (gradient breaks on dark backgrounds) */
.section--dark h2,
.section--stats h2,
.donation-cta h2,
.app-promo h2,
.page-hero h1,
.page-hero__heading,
.section--testimonial h2 {
  background: none;
  -webkit-text-fill-color: var(--color-white);
  color: var(--color-white);
}

/* Section labels — small uppercase eyebrow text — accent in teal */
.section-label {
  display: inline-block;
  color: var(--color-teal);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-sm);
}

p {
  margin-bottom: var(--space-md);
}

.text-arabic {
  font-family: var(--font-arabic);
  direction: rtl;
  font-size: 1.5em;
  line-height: 2;
}

/* ─── Layout ─── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.container--wide {
  max-width: var(--container-wide);
}

.section {
  padding-block: var(--space-4xl);
}

.section--cream {
  background-color: var(--color-cream);
}

.section--dark {
  background-color: var(--color-gray-900);
  color: var(--color-white);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-white);
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--cta {
  background: var(--color-cta);
  color: var(--color-white);
}

.btn--cta:hover {
  background: var(--color-cta-hover);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn--outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn--white {
  background: var(--color-white);
  color: var(--color-primary);
}

.btn--white:hover {
  background: var(--color-cream);
  color: var(--color-primary-dark);
}

.btn--green {
  background: var(--color-green);
  color: var(--color-white);
}

.btn--green:hover {
  background: var(--color-green-dark);
  color: var(--color-white);
}

.btn--sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.8125rem;
}

.btn--lg {
  padding: 1rem 2.25rem;
  font-size: 1.0625rem;
}

/* ─── App Install Banner (Tier 1) ─── */
.app-banner {
  background: var(--color-primary-metallic);
  color: var(--color-white);
  padding: 0.5rem 0;
  font-size: 0.875rem;
  position: relative;
  z-index: 1001;
}

.app-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

.app-banner__text {
  font-weight: 500;
}

.app-banner__btn {
  padding: 0.25rem 0.75rem;
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background var(--transition-fast);
}

.app-banner__btn:hover {
  background: rgba(255, 255, 255, 0.35);
  color: var(--color-white);
}

.app-banner__dismiss {
  position: absolute;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  padding: 0.25rem;
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.app-banner__dismiss:hover {
  opacity: 1;
}

.app-banner--hidden {
  display: none;
}

/* ─── Top Bar (Tier 2) — Bright gold like icosf.org ─── */
.top-bar {
  background: var(--color-cta);
  color: var(--color-white);
  font-size: 0.8125rem;
  padding: 0.5rem 0;
  position: relative;
  z-index: 1000;
}

.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
}

.top-bar__left a,
.top-bar__right a {
  color: var(--color-white);
  transition: opacity var(--transition-fast);
}

.top-bar__left a:hover,
.top-bar__right a:hover {
  opacity: 0.85;
}

.top-bar__right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.top-bar__social {
  display: flex;
  gap: var(--space-sm);
}

.top-bar__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.top-bar__social a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ─── Main Nav (Tier 3) ─── */
.site-header {
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 10000;
  transition: box-shadow var(--transition-base), padding var(--transition-base);
}

.site-header--scrolled {
  box-shadow: var(--shadow-md);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}

.site-header__logo img {
  height: 100px;
  width: auto;
  transition: height var(--transition-base);
}

.site-header--scrolled .site-header__logo img {
  height: 75px;
}

.site-header__logo {
  display: flex;
  align-items: center;
}

/* ─── Mega Menu ─── */
.mega-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0;
}

.mega-menu__item {
  position: relative;
}

.mega-menu__link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  position: relative;
  transition: color var(--transition-fast);
}

.mega-menu__link:hover,
.mega-menu__link:focus {
  color: var(--color-primary);
}

.mega-menu__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.mega-menu__link:hover::after,
.mega-menu__item--has-dropdown:hover > .mega-menu__link::after {
  transform: scaleX(1);
}

.mega-menu__chevron {
  transition: transform var(--transition-fast);
}

.mega-menu__item--has-dropdown:hover .mega-menu__chevron {
  transform: rotate(180deg);
}

.mega-menu__dropdown,
.mega-menu__dropdown ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-white);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition-base);
  z-index: 100;
  list-style: none !important;
  list-style-type: none !important;
  padding: var(--space-sm) 0 !important;
  margin: 0 !important;
}

.mega-menu__dropdown li,
.mega-menu__dropdown ul li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

.mega-menu__dropdown li::before,
.mega-menu__dropdown ul li::before {
  display: none !important;
  content: none !important;
}

.mega-menu__dropdown li a,
.mega-menu__dropdown ul li a {
  display: block;
  padding: 0.55rem 1.25rem;
  color: var(--color-text);
  font-size: 0.9rem;
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.mega-menu__dropdown li a:hover,
.mega-menu__dropdown ul li a:hover {
  background: var(--color-cream);
  color: var(--color-primary);
  padding-left: 1.5rem;
}

.mega-menu__item--has-dropdown:hover > .mega-menu__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu__dropdown-inner {
  padding: var(--space-md);
}

.mega-menu__submenu {
  list-style: none;
}

.mega-menu__sublink {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-light);
  border-radius: var(--border-radius);
  transition: all var(--transition-fast);
}

.mega-menu__sublink:hover {
  background: var(--color-cream);
  color: var(--color-primary);
}

.mega-menu__donate-btn {
  margin-left: var(--space-sm);
}

/* ─── Mobile Menu Close (hidden on desktop) ─── */
.mobile-menu-close {
  display: none;
}

/* ─── Mobile Nav Toggle ─── */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
}

.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  margin: 5px 0;
  transition: all var(--transition-base);
}

.nav-toggle--active .nav-toggle__bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle--active .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle--active .nav-toggle__bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ─── Hero ─── */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  /* Light overlay — preserves the bright daytime feel of the photo while keeping text legible */
  background: linear-gradient(
    160deg,
    rgba(40, 30, 15, 0.35) 0%,
    rgba(60, 45, 25, 0.2) 40%,
    rgba(201, 169, 97, 0.15) 100%
  );
  z-index: 1;
}

.hero__pattern {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 10L70 40L40 70L10 40z' fill='none' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='0.5'/%3E%3C/svg%3E") repeat;
  animation: patternDrift 60s linear infinite;
}

@keyframes patternDrift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(80px, 80px); }
}

.hero__content {
  position: relative;
  z-index: 3;
  max-width: 750px;
}

/* Decorative accent line above hero content */
.hero__content::before {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-cta), var(--color-secondary-300, #E8CC7A));
  margin-bottom: var(--space-lg);
  border-radius: 2px;
  animation: heroFadeUp 1s ease-out 0s both;
}

.hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--color-white);
  line-height: 1.15;
  margin-bottom: var(--space-lg);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  animation: heroFadeUp 1s ease-out 0.2s both;
}

.hero__text {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  margin-bottom: var(--space-2xl);
  max-width: 600px;
  animation: heroFadeUp 1s ease-out 0.5s both;
}

.hero__ctas {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  animation: heroFadeUp 1s ease-out 0.8s both;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Page Hero (inner pages) ─── */
.page-hero {
  background: var(--color-gray-900);
  color: var(--color-white);
  padding: var(--space-3xl) 0 var(--space-2xl);
}

.page-hero__heading {
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.page-hero__subheading {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.0625rem;
  max-width: 700px;
  margin-top: var(--space-sm);
  line-height: 1.7;
}

.page-hero--image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  padding: var(--space-4xl) 0 var(--space-3xl);
}

.page-hero--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(60, 45, 25, 0.55), rgba(40, 30, 15, 0.4));
}

.page-hero--image .container {
  position: relative;
  z-index: 1;
}

.page-hero--dark {
  background: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-secondary) 100%);
  padding: var(--space-4xl) 0 var(--space-3xl);
  position: relative;
  overflow: hidden;
}

.page-hero--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L55 30L30 55L5 30z' fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3C/svg%3E") repeat;
  opacity: 0.5;
}

.page-hero--dark .container {
  position: relative;
  z-index: 1;
}

/* ─── Quick Action Links ─── */
.quick-actions {
  padding: var(--space-2xl) 0;
  background: var(--color-off-white);
}

.quick-actions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  text-align: center;
}

.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-radius: var(--border-radius-lg);
  transition: all var(--transition-base);
  text-decoration: none;
  color: var(--color-text);
}

.quick-action:hover {
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  color: var(--color-primary);
}

.quick-action__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: background var(--transition-base);
}

.quick-action:hover .quick-action__icon {
  background: var(--color-cta);
}

.quick-action__label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ─── Welcome + Prayer Grid ─── */
.welcome-prayer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr !important;
  gap: var(--space-2xl);
  align-items: start;
}

.welcome-prayer-grid > * {
  min-width: 0; /* prevent grid blowout */
}

.welcome-prayer__content h2 {
  margin-bottom: var(--space-md);
}

.welcome-prayer__content p {
  color: var(--color-text-light);
  font-size: 1.0625rem;
  line-height: 1.8;
}

.welcome-prayer__image {
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-md);
}

.welcome-prayer__btn {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
}

.welcome-prayer__content > p:last-of-type {
  margin-bottom: var(--space-md);
}

.welcome-prayer__content {
  max-width: 100%;
}

.welcome-prayer__image img {
  width: 100%;
  max-height: 250px;
  display: block;
  object-fit: cover;
  border-radius: var(--border-radius-lg);
  transition: transform 0.6s ease;
}

.welcome-prayer__image:hover img {
  transform: scale(1.03);
}

.welcome-prayer__widget {
  position: sticky;
  top: 100px;
  width: 100%;
  min-width: 0;
}

.welcome-prayer__widget .rawdah-widget-container {
  width: 100%;
}

.welcome-prayer__widget .rawdah-widget-container iframe {
  width: 100% !important;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}

/* Legacy fallback */
.welcome {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-3xl);
  align-items: center;
}

.welcome__image {
  overflow: hidden;
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-lg);
}

.welcome__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}

.welcome__logo img {
  max-width: 300px;
  margin-inline: auto;
}

.welcome__text h2 {
  margin-bottom: var(--space-lg);
}

.welcome__text p {
  color: var(--color-text-light);
  font-size: 1.0625rem;
  line-height: 1.8;
}

/* ─── Saturday Programs Section ─── */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.program-card {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  border: 1px solid var(--color-gray-100);
  border-top: 3px solid var(--color-primary);
  position: relative;
  overflow: hidden;
}

.program-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-top-color: var(--color-cta);
}

.program-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin: 0 auto var(--space-md);
}

.program-card__title {
  margin-bottom: var(--space-sm);
}

.program-card__text {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* ─── Donation CTA Section — Warm gold gradient ─── */
.donation-cta {
  background: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-secondary) 100%);
  color: var(--color-white);
  text-align: center;
  padding: var(--space-4xl) 0;
  position: relative;
  overflow: hidden;
}

.donation-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L55 30L30 55L5 30z' fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='0.5'/%3E%3C/svg%3E") repeat;
  pointer-events: none;
}

.donation-cta__verse {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-style: italic;
  color: var(--color-gray-200);
  max-width: 800px;
  margin: 0 auto var(--space-sm);
  line-height: 1.6;
}

.donation-cta__ref {
  color: var(--color-primary-light);
  font-size: 0.9375rem;
  margin-bottom: var(--space-2xl);
}

/* ─── About Page ─── */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.about-intro__image {
  border-radius: var(--border-radius-xl);
  overflow: hidden;
}

.about-intro__facts {
  list-style: none;
  margin-top: var(--space-xl);
}

.about-intro__facts li {
  padding: var(--space-sm) 0;
  padding-left: var(--space-xl);
  position: relative;
  color: var(--color-text-light);
}

.about-intro__facts li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--color-green);
  font-weight: 700;
}

.counter {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  color: var(--color-primary);
  line-height: 1;
}

.counter__label {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

/* ─── Tabs ─── */
.tabs {
  margin-top: var(--space-2xl);
}

.tabs__nav {
  display: flex;
  gap: var(--space-sm);
  border-bottom: 2px solid var(--color-gray-200);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.tabs__btn {
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tabs__btn:hover,
.tabs__btn--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.tabs__panel {
  display: none;
}

.tabs__panel--active {
  display: block;
}

/* ─── Imam Profile ─── */
.imam-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-2xl);
  background: var(--color-cream);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  align-items: start;
}

.imam-card__photo {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--color-gray-200);
}

.imam-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imam-card__name {
  margin-bottom: var(--space-sm);
}

.imam-card__role {
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-lg);
}

.imam-card__bio {
  color: var(--color-text-light);
  line-height: 1.8;
}

/* ─── Multi-Step Form ─── */
.form-steps {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
  position: relative;
}

.form-steps::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--color-gray-200);
}

.form-step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  position: relative;
  z-index: 1;
}

.form-step-indicator__number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  background: var(--color-gray-200);
  color: var(--color-text-muted);
  transition: all var(--transition-base);
}

.form-step-indicator--active .form-step-indicator__number {
  background: var(--color-primary);
  color: var(--color-white);
}

.form-step-indicator--complete .form-step-indicator__number {
  background: var(--color-green);
  color: var(--color-white);
}

.form-step-indicator__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-panel {
  display: none;
}

.form-panel--active {
  display: block;
}

/* ─── Form Elements ─── */
.form-group {
  margin-bottom: var(--space-lg);
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.15);
  outline: none;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.form-checkbox input[type="checkbox"] {
  width: auto;
  margin-top: 0.25rem;
}

/* ─── Zakat Calculator ─── */
.zakat-calculator {
  background: var(--color-white);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
}

.zakat-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.zakat-field__label {
  font-weight: 500;
  color: var(--color-text);
}

.zakat-field__input {
  position: relative;
}

.zakat-field__input::before {
  content: '$';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-weight: 600;
}

.zakat-field__input input {
  width: 180px;
  padding-left: 1.5rem;
  text-align: right;
}

.zakat-result {
  background: var(--color-cream);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  margin-top: var(--space-xl);
  text-align: center;
  display: none;
}

.zakat-result--visible {
  display: block;
}

.zakat-result__amount {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-green);
  margin: var(--space-sm) 0;
}

.zakat-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-xl);
}

/* ─── Donate Page ─── */
.donate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
}

.donate-card {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-100);
  border-top: 4px solid var(--color-cta);
  transition: all var(--transition-base);
}

.donate-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  border-top-color: var(--color-primary);
}

.donate-card:nth-child(2) { border-top-color: var(--color-primary); }
.donate-card:nth-child(2):hover { border-top-color: var(--color-cta); }
.donate-card:nth-child(3) { border-top-color: #2ECC71; }
.donate-card:nth-child(4) { border-top-color: #E74C3C; }
.donate-card:nth-child(5) { border-top-color: #9B59B6; }
.donate-card:nth-child(6) { border-top-color: #3498DB; }
.donate-card:nth-child(7) { border-top-color: #F39C12; }

.donate-card__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto var(--space-lg);
}

.donate-card__title {
  margin-bottom: var(--space-sm);
}

.donate-card__text {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin-bottom: var(--space-lg);
}

/* ─── Contact Page ─── */
.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.contact-layout__form {
}

.contact-layout__info {
  position: sticky;
  top: 100px;
}

.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.contact-info-card:last-of-type {
  border-bottom: none;
}

.contact-info-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-card h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.contact-info-card a {
  color: var(--color-primary);
  font-weight: 500;
}

.contact-info-card p {
  color: var(--color-text-light);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.section--flush {
  padding: 0;
}

/* ─── Accessibility Grid ─── */
.accessibility-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.accessibility-item {
  text-align: center;
  padding: var(--space-lg);
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  border: 1px solid var(--color-gray-100);
  transition: all var(--transition-base);
}

.accessibility-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Legacy contact card styles */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
}

/* ─── Testimonial Carousel ─── */
.testimonials {
  overflow: hidden;
  position: relative;
}

.testimonial-track {
  display: flex;
  transition: transform var(--transition-slow);
}

.testimonial-card {
  flex: 0 0 100%;
  padding: var(--space-2xl);
  text-align: center;
}

.testimonial-card__quote {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-text-light);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

.testimonial-card__author {
  font-weight: 600;
  color: var(--color-text);
}

/* ─── FAQ Accordion ─── */
.faq-list {
  max-width: 800px;
  margin-inline: auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-gray-200);
}

.faq-item__question {
  width: 100%;
  padding: var(--space-lg) 0;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.faq-item__question:hover {
  color: var(--color-primary);
}

.faq-item__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: transform var(--transition-base);
}

.faq-item--open .faq-item__icon {
  transform: rotate(45deg);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.faq-item__answer-inner {
  padding-bottom: var(--space-lg);
  color: var(--color-text-light);
  line-height: 1.7;
}

/* ─── Footer ─── */
.newsletter-strip {
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-2xl) 0;
}

.newsletter-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.newsletter-strip__text h3 {
  color: var(--color-white);
  margin-bottom: var(--space-xs);
}

.newsletter-strip__text p {
  opacity: 0.85;
  margin-bottom: 0;
}

.newsletter-strip__form {
  display: flex;
  gap: var(--space-sm);
}

.newsletter-strip__form input {
  padding: 0.75rem 1rem;
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  min-width: 280px;
}

.newsletter-strip__form button {
  padding: 0.75rem 1.5rem;
  background: var(--color-gray-900);
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.newsletter-strip__form button:hover {
  background: var(--color-black);
}

.site-footer {
  background: var(--color-secondary-dark);
  color: rgba(255, 255, 255, 0.85);
  padding: var(--space-3xl) 0 0;
  font-size: 1rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-2xl);
  padding-bottom: var(--space-3xl);
}

.site-footer__brand p {
  margin-top: var(--space-md);
  font-size: 1rem;
  line-height: 1.7;
}

.site-footer__brand img {
  max-width: 180px;
}

.site-footer h4 {
  color: var(--color-white);
  font-size: 1rem;
  margin-bottom: var(--space-lg);
}

.site-footer ul {
  list-style: none;
}

.site-footer ul li {
  margin-bottom: var(--space-sm);
}

.site-footer ul a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  transition: color var(--transition-fast);
}

.site-footer ul a:hover {
  color: var(--color-white);
}

.footer-contact-info p {
  margin-bottom: var(--space-sm);
  font-size: 1rem;
}

.footer-verse {
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  padding: var(--space-xl) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-verse__arabic {
  font-family: var(--font-arabic);
  font-size: 1.75rem;
  color: var(--color-primary-light);
  margin-bottom: var(--space-sm);
  direction: rtl;
  line-height: 2;
}

.footer-verse__english {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-gray-300);
  font-size: 1.0625rem;
}

.footer-verse__ref {
  color: var(--color-gray-500);
  font-size: 0.8125rem;
  margin-top: var(--space-xs);
}

.footer-bottom {
  text-align: center;
  padding: var(--space-lg) 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.85);
}

.footer-bottom a:hover {
  color: var(--color-white);
}

/* ─── Rawdah Widget ─── */
.rawdah-widget-container {
  width: 100%;
}

.rawdah-widget-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--border-radius-lg);
}

.rawdah-widget-placeholder__inner {
  text-align: center;
  padding: var(--space-2xl);
}

.rawdah-widget-placeholder__icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
}

.rawdah-widget-placeholder__text {
  font-size: 1.1rem;
  color: var(--color-text);
}

.rawdah-widget-placeholder__hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ─── Breadcrumbs ─── */
.breadcrumbs__list {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  list-style: none;
  font-size: 0.875rem;
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: '/';
  margin-right: var(--space-sm);
  color: var(--color-gray-500);
}

.breadcrumbs__item a {
  color: var(--color-gray-300);
}

.breadcrumbs__item a:hover {
  color: var(--color-white);
}

.breadcrumbs__item--current {
  color: var(--color-primary-light);
}

/* ─── 404 Page ─── */
.error-404 {
  text-align: center;
  padding: var(--space-4xl) 0;
}

.error-404__number {
  font-family: var(--font-heading);
  font-size: clamp(6rem, 15vw, 12rem);
  color: var(--color-gray-200);
  line-height: 1;
}

.error-404__heading {
  margin: var(--space-lg) 0 var(--space-md);
}

.error-404__text {
  color: var(--color-text-muted);
  font-size: 1.125rem;
  margin-bottom: var(--space-2xl);
}

/* ─── YouTube Embed ─── */
.youtube-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--border-radius-xl);
}

.youtube-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ─── Success/Error Messages ─── */
.alert {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-xl);
  font-weight: 500;
}

.alert--success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.alert--error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .mega-menu {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .mega-menu--mobile-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: var(--color-white);
    box-shadow: var(--shadow-xl);
    padding: var(--space-3xl) var(--space-xl);
    z-index: 9999;
    overflow-y: auto;
    gap: 0;
  }

  .mobile-menu-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--color-gray-200);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-gray-600);
    transition: background var(--transition-base), color var(--transition-base);
    z-index: 10001;
  }

  .mobile-menu-close:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
  }

  .mega-menu--mobile-open .mega-menu__link {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-gray-100);
  }

  .mega-menu--mobile-open .mega-menu__dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    display: none;
  }

  .mega-menu--mobile-open .mega-menu__item--has-dropdown.is-open .mega-menu__dropdown {
    display: block;
  }

  .mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
  }

  .mobile-overlay--visible {
    opacity: 1;
    visibility: visible;
  }

  .welcome {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-intro {
    grid-template-columns: 1fr;
  }

  .imam-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .top-bar {
    display: none;
  }

  .hero {
    min-height: 70vh;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .newsletter-strip__inner {
    flex-direction: column;
    text-align: center;
  }

  .newsletter-strip__form {
    flex-direction: column;
  }

  .newsletter-strip__form input {
    min-width: 100%;
  }

  .welcome-prayer-grid {
    grid-template-columns: 1fr !important;
  }

  .welcome-prayer__widget {
    position: static;
  }

  .welcome-prayer__widget .rawdah-widget-container iframe {
    width: 100% !important;
    height: 350px;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-layout__info {
    position: static;
  }

  .accessibility-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .programs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-steps {
    gap: var(--space-md);
  }

  .form-steps::before {
    display: none;
  }

  .quick-actions__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .quick-actions__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .programs-grid {
    grid-template-columns: 1fr;
  }

  .hero__ctas {
    flex-direction: column;
  }

  .hero__ctas .btn {
    width: 100%;
  }

  .zakat-field {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .zakat-field__input input {
    width: 100%;
  }
}

/* ─── Marital Status Radio Group ─── */
.marital-status-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  margin-top: var(--space-sm);
}

.marital-status-options .form-checkbox {
  flex: 0 0 auto;
}

/* ─── About Islam — Five Pillars Grid ─── */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-lg);
}

.pillar-card {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--border-radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  position: relative;
}

.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.pillar-card__number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  margin: 0 auto var(--space-md);
}

.pillar-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.pillar-card__arabic {
  font-family: var(--font-arabic);
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.pillar-card__desc {
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* ─── About Islam — Six Articles of Faith ─── */
.faith-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.faith-article {
  text-align: center;
  padding: var(--space-xl);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-gray-200);
  transition: all var(--transition-base);
}

.faith-article:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.faith-article__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
}

.faith-article h4 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.faith-article p {
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* ─── About Islam — Topic Cards Grid ─── */
.islam-topics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.islam-topic-card {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.islam-topic-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.islam-topic-card.hidden {
  display: none;
}

.islam-topic-card__badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25em 0.75em;
  border-radius: var(--border-radius);
  margin-bottom: var(--space-md);
}

.islam-topic-card__badge--beliefs {
  background: #E8F5E9;
  color: #2E7D32;
}

.islam-topic-card__badge--worship {
  background: #E3F2FD;
  color: #1565C0;
}

.islam-topic-card__badge--character {
  background: #FFF3E0;
  color: #E65100;
}

.islam-topic-card__badge--community {
  background: #F3E5F5;
  color: #7B1FA2;
}

.islam-topic-card__badge--new-muslims {
  background: var(--color-cta-light, #FDE8EF);
  color: var(--color-cta, #B8892D);
}

.islam-topic-card__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.islam-topic-card__desc {
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* Filter buttons active state */
.islam-filter-btn--active {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary) !important;
}

/* ─── About Islam Responsive ─── */
@media (max-width: 1024px) {
  .pillars-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .faith-articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .islam-topics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .faith-articles-grid {
    grid-template-columns: 1fr;
  }

  .islam-topics-grid {
    grid-template-columns: 1fr;
  }

  .marital-status-options {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

@media (max-width: 480px) {
  .pillars-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   ENHANCED STYLES — Professional Polish
   ============================================ */

/* ─── Section Headers (Enhanced) ─── */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-3xl);
}

.section-header__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-cta);
  margin-bottom: var(--space-md);
}

.section-header__label::before,
.section-header__label::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-cta);
}

.section-header__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--color-text);
  margin-bottom: var(--space-md);
  line-height: 1.2;
}

.section--dark .section-header__title,
.stats-section .section-header__title {
  color: var(--color-white);
}

.section--dark .section-header__label,
.stats-section .section-header__label {
  color: var(--color-primary-light);
}

.section--dark .section-header__label::before,
.section--dark .section-header__label::after,
.stats-section .section-header__label::before,
.stats-section .section-header__label::after {
  background: var(--color-primary-light);
}

.section-header__desc {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 0;
}

.section--dark .section-header__desc,
.stats-section .section-header__desc {
  color: var(--color-gray-300);
}

/* ─── Statistics / Counter Section — Warm gold gradient ─── */
.stats-section {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: var(--color-white);
  padding: var(--space-4xl) 0;
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 10L70 40L40 70L10 40z' fill='none' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='40' r='15' fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='0.5'/%3E%3C/svg%3E") repeat;
  pointer-events: none;
}

.stats-section .container {
  position: relative;
  z-index: 1;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  text-align: center;
}

.stat-item {
  position: relative;
  padding: var(--space-lg) 0;
}

.stat-item__number {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--color-cta);
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.stat-item__label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray-300);
}

.stat-item__divider {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--color-gray-700), transparent);
}

.stat-item:last-child .stat-item__divider {
  display: none;
}

/* ─── Service Cards (Enhanced) ─── */
.services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-xl) !important;
}

.service-card {
  background: var(--color-white) !important;
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl) !important;
  border-left: 4px solid var(--color-cta);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  position: relative;
  display: block;
  color: inherit !important;
  text-decoration: none !important;
}

a.service-card,
a.service-card:hover,
a.service-card:visited {
  color: inherit;
  text-decoration: none;
}

.service-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
  border-left-color: var(--color-primary);
}

.service-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-lg);
  transition: all var(--transition-base);
}

.service-card:hover .service-card__icon {
  background: var(--color-cta);
  color: var(--color-white);
}

.service-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.service-card__text {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-cta);
  transition: all var(--transition-fast);
}

.service-card__link::after {
  content: '\2192';
  transition: transform var(--transition-fast);
}

.service-card__link:hover {
  color: var(--color-primary-dark);
}

.service-card__link:hover::after {
  transform: translateX(4px);
}

/* ─── Process / Steps Section ─── */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-xl);
  position: relative;
  counter-reset: process-step;
}

.process-steps::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 64px;
  right: 64px;
  height: 2px;
  background: linear-gradient(to right, var(--color-gray-200), var(--color-cta), var(--color-gray-200));
  z-index: 0;
}

.process-step {
  text-align: center;
  position: relative;
  z-index: 1;
  counter-increment: process-step;
}

.process-step__number {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-white);
  border: 3px solid var(--color-cta);
  color: var(--color-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto var(--space-lg);
  transition: all var(--transition-base);
}

.process-step:hover .process-step__number {
  background: var(--color-cta);
  color: var(--color-white);
}

.process-step__icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
  color: var(--color-primary);
}

.process-step__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.process-step__desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 240px;
  margin: 0 auto;
}

/* ─── Reduced spacing between Services → Stats → Imam ─── */
#services {
  padding-bottom: var(--space-2xl);
}

.section--stats {
  padding-block: var(--space-2xl);
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.section--stats h2,
.section--stats h3,
.section--stats .stat-item__number,
.section--stats .stat-item__plus,
.section--stats .stat-item__label {
  color: var(--color-white) !important;
}

#imam-spotlight {
  padding-top: var(--space-2xl);
}

/* ─── Imam Spotlight (Homepage) ─── */
.imam-spotlight {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-3xl);
  background: var(--color-cream);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl);
  align-items: center;
  overflow: hidden;
}

.imam-spotlight__image {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--color-gray-200);
}

.imam-spotlight__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.imam-spotlight__image:hover img {
  transform: scale(1.03);
}

.imam-spotlight__content {
  padding: var(--space-lg) 0;
}

.imam-spotlight__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-cta);
  margin-bottom: var(--space-sm);
}

.imam-spotlight__name {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.imam-spotlight__role {
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}

.imam-spotlight__bio {
  color: var(--color-text-light);
  line-height: 1.8;
  font-size: 1.0625rem;
  margin-bottom: var(--space-xl);
}

/* ─── Gradient Section Backgrounds ─── */
.section--gradient {
  background: linear-gradient(180deg, var(--color-off-white) 0%, var(--color-cream) 50%, var(--color-off-white) 100%);
}

.section--gradient-dark {
  background: linear-gradient(135deg, var(--color-gray-900) 0%, #2a1f16 50%, var(--color-gray-900) 100%);
  color: var(--color-white);
}

.section--gradient-dark h2,
.section--gradient-dark h3,
.section--gradient-dark h4 {
  color: var(--color-white);
}

/* ─── Card Hover Glow ─── */
.card-hover-glow {
  transition: all var(--transition-base);
}

.card-hover-glow:hover {
  box-shadow: 0 8px 32px rgba(139, 94, 60, 0.18), 0 2px 8px rgba(139, 94, 60, 0.1);
}

/* ─── Divider Ornament ─── */
.divider-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl) 0;
}

.divider-ornament::before,
.divider-ornament::after {
  content: '';
  flex: 1;
  max-width: 200px;
  height: 1px;
  background: linear-gradient(to var(--dir, right), transparent, var(--color-gray-300));
}

.divider-ornament::before {
  --dir: right;
}

.divider-ornament::after {
  --dir: left;
}

.divider-ornament__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cta);
  font-size: 1.125rem;
  /* Uses an inline SVG islamic star pattern or icon */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2L24.5 15.5L38 20L24.5 24.5L20 38L15.5 24.5L2 20L15.5 15.5Z' fill='none' stroke='%23C17A3A' stroke-width='1'/%3E%3C/svg%3E") no-repeat center center;
  background-size: contain;
}

.section--dark .divider-ornament::before,
.section--dark .divider-ornament::after {
  background: linear-gradient(to var(--dir, right), transparent, var(--color-gray-700));
}

/* ─── Hero Ken Burns Animation ─── */
.hero__bg--kenburns img {
  animation: kenburns 25s ease-in-out infinite alternate;
}

@keyframes kenburns {
  0% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(1.08) translateY(-2%);
  }
}

/* ─── Enhanced Button Styles ─── */
.btn--primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  position: relative;
  overflow: hidden;
}

.btn--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition: left 0.5s ease;
}

.btn--primary:hover::before {
  left: 100%;
}

.btn--cta {
  background: linear-gradient(135deg, var(--color-cta), var(--color-cta-hover));
  position: relative;
  overflow: hidden;
}

.btn--cta::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 60%
  );
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

.btn--arrow::after {
  content: '\2192';
  margin-left: var(--space-xs);
  transition: transform var(--transition-fast);
  display: inline-block;
}

.btn--arrow:hover::after {
  transform: translateX(4px);
}

/* ─── Feature List (Checkmark Lists) ─── */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  position: relative;
  padding: var(--space-sm) 0;
  padding-left: calc(var(--space-xl) + var(--space-xs));
  color: var(--color-text-light);
  font-size: 1rem;
  line-height: 1.6;
}

.feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 14.5l-4-4 1.4-1.4L8 11.7l6.6-6.6L16 6.5l-8 8z' fill='white'/%3E%3C/svg%3E");
  background-size: contain;
}

.feature-list--copper li::before {
  background-color: var(--color-cta);
}

/* ─── Emergency Banner ─── */
.emergency-banner {
  background: linear-gradient(135deg, #C62828, #B71C1C);
  color: var(--color-white);
  padding: var(--space-lg) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.emergency-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(255,255,255,0.03) 10px,
    rgba(255,255,255,0.03) 20px
  );
  pointer-events: none;
}

.emergency-banner .container {
  position: relative;
  z-index: 1;
}

.emergency-banner__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-xs);
}

.emergency-banner__text {
  font-size: 1rem;
  opacity: 0.95;
  margin-bottom: var(--space-md);
}

.emergency-banner__phone {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all var(--transition-fast);
}

.emergency-banner__phone:hover {
  background: rgba(255, 255, 255, 0.25);
  color: var(--color-white);
}

/* ─── Quote Block / Testimonial ─── */
.quote-block {
  background: var(--color-cream);
  border-radius: var(--border-radius-xl);
  padding: var(--space-2xl) var(--space-3xl);
  position: relative;
  text-align: center;
  margin: var(--space-2xl) 0;
}

.quote-block::before {
  content: '\201C';
  font-family: var(--font-heading);
  font-size: 6rem;
  line-height: 1;
  color: var(--color-cta);
  opacity: 0.25;
  position: absolute;
  top: var(--space-md);
  left: var(--space-xl);
}

.quote-block__text {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-style: italic;
  color: var(--color-text-light);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
  position: relative;
  z-index: 1;
}

.quote-block__source {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
}

.quote-block__ref {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

.quote-block--dark {
  background: var(--color-gray-900);
}

.quote-block--dark .quote-block__text {
  color: var(--color-gray-200);
}

.quote-block--dark .quote-block__source {
  color: var(--color-primary-light);
}

.quote-block--dark .quote-block__ref {
  color: var(--color-gray-500);
}

/* ─── Scroll Reveal Fade-In ─── */
.reveal-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Subtle Parallax Hero Overlay ─── */
.hero__overlay--parallax {
  transition: transform 0.1s linear;
  will-change: transform;
}

/* ─── Info Cards (general purpose) ─── */
.info-card {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-100);
  transition: all var(--transition-base);
}

.info-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-gray-200);
}

.info-card--accent {
  border-top: 3px solid var(--color-cta);
}

/* ─── Timeline (Vertical, for history/events pages) ─── */
.timeline {
  position: relative;
  padding-left: var(--space-3xl);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-cta), var(--color-primary), var(--color-gray-200));
}

.timeline__item {
  position: relative;
  padding-bottom: var(--space-2xl);
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-3xl) + 9px);
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-white);
  border: 3px solid var(--color-cta);
  z-index: 1;
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__date {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-cta);
  margin-bottom: var(--space-xs);
}

.timeline__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.timeline__desc {
  font-size: 0.9375rem;
  color: var(--color-text-light);
  line-height: 1.7;
}

/* ─── Badge / Tag ─── */
.badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2em 0.65em;
  border-radius: var(--border-radius);
  background: var(--color-cream);
  color: var(--color-primary);
}

.badge--green {
  background: #E8F5E9;
  color: var(--color-green);
}

.badge--copper {
  background: #FDF4DC;
  color: var(--color-cta);
}

/* ─── Text Utilities ─── */
.text-copper { color: var(--color-cta); }
.text-primary { color: var(--color-primary); }
.text-green { color: var(--color-green); }
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.text-heading { font-family: var(--font-heading); }

/* ============================================
   ENHANCED RESPONSIVE — New Components
   ============================================ */

@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .stat-item:nth-child(2) .stat-item__divider {
    display: none;
  }

  .imam-spotlight {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .imam-spotlight__image {
    max-width: 320px;
    margin: 0 auto;
  }

  .process-steps::before {
    display: none;
  }
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr !important;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .stat-item__divider {
    display: none;
  }

  .stat-item {
    padding: var(--space-md) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .stat-item:last-child {
    border-bottom: none;
  }

  .process-steps {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .process-steps::before {
    display: none;
  }

  .quote-block {
    padding: var(--space-xl) var(--space-lg);
  }

  .quote-block::before {
    font-size: 4rem;
    top: var(--space-sm);
    left: var(--space-md);
  }

  .emergency-banner__phone {
    font-size: 1.375rem;
  }
}

/* ─── Back to Top Button ─── */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-base);
  z-index: 99;
}

.back-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ─── Payment Methods Grid (Donate Page) ─── */
.payment-methods-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-xl) !important;
  max-width: 1000px;
  margin: 0 auto;
}

.payment-card {
  background: var(--color-white) !important;
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl) var(--space-xl) !important;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-gray-100);
  border-top: 4px solid var(--color-cta);
  transition: all var(--transition-base);
  display: flex !important;
  flex-direction: column;
  align-items: center;
}

.payment-card:nth-child(2) {
  border-top-color: #2ECC71;
}

.payment-card:nth-child(3) {
  border-top-color: var(--color-primary);
}

.payment-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.payment-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.payment-card__title {
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.payment-card__text {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin-bottom: var(--space-md);
}

.payment-card__detail {
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-cream);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-lg);
  font-family: var(--font-body);
  word-break: break-all;
}

.payment-card__btn {
  margin-top: auto;
  width: 100%;
}

.rawdah-coming-soon svg {
  display: inline-block;
}

@media (max-width: 768px) {
  .payment-methods-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
  }
}

/* ============================================================
   PROGRAMS SECTION (Homepage — age-based program cards)
   ============================================================ */
.programs-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-xl) !important;
}

.program-tile {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.program-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-primary), var(--color-cta));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transition-base);
}

.program-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-light);
}

.program-tile:hover::before {
  transform: scaleY(1);
}

.program-tile__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-cream), var(--color-cream-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-lg);
  transition: all var(--transition-base);
}

.program-tile:hover .program-tile__icon {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  color: var(--color-white);
  transform: scale(1.05);
}

.program-tile__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.program-tile__subtitle {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
}

.program-tile__text {
  color: var(--color-text-light);
  line-height: 1.7;
  font-size: 0.95rem;
  margin-bottom: var(--space-lg);
  flex-grow: 1;
}

.program-tile__link {
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.program-tile__link::after {
  content: '\2192';
  transition: transform var(--transition-fast);
}

.program-tile:hover .program-tile__link::after {
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .programs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .programs-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   APP DOWNLOAD PROMO BANNER
   ============================================================ */
.app-promo {
  background: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-secondary) 60%, var(--color-primary) 100%);
  color: var(--color-white);
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
}

.app-promo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5L55 30L30 55L5 30z' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E") repeat;
  pointer-events: none;
}

.app-promo__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
  position: relative;
  z-index: 1;
}

.app-promo__content {
  flex: 1;
}

.app-promo__content h2 {
  margin-bottom: var(--space-md);
}

.app-promo__content p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.0625rem;
  margin-bottom: var(--space-xl);
  max-width: 540px;
}

.app-promo__visual {
  flex-shrink: 0;
  color: var(--color-white);
}

@media (max-width: 768px) {
  .app-promo__inner {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================================
   RECURRING EVENTS CARDS
   ============================================================ */
.recurring-events__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-lg) !important;
}

.recurring-event-card {
  background: var(--color-white);
  border-left: 4px solid var(--color-cta);
  border-radius: var(--border-radius);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.recurring-event-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.recurring-event-card__day {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-cta);
  background: var(--color-cream);
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  margin-bottom: var(--space-sm);
}

.recurring-event-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.recurring-event-card__detail {
  color: var(--color-text-light);
  font-size: 0.9375rem;
  margin: 0;
}

@media (max-width: 768px) {
  .recurring-events__grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   FOLLOW US / WHATSAPP SECTION
   ============================================================ */
.follow-us-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--space-xl) !important;
  max-width: 900px;
  margin: 0 auto;
}

.follow-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-md);
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: all var(--transition-base);
  border: 2px solid transparent;
}

.follow-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.follow-card--facebook { color: #1877F2; }
.follow-card--facebook:hover { border-color: #1877F2; background: #f0f6ff; }
.follow-card--instagram { color: #E1306C; }
.follow-card--instagram:hover { border-color: #E1306C; background: #fff0f5; }
.follow-card--youtube { color: #FF0000; }
.follow-card--youtube:hover { border-color: #FF0000; background: #fff5f5; }
.follow-card--whatsapp { color: #25D366; }
.follow-card--whatsapp:hover { border-color: #25D366; background: #f0fff4; }

.follow-card__label {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.95rem;
  text-align: center;
}

.whatsapp-consent {
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--space-2xl);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.whatsapp-consent a {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .follow-us-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   VOLUNTEER CTA BLOCK
   ============================================================ */
.volunteer-cta {
  background: linear-gradient(135deg, var(--color-cream), var(--color-cream-dark));
  border-radius: var(--border-radius-xl);
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
}

.volunteer-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--color-primary-light) 0%, transparent 70%);
  opacity: 0.15;
  border-radius: 50%;
  pointer-events: none;
}

.volunteer-cta__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.volunteer-cta__content p {
  color: var(--color-text-light);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

/* ============================================================
   APP DOWNLOAD POP-UP BANNER (top of page)
   ============================================================ */
.app-banner {
  display: block;
  background: linear-gradient(90deg, var(--color-cta) 0%, var(--color-cta-bright) 100%);
  color: var(--color-white);
  padding: 0.7rem 1rem;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 500;
  position: relative;
  z-index: 1001;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: filter var(--transition-fast);
}

.app-banner:hover {
  filter: brightness(1.05);
  color: var(--color-white);
}

.app-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.app-banner__icon {
  display: inline-flex;
  align-items: center;
}

.app-banner__text {
  margin: 0;
}

.app-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.875rem;
  background: var(--color-white);
  color: var(--color-cta-hover);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all var(--transition-fast);
}

.app-banner__cta:hover {
  background: var(--color-text);
  color: var(--color-white);
}

@media (max-width: 640px) {
  .app-banner__inner {
    font-size: 0.85rem;
  }
}

/* ============================================================
   ANNOUNCEMENT BAR (Rawdah CMS strip)
   ============================================================ */
.rawdah-announcement-bar {
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-gray-200);
  position: relative;
  z-index: 999;
}

.rawdah-announcement-bar .rawdah-widget-container,
.rawdah-announcement-bar iframe {
  display: block;
  width: 100%;
}

/* ============================================================
   HERO WITH PRAYER OVERLAY
   ============================================================ */
.hero--with-prayer {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--space-3xl) 0;
}

.hero--with-prayer .hero__grid {
  display: grid !important;
  grid-template-columns: 1fr 460px !important;
  gap: var(--space-3xl) !important;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero--with-prayer .hero__content {
  max-width: 600px;
  justify-self: start;
  text-align: left;
}

/* Override the global gradient-text rule — keep hero heading pure white */
.hero--with-prayer .hero__heading,
.hero.hero--with-prayer h1.hero__heading {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--color-white) !important;
  color: var(--color-white) !important;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: var(--space-md);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.hero--with-prayer .hero__text {
  color: var(--color-white) !important;
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: var(--space-xl);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
  max-width: 540px;
  opacity: 0.95;
}

.hero--with-prayer .hero__ctas {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.hero__prayer-card {
  position: relative;
  width: 100%;
  justify-self: end;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.hero__prayer-card .rawdah-widget-container,
.hero__prayer-card iframe {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
}

@media (max-width: 1024px) {
  .hero--with-prayer .hero__grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-xl) !important;
  }
  .hero--with-prayer .hero__content {
    text-align: center;
    margin: 0 auto;
    justify-self: center;
  }
  .hero--with-prayer .hero__text {
    margin-left: auto;
    margin-right: auto;
  }
  .hero--with-prayer .hero__ctas {
    justify-content: center;
  }
  .hero__prayer-card {
    max-width: 460px;
    margin: 0 auto;
    justify-self: center;
  }
}

/* ============================================================
   WELCOME BLOCK (full-width since prayer moved to hero)
   ============================================================ */
.welcome-block {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.welcome-block__image img {
  width: 100%;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}

@media (max-width: 1024px) {
  .welcome-block {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   STAY CONNECTED (footer-style social grid + WhatsApp CTA)
   ============================================================ */
.stay-connected-grid {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: var(--space-2xl) !important;
  align-items: stretch;
}

.social-cards-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-md) !important;
}

.social-card {
  display: flex !important;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  text-decoration: none;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.social-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.social-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
}

.social-card--facebook .social-card__icon { color: #1877F2; background: #E7F1FE; }
.social-card--instagram .social-card__icon { color: #E1306C; background: #FDEDF3; }
.social-card--youtube .social-card__icon { color: #FF0000; background: #FFEAEA; }
.social-card--whatsapp .social-card__icon { color: #25D366; background: #E6FAEC; }

.social-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.social-card__text strong {
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 700;
}

.social-card__text span {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.whatsapp-cta-card {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.whatsapp-cta-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.whatsapp-cta-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--border-radius);
  background: #E6FAEC;
  color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.whatsapp-cta-card__head h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-text);
}

.whatsapp-cta-card__text {
  color: var(--color-text-light);
  line-height: 1.65;
  margin-bottom: var(--space-xl);
  flex-grow: 1;
}

.whatsapp-cta-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.5rem;
  background: #25D366;
  color: var(--color-white);
  border-radius: var(--border-radius);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.whatsapp-cta-card__button:hover {
  background: #1ebe57;
  color: var(--color-white);
}

.whatsapp-cta-card__consent {
  margin-top: var(--space-lg);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.whatsapp-cta-card__consent a {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .stay-connected-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .social-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   WHATSAPP COMMUNITY PAGE
   ============================================================ */
.whatsapp-page-banner {
  background: var(--color-cream-dark);
  text-align: center;
  padding: var(--space-3xl) 0;
}

.whatsapp-page-banner__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-secondary-dark);
  margin: 0;
}

.whatsapp-page-body {
  background: var(--color-cream);
}

.whatsapp-page-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.05fr !important;
  gap: var(--space-3xl) !important;
  align-items: start;
}

.whatsapp-page__intro {
  text-align: left;
}

.whatsapp-page__logo {
  text-align: center;
  margin-bottom: var(--space-xl);
  animation: wa-float 4s ease-in-out infinite;
}

@keyframes wa-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.whatsapp-page__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-secondary-dark);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-lg);
}

.whatsapp-page__lead {
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

.whatsapp-page__benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.whatsapp-page__benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--color-text);
  font-size: 1rem;
}

.whatsapp-page__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--color-cta);
  font-weight: 700;
  font-size: 1.1rem;
}

.whatsapp-page__form {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-md);
}

.whatsapp-page__form-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-secondary-dark);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-xl);
}

.whatsapp-page__form input[type="text"],
.whatsapp-page__form input[type="email"],
.whatsapp-page__form textarea {
  background: var(--color-cream-dark);
  border: 1px solid transparent;
}

.whatsapp-page__form input[type="text"]:focus,
.whatsapp-page__form input[type="email"]:focus,
.whatsapp-page__form textarea:focus {
  border-color: var(--color-primary);
  background: var(--color-white);
}

.whatsapp-page__consent-note {
  margin-top: var(--space-lg);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.whatsapp-page__consent-note a {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

.whatsapp-page__send {
  min-width: 180px;
  background: var(--color-secondary-dark);
  color: var(--color-white);
  border-radius: 999px;
  padding: 0.85rem 2.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.whatsapp-page__send:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

.form-checkbox {
  margin: var(--space-md) 0;
}

@media (max-width: 1024px) {
  .whatsapp-page-grid {
    grid-template-columns: 1fr !important;
  }
  .whatsapp-page__intro {
    text-align: center;
  }
  .whatsapp-page__benefits li {
    justify-content: center;
  }
}

/* ============================================================
   RAWDAH SLIDES SECTION (Homepage rotating announcements)
   ============================================================ */
.section--slides {
  padding-block: var(--space-2xl);
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-cream) 100%);
  position: relative;
}

.section--slides .rawdah-widget-container {
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-white);
}

.section--slides .rawdah-widget-container iframe {
  border-radius: var(--border-radius-xl);
}

/* ============================================================
   WATCH & FOLLOW (Homepage media section)
   ============================================================ */
.media-grid {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr !important;
  gap: var(--space-2xl) !important;
  align-items: start;
}

.video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  background: var(--color-gray-200);
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.instagram-callout {
  background: linear-gradient(135deg, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  padding: 4px;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
}

.instagram-callout > * {
  background: var(--color-white);
}

.instagram-callout__icon {
  background: linear-gradient(135deg, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  padding: var(--space-xl) 0 var(--space-md);
  margin: 0;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.instagram-callout__handle {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
  padding: 0 var(--space-lg);
}

.instagram-callout__text {
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 auto var(--space-lg);
  padding: 0 var(--space-lg);
  max-width: 320px;
}

.instagram-callout .btn {
  display: block;
  width: calc(100% - 3rem);
  margin: 0 auto var(--space-lg);
  text-align: center;
  background: linear-gradient(135deg, #fd5949 0%, #d6249f 60%, #285AEB 100%);
  color: var(--color-white);
  border: none;
}

.instagram-callout .btn:hover {
  opacity: 0.92;
  background: linear-gradient(135deg, #fd5949 0%, #d6249f 60%, #285AEB 100%);
  color: var(--color-white);
}

.instagram-callout__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
  overflow: hidden;
  padding: 0 4px 4px;
}

.instagram-tile {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--color-cream-dark), var(--color-primary-light));
  position: relative;
  overflow: hidden;
  display: block;
  transition: opacity var(--transition-base);
}

.instagram-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E") center/40px no-repeat;
  opacity: 0.6;
  transition: opacity var(--transition-base);
}

.instagram-tile:nth-child(2) { background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary)); }
.instagram-tile:nth-child(3) { background: linear-gradient(135deg, var(--color-cta), var(--color-primary)); }
.instagram-tile:nth-child(4) { background: linear-gradient(135deg, var(--color-secondary), var(--color-primary-dark)); }
.instagram-tile:nth-child(5) { background: linear-gradient(135deg, var(--color-primary), var(--color-cta-bright)); }
.instagram-tile:nth-child(6) { background: linear-gradient(135deg, var(--color-secondary-light), var(--color-cream-dark)); }

.instagram-tile:hover {
  opacity: 0.85;
}

.instagram-tile:hover::before {
  opacity: 1;
}

@media (max-width: 1024px) {
  .media-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   REVISION v1.1 — Plano Masjid–inspired minimal palette
   ============================================================ */

/* Subtle Islamic 8-point star pattern overlay — applied to alternating sections */
.section--patterned {
  position: relative;
  isolation: isolate;
}
.section--patterned::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' width='120' height='120'><g fill='none' stroke='%231B3D26' stroke-width='1.2'><path d='M60 5 L82 38 L115 38 L88 60 L98 95 L60 75 L22 95 L32 60 L5 38 L38 38 Z'/><circle cx='60' cy='60' r='22'/><path d='M60 38 L75 60 L60 82 L45 60 Z'/></g></svg>");
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* Section heading helper — small label + serif heading + thin divider */
.section-heading {
  text-align: center;
  margin-bottom: var(--space-2xl);
}
.section-heading__label {
  display: inline-block;
  color: var(--color-primary);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: var(--space-sm);
}
.section-heading__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.15;
  margin: 0 0 var(--space-md);
}
.section-heading__divider {
  width: 56px;
  height: 2px;
  background: var(--color-primary-light);
  margin: var(--space-md) auto;
  border-radius: 2px;
}
.section-heading__subtitle {
  color: var(--color-text-light);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto;
}

/* Rawdah widget — feels like a native page card */
.rawdah-widget-container {
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(62, 44, 28, 0.04), 0 8px 28px rgba(62, 44, 28, 0.06);
  overflow: hidden;
  width: 100%;
}
.rawdah-widget-container iframe {
  display: block;
  border: none;
  width: 100%;
}

/* Buttons — green primary, brown text */
.btn--cta,
.btn--primary {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-primary) !important;
}
.btn--cta:hover,
.btn--primary:hover {
  background: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
}
.btn--outline {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-primary) !important;
}
.btn--outline:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.btn--white {
  background: var(--color-white) !important;
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-white) !important;
}
.btn--white:hover {
  background: transparent !important;
  color: var(--color-white) !important;
  border-color: var(--color-white) !important;
}

/* Header — clean white */
.site-header {
  background: var(--color-white) !important;
  border-bottom: 1px solid var(--color-border-light);
  box-shadow: 0 1px 0 rgba(62, 44, 28, 0.03);
}
.mega-menu__link {
  color: var(--color-text) !important;
  font-weight: 500;
}
.mega-menu__link:hover {
  color: var(--color-primary) !important;
}

/* Top bar — cream to match nav header */
.top-bar {
  background: var(--color-cream) !important;
  color: var(--color-brown) !important;
  border-bottom: 1px solid var(--color-border-light);
}
.top-bar__left a,
.top-bar__right a {
  color: var(--color-brown) !important;
}
.top-bar__left a:hover,
.top-bar__right a:hover {
  color: var(--color-primary) !important;
}

/* Top bar social icons — better spacing */
.top-bar__social {
  display: flex !important;
  gap: 0.85rem !important;
}
.top-bar__social a {
  color: var(--color-brown) !important;
  transition: color var(--transition-fast);
}
.top-bar__social a:hover {
  color: var(--color-primary) !important;
  background: transparent !important;
}

/* Header — confirm cream feel and green nav hover */
.site-header {
  background: var(--color-white) !important;
  border-bottom: 1px solid var(--color-border-light);
}

/* Nav links — green accent on hover */
.mega-menu__link {
  color: var(--color-brown) !important;
  font-weight: 500;
  position: relative;
  padding-bottom: 4px;
}
.mega-menu__link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--transition-base), left var(--transition-base);
}
.mega-menu__link:hover {
  color: var(--color-primary) !important;
}
.mega-menu__link:hover::after {
  width: 100%;
  left: 0;
}

/* Donate nav button — solid green pill */
.mega-menu__donate-btn .btn--cta {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-radius: 999px !important;
  padding: 0.5rem 1.25rem !important;
}
.mega-menu__donate-btn .btn--cta:hover {
  background: var(--color-primary-dark) !important;
}

/* App banner — green gradient (was orange) */
.app-banner {
  background: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary) 100%) !important;
  color: var(--color-white) !important;
}
.app-banner__cta {
  background: var(--color-white) !important;
  color: var(--color-primary-dark) !important;
}
.app-banner__cta:hover {
  background: var(--color-cream) !important;
  color: var(--color-primary-dark) !important;
}

/* Donation CTA — dark green (was warm brown gradient) */
.donation-cta {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%) !important;
  color: var(--color-white) !important;
}
.donation-cta h2,
.donation-cta__label,
.donation-cta__verse,
.donation-cta__ref {
  color: var(--color-white) !important;
  -webkit-text-fill-color: var(--color-white) !important;
}

/* Footer — cream with brown text */
.site-footer {
  background: var(--color-cream) !important;
  color: var(--color-brown) !important;
  border-top: 4px solid var(--color-brown);
}
.site-footer h4 {
  color: var(--color-brown) !important;
}
.site-footer ul a,
.site-footer .footer-contact-info p,
.site-footer .footer-contact-info p a,
.site-footer__brand p {
  color: var(--color-brown-light) !important;
}
.site-footer ul a:hover,
.site-footer .footer-contact-info p a:hover {
  color: var(--color-primary) !important;
}
.site-footer .footer-bottom {
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-brown-light) !important;
}
.site-footer .footer-bottom a {
  color: var(--color-primary) !important;
}
.site-footer .footer-bottom a:hover {
  color: var(--color-primary-dark) !important;
}

/* Newsletter strip — cream with brown text (was green) */
.newsletter-strip {
  background: var(--color-cream-dark) !important;
  color: var(--color-brown) !important;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.newsletter-strip h3,
.newsletter-strip p {
  color: var(--color-brown) !important;
}
.newsletter-strip__form input {
  background: var(--color-white) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}
.newsletter-strip__form button {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.newsletter-strip__form button:hover {
  background: var(--color-primary-dark) !important;
}

/* Footer social icons — recolor for cream background */
.site-footer__social a,
.site-footer .social-icon {
  background: var(--color-white) !important;
  color: var(--color-brown) !important;
  border: 1px solid var(--color-border);
}
.site-footer__social a:hover,
.site-footer .social-icon:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary) !important;
}
.site-footer h4 {
  color: var(--color-white) !important;
}
.site-footer ul a,
.site-footer__brand p,
.footer-contact-info p,
.footer-contact-info p a {
  color: rgba(255, 255, 255, 0.85) !important;
}
.site-footer ul a:hover,
.footer-contact-info p a:hover {
  color: var(--color-white) !important;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}
.footer-bottom a {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Stats section — also green */
.section--stats,
.stats-section {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%) !important;
}

/* Section label uses green */
.section-label {
  color: var(--color-primary) !important;
}

/* Program tile photo + icon badge style (Plano Masjid inspiration) */
.program-tile {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.program-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(62, 44, 28, 0.1);
  border-color: var(--color-primary-lighter);
}
.program-tile__photo {
  display: block;
  width: 100%;
  height: 220px;
  background: var(--color-cream);
  position: relative;
  overflow: hidden;
}
.program-tile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.program-tile:hover .program-tile__photo img {
  transform: scale(1.05);
}
.program-tile__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  background: var(--color-white);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.program-tile__body {
  padding: var(--space-xl);
}
.program-tile__title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
  font-weight: 700;
}
.program-tile__text {
  color: var(--color-text-light);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: var(--space-md);
}
.program-tile__link {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.program-tile__link::after {
  content: '→';
  transition: transform var(--transition-fast);
}
.program-tile:hover .program-tile__link::after {
  transform: translateX(4px);
}

/* Welcome split-layout polish */
.welcome-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--space-3xl) !important;
  align-items: center;
}
.welcome-split__image {
  border: 6px solid var(--color-white);
  box-shadow: 0 8px 30px rgba(62, 44, 28, 0.1);
  border-radius: 4px;
  overflow: hidden;
}
.welcome-split__image img {
  display: block;
  width: 100%;
  height: auto;
}
.welcome-split__content h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
@media (max-width: 768px) {
  .welcome-split {
    grid-template-columns: 1fr !important;
  }
}

/* Hero — Mosque photo background with prayer card on right (absolute positioning) */
.hero.hero--photo {
  position: relative;
  min-height: 600px;
  height: auto;
  display: block;
  overflow: hidden;
  padding: 0;
}
.hero--photo .hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero--photo .hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero--photo .hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(27, 61, 38, 0.85) 0%,
    rgba(31, 22, 16, 0.65) 50%,
    rgba(62, 44, 28, 0.55) 100%
  );
  z-index: 1;
}
.hero--photo .hero__inner {
  position: relative;
  z-index: 2;
  display: block !important;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4xl) var(--space-lg);
  min-height: 600px;
}
.hero--photo .hero__content {
  position: relative;
  z-index: 2;
  max-width: 580px;
  text-align: left;
}
.hero--photo .hero__heading,
.hero.hero--photo h1 {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--color-white) !important;
  color: var(--color-white) !important;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.8vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--space-md);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.hero--photo .hero__text {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: var(--space-xl);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.hero--photo .hero__ctas {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.hero--photo .hero__prayer {
  position: absolute;
  top: 50%;
  right: var(--space-lg);
  transform: translateY(-50%);
  width: 420px;
  max-width: 420px;
  z-index: 3;
}
.hero--photo .hero__prayer .rawdah-widget-container {
  width: 420px !important;
  max-width: 420px !important;
}
.hero--photo .hero__prayer iframe {
  width: 100% !important;
  max-width: 420px !important;
}

/* Tablet — prayer card scales down */
@media (max-width: 1100px) {
  .hero--photo .hero__prayer {
    width: 360px;
    max-width: 360px;
  }
  .hero--photo .hero__prayer .rawdah-widget-container {
    width: 360px !important;
    max-width: 360px !important;
  }
}

/* Mobile — prayer card stacks below */
@media (max-width: 880px) {
  .hero--photo .hero__inner {
    padding: var(--space-2xl) var(--space-lg);
    min-height: 0;
  }
  .hero--photo .hero__content {
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
  }
  .hero--photo .hero__ctas {
    justify-content: center;
  }
  .hero--photo .hero__prayer {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: 460px;
    margin: var(--space-2xl) auto 0;
  }
  .hero--photo .hero__prayer .rawdah-widget-container,
  .hero--photo .hero__prayer iframe {
    width: 100% !important;
    max-width: 460px !important;
  }
}

/* Quranic verse strip / cards that used gold backgrounds — neutral now */
.imam-spotlight,
.section--cream {
  background: var(--color-cream) !important;
}
.section--cream-light {
  background: var(--color-off-white) !important;
}

/* Service card colors update */
.service-card__icon {
  background: var(--color-primary-lighter) !important;
  color: var(--color-primary) !important;
}
.service-card:hover .service-card__icon {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

/* Volunteer CTA — green tint instead of gold */
.volunteer-cta {
  background: linear-gradient(135deg, var(--color-primary-lighter), var(--color-cream)) !important;
}

/* Follow-card hover borders keep brand colors of each platform — leave as is */

/* Page hero (inner pages) — dark green tint */
.page-hero--image::before {
  background: linear-gradient(135deg, rgba(27, 61, 38, 0.7), rgba(62, 44, 28, 0.55)) !important;
}
.page-hero--dark {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%) !important;
}

/* WhatsApp page banner */
.whatsapp-page-banner__title {
  color: var(--color-heading) !important;
}
.whatsapp-page__heading,
.whatsapp-page__form-heading {
  color: var(--color-heading) !important;
}
.whatsapp-page__send {
  background: var(--color-primary) !important;
}
.whatsapp-page__send:hover {
  background: var(--color-primary-dark) !important;
}

/* Programs grid uses 3 columns by default now (Plano Masjid style) */
.programs-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-xl) !important;
}
@media (max-width: 1024px) {
  .programs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .programs-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   POLISH PASS — widget native feel + spacing
   ============================================================ */

/* Widget container — soft white card with brown top accent + green shadow */
.rawdah-widget-container {
  background: var(--color-white);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(62, 44, 28, 0.05),
    0 8px 24px rgba(62, 44, 28, 0.07),
    0 24px 48px -18px rgba(62, 44, 28, 0.08);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  border-top: 3px solid var(--color-primary);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  position: relative;
}
.rawdah-widget-container:hover {
  box-shadow:
    0 2px 4px rgba(62, 44, 28, 0.06),
    0 12px 28px rgba(62, 44, 28, 0.09),
    0 36px 56px -22px rgba(62, 44, 28, 0.1);
}

/* Announcement bar — flat strip, no card chrome */
.rawdah-announcement-bar .rawdah-widget-container {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Hero prayer card — tighter shadow on light bg */
.hero__prayer .rawdah-widget-container {
  border-radius: 18px;
  box-shadow:
    0 2px 4px rgba(27, 61, 38, 0.06),
    0 16px 40px rgba(27, 61, 38, 0.1),
    0 32px 64px -24px rgba(27, 61, 38, 0.12);
}

/* Slides widget — flat, no card chrome */
.section--slides .rawdah-widget-container {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 12px;
}

/* Hero — soft gradient background with subtle pattern overlay */
.hero--lite {
  background-image:
    radial-gradient(circle at 15% 15%, rgba(46, 95, 60, 0.05), transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(74, 140, 94, 0.04), transparent 50%),
    linear-gradient(180deg, var(--color-off-white) 0%, var(--color-cream) 100%);
}

/* Section heading divider — warm brown accent */
.section-heading__divider {
  background: linear-gradient(90deg, transparent, var(--color-brown-light), transparent);
  height: 2px;
  width: 80px;
}

/* Programs grid — better card hover shadow */
.program-tile {
  box-shadow: 0 1px 2px rgba(27, 61, 38, 0.04);
}
.program-tile:hover {
  box-shadow:
    0 4px 12px rgba(27, 61, 38, 0.08),
    0 20px 32px -16px rgba(27, 61, 38, 0.12);
}

/* Service card refinement */
.service-card {
  background: var(--color-white) !important;
  border: 1px solid var(--color-border-light) !important;
  box-shadow: 0 1px 2px rgba(27, 61, 38, 0.04);
}
.service-card:hover {
  border-color: var(--color-primary-lighter) !important;
  box-shadow:
    0 4px 12px rgba(27, 61, 38, 0.08),
    0 20px 32px -16px rgba(27, 61, 38, 0.1);
}
.service-card__link {
  color: var(--color-primary) !important;
}

/* Imam spotlight — clean white card */
.imam-spotlight {
  background: var(--color-white) !important;
  border-radius: 16px;
  padding: var(--space-2xl);
  border: 1px solid var(--color-border-light);
}
.imam-spotlight__role {
  color: var(--color-primary) !important;
}

/* Follow card baseline */
.follow-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Section padding — slightly tighter */
.section {
  padding-block: var(--space-3xl);
}
@media (min-width: 1024px) {
  .section {
    padding-block: 5rem;
  }
}

/* Cream alternating sections */
.section--cream {
  background: var(--color-cream) !important;
}

/* ============================================================
   BROWN VISUAL PRESENCE — borders, accents, frames
   ============================================================ */

/* Imam spotlight — brown left accent */
.imam-spotlight {
  border-left: 4px solid var(--color-brown) !important;
  border-right: 1px solid var(--color-border-light) !important;
  border-top: 1px solid var(--color-border-light) !important;
  border-bottom: 1px solid var(--color-border-light) !important;
}

/* Program tiles — brown bottom accent */
.program-tile {
  border: 1px solid var(--color-border-light) !important;
  border-bottom: 3px solid var(--color-brown-light) !important;
}
.program-tile:hover {
  border-bottom-color: var(--color-brown) !important;
}
.program-tile__title {
  color: var(--color-brown) !important;
}

/* Service cards — brown left accent on hover */
.service-card {
  border-left: 3px solid transparent !important;
}
.service-card:hover {
  border-left-color: var(--color-brown) !important;
}
.service-card__title {
  color: var(--color-brown) !important;
}

/* Welcome split image — brown frame outline */
.welcome-split__image {
  border: 6px solid var(--color-white) !important;
  outline: 1px solid var(--color-brown-light);
  outline-offset: 0;
  position: relative;
}

/* Section heading dividers — solid brown bar */
.section-heading__divider {
  background: var(--color-brown) !important;
  height: 2px;
  width: 60px;
  border-radius: 2px;
}

/* Section labels — warm brown (was teal/green) */
.section-heading__label,
.section-label {
  color: var(--color-brown) !important;
  font-weight: 600 !important;
}

/* Sub-headings (h3, h4, h5) — all dark brown */
h3, h4, h5 {
  color: var(--color-brown) !important;
}

/* Footer + Donation CTA — brown top accent stripe */
.site-footer {
  border-top: 4px solid var(--color-brown) !important;
}
.donation-cta {
  border-top: 4px solid var(--color-brown);
}

/* Imam bio — brown left rule */
.imam-spotlight__bio {
  border-left: 3px solid var(--color-brown-light);
  padding-left: var(--space-lg);
  color: var(--color-text-light) !important;
}

/* Form labels — brown */
label,
.form-group label {
  color: var(--color-brown) !important;
  font-weight: 600 !important;
}

/* Widget container — confirm brown top stripe (was green earlier) for consistency with brown accent system */
.rawdah-widget-container {
  border-top: 3px solid var(--color-brown) !important;
}
.hero--photo .hero__prayer .rawdah-widget-container {
  border-top: 3px solid var(--color-primary) !important;
}

/* ============================================================
   FINAL POLISH PASS
   ============================================================ */

/* Widget — more rounded corners, no iframe scroll */
.rawdah-widget-container {
  border-radius: 20px !important;
  overflow: hidden !important;
}
.rawdah-widget-container iframe {
  border-radius: 18px !important;
  overflow: hidden !important;
  display: block !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rawdah-widget-container iframe::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Prayer Times own-section styling */
.section--prayer {
  background: var(--color-off-white);
  padding-block: var(--space-3xl);
}

/* Footer social icons — better spacing */
.site-footer__social,
.site-footer .social-icon {
  /* container */
}
.site-footer__brand .site-footer__social {
  display: flex !important;
  gap: 1rem !important;
  margin-top: var(--space-md);
}
.site-footer__social a,
.site-footer .social-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--color-white) !important;
  transition: background var(--transition-fast), transform var(--transition-fast) !important;
}
.site-footer__social a:hover,
.site-footer .social-icon:hover {
  background: var(--color-primary) !important;
  transform: translateY(-2px);
}

/* "Become a Sustainer" button — solid green pill with white text on the dark green CTA */
.btn--sustainer {
  background: var(--color-primary-light) !important;
  color: var(--color-white) !important;
  border: 2px solid var(--color-primary-light) !important;
  transition: all var(--transition-fast) !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.btn--sustainer:hover {
  background: var(--color-white) !important;
  color: var(--color-primary-dark) !important;
  border-color: var(--color-white) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Donation CTA buttons — better gap */
.donation-cta__buttons {
  display: flex !important;
  gap: var(--space-md) !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-top: var(--space-xl);
}

/* Program tile icon-only photo (for Shahada/Marriage/Funeral cards w/o photo) */
.program-tile__photo--icon {
  background: linear-gradient(135deg, var(--color-cream), var(--color-cream-dark)) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.program-tile__photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brown-light);
  opacity: 0.6;
}

/* Footer bottom border green (or remove it if too busy) */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* ============================================================
   PRAYER-7 widget — taller height on mobile (needs to show Jumu'ah too)
   ============================================================ */
@media (max-width: 1024px) {
  
}
@media (max-width: 768px) {
  
}
@media (max-width: 480px) {
  
}

/* ============================================================
   FORCE FOOTER CREAM — high specificity overrides
   ============================================================ */
body .site-footer,
html body footer.site-footer,
.site-footer[role="contentinfo"] {
  background: var(--color-cream) !important;
  background-color: var(--color-cream) !important;
  background-image: none !important;
  color: var(--color-brown) !important;
  border-top: 4px solid var(--color-brown) !important;
}
body .site-footer h4,
body .site-footer .site-footer__links h4,
html body footer.site-footer h4 {
  color: var(--color-brown) !important;
}
body .site-footer ul a,
body .site-footer .footer-contact-info p,
body .site-footer .footer-contact-info p a,
body .site-footer .footer-contact-info a,
body .site-footer__brand p,
html body footer.site-footer ul a {
  color: var(--color-brown-light) !important;
}
body .site-footer ul a:hover,
body .site-footer .footer-contact-info p a:hover,
html body footer.site-footer ul a:hover {
  color: var(--color-primary) !important;
}
body .site-footer .footer-bottom,
html body footer.site-footer .footer-bottom {
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-brown-light) !important;
}
body .site-footer .footer-bottom a,
html body footer.site-footer .footer-bottom a {
  color: var(--color-primary) !important;
}

/* Newsletter strip — force cream too */
body .newsletter-strip,
html body section.newsletter-strip {
  background: var(--color-cream-dark) !important;
  background-color: var(--color-cream-dark) !important;
  background-image: none !important;
  color: var(--color-brown) !important;
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
body .newsletter-strip h3,
body .newsletter-strip p {
  color: var(--color-brown) !important;
}
body .newsletter-strip__form input {
  background: var(--color-white) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}
body .newsletter-strip__form button {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

/* Footer social icons — for the cream background */
body .site-footer__social a,
body .site-footer .social-icon {
  background: var(--color-white) !important;
  color: var(--color-brown) !important;
  border: 1px solid var(--color-border) !important;
}
body .site-footer__social a:hover,
body .site-footer .social-icon:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary) !important;
}

/* ============================================================
   MOBILE RESPONSIVENESS SWEEP (≤768px and ≤480px)
   ============================================================ */

/* Prevent horizontal scroll on any page */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
* {
  max-width: 100%;
}
img, iframe, video, table {
  max-width: 100%;
  height: auto;
}
iframe {
  width: 100%;
}

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .container,
  .section > .container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .section {
    padding-block: 3rem !important;
  }
  .section-heading__title,
  section h2 {
    font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
  }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
  /* Container padding */
  .container,
  .section > .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .section {
    padding-block: 2.5rem !important;
  }

  /* Header — logo + hamburger alignment */
  .site-header,
  .site-header .container,
  .site-header__inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .site-header__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    min-height: 64px !important;
  }
  .site-header__logo {
    flex-shrink: 1;
    max-width: 60%;
  }
  .site-header__logo img,
  .site-header__logo-link img {
    max-height: 48px !important;
    width: auto !important;
  }
  .nav-toggle,
  .mobile-menu-toggle {
    flex-shrink: 0;
    margin-left: auto;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Top bar — compact, centered, no overflow */
  .top-bar {
    padding: 0.5rem 1rem !important;
  }
  .top-bar__inner {
    flex-direction: column !important;
    gap: 0.4rem !important;
    text-align: center;
  }
  .top-bar__left,
  .top-bar__right {
    gap: 0.75rem !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Hero (photo background variant) */
  .hero--photo {
    min-height: 480px !important;
  }
  .hero--photo .hero__inner {
    padding: 2rem 1rem !important;
    text-align: center;
  }
  .hero--photo .hero__content {
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }
  .hero--photo .hero__heading {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    margin-bottom: 0.75rem !important;
  }
  .hero--photo .hero__text {
    font-size: 0.9375rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero--photo .hero__ctas {
    justify-content: center !important;
    gap: 0.75rem !important;
  }
  .hero__prayer {
    display: none !important;
  }

  /* Section headings */
  .section-heading {
    margin-bottom: 1.5rem !important;
  }
  .section-heading__title {
    font-size: 1.6rem !important;
  }
  .section-heading__subtitle {
    font-size: 0.95rem !important;
  }

  /* Programs grid → single column */
  .programs-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .program-tile__photo {
    height: 200px !important;
  }
  .program-tile__body {
    padding: 1.25rem !important;
  }
  .program-tile__title {
    font-size: 1.2rem !important;
  }

  /* Services grid → single column */
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .service-card {
    padding: 1.25rem !important;
  }
  .service-card__title {
    font-size: 1.1rem !important;
  }

  /* Imam spotlight → single column */
  .imam-spotlight {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 1.5rem !important;
    text-align: center;
  }
  .imam-spotlight__visual img {
    max-height: 320px !important;
  }

  /* Follow us — wrap nicely */
  .follow-us-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    max-width: 100% !important;
  }
  .follow-card {
    padding: 1.25rem 0.5rem !important;
  }
  .follow-card__label {
    font-size: 0.85rem !important;
  }

  /* Volunteer CTA */
  .volunteer-cta {
    padding: 2rem 1.25rem !important;
  }
  .volunteer-cta h2 {
    font-size: 1.5rem !important;
  }

  /* Donation CTA */
  .donation-cta {
    padding: 2.5rem 1rem !important;
  }
  .donation-cta__verse {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  .donation-cta__buttons {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .donation-cta__buttons .btn {
    width: 100% !important;
  }

  /* Footer */
  .site-footer {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .site-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center !important;
  }
  .site-footer__brand {
    align-items: center !important;
  }
  .site-footer__social {
    justify-content: center !important;
  }
  .site-footer h4 {
    margin-bottom: 0.75rem !important;
  }

  /* Newsletter strip */
  .newsletter-strip__inner {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
  }
  .newsletter-strip__form {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }
  .newsletter-strip__form input,
  .newsletter-strip__form button {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* App banner */
  .app-banner__inner {
    flex-wrap: wrap !important;
    font-size: 0.8rem !important;
    gap: 0.5rem !important;
  }

  /* Welcome split (if shown) */
  .welcome-split {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    text-align: center;
  }

  /* Buttons — full width on mobile + tap target */
  .btn--lg {
    padding: 0.875rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
  }
  .btn {
    min-height: 44px !important;
  }

  /* All form inputs */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important;
    padding: 0.75rem !important;
    width: 100% !important;
  }

  /* Body text minimum 16px */
  body, p {
    font-size: 16px !important;
  }

  /* Reduce overlay opacity slightly on mobile for readability */
  .hero--photo .hero__overlay {
    background: linear-gradient(180deg, rgba(0,48,42,0.78) 0%, rgba(19,74,67,0.7) 50%, rgba(19,74,67,0.6) 100%) !important;
  }
}

/* Small mobile (≤480px) */
@media (max-width: 480px) {
  .hero--photo {
    min-height: 420px !important;
  }
  .hero--photo .hero__heading {
    font-size: clamp(1.5rem, 8vw, 2rem) !important;
  }
  .program-tile__photo {
    height: 180px !important;
  }
  .program-tile__body {
    padding: 1rem !important;
  }
  .follow-us-grid {
    grid-template-columns: 1fr !important;
  }
  .top-bar {
    font-size: 0.75rem !important;
  }
  .site-footer__grid {
    gap: 1.5rem !important;
  }
}

/* ============================================================
   v1.3 - Match real icosf.org (gold + brown + cream)
   ============================================================ */

/* Prayer section - reduce extra padding below widget */
.section--prayer {
  padding-block: var(--space-2xl) !important;
  background: var(--color-off-white) !important;
}
.section--prayer .reveal {
  margin-bottom: 0 !important;
}

/* Top bar - warm gold (matches icosf.org top bar) */
body .top-bar,
html body .top-bar {
  background: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-bottom: none !important;
}
body .top-bar a,
body .top-bar__left a,
body .top-bar__right a {
  color: var(--color-white) !important;
}

/* Header - white/cream */
body .site-header,
html body .site-header {
  background: var(--color-white) !important;
  border-bottom: 1px solid var(--color-border-light) !important;
}

/* Nav - brown text, gold accent on hover */
body .mega-menu__link {
  color: var(--color-brown) !important;
  font-weight: 500;
}
body .mega-menu__link:hover,
body .mega-menu__link.active {
  color: var(--color-primary) !important;
}
body .mega-menu__link::after {
  background: var(--color-primary) !important;
}

/* Donate nav button - gold pill */
body .mega-menu__donate-btn .btn--cta {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}
body .mega-menu__donate-btn .btn--cta:hover {
  background: var(--color-primary-dark) !important;
}

/* CTA buttons - gold */
body .btn--cta,
body .btn--primary {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary) !important;
}
body .btn--cta:hover,
body .btn--primary:hover {
  background: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
}

/* Outline buttons - brown border */
body .btn--outline {
  background: transparent !important;
  color: var(--color-brown) !important;
  border: 1.5px solid var(--color-brown) !important;
}
body .btn--outline:hover {
  background: var(--color-brown) !important;
  color: var(--color-white) !important;
}

/* Section heading dividers - gold */
body .section-heading__divider {
  background: var(--color-primary) !important;
}
body .section-heading__label,
body .section-label {
  color: var(--color-primary-dark) !important;
}

/* Program tile badge - gold */
body .program-tile__badge {
  color: var(--color-primary-dark) !important;
}
body .program-tile__title {
  color: var(--color-brown) !important;
}
body .program-tile__link {
  color: var(--color-primary-dark) !important;
}
body .program-tile {
  border-bottom-color: var(--color-primary-light) !important;
}
body .program-tile:hover {
  border-bottom-color: var(--color-primary) !important;
}

/* Service cards - gold accent */
body .service-card__icon {
  background: var(--color-primary-lighter) !important;
  color: var(--color-primary-dark) !important;
}
body .service-card:hover .service-card__icon {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}
body .service-card:hover {
  border-left-color: var(--color-primary) !important;
}
body .service-card__title {
  color: var(--color-brown) !important;
}
body .service-card__link {
  color: var(--color-primary-dark) !important;
}

/* Imam spotlight - brown accent */
body .imam-spotlight {
  border-left-color: var(--color-primary) !important;
}
body .imam-spotlight__role {
  color: var(--color-primary-dark) !important;
}

/* Donation CTA - brown background (was teal-green) */
body .donation-cta,
html body section.donation-cta {
  background: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-secondary) 100%) !important;
  border-top: 4px solid var(--color-primary) !important;
}
body .donation-cta h2,
body .donation-cta__label,
body .donation-cta__verse,
body .donation-cta__ref {
  color: var(--color-white) !important;
  -webkit-text-fill-color: var(--color-white) !important;
}

/* Sustainer button - gold pill on brown CTA */
body .btn--sustainer {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border: 2px solid var(--color-primary) !important;
}
body .btn--sustainer:hover {
  background: var(--color-white) !important;
  color: var(--color-primary-dark) !important;
  border-color: var(--color-white) !important;
}

/* App banner - gold gradient (matches top bar) */
body .app-banner {
  background: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary) 100%) !important;
  color: var(--color-white) !important;
}
body .app-banner__cta {
  background: var(--color-white) !important;
  color: var(--color-primary-dark) !important;
}

/* Stats section */
body .section--stats,
body .stats-section {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%) !important;
}

/* Footer - cream with brown text (kept) */
body .site-footer {
  background: var(--color-cream) !important;
  color: var(--color-brown) !important;
  border-top: 4px solid var(--color-primary) !important;
}

/* Newsletter strip - cream */
body .newsletter-strip {
  background: var(--color-cream-dark) !important;
}
body .newsletter-strip__form button {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}
body .newsletter-strip__form button:hover {
  background: var(--color-primary-dark) !important;
}

/* Volunteer CTA - cream gold tint */
body .volunteer-cta {
  background: linear-gradient(135deg, var(--color-primary-lighter), var(--color-cream)) !important;
}

/* Page hero (inner pages) - brown/gold overlay */
body .page-hero--image::before {
  background: linear-gradient(135deg, rgba(58, 37, 23, 0.75), rgba(42, 24, 16, 0.55)) !important;
}
body .page-hero--dark {
  background: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-primary-dark) 100%) !important;
}

/* Hero overlay (homepage) - warm brown */
.hero--photo .hero__overlay {
  background: linear-gradient(
    100deg,
    rgba(42, 24, 16, 0.78) 0%,
    rgba(58, 37, 23, 0.6) 50%,
    rgba(201, 137, 53, 0.4) 100%
  ) !important;
}

/* ============================================================
   STAY CONNECTED - Compact horizontal row
   ============================================================ */
body .follow-us-grid {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}
body .follow-card {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 2px solid var(--color-border) !important;
  background: var(--color-white) !important;
  flex-shrink: 0 !important;
}
body .follow-card svg {
  width: 24px !important;
  height: 24px !important;
}
body .follow-card__label {
  display: none !important;
}
body .follow-card--facebook { color: #1877F2 !important; }
body .follow-card--facebook:hover { background: #1877F2 !important; color: #fff !important; border-color: #1877F2 !important; }
body .follow-card--instagram { color: #E1306C !important; }
body .follow-card--instagram:hover { background: #E1306C !important; color: #fff !important; border-color: #E1306C !important; }
body .follow-card--youtube { color: #FF0000 !important; }
body .follow-card--youtube:hover { background: #FF0000 !important; color: #fff !important; border-color: #FF0000 !important; }
body .follow-card--whatsapp { color: #25D366 !important; }
body .follow-card--whatsapp:hover { background: #25D366 !important; color: #fff !important; border-color: #25D366 !important; }

/* Stay Connected section - tighter padding */
body #follow-us.section {
  padding-block: var(--space-2xl) !important;
}

/* ============================================================
   MOBILE FIX - Hero top white border + tighter padding
   ============================================================ */
@media (max-width: 768px) {
  /* Hide empty announcement bar on mobile if it renders as white box */
  .rawdah-announcement-bar .rawdah-widget-container {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .rawdah-announcement-bar {
    background: var(--color-primary) !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  /* Tighter padding on hero */
  .hero--photo .hero__inner {
    padding: 1.5rem 1rem !important;
  }

  /* Prayer section tighter */
  .section--prayer {
    padding-block: 1.5rem !important;
  }

  /* Stay connected compact on mobile */
  body .follow-us-grid {
    gap: 0.75rem !important;
  }
  body .follow-card {
    width: 52px !important;
    height: 52px !important;
  }
  body .follow-card svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Merged newsletter inside Stay Connected section */
.stay-connected__newsletter {
  max-width: 540px;
  margin: 2rem auto 0;
  text-align: center;
}
.stay-connected__newsletter-text {
  color: var(--color-text-light);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.stay-connected__newsletter-form {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}
.stay-connected__newsletter-form input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.95rem;
  background: var(--color-white);
}
.stay-connected__newsletter-form button {
  border-radius: 999px !important;
  padding: 0.75rem 1.5rem !important;
}
@media (max-width: 640px) {
  .stay-connected__newsletter-form {
    flex-direction: column;
  }
  .stay-connected__newsletter-form button {
    width: 100%;
  }
}

/* ============================================================
   FORCE OVERRIDES v1.3.1 - max specificity, must win
   ============================================================ */

/* Follow cards - small circular icons, force horizontal row everywhere */
html body section#follow-us .follow-us-grid,
html body section.section #follow-us .follow-us-grid,
html body .follow-us-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
html body section#follow-us .follow-card,
html body .follow-us-grid > .follow-card {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: 2px solid var(--color-border) !important;
  background: var(--color-white) !important;
  box-shadow: 0 2px 6px rgba(58, 37, 23, 0.08) !important;
  flex: 0 0 56px !important;
  gap: 0 !important;
}
html body section#follow-us .follow-card svg,
html body .follow-card svg {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
}
html body section#follow-us .follow-card__label,
html body .follow-card__label {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Force horizontal on ALL screen sizes including mobile */
@media (max-width: 768px) {
  html body section#follow-us .follow-us-grid,
  html body .follow-us-grid {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    grid-template-columns: none !important;
  }
  html body section#follow-us .follow-card,
  html body .follow-card {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    flex: 0 0 48px !important;
  }
  html body section#follow-us .follow-card svg,
  html body .follow-card svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Newsletter - cleaner card layout */
html body .stay-connected__newsletter {
  background: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 16px !important;
  padding: 1.5rem !important;
  max-width: 540px !important;
  margin: 2rem auto 0 !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(58, 37, 23, 0.04) !important;
}
html body .stay-connected__newsletter-text {
  color: var(--color-brown) !important;
  margin: 0 0 1rem 0 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
}
html body .stay-connected__newsletter-form {
  display: flex !important;
  gap: 0.5rem !important;
  width: 100% !important;
  margin: 0 !important;
}
html body .stay-connected__newsletter-form input[type=email] {
  flex: 1 1 auto !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 999px !important;
  font-size: 0.95rem !important;
  background: var(--color-cream) !important;
  color: var(--color-text) !important;
  min-width: 0 !important;
}
html body .stay-connected__newsletter-form input[type=email]:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  background: var(--color-white) !important;
}
html body .stay-connected__newsletter-form button {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
html body .stay-connected__newsletter-form button:hover {
  background: var(--color-primary-dark) !important;
}
@media (max-width: 480px) {
  html body .stay-connected__newsletter-form {
    flex-direction: column !important;
  }
  html body .stay-connected__newsletter-form button {
    width: 100% !important;
  }
}

/* FORCE GOLD primary - kill any green/teal leftover */
html body .btn--cta,
html body .btn--primary,
html body button.btn--cta,
html body button.btn--primary,
html body a.btn--cta,
html body a.btn--primary,
html body input[type=submit].btn--cta,
html body input[type=submit].btn--primary {
  background: #e39f48 !important;
  background-color: #e39f48 !important;
  color: #ffffff !important;
  border-color: #e39f48 !important;
}
html body .btn--cta:hover,
html body .btn--primary:hover {
  background: #c98935 !important;
  background-color: #c98935 !important;
  border-color: #c98935 !important;
}

/* Force top bar gold */
html body section.top-bar,
html body div.top-bar,
html body .top-bar {
  background: #e39f48 !important;
  background-color: #e39f48 !important;
}

/* Force section labels brown/gold (not teal/green) */
html body .section-heading__label,
html body .section-label {
  color: #c98935 !important;
}
html body .section-heading__divider {
  background: #e39f48 !important;
}

/* ============================================================
   v1.3.2 - Widget padding tighten + prayer mobile fix
   ============================================================ */

/* Widget containers - tighter, no excess padding */
html body .rawdah-widget-container {
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 1200px !important;
}

/* Prayer section - mobile height fix (was 1200px, now auto-fit) */
@media (max-width: 480px) {
  
}
@media (max-width: 768px) and (min-width: 481px) {
  
}

/* Prayer section - reduce padding all around */
html body .section--prayer {
  padding-block: 2rem !important;
}
@media (max-width: 768px) {
  html body .section--prayer {
    padding-block: 1rem !important;
  }
  html body .section--prayer .section-heading {
    margin-bottom: 1rem !important;
  }
  html body .section--prayer .reveal {
    margin: 0 auto !important;
  }
}

/* Slide widget - wider, no excess padding */
html body .section--slides {
  padding-block: 2.5rem !important;
}
html body .section--slides .container {
  max-width: 1280px !important;
}
html body .rawdah-slides {
  max-width: 100% !important;
}
@media (max-width: 768px) {
  html body .section--slides {
    padding-block: 1.5rem !important;
  }
}

/* Events widget - fit content */
html body #events .rawdah-widget-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Live-streaming carousel - fit better */
html body #khutbahs .rawdah-widget-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Hide announcement bar selectors entirely in case still rendered */
.rawdah-announcement-bar,
section.rawdah-announcement-bar {
  display: none !important;
}

/* All Rawdah widget iframes - no extra borders/padding */
html body .rawdah-widget-container iframe {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
}

/* All sections - tighter mobile padding */
@media (max-width: 768px) {
  html body .section {
    padding-block: 2rem !important;
  }
  html body .section-heading {
    margin-bottom: 1.25rem !important;
  }
  html body .section-heading__title {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  html body .section-heading__subtitle {
    font-size: 0.9rem !important;
    margin-top: 0.5rem !important;
  }
  html body .section-heading__divider {
    margin: 0.5rem auto !important;
  }
}

/* ============================================================
   v1.3.4 - Mobile header alignment + button contrast + tabs
   ============================================================ */

/* MOBILE HEADER - logo far-left, hamburger far-right, bigger logo */
@media (max-width: 1024px) {
  html body .site-header,
  html body .site-header .container,
  html body .site-header__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    min-height: 70px !important;
  }
  html body .site-header__logo {
    flex: 0 0 auto !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    text-align: left !important;
    max-width: none !important;
  }
  html body .site-header__logo a,
  html body .site-header__logo-link {
    display: inline-block !important;
    line-height: 0 !important;
  }
  html body .site-header__logo img,
  html body .site-header__logo-link img {
    max-height: 56px !important;
    height: 56px !important;
    width: auto !important;
    display: block !important;
  }
  html body .nav-toggle,
  html body .mobile-menu-toggle,
  html body .elementor-menu-toggle {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Hide nav menu on tablet/mobile so logo + toggle aren't pushed around */
  html body .site-header__nav .mega-menu:not(.mega-menu--mobile-open) {
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 768px) {
  html body .site-header__logo img,
  html body .site-header__logo-link img {
    max-height: 50px !important;
    height: 50px !important;
  }
}

/* DONATION CTA buttons - high contrast on dark brown bg */
html body .donation-cta .btn,
html body .donation-cta a.btn {
  background: #ffffff !important;
  color: #3a2517 !important;
  border: 2px solid #ffffff !important;
  font-weight: 600 !important;
}
html body .donation-cta .btn:hover,
html body .donation-cta a.btn:hover {
  background: #e39f48 !important;
  color: #ffffff !important;
  border-color: #e39f48 !important;
}
/* Sustainer button on donation CTA - gold pill for contrast */
html body .donation-cta .btn--sustainer,
html body .donation-cta a.btn--sustainer {
  background: #e39f48 !important;
  color: #ffffff !important;
  border: 2px solid #e39f48 !important;
}
html body .donation-cta .btn--sustainer:hover,
html body .donation-cta a.btn--sustainer:hover {
  background: #ffffff !important;
  color: #3a2517 !important;
  border-color: #ffffff !important;
}

/* Page-hero dark sections - white buttons for contrast */
html body .page-hero--dark .btn,
html body .page-hero--image .btn {
  background: #ffffff !important;
  color: #3a2517 !important;
}
html body .page-hero--dark .btn:hover,
html body .page-hero--image .btn:hover {
  background: #e39f48 !important;
  color: #ffffff !important;
}

/* Volunteer CTA - ensure button visible on cream-gold bg */
html body .volunteer-cta .btn--cta {
  background: #e39f48 !important;
  color: #ffffff !important;
}
html body .volunteer-cta .btn--cta:hover {
  background: #c98935 !important;
}

/* About page Mission/Vision/Values tabs - horizontal row on mobile */
html body .tabs__nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  border-bottom: 2px solid var(--color-border) !important;
  margin-bottom: 2rem !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
html body .tabs__btn {
  flex: 1 1 auto !important;
  padding: 0.85rem 1rem !important;
  background: transparent !important;
  color: var(--color-brown-light) !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  text-align: center !important;
}
html body .tabs__btn:hover {
  color: var(--color-primary-dark) !important;
}
html body .tabs__btn.tabs__btn--active,
html body .tabs__btn--active {
  color: var(--color-primary-dark) !important;
  border-bottom-color: var(--color-primary) !important;
  background: transparent !important;
}
@media (max-width: 768px) {
  html body .tabs__nav {
    flex-wrap: nowrap !important;
  }
  html body .tabs__btn {
    padding: 0.7rem 0.5rem !important;
    font-size: 0.85rem !important;
    min-width: 0 !important;
  }
}

/* Services page - clean up after removing redundant section */
html body .page-services .section + .section {
  border-top: 1px solid var(--color-border-light) !important;
}

/* ============================================================
   v1.3.5 - Larger type, teal accents, decorative flourish,
            aggressive prayer widget padding fix
   ============================================================ */

/* TEAL ACCENT - bright pop color (matches "Islamic Center" on icosf.org) */
:root {
  --color-teal-accent: #2A9DB5;
  --color-teal-accent-light: #5BC0D0;
  --color-teal-accent-dark: #1F7588;
}

/* ============================================================
   GLOBAL TYPE BUMP - larger, more confident
   ============================================================ */
html body {
  font-size: 17px !important;
  line-height: 1.75 !important;
}
html body p {
  font-size: 1.0625rem !important;
  line-height: 1.75 !important;
}

/* H1 - hero + page heros */
html body h1,
html body .hero__heading,
html body .page-hero h1,
html body .page-hero__heading {
  font-size: clamp(2.5rem, 6vw, 4.25rem) !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
}

/* H2 - section headings */
html body h2,
html body .section-heading__title,
html body section h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

/* H3 - subsections, card titles */
html body h3,
html body .program-tile__title {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

/* H4 - smaller card titles */
html body h4,
html body .service-card__title {
  font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

/* Section labels - larger, teal accent for pop */
html body .section-heading__label,
html body .section-label {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: var(--color-teal-accent) !important;
  margin-bottom: 0.75rem !important;
}

/* Section heading subtitle - readable */
html body .section-heading__subtitle {
  font-size: 1.15rem !important;
  line-height: 1.7 !important;
  color: var(--color-text-light) !important;
}

/* Section heading divider - thicker, teal-to-gold gradient */
html body .section-heading__divider {
  height: 3px !important;
  width: 80px !important;
  background: linear-gradient(90deg, var(--color-teal-accent), var(--color-primary)) !important;
  margin: 1rem auto 1.25rem !important;
  border-radius: 2px !important;
}

/* Buttons - larger, more confident */
html body .btn {
  font-size: 1rem !important;
  font-weight: 600 !important;
  padding: 0.85rem 1.75rem !important;
}
html body .btn--lg {
  font-size: 1.0625rem !important;
  padding: 1rem 2rem !important;
}

/* Hero text */
html body .hero__text,
html body .hero--photo .hero__text {
  font-size: 1.15rem !important;
  line-height: 1.65 !important;
}

/* Program tile body */
html body .program-tile__text {
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

/* Service card body */
html body .service-card__text {
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

/* Footer text - bumped up */
html body .site-footer,
html body .site-footer p,
html body .site-footer ul a,
html body .site-footer .footer-contact-info p {
  font-size: 1rem !important;
  line-height: 1.75 !important;
}
html body .site-footer h4 {
  font-size: 1.15rem !important;
  margin-bottom: 1rem !important;
}

/* Imam spotlight */
html body .imam-spotlight h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
}
html body .imam-spotlight__bio {
  font-size: 1.0625rem !important;
  line-height: 1.8 !important;
}

/* ============================================================
   AGGRESSIVE PRAYER WIDGET PADDING FIX
   ============================================================ */
html body .section--prayer {
  padding-block: 1.5rem !important;
  padding-top: 1rem !important;
  padding-bottom: 0.5rem !important;
}
html body .section--prayer .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body .section--prayer .section-heading {
  margin-bottom: 0.75rem !important;
}
html body .section--prayer .reveal {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
@media (max-width: 768px) {
  html body .section--prayer {
    padding-block: 0.75rem !important;
  }
}

/* ============================================================
   DECORATIVE FLOURISH - SVG ornament above prayer section
   ============================================================ */
html body .section--prayer::before {
  content: '';
  display: block;
  width: 100%;
  max-width: 900px;
  height: 60px;
  margin: 0 auto 1.5rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 60' fill='none'><g stroke='%23e39f48' stroke-width='1.5' fill='none'><line x1='30' y1='30' x2='280' y2='30'/><line x1='620' y1='30' x2='870' y2='30'/></g><g fill='%23e39f48'><circle cx='30' cy='30' r='3'/><circle cx='870' cy='30' r='3'/></g><g transform='translate(290, 15)'><path d='M0 15 L18 0 L36 15 L18 30 Z M40 15 L58 0 L76 15 L58 30 Z M80 15 L98 0 L116 15 L98 30 Z' fill='none' stroke='%23e39f48' stroke-width='1.2'/><circle cx='18' cy='15' r='3' fill='%232A9DB5'/><circle cx='58' cy='15' r='3' fill='%23e39f48'/><circle cx='98' cy='15' r='3' fill='%232A9DB5'/></g><g transform='translate(490, 15)'><path d='M0 15 L18 0 L36 15 L18 30 Z M40 15 L58 0 L76 15 L58 30 Z M80 15 L98 0 L116 15 L98 30 Z' fill='none' stroke='%23e39f48' stroke-width='1.2'/><circle cx='18' cy='15' r='3' fill='%232A9DB5'/><circle cx='58' cy='15' r='3' fill='%23e39f48'/><circle cx='98' cy='15' r='3' fill='%232A9DB5'/></g><text x='450' y='38' text-anchor='middle' font-family='Amiri, serif' font-size='28' fill='%232A9DB5' font-style='italic'>﷽</text></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.85;
}
@media (max-width: 768px) {
  html body .section--prayer::before {
    height: 36px;
    margin-bottom: 1rem;
    max-width: 95%;
  }
}

/* ============================================================
   TEAL ACCENT - sprinkled in for visual pop
   ============================================================ */

/* Program tile badge - teal background highlight on hover */
html body .program-tile:hover .program-tile__badge {
  background: var(--color-teal-accent) !important;
  color: var(--color-white) !important;
}

/* Service card icon - small teal on hover ring */
html body .service-card:hover .service-card__icon {
  box-shadow: 0 0 0 3px rgba(42, 157, 181, 0.15) !important;
}

/* Link hover - teal */
html body a:hover {
  color: var(--color-teal-accent-dark);
}

/* "ICOSF" branded inline accent (for any branded text) */
html body .brand-accent,
html body .icosf-brand {
  color: var(--color-teal-accent) !important;
  font-weight: 700 !important;
}

/* Section heading title gets a small teal underscore below the divider on hover */
html body .section-heading:hover .section-heading__divider {
  width: 120px !important;
  transition: width 0.4s ease !important;
}
html body .section-heading__divider {
  transition: width 0.4s ease !important;
}

/* Imam role - teal for pop */
html body .imam-spotlight__role {
  color: var(--color-teal-accent-dark) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.03em !important;
}

/* Card link arrows - teal */
html body .program-tile__link,
html body .service-card__link {
  color: var(--color-teal-accent-dark) !important;
  font-size: 0.95rem !important;
}

/* ============================================================
   NEWSLETTER BUTTON contrast (was hard to see)
   ============================================================ */
html body .stay-connected__newsletter-form button {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ============================================================
   v1.3.6 - Clean ornament + tight prayer + fitted slider
   ============================================================ */

/* Replace cluttered ornament with clean ornamental flourish (no text glyph) */
html body .section--prayer::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 40' fill='none'><g stroke='%23e39f48' stroke-width='1.5' fill='none' stroke-linecap='round'><line x1='40' y1='20' x2='380' y2='20'/><line x1='520' y1='20' x2='860' y2='20'/></g><g fill='%23e39f48'><circle cx='40' cy='20' r='3'/><circle cx='860' cy='20' r='3'/></g><g transform='translate(390, 5)' fill='none' stroke='%23e39f48' stroke-width='1.4'><path d='M0 15 L15 0 L30 15 L15 30 Z'/><path d='M45 15 L60 0 L75 15 L60 30 Z'/><path d='M90 15 L105 0 L120 15 L105 30 Z'/></g><g transform='translate(390, 5)'><circle cx='15' cy='15' r='3.5' fill='%232A9DB5'/><circle cx='60' cy='15' r='3.5' fill='%23e39f48'/><circle cx='105' cy='15' r='3.5' fill='%232A9DB5'/></g></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  height: 40px !important;
  max-width: 700px !important;
  margin: 0 auto 1rem !important;
  opacity: 0.9 !important;
}
@media (max-width: 768px) {
  html body .section--prayer::before {
    height: 28px !important;
    max-width: 90% !important;
    margin-bottom: 0.75rem !important;
  }
}

/* ============================================================
   KILL prayer widget bottom space - tighter iframe heights
   ============================================================ */

@media (max-width: 1024px) and (min-width: 769px) {
  
}
@media (max-width: 768px) and (min-width: 481px) {
  
}
@media (max-width: 480px) {
  
}

/* Prayer section - tight bottom (zero padding-bottom) */
html body .section--prayer {
  padding-bottom: 0.25rem !important;
}

/* SLIDER widget — SDK auto-heights; fixed-height overrides removed (they
   were clipping the bottom nav buttons on desktop). */

/* Force scrolling=no on ALL iframes - hide scrollbars universally */
html body iframe {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html body iframe::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Section between prayer and slides - tighten gap */
html body .section--prayer + .section--slides {
  margin-top: 0 !important;
  padding-top: 1.5rem !important;
}

/* ============================================================
   v1.3.7 - Prayer-21 tall vertical widget sizing
   Override ALL previous prayer height rules
   ============================================================ */

@media (max-width: 768px) {
  
}
@media (max-width: 480px) {
  
}

/* ============================================================
   v1.3.8 - Prayer-21: trust the iframe height, kill all padding
   ============================================================ */
html body .section--prayer {
  padding-block: 1rem !important;
}
html body .section--prayer .container,
html body .section--prayer .reveal {
  padding: 0 !important;
  margin: 0 auto !important;
}
html body .section--prayer .rawdah-widget-container {
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 1100px !important; /* prayer-8 is a wide horizontal strip */
}
html body .section--prayer .rawdah-widget-container iframe {
  /* Use ONLY the HTML height attribute - no CSS override */
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  display: block !important;
  background: transparent !important;
}
@media (max-width: 768px) {
  html body .section--prayer .rawdah-widget-container {
    max-width: 100% !important;
  }
  /* SDK auto-heights the prayer widget — no fixed mobile height */
}

/* ============================================================
   v1.3.9 - App banner: force single line, never wrap
   ============================================================ */
html body .app-banner {
  padding: 0.55rem 1rem !important;
  font-size: 0.875rem !important;
}
html body .app-banner__inner {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  gap: 0.75rem !important;
}
html body .app-banner__text {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}
html body .app-banner__cta {
  flex-shrink: 0 !important;
  padding: 0.25rem 0.7rem !important;
  font-size: 0.8125rem !important;
  gap: 0.3rem !important;
}
@media (max-width: 640px) {
  html body .app-banner {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.78rem !important;
  }
  html body .app-banner__inner {
    gap: 0.5rem !important;
  }
  html body .app-banner__cta {
    padding: 0.2rem 0.55rem !important;
    font-size: 0.72rem !important;
  }
}
@media (max-width: 380px) {
  html body .app-banner {
    font-size: 0.72rem !important;
  }
  html body .app-banner__cta {
    font-size: 0.68rem !important;
  }
}

/* override earlier .app-banner__inner flex-wrap:wrap rule from mobile breakpoint */
@media (max-width: 768px) {
  html body .app-banner__inner {
    flex-wrap: nowrap !important;
  }
}

/* ============================================================
   v1.4.0 — one-pass fixes from Website Notes.pptx
   ============================================================ */

/* ── Prayer/other widgets — SDK renders native DOM, no iframe height math ── */

/* ── Hamburger: force 3 stacked bars ── */
@media (max-width: 1024px) {
  html body .nav-toggle,
  html body .mobile-menu-toggle {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 10px 8px !important;
  }
  html body .nav-toggle .nav-toggle__bar {
    display: block !important;
    width: 26px !important;
    height: 3px !important;
    background: var(--color-secondary, #3a2517) !important;
    margin: 3px 0 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
  }
}

/* ── About: Our Story columns equal height ── */
html body .about-intro {
  align-items: stretch !important;
}
html body .about-intro__image {
  display: flex !important;
  align-items: stretch !important;
}
html body .about-intro__image img {
  width: 100% !important;
  height: 100% !important;
  min-height: 480px !important;
  object-fit: cover !important;
  border-radius: var(--border-radius-xl, 16px) !important;
}
html body .about-intro__content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* ── About: Imam photo full-height, matches text column height ── */
html body .imam-card {
  display: grid !important;
  grid-template-columns: minmax(340px, 460px) 1fr !important;
  align-items: stretch !important;
  gap: var(--space-2xl) !important;
}
html body .imam-card__photo {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  border-radius: var(--border-radius-xl, 16px) !important;
  box-shadow: 0 8px 24px rgba(58, 37, 23, 0.15) !important;
  aspect-ratio: auto !important;
}
html body .imam-card__photo img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  border-radius: var(--border-radius-xl, 16px) !important;
}
html body .imam-card__content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
@media (max-width: 768px) {
  html body .imam-card {
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
    align-items: stretch !important;
  }
  html body .imam-card__photo {
    max-width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  html body .imam-card__photo img {
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* ── Services page: 3+3 grid with aligned buttons ── */
html body .donate-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-xl, 2rem) !important;
}
@media (max-width: 900px) {
  html body .donate-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 560px) {
  html body .donate-grid {
    grid-template-columns: 1fr !important;
  }
}
html body .donate-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: var(--space-xl) !important;
  text-align: center !important;
}
html body .donate-card__icon {
  margin: 0 auto var(--space-md) !important;
}
html body .donate-card__title {
  margin-bottom: var(--space-md) !important;
}
html body .donate-card__text {
  flex-grow: 1 !important;
  margin-bottom: var(--space-lg) !important;
  /* Slide 3: clamp descriptions so every card reads the same length */
  display: -webkit-box !important;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
}
html body .donate-card .btn {
  margin-top: auto !important;
  align-self: center !important;
}

/* ── Footer icons: spacing (both footer + Follow Us contact block) ── */
html body .site-footer__social,
html body .contact-social {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  margin-top: 0.5rem !important;
}
html body .site-footer__social a,
html body .contact-social a {
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: var(--color-primary, #e39f48) !important;
  color: #fff !important;
  transition: transform 0.2s ease, background 0.2s ease !important;
}
html body .site-footer__social a:hover,
html body .contact-social a:hover {
  transform: translateY(-2px) !important;
  background: var(--color-primary-dark, #c98935) !important;
}

/* ── Global mobile section padding normalization ── */
@media (max-width: 768px) {
  html body main > section,
  html body .section {
    padding-block: 2.25rem !important;
  }
  html body .section--flush {
    padding-block: 0 !important;
  }
  html body .section--prayer {
    padding-block: 1rem !important;
  }
  html body .container {
    padding-inline: 1.25rem !important;
  }
  /* Section headers/spacing */
  html body .section-header {
    margin-bottom: 1.5rem !important;
  }
  html body .reveal + .reveal {
    margin-top: 1.5rem !important;
  }
  /* Kill any wildcard top/bottom margin on section-child containers */
  html body section > .container > *:first-child {
    margin-top: 0 !important;
  }
  html body section > .container > *:last-child {
    margin-bottom: 0 !important;
  }
}
@media (max-width: 480px) {
  html body main > section,
  html body .section {
    padding-block: 1.75rem !important;
  }
  html body .container {
    padding-inline: 1rem !important;
  }
}

/* ============================================================
   v1.4.1 — Widget section padding matches site standard.
   Overrides ALL prior per-widget padding tweaks.
   ============================================================ */

/* Reset every widget-hosting section back to the site's normal
   .section spacing (var(--space-4xl) desktop, 2.25rem tablet, 1.75rem mobile).
   Also strip legacy chrome from widget containers so only the
   parent section's padding is visible. */
html body .section--prayer,
html body .section--slides,
html body .section--events,
html body section:has(> .container > .rawdah-widget-container),
html body section:has(> .container > .reveal > .rawdah-widget-container) {
  padding-block: var(--space-4xl) !important;
  background-color: var(--color-cream, #faf3e6) !important;
}

@media (max-width: 768px) {
  html body .section--prayer,
  html body .section--slides,
  html body .section--events,
  html body section:has(> .container > .rawdah-widget-container),
  html body section:has(> .container > .reveal > .rawdah-widget-container) {
    padding-block: 2.25rem !important;
  }
}

@media (max-width: 480px) {
  html body .section--prayer,
  html body .section--slides,
  html body .section--events,
  html body section:has(> .container > .rawdah-widget-container),
  html body section:has(> .container > .reveal > .rawdah-widget-container) {
    padding-block: 1.75rem !important;
  }
}

/* ============================================================
   v1.5.0 — SDK widget containers: chrome-free, host-driven sizing
   The SDK renders as native DOM, so the container becomes just a
   wrapper. No iframe overrides, no height hacks, no scrollbar hiding.
   The parent .section handles all padding.
   ============================================================ */
html body .rawdah-widget-container {
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0;  /* SDK content sets height; min-height stays from inline style during load */
}
/* Any iframe the SDK injects internally: no chrome, block-level */
html body .rawdah-widget-container iframe {
  display: block !important;
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}

/* ── Optional widget zoom (set per-widget via 'scale' arg in PHP) ──
   zoom multiplies rendered size of the iframe AND the height the SDK
   applies, so content always fits exactly. Width is divided back down
   so the zoomed frame still spans exactly 100% of the container. */
html body .rawdah-widget-container--scaled iframe {
  zoom: var(--rawdah-scale, 1);
  width: calc(100% / var(--rawdah-scale, 1)) !important;
  max-width: calc(100% / var(--rawdah-scale, 1)) !important;
}

/* ============================================================
   v1.5.1 — Large-display scaling (2K / 4K / ultrawide monitors)
   The whole theme is rem-based, so bumping the root font-size
   scales typography + spacing together. Containers widen to match
   so content doesn't sit in a narrow strip on huge screens.
   ============================================================ */
@media (min-width: 1920px) {
  html { font-size: 17.5px; }
  :root { --container-max: 1440px; --container-wide: 1620px; }
  html body .site-header__logo img,
  html body .site-header__logo-link img { max-height: 66px; }
  html body .section--prayer .rawdah-widget-container { max-width: 1240px !important; }
}
@media (min-width: 2400px) {
  html { font-size: 19.5px; }
  :root { --container-max: 1680px; --container-wide: 1880px; }
  html body .site-header__logo img,
  html body .site-header__logo-link img { max-height: 76px; }
  html body .section--prayer .rawdah-widget-container { max-width: 1400px !important; }
}
@media (min-width: 3000px) {
  html { font-size: 22px; }
  :root { --container-max: 1960px; --container-wide: 2200px; }
  html body .site-header__logo img,
  html body .site-header__logo-link img { max-height: 88px; }
  html body .section--prayer .rawdah-widget-container { max-width: 1560px !important; }
}

/* ── Footer: tighten the gap above the logo on mobile ── */
@media (max-width: 768px) {
  html body .site-footer {
    padding-top: 1.75rem !important;
  }
  html body .site-footer__grid {
    gap: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }
  html body .site-footer__brand {
    text-align: center;
  }
  html body .site-footer__brand img,
  html body .site-footer__logo img {
    margin: 0 auto !important;
    display: block !important;
    max-width: 150px !important;
  }
  html body .site-footer__brand p {
    margin-top: 0.75rem !important;
  }
}
@media (max-width: 480px) {
  html body .site-footer {
    padding-top: 1.25rem !important;
  }
  html body .site-footer__grid {
    gap: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* ============================================================
   v1.6.0 — Prayer Times block (replaces the Rawdah prayer widget)
   Earlier rules zeroed .section--prayer .container padding so the old
   iframe could sit edge-to-edge. The new block is a rounded card, so the
   horizontal gutter is restored — without it the card's corners clip
   against the viewport on phones.
   ============================================================ */
html body .section--prayer .container {
  padding-inline: var(--space-lg) !important;
}
@media (max-width: 768px) {
  html body .section--prayer .container {
    padding-inline: 1.25rem !important;
  }
}
@media (max-width: 480px) {
  html body .section--prayer .container {
    padding-inline: 1rem !important;
  }
}
/* The block sizes itself (max-width 640px, centred); no outer cap needed. */
html body .section--prayer #masjid-prayer-times {
  margin-inline: auto !important;
}

/* ============================================================
   v1.7.1 — Hero: bright daytime photo, light overlay
   The client asked for the Programs-page look site-wide. The photo
   is now shared (masjid/hero-main.jpg); these rules replace the
   heavy 0.75–0.85 darkening with a light wash that keeps the
   daytime feel while holding text contrast.
   ============================================================ */
html body .hero--photo .hero__overlay {
  background: linear-gradient(
    100deg,
    rgba(27, 22, 14, 0.55) 0%,
    rgba(27, 22, 14, 0.34) 45%,
    rgba(27, 22, 14, 0.22) 100%
  ) !important;
}
@media (max-width: 768px) {
  html body .hero--photo .hero__overlay {
    /* Slightly stronger on small screens: text sits over more of the photo */
    background: linear-gradient(
      180deg,
      rgba(27, 22, 14, 0.5) 0%,
      rgba(27, 22, 14, 0.55) 100%
    ) !important;
  }
}
html body .page-hero--image::before,
body .page-hero--image::before {
  background: linear-gradient(
    120deg,
    rgba(27, 22, 14, 0.52) 0%,
    rgba(27, 22, 14, 0.3) 100%
  ) !important;
}
/* Keep the photo's own brightness rather than dimming the <img> itself */
html body .hero--photo .hero__bg img {
  filter: none !important;
  object-position: center 42% !important;
}

/* ============================================================
   v1.7.2 — App download banner: stronger, more obvious motion
   First pass read as too subtle. The pill now beats harder and
   more often, the sheen sweeps brighter, and the whole bar lifts
   on a slow breath so it reads as active without strobing.
   ============================================================ */
html body .app-banner {
  position: relative;
  overflow: hidden;
}
html body .app-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 55%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-18deg);
  animation: icosf-banner-sheen 3.2s ease-in-out infinite;
}
@keyframes icosf-banner-sheen {
  0%,  45% { left: -60%; }
  85%, 100% { left: 130%; }
}

html body .app-banner__cta {
  position: relative;
  font-weight: 700 !important;
  animation: icosf-cta-pulse 1.35s ease-in-out infinite;
  will-change: transform, box-shadow;
}
@keyframes icosf-cta-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255,255,255,0.95);
    background: var(--color-white);
  }
  45% {
    transform: scale(1.14);
    box-shadow: 0 0 0 14px rgba(255,255,255,0);
    background: #fff6e2;
  }
}
html body .app-banner:hover .app-banner__cta {
  animation-play-state: paused;
  transform: scale(1.14);
}

html body .app-banner__cta svg {
  animation: icosf-cta-nudge 1.35s ease-in-out infinite;
}
@keyframes icosf-cta-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* The label itself breathes gently so the eye catches the whole bar */
html body .app-banner__text {
  animation: icosf-banner-breathe 3.2s ease-in-out infinite;
}
@keyframes icosf-banner-breathe {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-banner::after,
  html body .app-banner__cta,
  html body .app-banner__cta svg,
  html body .app-banner__text {
    animation: none !important;
  }
  html body .app-banner__cta {
    box-shadow: 0 0 0 3px rgba(255,255,255,0.85) !important;
  }
}