/* ============================================================
   WYCOMBE COMMUNITY SDA CHURCH — DESIGN SYSTEM
   Warm Luxury · Cinematic · Premium
   ============================================================ */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* --- CSS Variables --- */
:root {
  --gold: #c9a163;
  --gold-light: #dfc28e;
  --gold-dark: #a8843e;
  --cream: #f3e3b9;
  --cream-light: #faf4e6;
  --cream-dark: #e6d49e;
  --navy: #22314c;
  --navy-light: #2e4166;
  --navy-dark: #192439;
  --burgundy: #6b2d3e;
  --burgundy-light: #8a3d52;
  --sage: #7a8f6e;
  --charcoal: #2c2c2c;
  --charcoal-light: #3e3e3e;
  --off-white: #fdfbf7;
  --warm-gray: #7a6f63; /* darkened from #a09588 to pass WCAG AA on off-white (≥4.5:1) */
  --muted: #6b6358;
  --error: #c0392b;
  --error-bg: #f8d7da;
  --error-text: #721c24;
  --success-bg: #d4edda;
  --success-text: #155724;
  --info-bg: #e2f0fb;
  --info-text: #124468;
  --warning-bg: #fff3cd;
  --warning-text: #6e5000;
  --live: #c51a1a;
  --live-dark: #7a0d0d;
  --live-accent: #ff4a4a;
  --maps-green: #34a853;
  --maps-green-dark: #2d9249;
  --social-whatsapp: #25D366;
  --social-whatsapp-dark: #1da851;
  --social-facebook: #1877F2;
  --social-facebook-dark: #0d65d9;
  --social-twitter: #1DA1F2;
  --social-twitter-dark: #0d8ddb;
  --shadow-gold: rgba(201, 161, 99, 0.25);
  --shadow-dark: rgba(25, 36, 57, 0.35);
  --overlay-light: rgba(0, 0, 0, 0.15);
  --overlay-mid: rgba(0, 0, 0, 0.2);
  --overlay-dark: rgba(0, 0, 0, 0.3);
  --glass-bg: rgba(34, 49, 76, 0.82);
  --glass-border: rgba(201, 161, 99, 0.18);
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', 'Segoe UI', Tahoma, sans-serif;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --max-width: 1280px;
  --max-width-wide: 1440px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px; /* keep anchor jumps clear of the sticky navbar */
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--off-white);
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-dark); text-decoration: none; transition: color var(--transition-smooth); }
a:hover { color: var(--gold); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }
h4 { font-size: clamp(1rem, 2vw, 1.35rem); }

p { margin-bottom: 1rem; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1rem, 0.5rem + 2vw, 2rem);
}

.container-wide {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- Skip Link (A11y) --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--gold);
  color: var(--navy);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  z-index: 10000;
  font-weight: 600;
  transition: top 0.3s;
}
.skip-link:focus { top: 1rem; }

/* ============================================================
   NAVBAR — Genius Bar Glassmorphism
   ============================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: clamp(0.45rem, 0.35rem + 0.4vw, 0.7rem) 0;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 30px rgba(0,0,0,0.18);
  transition: all var(--transition-smooth);
}

.navbar.scrolled {
  padding: clamp(0.3rem, 0.22rem + 0.25vw, 0.45rem) 0;
  box-shadow: 0 6px 40px rgba(0,0,0,0.28);
}

.navbar-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0 clamp(1rem, 0.5rem + 2vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}

.navbar-brand .brand-logo {
  height: clamp(40px, 28px + 1.6vw, 56px);
  width: auto;
  object-fit: contain;
  transition: transform var(--transition-bounce);
}
.navbar-brand:hover .brand-logo { transform: scale(1.05); }

.navbar-brand .brand-icon {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy-dark);
  box-shadow: 0 2px 12px var(--shadow-gold);
  transition: transform var(--transition-bounce);
}
.navbar-brand:hover .brand-icon { transform: scale(1.08) rotate(-5deg); }

.navbar-brand .brand-text {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.navbar-brand .brand-text small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--gold-light);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Desktop Navigation */
.navbar-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
}

.navbar-nav > li { position: relative; }

.navbar-nav > li > a {
  display: block;
  padding: clamp(0.5rem, 0.42rem + 0.25vw, 0.65rem) clamp(0.65rem, 0.55rem + 0.45vw, 1rem);
  font-size: clamp(0.78rem, 0.72rem + 0.25vw, 0.9rem);
  font-weight: 500;
  color: var(--cream-dark);
  text-decoration: none;
  position: relative;
  letter-spacing: 0.02em;
  transition: color var(--transition-smooth);
  white-space: nowrap;
}

.navbar-nav > li > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  transition: left var(--transition-smooth), right var(--transition-smooth);
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a.active {
  color: var(--gold);
}
.navbar-nav > li > a:hover::after,
.navbar-nav > li > a.active::after {
  left: 15%; right: 15%;
}

/* Dropdown */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px;
  background: var(--glass-bg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  list-style: none;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-menu a {
  display: block;
  padding: 0.55rem 1.25rem;
  font-size: 0.8rem;
  color: var(--cream-dark);
  transition: all 0.25s;
}
.dropdown-menu a:hover {
  color: var(--gold);
  background: rgba(201,161,99,0.08);
  padding-left: 1.5rem;
}

.dropdown-caret {
  font-size: 0.55rem;
  margin-left: 0.3rem;
  opacity: 0.6;
}

/* Mobile Toggle */
.navbar-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 36px; height: 36px;
  position: relative;
  flex-shrink: 0;
}
.navbar-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--cream);
  border-radius: 2px;
  position: absolute;
  left: 7px;
  transition: all 0.35s;
}
.navbar-toggle span:nth-child(1) { top: 10px; }
.navbar-toggle span:nth-child(2) { top: 17px; }
.navbar-toggle span:nth-child(3) { top: 24px; }

.navbar-toggle.active span:nth-child(1) { top: 17px; transform: rotate(45deg); }
.navbar-toggle.active span:nth-child(2) { opacity: 0; }
.navbar-toggle.active span:nth-child(3) { top: 17px; transform: rotate(-45deg); }

/* CTA Button in nav */
.nav-cta {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--navy-dark) !important;
  padding: 0.5rem 1.1rem !important;
  border-radius: var(--radius-xl);
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  box-shadow: 0 2px 15px var(--shadow-gold);
  transition: all var(--transition-smooth) !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 25px var(--shadow-gold);
  color: var(--navy-dark) !important;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--navy-dark) 0%, var(--navy) 40%, var(--navy-light) 100%);
  background-size: cover;
  background-position: center;
  padding: 7rem 1.5rem 4rem;
}

/* Page-hero background (news page, etc.) — optional admin-configurable media */
.page-hero { position: relative; overflow: hidden; }
.page-hero > * { position: relative; z-index: 2; }
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  overflow: hidden;
}
.page-hero-bg > video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.page-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(165deg, rgba(25,36,57,0.82) 0%, rgba(34,49,76,0.78) 50%, rgba(46,65,102,0.72) 100%);
  pointer-events: none;
}

/* Hero background — supports CSS background-image OR a child <video> inserted by JS */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  overflow: hidden;
}
.hero-bg > video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1; /* sits above the video but below .hero-content */
  background: linear-gradient(165deg, rgba(25,36,57,0.82) 0%, rgba(34,49,76,0.75) 40%, rgba(46,65,102,0.7) 100%);
  pointer-events: none;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(201,161,99,0.12) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 80%, rgba(107,45,62,0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to top, var(--off-white), transparent);
  pointer-events: none;
}

.hero-content {
  position: relative; z-index: 2;
  text-align: center;
  max-width: 850px;
}

.hero-badge {
  display: inline-block;
  padding: 0.4rem 1.4rem;
  border: 1px solid var(--gold);
  border-radius: var(--radius-xl);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  animation: fadeInDown 0.8s ease-out;
}

.hero h1 {
  color: var(--cream);
  margin-bottom: 1.25rem;
  animation: fadeInUp 1s ease-out 0.2s both;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.hero h1 .accent {
  color: var(--gold);
  font-style: italic;
}

.hero-subtitle {
  color: var(--cream-dark);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 300;
  max-width: 640px;
  margin: 0 auto 2rem;
  animation: fadeInUp 1s ease-out 0.4s both;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 1s ease-out 0.6s both;
}

/* Scroll indicator — bouncing chevron at bottom of hero */
.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--cream);
  z-index: 3;
  opacity: 0.85;
  animation: fadeInDown 1.2s ease-out 1.2s both;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.3s;
}
.scroll-indicator:hover { opacity: 1; color: var(--gold); }
.scroll-indicator .scroll-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-dark);
}
.scroll-indicator .scroll-arrow {
  width: 24px; height: 36px;
  border: 2px solid var(--gold);
  border-radius: 12px;
  position: relative;
}
.scroll-indicator .scroll-arrow::before {
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  width: 4px; height: 8px;
  background: var(--gold);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollBounce 1.8s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(14px); opacity: 0.3; }
}
.scroll-indicator.hidden { opacity: 0; pointer-events: none; }

/* Grain overlay for texture */
.grain-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-smooth);
  text-decoration: none;
  letter-spacing: 0.02em;
  line-height: 1;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--navy-dark);
  box-shadow: 0 4px 20px var(--shadow-gold);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--shadow-gold);
  color: var(--navy-dark);
}

.btn-outline {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid var(--gold);
}
.btn-outline:hover {
  background: var(--gold);
  color: var(--navy-dark);
  transform: translateY(-2px);
}

.btn-dark {
  background: var(--navy);
  color: var(--cream);
  box-shadow: 0 4px 20px var(--shadow-dark);
}
.btn-dark:hover {
  background: var(--navy-light);
  transform: translateY(-2px);
  color: var(--cream);
}

