/* ============================================
   BASE — Variables, Reset, Typography, Layout
   ============================================ */

:root {
  /* Brand */
  --crimson: #8B1538;
  --gold: #C9A962;
  --cream: #FAF8F5;
  --charcoal: #2D2D2D;
  --sage: #7A8B7A;
  --light-gold: #F5EFE0;

  /* Service type accents */
  --confession-purple: #6B4C9A;
  --adoration-blue: #4A7C9B;
  --rosary-rose: #C17B8E;

  /* Liturgical (set by JS) */
  --liturgical-color: transparent;

  /* Semantic tokens */
  --bg-primary: var(--cream);
  --bg-card: #ffffff;
  --bg-card-hover: #f9f8f6;
  --bg-nav: #ffffff;
  --bg-input: #ffffff;
  --bg-filter-btn: #ffffff;
  --text-primary: var(--charcoal);
  --text-secondary: #555;
  --text-muted: #999;
  --text-subtle: #666;
  --text-faint: #888;
  --border-light: rgba(0,0,0,0.06);
  --border-medium: rgba(0,0,0,0.1);

  /* Shadows (layered for depth) */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.06), 0 3px 8px rgba(0,0,0,0.06), 0 8px 20px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.06);
  --shadow-header: 0 4px 20px rgba(139, 21, 56, 0.3);

  /* Layout */
  --max-width: 900px;
  --header-h: 72px;
  --nav-h: 60px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4 {
  font-family: 'Crimson Pro', serif;
  font-weight: 600;
  line-height: 1.3;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/* Header */
header {
  background: linear-gradient(135deg, #8B1538 0%, #7A1230 40%, #8B1538 70%, #6B0F2B 100%);
  background-size: 300% 300%;
  animation: headerBreath 8s ease-in-out infinite;
  will-change: background-position;
  color: white;
  padding: 1rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(139, 21, 56, 0.3), 0 1px 0 rgba(201, 169, 98, 0.15) inset;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-left h1 {
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.15rem;
}

.header-subtitle {
  font-size: 0.8rem;
  opacity: 0.9;
  margin: 0;
}

/* Next Mass Near Me */
.header-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}

.next-mass-label {
  font-size: 0.7rem;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.next-mass-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}

.next-mass-church {
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.next-mass-church:hover { text-decoration: underline; }

.next-mass-details {
  font-size: 0.75rem;
  opacity: 0.9;
}

@keyframes headerBreath {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Skeleton loaders */
.skeleton-list {
  padding: 0.5rem;
}

.skeleton-card {
  background: var(--bg-card);
  margin: 0.6rem 0.5rem;
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-card);
}

.skeleton-line {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--border-light) 25%, rgba(0,0,0,0.03) 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  margin-bottom: 0.6rem;
}

.skeleton-line.title { width: 65%; height: 16px; }
.skeleton-line.subtitle { width: 40%; height: 12px; }
.skeleton-line.short { width: 25%; height: 12px; margin-bottom: 0; }

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

/* Liturgical header (Resources tab) */
.liturgical-header {
  text-align: center;
  padding: 1.25rem 1rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  width: 100%;
  box-sizing: border-box;
  color: white;
  background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
}

.liturgical-header.green { background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%); }
.liturgical-header.purple { background: linear-gradient(135deg, #6A1B9A 0%, #4A148C 100%); }
.liturgical-header.red { background: linear-gradient(135deg, #C62828 0%, #B71C1C 100%); }
.liturgical-header.rose { background: linear-gradient(135deg, #EC407A 0%, #D81B60 100%); }
.liturgical-header.gold { background: linear-gradient(135deg, #FFD54F 0%, #FFC107 100%); color: var(--charcoal); }
.liturgical-header.white { background: linear-gradient(135deg, #FAFAFA 0%, #E0E0E0 100%); color: var(--charcoal); }

.liturgical-title {
  font-family: 'Crimson Pro', serif;
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
  line-height: 1.35;
}

/* Override any inline styles Universalis might inject */
.liturgical-title * {
  text-align: center !important;
  display: inline !important;
  float: none !important;
  margin: 0 !important;
}

.liturgical-subtitle {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-top: 0.25rem;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
}

/* Verse of the Day */
.verse-of-day-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-left: 4px solid var(--liturgical-color);
}

.verse-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.verse-content {
  font-family: 'Crimson Pro', serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--charcoal);
  font-style: italic;
}

.verse-reference {
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.75rem;
  text-align: right;
}

/* Resource sections (Order of Mass style buttons) */
.order-mass-section {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.order-mass-header {
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 0.75rem;
  font-size: 1rem;
  text-align: center;
}

.order-mass-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.order-mass-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 1.5rem;
  color: var(--charcoal);
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid rgba(0,0,0,0.05);
  border-left: 4px solid var(--liturgical-color, var(--gold));
  border-radius: 12px;
  font-size: 1rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  width: 100%;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.order-mass-link:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06);
  border-left-color: var(--crimson);
}

.order-mass-link:active {
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Reading cards — wrapped in .readings-section container */
.readings-section {
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 1rem;
  border: 1px solid rgba(0,0,0,0.05);
}

.reading-card {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.reading-card:last-child {
  border-bottom: none;
}

.reading-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.reading-header:hover {
  background: rgba(0,0,0,0.02);
}

.reading-title {
  font-weight: 600;
  color: var(--charcoal);
}

.reading-source {
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.2rem;
}

.reading-toggle {
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.reading-card.expanded .reading-toggle {
  transform: rotate(180deg);
}

.reading-text {
  display: none;
  padding: 0 1rem 1rem;
  font-family: 'Crimson Pro', serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--charcoal);
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
  box-sizing: border-box;
}

.reading-text * {
  max-width: 100% !important;
  width: auto !important;
  box-sizing: border-box;
}

.reading-text table {
  width: 100% !important;
}

.reading-card.expanded .reading-text {
  display: block;
}

/* Main content */
main {
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

/* Community toggle bar (Groups / Events) */
.community-toggle-bar {
  background: var(--bg-primary);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  position: sticky;
  top: var(--header-h, 72px);
  z-index: 49;
}

#communityFilters.filters {
  top: calc(var(--header-h, 72px) + 50px);
}

.community-toggle-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  padding: 0.6rem 1rem;
  gap: 0.5rem;
}

.community-toggle-btn {
  flex: 1;
  padding: 0.5rem 1rem;
  border: none;
  background: var(--bg-filter-btn);
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--charcoal);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.community-toggle-btn.active {
  background: var(--crimson);
  color: white;
  box-shadow: 0 2px 10px rgba(139, 21, 56, 0.25);
}

.community-toggle-btn:hover:not(.active) {
  background: var(--light-gold);
}

/* Groups header */
.groups-header {
  padding: 1rem 1rem 0;
  margin-bottom: 0.5rem;
}

.groups-title {
  font-family: 'Crimson Pro', serif;
  color: var(--crimson);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.groups-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Events */
.events-header-section {
  margin-bottom: 1rem;
}

.event-card {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.6rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(0,0,0,0.05);
  border-left: 3px solid var(--liturgical-color, var(--gold));
}

.event-date {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--crimson);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.3rem;
}

.event-title {
  font-family: 'Crimson Pro', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.3;
}

.event-location {
  font-size: 0.82rem;
  color: var(--sage);
  margin-top: 0.2rem;
}

.event-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}


.event-card-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
}

.event-card-link:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}



/* Tab content */
.tab-content {
  display: none;
  padding-bottom: 80px;
  background: var(--bg-primary);
  min-height: calc(100vh - 150px);
}

/* Map tab needs no padding — map fills the space exactly */
#mapTab {
  padding-bottom: 0;
  min-height: 0;
  overflow: hidden;
}

.tab-content.active {
  display: block;
  animation: tabReveal 0.25s ease-out;
}

@keyframes tabReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tab-inner {
  padding: 1rem;
}

.card-list {
  padding: 0.25rem 0;
}

/* Utility: empty state */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-muted);
}

.empty-state h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

/* Action pills (directions, website, call, etc.) */
.action-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.action-pill {
  padding: 0.35rem 0.75rem;
  background: var(--light-gold);
  border: 1px solid var(--gold);
  color: var(--charcoal);
  text-decoration: none;
  border-radius: 20px;
  font-size: 0.78rem;
  font-family: inherit;
  transition: all 0.2s;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.action-pill:hover {
  background: var(--gold);
  color: white;
}

.action-pill.directions {
  background: #4285F4;
  border-color: #4285F4;
  color: white;
}

.action-pill.directions:hover {
  background: #3367D6;
  border-color: #3367D6;
}

/* Save button */
.save-btn {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0.25rem;
  color: #ccc;
  transition: color 0.2s, transform 0.2s;
  flex-shrink: 0;
  position: relative;
}

.save-btn.saved { color: var(--gold); }

.save-btn.sparkle {
  animation: saveBounce 0.4s ease-out;
}

@keyframes saveBounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.5); }
  50% { transform: scale(0.9); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Golden sparkle particles */
.save-btn.sparkle::before,
.save-btn.sparkle::after {
  content: '\2726';
  position: absolute;
  font-size: 0.6rem;
  color: var(--gold);
  animation: sparkleOut 0.5s ease-out forwards;
  pointer-events: none;
}

.save-btn.sparkle::before {
  top: -4px; left: -2px;
  animation-name: sparkleOut1;
}

.save-btn.sparkle::after {
  top: -2px; right: -4px;
  animation-name: sparkleOut2;
}

@keyframes sparkleOut1 {
  0% { opacity: 1; transform: translate(0, 0) scale(0.5); }
  100% { opacity: 0; transform: translate(-8px, -12px) scale(1.2); }
}

@keyframes sparkleOut2 {
  0% { opacity: 1; transform: translate(0, 0) scale(0.5); }
  100% { opacity: 0; transform: translate(10px, -10px) scale(1); }
}

/* Search */
.search-bar {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1.5px solid var(--border-medium);
  border-radius: 24px;
  padding: 0 1rem;
  margin: 0.5rem 0.75rem;
  transition: border-color 0.2s;
}

.search-bar:focus-within {
  border-color: var(--crimson);
}

.search-bar input {
  flex: 1;
  border: none;
  background: none;
  padding: 0.65rem 0.5rem;
  font-size: 0.9rem;
  color: var(--text-primary);
  outline: none;
}

.search-bar input::placeholder {
  color: var(--text-muted);
}

.search-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  padding: 0.25rem;
  display: none;
}

.search-bar.has-query .search-clear {
  display: block;
}

/* Loading bar */
.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--gold);
  z-index: 9999;
  transition: width 0.3s ease;
}

