@charset "UTF-8";

/* ============================================
   Section: Base Variables & Reset
   ============================================ */
:root {
  --primary-blue: #008fb3;
  --dark-blue: #067a9a;
  --mid-blue: #2998ba;
  --light-blue: #66cce2;
  --white: #fff;
  --gray-50: #f7f9fb;
  --gray-100: #eef3f6;
  --gray-200: #dde7ee;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-600: #6b7280;
  --text-color: #0c2a33;
  --brown: #736357;
  --gold: #c9ad3b;
  --shadow: 0 10px 25px rgba(0,0,0,.12);
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: auto; /* Disable CSS smooth scroll - using JavaScript easing instead */
}

body {
  margin: 0;
  padding: 0;
  color: var(--text-color);
  background: var(--white);
  font-family: 'Raleway', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

@media (max-width: 768px) {
  /* Lock viewport height to prevent jumping when URL bar shows/hides */
  html {
    height: 100%;
    height: -webkit-fill-available;
    overflow-y: auto;
    width: 100%;
  }
  
  body {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overflow-y: auto;
    height: 100%;
    min-height: 100%;
    min-height: -webkit-fill-available;
    position: relative;
    width: 100%;
  }
  
}

/* ============================================
   Section: Utilities
   ============================================ */
.text-center { text-align: center; }
.text-white { color: #fff; }
.text-dark { color: #163742; }
.text-gray { color: #577c8a; }
.no-underline { text-decoration: none; }
.margin-sm { margin: 0.2rem 0 0.4rem; }
.margin-md { margin: 0.5rem 0 1rem; }
.margin-top-sm { margin-top: 10px; }
.margin-top-md { margin-top: 0.6rem; }
.margin-bottom-2 { margin: 0 auto 2rem; }
.height-md { height: 14px; }
.font-sm { font-size: 0.95rem; }

/* ============================================
   Section: Header
   ============================================ */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.2) blur(4px);
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  z-index: 1000;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  padding: 0.6rem 0;
  will-change: background, box-shadow;
}

header.scrolled {
  background: rgba(255,255,255,.9);
  padding: 0.3rem 0;
}

@media (max-width: 768px) {
  /* On mobile, keep padding constant to prevent layout shifts during scroll */
  header {
    padding: 0.6rem 0 !important;
  }
  
  header.scrolled {
    padding: 0.6rem 0 !important;
  }
}

header.scrolled nav {
  padding: 0.3rem 2rem;
}

@media (max-width: 768px) {
  header.scrolled nav {
    padding: 0.4rem 1rem;
    justify-content: center;
    position: relative;
    align-items: center;
    min-height: 52px;
  }
}

header.scrolled .logo {
  height: 45px;
  transition: height 0.3s ease;
}

@media (min-width: 769px) {
  header.scrolled {
    padding: 0.2rem 0;
  }
  
  header.scrolled nav {
    padding: 0.2rem 2rem;
  }
  
  header.scrolled .logo {
    height: 40px;
  }
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.logo {
  height: 56px;
  width: auto;
  transition: transform 0.25s ease;
  display: flex;
  align-items: center;
}

header.scrolled .logo {
  transform: scale(0.92);
}

@media (max-width: 768px) {
  header.scrolled .logo {
    transform: translateX(-50%) scale(0.92) !important;
  }
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: #0a4d5f;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 0.35rem 0.4rem;
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 2px;
  background: var(--brown);
  transition: right 0.25s ease;
}

.nav-links a:hover::after {
  right: 0;
}

.nav-item {
  position: relative;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
}

.dropdown-content {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  min-width: 220px;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.nav-item:hover .dropdown-content,
.nav-item:focus-within .dropdown-content {
  display: block;
}

.dropdown-content a {
  display: block;
  padding: 0.6rem 1rem;
  color: #2a3b43;
}

.dropdown-content a:hover {
  background: #f5f7f9;
}

.mobile-menu-button {
  display: none;
  background: none;
  border: 0;
  font-size: 28px;
  cursor: pointer;
  color: #0a3b49;
}

/* ============================================
   Section: Radio Player Button
   ============================================ */
.radio-button-container {
  position: relative;
}

.radio-play-btn {
  background: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  padding: 0;
  line-height: 1;
}

.radio-play-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.radio-play-btn .play-icon {
  display: inline-block;
}

.radio-play-btn .audio-icon {
  display: none;
}

.radio-play-btn.playing .play-icon {
  display: none !important;
}

.radio-play-btn.playing .audio-icon {
  display: inline-block !important;
}

.radio-play-btn.playing .audio-icon .wave-bar {
  fill: currentColor;
  transform-origin: center bottom;
}

/* Animated audio waveform */
@keyframes audioWave {
  0%, 100% {
    transform: scaleY(0.4);
    opacity: 0.6;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.radio-play-btn.playing .audio-icon .wave-bar {
  animation: audioWave 0.8s ease-in-out infinite;
}

.radio-play-btn.playing .audio-icon .wave-bar:nth-child(1) {
  animation-delay: 0s;
}

.radio-play-btn.playing .audio-icon .wave-bar:nth-child(2) {
  animation-delay: 0.15s;
}

.radio-play-btn.playing .audio-icon .wave-bar:nth-child(3) {
  animation-delay: 0.3s;
}

.radio-play-btn.playing .audio-icon .wave-bar:nth-child(4) {
  animation-delay: 0.15s;
}

.radio-play-btn:hover {
  background: var(--dark-blue);
  transform: scale(1.05);
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

.radio-play-btn:active {
  transform: scale(0.95);
}

.radio-play-btn.playing {
  background: var(--dark-blue);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
  50% { box-shadow: 0 2px 10px rgba(0, 143, 179, 0.4); }
}

.radio-player-expanded {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--primary-blue);
  padding: 0.5rem 0.75rem;
  min-width: 400px;
  max-width: 500px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1001;
}

.radio-player-expanded.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hide mobile player on desktop */
@media (min-width: 769px) {
  .mobile-radio-player {
    display: none !important;
  }
}

.radio-player-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.radio-stop-btn {
  background: transparent;
  color: var(--primary-blue);
  border: 1px solid var(--primary-blue);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.radio-stop-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.radio-stop-btn:hover {
  background: var(--primary-blue);
  color: white;
}

.radio-track-name {
  font-weight: 600;
  color: var(--primary-blue);
  font-size: 0.9rem;
  font-family: 'Raleway', sans-serif;
  min-width: 0;
  flex: 0 1 auto;
  max-width: 150px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

/* Inner wrapper for scrolling text - marquee container */
.radio-track-name-inner {
  display: inline-block;
  white-space: nowrap;
}

/* Wrapper for marquee content (contains both spans) */
.radio-track-name-marquee {
  display: inline-flex;
  white-space: nowrap;
}

/* Scrolling animation for long track names - seamless marquee */
.radio-track-name.scrolling .radio-track-name-marquee {
  animation: scroll-text-marquee var(--scroll-duration, 20s) linear infinite;
  will-change: transform;
  display: inline-flex;
}

@keyframes scroll-text-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--scroll-distance, -100%));
  }
}

.radio-scrubber {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: #e0e0e0;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  min-width: 100px;
  touch-action: none; /* Prevent default touch behaviors */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

.radio-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--primary-blue);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  -webkit-tap-highlight-color: transparent;
}

.radio-scrubber::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--primary-blue);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Larger touch targets and wider scrubber on mobile */
@media (max-width: 768px) {
  .radio-player-content {
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }
  
  /* First row: buttons and track name */
  .radio-stop-btn,
  .radio-share-btn,
  .radio-hide-btn {
    flex-shrink: 0;
  }
  
  .radio-track-name {
    flex: 1;
    min-width: 0;
    max-width: none;
    order: 0;
  }
  
  /* Second row: scrubber full width */
  .radio-scrubber {
    height: 10px;
    margin: 4px 0;
    width: 100%;
    min-width: 100%;
    flex: 1 1 100%;
    order: 1;
    /* Ensure proper appearance */
    -webkit-appearance: none;
    appearance: none;
  }
  
  .radio-scrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    background: var(--primary-blue);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    margin-top: -9px; /* Center the thumb vertically */
  }
  
  .radio-scrubber::-moz-range-thumb {
    width: 28px;
    height: 28px;
    background: var(--primary-blue);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }
  
  /* Third row: time displays */
  .radio-time,
  .radio-time-sep {
    font-size: 0.85rem;
    order: 2;
    flex: 0 0 auto;
  }
  
  .radio-time-sep {
    margin: 0 0.25rem;
  }
}

.radio-time {
  font-size: 0.8rem;
  color: #666;
  font-family: 'Raleway', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}

.radio-share-btn {
  background: transparent;
  color: var(--primary-blue);
  border: none;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin: 0;
}

.radio-share-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.radio-share-btn:hover {
  background: var(--primary-blue);
  color: white;
  transform: scale(1.1);
}

.radio-time-sep {
  font-size: 0.8rem;
  color: #999;
  margin: 0 0.15rem;
  flex-shrink: 0;
}

.radio-hide-btn {
  background: transparent;
  color: var(--primary-blue);
  border: 1px solid var(--primary-blue);
  border-radius: 4px;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  transition: all 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.radio-hide-btn:hover {
  background: var(--primary-blue);
  color: white;
}

#radio-audio-player,
#mobile-radio-audio-player {
  display: none;
}

/* Mobile radio button - positioned left of menu button */
.mobile-radio-btn {
  display: none;
  margin-right: 0.75rem;
}

.mobile-radio-player {
  position: fixed;
  top: 52px;
  left: 0.75rem;
  right: 0.75rem;
  margin: 0;
  border-radius: 8px;
  min-width: auto;
  max-width: none;
  width: calc(100% - 1.5rem);
  padding: 0.4rem 0.75rem;
  display: none; /* Hidden by default, shown only on mobile */
}

.mobile-radio-player.active {
  display: block;
}

@media (max-width: 768px) {
  header {
    padding: 0.4rem 0;
  }
  
  nav {
    padding: 0.4rem 1rem;
    justify-content: center;
    position: relative;
    align-items: center;
    min-height: 60px;
  }
  
  .logo {
    height: 52px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    top: 50%;
    margin-top: -26px; /* Half of height to center vertically */
  }
  
  header.scrolled .logo {
    height: 48px;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) scale(0.92) !important;
    margin: 0 !important;
    top: 50% !important;
    margin-top: -22px !important; /* Half of scaled height to center vertically */
  }
  
  .mobile-radio-btn {
    display: flex;
    order: -1;
    margin-right: auto; /* Push to left */
    margin-left: 0;
  }
  
  .mobile-menu-button {
    margin-left: auto; /* Push to right */
    margin-right: 0;
  }
  
  .radio-button-container {
    display: none;
  }
  
  /* Hide desktop player on mobile */
  .radio-player-expanded:not(.mobile-radio-player) {
    display: none !important;
  }
  
  .mobile-radio-player {
    top: 52px; /* Adjusted for reduced header height */
    display: none; /* Hidden by default */
  }
  
  .mobile-radio-player.active {
    display: block;
  }
  
  .radio-player-expanded {
    min-width: auto;
    max-width: none;
    width: calc(100% - 1.5rem);
    left: 0.75rem;
    right: 0.75rem;
  }
  
  .radio-track-name {
    max-width: 100px;
    font-size: 0.85rem;
  }
  
  .radio-scrubber {
    height: 8px;
    min-width: 80px;
  }
  
  .radio-scrubber::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
  }
  
  .radio-scrubber::-moz-range-thumb {
    width: 18px;
    height: 18px;
  }
  
  .radio-time {
    font-size: 0.75rem;
  }
  
  .radio-hide-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
  }
}

