/* ============================================
   SV Temple WordPress Theme Stylesheet
   Replicates the Next.js SVTemple design
   ============================================ */

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

html { color-scheme: light; }

body {
  font-family: 'Source Serif 4', 'Georgia', serif;
  background-color: var(--cream);
  color: var(--charcoal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--maroon);
}

a { color: var(--saffron); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--maroon-dark); }

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

/* --- Layout --- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
.container-narrow { max-width: 960px; margin: 0 auto; padding: 0 1rem; }

/* --- Top Bar --- */
.topbar {
  background-color: var(--maroon-dark);
  color: var(--sandstone);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  padding: 0.4rem 0;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.topbar a { color: var(--sandstone); }
.topbar a:hover { color: white; }
.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}
.topbar-item { display: flex; align-items: center; gap: 0.35rem; }
/* Icon-only links need padding to reach a usable tap target; a bare 16px glyph
   is far below the ~44px guideline and is easy to miss on a phone. */
.topbar-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  margin: -0.35rem 0;
  border-radius: 0.25rem;
  line-height: 0;
}
.topbar-icon-link:hover { color: white; background-color: rgba(255,255,255,0.12); }
.topbar-icon-link:focus-visible { outline: 2px solid var(--sandstone); outline-offset: 1px; }

/* --- Header / Navigation --- */
.site-header {
  background-color: var(--saffron);
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: white;
  text-decoration: none;
}
.site-logo img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.site-logo-text h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  margin: 0;
  line-height: 1.2;
}
.site-logo-text span {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.85);
}

/* Desktop Navigation */
.main-nav { display: none; }
.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0;
}
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
  display: block;
  padding: 0.5rem 0.85rem;
  color: white;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: background-color 0.2s;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li:hover > a {
  background-color: var(--maroon-dark);
}

/* Dropdown */
.main-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  padding: 0.5rem 0;
  z-index: 60;
  list-style: none;
}
.main-nav li:hover > .sub-menu { display: block; }
.main-nav .sub-menu a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--charcoal);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  transition: background-color 0.2s;
}
.main-nav .sub-menu a:hover {
  background-color: var(--sandstone);
  color: var(--maroon);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: flex;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0.5rem;
}
.mobile-menu-toggle svg { width: 24px; height: 24px; }