/* ---- Map Markers ---- */
.user-marker {
  background: #4285f4;
  border: 3px solid white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  box-shadow: 0 2px 6px rgba(66, 133, 244, 0.5);
}

.church-marker {
  background: none;
  border: none;
  color: var(--crimson);
  font-size: 34px;
  font-weight: bold;
  line-height: 36px;
  text-align: center;
  -webkit-text-stroke: 2px white;
  paint-order: stroke fill;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.map-popup { min-width: 200px; }
.map-popup h4 {
  margin: 0 0 0.5rem 0;
  color: var(--crimson);
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
}

.map-popup .popup-actions {
  display: flex;
  gap: 0.5rem;
}

.map-popup .popup-btn {
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: 'DM Sans', sans-serif;
}

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

.map-popup .popup-btn.secondary {
  background: var(--light-gold);
  color: var(--charcoal);
}

/* Cluster styling */
.marker-cluster {
  background: rgba(139, 21, 56, 0.6);
  border-radius: 50%;
}

.marker-cluster div {
  background: var(--crimson);
  color: white;
  font-weight: 600;
  font-size: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-cluster-small { width: 30px; height: 30px; }
.marker-cluster-small div { width: 24px; height: 24px; }
.marker-cluster-medium { width: 40px; height: 40px; }
.marker-cluster-medium div { width: 32px; height: 32px; }
.marker-cluster-large { width: 50px; height: 50px; }
.marker-cluster-large div { width: 40px; height: 40px; }

/* ---- Saved Tab ---- */
.saved-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.saved-tab-btn {
  flex: 1;
  padding: 0.6rem 0.5rem;
  background: var(--bg-card);
  border: 1.5px solid var(--border-medium);
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.saved-tab-btn.active {
  background: var(--crimson);
  border-color: var(--crimson);
  color: white;
}

.saved-card {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.5rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(0,0,0,0.05);
}

.saved-card-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.saved-card-info { flex: 1; min-width: 0; }

.saved-card-name {
  font-family: 'Crimson Pro', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--charcoal);
}

.saved-card-sub {
  font-size: 0.82rem;
  color: var(--sage);
  margin-top: 0.15rem;
}

.saved-card-detail {
  font-size: 0.8rem;
  color: var(--text-subtle);
  margin-top: 0.4rem;
}

.export-all-btn {
  display: block;
  width: 100%;
  padding: 0.75rem;
  background: var(--light-gold);
  border: 1.5px solid var(--gold);
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--charcoal);
  cursor: pointer;
  margin-bottom: 1rem;
  transition: all 0.2s;
}

.export-all-btn:hover {
  background: var(--gold);
  color: white;
}

/* ---- More Tab ---- */
.more-section {
  background: var(--bg-card);
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.more-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
  text-decoration: none;
  color: var(--charcoal);
  -webkit-tap-highlight-color: transparent;
}

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

.more-item:hover { background: rgba(0,0,0,0.02); }

.more-icon {
  font-size: 1.2rem;
  width: 2rem;
  flex-shrink: 0;
}

.more-label {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 500;
}

.more-arrow {
  font-size: 1.3rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.more-toggle {
  flex-shrink: 0;
}

.toggle-track {
  width: 44px;
  height: 26px;
  background: var(--border-medium);
  border-radius: 13px;
  position: relative;
  transition: background 0.2s;
}

.more-toggle.on .toggle-track {
  background: var(--crimson);
}

.toggle-thumb {
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.more-toggle.on .toggle-thumb {
  transform: translateX(18px);
}

.more-expandable {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
  padding: 0 1.25rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.more-expandable.open {
  max-height: 300px;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
}

.more-expandable p { margin-bottom: 0.5rem; }
.more-expandable p:last-child { margin-bottom: 0; }

.more-version {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.more-credit-text {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Mobile styles */
@media (max-width: 600px) {
  header {
    padding: 0.6rem 0.85rem;
  }

  header h1,
  .header-left h1 {
    font-size: 1.15rem;
    margin-bottom: 0;
  }

  .header-subtitle {
    font-size: 0.65rem;
    margin-top: 0.1rem;
  }

  .header-right { flex-shrink: 0; }

  .next-mass-label { font-size: 0.55rem; }
  .next-mass-church { font-size: 0.85rem; }
  .next-mass-details { font-size: 0.7rem; }

  .filter-summary-text { font-size: 0.85rem; }

  .filter-content {
    padding: 0.6rem 0.75rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out, padding 0.25s ease-out;
    padding-top: 0;
    padding-bottom: 0;
  }

  .filter-content.show {
    max-height: 320px;
    padding: 0.6rem 0.75rem;
  }

  .filter-toggle-btn:active {
    background: var(--gold);
  }

  .filter-label {
    min-width: auto;
    width: 100%;
    margin-bottom: 0.2rem;
  }

  .filter-row { gap: 0.35rem; }
}

/* Extra small screens */
@media (max-width: 380px) {
  .filter-btn {
    padding: 0.4rem 0.5rem;
    font-size: 0.7rem;
  }
}

/* Reduced motion — only disable card/splash animations, keep header breathing */
@media (prefers-reduced-motion: reduce) {
  .tab-content.active {
    animation: none;
  }
  .church-card, .timeline-entry, .group-card,
  .splash-cross, .splash-logo, .splash-progress-wrap,
  .splash-status, .splash-quote, .splash-cross::before {
    animation: none;
  }
}