/* The Moon — Sun & Moon page. Stock-iOS glass + Trinity aura. */

/* Full-width alternating banded sections (like the teaching pages), with a
   constrained inner column. The dark moon stage stays as the first section. */
:root { --kw-band: #0A0A0C; }
[data-theme="light"] { --kw-band: #EBEBF0; }

.moon-main { max-width: none; margin: 0; padding: 0; }
.moon-sec { padding: clamp(48px, 7vw, 84px) 0; }
.moon-sec--band { background: var(--kw-band); }
.moon-sec__inner { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.moon-sec__inner--narrow { max-width: 760px; }
.moon-sec__inner > :first-child { margin-top: 0; }
@media (max-width: 640px) { .moon-sec__inner { padding: 0 24px; } }

/* ── Hero: the moon on a night stage ─────────────────────────────────────── */
.moon-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--kw-r-ios26);
  min-height: 460px;
  margin-top: var(--kw-space-lg);
  padding: var(--kw-space-xxl) var(--kw-space-lg) var(--kw-space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* The moon viewer is a night scene — stay dark in BOTH light and dark mode
     so the moon, star field and aura always read (the iOS explorer is always
     night). Only the page chrome below flips with the theme. */
  background: radial-gradient(120% 90% at 50% 0%, #15131f 0%, #0a0910 55%, #050409 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--kw-card-shadow);
}
.moon-stage > .kw-aurora { z-index: -2; }
.moon-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.moon-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  animation: moon-twinkle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes moon-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.4); }
}

/* The moon disc + corona */
.moon-disc {
  position: relative;
  width: clamp(180px, 42vw, 300px);
  height: clamp(180px, 42vw, 300px);
  display: grid;
  place-items: center;
  animation: moon-breathe 9s ease-in-out infinite;
}
.moon-disc::before { /* corona */
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 224, 0.22) 0%, rgba(255, 245, 224, 0.06) 38%, transparent 68%);
  pointer-events: none;
}
#moon-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 26px rgba(255, 246, 230, 0.18));
}
@keyframes moon-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.012); }
}
/* Libration + idle spin are rendered in the canvas (js/moon.js), not via CSS
   transform — a CSS rotate would turn the phase shadow too. */

/* Readout under the moon */
.moon-readout { position: relative; z-index: 1; margin-top: var(--kw-space-lg); }
/* Readout sits on the always-dark night stage → light text in both themes. */
.moon-readout__phase {
  font-family: var(--kw-font-serif);
  font-size: clamp(1.6rem, 4vw, 2.125rem);
  color: #fff;
  line-height: 1.1;
}
.moon-readout__sub {
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-body-2);
  color: rgba(255, 255, 255, 0.82);
  margin-top: 0.4rem;
}
.moon-readout__date {
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-eyebrow);
  letter-spacing: var(--kw-track-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.75rem;
}

/* ── Tonight at a glance — Age · Trend · Next phase (iOS "Tonight" trio) ────── */
.moon-trio {
  position: relative;
  z-index: 1;
  margin: var(--kw-space-lg) auto 0;
  max-width: 26rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.moon-trio__stat {
  text-align: center;
  padding: 0 0.5rem;
}
.moon-trio__stat + .moon-trio__stat {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.moon-trio__label {
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-eyebrow);
  letter-spacing: var(--kw-track-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.moon-trio__value {
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-body);
  color: #fff;
  margin-top: 0.3rem;
}

/* ── Lunar-cycle scrubber ─────────────────────────────────────────────────── */
.moon-scrubber {
  margin: var(--kw-space-xl) auto 0;
  max-width: 38rem;
  text-align: center;
}
.moon-scrubber__eyebrow {
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--kw-track-eyebrow);
  text-transform: uppercase;
  color: var(--kw-label-3);
}
.moon-scrubber__label {
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-body-2);
  color: var(--kw-label-2);
  margin: 0.5rem 0 0.9rem;
}
#moon-scrub {
  width: 100%;
  accent-color: var(--kw-accent);
  cursor: pointer;
}
.moon-scrub-reset {
  margin-top: 0.75rem;
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-cta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kw-label-3);
  background: var(--kw-fill);
  border: 1px solid var(--kw-separator);
  border-radius: var(--kw-r-capsule);
  min-height: 38px;
  padding: 0 16px;
  cursor: pointer;
  transition: color var(--kw-dur-quick), border-color var(--kw-dur-quick);
}
.moon-scrub-reset:hover { color: var(--kw-label); border-color: var(--kw-label-3); }