.mobile-menu {
  position: fixed !important;
  inset: 0 0 0 auto !important;
  width: min(84vw, 420px) !important;
  transform: translateX(100%) !important;
  background: linear-gradient(180deg, #0b2f3a 0%, #0a3b49 100%) !important;
  color: #fff !important;
  z-index: 1100 !important;
  padding: 3.5rem 1.25rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  transition: transform 0.3s ease !important;
  overflow-y: auto !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important; /* Disable clicks when hidden */
}

.mobile-menu.active {
  transform: translateX(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important; /* Enable clicks when active */
  display: flex !important;
}

.close-menu-button {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 32px;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  z-index: 10;
}

.mobile-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 1.05rem;
  display: block;
  padding: 0.35rem 0;
  pointer-events: auto !important;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.mobile-menu-item {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 0.5rem;
}

.mobile-menu-toggle {
  width: 100%;
  text-align: left;
  font-size: 1rem;
  padding: 0.3rem 0;
  background: none;
  border: 0;
  color: #fff;
}

.mobile-submenu {
  display: flex;
  flex-direction: column;
  padding: 0.2rem 0 0.6rem 0.5rem;
  gap: 0.3rem;
}

/* ============================================
   Section: Hero
   ============================================ */
.hero {
  position: relative;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  min-height: -webkit-fill-available;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fffaf3;
  overflow: hidden;
  font-family: 'Raleway', system-ui, sans-serif;
}

@media (max-width: 768px) {
  .hero {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    min-height: -webkit-fill-available;
  }
}

.hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.15) 35%,
    rgba(0, 0, 0, 0.35) 100%
  );
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  padding: 0 1.5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hero h1 {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(34px, 4.2vw, 64px);
  font-weight: 400;
  color: #fffdf8;
  margin: 0 0 0.4rem;
  line-height: 1.05;
}

.hero-lead-1 {
  font-family: 'Montserrat', sans-serif;
  color: #f5d98e;
  font-size: clamp(20px, 2.5vw, 32px);
  margin: 0.4rem 0 0.6rem;
  font-weight: 600;
}

.hero-lead-2 {
  color: #fffaf3;
  font-size: clamp(16px, 1.9vw, 24px);
  margin: 0.4rem auto 1.4rem;
  max-width: 900px;
  opacity: 0.94;
}

.cta-button {
  display: inline-block;
  background: #d7b25f;
  color: #fffaf3;
  border-radius: 999px;
  padding: 0.85rem 1.6rem;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}

.cta-button:hover {
  background: #f2c762;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
}

.hero.is-faded .hero-content {
  opacity: 0.28;
  transition: opacity 0.25s ease;
}

/* ============================================
   Section: General Sections
   ============================================ */
.section {
  width: 100%;
  padding: 50px 0;
  position: relative;
  z-index: 2;
  min-height: 1px;
  display: block;
}

[data-parallax="image"] {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.section h2 {
  font-family: 'Great Vibes', cursive;
  color: var(--primary-blue);
  text-align: center;
  font-size: clamp(34px, 4.2vw, 64px);
  font-weight: 400;
  margin: 0 0 50px;
  position: relative;
}

.section h2::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12px;
  width: 60px;
  height: 3px;
  background: var(--brown);
  border-radius: 2px;
}

.card-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  box-sizing: border-box;
}

/* Ministries section - full width of section container (respects section padding) */
#ministries .card-container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

/* Children section - 3 cards wide */
#ministries h3.subhead:first-of-type + .card-container {
  grid-template-columns: repeat(3, 1fr);
}

/* Adults section - 4 cards wide */
#ministries h3.subhead:nth-of-type(2) + .card-container {
  grid-template-columns: repeat(4, 1fr);
}

/* Missionaries section - 6 cards wide */
#ministries .card-container.missionaries {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 10px;
}

.card {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-top: 4px solid var(--primary-blue);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
}

.card img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.card {
  text-align: left;
}

.card h3 {
  margin: 0.9rem 1rem 0;
  color: var(--primary-blue);
  text-align: left;
}

.card p {
  margin: 0.5rem 1rem 1.2rem;
  color: #2d4950;
  text-align: left;
}

/* Ensure all cards in Our Ministries section are left-aligned */
#ministries .card {
  text-align: left !important;
}

#ministries .card h3 {
  text-align: left !important;
}

#ministries .card p {
  text-align: left !important;
}

#ministries .card h4 {
  text-align: left !important;
  justify-content: flex-start !important;
}

.card .overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.96);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1.1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 10;
}

.card:hover .overlay,
.card:focus-within .overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Allow pointer events on interactive elements inside overlay - ALWAYS, even when overlay has pointer-events: none */
.card .overlay button,
.card .overlay .expand-button,
.card .overlay a {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 11 !important;
  position: relative !important;
}

.card .overlay .expand-button {
  pointer-events: auto !important;
  z-index: 11;
  position: relative;
  cursor: pointer;
}

/* Ensure buttons are always clickable even when overlay has pointer-events: none */
.card .overlay .expand-button,
.card .overlay button {
  pointer-events: auto !important;
}

.overlay h3 {
  margin: 0 0 0.4rem;
  color: var(--primary-blue);
}

.overlay .expand-button {
  margin-top: 0.8rem;
  background: var(--primary-blue);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

/* ============================================
   Section: What to Expect
   ============================================ */
.about-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 8vh;
  padding-bottom: 0.5vh;
  overflow: hidden;
}

#our-mission {
  position: relative;
  padding: 10px 0 50px 0;
  min-height: auto;
  margin-top: 0;
}

.about-section {
  margin-bottom: 0;
}

.about-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.10) 40%,
    rgba(0,0,0,0.22) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.about-section > * {
  position: relative;
  z-index: 1;
}

.about-section h2 {
  color: #fffdf8;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  margin-bottom: 50px;
  text-align: center;
}

.about-section .card-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  box-sizing: border-box;
}

.about-section .card {
  background: #ffffffeb;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-top: 4px solid var(--primary-blue);
}

.about-section .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.22);
}

.about-section .card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.about-section .card h3 {
  margin: 1rem 1rem 0.4rem;
  color: var(--primary-blue);
  text-align: center;
}

.about-section .card p {
  margin: 0 1rem 1rem;
  color: #2a3b43;
  font-size: 0.98rem;
  line-height: 1.5;
  text-align: center;
}

.about-section .card .overlay {
  background: rgba(255, 255, 255, 0.97);
}

#what-to-expect .expect-intro {
  position: relative;
  max-width: 1400px;
  margin: 0 auto 2rem auto;
  padding: 1.5rem;
  background: rgba(255,255,255,0.88);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  box-sizing: border-box;
}

.expect-card {
  border-top: 4px solid var(--primary-blue);
}

.expect-point {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 1.6rem;
}

.expect-icon {
  flex: 0 0 95px;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  border: 3px solid rgba(255,255,255,0.85);
  background: #fff;
  position: relative;
}

.expect-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  image-rendering: -webkit-optimize-contrast;
  filter: contrast(1.08) saturate(1.1) sharpen(0.3);
  transform: translateZ(0);
}

.expect-text {
  flex: 1;
  line-height: 1.65;
}

.expect-text p {
  margin: 0;
  font-size: 1.08rem;
}

/* ============================================
   Section: Our Pastor
   ============================================ */
.pastor-section {
  position: relative;
  padding: 50px 0;
}

.pastor-section > h2 {
  position: relative;
  z-index: 1;
}

.pastor-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: rgba(255, 255, 255, 0.25);
  z-index: 0;
  pointer-events: none;
}

.pastor-card-large {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  border-top: 4px solid var(--primary-blue);
  margin-top: 1.5rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pastor-card-large:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.pastor-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(238px, 442px) 1fr;
  gap: 32px;
  align-items: start;
  box-sizing: border-box;
  transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pastor-carousel {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  height: 100%;
  min-height: 408px;
  background: #000;
  transition: min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pastor-carousel .slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.pastor-carousel .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: opacity;
}

.pastor-carousel .slide.active {
  opacity: 1;
}

.pastor-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pastor-carousel .dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.pastor-carousel .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.85);
  cursor: pointer;
}

.pastor-carousel .dot.active {
  background: #fff;
}

.pastor-bio {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.pastor-bio h3 {
  margin: 0.2rem 0 0.6rem;
  color: var(--primary-blue);
}

.pastor-bio p {
  margin: 0.55rem 0;
}

.read-more-btn {
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  background: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.3s ease;
}

.read-more-btn:hover {
  background: var(--dark-blue);
}

.pastor-bio-full {
  margin-top: 1rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pastor-bio-full.expanded {
  max-height: 1000px;
  opacity: 1;
  margin-top: 1rem;
}

.pastor-card-large {
  transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-text-spacer {
  height: 12px;
}

/* Staff & Ministries wrapper section styling */
section[data-bg="videos/christian-flag.mp4"] .content-wrap {
  position: relative;
  z-index: 2;
  padding: 50px 20px;
}

@media (max-width: 768px) {
  section[data-bg="videos/christian-flag.mp4"] {
    padding: 40px 0;
  }
  
  section[data-bg="videos/christian-flag.mp4"] .content-wrap {
    padding: 0 1rem;
  }
  
  /* Staff and Ministries sections inside the wrapper need consistent padding */
  section[data-bg="videos/christian-flag.mp4"] #staff,
  section[data-bg="videos/christian-flag.mp4"] #ministries {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Adjust section spacing so Staff + Ministries feel like one flow */
#staff {
  padding-bottom: 0;
}

#our-ministries {
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  display: none;
}

#ministries.section {
  padding-top: 60px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  position: relative;
}

#ministries {
  padding-top: 60px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  position: relative;
}

#ministries::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: rgba(255, 255, 255, 0.25);
  z-index: 0;
  pointer-events: none;
}

#ministries > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   Section: Staff
   ============================================ */
#staff {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
  box-sizing: border-box;
}

