/* ==========================================================================

   SACRED HEART CHURCH, CHERUVANNUR, FEROKE

   RC Archdiocese of Calicut

   Luminous Off-White & Papal Gold Architecture Theme

   ========================================================================== */

:root {

  /* Sacred Off-White & Cathedral Limestone Palette */

  --offwhite-50:  #fdfcf9;  /* Pristine Warm Alabaster */

  --offwhite-100: #fbf8f2;  /* Soft Cathedral Cream */

  --offwhite-200: #f6f2e8;  /* Warm Travertine Surface */

  --offwhite-300: #eee8d8;  /* Architectural Muted Stone */

  --offwhite-400: #e2dac6;  /* Stone Border Subtle */

  --offwhite-500: #d4c9b3;  /* Medium Border */

  /* Divine Cathedral Gold */

  --gold-700: #856114;

  --gold-600: #a0781b;

  --gold-500: #c59b27;

  --gold-400: #dfc27d;

  --gold-300: #ebd8a6;

  --gold-200: #f5eccf;

  --gold-100: #fcf7ec;

  /* Liturgical Cardinal Crimson */

  --crimson-900: #54080e;

  --crimson-800: #7b1113;

  --crimson-700: #8f171c;

  --crimson-600: #a71822;

  --crimson-500: #c91f2b;

  --crimson-100: #fcedee;

  /* Deep Cathedral Charcoal & Ink (Highly legible on Off-White) */

  --ink-950: #141210;

  --ink-900: #1f1b17;

  --ink-800: #2d2721;

  --ink-700: #423b32;

  --ink-600: #5c5346;

  --ink-500: #786d5c;

  --ink-400: #968a76;

  --white: #ffffff;

  /* Typography */

  --font-gothic: 'Cinzel', 'Cinzel Decorative', Georgia, serif;

  --font-serif: 'Playfair Display', Georgia, serif;

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --font-malayalam: 'Manrope', 'Noto Sans Malayalam', sans-serif;

  /* Elevations & Soft Warm Shadows */

  --shadow-sm: 0 1px 4px rgba(60, 45, 25, 0.05);

  --shadow-md: 0 4px 16px rgba(60, 45, 25, 0.08);

  --shadow-lg: 0 10px 28px rgba(60, 45, 25, 0.1);

  --shadow-xl: 0 20px 45px rgba(60, 45, 25, 0.12);

  --shadow-gold: 0 0 25px rgba(197, 155, 39, 0.28);

  --shadow-crimson: 0 4px 20px rgba(143, 23, 28, 0.25);

  /* Radii */

  --radius-sm: 6px;

  --radius-md: 12px;

  --radius-lg: 20px;

  --radius-full: 9999px;

  /* Transitions */

  --transition-fast: 180ms ease;

  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);

}

/* Base Resets */

*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

html {

  scroll-behavior: smooth;

  font-size: 16px;

  color-scheme: light;

}

body {

  font-family: var(--font-sans);

  background-color: var(--offwhite-50);

  color: var(--ink-800);

  line-height: 1.65;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;

}

body.lang-ml {

  font-family: var(--font-malayalam);

}

img {

  max-width: 100%;

  height: auto;

  display: block;

}

a {

  color: inherit;

  text-decoration: none;

  transition: var(--transition-fast);

}

button, input, select, textarea {

  font-family: inherit;

  font-size: inherit;

}

/* ==========================================================================

   OFF-WHITE ARCHITECTURAL UTILITIES & ORNAMENTS

   ========================================================================== */

.container {

  width: 100%;

  max-width: 1280px;

  margin-left: auto;

  margin-right: auto;

  padding-left: 1.5rem;

  padding-right: 1.5rem;

}

.text-gold { color: var(--gold-600) !important; }

.text-crimson { color: var(--crimson-700) !important; }

.bg-stone { background-color: var(--offwhite-100) !important; }

.bg-cream { background-color: var(--offwhite-200) !important; }

.gothic-heading {

  font-family: var(--font-gothic);

  letter-spacing: 0.05em;

  text-transform: uppercase;

}

.gothic-divider {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 1rem;

  margin: 1.5rem auto;

  color: var(--gold-500);

}

.gothic-divider::before,

.gothic-divider::after {

  content: "";

  height: 1px;

  width: 80px;

  background: linear-gradient(90deg, transparent, var(--gold-400));

}

.gothic-divider::after {

  background: linear-gradient(90deg, var(--gold-400), transparent);

}

/* Section Headings */

.section-padding {

  padding: 5rem 0;

}

.section-head {

  text-align: center;

  max-width: 800px;

  margin: 0 auto 3.5rem;

}

.section-subtitle {

  color: var(--crimson-700);

  font-size: 0.88rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  margin-bottom: 0.5rem;

  display: block;

}

.section-title {

  font-family: var(--font-gothic);

  font-size: 2.3rem;

  color: var(--ink-900);

  line-height: 1.2;

  margin-bottom: 1rem;

}

.section-desc {

  font-size: 1.05rem;

  color: var(--ink-600);

}

/* ==========================================================================

   ANNOUNCEMENT / TOP BAR (Luminous Off-White with Crimson Badge)

   ========================================================================== */

.appeal-topbar {

  background: #fbf7ee;

  color: var(--crimson-800);

  padding: 0.65rem 1rem;

  font-size: 0.88rem;

  border-bottom: 1.5px solid var(--offwhite-400);

  position: relative;

  z-index: 100;

}

.appeal-topbar-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 0.75rem;

}

.appeal-badge {

  background: var(--crimson-800);

  color: var(--white);

  font-weight: 700;

  font-size: 0.72rem;

  padding: 0.25rem 0.65rem;

  border-radius: var(--radius-full);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

}

.appeal-cta-link {

  color: var(--crimson-700);

  font-weight: 700;

  text-decoration: underline;

  text-underline-offset: 3px;

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

}

.appeal-cta-link:hover {

  color: var(--crimson-900);

}

.appeal-topbar-right {

  display: flex;

  align-items: center;

  gap: 1.25rem;

}

.lang-switch-btn {

  background: #ffffff;

  border: 1px solid var(--gold-400);

  color: var(--ink-800);

  font-size: 0.8rem;

  font-weight: 600;

  padding: 0.25rem 0.65rem;

  border-radius: var(--radius-sm);

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  box-shadow: var(--shadow-sm);

  transition: var(--transition-fast);

}

.lang-switch-btn:hover {

  background: var(--gold-500);

  color: var(--white);

  border-color: var(--gold-500);

}

/* ==========================================================================

   PRIMARY HEADER & NAVIGATION (Crisp Off-White with Papal Gold Trim)

   ========================================================================== */

.main-header {

  background: rgba(253, 251, 247, 0.98);

  backdrop-filter: blur(12px);

  position: sticky;

  top: 0;

  z-index: 90;

  border-bottom: 2px solid var(--gold-400);

  box-shadow: 0 4px 20px rgba(90, 70, 40, 0.06);

  transition: var(--transition-base);

}

.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.75rem 0;

}

.brand-emblem-wrap {

  display: flex;

  align-items: center;

  gap: 0.85rem;

  flex-shrink: 0;

}

.church-header-logo {

  height: 76px;

  width: auto;

  display: block;

  flex-shrink: 0;

  background: transparent;

  border: none;

  box-shadow: none;

  padding: 0;

  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));

  transition: transform var(--transition-fast), filter var(--transition-fast);

}

.church-header-logo:hover {

  transform: scale(1.05);

  filter: drop-shadow(0 4px 14px rgba(212, 175, 55, 0.5));

}

.brand-titles {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}

.brand-titles h1 {

  font-family: var(--font-gothic);

  font-size: 1.25rem;

  color: var(--crimson-800);

  line-height: 1.2;

  font-weight: 700;

  margin: 0;

  white-space: nowrap;

  text-align: center;

  letter-spacing: 0.02em;

}

.brand-titles .parish-sub-location {

  font-size: 0.74rem;

  color: var(--ink-600);

  font-weight: 500;

  line-height: 1.25;

  margin-top: 1px;

  text-align: center;

  white-space: nowrap;

}

.brand-titles .parish-sub-diocese {

  font-size: 0.8rem;

  color: var(--crimson-800);

  font-weight: 800;

  line-height: 1.25;

  margin-top: 2px;

  text-align: center;

  white-space: nowrap;

  letter-spacing: 0.01em;

}

.nav-links {

  display: flex;

  align-items: center;

  list-style: none;

  gap: 1.15rem;

}

.nav-item {

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

}

.nav-item a {

  font-size: 0.85rem;

  font-weight: 600;

  color: var(--ink-800);

  position: relative;

  padding: 0.3rem 0.2rem;

  text-align: center;

  display: inline-flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  line-height: 1.2;

}

.nav-item a::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 0;

  height: 2px;

  background-color: var(--crimson-700);

  transition: width var(--transition-fast);

}

.nav-item a:hover::after,

.nav-item a.active::after {

  width: 100%;

}

.nav-item a:hover {

  color: var(--crimson-700);

}

.header-action-btns {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: stretch;

  gap: 0.32rem;

  flex-shrink: 0;

}

.btn-header-prayer {

  background: #ffffff;

  color: var(--crimson-800) !important;

  font-weight: 700;

  font-size: 0.76rem;

  padding: 0.28rem 0.75rem;

  border-radius: var(--radius-full);

  border: 1.5px solid var(--gold-400);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.35rem;

  box-shadow: var(--shadow-sm);

  transition: var(--transition-fast);

  white-space: nowrap;

  line-height: 1.15;

}

.btn-header-prayer:hover {

  background: var(--gold-100);

  border-color: var(--gold-500);

  color: var(--ink-950) !important;

}

