/* default.css is linked separately by index.php (avoids @import cache issues) */

/* Тема Ринат и Зайнаб: коричневая палитра поверх default.css */

/* Reliability fix: scroll-triggered fade-in (IntersectionObserver) proved
   unreliable in real browsers (content stayed invisible). Show content
   immediately, no animation dependency. */
html body .main-invitation [data-animate] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

:root {
  --paper: #f4f1e8;
  --ink: #2f2420;
  --accent: #a68279;
  --accent-dark: #4c2f27;
  --olive-deep: #4c2f27;
  --olive-mid: #a68279;
  --cream: #f6f2e7;
  --line-light: rgba(246, 242, 231, 0.75);
  --line-dark: rgba(47, 36, 32, 0.4);
}

/* Elegant serif everywhere, matching the reference design (overrides default.css's
   blocky New-YorkerC "final override" rule, which needs matching specificity to beat) */
body,
body *,
html body .intro-screen *,
html body .main-invitation * {
  font-family: 'Cormorant Garamond', 'FoglihtenNo06_076', 'Bodoni MT', serif !important;
}

h1,
h2,
.intro-title,
.farewell-text,
html body .main-invitation h1,
html body .main-invitation h2,
html body .intro-screen .intro-title {
  font-family: 'Cormorant Garamond', 'Bodoni MT', serif !important;
  font-weight: 600;
  letter-spacing: 0.03em;
}

html body .main-invitation .hero-main-names,
html body .main-invitation .script {
  font-family: 'Felidae', 'Cormorant Garamond', 'Brush Script MT', cursive !important;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Single continuous full-width page (sections stack edge-to-edge, no card/gutter treatment) */
body {
  background: var(--paper);
}

.main-invitation .panel.hero-main {
  padding-top: clamp(3.4rem, 9vw, 4.2rem);
}

/* Intro / envelope screen */
.intro-screen {
  background-image: none;
  background-color: var(--olive-deep);
}

.intro-screen::before {
  content: none;
}

.intro-content {
  color: var(--cream);
}

.intro-title,
.intro-hint {
  color: var(--cream);
}

.intro-seal-button img {
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.35));
}

/* Short landscape viewports (rotated phones): the intro screen must fit
   without forcing a scroll to find the open button. */
