/* Sunny weds Shivani — theme tokens + page chrome on top of scrub-engine.js.
   These are unlayered, so they win over the engine's @layer sw defaults. */
:root, .sw-root {
  --sw-bg: #FBF1DE;
  --sw-ink: #6B1E2B;
  --sw-ink-soft: #8a5a63;
  --sw-accent: #C89B3C;
  --sw-font-display: 'Cormorant Garamond', 'Noto Sans Devanagari', Georgia, 'Times New Roman', serif;
  --sw-font-body: 'Cormorant Garamond', 'Noto Sans Devanagari', Georgia, serif;
}

/* Wherever the pinned scroll experience isn't covering the viewport (the
   past-end gap once .sw-stage fades out, and the footer below it), show this
   still instead of flat cream — see .sw-past-end and .site-footer below. */
html, body {
  background: var(--sw-bg) url('../img/bg_baraat-vivah.png') center top / cover no-repeat fixed;
}

/* Couple's monogram (from the invite card art) replaces the engine's plain
   gradient brand mark in the topbar. */
.sw-brand__mark {
  width: 28px;
  height: 30px;
  border-radius: 0;
  background: url('../img/monogram.png') center / contain no-repeat;
  box-shadow: none;
}

/* Language toggle — sits above the engine's own topbar/nav layer (z-index 50). */
.lang-toggle {
  position: fixed;
  top: clamp(14px, 2.4vw, 26px);
  right: clamp(18px, 5vw, 64px);
  z-index: 70;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: color-mix(in srgb, #fff 60%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--sw-accent) 25%, transparent);
  border-radius: 999px;
}
.lang-toggle button {
  font: inherit;
  font-family: var(--sw-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  border: 0;
  background: transparent;
  color: var(--sw-ink-soft);
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.lang-toggle button.is-active {
  color: #fff;
  background: var(--sw-accent);
}

/* extraHTML widgets: countdown + venue map links, injected into specific
   sections' copy via scrub-engine.js's s.extraHTML hook. */
.sw-countdown {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  pointer-events: auto;
}
.sw-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 46px;
}
.sw-countdown__num {
  font-family: var(--sw-font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--sw-ink);
  line-height: 1;
}
.sw-countdown__label {
  margin-top: 3px;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-ink-soft);
}

.sw-maplink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--sw-ink);
  text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--sw-accent) 60%, transparent);
  padding-bottom: 2px;
  pointer-events: auto;
  width: fit-content;
}
.sw-maplink:hover { color: var(--sw-accent); }

/* The engine's overlay (copy/stage/route/hint/sky/scrollbar) is position:fixed
   and, on the last section, holds opacity 1 forever once you scroll past its
   segment end — it was never designed to have real page content live below
   the pinned track. Since the footer does exactly that, fade the overlay out
   once its scroll threshold is crossed (toggled by app.js). The topbar is
   deliberately left out of this list so branding/nav stay usable from the
   footer too. */
#world.sw-past-end .sw-copylayer,
#world.sw-past-end .sw-stage,
#world.sw-past-end .sw-route,
#world.sw-past-end .sw-hint,
#world.sw-past-end .sw-sky,
#world.sw-past-end .sw-scrollbar {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* Static footer, in normal page flow below the pinned scroll track — not
   part of the fixed-height copy panel, so it can never get clipped by a
   short viewport the way stacking it into .sw-copy would. */
.site-footer {
  position: relative;
  z-index: 5;
  /* Translucent wash (not opaque) over the shared body photo — see html/body
     above — so the still reads through while the blessing text stays legible. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sw-bg) 58%, transparent) 0%,
    color-mix(in srgb, var(--sw-bg) 80%, transparent) 100%);
  backdrop-filter: blur(3px);
  text-align: center;
  padding: 64px 24px 56px;
  border-top: 1px solid color-mix(in srgb, var(--sw-accent) 25%, transparent);
}
.site-footer__mark {
  height: 64px;
  width: auto;
}
.site-footer__blessing {
  margin: 14px auto 0;
  max-width: 46ch;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--sw-ink-soft);
}

@media (max-width: 860px) {
  .lang-toggle { top: clamp(10px, 3vw, 16px); right: clamp(12px, 4vw, 20px); }
  .sw-countdown { gap: 12px; }
  .sw-countdown__unit { min-width: 44px; }
}