.btn-header-donate {

  background: linear-gradient(135deg, var(--crimson-800), var(--crimson-700));

  color: var(--white) !important;

  font-weight: 700;

  font-size: 0.76rem;

  padding: 0.28rem 0.75rem;

  border-radius: var(--radius-full);

  border: 1px solid var(--gold-400);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.35rem;

  box-shadow: 0 2px 8px rgba(143, 23, 28, 0.22);

  transition: var(--transition-fast);

  white-space: nowrap;

  line-height: 1.15;

}

.btn-header-donate:hover {

  background: linear-gradient(135deg, var(--crimson-900), var(--crimson-800));

  transform: translateY(-1px);

  box-shadow: var(--shadow-crimson);

}

}

.mobile-menu-btn {

  display: none;

  background: none;

  border: none;

  cursor: pointer;

  color: var(--crimson-800);

  padding: 0.5rem;

}

/* ==========================================================================

   HERO SECTION: REDESIGNED LUMINOUS OFF-WHITE MARBLE SANCTUARY

   ========================================================================== */

.hero-section {

  position: relative;

  background-color: #f7f4eb;

  color: var(--ink-900);

  padding: 5.5rem 0 4.5rem;

  overflow: hidden;

  border-bottom: 2px solid var(--offwhite-400);

}

.hero-section::before {

  content: "";

  position: absolute;

  inset: 0;

  background-image: url('../images/SHC%20Images/Old%20Church%20001.png');

  background-size: cover;

  background-position: center 30%;

  background-repeat: no-repeat;

  opacity: 0.32; /* Faded but clearly visible across full panel */

  pointer-events: none;

  z-index: 0;

  filter: saturate(1.15) contrast(1.15);

}

.hero-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, rgba(253, 251, 247, 0.86) 0%, rgba(253, 251, 247, 0.68) 45%, rgba(248, 243, 233, 0.8) 100%),

              linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 60%, rgba(243, 237, 226, 0.5) 100%);

  pointer-events: none;

  z-index: 1;

}

.hero-grid {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: 0.88fr 1.12fr;

  gap: 3.5rem;

  align-items: center;

}

.hero-text-content {

  position: relative;

  z-index: 2;

}

.hero-title {

  font-family: var(--font-gothic);

  font-size: 3rem;

  line-height: 1.1;

  font-weight: 800;

  color: var(--ink-950);

  margin-bottom: 1rem;

}

.hero-title .gold-accent {

  background: linear-gradient(135deg, var(--crimson-800), var(--crimson-600));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  display: block;

}

.hero-subtitle {

  font-size: 1.12rem;

  color: var(--ink-700);

  margin-bottom: 1.75rem;

  max-width: 620px;

  font-weight: 500;

  line-height: 1.7;

}

.hero-scripture {

  font-family: var(--font-serif);

  font-style: italic;

  font-size: 1.05rem;

  color: var(--crimson-800);

  border-left: 3px solid var(--gold-500);

  padding-left: 1.25rem;

  margin-bottom: 2rem;

}

.hero-buttons {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 1rem;

}

.btn-primary-gold {

  background: linear-gradient(135deg, var(--crimson-800), var(--crimson-700));

  color: var(--white) !important;

  font-weight: 700;

  font-size: 0.98rem;

  padding: 0.85rem 1.85rem;

  border-radius: var(--radius-full);

  border: 1px solid var(--gold-400);

  cursor: pointer;

  box-shadow: 0 4px 15px rgba(143, 23, 28, 0.25);

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  transition: var(--transition-fast);

}

.btn-primary-gold:hover {

  background: linear-gradient(135deg, var(--crimson-900), var(--crimson-800));

  transform: translateY(-2px);

  box-shadow: var(--shadow-crimson);

}

.btn-outline-white {

  background: #ffffff;

  color: var(--ink-800);

  font-weight: 600;

  font-size: 0.98rem;

  padding: 0.85rem 1.65rem;

  border-radius: var(--radius-full);

  border: 1.5px solid var(--gold-400);

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  box-shadow: var(--shadow-sm);

  transition: var(--transition-fast);

}

.btn-outline-white:hover {

  background: var(--gold-100);

  border-color: var(--gold-500);

  transform: translateY(-1px);

}

/* Hero Showcase Card (Off-White Marble Finish) */

.hero-card-showcase {

  background: #ffffff;

  border: 2px solid var(--gold-400);

  border-radius: var(--radius-lg);

  padding: 1.75rem;

  box-shadow: 0 12px 35px rgba(80, 60, 30, 0.1);

  position: relative;

}

.hero-card-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid var(--offwhite-300);

  padding-bottom: 1rem;

  margin-bottom: 1.25rem;

}

.hero-card-header h3 {

  font-family: var(--font-gothic);

  font-size: 1.15rem;

  color: var(--crimson-800);

  margin: 0;

}

.church-comparison-thumb {

  position: relative;

  border-radius: var(--radius-md);

  overflow: hidden;

  margin-bottom: 1.25rem;

  border: 1.5px solid var(--offwhite-400);

}

.church-comparison-thumb img {

  width: 100%;

  height: 220px;

  object-fit: cover;

  transition: transform 0.5s ease;

}

.church-comparison-thumb:hover img {

  transform: scale(1.04);

}

.thumb-tag {

  position: absolute;

  bottom: 0.75rem;

  left: 0.75rem;

  background: rgba(255, 255, 255, 0.92);

  border: 1px solid var(--gold-400);

  color: var(--crimson-800);

  font-size: 0.75rem;

  padding: 0.25rem 0.6rem;

  border-radius: var(--radius-sm);

  font-weight: 700;

  box-shadow: var(--shadow-sm);

}

.hero-progress-wrap {

  margin-top: 1rem;

}

.progress-labels {

  display: flex;

  justify-content: space-between;

  font-size: 0.88rem;

  color: var(--ink-700);

  margin-bottom: 0.4rem;

  font-weight: 600;

}

.progress-track {

  width: 100%;

  height: 12px;

  background: var(--offwhite-300);

  border-radius: var(--radius-full);

  overflow: hidden;

  border: 1px solid var(--offwhite-400);

}

.progress-fill {

  height: 100%;

  background: linear-gradient(90deg, var(--gold-500), var(--crimson-700));

  border-radius: var(--radius-full);

  transition: width 1s ease-in-out;

}

/* ==========================================================================

   SEASONAL CHRISTMAS APPEAL (Luminous Off-White & Starry Gold Theme)

   ========================================================================== */

.christmas-campaign-section {

  position: relative;

  background: linear-gradient(180deg, #faf7f0 0%, #f4efe2 50%, #ede6d6 100%);

  color: var(--ink-900);

  padding: 5rem 0;

  overflow: hidden;

  border-top: 3px solid var(--gold-400);

  border-bottom: 3px solid var(--gold-400);

}

.festive-tag {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  background: linear-gradient(135deg, #8f171c, #700f13);

  border: 1px solid var(--gold-400);

  color: var(--white);

  padding: 0.35rem 0.95rem;

  border-radius: var(--radius-full);

  font-size: 0.82rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  margin-bottom: 1rem;

  box-shadow: 0 4px 15px rgba(143, 23, 28, 0.2);

}

/* Bethlehem Progress Tracker Card (Off-White Polish) */

.bethlehem-card {

  background: #ffffff;

  border: 2px solid var(--gold-400);

  border-radius: var(--radius-lg);

  padding: 2.25rem;

  box-shadow: 0 10px 30px rgba(100, 75, 40, 0.08);

  margin-bottom: 3.5rem;

  position: relative;

}

.bethlehem-grid {

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  gap: 2.5rem;

  align-items: center;

}

.bethlehem-title {

  font-family: var(--font-gothic);

  font-size: 1.65rem;

  color: var(--crimson-800);

  line-height: 1.25;

  margin-bottom: 0.75rem;

}

.bethlehem-subtitle {

  color: var(--ink-700);

  font-size: 0.96rem;

  line-height: 1.6;

  margin-bottom: 1.5rem;

}

/* Countdown to Christmas Midnight */

.countdown-container {

  display: flex;

  align-items: center;

  gap: 0.85rem;

  margin-bottom: 1.75rem;

  flex-wrap: wrap;

}

.countdown-box {

  background: #fbf7ee;

  border: 1.5px solid var(--gold-400);

  border-radius: var(--radius-sm);

  padding: 0.55rem 0.75rem;

  text-align: center;

  min-width: 68px;

  box-shadow: var(--shadow-sm);

}

.countdown-val {

  font-family: var(--font-gothic);

  font-size: 1.45rem;

  font-weight: 800;

  color: var(--crimson-800);

  display: block;

  line-height: 1.1;

}

.countdown-lbl {

  font-size: 0.68rem;

  color: var(--ink-600);

  text-transform: uppercase;

  letter-spacing: 0.05em;

  font-weight: 600;

}

/* Festive Progress Bar */

.festive-progress-wrap {

  margin-bottom: 1.5rem;

}

.festive-progress-meta {

  display: flex;

  justify-content: space-between;

  font-size: 0.88rem;

  font-weight: 700;

  margin-bottom: 0.5rem;

  color: var(--ink-800);

}

.festive-progress-track {

  width: 100%;

  height: 18px;

  background: var(--offwhite-300);

  border-radius: var(--radius-full);

  overflow: hidden;

  border: 1px solid var(--offwhite-400);

  position: relative;

}

.festive-progress-bar {

  height: 100%;

  background: repeating-linear-gradient(

    45deg,

    #8f171c,

    #8f171c 12px,

    #c59b27 12px,

    #c59b27 24px,

    #2e7d32 24px,

    #2e7d32 36px

  );

  border-radius: var(--radius-full);

  transition: width 1s ease;

  position: relative;

}

.festive-milestones {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 0.5rem;

  margin-top: 0.75rem;

  font-size: 0.75rem;

  color: var(--ink-600);

  text-align: center;

}

.milestone-node {

  background: #fbf8f2;

  padding: 0.35rem 0.25rem;

  border-radius: var(--radius-sm);

  border: 1px solid var(--offwhite-400);

}

.milestone-node.done {

  border-color: var(--gold-500);

  color: var(--crimson-800);

  font-weight: 700;

  background: #ffffff;

}

/* Direct UPI & Mobile 1-Tap Links */

.bethlehem-actions {

  background: #faf6ee;

  border: 1.5px solid var(--gold-400);

  border-radius: var(--radius-md);

  padding: 1.5rem;

  text-align: center;

}

.christmas-qr-box {

  width: 140px;

  height: 140px;

  margin: 0.5rem auto 1rem;

  padding: 0.4rem;

  background: #ffffff;

  border-radius: var(--radius-sm);

  border: 1.5px solid var(--gold-400);

  display: flex;

  align-items: center;

  justify-content: center;

}

.christmas-qr-box img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}

.upi-mobile-links {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

  margin-top: 1rem;

}

.btn-mobile-upi {

  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));

  color: var(--white) !important;

  font-weight: 700;

  font-size: 0.88rem;

  padding: 0.65rem 1rem;

  border-radius: var(--radius-sm);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  box-shadow: var(--shadow-sm);

  transition: var(--transition-fast);

  text-decoration: none;

}

