/* ===== Shared site styles (loaded on every page) ===== */
html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #0D0D0D; }
.font-display { font-family: 'Fraunces', serif; }
h1, h2, h3 { letter-spacing: -0.03em; }
p.lead { line-height: 1.75; }

/* Grain / noise texture overlay */
.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* Static nav/footer fallback inside the #site-nav / #site-footer mounts. It
   puts the internal link graph and the church's address in the served HTML for
   crawlers and no-JS users. site.js overwrites the mounts on load; hiding it
   under .js stops it flashing before that happens. */
.js .static-chrome { display: none; }

/* Scroll reveal. The hidden state is scoped to .js (set by theme.js before
   first paint) so that without JavaScript every heading and section renders
   fully visible rather than stranded at opacity: 0. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.js .reveal.in { opacity: 1; transform: translateY(0); }

@keyframes floatcue { 0%,100% { transform: translateY(0); opacity: 0.9; } 50% { transform: translateY(8px); opacity: 0.4; } }
.scrollcue { animation: floatcue 2.2s ease-in-out infinite; }

/* Events grid: with an odd number of cards the last one would sit stranded in
   the left column, so centre it across both. Written as CSS instead of classes
   toggled from script, which the Tailwind CDN would not always generate.
   data-odd is set by the grid script in events.html. */
@media (min-width: 768px) {
  #events-grid[data-odd="true"] > article:last-child { grid-column: span 2 / span 2; justify-self: center; width: calc(50% - 0.75rem); }
}
@media (min-width: 1024px) {
  #events-grid[data-odd="true"] > article:last-child { width: calc(50% - 1rem); }
}

/* ===== Primary CTA glow + shimmer sweep =====
   Targets only gold action buttons (a/button.shadow-gold). Secondary white/outline
   buttons have no .shadow-gold and are intentionally left subdued. */
@keyframes btn-glow {
  0%, 100% { box-shadow: 0 4px 14px -4px rgba(245,197,24,0.45), 0 10px 30px -8px rgba(245,197,24,0.40); }
  50%      { box-shadow: 0 6px 18px -3px rgba(245,197,24,0.75), 0 14px 40px -6px rgba(245,197,24,0.65); }
}
@keyframes btn-shimmer {
  0%       { transform: translateX(-160%) skewX(-22deg); }
  22%      { transform: translateX(160%)  skewX(-22deg); }
  100%     { transform: translateX(160%)  skewX(-22deg); }
}

a.shadow-gold:not([disabled]),
button.shadow-gold:not([disabled]) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: btn-glow 3s ease-in-out infinite;
}

a.shadow-gold:not([disabled])::before,
button.shadow-gold:not([disabled])::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: translateX(-160%) skewX(-22deg);
  animation: btn-shimmer 3.6s ease-in-out infinite;
}

/* Brighten the glow on interaction (existing hover lift is untouched). */
a.shadow-gold:not([disabled]):hover,
a.shadow-gold:not([disabled]):focus-visible,
button.shadow-gold:not([disabled]):hover,
button.shadow-gold:not([disabled]):focus-visible {
  box-shadow: 0 8px 22px -3px rgba(245,197,24,0.85), 0 16px 44px -6px rgba(245,197,24,0.70);
}

@media (prefers-reduced-motion: reduce) {
  a.shadow-gold:not([disabled]),
  button.shadow-gold:not([disabled]) {
    animation: none;
    box-shadow: 0 6px 18px -3px rgba(245,197,24,0.65), 0 12px 34px -6px rgba(245,197,24,0.50);
  }
  a.shadow-gold:not([disabled])::before,
  button.shadow-gold:not([disabled])::before {
    display: none;
  }
}

a, button { -webkit-tap-highlight-color: transparent; }
.link-underline { background-image: linear-gradient(#F5C518,#F5C518); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.35s cubic-bezier(0.16,1,0.3,1); }
.link-underline:hover { background-size: 100% 2px; }

/* Active nav link (set per page via data-page) — stays gold regardless of nav scroll state. */
.nav-active { color: #F5C518 !important; }
.nav-active.link-underline { background-size: 100% 2px !important; }