/* =====================================================
   INFO OVERLAY — js/info-overlay.css
   ---------------------------------------------------
   Two cards, one container:
     1) Welcome card (#infoOverlayWelcome) — first ever visit
     2) Daily card  (#infoOverlayDaily)    — first visit each new day
   Each card is wrapped by .info-card-wrap, which also holds
   decorative arch SVGs above and below the card.
   ===================================================== */

/* ── Backdrop / positioner ────────────────────────────── */
#infoOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;             /* above splash (9999) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  /* No backdrop colour — splash doors show through */
  pointer-events: all;
}

#infoOverlay[hidden] { display: none; }

/* ── Card wrapper (top arch + card + bottom arch) ────── */
.info-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;

  width: 100%;
  max-width: 360px;
  max-height: calc(100dvh - 48px);

  /* Gentle entrance — applies to the whole stack */
  animation: info-card-in 320ms ease forwards;
}

.info-card-wrap[hidden] { display: none; }

@keyframes info-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Decorative arch SVGs ────────────────────────────── */
.info-arch {
  display: block;
  width: 50%;
  height: auto;
  flex: 0 0 auto;             /* don't squish under flex pressure */
  pointer-events: none;
  user-select: none;
}

/* ── Card container ───────────────────────────────────── */
.info-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

  width: 100%;
  max-width: 360px;
  max-height: calc(100dvh - 48px);

  /* Make the WRAPPER scrollable, not the card.
     This way the arches scroll with the content. */
  overflow-y: auto;

  animation: info-card-in 320ms ease forwards;
}

.info-card {
  background: #212121;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-inner-light), var(--shadow-inner-dark);

  border-radius: 20px;
  padding: 28px;

  display: flex;
  flex-direction: column;
  gap: 24px;

  width: 100%;
  overflow: visible;
}

/* Defensive — keep an inactive card out of layout if .info-card
   is ever toggled directly. The wrapper now owns the canonical
   hidden state. */
.info-card[hidden] { display: none; }

/* ── Title ────────────────────────────────────────────── */
.info-title {
  margin: 0;
  font-family: 'Savor', 'Montserrat', serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  color: #DEAC21;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ── Body — paragraph (Welcome) ──────────────────────── */
.info-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: #FFFFFF;
  text-align: center;
}
.info-body strong {
  font-weight: 700;
}

/* ── Body — schedule table (Daily) ───────────────────── */
.info-schedule {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
}

.info-schedule-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  /* Smooth transition when a row crosses the time threshold */
  transition: color 400ms ease, opacity 400ms ease;
}

.info-schedule-time {
  flex: 0 0 auto;
}

.info-schedule-name {
  flex: 1 1 auto;
  text-align: right;
}

/* Past events — gold dim */
.info-schedule-row.is-past {
  color: #DEAC21;
  opacity: 0.4;
}

/* ── Bottom callout (both cards) ─────────────────────── */
.info-callout {
  text-align: center;
  font-family: var(--font-body);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.info-callout-line {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.info-callout-line.is-bold {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

/* ── CTA — same as Sangha "Thank You" CTA, no SVG ────── */
.info-cta-row {
  display: flex;
  justify-content: center;
}

.info-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 50px;
  background: #BA8D42;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.12s ease;
  white-space: nowrap;
}
.info-cta:hover { opacity: 0.92; }
.info-cta:active { transform: scale(0.97); }