.btn-mobile-upi:hover {

  background: linear-gradient(135deg, var(--gold-600), var(--gold-700));

  transform: translateY(-2px);

  box-shadow: 0 4px 15px rgba(197, 155, 39, 0.35);

}

.btn-phonepe-upi {

  background: #5f259f;

  color: #ffffff !important;

  font-weight: 700;

  font-size: 0.88rem;

  padding: 0.65rem 1rem;

  border-radius: var(--radius-sm);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  box-shadow: var(--shadow-sm);

  transition: var(--transition-fast);

  text-decoration: none;

}

.btn-phonepe-upi:hover {

  background: #4d1d82;

  transform: translateY(-2px);

}

/* ==========================================================================

   INTERACTIVE LIGHT A CHRISTMAS STAR NIGHT SKY

   ========================================================================== */

.sky-canvas-wrapper {

  position: relative;

  background: linear-gradient(180deg, #0e1b3d 0%, #162754 60%, #1d3369 90%, #0d172e 100%);

  border: 3px solid var(--gold-400);

  border-radius: var(--radius-lg);

  min-height: 480px;

  overflow: hidden;

  margin-bottom: 3.5rem;

  box-shadow: 0 10px 35px rgba(80, 60, 30, 0.15);

}

.sky-church-silhouette {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 160px;

  background: url('../images/SHC%20Images/Propossed%20Church%20001.png') center bottom/cover no-repeat;

  filter: brightness(0.2) contrast(1.5) grayscale(0.8);

  opacity: 0.45;

  pointer-events: none;

  mask-image: linear-gradient(to top, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);

  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);

}

.sky-header-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 1.25rem 1.75rem;

  background: rgba(253, 251, 247, 0.96);

  backdrop-filter: blur(8px);

  border-bottom: 2px solid var(--gold-400);

  position: relative;

  z-index: 3;

  flex-wrap: wrap;

  gap: 0.75rem;

}

.sky-header-bar h3 {

  font-family: var(--font-gothic);

  font-size: 1.3rem;

  color: var(--crimson-800) !important;

  margin: 0;

}

.sky-header-bar small {

  color: var(--ink-600) !important;

}

.sky-stats-badge {

  background: var(--gold-100);

  border: 1.5px solid var(--gold-500);

  color: var(--crimson-800);

  padding: 0.35rem 0.95rem;

  border-radius: var(--radius-full);

  font-size: 0.85rem;

  font-weight: 700;

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

}

.sky-stars-stage {

  position: relative;

  min-height: 400px;

  padding: 2rem;

  z-index: 2;

}

/* Individual Illuminated Christmas Star */

.christmas-star-item {

  position: absolute;

  cursor: pointer;

  transform: translate(-50%, -50%);

  transition: transform 0.25s ease, filter 0.25s ease;

  z-index: 5;

}

.christmas-star-item:hover {

  transform: translate(-50%, -50%) scale(1.35);

  z-index: 10;

}

.star-icon-wrap {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}