/* Colorful button variants */
.btn-burgundy {
  background: linear-gradient(135deg, var(--burgundy-light), var(--burgundy));
  color: #fff;
  box-shadow: 0 4px 20px rgba(107,45,62,0.3);
}
.btn-burgundy:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(107,45,62,0.4); color: #fff; }

.btn-sage {
  background: linear-gradient(135deg, #8fa97e, var(--sage));
  color: #fff;
  box-shadow: 0 4px 20px rgba(122,143,110,0.3);
}
.btn-sage:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(122,143,110,0.4); color: #fff; }

.btn-blue {
  background: linear-gradient(135deg, #4a90d9, #2e6cb8);
  color: #fff;
  box-shadow: 0 4px 20px rgba(46,108,184,0.3);
}
.btn-blue:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(46,108,184,0.4); color: #fff; }

.btn-coral {
  background: linear-gradient(135deg, #e8745a, #d35940);
  color: #fff;
  box-shadow: 0 4px 20px rgba(211,89,64,0.3);
}
.btn-coral:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(211,89,64,0.4); color: #fff; }

.btn-sm {
  padding: 0.55rem 1.3rem;
  font-size: 0.8rem;
}

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

/* ============================================================
   CAROUSEL
   ============================================================ */
.carousel-section {
  padding: 5rem 0;
  background: var(--off-white);
}

.carousel-wrapper {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 60px rgba(0,0,0,0.12);
}

.carousel-track {
  display: flex;
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.carousel-slide {
  min-width: 100%;
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--navy-dark);
}

.carousel-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.carousel-slide iframe {
  width: 100%; height: 100%;
  border: none;
}

.carousel-slide video {
  width: 100%; height: 100%;
  object-fit: cover;
}

.carousel-slide .slide-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2.5rem 2rem 1.5rem;
  background: linear-gradient(to top, rgba(25,36,57,0.92), transparent);
  color: var(--cream);
}

.carousel-slide .slide-overlay h3 {
  color: var(--cream);
  margin-bottom: 0.35rem;
  font-size: 1.3rem;
}

.carousel-slide .slide-overlay p {
  color: var(--cream-dark);
  font-size: 0.85rem;
  margin: 0;
}

/* ---- Site-wide LIVE notification banner ---- */
#site-live-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  background: linear-gradient(90deg, var(--live), var(--live-dark));
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  animation: liveBannerSlide 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
  font-family: var(--font-body);
}
#site-live-banner .inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.6rem 1rem;
}
#site-live-banner .live-dot {
  width: 0.65rem; height: 0.65rem; background: #fff;
  border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.85);
  animation: livePulse 1.4s ease-out infinite;
}
#site-live-banner strong {
  letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 0.82rem; flex-shrink: 0;
}
#site-live-banner .title {
  flex: 1; min-width: 0; font-size: 0.88rem; opacity: 0.92;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#site-live-banner .watch-btn {
  background: #fff; color: var(--live-dark); font-weight: 600; font-size: 0.82rem;
  padding: 0.4rem 0.95rem; border-radius: 999px; text-decoration: none;
  letter-spacing: 0.02em; flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;
}
#site-live-banner .watch-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.2); color: var(--live-dark); }
#site-live-banner .dismiss {
  background: transparent; border: none; color: rgba(255,255,255,0.75);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.5rem;
  margin-left: -0.4rem; flex-shrink: 0; border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
#site-live-banner .dismiss:hover { background: rgba(255,255,255,0.15); color: #fff; }
body:has(#site-live-banner) { padding-top: 48px; }
body:has(#site-live-banner) .navbar { top: 48px; }
@keyframes liveBannerSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (max-width: 640px) {
  #site-live-banner .title { display: none; }
  #site-live-banner strong { font-size: 0.75rem; }
}

/* Live-stream slide indicator */
.carousel-slide[data-live] .slide-overlay h3 {
  color: var(--live-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.live-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--live-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,74,74,0.7);
  animation: livePulse 1.4s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,74,74,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(255,74,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,74,74,0); }
}

.carousel-btn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: var(--cream);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-smooth);
  z-index: 10;
}
.carousel-btn:hover {
  background: var(--gold);
  color: var(--navy-dark);
  border-color: var(--gold);
  transform: translateY(-50%) scale(1.08);
}
.carousel-btn.prev { left: 1rem; }
.carousel-btn.next { right: 1rem; }

.carousel-dots {
  position: absolute;
  bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 0.5rem;
  z-index: 10;
}
.carousel-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: none; cursor: pointer;
  transition: all 0.3s;
}
.carousel-dot.active {
  background: var(--gold);
  transform: scale(1.25);
  box-shadow: 0 0 10px var(--shadow-gold);
}

/* ============================================================
   SECTION STYLES
   ============================================================ */
.section {
  padding: 5rem 0;
}

.section-dark {
  background: var(--navy);
  color: var(--cream);
}
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--cream); }
.section-dark p { color: var(--cream-dark); }

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

.section-gradient {
  background: linear-gradient(170deg, var(--navy-dark) 0%, var(--navy) 50%, var(--navy-light) 100%);
  color: var(--cream);
}
.section-gradient h2, .section-gradient h3, .section-gradient h4 { color: var(--cream); }

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}
.section-header .overline {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.section-header h2 {
  margin-bottom: 0.75rem;
}
.section-header p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--warm-gray);
  font-size: 1.05rem;
}
.section-dark .section-header p { color: var(--cream-dark); }

.gold-line {
  width: 60px; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 3px;
  margin: 0 auto 1rem;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  transition: all var(--transition-smooth);
  border: 1px solid rgba(0,0,0,0.04);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

.card-img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.card-body {
  padding: 1.5rem;
}
.card-body h3, .card-body h4 {
  margin-bottom: 0.5rem;
}
.card-body p {
  color: var(--warm-gray);
  font-size: 0.9rem;
}

.card-dark {
  background: var(--navy);
  border-color: rgba(201,161,99,0.1);
}
.card-dark h3, .card-dark h4 { color: var(--cream); }
.card-dark p { color: var(--cream-dark); }

.card-date {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  display: block;
}

/* ============================================================
   GRID LAYOUTS
   ============================================================ */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* ============================================================
   GALLERY — Masonry / Lightbox
   ============================================================ */
.gallery-grid {
  columns: 3;
  column-gap: 1.25rem;
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all var(--transition-smooth);
}
.gallery-item:hover {
  transform: scale(1.015);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.gallery-item img {
  width: 100%;
  display: block;
}

.gallery-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem 1rem 1rem;
  background: linear-gradient(to top, rgba(25,36,57,0.88), transparent);
  color: var(--cream);
  font-size: 0.82rem;
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-item:hover .gallery-caption { opacity: 1; }

.gallery-caption h4 {
  color: var(--cream);
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.lightbox.active { display: flex; }

.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 80px rgba(0,0,0,0.5);
  animation: zoomIn 0.35s ease-out;
}

.lightbox-close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}
.lightbox-close:hover { background: var(--gold); color: var(--navy); }

.lightbox-caption {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  color: var(--cream);
  text-align: center;
  max-width: 600px;
}

/* Gallery filter */
.gallery-filters {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.filter-btn {
  padding: 0.5rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-xl);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: all var(--transition-smooth);
}
.filter-btn:hover, .filter-btn.active {
  background: var(--navy);
  color: var(--cream);
}

/* ============================================================
   FORM STYLES
   ============================================================ */
.form-group {
  margin-bottom: 1.25rem;
}
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}
.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--navy);
  background: #fff;
  border: 1.5px solid rgba(34,49,76,0.15);
  border-radius: var(--radius-sm);
  transition: all var(--transition-smooth);
}
.form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--shadow-gold);
  outline: none;
}
textarea.form-control { resize: vertical; min-height: 120px; }

.form-note {
  font-size: 0.72rem;
  color: var(--warm-gray);
  margin-top: 0.3rem;
}

/* ============================================================
   PAGE HERO (Inner Pages)
   ============================================================ */
.page-hero {
  padding: 9rem 1.5rem 4rem;
  background: linear-gradient(165deg, var(--navy-dark), var(--navy));
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(201,161,99,0.08) 0%, transparent 60%);
}
.page-hero h1 { color: var(--cream); position: relative; z-index: 1; margin-bottom: 0.5rem; }
.page-hero p {
  color: var(--cream-dark);
  position: relative; z-index: 1;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}
.page-hero .overline {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  position: relative; z-index: 1;
}

/* ============================================================
   QUICK LINKS / ICON GRID
   ============================================================ */
.quick-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.quick-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
  transition: all var(--transition-smooth);
  text-decoration: none;
  border: 1px solid transparent;
}
.quick-link:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
  border-color: var(--gold);
}

.quick-link .ql-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  transition: all var(--transition-smooth);
}
.quick-link:hover .ql-icon {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  transform: scale(1.1);
}

.quick-link h4 { font-size: 0.95rem; margin-bottom: 0.25rem; }
.quick-link p { font-size: 0.78rem; color: var(--warm-gray); margin: 0; }

/* ============================================================
   TESTIMONY CARDS
   ============================================================ */
.testimony-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 2rem;
  border-left: 4px solid var(--gold);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: all var(--transition-smooth);
}
.testimony-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.testimony-card .quote {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1.65;
  margin-bottom: 1rem;
}
.testimony-card .quote::before { content: '\201C'; font-size: 2rem; color: var(--gold); line-height: 0; vertical-align: -0.3em; margin-right: 0.1em; }

.testimony-card .author {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-dark);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--navy-dark);
  color: var(--cream-dark);
  padding: 4rem 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(201,161,99,0.12);
}