/* Mobile Navigation */
.mobile-nav {
  display: none;
  background-color: var(--saffron);
  padding: 1rem;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.mobile-nav.active { display: block; }
.mobile-nav ul { list-style: none; }
.mobile-nav > ul > li > a {
  display: block;
  padding: 0.75rem 0;
  color: white;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.mobile-nav .sub-menu {
  list-style: none;
  padding-left: 1rem;
}
.mobile-nav .sub-menu a {
  display: block;
  padding: 0.5rem 0;
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
}

/* --- Footer --- */
.site-footer {
  background-color: var(--saffron);
  color: rgba(255,255,255,0.85);
  padding: 3rem 0 0;
  margin-top: 4rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.footer-col h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
  margin-bottom: 1rem;
}
.footer-col p, .footer-col a {
  color: rgba(255,255,255,0.85);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  line-height: 1.8;
}
.footer-col a:hover { color: var(--maroon-dark); }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.25rem; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding: 1.5rem 0;
  margin-top: 2rem;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
}

/* --- Page Layouts --- */
.page-header {
  text-align: center;
  padding: 3rem 1rem;
  background-color: var(--cream);
}
.page-header h1 {
  font-size: 2.5rem;
  color: var(--maroon);
  margin-bottom: 0.75rem;
}
.page-header p {
  font-size: 1.1rem;
  color: #666;
  max-width: 640px;
  margin: 0 auto;
}
.page-content {
  padding: 2rem 1rem;
  max-width: 960px;
  margin: 0 auto;
}

/* --- Hero Banner --- */
.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(74,19,32,0.7), rgba(74,19,32,0.4));
}
.hero-content {
  position: relative;
  z-index: 1;
  color: white;
  padding: 2rem;
  max-width: 800px;
}
.hero-content h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.hero-content p {
  font-family: 'Source Serif 4', serif;
  font-size: 1.25rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2rem;
  font-style: italic;
}
.hero-buttons {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-cta {
  display: inline-block;
  background-color: var(--saffron);
  color: white;
  padding: 0.85rem 2rem;
  border-radius: 0.5rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s;
  min-width: 180px;
  text-align: center;
}
.hero-cta:hover { background-color: var(--maroon-dark); color: white; }
/* Four buttons no longer fit side by side on a phone — stack them full width
   rather than letting min-width force a ragged wrap. Between 520px and 900px
   they settle into a tidy two-by-two. */
@media (max-width: 520px) {
  .hero-buttons { flex-direction: column; align-items: center; gap: 0.75rem; }
  .hero-cta { min-width: 0; width: 100%; max-width: 300px; }
}
.hero-cta-outline {
  background-color: transparent;
  border: 2px solid white;
  color: white;
}
.hero-cta-outline:hover {
  background-color: white;
  color: var(--maroon-dark);
}

/* --- Section Heading --- */
.section-heading {
  text-align: center;
  margin-bottom: 2rem;
}
.section-heading h2 {
  font-size: 2rem;
  color: var(--maroon);
  margin-bottom: 0.5rem;
}
.section-heading p {
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

/* --- Ornament Divider --- */
.ornament-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}
.ornament-divider::before,
.ornament-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.ornament-divider span {
  color: var(--gold);
  font-size: 1.25rem;
}

/* --- Sections --- */
.section { padding: 4rem 0; }
.section-cream { background-color: #FFFDF5; }
.section-dark {
  background-color: #8B1A1A;
  color: white;
}
.section-dark h2, .section-dark h3 { color: white; }

/* --- Cards --- */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.card {
  background: white;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
.card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.card p {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.6;
}
.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* --- Feature Grid --- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.feature-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.feature-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.feature-card p { color: #666; font-size: 0.9rem; }

/* --- Stats Bar --- */
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 3rem;
  text-align: center;
  padding: 2rem 0;
}
.stat-item {
  flex: 1 1 200px;
  max-width: 250px;
}
.stat-item h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.25rem;
}
.stat-item p {
  color: rgba(255,255,255,0.85);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
}

/* --- Timeline --- */
.timeline { position: relative; padding: 2rem 0; }
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: var(--gold);
  top: 0;
}
.timeline-item {
  display: flex;
  margin-bottom: 3rem;
  position: relative;
}
.timeline-item:nth-child(odd) { flex-direction: row; }
.timeline-item:nth-child(even) { flex-direction: row-reverse; }
.timeline-content {
  width: 45%;
  padding: 1.5rem;
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.timeline-year {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--saffron);
  margin-bottom: 0.5rem;
}
.timeline-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: var(--saffron);
  border: 3px solid var(--gold);
  border-radius: 50%;
  top: 1.5rem;
  z-index: 1;
}

/* --- Donation Widget --- */
.donation-widget {
  background: linear-gradient(135deg, var(--maroon), var(--maroon-dark));
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  color: white;
}
.donation-widget h3 {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}
.donation-widget p {
  color: rgba(255,255,255,0.85);
  margin-bottom: 1.5rem;
}
.donation-btn {
  display: inline-block;
  background-color: var(--saffron);
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  transition: background-color 0.2s;
}
.donation-btn:hover { background-color: var(--saffron-light); color: white; }

/* --- CTA Section --- */
.cta-section {
  text-align: center;
  padding: 4rem 1rem;
}
.cta-section h2 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}
.cta-section p {
  color: #666;
  margin-bottom: 2rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: 0.5rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s;
  text-align: center;
}
.btn-primary { background-color: var(--saffron); color: white; }
.btn-primary:hover { background-color: var(--maroon-dark); color: white; }
.btn-outline {
  background: transparent;
  color: var(--saffron);
  border: 2px solid var(--saffron);
}
.btn-outline:hover { background-color: var(--saffron); color: white; }