.star-svg {

  width: 32px;

  height: 32px;

  fill: #ffd700;

  filter: drop-shadow(0 0 10px #ffb703) drop-shadow(0 0 20px #fb8500);

  animation: starPulse 2.2s infinite alternate ease-in-out;

}

@keyframes starPulse {

  0% { transform: scale(0.92); filter: drop-shadow(0 0 6px #ffd166); }

  50% { transform: scale(1.08); filter: drop-shadow(0 0 18px #ffb703) drop-shadow(0 0 28px #fb8500); }

  100% { transform: scale(0.96); filter: drop-shadow(0 0 8px #ffd166); }

}

.star-donor-tag {

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%);

  background: rgba(255, 255, 255, 0.92);

  border: 1px solid var(--gold-500);

  color: var(--crimson-800);

  font-size: 0.72rem;

  font-weight: 700;

  padding: 0.15rem 0.45rem;

  border-radius: var(--radius-sm);

  white-space: nowrap;

  pointer-events: none;

  margin-top: 3px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.3);

}

/* Star Detail Popover */

.star-popover-card {

  position: fixed;

  bottom: 2rem;

  left: 50%;

  transform: translateX(-50%);

  background: #ffffff;

  border: 2px solid var(--gold-500);

  border-radius: var(--radius-md);

  padding: 1.25rem 1.75rem;

  color: var(--ink-900);

  box-shadow: 0 10px 40px rgba(80, 60, 30, 0.2);

  z-index: 1000;

  max-width: 440px;

  width: 90%;

  display: none;

}

.star-popover-card.active {

  display: block;

}

/* ==========================================================================

   NEW CHURCH CONSTRUCTION & BUILDING FUND (Warm Off-White Sanctuary)

   ========================================================================== */

.building-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;

  align-items: center;

  margin-bottom: 4rem;

}

.building-visual-card {

  position: relative;

}

.image-stack {

  position: relative;

}

.main-image-gothic {

  border-radius: var(--radius-lg);

  box-shadow: 0 12px 35px rgba(80, 60, 30, 0.12);

  border: 3px solid var(--gold-400);

  width: 100%;

  height: 380px;

  object-fit: cover;

}

.inset-image-construction {

  position: absolute;

  bottom: -25px;

  right: -25px;

  width: 52%;

  height: 230px;

  object-fit: cover;

  border-radius: var(--radius-md);

  border: 4px solid var(--white);

  box-shadow: 0 12px 30px rgba(80, 60, 30, 0.15);

}

.building-vision-content h3 {

  font-family: var(--font-gothic);

  font-size: 1.7rem;

  color: var(--crimson-800);

  margin-bottom: 1rem;

}

.building-vision-content p {

  color: var(--ink-700);

  margin-bottom: 1.25rem;

  font-size: 1.02rem;

}

.features-list {

  list-style: none;

  margin-bottom: 1.75rem;

}

.features-list li {

  display: flex;

  align-items: flex-start;

  gap: 0.75rem;

  margin-bottom: 0.75rem;

  font-size: 0.96rem;

  color: var(--ink-800);

}

.features-list li svg {

  color: var(--crimson-700);

  flex-shrink: 0;

  margin-top: 3px;

}

/* Sponsorship Packages Grid (Clean 4-Card Off-White Polish) */

.sponsorship-cards-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 1.5rem;

  margin-bottom: 3.5rem;

}

.sponsor-card {

  background: var(--white);

  border: 1.5px solid var(--offwhite-400);

  border-radius: var(--radius-md);

  padding: 1.75rem;

  box-shadow: var(--shadow-sm);

  transition: var(--transition-base);

  position: relative;

  display: flex;

  flex-direction: column;

}

.sponsor-card:hover {

  transform: translateY(-5px);

  border-color: var(--gold-500);

  box-shadow: 0 12px 30px rgba(197, 155, 39, 0.18);

}

.sponsor-card.featured {

  border: 2px solid var(--gold-500);

  background: linear-gradient(180deg, #fffdf8, #ffffff);

}

.sponsor-card-badge {

  position: absolute;

  top: -12px;

  right: 1.5rem;

  background: var(--crimson-800);

  color: var(--white);

  font-size: 0.72rem;

  font-weight: 700;

  padding: 0.2rem 0.65rem;

  border-radius: var(--radius-full);

  text-transform: uppercase;

  letter-spacing: 0.05em;

}

.sponsor-icon-wrap {

  width: 48px;

  height: 48px;

  background: var(--gold-100);

  color: var(--crimson-800);

  border: 1px solid var(--gold-400);

  border-radius: var(--radius-md);

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1rem;

}

.sponsor-amount {

  font-family: var(--font-gothic);

  font-size: 1.6rem;

  color: var(--crimson-800);

  font-weight: 800;

  margin-bottom: 0.25rem;

}

.sponsor-name {

  font-size: 1.1rem;

  font-weight: 700;

  color: var(--ink-900);

  margin-bottom: 0.6rem;

}

.sponsor-desc {

  font-size: 0.9rem;

  color: var(--ink-600);

  margin-bottom: 1.5rem;

  flex-grow: 1;

}

.btn-select-sponsor {

  width: 100%;

  background: var(--offwhite-100);

  border: 1.5px solid var(--offwhite-400);

  color: var(--ink-800);

  font-weight: 600;

  padding: 0.65rem 1rem;

  border-radius: var(--radius-sm);

  cursor: pointer;

  transition: var(--transition-fast);

}

.sponsor-card:hover .btn-select-sponsor,

.sponsor-card.featured .btn-select-sponsor {

  background: var(--crimson-800);

  border-color: var(--crimson-800);

  color: var(--white);

}

/* Bank Details & UPI Transfer Box (Luminous Warm Ivory Finish) */

.donation-methods-wrap {

  background: linear-gradient(135deg, #ffffff 0%, #faf6ed 100%);

  color: var(--ink-900);

  border: 2px solid var(--gold-400);

  border-radius: var(--radius-lg);

  padding: 2.5rem;

  box-shadow: 0 12px 35px rgba(80, 60, 30, 0.09);

}

.donation-methods-grid {

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  gap: 2.5rem;

  align-items: center;

}

.bank-details-box h3 {

  font-family: var(--font-gothic);

  font-size: 1.5rem;

  color: var(--crimson-800);

  margin-bottom: 0.5rem;

}

.bank-detail-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.75rem 0;

  border-bottom: 1px solid var(--offwhite-300);

  font-size: 0.94rem;

}

.bank-detail-item .lbl {

  color: var(--ink-600);

  font-weight: 500;

}

.bank-detail-item .val {

  font-weight: 700;

  color: var(--crimson-800);

  font-family: monospace;

  font-size: 1rem;

  display: flex;

  align-items: center;

  gap: 0.5rem;

}

.btn-copy {

  background: var(--gold-100);

  border: 1px solid var(--gold-400);

  color: var(--gold-700);

  font-size: 0.75rem;

  font-weight: 700;

  padding: 0.2rem 0.55rem;

  border-radius: var(--radius-sm);

  cursor: pointer;

  transition: var(--transition-fast);

}

.btn-copy:hover {

  background: var(--gold-500);

  color: var(--white);

}

.upi-qr-card {

  background: var(--white);

  color: var(--ink-900);

  border-radius: var(--radius-md);

  border: 1.5px solid var(--gold-400);

  padding: 1.5rem;

  text-align: center;

  box-shadow: var(--shadow-sm);

}

.upi-qr-card h4 {

  font-family: var(--font-gothic);

  font-size: 1.1rem;

  color: var(--crimson-800);

  margin-bottom: 0.5rem;

}

.qr-code-display {

  width: 180px;

  height: 180px;

  margin: 0.75rem auto;

  padding: 0.5rem;

  border: 2px dashed var(--gold-400);

  border-radius: var(--radius-sm);

  background: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

}

.upi-apps-row {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.75rem;

  margin-top: 0.75rem;

}

.upi-pill {

  font-size: 0.75rem;

  font-weight: 700;

  background: var(--offwhite-200);

  border: 1px solid var(--offwhite-400);

  padding: 0.2rem 0.6rem;

  border-radius: var(--radius-full);

  color: var(--ink-700);

}

/* ==========================================================================

   DEVOTIONS & INTERCESSIONS (The 4 Sacred Pillars)

   ========================================================================== */

.devotions-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 2rem;

}

.devotion-card {

  background: var(--white);

  border-radius: var(--radius-lg);

  overflow: hidden;

  border: 1.5px solid var(--offwhite-400);

  box-shadow: var(--shadow-md);

  transition: var(--transition-base);

  display: flex;

  flex-direction: column;

}

.devotion-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 14px 35px rgba(80, 60, 30, 0.12);

  border-color: var(--gold-500);

}

.devotion-card-img-wrap {

  position: relative;

  height: 390px;

  overflow: hidden;

  background: radial-gradient(circle at 50% 30%, #fffef8 0%, #f4ede0 100%);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 46px 12px 12px 12px;

  border-bottom: 1.5px solid #e8d7b8;

}

.devotion-card-img-wrap img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: center bottom;

  filter: drop-shadow(0 6px 16px rgba(60, 40, 15, 0.15));

  transition: transform 0.4s ease;

}

.devotion-card:hover .devotion-card-img-wrap img {

  transform: scale(1.03);

}

.devotion-category-tag {

  position: absolute;

  top: 0.75rem;

  left: 50%;

  transform: translateX(-50%);

  white-space: nowrap;

  max-width: 90%;

  text-overflow: ellipsis;

  overflow: hidden;

  background: rgba(255, 255, 255, 0.95);

  border: 1px solid var(--gold-400);

  color: var(--crimson-800);

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.3px;

  padding: 0.25rem 0.75rem;

  border-radius: 20px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  z-index: 2;

}

.devotion-card-body {

  padding: 1.75rem;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

}

.devotion-card-title {

  font-family: var(--font-gothic);

  font-size: 1.35rem;

  color: var(--crimson-800);

  margin-bottom: 0.35rem;

  line-height: 1.2;

}

.devotion-card-subtitle {

  font-size: 0.85rem;

  font-weight: 600;

  color: var(--gold-700);

  margin-bottom: 1rem;

}

.devotion-card-desc {

  font-size: 0.92rem;

  color: var(--ink-600);

  line-height: 1.6;

  margin-bottom: 1.5rem;

  flex-grow: 1;

}

.devotion-card-actions {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  border-top: 1px solid var(--offwhite-300);

  padding-top: 1.25rem;

}

.btn-read-prayer {

  flex: 1;

  background: var(--offwhite-100);

  border: 1px solid var(--offwhite-400);

  color: var(--ink-800);

  font-weight: 600;

  font-size: 0.88rem;

  padding: 0.6rem;

  border-radius: var(--radius-sm);

  cursor: pointer;

  text-align: center;

  transition: var(--transition-fast);

}

.btn-read-prayer:hover {

  background: var(--crimson-800);

  color: var(--white);

  border-color: var(--crimson-800);

}

.btn-intercede-now {

  background: var(--gold-100);

  border: 1px solid var(--gold-500);

  color: var(--crimson-800);

  font-weight: 700;

  font-size: 0.88rem;

  padding: 0.6rem 0.85rem;

  border-radius: var(--radius-sm);

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

}

.btn-intercede-now:hover {

  background: var(--gold-500);

  color: var(--white);

}

/* ==========================================================================

   PRAYER REQUEST SYSTEM & VIRTUAL CANDLE ALTAR (Off-White Marble Chapel)

   ========================================================================== */

.prayer-system-section {

  background: linear-gradient(180deg, #f7f3ea 0%, #ede6d6 100%);

  color: var(--ink-900);

  position: relative;

  overflow: hidden;

  border-top: 3px solid var(--gold-400);

  border-bottom: 3px solid var(--gold-400);

}

.candle-altar-stage {

  background: #ffffff;

  border: 2px solid var(--gold-400);

  border-radius: var(--radius-lg);

  padding: 2.5rem 1.5rem 2rem;

  margin-bottom: 3.5rem;

  position: relative;

  box-shadow: 0 10px 35px rgba(80, 60, 30, 0.09);

}

.altar-tabernacle-icon {

  text-align: center;

  color: var(--crimson-800);

  margin-bottom: 1.5rem;

}

.altar-tabernacle-icon svg {

  width: 44px;

  height: 44px;

}

.altar-heading {

  font-family: var(--font-gothic);

  font-size: 1.6rem;

  text-align: center;

  color: var(--crimson-800);

  margin-bottom: 0.5rem;

}

.altar-subtext {

  text-align: center;

  color: var(--ink-600);

  font-size: 0.95rem;

  max-width: 600px;

  margin: 0 auto 2.5rem;

}

/* Realistic Virtual Candles on Church Votive Altar Rack */

.candle-stage-instruction {

  display: flex;

  justify-content: center;

  margin-bottom: 1.25rem;

}

.candle-hint-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.6rem;

  padding: 0.5rem 1.25rem;

  background: #fff8e6;

  border: 1.5px solid var(--gold-400);

  border-radius: 50px;

  color: var(--crimson-900);

  font-size: 0.88rem;

  font-weight: 600;

  box-shadow: 0 3px 10px rgba(184, 134, 11, 0.12);

}

.candle-pulse-dot {

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: #ff9800;

  box-shadow: 0 0 10px #ff9800, 0 0 18px #ff5722;

  animation: pulseGlow 1.5s infinite alternate ease-in-out;

}

@keyframes pulseGlow {

  0% { transform: scale(0.85); opacity: 0.6; }

  100% { transform: scale(1.25); opacity: 1; }

}

/* Authentic Church Tiered Votive Stand */

.candles-rack-wrapper {

  background: radial-gradient(ellipse at 50% 25%, #2a1a0c 0%, #160c04 75%, #0d0702 100%);

  border: 2px solid #d4af37;

  border-radius: 14px;

  padding: 2.25rem 1.5rem 0.5rem;

  box-shadow: inset 0 4px 25px rgba(0, 0, 0, 0.85), 0 12px 35px rgba(60, 40, 15, 0.25);

  position: relative;

  overflow: hidden;

}

.candles-rack-wrapper::before {

  content: '';

  position: absolute;

  top: 15px;

  left: 5%;

  right: 5%;

  height: 80px;

  background: radial-gradient(ellipse, rgba(255, 183, 3, 0.2) 0%, transparent 70%);

  pointer-events: none;

}

.candles-shelf {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 1.25rem;

  min-height: 240px;

  padding: 0 0.5rem 1.25rem;

  position: relative;

  z-index: 2;

  width: 100%;

}

/* Line 1: Top Horizontal Line of Exactly 8 Candles */

.candle-tier-top {

  display: grid !important;

  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;

  width: 100% !important;

  max-width: 880px !important;

  margin: 0 auto !important;

  justify-items: center !important;

  align-items: end !important;

  gap: 0.35rem !important;

  padding-bottom: 0.35rem;

  z-index: 2;

}

/* Brass Divider Shelf Rail between the 2 Horizontal Lines */

.candle-tier-divider {

  width: 96%;

  max-width: 880px;

  height: 5px;

  background: linear-gradient(90deg, transparent, #b8860b 15%, #ffe08a 50%, #b8860b 85%, transparent);

  border-radius: 3px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);

  margin: 0 auto;

}

/* Line 2: Second Horizontal Line of Exactly 6 Candles */

.candle-tier-bottom {

  display: grid !important;

  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;

  width: 100% !important;

  max-width: 660px !important;

  margin: 0 auto !important;

  justify-items: center !important;

  align-items: end !important;

  gap: 0.45rem !important;

  padding-top: 0.35rem;

  z-index: 3;

}

.candle-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  cursor: pointer;

  position: relative;

  padding: 0.35rem 0.25rem;

  border-radius: 10px;

  width: 100%;

  max-width: 95px;

  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, box-shadow 0.2s ease;

  user-select: none;

  transform: none !important;

}

.candle-item:hover {

  transform: translateY(-8px) scale(1.08) !important;

  background: rgba(255, 255, 255, 0.1);

  z-index: 10;

}

.candle-item.active {

  background: rgba(212, 175, 55, 0.28);

  box-shadow: 0 0 22px rgba(255, 193, 7, 0.75), inset 0 0 12px rgba(255, 215, 0, 0.45);

  border: 1.5px solid rgba(255, 215, 0, 0.85);

  transform: translateY(-8px) scale(1.1) !important;

  z-index: 15 !important;

}

  border: 1.5px solid rgba(255, 215, 0, 0.85);

  transform: translateY(-14px) scale(1.18) !important;

  z-index: 15 !important;

}

.candle-halo {

  position: absolute;

  top: -8px;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(255, 215, 0, 0.5) 0%, rgba(255, 140, 0, 0.2) 50%, transparent 72%);

  pointer-events: none;

  animation: haloPulse 2.2s infinite alternate ease-in-out;

}