.footer h4 {
  color: var(--cream);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.footer p { font-size: 0.85rem; line-height: 1.7; }

.footer-links {
  list-style: none;
}
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a {
  color: var(--cream-dark);
  font-size: 0.85rem;
  transition: color 0.25s, padding-left 0.25s;
}
.footer-links a:hover {
  color: var(--gold);
  padding-left: 0.3rem;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(201,161,99,0.1);
  border: 1px solid rgba(201,161,99,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--cream);
  font-size: 0.9rem;
  transition: all var(--transition-smooth);
}
.footer-social a:hover {
  background: var(--gold);
  color: var(--navy-dark);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.footer-bottom {
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--warm-gray);
}

/* ============================================================
   DONATION
   ============================================================ */
.donate-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.donate-card {
  text-align: center;
  padding: 2.5rem 2rem;
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  transition: all var(--transition-smooth);
}
.donate-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.donate-card .donate-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.donate-card h3 { margin-bottom: 0.5rem; font-size: 1.1rem; }
.donate-card p { font-size: 0.85rem; color: var(--warm-gray); }

/* ============================================================
   LIVE NOW
   ============================================================ */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: var(--error);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--radius-xl);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.live-badge .pulse {
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

.video-embed {
  position: relative;
  padding-top: 56.25%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy-dark);
  box-shadow: 0 12px 60px rgba(0,0,0,0.2);
}
.video-embed iframe {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border: none;
}

/* ============================================================
   EVENT CARDS
   ============================================================ */
.event-card {
  display: flex;
  gap: 1.5rem;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: all var(--transition-smooth);
  border: 1px solid rgba(0,0,0,0.04);
}
.event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.event-date-badge {
  flex-shrink: 0;
  width: 80px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.5rem;
  color: var(--cream);
}
.event-date-badge .month {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}
.event-date-badge .day {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.event-info {
  padding: 1.25rem 1.25rem 1.25rem 0;
  flex: 1;
}
.event-info h4 { margin-bottom: 0.3rem; }
.event-info p { font-size: 0.85rem; color: var(--warm-gray); margin-bottom: 0.3rem; }
.event-info .event-time {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold-dark);
}

/* ============================================================
   DEPARTMENT CARDS
   ============================================================ */
.dept-card {
  text-align: center;
  padding: 2.5rem 2rem;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: all var(--transition-smooth);
  border: 1px solid rgba(0,0,0,0.04);
  text-decoration: none;
  display: block;
}
.dept-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
  border-color: var(--gold);
}
.dept-card .dept-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 1.25rem;
  transition: transform var(--transition-bounce);
}
.dept-card:hover .dept-icon { transform: scale(1.12) rotate(-5deg); }
.dept-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.dept-card p { font-size: 0.85rem; color: var(--warm-gray); margin: 0; }

/* ============================================================
   CHAT / MESSAGE WIDGET
   ============================================================ */
.chat-widget {
  position: fixed;
  bottom: 2rem; right: 2rem;
  z-index: 900;
}

.chat-toggle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--navy-dark);
  font-size: 1.4rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 30px var(--shadow-gold);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-smooth);
}
.chat-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 40px var(--shadow-gold);
}

.chat-panel {
  position: absolute;
  bottom: 70px; right: 0;
  width: 360px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 80px rgba(0,0,0,0.2);
  overflow: hidden;
  display: none;
  animation: slideUp 0.35s ease-out;
}
.chat-panel.open { display: block; }

.chat-header {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  padding: 1.25rem 1.5rem;
  color: var(--cream);
}
.chat-header h4 { color: var(--cream); margin-bottom: 0.15rem; font-size: 1rem; }
.chat-header p { color: var(--cream-dark); font-size: 0.78rem; margin: 0; }

.chat-body {
  padding: 1.5rem;
  max-height: 400px;
  overflow-y: auto;
}

.chat-tabs {
  display: flex;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 1rem;
}
.chat-tab {
  flex: 1;
  padding: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--warm-gray);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.25s;
}
.chat-tab.active {
  color: var(--navy);
  border-bottom-color: var(--gold);
}

.chat-form { display: none; }
.chat-form.active { display: block; }

.chat-submit {
  width: 100%;
  margin-top: 0.5rem;
}

