/* ==========================================================================
   Srisailam Karikala Satram — shared stylesheet
   Loaded by every page BEFORE the Tailwind CDN so utilities can override.

   The single most important thing in this file is `.site-container`.
   Every full-width band (header, hero, section, footer) is a full-bleed
   element whose *inner* wrapper is `.site-container`. That is what keeps
   the logo, the body content and the footer columns on the same vertical
   rails at every viewport width. Do not hand-roll `max-w-* px-*` on a
   section — use `.site-container`.
   ========================================================================== */

:root {
  /* Brand palette — mirrored in tailwind.config in site.js */
  --maroon:      #7B1D2F;
  --maroon-dark: #6A1826;
  --gold:        #C8A951;
  --gold-light:  #E8D9A0;
  --gold-bg:     #FDF8EC;
  --cream:       #F5F0E8;
  --cream-alt:   #EDE7DB;
  --charcoal:    #2D2D2D;
  --ink-soft:    #6B6560;
  --ink-mute:    #9E9590;

  /* Layout tokens */
  --container-max: 80rem;   /* 1280px — same as Tailwind's max-w-7xl */
  --gutter:        1.25rem; /* 20px on phones */
  --header-h:      4rem;    /* 64px sticky header */
}

@media (min-width: 640px)  { :root { --gutter: 2rem; } }  /* 32px */
@media (min-width: 1024px) { :root { --gutter: 3rem; } }  /* 48px */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img  { max-width: 100%; display: block; }

/* --------------------------------------------------------------------------
   THE layout token. One max-width, one responsive gutter, everywhere.
   -------------------------------------------------------------------------- */
.site-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   Horizontal card rail (rooms carousel, testimonials).
   Bleeds to the right edge of the viewport but its FIRST card starts exactly
   on the container's content edge, so it lines up with the heading above it.

   NOTE: do not add scroll-snap here. `scroll-snap-align: start` aligns items to
   the scrollport's border box, which ignores this padding — the browser then
   scrolls the rail by exactly the gutter and the first card lands at x=0,
   defeating the alignment.
   -------------------------------------------------------------------------- */
.rail {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-inline: calc(max(0px, (100% - var(--container-max)) / 2) + var(--gutter));
  padding-bottom: 1.25rem;
}
.rail > * { flex: 0 0 auto; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 2rem); }

/* Hide Alpine-controlled elements until Alpine boots (no dropdown flash) */
[x-cloak] { display: none !important; }

/* --------------------------------------------------------------------------
   Small shared pieces
   -------------------------------------------------------------------------- */

/* Gold hairline used under section headings */
.rule-gold { width: 3rem; height: 1px; background: var(--gold); }

/* Vertical rhythm for a content band. Was repeated as `py-20 lg:py-24`. */
.section { padding-block: 5rem; }
@media (min-width: 1024px) { .section { padding-block: 6rem; } }

/* --------------------------------------------------------------------------
   Long-form copy. Set the vertical rhythm once so About / Temple / History
   don't each hand-tune margins and drift apart.
   -------------------------------------------------------------------------- */
.prose-satram { color: var(--ink-soft); line-height: 1.75; max-width: 68ch; }
.prose-satram > * + * { margin-top: 1.15rem; }
.prose-satram h2 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--charcoal);
  font-size: 1.75rem; line-height: 1.25; font-weight: 500;
  margin-top: 2.75rem;
}
.prose-satram h3 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--charcoal);
  font-size: 1.25rem; font-weight: 500;
  margin-top: 2rem;
}
.prose-satram h2:first-child, .prose-satram h3:first-child { margin-top: 0; }
.prose-satram ul, .prose-satram ol { padding-left: 1.35rem; }
.prose-satram li + li { margin-top: 0.5rem; }
.prose-satram strong { color: var(--charcoal); font-weight: 600; }
.prose-satram a { color: var(--maroon); text-underline-offset: 3px; }
.prose-satram a:hover { color: var(--gold); }
.prose-satram blockquote {
  border-left: 2px solid var(--gold);
  padding-left: 1.25rem;
  font-style: italic;
}

/* Bordered fact panel — timings, tariff notes, how to reach */
.info-card {
  background: #fff;
  border-top: 3px solid var(--gold);
  padding: 1.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.info-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.125rem; font-weight: 500;
  color: var(--charcoal);
  margin: 0 0 .75rem;
}

/* Call-to-action link at the foot of an .info-card. `margin-top: auto` pins it
   to the bottom when the card is a flex column, so a row of cards with
   different amounts of copy still has its links on one line. It collapses
   harmlessly to 0 in ordinary block layout. */
.donate-link {
  margin-top: auto;
  align-self: flex-start;
  padding-top: .25rem;
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--maroon); text-decoration: none;
  transition: color .2s;
}
.donate-link:hover { color: var(--gold); }

/* Committee member */
.person-card { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); text-align: center; }
.person-card .avatar {
  aspect-ratio: 1;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-bg);
  border-bottom: 3px solid var(--gold);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  color: var(--maroon);
  letter-spacing: .04em;
}

/* Temple history chronology */
.timeline { position: relative; padding-left: 2.25rem; }
.timeline::before {
  content: ''; position: absolute; left: .5rem; top: .35rem; bottom: .35rem;
  width: 2px; background: linear-gradient(var(--gold), rgba(200,169,81,.15));
}
.timeline > li { position: relative; list-style: none; padding-bottom: 2.25rem; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  content: ''; position: absolute; left: -2.03rem; top: .45rem;
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px var(--cream);
}
.timeline .era {
  display: block;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--maroon); margin-bottom: .3rem;
}

/* FAQ accordion */
.accordion { border-top: 1px solid rgba(0, 0, 0, .08); }
.accordion > * { border-bottom: 1px solid rgba(0, 0, 0, .08); }
.accordion button {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.15rem 0; text-align: left;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 500; color: var(--charcoal);
}
.accordion button:hover { color: var(--maroon); }

/* Gallery filter chip */
.chip {
  padding: .5rem 1.15rem;
  border: 1px solid rgba(0, 0, 0, .14);
  background: #fff;
  font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--gold); color: var(--charcoal); }
.chip[aria-pressed="true"] { background: var(--maroon); border-color: var(--maroon); color: #fff; }

/* Nav underline, shared by desktop nav links */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-link:hover, .nav-link:focus-visible { color: #fff; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s;
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[data-active="true"]::after { transform: scaleX(1); }
.nav-link[data-active="true"] { color: #fff; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}