.staff-card-large {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  border-top: 4px solid var(--primary-blue);
  margin-top: 1.5rem;
  margin-bottom: 60px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.staff-card-large:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.staff-intro {
  text-align: center;
  font-size: 1.05rem;
  color: #555;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.staff-content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  text-align: left;
}

.staff-section {
  flex: 1;
}

.staff-section h3 {
  color: #3d556e;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary-blue);
  padding-bottom: 0.5rem;
}

.staff-section .ministry-note {
  font-style: italic;
  color: #555;
  font-size: 0.95rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.staff-section .ministry-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.staff-section .ministry-list li {
  margin: 0.5rem 0;
  font-size: 1rem;
  line-height: 1.5;
}

.staff-section .ministry-list ul {
  list-style: none;
  padding-left: 1.5rem;
  margin-top: 0.3rem;
}

.staff-section .ministry-list ul li {
  margin: 0.3rem 0;
}

.staff-section .ministry-list strong {
  color: var(--primary-blue);
  font-weight: 600;
}

.staff-section .ministry-list em {
  font-style: normal;
  color: #333;
  font-weight: 500;
}

@media (max-width: 768px) {
  #staff {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  
  .staff-card-large {
    padding: 1.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  
  .staff-content-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .staff-intro {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .staff-section h3 {
    font-size: 1.2rem;
  }
}

/* ============================================
   Section: Ministries
   ============================================ */
.subhead {
  text-align: center;
  max-width: 1400px;
  margin: 30px auto 16px;
  color: #d7b25f;
  font-weight: 700;
  font-size: 1.4rem;
  position: relative;
  display: block;
  padding: 0.5rem 1.5rem 0.75rem 1.5rem;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 8%, rgba(255, 255, 255, 0.75) 92%, rgba(255, 255, 255, 0) 100%);
  border: none;
  box-shadow: 
    0 2px 8px rgba(215, 178, 95, 0.1),
    0 -1px 0 rgba(215, 178, 95, 0.3),
    0 1px 0 rgba(215, 178, 95, 0.3);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.subhead::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4px;
  width: 80px;
  height: 3px;
  background: linear-gradient(to right, transparent, #d7b25f, transparent);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.subhead::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0px;
  width: 40px;
  height: 2px;
  background: #d7b25f;
  opacity: 0.6;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.subhead:hover {
  color: #f2c762;
}

.subhead:hover::before {
  background: linear-gradient(to right, transparent, #f2c762, transparent);
  width: 100px;
}

.subhead:hover::after {
  background: #f2c762;
  opacity: 0.8;
  width: 50px;
}

#ministries .subhead {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
  scroll-margin-top: 100px;
}

@media (max-width: 768px) {
  .subhead {
    text-align: center;
    padding: 0.4rem 1rem 0.6rem 1rem;
    margin: 24px auto 14px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 8%, rgba(255, 255, 255, 0.75) 92%, rgba(255, 255, 255, 0) 100%);
    border: none;
    box-shadow: 
      0 2px 6px rgba(215, 178, 95, 0.1),
      0 -1px 0 rgba(215, 178, 95, 0.3),
      0 1px 0 rgba(215, 178, 95, 0.3);
    font-size: 1.25rem;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .subhead::before {
    left: 50%;
    transform: translateX(-50%);
    bottom: 4px;
    width: 60px;
    background: linear-gradient(to right, transparent, #d7b25f, transparent);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .subhead::after {
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    width: 30px;
    background: #d7b25f;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .subhead:hover::before {
    background: linear-gradient(to right, transparent, #f2c762, transparent);
    width: 70px;
  }
  
  .subhead:hover::after {
    background: #f2c762;
    width: 35px;
  }
}

.missionaries-section {
  background: #f8f9fa;
  padding: 50px 1.5rem;
  border-top: 4px solid var(--brown);
  box-sizing: border-box;
}

.missionaries-section h2 {
  color: var(--dark-blue);
}

.missionaries-section .card {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--primary-blue);
}

.missionaries .card {
  padding: 0.5rem;
  text-align: left;
  margin: 0;
}

.missionaries .card h3 {
  margin: 0.75rem 0 0.3rem;
  font-size: 0.95rem;
}

/* Fix spacing for missionary cards with carousels - match other cards */
.missionaries .card .carousel {
  margin-bottom: 0.25rem;
}
.missionaries .card:has(.carousel) h3 {
  margin-top: 0.375rem;
  margin-bottom: 0.15rem;
}

.missionaries .card h4 {
  margin: 0 0 0.175rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  color: #2a2a2a !important;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  text-align: left;
}

.missionaries .flag {
  display: inline-block;
  width: 1.2em;
  height: 0.9em;
  margin-right: 0.4em;
  vertical-align: middle;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 2px;
}

/* Country flags using flag-icon-css pattern */
.missionaries .flag-us {
  background-image: url('https://flagcdn.com/w20/us.png');
}

.missionaries .flag-id {
  background-image: url('https://flagcdn.com/w20/id.png');
}

.missionaries .flag-gy {
  background-image: url('https://flagcdn.com/w20/gy.png');
}

.missionaries .flag-ph {
  background-image: url('https://flagcdn.com/w20/ph.png');
}

.missionaries .flag-uy {
  background-image: url('https://flagcdn.com/w20/uy.png');
}

.missionaries .flag-in {
  background-image: url('https://flagcdn.com/w20/in.png');
}

.missionaries .flag-cn {
  background-image: url('https://flagcdn.com/w20/cn.png');
}

.missionaries .flag-kh {
  background-image: url('https://flagcdn.com/w20/kh.png');
}

/* Icon flags - override background for emoji icons */
.missionaries .flag-book,
.missionaries .flag-scale,
.missionaries .flag-home {
  background-image: none;
  border: none;
  width: auto;
  height: auto;
  font-size: 1.1rem;
  line-height: 1;
}

.missionaries .flag-book::before {
  content: '📖';
  display: inline-block;
}

.missionaries .flag-scale::before {
  content: '⚖️';
  display: inline-block;
}

.missionaries .flag-home::before {
  content: '🏠';
  display: inline-block;
}

.missionaries .card p {
  font-size: 0.83rem;
  line-height: 1.35rem;
  margin: 0.175rem 0 0.3rem;
  padding: 0 0.125rem;
}

.missionaries .card img,
.missionaries .card .carousel img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: #f2f2f2;
  border-radius: 10px;
}

.missionaries .links {
  margin: 0.15rem 0.5rem 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
}

.missionaries .links a {
  font-size: 0.82rem;
  color: var(--mid-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.missionaries .links a:hover {
  text-decoration: none;
}

.card .carousel {
  position: relative;
  overflow: hidden;
  height: 200px;
}

/* Missionaries carousel - landscape images */
#ministries .card-container.missionaries .card .carousel {
  height: 140px;
}

.card .carousel img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

.card .carousel img:first-child {
  opacity: 1;
}

/* ============================================
   Section: Locations
   ============================================ */
#locations.section {
  position: relative;
}

#locations .content-wrap {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

#locations .overlay-light {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: rgba(255,255,255,.2);
  z-index: 1;
  pointer-events: none;
}

.locations {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.location-card {
  background: rgba(255,255,255,.85);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1.5rem;
  border-top: 4px solid var(--primary-blue);
  display: flex;
  flex-direction: column;
}

.location-card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1.5rem;
}

.location-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 2rem;
  align-items: start;
}

.location-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.location-card h3 {
  color: var(--primary-blue);
  margin: 0 0 0.5rem;
}

.location-card address {
  font-style: normal;
  color: #2d4950;
  margin-bottom: 1rem;
}

.service-times {
  text-align: center;
  margin-top: 1rem;
  width: 100%;
}

.service-times h4 {
  color: var(--primary-blue);
  margin: 0 0 0.5rem;
}

.service-times ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-times li {
  margin: 0.3rem 0;
  font-size: 0.95rem;
}

.location-info .cta-button {
  margin-top: 1.5rem;
}

.location-map {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.map-mini {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
  border-radius: 10px;
  box-shadow: var(--shadow);
}

/* ============================================
   Section: Events
   ============================================ */
.events-section.section {
  padding-top: 0 !important;
  padding-bottom: 50px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.events-section {
  position: relative;
  padding-top: 0 !important;
  padding-bottom: 50px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.events-section .content-wrap {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.events-section .overlay-dark {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: rgba(0,0,0,.4);
  z-index: 1;
}

.event-card {
  background: rgba(255,255,255,.9);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1rem;
  text-align: center;
  border-top: 4px solid var(--primary-blue);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.event-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.8rem;
}

.event-card h3 {
  color: var(--primary-blue);
  margin: 0 0 0.5rem;
}

.event-card p {
  margin: 0 0 0.8rem;
  color: #2d4950;
}

/* Events section - content should be above background */
#events > *:not(.overlay-dark) {
  position: relative;
  z-index: 2;
}

/* ============================================
   Section: Members
   ============================================ */
.members {
  position: relative;
  padding: 50px 0;
  min-height: auto;
  transition: min-height 0.5s ease;
}

.members > h2,
.members .members-head {
  position: relative;
  z-index: 1;
}

.members::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: rgba(247, 249, 251, 0.25);
  z-index: 0;
  pointer-events: none;
}

.members.expanded {
  min-height: 100vh;
}

.members-inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .members-inner {
    padding: 0; /* Remove padding so white container extends to edges like What To Expect */
  }
}

/* Members Tabs */
.members-tabs-container {
  background: #fff;
  border-radius: 12px;
  border-top: 4px solid var(--primary-blue);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  min-height: 200px; /* Minimum height for password form */
}

@media (max-width: 768px) {
  .members-tabs-container {
    border-radius: 8px; /* Slightly smaller radius on mobile */
    /* Break out of members-inner constraints to match What To Expect width */
    width: calc(100vw - 2rem);
    margin-left: calc(-50vw + 50% + 1rem);
    margin-right: calc(-50vw + 50% + 1rem);
    max-width: none;
  }
}

/* When password overlay is visible, make container compact */
.members-tabs-container .password-overlay:not(.hidden) ~ .members-tabs-header,
.members-tabs-container .password-overlay:not(.hidden) ~ .members-tab-content {
  display: none; /* Hide tabs and content when overlay is visible */
}

.members-tabs-container .password-overlay.hidden ~ .members-tabs-header {
  display: flex; /* Show tabs header when overlay is hidden */
}

.members-tabs-container .password-overlay.hidden ~ .members-tab-content {
  display: block; /* Show tab content when overlay is hidden */
}

.members-tabs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--gray-100);
  padding: 0 1.5rem;
  background: var(--gray-50);
}

.members-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .members-tabs-header {
    padding: 0 1rem; /* Match container margin */
  }
}

.members-tabs {
  display: flex;
  gap: 0;
}

.members-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  top: 2px;
  font-family: 'Raleway', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.members-tab:hover {
  color: var(--primary-blue);
  background: rgba(0, 143, 179, 0.05);
}

.members-tab.active {
  color: var(--primary-blue);
  border-bottom-color: var(--primary-blue);
  background: transparent;
}

.members-tab .audio-icon {
  display: none;
  width: 14px;
  height: 14px;
}

.members-tab.playing .audio-icon {
  display: inline-block !important;
}

.members-tab.playing .audio-icon .wave-bar {
  fill: currentColor;
  transform-origin: center bottom;
  animation: audioWave 0.8s ease-in-out infinite;
}

.members-tab.playing .audio-icon .wave-bar:nth-child(1) {
  animation-delay: 0s;
}

.members-tab.playing .audio-icon .wave-bar:nth-child(2) {
  animation-delay: 0.15s;
}

.members-tab.playing .audio-icon .wave-bar:nth-child(3) {
  animation-delay: 0.3s;
}

.members-tab.playing .audio-icon .wave-bar:nth-child(4) {
  animation-delay: 0.15s;
}

.members-logout-btn {
  background: transparent;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--gray-600);
  transition: all 0.2s ease;
  display: none; /* Hidden by default, shown when logged in */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 32px;
  white-space: nowrap;
}

.members-logout-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.members-logout-btn .logout-text {
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Raleway', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.members-logout-btn.show {
  display: flex; /* Show logout button when logged in */
}

.members-logout-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
  color: var(--primary-blue);
}

.members-upload-btn {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 0.35rem;
  cursor: pointer;
  color: var(--gray-400);
  transition: all 0.2s ease;
  display: none; /* Hidden by default, shown when logged in */
  align-items: center;
  justify-content: center;
  opacity: 0.3;
  width: 24px;
  height: 24px;
}