@keyframes haloPulse {

  0% { transform: scale(0.88); opacity: 0.75; }

  100% { transform: scale(1.18); opacity: 1; }

}

.candle-flame {

  width: 15px;

  height: 26px;

  background: radial-gradient(ellipse at 50% 80%, #ffffff 0%, #ffea78 25%, #ff9100 65%, #dd2c00 100%);

  border-radius: 50% 50% 35% 35%;

  filter: drop-shadow(0 0 10px #ffc107) drop-shadow(0 0 18px #ff6d00);

  animation: flicker 1.3s infinite alternate ease-in-out;

  transform-origin: center bottom;

  position: relative;

  z-index: 2;

}

@keyframes flicker {

  0% { transform: rotate(-2deg) scale(0.96); opacity: 0.92; }

  25% { transform: rotate(2deg) scale(1.05); opacity: 1; }

  50% { transform: rotate(-1.5deg) scale(0.94); opacity: 0.88; }

  75% { transform: rotate(1.5deg) scale(1.03); opacity: 0.97; }

  100% { transform: rotate(-2deg) scale(1); opacity: 1; }

}

.candle-wick {

  width: 2.5px;

  height: 8px;

  background-color: #1a1a1a;

  border-radius: 1px;

  margin-bottom: -1px;

  position: relative;

  z-index: 1;

}

.candle-wax {

  width: 28px;

  background: linear-gradient(90deg, #d4a754 0%, #fff7d6 30%, #ffebb3 65%, #c89532 100%);

  border-radius: 4px 4px 0 0;

  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.4);

  position: relative;

  border: 1px solid rgba(255, 255, 255, 0.25);

}

.candle-wax::after {

  content: '';

  position: absolute;

  top: 0;

  left: 2px;

  right: 2px;

  height: 3px;

  background: #fffcf2;

  border-radius: 50%;

}

.candle-brass-base {

  width: 38px;

  height: 11px;

  background: linear-gradient(180deg, #ffd777 0%, #c99326 50%, #7d5408 100%);

  border-radius: 0 0 5px 5px;

  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);

  border: 1px solid #ffe391;

  margin-top: -1px;

}

.candle-donor-label {

  font-size: 0.76rem;

  color: #fce7b0;

  font-weight: 600;

  margin-top: 0.5rem;

  max-width: 95px;

  text-align: center;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);

}

.candle-item.active .candle-donor-label {

  color: #ffffff;

  font-weight: 700;

  text-shadow: 0 0 10px rgba(255, 215, 0, 0.9);

}

.candles-rack-brass-rail {

  background: linear-gradient(90deg, #6e460b 0%, #d4a742 20%, #ffe08a 50%, #d4a742 80%, #6e460b 100%);

  color: #2b1802;

  text-align: center;

  font-family: var(--font-gothic);

  font-weight: 800;

  font-size: 0.78rem;

  letter-spacing: 2px;

  padding: 0.5rem 1rem;

  border-radius: 0 0 10px 10px;

  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3), 0 3px 8px rgba(0, 0, 0, 0.4);

  border-top: 1px solid #fff2b8;

}

/* Prominent Devotee Prayer Intention Display Card */

.candle-intention-showcase {

  margin-top: 1.75rem;

  background: #fffdf9;

  border: 2px solid var(--gold-400);

  border-radius: 14px;

  padding: 1.75rem 2rem;

  box-shadow: 0 10px 30px rgba(184, 134, 11, 0.12);

  position: relative;

  transition: all 0.3s ease;

}

.candle-showcase-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 1rem;

  padding-bottom: 1rem;

  border-bottom: 1px dashed var(--gold-300);

  margin-bottom: 1.25rem;

}

.candle-showcase-devotee {

  display: flex;

  align-items: center;

  gap: 0.75rem;

}

.candle-showcase-flame-icon {

  font-size: 1.75rem;

  filter: drop-shadow(0 0 8px #ff9800);

  line-height: 1;

}

.candle-showcase-name {

  font-size: 1.2rem;

  font-weight: 700;

  color: var(--crimson-900);

  font-family: var(--font-gothic);

  display: flex;

  align-items: center;

  gap: 0.5rem;

}

.candle-showcase-location {

  font-size: 0.85rem;

  color: var(--ink-500);

  font-weight: 500;

  display: block;

  margin-top: 2px;

}

.candle-showcase-patron-badge {

  background: #fdf3d8;

  border: 1px solid var(--gold-400);

  color: var(--crimson-900);

  padding: 0.4rem 0.95rem;

  border-radius: 50px;

  font-size: 0.84rem;

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  box-shadow: 0 2px 6px rgba(184, 134, 11, 0.08);

}

.candle-showcase-body {

  background: #faf6ed;

  border-left: 4px solid var(--gold-500);

  border-radius: 0 8px 8px 0;

  padding: 1.25rem 1.5rem;

  margin-bottom: 1.25rem;

  position: relative;

}

.candle-showcase-quote-mark {

  font-family: var(--font-serif);

  font-size: 2.2rem;

  line-height: 1;

  color: var(--gold-400);

  position: absolute;

  top: 6px;

  left: 8px;

  opacity: 0.5;

}

.candle-showcase-intention {

  font-family: var(--font-serif);

  font-size: 1.15rem;

  line-height: 1.65;

  color: var(--crimson-900);

  font-style: italic;

  margin: 0;

  padding-left: 1.25rem;

}

.candle-showcase-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 1rem;

}

.candle-showcase-status {

  font-size: 0.85rem;

  color: var(--ink-600);

  display: flex;

  align-items: center;

  gap: 0.4rem;

}

.candle-showcase-actions {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  flex-wrap: wrap;

}

.btn-candle-amen {

  background: #fff8e6;

  border: 1.5px solid var(--gold-500);

  color: var(--crimson-900);

  padding: 0.5rem 1.15rem;

  border-radius: 50px;

  font-weight: 700;

  font-size: 0.88rem;

  cursor: pointer;

  transition: all 0.2s ease;

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

}

.btn-candle-amen:hover {

  background: var(--gold-500);

  color: #ffffff;

  transform: scale(1.03);

}

.btn-candle-light-own {

  background: linear-gradient(135deg, var(--crimson-800), var(--crimson-900));

  color: #ffffff;

  border: none;

  padding: 0.5rem 1.2rem;

  border-radius: 50px;

  font-weight: 600;

  font-size: 0.88rem;

  cursor: pointer;

  transition: all 0.2s ease;

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

}

.btn-candle-light-own:hover {

  background: var(--crimson-900);

  box-shadow: 0 4px 12px rgba(114, 28, 36, 0.25);

  transform: translateY(-2px);

}

.candle-nav-btns {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

}

.btn-candle-nav {

  background: #ffffff;

  border: 1px solid var(--gold-400);

  color: var(--ink-700);

  width: 34px;

  height: 34px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  font-size: 0.9rem;

  font-weight: 700;

  transition: all 0.2s;

}

.btn-candle-nav:hover {

  background: var(--gold-500);

  color: #fff;

}

.candle-counter-badge {

  font-size: 0.8rem;

  color: var(--ink-500);

  font-weight: 600;

  margin: 0 0.25rem;

}

/* Prayer Request Form & Wall Split */

.prayer-interactive-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;

}

.prayer-form-card {

  background: #ffffff;

  border: 1.5px solid var(--gold-400);

  border-radius: var(--radius-lg);

  padding: 2.25rem;

  box-shadow: 0 10px 30px rgba(80, 60, 30, 0.08);

}

.prayer-form-card h3 {

  font-family: var(--font-gothic);

  font-size: 1.4rem;

  color: var(--crimson-800);

  margin-bottom: 0.5rem;

}