.chat-success {
  display: none;
  text-align: center;
  padding: 2rem 1rem;
}
.chat-success.show { display: block; }
.chat-success .checkmark {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.chat-success p { color: var(--navy); font-weight: 500; }

/* ============================================================
   CALENDAR
   ============================================================ */
.calendar-embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
  background: #fff;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendar-embed iframe {
  width: 100%; height: 600px;
  border: none;
}
.calendar-placeholder {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--warm-gray);
}
.calendar-placeholder .cal-icon { font-size: 3rem; margin-bottom: 1rem; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---- New keyframes ---- */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes ripple {
  0% { box-shadow: 0 0 0 0 var(--shadow-gold); }
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes subtleBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ---- Reveal on Scroll — multiple directions ---- */
/* Reveal animations use easeOutExpo for a refined "settle into place" feel.
   Travel distances are intentionally short — modern, premium feel over jumpy.
   Auto-stagger: --rev-i is set by the IntersectionObserver to the sibling index;
   each unit adds 60ms of transition-delay, giving rows a cascading effect without
   manual .reveal-delay-N classes. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.97);
  filter: blur(6px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--rev-i, 0) * 60ms);
  will-change: opacity, transform, filter;
}
.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}
.reveal-left {
  opacity: 0;
  transform: translate3d(-36px, 0, 0);
  filter: blur(6px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}
.reveal-right {
  opacity: 0;
  transform: translate3d(36px, 0, 0);
  filter: blur(6px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  filter: blur(6px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}
.reveal-left.visible, .reveal-right.visible, .reveal-scale.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}
/* Once the animation finishes, drop will-change so the browser can free GPU layers. */
.reveal.is-settled, .reveal-left.is-settled,
.reveal-right.is-settled, .reveal-scale.is-settled {
  will-change: auto;
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }

/* ---- Hero section entrance ---- */
.hero-badge { animation: fadeInDown 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.hero h1 { animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
.hero-subtitle { animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
.hero-actions { animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; }

/* ---- Page hero (inner pages) entrance ---- */
.page-hero .overline { animation: fadeInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
.page-hero h1 { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
.page-hero p { animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }

/* ---- Smooth hover transitions on ALL interactive elements ---- */
.card, .event-card, .testimony-card, .quick-link, .dept-card, .donate-card {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

/* ---- Button press effect ---- */
.btn { transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.btn:active { transform: translateY(0) scale(0.97); }

/* ---- Nav CTA button subtle glow ---- */
.nav-cta { animation: subtleBob 3s ease-in-out infinite; }
.nav-cta:hover { animation: none; }

/* ---- Gold line grows from center ---- */
.gold-line {
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.visible .gold-line,
.reveal-left.visible .gold-line,
.reveal-right.visible .gold-line {
  animation: growLine 0.6s ease-out 0.3s both;
}
@keyframes growLine {
  from { width: 0; }
  to { width: 60px; }
}

/* ---- Navbar scroll transition ---- */
.navbar {
  transition: padding 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

/* ---- Dropdown menu entrance ---- */
.dropdown-menu {
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s;
}

/* ---- Image hover zoom ---- */
.gallery-item img,
.card-img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gallery-item:hover img,
.card:hover .card-img {
  transform: scale(1.06);
}

/* ---- Gallery caption slide-up ---- */
.gallery-caption {
  transition: opacity 0.35s ease, transform 0.35s ease;
  transform: translateY(8px);
}
.gallery-item:hover .gallery-caption {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Chat panel slide-in ---- */
.chat-panel {
  animation: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  pointer-events: none;
}
.chat-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  display: block;
}

/* ---- Chat toggle bounce on first load ---- */
.chat-toggle { animation: subtleBob 2s ease-in-out 3s 3; }

/* ---- Form input focus glow ---- */
.form-control {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* ---- Lightbox entrance ---- */
.lightbox.active {
  animation: fadeIn 0.3s ease-out;
}
.lightbox.active img {
  animation: zoomIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- Carousel slide smooth ---- */
.carousel-track {
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.carousel-btn {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Cookie consent slide in ---- */
.cookie-consent {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Announcement bar slide down ---- */
.announcement-bar {
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform: translateY(-100%);
  opacity: 0;
}
.announcement-bar.visible {
  transform: translateY(0);
  opacity: 1;
}

/* ---- Newsletter bar hover ---- */
.newsletter-form button {
  transition: all 0.3s ease;
}
.newsletter-form button:hover {
  transform: translateY(-1px);
}

/* ---- Social icon stagger animation when in view ---- */
.social-icon {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Verse widget fade in ---- */
.verse-widget {
  transition: opacity 0.8s ease;
}

/* ---- Countdown number flip effect ---- */
.countdown-num {
  transition: transform 0.3s ease;
  display: inline-block;
}

/* ---- Breadcrumb link hover ---- */
.breadcrumbs a {
  transition: color 0.25s ease;
  position: relative;
}
.breadcrumbs a::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.breadcrumbs a:hover::after { width: 100%; }

/* ---- FAB buttons entrance ---- */
.fab-group {
  animation: slideInUp 0.5s ease-out 1.5s both;
}
.fab-btn {
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Footer links hover underline ---- */
.footer-links a {
  position: relative;
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.footer-links a:hover::after { width: 100%; }

/* ---- Donate amount button selection ---- */
.amt-btn {
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.amt-btn:active {
  transform: scale(0.95);
}

/* ---- Search results dropdown ---- */
.search-results {
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(-8px);
  opacity: 0;
}
.search-results.open {
  transform: translateY(0);
  opacity: 1;
}

/* ---- Directions button pulse on hover ---- */
.directions-btn:hover {
  animation: ripple 0.6s ease-out;
}

/* ---- Share buttons hover lift ---- */
.share-btn {
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Event date badge hover ---- */
.event-date-badge {
  transition: background 0.3s ease;
}
.event-card:hover .event-date-badge {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
}
.event-card:hover .event-date-badge .month,
.event-card:hover .event-date-badge .day {
  color: var(--navy-dark);
}

/* ---- Department icon spin on hover ---- */
.dept-card .dept-icon {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}
.dept-card:hover .dept-icon {
  transform: scale(1.15) rotate(-8deg);
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
}

/* ---- Quick link icon bounce on hover ---- */
.quick-link .ql-icon {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quick-link:hover .ql-icon {
  transform: scale(1.15);
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
}

/* ---- Prefers reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1; transform: none;
  }
}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.admin-sidebar {
  background: var(--navy-dark);
  padding: 2rem 1rem;
  color: var(--cream);
}
.admin-sidebar h3 {
  color: var(--cream);
  font-size: 1rem;
  padding: 0 0.5rem;
  margin-bottom: 1.5rem;
}
.admin-sidebar a {
  display: block;
  padding: 0.6rem 0.75rem;
  color: var(--cream-dark);
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.2rem;
  transition: all 0.25s;
}
.admin-sidebar a:hover, .admin-sidebar a.active {
  background: rgba(201,161,99,0.1);
  color: var(--gold);
}
.admin-main {
  padding: 2rem;
  background: var(--cream-light);
}
.admin-main h1 { font-size: 1.6rem; margin-bottom: 1.5rem; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.admin-table th {
  background: var(--navy);
  color: var(--cream);
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.admin-table td {
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.admin-table tr:hover td { background: var(--cream-light); }

/* Flash messages */
.flash {
  padding: 1rem 1.5rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  font-weight: 500;
}
.flash-success { background: var(--success-bg); color: var(--success-text); border: 1px solid #c3e6cb; }
.flash-error   { background: var(--error-bg); color: var(--error-text); border: 1px solid #f5c6cb; }
.flash-info    { background: var(--info-bg); color: var(--info-text); border: 1px solid #b8daf4; }
.flash-warning { background: var(--warning-bg); color: var(--warning-text); border: 1px solid #ffeaa7; }
.flash-message { background: var(--info-bg); color: var(--info-text); border: 1px solid #b8daf4; }

/* Admin active-sidebar state — more prominent than hover */
.admin-sidebar a.active {
  background: linear-gradient(90deg, rgba(201,161,99,0.22), rgba(201,161,99,0.08));
  color: var(--gold);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--gold);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .quick-links { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .donate-methods { grid-template-columns: 1fr 1fr; }
  .gallery-grid { columns: 2; }
}

@media (max-width: 768px) {
  .navbar-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--navy-dark);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-top: 1px solid var(--glass-border);
    flex-direction: column;
    padding: 0.5rem 0 1rem;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .navbar-nav.open { display: flex; }
  .navbar-nav > li > a { padding: 0.85rem 1.5rem; }
  .navbar-toggle { display: block; }
  
  .navbar-nav { align-items: stretch; }
  .navbar-nav > li { width: 100%; text-align: center; }
  .navbar-nav > li.dropdown > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
  }
  .dropdown-caret {
    transition: transform 0.25s ease;
    display: inline-block;
  }
  .dropdown.open > a .dropdown-caret {
    transform: rotate(180deg);
    opacity: 1;
    color: var(--gold);
  }
  .dropdown-menu,
  .dropdown:hover .dropdown-menu,
  .dropdown:focus-within .dropdown-menu {
    position: static;
    left: auto;
    transform: none;
    background: rgba(0,0,0,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(255,255,255,0.05);
    border: none;
    border-radius: 0;
    padding: 0.35rem 0;
    margin: 0.25rem 0;
    min-width: 0;
    width: 100%;
    display: none;
    opacity: 1;
    visibility: hidden;
  }
  .dropdown.open .dropdown-menu { display: block; visibility: visible; }
  .dropdown-menu li { width: 100%; }
  .dropdown-menu a {
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: var(--cream);
    opacity: 0.85;
    border-left: 2px solid transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
  }
  .dropdown-menu a:hover,
  .dropdown-menu a:focus {
    opacity: 1;
    color: var(--gold);
    background: rgba(201,161,99,0.08);
    border-left-color: var(--gold);
    padding-left: 1.5rem;
  }

  /* Mobile search: always-visible, full-width input */
  .navbar-nav > li.nav-search {
    padding: 0.5rem 1.25rem;
    margin-top: 0.25rem;
    position: relative;
  }
  .nav-search {
    width: 100%;
    justify-content: stretch;
  }
  .nav-search-btn {
    position: absolute;
    left: 1.9rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    pointer-events: none;
    color: var(--cream-dark);
    opacity: 0.75;
  }
  .nav-search input,
  .nav-search.open input {
    width: 100% !important;
    padding: 0.65rem 0.9rem 0.65rem 2.5rem !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: var(--radius-md);
    color: var(--cream);
    font-size: 0.9rem;
    box-sizing: border-box;
  }
  .nav-search input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(255,255,255,0.09) !important;
  }
  .nav-search .search-results {
    position: static;
    width: 100%;
    right: auto;
    margin-top: 0.5rem;
    max-height: 260px;
  }

  .hero { min-height: 85vh; padding: 6rem 1.5rem 3rem; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .quick-links { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .donate-methods { grid-template-columns: 1fr; }
  .gallery-grid { columns: 1; }
  .section { padding: 3.5rem 0; }
  .event-card { flex-direction: column; }
  .event-date-badge { width: 100%; flex-direction: row; gap: 0.5rem; padding: 0.75rem 1rem; }
  .event-info { padding: 1rem; }
  .chat-panel { width: calc(100vw - 2rem); right: -0.5rem; }
  .navbar-brand .brand-text { font-size: 0.9rem; }
  
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { padding: 1rem; }
}

@media (max-width: 480px) {
  .quick-links { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; max-width: 280px; justify-content: center; }
}

/* ============================================================
   UTILITY
   ============================================================ */
.text-center { text-align: center; }
.text-gold { color: var(--gold); }
.text-cream { color: var(--cream); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   COOKIE CONSENT BANNER
   ============================================================ */
.cookie-consent {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9998;
  background: var(--navy-dark);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -4px 30px rgba(0,0,0,0.2);
  padding: 1rem 1.5rem;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cookie-consent.visible {
  transform: translateY(0);
}
.cookie-consent-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cookie-consent p {
  color: var(--cream-dark);
  font-size: 0.85rem;
  margin: 0;
  flex: 1;
  min-width: 200px;
}
.cookie-consent a {
  color: var(--gold);
  text-decoration: underline;
}
.cookie-consent-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .cookie-consent-inner { flex-direction: column; text-align: center; }
  .cookie-consent-actions { width: 100%; justify-content: center; }
}

/* ============================================================
   LOADING STATES
   ============================================================ */
.loading-skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: var(--warm-gray);
  font-size: 0.9rem;
}

.loading-spinner::before {
  content: '';
  width: 24px; height: 24px;
  border: 3px solid rgba(201,161,99,0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 0.75rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.api-error {
  text-align: center;
  padding: 2rem;
  color: var(--warm-gray);
  font-size: 0.9rem;
}
.api-error .error-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
/* Floating action buttons — stacked group */
.fab-group {
  position: fixed;
  bottom: 5.5rem; right: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 899;
}

.fab-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--cream-dark);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.fab-btn:hover {
  background: var(--gold);
  color: var(--navy-dark);
  border-color: var(--gold);
  transform: scale(1.08);
  box-shadow: 0 4px 16px var(--shadow-gold);
}
.fab-btn svg { width: 16px; height: 16px; }

.back-to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.3s ease;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ============================================================
   ANNOUNCEMENTS BAR
   ============================================================ */
.announcement-bar {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  color: var(--navy-dark);
  text-align: center;
  padding: 0.6rem 3rem 0.6rem 1.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  position: relative;
  z-index: 1001;
  display: none;
}
.announcement-bar.visible { display: block; }
.announcement-bar a { color: var(--navy-dark); text-decoration: underline; }
.announcement-bar-close {
  position: absolute;
  right: 0.75rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--navy-dark);
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
  padding: 0.25rem;
}
.announcement-bar-close:hover { opacity: 1; }

/* ============================================================
   BIBLE VERSE WIDGET
   ============================================================ */
.verse-widget {
  background: linear-gradient(135deg, rgba(201,161,99,0.08), rgba(201,161,99,0.02));
  border: 1px solid rgba(201,161,99,0.15);
  border-radius: var(--radius-md);
  padding: 2rem 2.5rem;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.verse-widget .verse-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--navy);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}
.verse-widget .verse-ref {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-dark);
}

/* ============================================================
   SHARE BUTTONS
   ============================================================ */
.share-buttons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-xl);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-smooth);
  border: none;
  cursor: pointer;
}
.share-btn svg { width: 16px; height: 16px; }
.share-btn-whatsapp { background: var(--social-whatsapp); color: #fff; }
.share-btn-whatsapp:hover { background: var(--social-whatsapp-dark); color: #fff; transform: translateY(-1px); }
.share-btn-facebook { background: var(--social-facebook); color: #fff; }
.share-btn-facebook:hover { background: var(--social-facebook-dark); color: #fff; transform: translateY(-1px); }
.share-btn-twitter { background: var(--social-twitter); color: #fff; }
.share-btn-twitter:hover { background: var(--social-twitter-dark); color: #fff; transform: translateY(-1px); }
.share-btn-copy { background: var(--navy); color: var(--cream); }
.share-btn-copy:hover { background: var(--navy-light); color: var(--cream); transform: translateY(-1px); }

/* ============================================================
   NEWSLETTER SIGNUP
   ============================================================ */
.newsletter-bar {
  background: var(--navy);
  padding: 2.5rem 0;
}
.newsletter-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.newsletter-inner h3 { color: var(--cream); margin-bottom: 0.25rem; font-size: 1.15rem; }
.newsletter-inner p { color: var(--cream-dark); font-size: 0.85rem; margin: 0; }
.newsletter-form {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.newsletter-form input {
  padding: 0.65rem 1rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(201,161,99,0.3);
  background: rgba(255,255,255,0.08);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.85rem;
  width: 240px;
}
.newsletter-form input::placeholder { color: var(--warm-gray); }
.newsletter-form input:focus { border-color: var(--gold); outline: none; }

@media (max-width: 768px) {
  .newsletter-inner { flex-direction: column; text-align: center; }
  .newsletter-form { width: 100%; justify-content: center; }
  .newsletter-form input { flex: 1; min-width: 0; }
}

/* ============================================================
   PRAYER REQUEST BADGE
   ============================================================ */
.prayer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  background: rgba(201,161,99,0.1);
  border: 1px solid rgba(201,161,99,0.2);
  border-radius: var(--radius-xl);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-dark);
}

/* ============================================================
   RSVP BUTTON
   ============================================================ */
.rsvp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  background: var(--gold);
  color: var(--navy-dark);
  border: none;
  border-radius: var(--radius-xl);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-smooth);
}
.rsvp-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 15px var(--shadow-gold); }
.rsvp-btn.rsvpd { background: var(--sage); color: #fff; }

/* ============================================================
   SOCIAL ICONS (SVG-based)
   ============================================================ */
.social-icons {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.social-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(201,161,99,0.1);
  border: 1px solid rgba(201,161,99,0.2);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-smooth);
  color: var(--cream);
}
.social-icon:hover {
  background: var(--gold);
  color: var(--navy-dark);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.social-icon svg { width: 18px; height: 18px; fill: currentColor; }

/* ============================================================
   SEARCH BAR (in navbar)
   ============================================================ */
.nav-search {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-search input {
  width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.82rem;
  transition: width 0.35s, padding 0.35s;
  border-radius: var(--radius-xl);
}
.nav-search.open input {
  width: 180px;
  padding: 0.4rem 0.8rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--glass-border);
}
.nav-search input::placeholder { color: var(--warm-gray); }
.nav-search-btn {
  background: none; border: none; color: var(--cream-dark); cursor: pointer;
  padding: 0.4rem; display: flex; transition: color 0.2s;
}
.nav-search-btn:hover { color: var(--gold); }
.search-results {
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  display: none;
  z-index: 1001;
}
.search-results.open { display: block; }
.search-result-item {
  display: block;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  text-decoration: none;
  color: var(--navy);
  transition: background 0.2s;
}
.search-result-item:hover { background: var(--cream-light); }
.search-result-item .sr-type {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-dark);
}
.search-result-item .sr-title { font-weight: 600; font-size: 0.88rem; }
.search-result-item .sr-snippet { font-size: 0.78rem; color: var(--warm-gray); margin: 0; }

/* ============================================================
   QR CODE
   ============================================================ */
.qr-code-box {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: inline-block;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.qr-code-box canvas { display: block; margin: 0 auto; }

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs {
  padding: 0.75rem 1.5rem;
  font-size: 0.78rem;
  color: var(--warm-gray);
  max-width: var(--max-width);
  margin: 0 auto;
}
.breadcrumbs a { color: var(--gold-dark); }
.breadcrumbs span { margin: 0 0.4rem; opacity: 0.5; }

/* ============================================================
   ACCESSIBILITY TOGGLE
   ============================================================ */
/* a11y toggle is now part of .fab-group — no separate positioning needed */

/* High contrast mode */
body.high-contrast {
  --navy: #000;
  --navy-dark: #000;
  --navy-light: #222;
  --cream: #fff;
  --cream-dark: #eee;
  --cream-light: #fff;
  --off-white: #fff;
  --gold: #ffaa00;
  --gold-dark: #cc8800;
  --warm-gray: #666;
  --muted: #333;
}
body.high-contrast .navbar { background: #000; backdrop-filter: none; }
body.high-contrast .hero { background: #000; }
body.high-contrast .card, body.high-contrast .event-card,
body.high-contrast .testimony-card, body.high-contrast .quick-link {
  border: 2px solid #333;
}
body.high-contrast * { text-shadow: none !important; }

/* ============================================================
   PAGE TRANSITIONS
   ============================================================ */
.page-transition {
  animation: pageIn 0.4s ease-out;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Native cross-document View Transitions (Chrome/Edge 126+, Safari 18+) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 280ms; }

/* JS-fallback exit animation */
.page-leaving { animation: pageOut 0.18s ease-in forwards; }
@keyframes pageOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .page-leaving { animation: none !important; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
/* ============================================================
   DARK MODE
   ============================================================ */
/* ---- Dark Mode: Variables ---- */
body.dark-mode {
  --off-white: #111827;
  --cream-light: #1a2332;
  --navy: #1e293b;
  --navy-dark: #0f172a;
  --navy-light: #334155;
  --charcoal: #e2e8f0;
  --warm-gray: #94a3b8;
  --muted: #cbd5e1;
}

/* ---- Dark Mode: Base ---- */
body.dark-mode { background: #0f172a; color: #e2e8f0; }
body.dark-mode a { color: var(--gold); }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #f1f5f9; }
body.dark-mode p { color: #cbd5e1; }

/* ---- Dark Mode: Sections ---- */
body.dark-mode .section { background: #0f172a; }
body.dark-mode .section-cream { background: #1a2332; }
body.dark-mode .section-dark { background: #0a0f1a; }
body.dark-mode .section-gradient { background: linear-gradient(170deg, #0a0f1a 0%, #111827 50%, #1e293b 100%); }
body.dark-mode .section-dark p, body.dark-mode .section-dark h2,
body.dark-mode .section-dark h3, body.dark-mode .section-dark h4 { color: #e2e8f0; }

/* ---- Dark Mode: Cards & Components ---- */
body.dark-mode .card, body.dark-mode .event-card, body.dark-mode .testimony-card,
body.dark-mode .quick-link, body.dark-mode .donate-card, body.dark-mode .dept-card {
  background: #1e293b; color: #e2e8f0; border-color: rgba(201,161,99,0.12);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
body.dark-mode .card:hover, body.dark-mode .event-card:hover,
body.dark-mode .quick-link:hover, body.dark-mode .dept-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
body.dark-mode .card-body p, body.dark-mode .event-info p,
body.dark-mode .quick-link p, body.dark-mode .donate-card p,
body.dark-mode .dept-card p { color: #94a3b8; }
body.dark-mode .card-body h3, body.dark-mode .card-body h4,
body.dark-mode .event-info h4, body.dark-mode .quick-link h4,
body.dark-mode .donate-card h3, body.dark-mode .dept-card h3 { color: #f1f5f9; }
body.dark-mode .card-dark { background: #0f172a; }

/* ---- Dark Mode: Event date badge ---- */
body.dark-mode .event-date-badge { background: linear-gradient(135deg, #1e293b, #334155); }

/* ---- Dark Mode: Testimony cards ---- */
body.dark-mode .testimony-card { background: #1e293b; border-left-color: var(--gold); }
body.dark-mode .testimony-card .quote { color: #e2e8f0; }

/* ---- Dark Mode: Forms ---- */
body.dark-mode .form-control {
  background: #1e293b; border-color: rgba(201,161,99,0.2); color: #e2e8f0;
}
body.dark-mode .form-control:focus { border-color: var(--gold); }
body.dark-mode .form-group label { color: #cbd5e1; }
body.dark-mode select.form-control { color: #e2e8f0; }

/* ---- Dark Mode: Footer ---- */
body.dark-mode .footer { background: #0a0f1a; }
body.dark-mode .footer h4 { color: #f1f5f9; }
body.dark-mode .footer p, body.dark-mode .footer-links a { color: #94a3b8; }
body.dark-mode .footer-links a:hover { color: var(--gold); }
body.dark-mode .footer-bottom { color: #64748b; }

/* ---- Dark Mode: Newsletter bar ---- */
body.dark-mode .newsletter-bar { background: #1e293b; }
body.dark-mode .newsletter-inner h3 { color: #f1f5f9; }
body.dark-mode .newsletter-inner p { color: #94a3b8; }
body.dark-mode .newsletter-form input { background: rgba(255,255,255,0.06); border-color: rgba(201,161,99,0.2); color: #e2e8f0; }

/* ---- Dark Mode: Navbar ---- */
body.dark-mode .navbar { background: rgba(15,23,42,0.92); }

/* ---- Dark Mode: Hero ---- */
body.dark-mode .hero { background: linear-gradient(165deg, #0a0f1a 0%, #111827 40%, #1e293b 100%); }
body.dark-mode .page-hero { background: linear-gradient(165deg, #0a0f1a, #111827); }

/* ---- Dark Mode: Carousel ---- */
body.dark-mode .carousel-section { background: #0f172a; }
body.dark-mode .carousel-wrapper { box-shadow: 0 12px 60px rgba(0,0,0,0.4); }

/* ---- Dark Mode: Chat widget ---- */
body.dark-mode .chat-panel { background: #1e293b; }
body.dark-mode .chat-body { color: #e2e8f0; }
body.dark-mode .chat-tab { color: #94a3b8; }
body.dark-mode .chat-tab.active { color: #f1f5f9; border-bottom-color: var(--gold); }

/* ---- Dark Mode: Cookie consent ---- */
body.dark-mode .cookie-consent { background: #1e293b; border-top-color: rgba(201,161,99,0.15); }

/* ---- Dark Mode: Buttons ---- */
body.dark-mode .btn-dark { background: #334155; }
body.dark-mode .btn-dark:hover { background: #475569; }
body.dark-mode .btn-outline { border-color: var(--gold); color: #e2e8f0; }

/* ---- Dark Mode: Gallery ---- */
body.dark-mode .gallery-filters { color: #e2e8f0; }
body.dark-mode .filter-btn { color: #cbd5e1; border-color: #475569; }
body.dark-mode .filter-btn:hover, body.dark-mode .filter-btn.active { background: var(--gold); color: #0f172a; border-color: var(--gold); }

/* ---- Dark Mode: Breadcrumbs ---- */
body.dark-mode .breadcrumbs { color: #94a3b8; }
body.dark-mode .breadcrumbs a { color: var(--gold); }

/* ---- Dark Mode: Verse widget ---- */
body.dark-mode .verse-widget { background: rgba(201,161,99,0.06); border-color: rgba(201,161,99,0.12); }
body.dark-mode .verse-widget .verse-text { color: #e2e8f0; }

/* ---- Dark Mode: Countdown ---- */
body.dark-mode .countdown-label { color: #94a3b8; }

/* ---- Dark Mode: Overline text ---- */
body.dark-mode .section-header .overline { color: var(--gold); }
body.dark-mode .section-header p { color: #94a3b8; }

/* ---- Dark Mode: Donate page ---- */
body.dark-mode .donate-card .donate-icon { opacity: 0.9; }

/* ---- Dark Mode: Social icons ---- */
body.dark-mode .social-icon { background: rgba(201,161,99,0.1); border-color: rgba(201,161,99,0.2); color: #e2e8f0; }
body.dark-mode .social-icon:hover { background: var(--gold); color: #0f172a; }

/* ---- Dark Mode: Calendar embed ---- */
body.dark-mode .calendar-embed { background: #1e293b; }

/* ---- Dark Mode: FAB buttons ---- */
body.dark-mode .fab-btn { background: rgba(30,41,59,0.9); border-color: rgba(201,161,99,0.15); }

/* ---- Dark Mode: Admin table (if shown) ---- */
body.dark-mode .admin-table { background: #1e293b; }
body.dark-mode .admin-table th { background: #0f172a; }
body.dark-mode .admin-table td { border-bottom-color: rgba(255,255,255,0.05); color: #cbd5e1; }

/* ---- Dark Mode: QR code box ---- */
body.dark-mode .qr-code-box { background: #1e293b; }

/* ---- Dark Mode: Share buttons ---- */
body.dark-mode .share-btn-copy { background: #334155; }

/* ============================================================
   COUNTDOWN TIMER
   ============================================================ */
.countdown {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}
.countdown-unit {
  text-align: center;
  min-width: 70px;
}
.countdown-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.countdown-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--warm-gray);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.25rem;
}

/* ============================================================
   SABBATH TIMES (homepage widget)
   ============================================================ */
.sabbath-section { padding: 4rem 0; }
.sabbath-subtitle {
  max-width: 540px;
  margin: 0.85rem auto 0;
  color: var(--charcoal);
  font-size: 1rem;
}
.sabbath-times {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 1.5rem;
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 2rem 1.5rem;
  background: linear-gradient(135deg, #fffaf0 0%, var(--cream-light) 100%);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(168, 132, 62, 0.12), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  border: 1px solid rgba(201, 161, 99, 0.25);
}
.sabbath-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
}
.sabbath-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.4rem;
  filter: drop-shadow(0 2px 4px rgba(168, 132, 62, 0.25));
}
.sabbath-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.sabbath-day {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--charcoal);
  margin-top: 0.1rem;
}
.sabbath-when {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--burgundy);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}
.sabbath-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(201, 161, 99, 0.45) 25%,
    rgba(201, 161, 99, 0.45) 75%,
    transparent 100%);
}
.sabbath-quote {
  text-align: center;
  margin: 1.75rem auto 0;
  color: var(--warm-gray);
  font-size: 0.95rem;
  max-width: 520px;
  font-family: var(--font-display);
}
.sabbath-quote em { color: var(--charcoal); }
.sabbath-quote-ref {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-style: normal;
  color: var(--gold-dark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 600;
}
@media (max-width: 560px) {
  .sabbath-times {
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1.25rem;
  }
  .sabbath-divider {
    width: 70%;
    height: 1px;
    align-self: center;
    background: linear-gradient(to right,
      transparent 0%,
      rgba(201, 161, 99, 0.45) 25%,
      rgba(201, 161, 99, 0.45) 75%,
      transparent 100%);
  }
  .sabbath-when { font-size: 2rem; }
}
body.dark-mode .sabbath-times {
  background: linear-gradient(135deg, #1a2332 0%, #111827 100%);
  border-color: rgba(201, 161, 99, 0.35);
}
body.dark-mode .sabbath-day { color: var(--cream); }
body.dark-mode .sabbath-when { color: var(--gold-light); }
body.dark-mode .sabbath-quote em { color: var(--cream); }
body.dark-mode .sabbath-subtitle { color: var(--cream-dark); }

/* ============================================================
   TESTIMONIALS AUTO-CAROUSEL
   ============================================================ */
.testimony-carousel {
  position: relative;
  overflow: hidden;
  max-width: 700px;
  margin: 0 auto;
}
.testimony-carousel .testimony-card {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ============================================================
   GALLERY LIGHTBOX IMPROVEMENTS
   ============================================================ */
.lightbox-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
  z-index: 10001;
}
.lightbox-nav:hover { background: var(--gold); color: var(--navy); }
.lightbox-nav.prev { left: 1.5rem; }
.lightbox-nav.next { right: 1.5rem; }
.lightbox-download {
  position: absolute;
  top: 1.5rem; left: 1.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-xl);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s;
}
.lightbox-download:hover { background: var(--gold); color: var(--navy); }

/* ============================================================
   DIRECTIONS BUTTON
   ============================================================ */
.directions-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  background: var(--maps-green);
  color: #fff;
  border-radius: var(--radius-xl);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-smooth);
}
.directions-btn:hover { background: var(--maps-green-dark); color: #fff; transform: translateY(-1px); }
.directions-btn svg { width: 18px; height: 18px; }

@media print {
  .navbar, .footer, .chat-widget, .back-to-top, .cookie-consent,
  .announcement-bar, .newsletter-bar, .a11y-toggle, .breadcrumbs,
  .nav-search, .hero-actions, .carousel-btn, .carousel-dots { display: none !important; }
  body { color: #000; background: #fff; font-size: 12pt; }
  .hero { min-height: auto; padding: 2rem 1rem; background: #eee; }
  .hero h1, .hero p, .page-hero h1, .page-hero p { color: #000; }
  .section-dark, .section-gradient { background: #f5f5f5; }
  .section-dark h2, .section-dark h3, .section-dark h4,
  .section-dark p, .section-gradient h2, .section-gradient p { color: #000; }
  a { color: #000; text-decoration: underline; }
  .card, .event-card, .testimony-card { box-shadow: none; border: 1px solid #ddd; }
  .btn { border: 1px solid #000; background: none; color: #000; box-shadow: none; }
}

/* ============================================================
   PHASE 2 — invisible quality additions
   Skeletons, toasts, page fade, focus ring, reduced motion.
   Additive only; no overrides to existing component styles.
   ============================================================ */

/* --- Skeleton placeholders ------------------------------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(22, 33, 57, 0.08);
  border-radius: var(--radius-md, 12px);
  min-height: 1em;
  color: transparent;
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 161, 99, 0.18) 50%,
    transparent 100%);
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}
.skeleton-card { height: 200px; }
.skeleton-line { height: 0.85em; margin: 0.45em 0; min-height: 0.85em; }
.skeleton-hero { height: 420px; border-radius: var(--radius-lg, 20px); }

/* --- Toast notifications --------------------------------- */
.toast-container {
  position: fixed;
  top: 1.25rem; right: 1.25rem;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 0.5rem;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 2rem));
}
.toast {
  background: var(--navy-dark, #192439);
  color: var(--off-white, #fdfbf7);
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
  border-left: 3px solid var(--gold, #c9a163);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: auto;
  font-family: var(--font-body, inherit);
  font-size: 0.92rem;
  line-height: 1.4;
}
.toast.is-show { opacity: 1; transform: translateY(0); }
.toast.is-success { border-left-color: #4caf7a; }
.toast.is-error   { border-left-color: var(--error); }
.toast.is-info    { border-left-color: var(--gold, #c9a163); }

/* --- Page fade-in (body-level) --------------------------- */
body { opacity: 0; transition: opacity 260ms ease; }
body.is-loaded { opacity: 1; }

/* --- Consistent focus ring ------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--gold, #c9a163);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Global reduced-motion override ---------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; }
  body { opacity: 1; transition: none; }
  .toast { transition: none; }
  .skeleton::after { display: none; }
}

/* ============================================================
   PHASE 1: HERO POLISH (2026-04-27)
   Scope: homepage hero + global announcement-bar states
   ============================================================ */

/* ---------- Task 3: Hero typography ---------- */
/* Each <span> inside .hero-title is its own block-level line so the title
   reads as three centered lines: cream / gold-italic accent / cream. */
.hero-title {
  color: var(--cream);
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 auto 1.5rem;
  text-align: center;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
  animation: fadeInUp 1s ease-out 0.2s both;
}
.hero-title > span { display: block; }

.hero-subtitle {
  font-size: clamp(1.05rem, 2.1vw, 1.35rem);
}

@media (max-width: 768px) {
  .hero-title { font-size: clamp(1.8rem, 6vw, 2.6rem); }
}
@media (max-width: 420px) {
  .hero-title    { font-size: 1.7rem; line-height: 1.18; }
  .hero-subtitle { font-size: 1rem; }
}

/* ---------- Task 4: Cream-line light sweep — REMOVED 2026-05-02 ----------
   The original gradient sweep used `background-clip: text` + transparent
   fill on .hero-title-sweep spans. That technique cannot coexist with
   per-letter <span> wrapping (Chromium clips the gradient to the parent's
   direct text only — once text moves into children, the gradient
   renders nothing). See docs/superpowers/specs/2026-04-30-hero-letter-twinkle-design.md
   "Revision history" for the full rationale.

   The .hero-title-sweep class is preserved as a structural hook on the
   cream-line spans (HTML untouched); cream colour comes from
   .hero-title's own `color: var(--cream)`. The per-letter twinkle (below)
   is now the only ongoing animation on the title text. */

/* ============================================================
   PHASE 1 ADDITION: Per-letter hero twinkle (2026-04-30)
   Layered on top of the existing slide-in + line-level sweep.
   Intro burst fires once during the 3.6s..6.6s window after
   page load — i.e. just after the third title line lands. The
   idle phase gives each letter a 1500s cycle with one ~0.75s
   glint; across ~50 letters this surfaces roughly one glint
   every ~30s (organic, not metronomic).
   ============================================================ */
.hero-word { display: inline-block; white-space: nowrap; }

.hero-ch {
  display: inline-block;        /* required for `filter` to apply */
  animation:
    heroLetterIntro 0.5s ease-out var(--intro-delay, 3.6s) 1 both,
    heroLetterIdle 1500s linear var(--idle-delay, 0s) infinite;
}

/* Intro burst — single 0.5s glint per letter, fires once. */
@keyframes heroLetterIntro {
  0%, 100% {
    filter: brightness(1);
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
  }
  40%, 60% {
    filter: brightness(1.34);
    text-shadow:
      0 0 14px rgba(255, 220, 140, 0.75),
      0 0 3px rgba(255, 255, 255, 0.6),
      0 2px 22px rgba(0, 0, 0, 0.35);
  }
}

/* Idle re-twinkle — 0.75s glint at start of each 1500s cycle. */
@keyframes heroLetterIdle {
  0% {
    filter: brightness(1);
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
  }
  0.025% {
    filter: brightness(1.34);
    text-shadow:
      0 0 14px rgba(255, 220, 140, 0.75),
      0 0 3px rgba(255, 255, 255, 0.6),
      0 2px 22px rgba(0, 0, 0, 0.35);
  }
  0.05%, 100% {
    filter: brightness(1);
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ch { animation: none; filter: none; }
}

/* ---------- Task 5: Hero-content drift ---------- */
.hero-content { animation: heroDrift 9s ease-in-out infinite alternate; }

@keyframes heroDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-content { animation: none; }
}

/* ---------- Task 6: Animated placeholder background ---------- */
.hero-bg-placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(201, 161, 99, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 75%, rgba(107, 45, 62, 0.18) 0%, transparent 50%),
    linear-gradient(165deg, var(--navy-dark) 0%, var(--navy) 45%, var(--navy-light) 100%);
  overflow: hidden;
}

.hero-bg-rays {
  position: absolute;
  inset: -20%;
  background:
    conic-gradient(
      from 200deg at 30% 20%,
      transparent 0deg,
      rgba(201, 161, 99, 0.12) 25deg,
      transparent 50deg,
      transparent 360deg
    );
  filter: blur(40px);
  animation: heroRaysDrift 24s linear infinite;
  will-change: transform;
}

.hero-bg-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 110%, rgba(201, 161, 99, 0.18), transparent 60%);
  animation: heroGlowPulse 9s ease-in-out infinite alternate;
}

@keyframes heroRaysDrift { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes heroGlowPulse { from { opacity: 0.55; } to { opacity: 0.9; } }

@media (prefers-reduced-motion: reduce) {
  .hero-bg-rays, .hero-bg-glow { animation: none; }
}

/* ---------- Task 7: Deepen the dark tint over the placeholder ---------- */
.hero-bg::after {
  background: linear-gradient(
    165deg,
    rgba(20, 30, 50, 0.72) 0%,
    rgba(34, 49, 76, 0.65) 50%,
    rgba(46, 65, 102, 0.6) 100%
  );
}

/* ---------- Task 8: Live Now banner state classes ---------- */
.announcement-bar.is-live    { background: linear-gradient(135deg, #e8745a, #d35940); color: #fff; }
.announcement-bar.is-live .announcement-text::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  margin-right: 0.5em;
  vertical-align: middle;
  animation: liveDot 1.4s ease-in-out infinite;
}
.announcement-bar.is-upcoming { background: var(--gold-dark); color: #fff; }
.announcement-bar.is-quiet    { background: var(--navy); color: var(--cream); }

@keyframes liveDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  .announcement-bar.is-live .announcement-text::before { animation: none; }
}

/* ============================================================
   PHASE 4: TEXT-SIZE TOGGLE (2026-04-27)
   Scales the document via root font-size; rem-based dimensions
   throughout the site cascade naturally.
   ============================================================ */
body.font-size-large { font-size: 115%; }
body.font-size-xl    { font-size: 130%; }

#fontSizeToggle {
  position: relative;
}
#fontSizeToggle .aa-letters {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1rem;
  color: inherit;
}
#fontSizeToggle .step-pill {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--gold);
  color: var(--navy-dark);
  font-size: 0.55rem;
  font-weight: 700;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  line-height: 1;
  pointer-events: none;
}

/* ============================================================
   POLISH PHASE: smooth scroll + scroll-progress indicator (2026-04-28)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 10000;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.scroll-progress-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
}

/* ============================================================
   ANNOUNCEMENT BAR — fixed-position fix (2026-04-28)
   When the bar is visible we pin it above the navbar (z-index 1002 > 1000)
   and shift the navbar + page content down so nothing overlaps.
   ============================================================ */
.announcement-bar.visible {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1002;
}
body.has-announcement {
  padding-top: 42px;
}
body.has-announcement .navbar {
  top: 42px;
}
@media (max-width: 480px) {
  body.has-announcement {
    padding-top: 64px;
  }
  body.has-announcement .navbar {
    top: 64px;
  }
}

/* ============================================================
   COOLER ANIMATIONS (2026-04-28)
   1. Hero title word-by-word stagger
   2. .gold-line underline draw on reveal
   3. Card hover-lift refinement
   4. Gradient slide on primary buttons
   ============================================================ */

/* (1) FLASHY hero title entrance — far-edge slide with overshoot bounce,
       scale punch, blur-to-sharp, and a gold drop-shadow burst on landing.
         span 1 ("Welcome to")            slides in from the LEFT
         span 2 ("Wycombe Community")     slides in from the RIGHT
         span 3 ("Seventh-day Adventist") slides in from the LEFT
       Each settles at translateX(0) — the centred resting state. */
.hero-title > span {
  opacity: 0;
  display: block;
  will-change: transform, opacity, filter;
}

/* Two simultaneous animations per span: the slide-in (with overshoot)
   and a separate gold-flash that fires the moment the slide lands. */
.hero-title > span:nth-child(1) {
  animation:
    heroSlideInLeft 1.6s cubic-bezier(0.34, 1.4, 0.64, 1) 0.30s both,
    heroLandFlash   1.0s ease-out                        1.65s both;
}
.hero-title > span:nth-child(2) {
  animation:
    heroSlideInRight 1.6s cubic-bezier(0.34, 1.4, 0.64, 1) 0.85s both,
    heroLandFlash    1.0s ease-out                        2.20s both;
}
.hero-title > span:nth-child(3) {
  animation:
    heroSlideInLeft 1.6s cubic-bezier(0.34, 1.4, 0.64, 1) 1.40s both,
    heroLandFlash   1.0s ease-out                        2.75s both;
}

@keyframes heroSlideInLeft {
  0%   { opacity: 0; transform: translateX(-65vw) scale(0.78); filter: blur(10px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateX(0)     scale(1);    filter: blur(0); }
}
@keyframes heroSlideInRight {
  0%   { opacity: 0; transform: translateX(65vw)  scale(0.78); filter: blur(10px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateX(0)     scale(1);    filter: blur(0); }
}

/* Gold drop-shadow flash — works on transparent text (the shimmer spans use
   background-clip: text + transparent fill) because drop-shadow respects
   the alpha mask. Layered with a brightness boost for extra "pop". */
@keyframes heroLandFlash {
  0%   { filter: drop-shadow(0 0 0   rgba(201, 161, 99, 0))   brightness(1); }
  35%  { filter: drop-shadow(0 0 28px rgba(201, 161, 99, 0.95)) brightness(1.25); }
  100% { filter: drop-shadow(0 0 0   rgba(201, 161, 99, 0))   brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title > span {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* (2) .gold-line underline draw — left-to-right fill when scrolled into view.
   Only kicks in when a `.reveal*` ancestor receives the `.visible` class. */
.gold-line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.reveal.visible .gold-line,
.reveal-left.visible .gold-line,
.reveal-right.visible .gold-line,
.reveal-scale.visible .gold-line,
.section-header.reveal.visible .gold-line {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .gold-line { transform: scaleX(1); transition: none; }
}

/* (3) Card hover-lift — standardised across the site. */
.card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
}
.card-dark:hover {
  border-color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

/* (4) Subtle gradient slide on primary CTA buttons. */
.btn-coral, .btn-primary, .btn-dark {
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.4s ease;
}
.btn-coral:hover, .btn-primary:hover, .btn-dark:hover {
  background-position: 100% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .btn-coral, .btn-primary, .btn-dark { transition: none; }
}

/* ============================================================
   WOW POLISH (2026-04-28)
   1. Hero parallax (transform set by JS)
   2. Magnetic glow halo on primary CTAs
   3. Card hover lift + 3D depth feel
   4. Section h2 reveal with gold-glow underline
   ============================================================ */

/* (1) Hero parallax — JS sets translate3d(0, Y, 0). Just declare will-change. */
.hero .hero-bg {
  will-change: transform;
}

/* (2) Magnetic glow halo on primary CTAs.
   On hover the button gains a soft gold halo + slight lift. The halo fades
   out as the cursor leaves. */
.btn-coral, .btn-primary {
  position: relative;
}
.btn-coral:hover, .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 38px rgba(232, 116, 90, 0.55),
    0 12px 36px rgba(211, 89, 64, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.btn-dark:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 36px rgba(201, 161, 99, 0.40),
    0 10px 30px rgba(0, 0, 0, 0.30);
}
.btn-outline:hover {
  background: rgba(201, 161, 99, 0.08);
  border-color: var(--gold);
  box-shadow:
    0 0 26px rgba(201, 161, 99, 0.32),
    0 6px 22px rgba(0, 0, 0, 0.10);
}

/* (3) Card 3D depth on hover — uses perspective for a tasteful tilt.
   The lift+shadow already exists; this layers a subtle perspective hint. */
.card {
  transform-style: preserve-3d;
  perspective: 1000px;
}
.card:hover {
  transform: translateY(-6px) translateZ(0) scale(1.005);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
}

/* (4) Section h2 reveal — pop in with a brief gold drop-shadow flash. */
.section-header.reveal h2 {
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1), filter 0.5s ease-out;
}
.section-header.reveal.visible h2 {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: sectionH2Glow 1.1s ease-out 0.3s both;
}
@keyframes sectionH2Glow {
  0%   { filter: drop-shadow(0 0 0 rgba(201, 161, 99, 0)); }
  40%  { filter: drop-shadow(0 0 22px rgba(201, 161, 99, 0.55)); }
  100% { filter: drop-shadow(0 0 0 rgba(201, 161, 99, 0)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-bg { will-change: auto; transform: none !important; }
  .btn-coral:hover, .btn-primary:hover, .btn-dark:hover, .btn-outline:hover { transform: none; }
  .card:hover { transform: none; }
  .section-header.reveal h2 { opacity: 1; transform: none; transition: none; }
  .section-header.reveal.visible h2 { animation: none; }
}

/* ============================================================
   BELIEF CARDS — hover-reveal background image (2026-04-29)
   Each .belief-card has a CSS custom property --bg-img set inline.
   The image fades in (and slightly zooms) only when the card is
   hovered. Text stays readable thanks to the dark gradient overlay.
   Used on about.html for the "What We Believe" section.
   ============================================================ */
.belief-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.belief-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(165deg,
      rgba(20, 30, 50, 0.78) 0%,
      rgba(34, 49, 76, 0.68) 50%,
      rgba(46, 65, 102, 0.62) 100%),
    var(--bg-img, none) center/cover no-repeat;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.5s ease-out,
              transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1);
  z-index: 0;
  pointer-events: none;
}
.belief-card:hover::before,
.belief-card:focus-within::before {
  opacity: 1;
  transform: scale(1);
}
.belief-card .card-body {
  position: relative;
  z-index: 1;
}
/* When hovered, give the gold heading a subtle drop-shadow so it stays
   crisp against the new image. */
.belief-card:hover h4,
.belief-card:focus-within h4 {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .belief-card::before {
    transition: opacity 0.2s ease;
    transform: none;
  }
}

/* ============================================================
   SITE-WIDE UPGRADES (2026-04-29)
   1. Floating gold particles in hero sections
   2. Card shine-sweep on hover (every .card site-wide)
   3. Counter animation visibility helper
   4. Button click ripple
   ============================================================ */

/* (1) Floating particles container — injected by initFloatingParticles().
   Lives inside any .hero or .page-hero. */
.particle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;            /* above .hero-bg::after overlay (z-index 1) won't fly — we want
                              particles ABOVE the overlay but BELOW .hero-content (z-index 2).
                              So this z-index 1 puts them at the same level as the overlay,
                              and source order (after overlay) renders them on top of it.
                              Actually hero-content is z-index 2 and overlay is z-index 1,
                              so we use z-index 1 with later source order. */
}
.particle-field .particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,235,200,0.85) 0%, rgba(201,161,99,0.5) 60%, transparent 100%);
  opacity: 0;
  animation: particleFloat var(--dur, 14s) ease-in-out var(--delay, 0s) infinite;
  filter: blur(0.5px);
  will-change: transform, opacity;
}
@keyframes particleFloat {
  0%   { opacity: 0; transform: translate3d(0, 30px, 0) scale(0.8); }
  20%  { opacity: 0.7; }
  50%  { opacity: 1; transform: translate3d(var(--dx, 20px), var(--dy, -60px), 0) scale(1.05); }
  80%  { opacity: 0.6; }
  100% { opacity: 0; transform: translate3d(0, -120px, 0) scale(0.7); }
}

/* (2) Card shine-sweep on hover — slowed to 1.4 s for a more graceful pass. */
.card { position: relative; overflow: hidden; }
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 235, 200, 0.18) 48%,
    rgba(255, 235, 200, 0.32) 50%,
    rgba(255, 235, 200, 0.18) 52%,
    transparent 70%
  );
  transform: translateX(-110%);
  transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.3, 1);
  pointer-events: none;
  z-index: 3;
}
.card:hover::after { transform: translateX(110%); }
.belief-card::after,
.belief-card:hover::after { display: none; }

/* (3) Animated number counters — class added by JS once visible. */
.counter-up { display: inline-block; transition: transform 0.3s ease; }

/* (4) Button click ripple — slowed to 1.0 s for a more visible expansion. */
.btn { position: relative; overflow: hidden; }
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: btnRipple 1.0s ease-out forwards;
}
@keyframes btnRipple {
  to { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}
.btn-outline .btn-ripple,
.btn-dark .btn-ripple { background: rgba(201, 161, 99, 0.5); }

@media (prefers-reduced-motion: reduce) {
  .particle-field { display: none; }
  .card::after { display: none; }
  .btn-ripple { display: none; }
}

/* ============================================================
   MORE SITE-WIDE FEATURES (2026-04-29)
   5. Animated underline on content text-links
   6. Image hover-zoom on card-img
   7. Image lazy fade-in (clean loading)
   8. Tooltip system via data-tooltip
   9. Copy-to-clipboard via data-copy
  10. Pulse glow on the chat FAB
  11. External-link icon
   ============================================================ */

/* (5) Animated underline on content links inside paragraphs/lists/cards.
   Targets <a> elements that aren't buttons/nav/social. */
.section a:not(.btn):not(.directions-btn):not(.social-icon):not(.card-date),
.card-body a:not(.btn),
.event-info a:not(.btn) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: left 90%;
  background-repeat: no-repeat;
  transition: background-size 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.section a:not(.btn):not(.directions-btn):not(.social-icon):not(.card-date):hover,
.card-body a:not(.btn):hover,
.event-info a:not(.btn):hover {
  background-size: 100% 1px;
}

/* (6) Image hover-zoom on .card-img and event/gallery image children. */
.card-img,
.gallery-item img,
.event-card img {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
  display: block;
  will-change: transform;
}
.card:hover .card-img,
.gallery-item:hover img,
.event-card:hover img {
  transform: scale(1.06);
}

/* (7) Image lazy fade-in — applied by JS when an <img loading="lazy"> finishes
   loading. Stops the harsh "snap-in" on slow connections. */
img[data-fade-in] {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
img[data-fade-in].loaded { opacity: 1; }

/* (8) Tooltip — shows a small label on hover/focus of any element with
   data-tooltip="..." */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--navy-dark);
  color: var(--cream);
  font-size: 0.72rem;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 9999;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* (9) Copy-to-clipboard button hint state. */
[data-copy] {
  cursor: copy;
  transition: color 0.2s ease;
}
[data-copy].copied {
  color: var(--gold) !important;
}
[data-copy].copied::before {
  content: '✓ Copied — ';
  color: var(--gold);
  font-weight: 600;
}

/* (10) Pulse glow on the chat FAB to draw attention (only when idle, only
   on the homepage / main pages). The chat FAB lives outside .fab-group. */
.chat-launcher,
#chatLauncher,
.fab-chat {
  position: relative;
}
.chat-launcher::before,
#chatLauncher::before,
.fab-chat::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(201, 161, 99, 0.3);
  opacity: 0;
  animation: chatPulse 3s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes chatPulse {
  0%   { opacity: 0; transform: scale(0.95); }
  35%  { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1.6); }
}

/* (11) External link icon — small ↗ glyph after off-domain anchors. */
.section a[target="_blank"]:not(.btn):not(.social-icon):not(.directions-btn):not(.share-btn)::after,
.card-body a[target="_blank"]:not(.btn)::after {
  content: ' ↗';
  font-size: 0.85em;
  color: var(--gold-dark);
  margin-left: 0.15em;
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .card-img, .gallery-item img, .event-card img { transition: none; }
  .card:hover .card-img,
  .gallery-item:hover img,
  .event-card:hover img { transform: none; }
  img[data-fade-in] { opacity: 1; transition: none; }
  .chat-launcher::before, #chatLauncher::before, .fab-chat::before { animation: none; opacity: 0; }
  [data-tooltip]::after { transition: opacity 0.05s ease; }
  .section a:not(.btn) { transition: none; }
}