.members-upload-btn.show {
  display: flex;
}

.members-upload-btn:hover {
  opacity: 0.7;
  background: var(--gray-100);
  color: var(--primary-blue);
}

.members-upload-btn svg {
  width: 100%;
  height: 100%;
}

.members-tab-content {
  position: relative;
  min-height: 400px;
}

@media (max-width: 768px) {
  .members-tab-content {
    min-height: 300px;
  }
}

.members-tab-panel {
  display: none;
  padding: 1.5rem;
  overflow: visible;
}

.members-tab-panel h3 {
  display: none; /* Hidden on desktop */
}

@media (max-width: 768px) {
  .members-tab-panel {
    padding: 1rem;
  }
  
  .members-tab-panel h3 {
    display: block; /* Show on mobile only */
    margin: 0 0 1rem 0;
    color: var(--primary-blue);
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'Raleway', system-ui, -apple-system, sans-serif;
  }
}

.members-tab-panel.active {
  display: block;
}

.members-tab-panel.password-wrap {
  position: relative;
}

/* Password overlay covers entire tabs container when not logged in */
.members-tabs-container .password-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  border-radius: 12px;
}

.members-tabs-container .password-overlay.hidden {
  display: none;
}

/* When password overlay is visible, make container compact */
.members-tabs-container:has(.password-overlay:not(.hidden)) {
  min-height: 200px;
  max-height: 300px;
}

/* Mobile Members Tab Footer - Sticky App-like Navigation */
.members-mobile-footer {
  display: none; /* Hidden by default, shown via JS when authenticated on mobile */
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1001; /* Above header (1000) to ensure clicks work */
  background: #fff;
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  pointer-events: none; /* Default to not blocking, enabled when shown */
  -webkit-transform: translateZ(0); /* Force hardware acceleration */
  transform: translateZ(0);
  margin: 0 !important;
}

.members-mobile-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: transparent;
  border: none;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--gray-600);
  font-size: 0.7rem;
  font-weight: 500;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
  flex: 1;
  min-width: 0;
  position: relative;
}

.members-mobile-tab svg {
  width: 22px;
  height: 22px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.members-mobile-tab .media-icon-audio {
  display: none;
}

.members-mobile-tab.playing .media-icon-default {
  display: none;
}

.members-mobile-tab.playing .media-icon-audio {
  display: block !important;
}

.members-mobile-tab.playing .media-icon-audio .wave-bar {
  fill: currentColor;
  transform-origin: center bottom;
  animation: audioWave 0.8s ease-in-out infinite;
}

.members-mobile-tab.playing .media-icon-audio .wave-bar:nth-child(1) {
  animation-delay: 0s;
}

.members-mobile-tab.playing .media-icon-audio .wave-bar:nth-child(2) {
  animation-delay: 0.15s;
}

.members-mobile-tab.playing .media-icon-audio .wave-bar:nth-child(3) {
  animation-delay: 0.3s;
}

.members-mobile-tab.playing .media-icon-audio .wave-bar:nth-child(4) {
  animation-delay: 0.15s;
}

.members-mobile-tab span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}

.members-mobile-tab:hover,
.members-mobile-tab:active {
  color: var(--primary-blue);
  background: rgba(0, 143, 179, 0.05);
}

.members-mobile-tab.active {
  color: var(--primary-blue);
}

.members-mobile-tab.active svg {
  transform: scale(1.1);
}

.members-mobile-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: var(--primary-blue);
  border-radius: 0 0 3px 3px;
}

/* Hide desktop tabs on mobile, show mobile footer */
@media (max-width: 768px) {
  .members-tabs-header {
    display: none !important;
  }
  
  .members-mobile-footer.show {
    display: flex !important;
    pointer-events: auto !important; /* Enable clicks when visible */
  }
  
  .members-mobile-footer.show .members-mobile-tab {
    pointer-events: auto !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(0, 143, 179, 0.2) !important;
    tap-highlight-color: rgba(0, 143, 179, 0.2) !important;
    touch-action: manipulation !important;
  }
  
  /* Ensure footer doesn't block other interactions when hidden - completely remove from layout */
  .members-mobile-footer:not(.show) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  /* Make sure mobile tabs are clickable when footer is shown */
  .members-mobile-footer.show {
    pointer-events: auto !important;
  }
  
  .members-mobile-footer.show .members-mobile-tab {
    pointer-events: auto !important;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 143, 179, 0.2);
    tap-highlight-color: rgba(0, 143, 179, 0.2);
  }
  
  /* Add padding to body when footer is visible to prevent content from being hidden */
  body:has(.members-mobile-footer.show) {
    padding-bottom: 70px;
  }
  
  /* Ensure all buttons and links are clickable on mobile */
  a, button, .cta-button, .btn, .btn-submit, .nav-links a {
    -webkit-tap-highlight-color: rgba(0, 143, 179, 0.2);
    tap-highlight-color: rgba(0, 143, 179, 0.2);
    touch-action: manipulation; /* Improve touch responsiveness */
    cursor: pointer;
  }
}

.members-head {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
}

.members-head h2 {
  margin: 0;
}

#search-input {
  padding: 0.5rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 1rem;
  width: 300px;
}

.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.members-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 1.5rem;
  position: relative;
}

.members-panel h3 {
  color: var(--primary-blue);
  margin: 0 0 1rem;
}

.resources-grid {
  display: grid;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .resources-grid {
    gap: 1.25rem;
  }
}

.resource-item {
  border-bottom: 1px solid var(--gray-100);
  padding-bottom: 1rem;
}

.resource-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .resource-item {
    padding-bottom: 0.75rem;
  }
  
  .resource-item:last-child {
    padding-bottom: 0;
  }
}

/* Single resource layout - title/description on left, icon button on right */
.resource-single-layout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.resource-single-content {
  flex: 1;
  min-width: 0; /* Allow text to shrink */
}

.resource-single-layout .resource-title {
  margin-bottom: 0.3rem;
}

.resource-single-layout .series-description {
  margin-bottom: 0;
}

.resource-download-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--primary-blue);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.resource-download-icon:hover {
  background: var(--mid-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 143, 179, 0.3);
}

.resource-download-icon svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  .resource-single-layout {
    gap: 0.75rem;
  }
  
  .resource-download-icon {
    width: 40px;
    height: 40px;
  }
  
  .resource-download-icon svg {
    width: 18px;
    height: 18px;
  }
}

.resource-title {
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.4rem;
  font-size: 1.1rem;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .resource-title {
    font-size: 1rem;
    margin-bottom: 0.3rem;
  }
}

.series-description {
  margin: 0 0 0.4rem;
  color: #2d4950;
  font-size: 0.9rem;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .series-description {
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
    line-height: 1.3;
  }
  
  .resource-single-layout .series-description {
    margin-bottom: 0;
  }
}

.series-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

@media (max-width: 768px) {
  .series-parts {
    gap: 0.3rem;
    margin-bottom: 0.3rem;
  }
}

.series-link {
  color: var(--mid-blue);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .series-link {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
  }
}

.series-link:hover {
  background: var(--gray-50);
  border-color: var(--mid-blue);
  text-decoration: none;
}

.download-series-button {
  display: inline-block;
  background: var(--primary-blue);
  color: #fff;
  padding: 0.35rem 0.7rem;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.2s ease;
}

@media (max-width: 768px) {
  .download-series-button {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
  }
}

.download-series-button:hover {
  background: var(--mid-blue);
}

.resources-loading,
.resources-error {
  text-align: center;
  padding: 1.5rem;
  color: var(--text-color);
  font-style: italic;
}

@media (max-width: 768px) {
  .resources-loading,
  .resources-error {
    padding: 1rem;
    font-size: 0.9rem;
  }
}

.resources-error {
  color: #d32f2f;
}

/* ============================================
   Section: Directory
   ============================================ */
.directory-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.directory-search {
  flex: 1;
}

.directory-search-field {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 1rem;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
}

.directory-search-field:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(0, 143, 179, 0.1);
}

.directory-filters {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.directory-filter-select {
  padding: 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
  background: #fff;
  cursor: pointer;
  flex: 1;
}

.directory-filter-select:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(0, 143, 179, 0.1);
}

.directory-birthday-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--primary-blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.directory-birthday-btn:hover {
  background: var(--mid-blue);
}

.directory-birthday-btn svg {
  flex-shrink: 0;
}

.directory-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.directory-entry {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 1.25rem;
  transition: box-shadow 0.2s ease;
}

.directory-entry:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.directory-entry-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.75rem;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
}

.directory-entry-details {
  display: grid;
  gap: 0.5rem;
}

.directory-entry-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-color);
}

.directory-entry-label {
  font-weight: 600;
  color: var(--dark-blue);
  min-width: 80px;
  flex-shrink: 0;
}

.directory-entry-value {
  flex: 1;
  word-break: break-word;
}

.directory-entry-phone,
.directory-entry-email {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.directory-entry-phone a,
.directory-entry-email a {
  color: var(--mid-blue);
  text-decoration: none;
}

.directory-entry-phone a:hover,
.directory-entry-email a:hover {
  text-decoration: underline;
}

.directory-entry-children {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.directory-entry-child {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: var(--gray-50);
  border-radius: 4px;
  font-size: 0.85rem;
}


/* Birthday Calendar */
.directory-birthday-calendar {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 1.25rem;
  overflow: visible;
  position: relative;
}

.birthday-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.birthday-calendar-header h4 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--primary-blue);
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
}

.birthday-nav-btn {
  background: var(--primary-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  width: 36px;
  height: 36px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.birthday-nav-btn:hover {
  background: var(--mid-blue);
}

.birthday-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  overflow: visible;
  position: relative;
}

.birthday-calendar-day-header {
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--dark-blue);
  padding: 0.5rem;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
}

.birthday-calendar-day {
  aspect-ratio: 1;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 0.5rem;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: #fff;
  overflow: visible;
  position: relative;
}

.birthday-calendar-day.other-month {
  opacity: 0.3;
  background: var(--gray-50);
}

.birthday-calendar-day-number {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-color);
}

.birthday-calendar-day-birthdays {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.birthday-calendar-birthday {
  font-size: 0.7rem;
  padding: 0.15rem 0.25rem;
  background: rgba(0, 143, 179, 0.15);
  border-radius: 3px;
  color: var(--dark-blue);
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.birthday-calendar-day.today {
  background: rgba(0, 143, 179, 0.05);
  border-color: var(--primary-blue);
}

.birthday-calendar-birthday {
  cursor: pointer;
  transition: background 0.2s ease;
}

.birthday-calendar-birthday:hover {
  background: rgba(0, 143, 179, 0.25);
}

/* Directory Family Popup */
.directory-family-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.directory-family-popup-content {
  background: #fff;
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.directory-family-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
  border-bottom: 1px solid var(--gray-200);
}

.directory-family-popup-header h4 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--primary-blue);
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
}

.directory-family-popup-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--text-color);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: color 0.2s ease;
}

.directory-family-popup-close:hover {
  color: var(--primary-blue);
}

.directory-family-popup-body {
  padding: 1.25rem;
}