.prayer-form-card p {

  color: var(--ink-600);

  font-size: 0.92rem;

  margin-bottom: 1.75rem;

}

.form-group {

  margin-bottom: 1.25rem;

}

.form-group label {

  display: block;

  font-size: 0.85rem;

  font-weight: 600;

  color: var(--ink-700);

  margin-bottom: 0.4rem;

}

.form-control {

  width: 100%;

  background: var(--offwhite-50);

  border: 1.5px solid var(--offwhite-400);

  border-radius: var(--radius-sm);

  padding: 0.75rem 1rem;

  color: var(--ink-900);

  font-size: 0.95rem;

  transition: var(--transition-fast);

}

.form-control:focus {

  outline: none;

  border-color: var(--gold-500);

  background: #ffffff;

  box-shadow: 0 0 10px rgba(197, 155, 39, 0.25);

}

.form-control::placeholder {

  color: var(--ink-400);

}

.checkbox-group {

  display: flex;

  align-items: center;

  gap: 0.6rem;

  margin: 1.25rem 0;

  font-size: 0.88rem;

  color: var(--ink-700);

  cursor: pointer;

}

.btn-submit-prayer {

  width: 100%;

  background: linear-gradient(135deg, var(--crimson-800), var(--crimson-700));

  color: var(--white);

  font-weight: 700;

  padding: 0.85rem;

  border-radius: var(--radius-sm);

  border: 1px solid var(--gold-400);

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  font-size: 1rem;

  box-shadow: 0 4px 15px rgba(143, 23, 28, 0.25);

  transition: var(--transition-fast);

}

.btn-submit-prayer:hover {

  background: linear-gradient(135deg, var(--crimson-900), var(--crimson-800));

  transform: translateY(-2px);

  box-shadow: var(--shadow-crimson);

}

/* Live Prayer Wall */

.prayer-wall-card {

  display: flex;

  flex-direction: column;

}

.prayer-wall-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 1.5rem;

}

.prayer-wall-header h3 {

  font-family: var(--font-gothic);

  font-size: 1.4rem;

  color: var(--crimson-800);

  margin: 0;

}

.prayer-wall-counter-badge {

  background: var(--gold-100);

  border: 1px solid var(--gold-500);

  color: var(--crimson-800);

  font-size: 0.78rem;

  font-weight: 700;

  padding: 0.25rem 0.65rem;

  border-radius: var(--radius-full);

}

.prayer-cards-stream {

  display: flex;

  flex-direction: column;

  gap: 1rem;

  max-height: 540px;

  overflow-y: auto;

  padding-right: 0.5rem;

}

.prayer-cards-stream::-webkit-scrollbar {

  width: 6px;

}

.prayer-cards-stream::-webkit-scrollbar-track {

  background: var(--offwhite-300);

}

.prayer-cards-stream::-webkit-scrollbar-thumb {

  background: var(--gold-500);

  border-radius: var(--radius-full);

}

.wall-prayer-card {

  background: #ffffff;

  border: 1.5px solid var(--offwhite-400);

  border-radius: var(--radius-md);

  padding: 1.25rem;

  box-shadow: var(--shadow-sm);

  transition: var(--transition-fast);

}

.wall-prayer-card:hover {

  border-color: var(--gold-500);

  box-shadow: 0 6px 20px rgba(80, 60, 30, 0.08);

}

.wall-prayer-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 0.5rem;

  font-size: 0.8rem;

}

.wall-devotee-name {

  font-weight: 700;

  color: var(--crimson-800);

}

.wall-target-saint {

  background: var(--gold-100);

  color: var(--gold-700);

  border: 1px solid var(--gold-400);

  padding: 0.15rem 0.5rem;

  border-radius: var(--radius-sm);

  font-size: 0.72rem;

  font-weight: 600;

}

.wall-prayer-text {

  font-size: 0.92rem;

  color: var(--ink-800);

  line-height: 1.5;

  margin-bottom: 0.75rem;

  font-style: italic;

}

.wall-prayer-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 0.78rem;

  color: var(--ink-500);

  border-top: 1px solid var(--offwhite-300);

  padding-top: 0.5rem;

}

.btn-pray-amen {

  background: var(--gold-100);

  border: 1px solid var(--gold-400);

  color: var(--crimson-800);

  font-weight: 700;

  padding: 0.25rem 0.65rem;

  border-radius: var(--radius-full);

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  font-size: 0.75rem;

  transition: var(--transition-fast);

}

.btn-pray-amen:hover,

.btn-pray-amen.prayed {

  background: var(--crimson-800);

  border-color: var(--crimson-800);

  color: var(--white);

}

/* ==========================================================================

   HISTORY & HERITAGE TIMELINE (Off-White Marble Finish)

   ========================================================================== */

.timeline-wrap {

  position: relative;

  max-width: 900px;

  margin: 0 auto;

  padding: 2rem 0;

}

.timeline-wrap::before {

  content: "";

  position: absolute;

  top: 0;

  bottom: 0;

  left: 50%;

  width: 2px;

  background: var(--gold-400);

  transform: translateX(-50%);

}

.timeline-node {

  position: relative;

  margin-bottom: 3rem;

  display: flex;

  width: 100%;

}

.timeline-node:nth-child(odd) {

  justify-content: flex-start;

}

.timeline-node:nth-child(even) {

  justify-content: flex-end;

}

.timeline-card {

  width: 44%;

  background: var(--white);

  border: 1.5px solid var(--offwhite-400);

  border-radius: var(--radius-md);

  padding: 1.75rem;

  box-shadow: var(--shadow-sm);

  position: relative;

}

.timeline-node:nth-child(odd) .timeline-card {

  text-align: right;

}

.timeline-year-badge {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 54px;

  height: 54px;

  background: var(--crimson-800);

  color: var(--white);

  border: 3px solid var(--gold-400);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-gothic);

  font-weight: 700;

  font-size: 0.85rem;

  box-shadow: var(--shadow-md);

  z-index: 2;

}

.timeline-card h4 {

  font-family: var(--font-gothic);

  font-size: 1.15rem;

  color: var(--crimson-800);

  margin-bottom: 0.5rem;

}

.timeline-card p {

  font-size: 0.92rem;

  color: var(--ink-600);

  line-height: 1.55;

}

/* ==========================================================================

   MASS TIMINGS & LITURGICAL TIMETABLE

   ========================================================================== */

.timetable-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2rem;

}

.timetable-card {

  background: var(--white);

  border-radius: var(--radius-lg);

  padding: 2.25rem;

  border: 1.5px solid var(--offwhite-400);

  box-shadow: var(--shadow-md);

  position: relative;

  overflow: hidden;

}

.timetable-card::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 4px;

  background: linear-gradient(90deg, var(--gold-500), var(--crimson-700));

}

.timetable-card-head {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  margin-bottom: 1.75rem;

  color: var(--crimson-800);

}

.timetable-card-head h3 {

  font-family: var(--font-gothic);

  font-size: 1.35rem;

  margin: 0;

}

.mass-schedule-list {

  list-style: none;

}

.mass-schedule-item {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  padding: 1rem 0;

  border-bottom: 1px solid var(--offwhite-300);

}

.mass-schedule-item:last-child {

  border-bottom: none;

}

.mass-time-badge {

  background: var(--crimson-800);

  color: var(--white);

  border: 1px solid var(--gold-400);

  font-weight: 700;

  font-size: 0.82rem;

  padding: 0.35rem 0.75rem;

  border-radius: var(--radius-sm);

  font-family: monospace;

  white-space: nowrap;

}

.mass-info-title {

  font-weight: 700;

  color: var(--ink-900);

  font-size: 1rem;

}

.mass-info-sub {

  font-size: 0.85rem;

  color: var(--ink-600);

}

.confession-box {

  background: var(--gold-100);

  border: 1.5px solid var(--gold-400);

  border-radius: var(--radius-md);

  padding: 1.25rem;

  margin-top: 1.5rem;

  display: flex;

  align-items: center;

  gap: 1rem;

}

.confession-box svg {

  color: var(--crimson-800);

  flex-shrink: 0;

  width: 32px;

  height: 32px;

}

/* ==========================================================================

   MINISTRIES & PRAYER GROUPS

   ========================================================================== */

.ministries-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 1.5rem;

}

.ministry-card {

  background: var(--white);

  border: 1.5px solid var(--offwhite-400);

  border-radius: var(--radius-md);

  padding: 1.75rem;

  box-shadow: var(--shadow-sm);

  transition: var(--transition-fast);

}

.ministry-card:hover {

  transform: translateY(-4px);

  border-color: var(--gold-500);

  box-shadow: 0 8px 25px rgba(80, 60, 30, 0.08);

}

.ministry-icon {

  width: 44px;

  height: 44px;

  background: var(--gold-100);

  color: var(--crimson-800);

  border: 1px solid var(--gold-400);

  border-radius: var(--radius-sm);

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1.25rem;

}

.ministry-card h4 {

  font-family: var(--font-gothic);

  font-size: 1.15rem;

  color: var(--ink-900);

  margin-bottom: 0.5rem;

}

.ministry-card p {

  font-size: 0.92rem;

  color: var(--ink-600);

  line-height: 1.55;

}

/* ==========================================================================

   FILTERABLE PHOTO GALLERY & LIGHTBOX

   ========================================================================== */

.gallery-filters {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 0.65rem;

  margin-bottom: 2.5rem;

}

.filter-btn {

  background: var(--white);

  border: 1.5px solid var(--offwhite-400);

  color: var(--ink-700);

  padding: 0.5rem 1.15rem;

  border-radius: var(--radius-full);

  font-size: 0.88rem;

  font-weight: 600;

  cursor: pointer;

  box-shadow: var(--shadow-sm);

  transition: var(--transition-fast);

}