/* --- Deity Cards --- */
.deity-card {
  background: white;
  border-radius: 0.75rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s, transform 0.2s;
  border-top: 4px solid var(--saffron);
}
.deity-card:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}
.deity-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.deity-card p { color: #666; font-size: 0.9rem; }

/* --- Bhajan Pages --- */
.bhajan-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.bhajan-controls label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  color: var(--charcoal);
}
.bhajan-controls select {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 0.375rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  background: white;
}
.bhajan-toc {
  background: white;
  border-radius: 0.75rem;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.bhajan-toc h3 { font-size: 1.1rem; margin-bottom: 0.75rem; }
.bhajan-toc ol { padding-left: 1.5rem; }
.bhajan-toc li { margin-bottom: 0.35rem; }
.bhajan-toc a { color: var(--saffron); font-size: 0.95rem; }

.bhajan-card {
  background: white;
  border-radius: 0.75rem;
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.bhajan-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.bhajan-language-badge {
  display: inline-block;
  background: var(--sandstone);
  color: var(--maroon);
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  margin-bottom: 1rem;
}
.bhajan-lyrics {
  white-space: pre-wrap;
  font-family: 'Source Serif 4', serif;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--charcoal);
}

/* --- Two Column Layout --- */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

/* --- Temple Timings --- */
.temple-timings {
  background: white;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.temple-timings h3 { margin-bottom: 1rem; }
.timing-row {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f0f0f0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
}
.timing-label { font-weight: 500; }
.timing-value { color: #666; }

/* --- Contact Grid --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.contact-card {
  background: white;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.contact-card h3 { margin-bottom: 1rem; }
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
}

/* --- Google Map --- */
.map-container {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin: 2rem 0;
}
.map-container iframe {
  width: 100%;
  height: 450px;
  border: none;
}

/* --- 404 Page --- */
.page-404 {
  text-align: center;
  padding: 6rem 1rem;
}
.page-404 h1 { font-size: 6rem; color: var(--gold); }
.page-404 h2 { font-size: 1.5rem; margin-bottom: 1rem; }

/* --- History Timeline Page --- */
.history-timeline {
  margin-top: 2rem;
}
.history-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  border-left: 3px solid var(--gold);
  margin-bottom: 1rem;
  background: white;
  border-radius: 0 0.5rem 0.5rem 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s;
}
.history-row:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.history-year {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--saffron);
  text-align: right;
}
.history-events ul {
  list-style: none;
  padding: 0;
}
.history-events li {
  padding: 0.35rem 0;
  color: var(--charcoal);
  font-size: 0.95rem;
  line-height: 1.6;
}
.history-events li::before {
  content: "•";
  color: var(--gold);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-right: 0.3em;
}

/* --- Schedule Tables --- */
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}
.schedule-table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid #f0f0f0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
}
.schedule-table td:first-child { color: var(--charcoal); }
.schedule-time {
  text-align: right;
  color: var(--saffron);
  font-weight: 600;
  white-space: nowrap;
}
.schedule-day {
  background: white;
  border-radius: 0.75rem;
  padding: 1.5rem 2rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border-left: 4px solid var(--saffron);
}
.schedule-day h3 {
  color: var(--maroon);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

/* --- Events Table --- */
.events-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
}
.events-table thead {
  background: var(--maroon);
  color: white;
}
.events-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
}
.events-table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid #f0f0f0;
}
.events-table tbody tr:hover {
  background: var(--cream);
}
.events-table td:first-child {
  white-space: nowrap;
  color: var(--saffron);
}
.events-table td:nth-child(2) {
  white-space: nowrap;
  color: #666;
}

/* --- Auspicious Dates Grid --- */
.auspicious-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}
@media (min-width: 640px) {
  .auspicious-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .auspicious-grid { grid-template-columns: repeat(3, 1fr); }
}
.dates-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 1rem;
}
.dates-list li {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--charcoal);
  padding: 0.15rem 0;
}