.directory-family-popup-row {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.directory-family-popup-row:last-child {
  margin-bottom: 0;
}

.directory-family-popup-row strong {
  color: var(--dark-blue);
  display: inline-block;
  min-width: 80px;
}

.directory-family-popup-row a {
  color: var(--mid-blue);
  text-decoration: none;
}

.directory-family-popup-row a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .directory-controls {
    gap: 0.75rem;
  }
  
  .directory-filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .directory-birthday-btn {
    justify-content: center;
  }
  
  .directory-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .directory-entry {
    padding: 0.875rem;
  }
  
  .directory-entry-name {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
  }
  
  .directory-entry-row {
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
  }
  
  .directory-entry-label {
    min-width: auto;
    font-size: 0.8rem;
  }
  
  .directory-entry-child {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
  }
  
  .birthday-calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
  }
  
  .birthday-calendar-day {
    min-height: 0;
    aspect-ratio: 1;
    padding: 0.35rem;
    display: flex;
    overflow: visible;
    position: relative;
    z-index: 1;
  }
  
  .birthday-calendar-day:not(.has-birthday) {
    padding: 0.2rem;
    min-height: 0;
  }
  
  .birthday-calendar-day:not(.has-birthday) .birthday-calendar-day-number {
    font-size: 0.65rem;
  }
  
  .birthday-calendar-day.has-birthday {
    padding: 0.35rem;
    z-index: 10;
    position: relative;
  }
  
  .birthday-calendar-day.has-birthday .birthday-calendar-day-birthdays {
    position: absolute;
    top: calc(100% - 20px);
    left: 0;
    width: auto;
    min-width: auto;
    max-width: none;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 0.2rem 0.3rem;
    z-index: 200;
    overflow: visible;
  }
  
  .birthday-calendar-day.has-birthday .birthday-calendar-birthday {
    z-index: 20;
    position: relative;
    box-shadow: none;
    display: inline-block;
    white-space: nowrap;
    width: auto;
  }
  
  .birthday-calendar-day-header {
    display: none; /* Hide day headers on mobile */
  }
  
  .birthday-calendar-day-number {
    font-size: 0.75rem;
  }
  
  .birthday-calendar-birthday {
    font-size: 0.6rem;
    padding: 0.1rem 0.2rem;
    cursor: pointer;
  }
  
  .birthday-calendar-birthday:hover {
    background: rgba(0, 143, 179, 0.25);
  }
  
  .directory-family-popup-content {
    max-width: 90%;
  }
  
  .directory-family-popup-header,
  .directory-family-popup-body {
    padding: 1rem;
  }
}

/* Events Tab Styling */
.events-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.event-item {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 1.25rem;
  transition: box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.event-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.event-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.25rem;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
}

.event-date {
  font-size: 0.9rem;
  color: var(--gray-600);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


.event-location {
  font-size: 0.95rem;
  color: var(--text-color);
}

.event-other {
  font-size: 0.95rem;
  color: var(--text-color);
  font-style: italic;
  margin-top: 0.25rem;
}

@media (max-width: 768px) {
  .events-content {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
  }
  
  .event-item {
    padding: 1rem;
    gap: 0.4rem;
  }
  
  .event-title {
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
  }
  
  .event-date {
    font-size: 0.8rem;
  }
  
  .event-location,
  .event-other {
    font-size: 0.9rem;
  }
}

/* Prayer List Tab Styling */
.prayer-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: start;
}

.prayer-section {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 1.5rem;
}

.prayer-section:last-child {
  width: max-content;
  min-width: 200px;
}

.prayer-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin: 0 0 1.25rem 0;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
}

.prayer-list {
  display: grid;
  gap: 0.2rem;
}

.prayer-list.two-column {
  grid-template-columns: repeat(2, 1fr);
}

.prayer-list.single-column {
  grid-template-columns: 1fr;
}

.prayer-item {
  font-size: 0.95rem;
  color: var(--text-color);
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--gray-100);
  white-space: nowrap;
}

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

.prayer-section:last-child .prayer-list {
  gap: 0.1rem; /* Tighter spacing for salvation, will be adjusted by JS */
}

.prayer-section:last-child .prayer-item {
  font-size: 0.95rem; /* Base size, will be adjusted by JS */
  padding: 0.15rem 0; /* Tighter padding for salvation, will be adjusted by JS */
}

@media (max-width: 768px) {
  .prayer-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .prayer-section {
    padding: 1rem;
  }
  
  .prayer-section-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
  
  .prayer-list.two-column {
    grid-template-columns: 1fr;
  }
  
  .prayer-item {
    font-size: 0.9rem;
    padding: 0.4rem 0;
  }
}

/* Upload Form Styling */
.upload-management-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  height: calc(100vh - 200px);
  max-height: 800px;
  padding: 1rem;
}

.upload-wizard-section {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.upload-wizard-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--gray-200);
}

.upload-wizard-header h3 {
  margin: 0;
  color: var(--primary-blue);
  font-size: 1.5rem;
}

.wizard-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  position: relative;
}

.wizard-steps::before {
  content: '';
  position: absolute;
  top: 1.25rem;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gray-200);
  z-index: 0;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  flex: 1;
}

.wizard-step.active .step-number {
  background: var(--primary-blue);
  color: #fff;
  border-color: var(--primary-blue);
}

.wizard-step.completed .step-number {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}

.step-number {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 0.5rem;
}

.step-label {
  font-size: 0.85rem;
  color: var(--gray-600);
  font-weight: 500;
}

.wizard-step.active .step-label {
  color: var(--primary-blue);
  font-weight: 600;
}

.wizard-step-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.upload-form-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 2.5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.upload-form-header {
  margin-bottom: 2rem;
  text-align: center;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--gray-200);
}

.upload-form-header h3 {
  margin: 0 0 0.5rem 0;
  color: var(--primary-blue);
  font-size: 1.75rem;
  font-weight: 700;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
}

.upload-form-subtitle {
  margin: 0;
  color: var(--gray-600);
  font-size: 0.95rem;
  font-style: italic;
}

.mp3-upload-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.upload-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.upload-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.upload-form-group label {
  font-weight: 600;
  color: var(--text-color);
  font-size: 0.95rem;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
}

.upload-form-group .required {
  color: #dc2626;
  margin-left: 0.25rem;
}

.upload-form-group input[type="file"] {
  padding: 0.625rem;
  border: 2px dashed var(--gray-300);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--gray-50);
  cursor: pointer;
  transition: all 0.2s;
}

.upload-form-group input[type="file"]::file-selector-button {
  padding: 0.5rem 1rem;
  margin-right: 1rem;
  border: none;
  border-radius: 6px;
  background: var(--primary-blue);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.upload-form-group input[type="file"]::file-selector-button:hover {
  background: var(--primary-blue-dark);
}

.upload-form-group input[type="file"]:hover {
  border-color: var(--primary-blue);
  background: #fff;
}

.upload-form-group input[type="file"]:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(58, 110, 165, 0.1);
}

.upload-form-group input[type="date"],
.upload-form-group input[type="text"],
.upload-form-group select {
  padding: 0.875rem 1.125rem;
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  color: var(--text-color);
  transition: all 0.2s;
}

.upload-form-group input[type="date"]:hover,
.upload-form-group input[type="text"]:hover,
.upload-form-group select:hover {
  border-color: var(--gray-400);
}

.upload-form-group input[type="date"]:focus,
.upload-form-group input[type="text"]:focus,
.upload-form-group select:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 4px rgba(58, 110, 165, 0.12);
  transform: translateY(-1px);
}

.upload-form-group .form-help {
  font-size: 0.8rem;
  color: var(--gray-600);
  margin-top: -0.15rem;
  line-height: 1.4;
  font-style: italic;
}

.upload-processing-options {
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  padding: 1.25rem;
  margin: 0;
  background: var(--gray-50);
}

.upload-processing-options legend {
  font-weight: 600;
  color: var(--text-color);
  font-size: 0.95rem;
  padding: 0 0.5rem;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
}

.processing-option {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.processing-option:last-child {
  margin-bottom: 0;
}

.processing-option input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.75rem;
  cursor: pointer;
  accent-color: var(--primary-blue);
}

.processing-option label {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: var(--text-color);
  font-size: 0.9rem;
  cursor: pointer;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
}

.processing-option .form-help {
  margin-left: 2rem;
  margin-top: 0.2rem;
}

/* Review Section */
.review-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.review-section h4 {
  margin: 0 0 1rem 0;
  color: var(--primary-blue);
  font-size: 1.25rem;
}

.analysis-results {
  background: var(--gray-50);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 1rem;
  max-height: 300px;
  overflow-y: auto;
}

.analysis-loading {
  text-align: center;
  padding: 2rem;
  color: var(--gray-600);
}

.analysis-section {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: #fff;
  border-radius: 6px;
  border-left: 3px solid var(--primary-blue);
}

.analysis-section h5 {
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
  color: var(--text-color);
}

.analysis-section .section-time {
  font-size: 0.85rem;
  color: var(--gray-600);
}

.analysis-group {
  margin-bottom: 1.5rem;
}

.analysis-group h5 {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  color: var(--primary-blue);
  font-weight: 600;
}

.analysis-section h6 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  color: var(--text-color);
  font-weight: 600;
}

.transcript-preview {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--gray-700);
  max-height: 200px;
  overflow-y: auto;
  padding: 0.75rem;
  background: #fff;
  border-radius: 4px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.transcript-preview.collapsed {
  max-height: 200px;
}

.btn-toggle-transcript {
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  background: var(--gray-200);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-color);
}

.btn-toggle-transcript:hover {
  background: var(--gray-300);
}

/* Metadata Summary */
.metadata-summary {
  background: #f0f7ff;
  border: 1px solid #b3d9ff;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.metadata-summary .summary-item {
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.metadata-summary .summary-note {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #b3d9ff;
  color: var(--gray-600);
}

/* Sermon-specific sections */
.sermon-section {
  border-left-color: #f59e0b;
  background: #fef3c7;
}

.sermon-title-section {
  background: #f0f7ff;
  border-left-color: var(--primary-blue);
}

.sermon-title-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-blue);
  margin: 0.5rem 0;
}

.sermon-title-edit {
  width: 100%;
  padding: 0.5rem;
  border: 1.5px solid var(--primary-blue);
  border-radius: 6px;
  font-size: 1rem;
  margin: 0.5rem 0;
}

.sermon-notes-section {
  background: #f9fafb;
}

.sermon-notes-list {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
  list-style-type: decimal;
}

.sermon-notes-list li {
  margin: 0.5rem 0;
  line-height: 1.5;
  color: var(--gray-700);
}

.sermon-notes-edit {
  width: 100%;
  min-height: 150px;
  padding: 0.75rem;
  border: 1.5px solid var(--gray-300);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  margin: 0.5rem 0;
}

.scripture-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.scripture-ref {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: #e8f5e9;
  border: 1px solid #81c784;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #2e7d32;
}

.prayer-requests {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.prayer-request {
  padding: 0.5rem;
  background: #fff3e0;
  border-left: 3px solid #ff9800;
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.btn-edit-metadata,
.btn-save-metadata {
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: all 0.2s;
}

.btn-edit-metadata {
  background: var(--primary-blue);
  color: #fff;
}

.btn-edit-metadata:hover {
  background: var(--primary-blue-dark);
}

.btn-save-metadata {
  background: #10b981;
  color: #fff;
}

.btn-save-metadata:hover {
  background: #059669;
}

/* Section timeline adjustments */
.section-timeline {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--gray-200);
}

.section-timeline input[type="range"] {
  flex: 1;
  height: 6px;
  cursor: pointer;
}

.section-time {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--gray-600);
}