.filter-btn:hover,

.filter-btn.active {

  background: var(--crimson-800);

  color: var(--white);

  border-color: var(--crimson-800);

}

.gallery-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 1.25rem;

}

.gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 270px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--offwhite-400);
  background: radial-gradient(circle at center, #ffffff 0%, #f7f3ee 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-400);
}

.gallery-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 8px;
}

.gallery-item:hover img {
  transform: scale(1.04);
}

.gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(20, 16, 12, 0.92) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.1rem;
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

.gallery-item-title {

  color: var(--white);

  font-size: 0.95rem;

  font-weight: 700;

  margin-bottom: 0.2rem;

}

.gallery-item-cat {

  color: var(--gold-400);

  font-size: 0.75rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}

/* Lightbox Modal */

.lightbox-modal {

  position: fixed;

  inset: 0;

  background: rgba(15, 12, 10, 0.95);

  backdrop-filter: blur(14px);

  z-index: 9999;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 1.5rem;

}

.lightbox-modal.active {

  display: flex;

}

.lightbox-zoom-toolbar {

  position: absolute;

  top: 1.5rem;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  align-items: center;

  gap: 0.5rem;

  background: rgba(20, 16, 12, 0.88);

  border: 1.5px solid var(--gold-400);

  border-radius: var(--radius-full);

  padding: 0.35rem 0.85rem;

  z-index: 10001;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);

  backdrop-filter: blur(8px);

}

.lightbox-zoom-btn {

  background: none;

  border: none;

  color: var(--gold-300);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0.25rem;

  border-radius: 50%;

  transition: transform var(--transition-fast), color var(--transition-fast);

}

.lightbox-zoom-btn:hover {

  transform: scale(1.15);

  color: var(--white);

}

.lightbox-zoom-level {

  font-size: 0.82rem;

  font-weight: 700;

  color: var(--gold-200);

  min-width: 44px;

  text-align: center;

  user-select: none;

}

.lightbox-content {

  position: relative;

  max-width: 92vw;

  max-height: 90vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}

.lightbox-img-viewport {

  position: relative;

  overflow: hidden;

  max-width: 90vw;

  max-height: 74vh;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: default;

  touch-action: none;

  border-radius: var(--radius-sm);

}

.lightbox-image {

  max-width: 88vw;

  max-height: 74vh;

  width: auto;

  height: auto;

  object-fit: contain;

  border-radius: var(--radius-sm);

  border: 2px solid var(--gold-400);

  box-shadow: 0 10px 40px rgba(0,0,0,0.6);

  background: #110e0c;

  display: block;

  user-select: none;

  -webkit-user-drag: none;

  transform-origin: center center;

  transition: transform 0.12s ease-out;

}

.lightbox-caption {

  color: var(--offwhite-100);

  text-align: center;

  margin-top: 1rem;

  font-size: 1rem;

}

.lightbox-caption h4 {

  font-family: var(--font-gothic);

  color: var(--gold-300);

  margin-bottom: 0.25rem;

}

#lightbox-desc,
.lightbox-desc {
  color: #ffffff !important; /* Pure radiant alabaster white */
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  max-width: 860px;
  margin: 0.6rem auto 0.85rem !important;
  text-align: center;
  background: rgba(30, 10, 14, 0.88) !important;
  border: 1px solid rgba(223, 194, 125, 0.45) !important;
  border-radius: 8px !important;
  padding: 0.6rem 1.4rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
  letter-spacing: 0.015em;
  display: inline-block;
}

.lightbox-close {

  position: absolute;

  top: -40px;

  right: 0;

  background: none;

  border: none;

  color: var(--white);

  font-size: 2rem;

  cursor: pointer;

}

.lightbox-nav-btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: rgba(20, 16, 12, 0.85);

  border: 2px solid var(--gold-400);

  color: var(--white);

  padding: 0.55rem 0.9rem;

  border-radius: var(--radius-full);

  display: flex;

  align-items: center;

  gap: 0.5rem;

  font-size: 0.9rem;

  font-weight: 700;

  cursor: pointer;

  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7);

  backdrop-filter: blur(8px);

  z-index: 10005;

  user-select: none;

  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;

}

.lightbox-nav-btn:hover {

  background: var(--crimson-800);

  border-color: var(--gold-300);

  color: var(--white);

  transform: translateY(-50%) scale(1.08);

}

.lightbox-prev {

  left: clamp(0.75rem, 2.5vw, 2.5rem);

}

.lightbox-next {

  right: clamp(0.75rem, 2.5vw, 2.5rem);

}

.lightbox-photo-counter {

  font-size: 0.82rem;

  font-weight: 700;

  color: var(--gold-300);

  background: rgba(0, 0, 0, 0.55);

  padding: 0.25rem 0.75rem;

  border-radius: 12px;

  border: 1px solid rgba(212, 175, 55, 0.4);

  white-space: nowrap;

}

.lightbox-bottom-nav {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.85rem;

  margin-top: 0.75rem;

  width: 100%;

}

.btn-lightbox-text-nav {

  background: rgba(20, 16, 12, 0.85);

  border: 1.5px solid var(--gold-400);

  color: var(--gold-200);

  padding: 0.4rem 0.95rem;

  border-radius: 20px;

  font-size: 0.82rem;

  font-weight: 700;

  cursor: pointer;

  transition: all 0.2s ease;

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

}

.btn-lightbox-text-nav:hover {

  background: var(--crimson-800);

  color: #fff;

  border-color: var(--gold-300);

  transform: scale(1.04);

}

.btn-lightbox-text-nav:disabled,

.lightbox-nav-btn:disabled,

.btn-lightbox-text-nav.disabled,

.lightbox-nav-btn.disabled {

  opacity: 0.2;

  pointer-events: none;

  filter: grayscale(1);

}

/* ==========================================================================

   PILGRIM & LOCATION GUIDE

   ========================================================================== */

.location-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;

  align-items: center;

}

.transit-card {

  background: var(--white);

  border: 1.5px solid var(--offwhite-400);

  border-radius: var(--radius-lg);

  padding: 2.25rem;

  box-shadow: var(--shadow-md);

}

.transit-item {

  display: flex;

  align-items: flex-start;

  gap: 1rem;

  margin-bottom: 1.5rem;

}