@media (max-width: 640px) {
  .events-table { font-size: 0.75rem; }
  .events-table th, .events-table td { padding: 0.5rem 0.5rem; }
  .history-row { grid-template-columns: 80px 1fr; gap: 1rem; padding: 1rem; }
  .history-year { font-size: 1.4rem; }
}

/* --- QR Code Section --- */
.qr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
}
@media (min-width: 640px) {
  .qr-grid { grid-template-columns: 1fr 1fr; }
}
.qr-card {
  background: white;
  border-radius: 0.75rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border-top: 4px solid var(--gold);
}
.qr-card h3 {
  color: var(--maroon);
  margin-bottom: 1rem;
  font-size: 1.25rem;
}
.qr-card img {
  width: 200px;
  height: 200px;
  margin: 0 auto 1rem;
  display: block;
  border-radius: 0.5rem;
  background: white;
  padding: 0.5rem;
  border: 1px solid #f0f0f0;
}
.qr-card p {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --- Heritage Callout Section --- */
.heritage-callout {
  padding: 4rem 0;
  background: white;
  position: relative;
}
.heritage-content {
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, #FFFDF5 0%, var(--sandstone) 100%);
  border-radius: 1rem;
  border-left: 4px solid var(--saffron);
  border-right: 4px solid var(--saffron);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.heritage-content h2 {
  font-size: 2.25rem;
  color: var(--maroon);
  margin-bottom: 0.5rem;
}
.heritage-content .ornament-divider {
  max-width: 250px;
  margin: 0.5rem auto 1rem;
}
.heritage-tagline {
  font-size: 1.15rem;
  color: var(--maroon);
  font-style: italic;
  margin-bottom: 1rem;
}
.heritage-content p:not(.heritage-tagline) {
  color: #555;
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto;
}

/* --- WhatsApp Community Section --- */
.whatsapp-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, #FFF8F0 0%, #F5E6D3 100%);
  position: relative;
  overflow: hidden;
}
.whatsapp-section::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(37, 211, 102, 0.08) 0%, transparent 70%);
  border-radius: 50%;
}
.whatsapp-section::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.1) 0%, transparent 70%);
  border-radius: 50%;
}
.whatsapp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.whatsapp-text {
  text-align: center;
}
.whatsapp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: white;
  border-radius: 50%;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.2);
}
.whatsapp-text h2 {
  font-size: 2.25rem;
  color: var(--maroon);
  margin-bottom: 0.5rem;
}
.whatsapp-tagline {
  font-size: 1.15rem;
  color: var(--maroon);
  font-style: italic;
  margin: 0.75rem 0;
}
.whatsapp-text p {
  color: #555;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 500px;
  margin: 0 auto 1rem;
}
.whatsapp-benefits {
  list-style: none;
  padding: 0;
  margin: 1.5rem auto 0;
  max-width: 380px;
  text-align: left;
}
.whatsapp-benefits li {
  padding: 0.5rem 0;
  color: var(--charcoal);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
}
.whatsapp-qr-wrapper {
  display: flex;
  justify-content: center;
}
.whatsapp-qr-card {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  border: 3px solid #25D366;
  position: relative;
  max-width: 320px;
}
.whatsapp-qr-card::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 1rem;
  background: linear-gradient(135deg, #25D366, var(--gold));
  z-index: -1;
  opacity: 0.3;
}
.whatsapp-qr-card img {
  width: 240px;
  height: 240px;
  display: block;
  margin: 0 auto 1rem;
  border-radius: 0.5rem;
}
.qr-instruction {
  color: #666;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 !important;
}

@media (min-width: 768px) {
  .whatsapp-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
  }
  .whatsapp-text {
    text-align: left;
  }
  .whatsapp-icon {
    margin-bottom: 1.5rem;
  }
  .whatsapp-text p {
    margin-left: 0;
    margin-right: 0;
  }
  .whatsapp-benefits {
    margin-left: 0;
  }
  .whatsapp-text .ornament-divider {
    max-width: 200px;
  }
}