.section-time span {
  white-space: nowrap;
}

.section-help {
  font-size: 0.85rem;
  color: var(--gray-600);
  font-style: italic;
  margin-bottom: 1rem;
}

.review-filename-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Analysis progress indicators */
.analysis-progress-container {
  margin: 1rem 0;
}

.analysis-progress-bar-wrapper {
  width: 100%;
  height: 24px;
  background: var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  margin-bottom: 0.5rem;
}

.analysis-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-blue-dark));
  border-radius: 12px;
  width: 0%;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.analysis-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: progress-shimmer 1.5s infinite;
}

.analysis-progress-text {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color);
}

.analysis-progress-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}

.progress-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: #f9fafb;
  border-radius: 6px;
  transition: all 0.3s;
}

.progress-step.active {
  background: #e0f2fe;
  border-left: 3px solid var(--primary-blue);
}

.progress-step.completed {
  background: #f0fdf4;
  border-left: 3px solid #10b981;
}

.progress-step .step-icon {
  font-size: 1.2rem;
  min-width: 1.5rem;
  text-align: center;
}

.progress-step .step-text {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-color);
}

.progress-note {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #fff3cd;
  border-left: 3px solid #ffc107;
  border-radius: 4px;
  font-size: 0.85rem;
  color: #856404;
}

.review-filename-input {
  padding: 0.75rem;
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: 'Courier New', monospace;
}

.review-actions,
.processing-actions {
  display: flex;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 2px solid var(--gray-200);
}

/* Processing Section */
.processing-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.processing-section h4 {
  margin: 0 0 1rem 0;
  color: var(--primary-blue);
  font-size: 1.25rem;
}

/* File Management */
.file-management-section {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.file-management-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--gray-200);
}

.file-management-header h3 {
  margin: 0;
  color: var(--primary-blue);
  font-size: 1.5rem;
}

.btn-small {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.file-list-container {
  flex: 1;
  overflow-y: auto;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.file-list-loading {
  text-align: center;
  padding: 2rem;
  color: var(--gray-600);
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  transition: all 0.2s;
  min-height: 48px;
}

.file-item:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.file-item.hidden {
  opacity: 0.6;
  background: var(--gray-100);
}

.file-item.temp-file {
  border-left: 3px solid #f59e0b;
  background: #fef3c7;
}

.file-item.temp-file.hidden {
  background: #fde68a;
}

.file-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.file-item-name {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: var(--text-color);
  word-break: break-word;
  line-height: 1.3;
  font-weight: 500;
}

.file-item-meta {
  font-size: 0.75rem;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.file-item-temp-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: #f59e0b;
  color: #fff;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.file-item-name.editing {
  display: none;
}

.file-item-name-input {
  flex: 1;
  padding: 0.5rem;
  border: 1.5px solid var(--primary-blue);
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
}

.file-item-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

.file-item-btn {
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-weight: 500;
}

.file-item-btn-edit {
  background: var(--primary-blue);
  color: #fff;
}

.file-item-btn-edit:hover {
  background: var(--primary-blue-dark);
}

.file-item-btn-save {
  background: #10b981;
  color: #fff;
}

.file-item-btn-save:hover {
  background: #059669;
}

.file-item-btn-cancel {
  background: var(--gray-300);
  color: var(--text-color);
}

.file-item-btn-cancel:hover {
  background: var(--gray-400);
}

.file-item-btn-delete {
  background: #ef4444;
  color: #fff;
}

.file-item-btn-delete:hover {
  background: #dc2626;
}

.file-item-btn-hide {
  background: #f59e0b;
  color: #fff;
}

.file-item-btn-hide:hover {
  background: #d97706;
}

.file-item-btn-show {
  background: #10b981;
  color: #fff;
}

.file-item-btn-show:hover {
  background: #059669;
}

.file-item-btn-process {
  background: #8b5cf6;
  color: #fff;
}

.file-item-btn-process:hover {
  background: #7c3aed;
}

/* Responsive file list */
@media (max-width: 1024px) {
  .file-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .file-item-info {
    width: 100%;
  }
  
  .file-item-actions {
    width: 100%;
    justify-content: flex-start;
  }
  
  .file-item-btn {
    flex: 1;
    min-width: 80px;
  }
}

@media (max-width: 768px) {
  .file-item {
    padding: 0.5rem;
  }
  
  .file-item-name {
    font-size: 0.8rem;
  }
  
  .file-item-meta {
    font-size: 0.7rem;
  }
  
  .file-item-btn {
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
    min-width: 70px;
  }
  
  .file-item-actions {
    gap: 0.3rem;
  }
}

@media (max-width: 480px) {
  .file-item-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .file-item-btn {
    width: 100%;
    min-width: unset;
  }
}

/* Admin Authentication */
.admin-auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.admin-auth-modal {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.admin-auth-modal h3 {
  margin: 0 0 1rem 0;
  color: var(--primary-blue);
  font-size: 1.5rem;
}

.admin-auth-modal p {
  margin: 0 0 1.5rem 0;
  color: var(--gray-600);
}

.admin-auth-modal form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-auth-modal input[type="password"] {
  padding: 0.875rem;
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  font-size: 1rem;
}

.admin-auth-modal input[type="password"]:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 4px rgba(58, 110, 165, 0.12);
}

.admin-auth-error {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 6px;
  font-size: 0.9rem;
}

/* Admin Dashboard Layout */
.admin-dashboard {
  display: flex;
  height: calc(100vh - 200px);
  max-height: 800px;
  gap: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.admin-sidebar {
  width: 200px;
  min-width: 200px;
  background: var(--gray-50);
  border-right: 1px solid var(--gray-300);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.admin-sidebar-header {
  padding: 1.5rem 1rem;
  border-bottom: 2px solid var(--gray-200);
}

.admin-sidebar-header h3 {
  margin: 0;
  color: var(--primary-blue);
  font-size: 1.25rem;
  font-weight: 700;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  gap: 0.25rem;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: none;
  background: transparent;
  color: var(--gray-700);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  width: 100%;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
}

.admin-nav-item:hover {
  background: var(--gray-100);
  color: var(--primary-blue);
}

.admin-nav-item.active {
  background: var(--primary-blue);
  color: #fff;
}

.admin-nav-item svg {
  flex-shrink: 0;
}

.admin-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 1.5rem;
}

.admin-section {
  display: none;
  flex-direction: column;
  height: 100%;
  gap: 1.5rem;
}

.admin-section.active {
  display: flex;
}

.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--gray-200);
}

.admin-section-header h3 {
  margin: 0;
  color: var(--primary-blue);
  font-size: 1.5rem;
}

/* Prayer Admin */
.prayer-admin-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  flex: 1;
  overflow-y: auto;
}

.prayer-admin-column h4 {
  margin: 0 0 1rem 0;
  color: var(--text-color);
  font-size: 1.1rem;
  font-weight: 600;
}

.prayer-admin-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 1rem;
  min-height: 200px;
  max-height: calc(100vh - 400px);
  overflow-y: auto;
}

.prayer-admin-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  transition: all 0.2s;
}

.prayer-admin-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.prayer-admin-item-text {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-color);
}

.prayer-admin-item-actions {
  display: flex;
  gap: 0.5rem;
}

.prayer-admin-item-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.prayer-admin-item-btn-edit {
  background: var(--primary-blue);
  color: #fff;
}

.prayer-admin-item-btn-edit:hover {
  background: var(--primary-blue-dark);
}

.prayer-admin-item-btn-delete {
  background: #ef4444;
  color: #fff;
}

.prayer-admin-item-btn-delete:hover {
  background: #dc2626;
}

/* Directory Admin */
.directory-admin-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  overflow-y: auto;
}

.directory-admin-search {
  position: sticky;
  top: 0;
  background: #fff;
  padding-bottom: 0.5rem;
  z-index: 10;
}

.admin-search-input {
  width: 100%;
  padding: 0.75rem;
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  font-size: 0.95rem;
}

.directory-admin-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.directory-admin-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  transition: all 0.2s;
}

.directory-admin-item:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.directory-admin-item-info {
  flex: 1;
}

.directory-admin-item-name {
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 0.25rem;
}

.directory-admin-item-details {
  font-size: 0.85rem;
  color: var(--gray-600);
}

.directory-admin-item-actions {
  display: flex;
  gap: 0.5rem;
}

/* Resources Admin */
.resources-admin-container {
  flex: 1;
  overflow-y: auto;
}

.resources-admin-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.resource-admin-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  transition: all 0.2s;
}

.resource-admin-item:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.resource-admin-item-title {
  font-weight: 600;
  color: var(--text-color);
  font-size: 1rem;
}

.resource-admin-item-description {
  font-size: 0.85rem;
  color: var(--gray-600);
}

.resource-admin-item-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

/* Admin Modals */
.admin-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}

.admin-modal {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.admin-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--gray-200);
}

.admin-modal-header h4 {
  margin: 0;
  color: var(--primary-blue);
  font-size: 1.25rem;
}

.admin-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--gray-600);
  cursor: pointer;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.admin-modal-close:hover {
  background: var(--gray-100);
  color: var(--text-color);
}

.admin-modal-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.admin-modal-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--gray-200);
  justify-content: flex-end;
}

.admin-modal-actions .btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.admin-modal-actions .btn-primary {
  background: var(--primary-blue);
  color: #fff;
}

.admin-modal-actions .btn-primary:hover:not(:disabled) {
  background: var(--dark-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 143, 179, 0.3);
}

.admin-modal-actions .btn-secondary {
  background: var(--gray-200);
  color: var(--text-color);
  border: 1px solid var(--gray-300);
}

.admin-modal-actions .btn-secondary:hover {
  background: var(--gray-300);
  border-color: var(--gray-400);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.admin-modal-actions .btn-danger {
  background: #dc3545;
  color: #fff;
}

.admin-modal-actions .btn-danger:hover {
  background: #c82333;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.admin-modal-actions .btn-small {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

/* Directory form dynamic fields */
.directory-phone-row,
.directory-email-row,
.directory-child-row,
.directory-dob-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
}

.directory-phone-row input,
.directory-email-row input,
.directory-child-row input,
.directory-dob-row input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 0.9rem;
}

.directory-phone-row .directory-phone-number,
.directory-email-row .directory-email-value {
  flex: 2;
}

.directory-phone-row .directory-phone-label {
  flex: 1;
}

.directory-children-empty,
.directory-dob-empty {
  padding: 1rem;
  text-align: center;
  color: var(--gray-600);
  font-style: italic;
  background: var(--gray-50);
  border-radius: 6px;
}

.admin-loading {
  text-align: center;
  padding: 2rem;
  color: var(--gray-600);
}

@media (max-width: 1200px) {
  .admin-dashboard {
    flex-direction: column;
    height: auto;
    max-height: none;
  }
  
  .admin-sidebar {
    width: 100%;
    min-width: auto;
    border-right: none;
    border-bottom: 1px solid var(--gray-300);
  }
  
  .admin-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0.5rem;
  }
  
  .admin-nav-item {
    white-space: nowrap;
    min-width: fit-content;
  }
  
  .prayer-admin-container {
    grid-template-columns: 1fr;
  }
  
  .upload-management-container {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
  }
  
  .upload-wizard-section,
  .file-management-section {
    max-height: 600px;
  }
}