.transit-icon {

  width: 42px;

  height: 42px;

  background: var(--gold-100);

  color: var(--crimson-800);

  border: 1px solid var(--gold-400);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.transit-item h5 {

  font-size: 1rem;

  color: var(--ink-900);

  margin-bottom: 0.2rem;

}

.transit-item p {

  font-size: 0.88rem;

  color: var(--ink-600);

  margin: 0;

}

.map-card-frame {

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: 0 10px 30px rgba(80, 60, 30, 0.1);

  border: 2px solid var(--gold-400);

  height: 420px;

}

.map-card-frame iframe {

  width: 100%;

  height: 100%;

  border: none;

}

/* ==========================================================================

   SITE FOOTER (Luminous Warm Cathedral Cloister in Off-White Stone)

   ========================================================================== */

.site-footer {

  background: #ede6d6;

  color: var(--ink-800);

  border-top: 3px solid var(--gold-500);

  padding: 4.5rem 0 2rem;

  position: relative;

}

.footer-grid {

  display: grid;

  grid-template-columns: 1.3fr 0.9fr 0.9fr 1fr;

  gap: 2.5rem;

  margin-bottom: 3.5rem;

}

.footer-col h4 {

  font-family: var(--font-gothic);

  font-size: 1.15rem;

  color: var(--crimson-800);

  margin-bottom: 1.25rem;

  letter-spacing: 0.05em;

}

.footer-col p {

  font-size: 0.9rem;

  line-height: 1.6;

  margin-bottom: 1rem;

  color: var(--ink-700);

}

.footer-links {

  list-style: none;

}

.footer-links li {

  margin-bottom: 0.6rem;

}

.footer-links a {

  font-size: 0.9rem;

  color: var(--ink-700);

  transition: var(--transition-fast);

}

.footer-links a:hover {

  color: var(--crimson-800);

  padding-left: 4px;

}

.footer-contact-item {

  display: flex;

  align-items: flex-start;

  gap: 0.75rem;

  font-size: 0.9rem;

  margin-bottom: 0.75rem;

  color: var(--ink-700);

}

.footer-contact-item svg {

  color: var(--crimson-800);

  flex-shrink: 0;

  margin-top: 3px;

}

.footer-bottom {

  border-top: 1px solid var(--offwhite-500);

  padding-top: 2rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 0.85rem;

  color: var(--ink-600);

  flex-wrap: wrap;

  gap: 1rem;

}

/* ==========================================================================

   MODALS (Pure White with Papal Gold Trim)

   ========================================================================== */

.modal-backdrop {

  position: fixed;

  inset: 0;

  background: rgba(20, 16, 12, 0.75);

  backdrop-filter: blur(8px);

  z-index: 990;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 1.5rem;

}

.modal-backdrop.active {

  display: flex;

}

.modal-dialog {

  background: var(--white);

  border-radius: var(--radius-lg);

  max-width: 600px;

  width: 100%;

  max-height: 90vh;

  overflow-y: auto;

  box-shadow: 0 20px 50px rgba(60, 45, 25, 0.25);

  border: 2px solid var(--gold-400);

  position: relative;

  padding: 2.25rem;

}

.modal-close-btn {

  position: absolute;

  top: 1.25rem;

  right: 1.25rem;

  background: none;

  border: none;

  font-size: 1.5rem;

  cursor: pointer;

  color: var(--ink-400);

  transition: var(--transition-fast);

}

.modal-close-btn:hover {

  color: var(--crimson-700);

}

/* Toast Notification Alert */

.toast-notification {

  position: fixed;

  bottom: 2rem;

  right: 2rem;

  background: #ffffff;

  color: var(--crimson-800);

  border: 1.5px solid var(--gold-500);

  padding: 0.85rem 1.35rem;

  border-radius: var(--radius-md);

  box-shadow: 0 10px 30px rgba(80, 60, 30, 0.18);

  z-index: 1000;

  display: flex;

  align-items: center;

  gap: 0.75rem;

  font-weight: 600;

  transform: translateY(100px);

  opacity: 0;

  transition: all var(--transition-base);

}

.toast-notification.show {

  transform: translateY(0);

  opacity: 1;

}

/* Floating Seasonal Action Pill */

.floating-christmas-pill {

  position: fixed;

  bottom: 2rem;

  left: 2rem;

  background: linear-gradient(135deg, var(--crimson-800), var(--crimson-700));

  color: var(--white) !important;

  border: 2px solid var(--gold-400);

  border-radius: var(--radius-full);

  padding: 0.65rem 1.25rem;

  font-size: 0.88rem;

  font-weight: 700;

  box-shadow: 0 4px 20px rgba(143, 23, 28, 0.35);

  z-index: 85;

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  transition: transform var(--transition-fast);

  cursor: pointer;

  text-decoration: none;

}

.floating-christmas-pill:hover {

  transform: translateY(-3px) scale(1.03);

}

/* ==========================================================================

   RESPONSIVE MEDIA QUERIES

   ========================================================================== */

@media (max-width: 1024px) {

  .hero-grid,

  .building-grid,

  .donation-methods-grid,

  .prayer-interactive-grid,

  .timetable-grid,

  .location-grid,

  .bethlehem-grid {

    grid-template-columns: 1fr;

    gap: 2.5rem;

  }

  .timeline-wrap::before {

    left: 20px;

  }

  .timeline-node {

    justify-content: flex-start !important;

  }

  .timeline-card {

    width: calc(100% - 60px);

    margin-left: 60px;

    text-align: left !important;

  }

  .timeline-year-badge {

    left: 20px;

  }

  .footer-grid {

    grid-template-columns: 1fr 1fr;

  }

}

@media (max-width: 768px) {

  .header-action-btns {

    flex-direction: row;

    align-items: center;

    gap: 0.5rem;

  }

  .header-inner {

    flex-wrap: wrap;

    gap: 0.5rem;

  }

  .nav-links {

    order: 3;

    width: 100%;

    overflow-x: auto;

    white-space: nowrap;

    padding: 0.4rem 0 0.2rem;

    gap: 0.85rem;

    -webkit-overflow-scrolling: touch;

  }

  .mobile-menu-btn {

    display: none !important;

  }

  .hero-title {

    font-size: 2.2rem;

  }

  .section-title {

    font-size: 1.8rem;

  }

  .footer-grid {

    grid-template-columns: 1fr;

  }

  .inset-image-construction {

    position: static;

    width: 100%;

    margin-top: 1rem;

  }

  .lightbox-nav-btn {

    width: 42px;

    height: 42px;

    padding: 0;

    justify-content: center;

    border-radius: 50%;

  }

  .lightbox-nav-label {

    display: none;

  }

  .lightbox-prev {

    left: 0.5rem;

  }

  .lightbox-next {

    right: 0.5rem;

  }

  .floating-christmas-pill {

    bottom: 1rem;

    left: 1rem;

    padding: 0.5rem 0.9rem;

    font-size: 0.8rem;

  }

}

/* Interactive Building Vision Multi-View Selector */
.building-view-selector {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
  align-items: center;
}

.building-view-pill {
  background: #fffdf8;
  border: 1.5px solid var(--gold-400);
  color: var(--crimson-900);
  padding: 0.42rem 0.95rem;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  outline: none;
}

.building-view-pill:hover {
  background: var(--offwhite-200, #f8f4eb);
  border-color: var(--gold-500);
  color: var(--crimson-800);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(184, 134, 11, 0.15);
}

.building-view-pill.active {
  background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-600) 100%);
  color: #ffffff;
  border-color: var(--gold-600);
  box-shadow: 0 4px 14px rgba(184, 134, 11, 0.35);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .building-view-selector {
    gap: 0.35rem;
    margin-bottom: 0.75rem;
  }
  .building-view-pill {
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    flex: 1 1 auto;
    text-align: center;
  }
}

/* History Timeline Photos */
.timeline-photo-card {
  margin-top: 0.85rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--gold-400);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  background: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-photo-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  border-color: var(--gold-500);
}

.timeline-photo {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  border-radius: 7px 7px 0 0;
  transition: transform 0.4s ease;
}

.timeline-photo-card:hover .timeline-photo {
  transform: scale(1.03);
}

.timeline-photo-fit-wrap {
  width: 100%;
  height: 260px;
  background: radial-gradient(circle at center, #ffffff 0%, #f7f3ee 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
}

.timeline-photo-contain {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.4s ease;
}

.timeline-photo-card:hover .timeline-photo-contain {
  transform: scale(1.03);
}

.timeline-photo-caption {
  background: #fcf9f2;
  padding: 0.45rem 0.8rem;
  font-size: 0.75rem;
  color: var(--ink-700);
  font-style: italic;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
  }
  .gallery-item {
    height: 220px;
  }
  .gallery-item-overlay {
    opacity: 1;
    background: linear-gradient(180deg, transparent 40%, rgba(20, 16, 12, 0.85) 100%);
    padding: 0.85rem;
  }
  .gallery-item-title {
    font-size: 0.85rem;
  }
}

@media (max-width: 640px) {
  .timeline-photo {
    height: 150px;
  }
  .timeline-photo-fit-wrap {
    height: 210px;
  }
  .timeline-photo-caption {
    font-size: 0.72rem;
    padding: 0.35rem 0.65rem;
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .gallery-item {
    height: 200px;
  }
}

/* ==========================================================================
   ELEGANT CHURCH-THEMED SOCIAL MEDIA ICONS & BADGES (Header & Footer)
   Sacred Heart Crimson & Cathedral Gold Theme (No generic blue/rainbow/bright red)
   ========================================================================== */
.social-links-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.social-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(145deg, #3d0c11, #5c131a);
  border: 1.5px solid var(--gold-400);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(223, 194, 125, 0.25);
  color: var(--gold-300) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.social-icon-btn svg {
  width: 15px;
  height: 15px;
  color: var(--gold-300);
  transition: transform 0.25s ease, color 0.25s ease;
}

.social-icon-btn:hover {
  transform: translateY(-2.5px) scale(1.08);
  background: linear-gradient(135deg, #7f1d1d, #991b1b);
  border-color: var(--gold-200);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(127, 29, 29, 0.6), 0 0 10px rgba(223, 194, 125, 0.45);
}

.social-icon-btn:hover svg {
  transform: scale(1.12);
  color: #ffffff;
}

.social-icon-btn.fb:hover,
.social-icon-btn.ig:hover,
.social-icon-btn.yt:hover {
  background: linear-gradient(135deg, #7f1d1d, #991b1b);
  border-color: var(--gold-200);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(127, 29, 29, 0.6), 0 0 10px rgba(223, 194, 125, 0.45);
}

.footer-social-wrap {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-social-title {
  font-size: 0.82rem;
  color: var(--gold-300);
  margin-bottom: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   CHURCH THEME MULTILINGUAL LANGUAGE SELECTOR (12 Languages)
   Sacred Heart Deep Crimson & Cathedral Gold Finish
   ========================================================================== */
.lang-dropdown-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(73, 18, 23, 0.95), rgba(59, 12, 17, 0.95));
  border: 1.5px solid var(--gold-400);
  border-radius: 20px;
  padding: 0.18rem 0.55rem 0.18rem 0.65rem;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(223, 194, 125, 0.25);
  backdrop-filter: blur(6px);
}

.lang-dropdown-wrapper:hover,
.lang-dropdown-wrapper:focus-within {
  background: linear-gradient(135deg, rgba(92, 19, 26, 0.98), rgba(73, 18, 23, 0.98));
  border-color: var(--gold-200);
  box-shadow: 0 0 12px rgba(223, 194, 125, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.lang-globe-icon {
  display: flex;
  align-items: center;
  color: var(--gold-300);
  margin-right: 0.35rem;
  pointer-events: none;
}

.lang-dropdown-select {
  background: transparent;
  color: #fbf8f2;
  border: none;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  padding: 0.25rem 1.25rem 0.25rem 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23dfc27d' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

.lang-dropdown-select option {
  background-color: #3b0c11;
  color: #fbf8f2;
  padding: 0.65rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(223, 194, 125, 0.15);
}

.lang-dropdown-select option:hover,
.lang-dropdown-select option:focus,
.lang-dropdown-select option:checked {
  background-color: #5c131a;
  color: #ffffff;
}

/* Google Translate Frame Clean-up */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
iframe.goog-te-banner-frame {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}

body {
  top: 0px !important;
  position: static !important;
}

.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#google_translate_element {
  display: none !important;
}

.skiptranslate iframe {
  display: none !important;
}

/* Mobile App View Header Switcher Pill */
.header-app-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(73, 18, 23, 0.95), rgba(59, 12, 17, 0.95));
  border: 1.5px solid var(--gold-400);
  border-radius: 20px;
  padding: 0.2rem 0.65rem;
  color: var(--gold-300);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  margin-left: 0.5rem;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.header-app-switch-btn:hover {
  background: linear-gradient(135deg, #7f1d1d, #991b1b);
  border-color: var(--gold-200);
  color: #fff;
  box-shadow: 0 0 10px rgba(223, 194, 125, 0.5);
  transform: translateY(-1px);
}