/* --- Donation Widget QR --- */
.donation-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.donation-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.donation-qr img {
  width: 120px;
  height: 120px;
  background: white;
  padding: 0.4rem;
  border-radius: 0.5rem;
}
.donation-qr span {
  color: rgba(255,255,255,0.85);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
}

/* --- WordPress Overrides --- */
.wp-block-image img { border-radius: 0.5rem; }
.entry-content { font-size: 1.05rem; line-height: 1.8; }
.entry-content p { margin-bottom: 1.25rem; }
.entry-content h2 { margin: 2rem 0 1rem; }
.entry-content h3 { margin: 1.5rem 0 0.75rem; }
.alignwide { max-width: 1280px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; margin-left: calc(-50vw + 50%); }

/* Admin bar fix */
body.admin-bar .site-header { top: 32px; }

/* --- Responsive --- */
@media (min-width: 640px) {
  .card-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .main-nav { display: block; }
  .mobile-menu-toggle { display: none; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .two-col { grid-template-columns: 1fr 1fr; }
  .stats-grid { gap: 2rem 4rem; }
  .hero-content h1 { font-size: 3.75rem; }
}

@media (min-width: 1024px) {
  .topbar-left, .topbar-right { gap: 2rem; }
}

/* Mobile timeline fallback */
@media (max-width: 767px) {
  .timeline::before { left: 1rem; }
  .timeline-item,
  .timeline-item:nth-child(even) { flex-direction: column; padding-left: 3rem; }
  .timeline-content { width: 100%; }
  .timeline-dot { left: 1rem; }
}

/* --- Forms page --- */
.forms-page { padding: 2.25rem 1rem 3.5rem; max-width: 820px; }
.forms-group + .forms-group { margin-top: 2.75rem; }
.section-eyebrow {
  font-size: 1.05rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--maroon);
  margin: 0 0 0.3rem;
}
.forms-group-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  color: #6C5F58;
  margin: 0 0 1.1rem;
}

/* Small tiles: two across on a phone, four on a desktop. */
.form-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}
.form-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  background: white;
  border: 1px solid var(--gold-light);
  border-radius: 0.6rem;
  padding: 1rem 0.9rem 0.85rem;
  color: var(--maroon);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.form-tile:hover,
.form-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(107,29,42,0.13);
  border-color: var(--saffron);
  color: var(--maroon);
}
.form-tile:focus-visible,
.form-strip:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 2px;
}
.form-tile-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--saffron);
  margin-bottom: 0.15rem;
}
.form-tile-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--maroon);
}
.form-tile-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem;
  line-height: 1.35;
  color: #6C5F58;
}
.form-tile-meta {
  margin-top: 0.45rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  border: 1px solid var(--gold-light);
  border-radius: 0.2rem;
  padding: 0.1rem 0.35rem;
}

/* The sign-up is a different kind of action, so it gets a different shape. */
.form-strip {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--sandstone);
  border: 1px solid var(--gold-light);
  border-radius: 0.6rem;
  padding: 1rem 1.1rem;
  color: var(--maroon);
  text-decoration: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.form-strip:hover,
.form-strip:focus-visible {
  box-shadow: 0 6px 16px rgba(107,29,42,0.13);
  border-color: var(--saffron);
  color: var(--maroon);
}
.form-strip-icon svg {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--saffron);
}
.form-strip-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; }
.form-strip-text strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
}
.form-strip-text span {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #6C5F58;
}
.form-strip-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--saffron);
}
.form-strip-action svg { width: 15px; height: 15px; transition: transform 0.2s; }
.form-strip:hover .form-strip-action svg { transform: translateX(3px); }