.upload-form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--gray-200);
}

.upload-form-actions .btn {
  padding: 1rem 2rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  flex: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.upload-form-actions .btn-primary {
  background: var(--primary-blue);
  color: #fff;
}

.upload-form-actions .btn-primary:hover:not(:disabled) {
  background: var(--primary-blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(58, 110, 165, 0.3);
}

.upload-form-actions .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.upload-form-actions .btn-secondary {
  background: var(--gray-200);
  color: var(--text-color);
  border: 1px solid var(--gray-300);
}

.upload-form-actions .btn-secondary:hover {
  background: var(--gray-300);
  border-color: var(--gray-400);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.upload-status {
  padding: 1rem;
  border-radius: 6px;
  margin-top: 1rem;
  white-space: pre-line;
  line-height: 1.6;
  font-size: 0.9rem;
}

.upload-status.success {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}

.upload-status.error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.upload-status.info {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.upload-progress-container {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--gray-50);
  border-radius: 8px;
  border: 1px solid var(--gray-200);
}

.upload-progress-bar-wrapper {
  width: 100%;
  height: 24px;
  background: var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  margin-bottom: 0.5rem;
}

.upload-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-blue-dark));
  border-radius: 12px;
  width: 0%;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.upload-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: progress-shimmer 1.5s infinite;
}

@keyframes progress-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.upload-progress-text {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color);
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
}

@media (max-width: 768px) {
  .upload-form-container {
    padding: 1.5rem 1rem;
    margin: 0 1rem;
  }
  
  .upload-form-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
  }
  
  .upload-form-header h3 {
    font-size: 1.5rem;
  }
  
  .upload-form-subtitle {
    font-size: 0.85rem;
  }
  
  .mp3-upload-form {
    gap: 1.5rem;
  }
  
  .upload-form-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .upload-form-group {
    gap: 0.5rem;
  }
  
  .upload-form-actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .upload-form-actions .btn {
    width: 100%;
  }
}

/* ============================================
   Section: Unified Media Player
   ============================================ */
.unified-media-player {
  display: none;
  margin-top: 1.5rem;
}

.player-controls {
  background: #fff;
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--primary-blue);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.player-controls:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
}

.player-info {
  margin-bottom: 1rem;
}

.player-info h4 {
  margin: 0 0 1rem 0;
  color: var(--primary-blue);
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  font-family: 'Raleway', sans-serif;
}

.custom-scrubber-container {
  margin: 1.5rem 0;
}

.custom-scrubber {
  width: 100%;
  height: 12px;
  -webkit-appearance: none;
  appearance: none;
  background: #e0e0e0;
  border-radius: 6px;
  outline: none;
  margin-bottom: 0.5rem;
  cursor: pointer;
  touch-action: none; /* Prevent default touch behaviors */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

.custom-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: var(--primary-blue);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.custom-scrubber::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.custom-scrubber::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--primary-blue);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

.custom-scrubber::-moz-range-thumb:hover {
  transform: scale(1.2);
}

/* Larger touch targets on mobile for custom scrubber */
@media (max-width: 768px) {
  .custom-scrubber {
    height: 14px;
    margin: 8px 0;
    /* Ensure proper appearance */
    -webkit-appearance: none;
    appearance: none;
  }
  
  .custom-scrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px;
    background: var(--primary-blue);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    margin-top: -9px; /* Center the thumb vertically */
  }
  
  .custom-scrubber::-moz-range-thumb {
    width: 32px;
    height: 32px;
    background: var(--primary-blue);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }
}

.time-display {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #2d4950;
  margin-top: 0.5rem;
  font-family: 'Raleway', sans-serif;
}

.player-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.player-btn {
  background: var(--primary-blue);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.2rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  min-width: 50px;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.player-btn:hover:not(:disabled) {
  background: var(--dark-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.player-btn:active:not(:disabled) {
  transform: translateY(0);
}

.player-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

#main-audio-player {
  display: none;
}

.media-search-container {
  margin-bottom: 1rem;
}

.media-search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
  background: #fff;
}

.media-search-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(0, 143, 179, 0.1);
}

.media-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}

.media-list-item {
  padding: 0.9rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: background 0.2s ease;
  font-size: 0.95rem;
  color: #2d4950;
  font-family: 'Raleway', sans-serif;
}

.media-list-item:hover {
  background: var(--gray-100);
}

.media-list-item.active {
  background: var(--primary-blue);
  color: white;
  font-weight: 600;
}

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

/* Year grouping styles */
.media-year-section {
  margin-bottom: 0.5rem;
}

.media-year-header {
  padding: 0.75rem 1rem;
  background: var(--gray-100);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--primary-blue);
  font-size: 1rem;
  transition: background 0.2s ease;
  margin-bottom: 0.25rem;
  user-select: none;
}

.media-year-header:hover {
  background: var(--gray-200);
}

.media-year-header.collapsed {
  background: var(--gray-50);
}

.media-year-header .year-title {
  font-weight: 700;
  font-size: 1.1rem;
}

.media-year-header .year-count {
  color: var(--gray-600);
  font-weight: 500;
  font-size: 0.9rem;
  margin-left: 0.5rem;
}

.media-year-header .year-toggle {
  color: var(--gray-600);
  font-size: 0.85rem;
  margin-left: auto;
  padding-left: 0.5rem;
}

.media-year-content {
  padding: 0.25rem 0;
}

.media-year-content .media-list-item {
  padding-left: 1.5rem;
  border-bottom: 1px solid #eee;
}

.media-year-content .media-list-item:last-child {
  border-bottom: none;
}

/* Legacy styles for backwards compatibility */
.media-table {
  display: grid;
  gap: 1rem;
}

.media-item {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  padding: 0.8rem;
  background: var(--gray-50);
  border-radius: 8px;
}

.media-title {
  font-weight: 600;
  color: var(--primary-blue);
}

.media-player {
  display: flex;
  align-items: center;
}

.media-player audio {
  width: 100%;
}

.controls-container {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.controls-container button {
  background: var(--primary-blue);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.controls-container button:hover {
  background: var(--mid-blue);
}

#load-more-button {
  display: inline-block;
  margin: 1rem auto;
  background: var(--primary-blue);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

#load-more-button:hover {
  background: var(--mid-blue);
}

.password-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.password-overlay.hidden {
  display: none;
}

.password-form {
  text-align: center;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.password-form input {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0.5rem auto;
  padding: 0.5rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 1rem; /* Base font size - prevents mobile zoom */
}

/* Prevent mobile zoom on password input - must be at least 16px */
@media (max-width: 768px) {
  .password-form input,
  .password-form input[type="password"],
  .password-form input[type="text"] {
    font-size: 16px !important; /* 16px prevents iOS Safari auto-zoom */
  }
}

.password-form button {
  background: var(--primary-blue);
  color: #fff;
  border: 0;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  cursor: pointer;
}

.password-form button:hover {
  background: var(--mid-blue);
}

#error-message {
  display: none;
  color: #d32f2f;
  margin-top: 0.5rem;
}

/* ============================================
   Section: Give
   ============================================ */
.give-section {
  position: relative;
  padding: 50px 0;
}

.give-section > h2 {
  position: relative;
  z-index: 1;
}

.give-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: rgba(0, 143, 179, 0.85);
  z-index: 0;
  pointer-events: none;
}

.give-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.give-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 1.5rem;
  text-align: center;
}

.give-card h3 {
  color: var(--primary-blue);
  margin: 0 0 1rem;
}

.give-card p {
  margin: 0 0 0.8rem;
  color: #2d4950;
}

.enhanced-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.form-field label {
  color: var(--primary-blue);
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.form-field .input {
  padding: 0.5rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 1rem;
}

.input-wrapper {
  position: relative;
}

.currency-symbol {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #555;
}

.input-wrapper .input {
  padding-left: 1.8rem;
}

.form-row-2 {
  display: flex;
  gap: 1rem;
}

.form-row-2 .form-field {
  flex: 1;
}

.submit-button {
  background: var(--primary-blue);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.submit-button:hover {
  background: var(--mid-blue);
}

/* ============================================
   Section: Modals
   ============================================ */
.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  background: rgba(0,0,0,.6) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  padding: 1rem;
  overflow: hidden !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  /* Ensure modal is positioned relative to viewport, not document */
  transform: translateZ(0);
  /* Prevent page scrolling when modal is open */
  overscroll-behavior: contain;
}

.modal.active {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 99999 !important;
}

.modal:not(.active) {
  display: none !important;
}

.modal.active .modal-card {
  pointer-events: auto !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 10000 !important;
  width: auto !important;
  max-width: min(90vw, 800px) !important;
  min-width: 300px !important;
  height: auto !important;
  margin: auto !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

.modal-card {
  background: #fff !important;
  border-radius: 14px;
  max-width: min(90vw, 800px) !important;
  max-height: 90vh !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 2rem !important;
  position: relative !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
  margin: auto !important;
  z-index: 10000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  width: auto !important;
  min-width: 300px !important;
  max-width: 800px !important;
  min-height: 200px !important;
  color: #000 !important;
  transform: none !important;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  box-sizing: border-box !important;
  /* Ensure content scrolls within modal-card, not the page */
  overscroll-behavior: contain;
  /* Prevent content from extending beyond modal */
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Smooth height transitions when accordion opens/closes */
  transition: height 0.3s ease, max-height 0.3s ease;
}

/* Ensure accordion content inside modal doesn't cause page scroll */
.modal .accordion,
.modal .acc-item,
.modal .acc-panel {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.modal .acc-panel {
  /* Ensure accordion content doesn't break out of modal-card */
  max-width: 100%;
  box-sizing: border-box;
  /* Allow overflow for smooth transitions */
  overflow: hidden;
}

/* Override any .card styles that might affect .modal-card */
.modal .modal-card,
.modal-card {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  background: #fff !important;
  color: #000 !important;
  transform: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 90vh !important;
}

/* Ensure modal-card is never affected by .card styles - use very specific selector */
.modal div.modal-card,
div.modal-card,
.modal-card:not(.card) {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #fff !important;
  color: #000 !important;
  position: relative !important;
  z-index: 1202 !important;
  transform: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 90vh !important;
  width: auto !important;
  max-width: min(90vw, 800px) !important;
  min-width: 300px !important;
  margin: auto !important;
}

/* Ensure modals are never affected by fadein class */
#modals-root,
#modals-root *,
.modal,
.modal *,
.modal-card,
.modal-card * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

#modals-root {
  display: block !important;
  position: static !important;
  z-index: auto !important;
}

@media (max-width: 768px) {
  .modal {
    padding-top: 80px;
    align-items: flex-start;
    padding: 80px 1rem 1rem;
    justify-content: flex-start;
  }
  
  .modal.active {
    align-items: flex-start !important;
    justify-content: center !important;
  }
  
  .modal-card {
    margin-top: 0;
    max-height: calc(100vh - 100px) !important;
    padding: 1.5rem;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: 0;
  font-size: 24px;
  cursor: pointer;
  color: #555;
}

.modal-card h3 {
  color: var(--primary-blue);
  margin: 0 0 1rem;
}

.modal-card p {
  margin: 0.5rem 0;
  color: #2d4950;
}

#modal-values .modal-card h2 {
  color: var(--primary-blue);
  font-family: 'Great Vibes', cursive;
  font-size: clamp(34px, 4.2vw, 64px);
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.accordion {
  margin: 1rem 0;
}

.acc-item {
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 0.5rem;
}

.acc-button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0.8rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-blue);
  cursor: pointer;
  position: relative;
}

.acc-button::after {
  content: "▼";
  position: absolute;
  right: 10px;
  font-size: 0.9rem;
}

.acc-item.open .acc-button::after {
  content: "▲";
}

.acc-panel {
  padding: 0.5rem 0 1rem;
  overflow: hidden;
  /* Smooth height transition */
  transition: max-height 0.3s ease, padding-top 0.3s ease, padding-bottom 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.acc-item.open .acc-panel {
  max-height: 5000px; /* Large enough for any content */
  opacity: 1;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}

.acc-panel ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.acc-panel li {
  margin: 0.3rem 0;
}

/* Make bulleted text smaller in "Why We Are Baptist" section */
.acc-item[data-accordion-item="why-baptist"] .acc-panel ul,
.acc-item[data-accordion-item="why-baptist"] .acc-panel li {
  font-size: 0.9em;
}

#eds-top-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--primary-blue);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  align-items: center;
  justify-content: center;
}

#eds-top-btn:hover {
  background: var(--mid-blue);
}