/* ── Cards (countdowns, sun & moon) ──────────────────────────────────────── */
.moon-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kw-space-md);
  margin-top: var(--kw-space-xl);
}
@media (min-width: 640px) { .moon-cards { grid-template-columns: 1fr 1fr; } }

.moon-card {
  background: var(--kw-surface);
  border: 1px solid var(--kw-separator);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: none;
}
.moon-card__label {
  font-family: var(--kw-font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kw-label-3);
  margin: 0 0 8px;
}
.moon-card__value {
  font-family: var(--kw-font-ui);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.01em;
  color: var(--kw-label);
  margin: 0;
}

/* Sun & Moon times grid */
.sun-moon {
  margin-top: var(--kw-space-xl);
}
.sun-moon__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--kw-space-md);
}
@media (min-width: 720px) { .sun-moon__grid { grid-template-columns: repeat(3, 1fr); } }
.sm-stat {
  background: var(--kw-surface);
  border: 1px solid var(--kw-separator);
  border-radius: var(--kw-r-lg);
  padding: var(--kw-space-lg);
  text-align: center;
}
.sm-stat__label {
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--kw-track-eyebrow);
  text-transform: uppercase;
  color: var(--kw-label-3);
}
.sm-stat__value {
  font-family: var(--kw-font-serif);
  font-size: var(--kw-fs-card-large);
  color: var(--kw-label);
  margin-top: 0.4rem;
}
.sm-biblical {
  margin-top: 0.6rem;
  text-align: center;
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-small);
  color: var(--kw-label-3);
}
.sm-biblical strong { color: var(--kw-label-2); font-weight: 600; }

/* Sun arc */
.sun-arc { margin-top: var(--kw-space-md); }
.sun-arc svg { display: block; width: 100%; height: auto; }
.sun-arc__labels {
  display: flex;
  justify-content: space-between;
  margin-top: -0.4rem;
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--kw-track-eyebrow);
  text-transform: uppercase;
  color: var(--kw-label-3);
}
.sun-phase {
  text-align: center;
  font-family: var(--kw-font-serif);
  font-style: italic;
  font-size: var(--kw-fs-card);
  color: var(--kw-label-2);
  margin-top: 0.75rem;
}
.sun-daylen {
  text-align: center;
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-small);
  color: var(--kw-label-3);
  margin-top: 0.35rem;
}

/* Biblical-day strip (sunset → sunset) */
.moon-subhead {
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--kw-track-eyebrow);
  text-transform: uppercase;
  color: var(--kw-label-3);
  text-align: center;
  margin: var(--kw-space-xl) 0 var(--kw-space-md);
}
.bib-strip {
  position: relative;
  height: 16px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(90deg,
    #E66680 0%, #4D4D99 16%, #2E2E66 46%, #4D4D99 60%,
    #FF994D 74%, #66B3FF 86%, #E66680 100%);
}
.bib-strip__now {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 0;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}
.moon-align {
  text-align: center;
  font-family: var(--kw-font-serif);
  font-style: italic;
  font-size: var(--kw-fs-card);
  color: var(--kw-label-2);
  margin-top: var(--kw-space-lg);
}

.sm-hint {
  text-align: center;
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-small);
  color: var(--kw-label-3);
  max-width: 32rem;
  margin: 0 auto var(--kw-space-md);
}

.moon-locate {
  display: inline-block;
  margin: var(--kw-space-md) auto 0;
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-cta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kw-label-on-accent);
  background: var(--kw-accent);
  border: 0;
  border-radius: var(--kw-r-capsule);
  min-height: 44px;
  padding: 0 22px;
  cursor: pointer;
}
.moon-locate:hover { background: var(--kw-accent-hover); }

/* Scripture framing */
.moon-witness {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  text-align: center;
  margin: 0;
  max-width: none;
}
.moon-witness .scripture { color: var(--kw-label); margin: 0; }
@media (max-width: 720px) {
  .moon-witness { grid-template-columns: 1fr; gap: 36px; }
}

.moon-section-title {
  font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--kw-track-eyebrow);
  text-transform: uppercase;
  color: var(--kw-label-3);
  text-align: center;
  margin: var(--kw-space-xxl) 0 var(--kw-space-md);
}

@media (prefers-reduced-motion: reduce) {
  .moon-disc, .moon-libration, .moon-star { animation: none !important; }
}