.section-help {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gold-light);
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  color: #6C5F58;
}
.section-help a { color: var(--maroon); font-weight: 600; }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 700px) {
  .form-tiles { grid-template-columns: repeat(4, 1fr); }
}
/* The strip stacks before its three columns get too cramped to read. */
@media (max-width: 560px) {
  .form-strip { flex-wrap: wrap; }
  .form-strip-text { flex-basis: calc(100% - 2.5rem); }
  .form-strip-action { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .form-tile,
  .form-strip,
  .form-strip-action svg { transition: none; }
  .form-tile:hover { transform: none; }
}

/* --- Donations page --- */
.donations-page { padding: 2.25rem 1rem 3.5rem; max-width: 820px; }
.donations-page .donation-widget { text-align: center; }
.give-ways-section { margin-top: 2.75rem; }

.give-ways {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin-top: 1.1rem;
}
.give-way {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  background: white;
  border: 1px solid var(--gold-light);
  border-radius: 0.6rem;
  padding: 1.1rem 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.give-way-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--saffron);
  margin-bottom: 0.15rem;
}
.give-way h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--maroon);
  margin: 0;
}
.give-way p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #6C5F58;
  margin: 0;
}
.give-way-detail { font-size: 0.78rem; color: var(--maroon); }

/* Only the sponsorships card is a link, so only it gets link affordances. */
.give-way-link {
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.give-way-link:hover,
.give-way-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(107,29,42,0.13);
  border-color: var(--saffron);
}
.give-way-link:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; }
.give-way-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--saffron);
}
.give-way-action svg { width: 15px; height: 15px; transition: transform 0.2s; }
.give-way-link:hover .give-way-action svg { transform: translateX(3px); }

@media (min-width: 700px) {
  .give-ways { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .give-way-link,
  .give-way-action svg { transition: none; }
  .give-way-link:hover { transform: none; }
}


/* --- Top bar: labelled phone / email actions --- */
/* The label sits beside the icon, so the link no longer needs line-height: 0
   (that rule exists to stop a lone glyph adding leading). */
.topbar-icon-link.has-label {
  gap: 0.4rem;
  padding: 0.35rem 0.55rem;
  line-height: 1.4;
}
.topbar-icon-label {
  font-family: 'DM Sans', sans-serif;
  font-size: inherit;
  white-space: nowrap;
}

/* --- Hero: keep four buttons on two tidy rows on tablets --- */
@media (min-width: 521px) and (max-width: 900px) {
  .hero-buttons { flex-wrap: wrap; justify-content: center; max-width: 420px; margin-inline: auto; }
  .hero-cta { min-width: 0; flex: 0 1 calc(50% - 0.5rem); }
}

/* --- Homepage: temple logo --- */
.temple-logo-figure {
  margin: 0 0 1.5rem;
  display: flex;
  justify-content: center;
}
/* The source file is only 100x100. Rendering it any larger upscales it into a
   blur, so it is pinned to its native size — raise this once a high-resolution
   logo replaces assets/images/temple-logo.jpg. */
.temple-logo-figure img {
  width: 100px;
  height: 100px;
  border-radius: 0.5rem;
}

/* --- Forms page: WhatsApp community block --- */
/* Not a link: there is no join URL, the QR code is the way in. Styled to match
   .form-strip so the section still reads as one family. */
.form-whatsapp {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--sandstone);
  border: 1px solid var(--gold-light);
  border-radius: 0.6rem;
  padding: 1.1rem 1.25rem;
  color: var(--maroon);
}
.form-whatsapp-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}
.form-whatsapp-icon svg { display: block; margin-bottom: 0.25rem; }
.form-whatsapp-text strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
}
.form-whatsapp-text > span:last-child {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #6C5F58;
}
.form-whatsapp-qr {
  flex: 0 0 auto;
  text-align: center;
}
.form-whatsapp-qr img {
  display: block;
  width: 150px;
  height: 150px;
  background: #fff;
  padding: 0.4rem;
  border-radius: 0.4rem;
}
.form-whatsapp-qr p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  color: #6C5F58;
  margin: 0.4rem 0 0;
}
@media (max-width: 600px) {
  .form-whatsapp { flex-direction: column; align-items: flex-start; }
  .form-whatsapp-qr { align-self: center; }
}