/* ============================================
   Section: Footer
   ============================================ */
.enhanced-footer {
  position: relative;
  padding: 3rem 0 1rem;
  color: #fff;
}

.enhanced-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--dark-blue);
  z-index: 0;
  pointer-events: none;
}

.footer-content {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 0 1rem;
}

.footer-section {
  text-align: center;
}

.footer-logo {
  height: 64px;
  width: auto;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: 400px;
  margin: 0 auto;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  padding: 0.5rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1rem;
}

.contact-form textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-form .btn-submit {
  background: var(--light-blue);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.contact-form .btn-submit:hover {
  background: var(--mid-blue);
}

.contact-form .btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-form-message {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  text-align: center;
}

.contact-form-message.success {
  background: rgba(209, 250, 229, 0.9);
  color: #065f46;
  border: 1px solid rgba(110, 231, 183, 0.5);
}

.contact-form-message.error {
  background: rgba(254, 226, 226, 0.9);
  color: #991b1b;
  border: 1px solid rgba(252, 165, 165, 0.5);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.footer-links li {
  margin: 0.4rem 0;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.fb-iframe {
  width: 100%;
  max-width: 500px;
  height: 500px;
  border-radius: 10px;
}

.footer-bottom {
  margin-top: 2rem;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* ============================================
   Section: Animations
   ============================================ */
/* Sections should ALWAYS be visible for height calculation */
section {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Fade animations are controlled entirely by JavaScript */
/* No CSS should hide elements by default - JS will add classes to control visibility */

/* Fade in from bottom (scrolling down - element comes up from below) */
.fade-in-up {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: auto;
}

.fade-in-up:not(.fade-visible):not(.visible) {
  opacity: 0;
  transform: translateY(25px);
}

/* Fade in from top (scrolling up - element comes down from above) */
.fade-in-down {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: auto;
}

.fade-in-down:not(.fade-visible):not(.visible) {
  opacity: 0;
  transform: translateY(-25px);
}

/* Fade out upward (scrolling down - element exits upward) */
.fade-out-up {
  opacity: 0 !important;
  transform: translateY(-25px) !important;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: opacity, transform;
}

/* Fade out downward (scrolling up - element exits downward) */
.fade-out-down {
  opacity: 0 !important;
  transform: translateY(25px) !important;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: opacity, transform;
}

/* Visible state */
.fade-visible,
.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  will-change: auto;
}

/* Sections with fadein class are just markers - child elements are animated */
/* Sections themselves should always be visible for layout */

/* ============================================
   Section: Unified Background Scene Stack
   ============================================ */
#scene-stack {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

#scene-stack .scene-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease-in-out;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

#scene-stack .scene-layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  min-width: 100%;
  min-height: 100%;
}

/* Ensure videos stay in place on mobile */
@media (max-width: 768px) {
  #scene-stack .scene-layer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  
  /* Flag video layer needs to allow overflow for wider video */
  #scene-stack .scene-layer.has-flag-video {
    overflow: visible;
  }
  /* Mobile video sizing - set once, JavaScript handles positioning/transforms */
  #scene-stack .scene-layer video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: top left;
    min-width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    left: 0;
  }
  
  /* Position cross video left of center on mobile (about 40% from left) */
  #scene-stack .scene-layer[data-bg*="cross.mp4"] video,
  #scene-stack .scene-layer video[data-is-cross-video="true"] {
    object-position: 40% center;
  }
  
  /* Flag video on mobile needs to override max-width to cover right side when scaled/translated */
  #scene-stack .scene-layer video[data-is-flag-video="true"] {
    max-width: none !important; /* Allow video to be wider than viewport when scaled */
    /* Ensure video can extend beyond viewport bounds */
    position: absolute;
  }
  
  /* Ensure flag video layer container doesn't clip the video */
  #scene-stack .scene-layer.has-flag-video {
    overflow: visible !important;
    /* Ensure layer itself can extend beyond viewport */
    width: auto;
    min-width: 100vw;
  }
  
  /* Ensure videos stay covered during transitions - hide inactive but keep them sized */
  #scene-stack .scene-layer:not(.active) {
    opacity: 0;
    pointer-events: none;
  }
}

#scene-stack .scene-layer.active {
  opacity: 1;
}

/* ============================================
   Section: Media Queries
   ============================================ */
@media (max-width: 768px) {
  nav {
    padding: 0.5rem 1rem;
  }
  .nav-links {
    display: none;
  }
  .mobile-menu-button {
    display: block;
  }
  .hero h1 {
    font-size: clamp(48px, 6vw, 72px);
  }
  .hero-lead-1 {
    font-size: clamp(30px, 4vw, 38px);
  }
  .hero-lead-2 {
    font-size: clamp(24px, 3vw, 28px);
  }
  .expect-point {
    display: block;
    text-align: left;
    overflow: hidden;
  }
  .expect-icon {
    float: right;
    width: 135px;
    height: 135px;
    margin: 0 0 12px 16px;
    border-radius: 16px;
    shape-outside: inset(0 round 16px);
    flex-shrink: 0;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
  
  .expect-icon img {
    border-radius: 13px;
  }
  .expect-text {
    display: block;
    overflow: visible;
    min-height: 120px;
    text-align: left;
  }
  .expect-text p {
    margin-top: 0;
    text-align: left;
  }
  .pastor-card-large {
    padding: 1.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  
  .pastor-wrap {
    grid-template-columns: 1fr;
    padding: 0;
  }
  
  .card-container {
    padding: 0 1rem;
  }
  
  .about-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .about-section .card-container {
    padding: 0;
  }
  
  #what-to-expect .expect-intro {
    padding: 1.5rem 1rem;
  }
  
  .events-section .content-wrap {
    padding: 0 1rem;
  }
  
  #locations .content-wrap {
    padding: 0 1rem;
  }
  
  .give-grid {
    padding: 0 1rem;
    max-width: none;
    width: calc(100vw - 2rem);
    margin-left: calc(-50vw + 50% + 1rem);
    margin-right: calc(-50vw + 50% + 1rem);
  }
  .pastor-carousel {
    min-height: 255px;
  }
  .members-head {
    flex-direction: column;
    gap: 1rem;
  }
  #search-input {
    width: 100%;
  }
  .media-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .controls-container {
    justify-content: flex-start;
  }
  
  /* Mobile media player adjustments */
  .player-controls {
    padding: 1rem;
  }
  
  .custom-scrubber {
    height: 16px; /* Larger for mobile touch */
  }
  
  .custom-scrubber::-webkit-slider-thumb {
    width: 32px;
    height: 32px; /* Larger thumb for mobile */
  }
  
  .custom-scrubber::-moz-range-thumb {
    width: 32px;
    height: 32px; /* Larger thumb for mobile */
  }
  
  .player-btn {
    padding: 1rem 1.5rem;
    font-size: 1.4rem;
    min-width: 70px;
  }
  
  .media-list {
    max-height: 300px;
  }
  
  .media-list-item {
    padding: 1rem;
    font-size: 1rem;
  }
  
  /* Missionaries accordion on mobile - reorganize into single column */
  .missionaries-section {
    padding: 40px 1rem;
  }
  
  #ministries .card-container {
    padding: 0;
  }
  .missionaries {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 100%;
  }
  .missionaries .card {
    margin-bottom: 0;
    width: 100%;
  }
  /* Ministries sections - single column on mobile */
  #ministries {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  #ministries .card-container {
    grid-template-columns: 1fr !important;
    gap: 1rem;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  
  #ministries h3.subhead:first-of-type + .card-container {
    grid-template-columns: 1fr !important;
  }
  
  #ministries h3.subhead:nth-of-type(2) + .card-container {
    grid-template-columns: 1fr !important;
  }
  
  /* Missionaries accordion on mobile */
  .card-container.missionaries {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .card-container.missionaries .card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  
  .card-container.missionaries .card .missionary-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    background: #fff;
    user-select: none;
  }
  
  .card-container.missionaries .card .missionary-header:hover {
    background: #f8f9fa;
  }
  
  .card-container.missionaries .card .missionary-header .flag {
    width: 1.3em;
    height: 1em;
    margin-right: 0.5em;
    flex-shrink: 0;
  }
  
  .missionaries .flag-book::before,
  .missionaries .flag-scale::before,
  .missionaries .flag-home::before {
    font-size: 1.3rem;
  }
  
  .card-container.missionaries .card .missionary-header .missionary-info {
    flex: 1;
    min-width: 0;
  }
  
  .card-container.missionaries .card .missionary-header .missionary-info h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--primary-blue);
    line-height: 1.3;
  }
  
  .card-container.missionaries .card .missionary-header .missionary-info h4 {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
  }
  
  .card-container.missionaries .card .missionary-header .expand-icon {
    font-size: 1.2rem;
    color: #999;
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }
  
  .card-container.missionaries .card.expanded .missionary-header .expand-icon {
    transform: rotate(180deg);
  }
  
  .card-container.missionaries .card .missionary-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  .card-container.missionaries .card.expanded .missionary-content {
    max-height: 2000px;
  }
  
  .card-container.missionaries .card .missionary-content-inner {
    padding: 0 1rem 1rem;
  }
  
  .card-container.missionaries .card img,
  .card-container.missionaries .card .carousel {
    margin: 0 -1rem 0.75rem;
    width: calc(100% + 2rem);
    border-radius: 0;
  }
  
  .card-container.missionaries .card p {
    margin: 0 0 0.75rem;
    padding: 0;
  }
  
  .card-container.missionaries .card .links {
    margin: 0;
    padding: 0;
  }
  
  /* Locations padding on mobile */
  #locations .content-wrap {
    padding: 0 1rem;
  }
  .locations {
    padding: 0 1rem;
  }
  
  .location-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .location-map {
    min-height: 300px;
    order: 2;
  }
  
  .location-info {
    order: 1;
  }
  
  .map-mini {
    min-height: 300px;
  }
  
  /* Video backgrounds on mobile - ensure proper sizing */
  #scene-stack .scene-layer video {
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 480px) {
  .card-container {
    grid-template-columns: 1fr;
  }
  .about-section .card img {
    height: 200px;
  }
  .location-card img {
    height: 180px;
  }
  .event-card img {
    height: 160px;
  }
}