@media (orientation: landscape) and (max-height: 500px) {
  .intro-screen {
    min-height: 100svh;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  .intro-title {
    font-size: clamp(1.1rem, 4vw, 1.6rem);
    margin-bottom: 0.3rem;
  }

  .intro-seal-button img {
    width: min(180px, 40vh, 60vw);
  }

  .intro-hint {
    font-size: clamp(0.85rem, 2.6vw, 1.1rem);
    margin-top: 0.3rem;
  }
}

/* Hero panel */
.hero,
.hero-main {
  background-image: none;
  background-color: var(--olive-deep);
}

.hero.hero-main {
  position: relative;
  overflow: hidden;
}

.hero.hero-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(70px, 20vw, 110px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  clip-path: polygon(0 0, 50% 62%, 100% 0);
  pointer-events: none;
}

.hero-main .content {
  color: var(--cream);
}

.hero.hero-main h1,
.hero-main-names {
  color: var(--cream);
}

.hero-photo img {
  border-color: rgba(246, 242, 231, 0.4);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.audio-player-button {
  background: rgba(246, 242, 231, 0.14);
  border-color: rgba(246, 242, 231, 0.35);
  color: var(--cream);
}

.audio-player-toggle {
  color: var(--cream);
}

.audio-player-button:hover {
  background: rgba(246, 242, 231, 0.26);
}

.audio-player-progress {
  background: rgba(246, 242, 231, 0.22);
}

.audio-player-progress-fill {
  background: linear-gradient(90deg, rgba(246, 242, 231, 0.9), rgba(246, 242, 231, 0.6));
}

/* Moment panel */
.moment {
  background-image: none;
  background-color: var(--cream);
}

.moment .content {
  color: var(--ink);
}

.moment .divider {
  background: var(--line-dark);
}

/* Schedule / calendar */
.schedule {
  background: var(--paper);
  color: var(--ink);
}

.calendar {
  border-color: rgba(76, 47, 39,0.28);
  background: rgba(255, 255, 255, 0.5);
  width: min(600px, 100%);
}

.calendar-month {
  font-size: clamp(1rem, 2.6vw, 1.15rem);
}

.weekday,
.day,
.empty {
  font-size: clamp(1.05rem, 3.4vw, 1.55rem);
}

.weekday {
  font-size: clamp(0.75rem, 2vw, 0.92rem);
}

.day {
  font-weight: 600;
}

.day.target {
  background: var(--olive-mid);
  box-shadow: 0 8px 18px rgba(166, 130, 121,0.35);
  font-size: clamp(1.15rem, 3.7vw, 1.7rem);
}

/* Phones: vw-based clamp() bottoms out too small — bump the floor directly.
   Placed after the base rules above so it wins the cascade at this width. */
@media (max-width: 600px) {
  .calendar {
    padding: 1.3rem 1rem;
  }

  .calendar-month {
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
  }

  .calendar-grid {
    gap: 0.5rem;
  }

  .weekday {
    font-size: 0.95rem;
  }

  .day,
  .empty {
    font-size: 1.5rem;
  }

  .day.target {
    font-size: 1.65rem;
  }
}

/* Countdown */
.countdown-panel {
  background: var(--olive-deep);
  color: var(--cream);
}

.countdown-panel h2 {
  color: var(--cream);
}

.countdown-item {
  border-color: rgba(246, 242, 231, 0.3);
  background: rgba(246, 242, 231, 0.08);
}

.countdown-value {
  color: var(--cream);
}

.countdown-label,
.countdown-note {
  color: rgba(246, 242, 231, 0.78);
}

/* Location */
.location {
  background: var(--paper);
  color: var(--ink);
}

.location-photo {
  border-color: rgba(76, 47, 39,0.3);
  box-shadow: 0 14px 30px rgba(47, 36, 32, 0.16);
}

.location-link {
  border-color: var(--olive-mid);
  color: var(--ink);
  background: rgba(166, 130, 121,0.1);
}

.location-link:hover {
  background: var(--olive-mid);
  color: var(--cream);
}

/* RSVP (lives inside the final .farewell section) — a proper, prominent block */
.farewell h2 {
  margin: 0;
  font-size: clamp(2.2rem, 5.6vw, 3.8rem);
  font-weight: 700;
}

.rsvp-wrap {
  width: min(480px, 100%);
  margin: clamp(1.6rem, 4vw, 2.4rem) auto 0;
  padding: clamp(2rem, 5vw, 2.8rem) clamp(1.4rem, 4vw, 2.2rem);
  border: 1px solid rgba(246, 242, 231, 0.28);
  border-radius: 28px;
  background: rgba(246, 242, 231, 0.05);
  gap: 1.1rem;
}

.rsvp-question {
  font-size: clamp(1.25rem, 3.4vw, 1.65rem);
  font-weight: 600;
  margin: 0;
}

.rsvp-options {
  gap: 1rem;
  margin-top: 0.3rem;
}

.rsvp-option,
.rsvp-change-button {
  border-color: rgba(246, 242, 231, 0.55);
  color: var(--cream);
  background: rgba(246, 242, 231, 0.06);
  min-height: 3.6rem;
  min-width: 8.5rem;
  padding: 0.8rem 2rem;
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
}

.rsvp-change-button {
  min-width: 12rem;
}

.rsvp-option:hover,
.rsvp-change-button:hover {
  background: rgba(246, 242, 231, 0.22);
}

.rsvp-hint {
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  margin-top: 0.6rem;
}

.rsvp-option:disabled {
  background: rgba(246, 242, 231, 0.06);
}

.rsvp-question {
  color: var(--cream);
}

.rsvp-hint {
  color: rgba(246, 242, 231, 0.65);
}

.confirm-note {
  color: var(--cream);
}

.confirm-note.is-ok {
  color: var(--cream);
}

.confirm-note.is-error {
  color: #e7b4a8;
}

/* Farewell */
.farewell {
  background-image: none;
  background-color: var(--olive-deep);
}

.farewell .content {
  color: var(--cream);
}

.farewell-text,
.farewell-signature {
  color: var(--cream);
}