/* ============================================================
   Hero: band layout (Appearance > Customize > Hero Layout)
   The name sits above the photograph and the actions below it, so
   nothing covers the building. Because no text is laid over the
   picture, it needs no darkening scrim — the photo runs at full
   strength. The gold hairlines frame it rather than letting it
   bleed into the two maroon bands.
   The overlay layout above is untouched; switching back in the
   Customizer restores it with no deploy.
   ============================================================ */
.hero-titleband {
  background-color: var(--maroon);
  color: #fff;
  text-align: center;
  padding: 1.75rem 1.25rem 1.5rem;
  border-bottom: 3px solid var(--gold);
}
.hero-titleband h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 0.4rem;
  text-wrap: balance;
}
.hero-titleband p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.88);
  margin: 0;
}

.hero-photo {
  background-size: cover;
  background-position: center;
  min-height: 58vh;
}

.hero-actionband {
  display: flex;
  background-color: var(--maroon);
  border-top: 3px solid var(--gold);
}
.hero-action {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 0.6rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: #fff;
  text-decoration: none;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.15);
  transition: background-color 0.2s;
}
.hero-action:last-child { border-right: 0; }
.hero-action svg { width: 22px; height: 22px; display: block; }
.hero-action:hover,
.hero-action:focus-visible { background-color: var(--maroon-dark); color: #fff; }
.hero-action:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.hero-action-primary { background-color: var(--saffron); }
.hero-action-primary:hover,
.hero-action-primary:focus-visible { background-color: #d0670f; }

/* Phone: two by two rather than four cramped columns, and a shorter photo so
   the actions are reachable without scrolling. */
@media (max-width: 640px) {
  .hero-titleband { padding: 1.35rem 1rem 1.2rem; }
  .hero-titleband h1 { font-size: 1.75rem; }
  .hero-titleband p { font-size: 0.92rem; }
  .hero-photo { min-height: 40vh; }
  .hero-actionband { flex-wrap: wrap; }
  .hero-action {
    flex: 1 1 50%;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }
  .hero-action:nth-child(2n) { border-right: 0; }
  .hero-action:nth-child(n+3) { border-bottom: 0; }
}

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


/* ============================================================
   Top bar: collapse to the address on a phone
   Five items -- address, phone, email and two lines of hours --
   wrapped into a stack that filled a third of a small screen. Below
   640px only the address shows, with the rest behind "More info".
   A checkbox drives it so no JavaScript is involved; above 640px the
   checkbox and its label are hidden and every item is shown, so the
   desktop bar is unchanged whatever state the checkbox is left in.
   ============================================================ */
.topbar-toggle { position: absolute; opacity: 0; pointer-events: none; }
.topbar-more-btn { display: none; }

@media (max-width: 640px) {
  .topbar .container {
    justify-content: center;
    row-gap: 0.35rem;
  }
  /* the address stays; everything else waits behind the toggle */
  .topbar-collapsible,
  .topbar-toggle ~ .topbar-right { display: none; }

  .topbar-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(245,230,211,0.4);
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--sandstone);
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .topbar-more-btn svg { transition: transform 0.2s; }
  .topbar-more-hide { display: none; }

  /* opened */
  .topbar-toggle:checked ~ .topbar-left .topbar-collapsible { display: flex; }
  .topbar-toggle:checked ~ .topbar-right { display: flex; }
  .topbar-toggle:checked ~ .topbar-left .topbar-more-show { display: none; }
  .topbar-toggle:checked ~ .topbar-left .topbar-more-hide { display: inline; }
  .topbar-toggle:checked ~ .topbar-left .topbar-more-btn svg { transform: rotate(180deg); }

  /* the checkbox itself takes focus, so the visible ring goes on the label */
  .topbar-toggle:focus-visible ~ .topbar-left .topbar-more-btn {
    outline: 2px solid var(--sandstone);
    outline-offset: 2px;
  }

  /* stack the revealed items rather than letting them wrap raggedly */
  .topbar-left, .topbar-right {
    justify-content: center;
    width: 100%;
    gap: 0.3rem 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-more-btn svg { transition: none; }
}