/* Blue ink, watercolor and the supplied floral WebP assets.
   Section widths, order, content and interactions remain in the original files. */
:root {
  --blue-900: #123f74;
  --blue-800: #194a80;
  --blue-700: #34649b;
  --blue-600: #5c7fa7;
  --blue-300: #a6c6e1;
  --blue-200: #d2e3f1;
  --blue-100: #eaf2f8;
  --blue-50: #f3f7fa;
  --blue-paper: #fdfdf9;
  --blue-line: rgba(52, 100, 155, .28);
  --blue-shadow: 0 8px 24px rgba(37, 77, 117, .07);
  /* Existing components inherit the new palette through their shared tokens. */
  --sage-900: var(--blue-900);
  --sage-800: var(--blue-800);
  --sage-700: var(--blue-700);
  --sage-600: var(--blue-600);
  --sage-300: var(--blue-300);
  --sage-200: var(--blue-200);
  --sage-100: var(--blue-100);
  --sage-50: var(--blue-50);
  --sage-paper: var(--blue-paper);
  --sage-line: var(--blue-line);
  --sage-shadow: var(--blue-shadow);
  --sage-gold: var(--blue-600);
  --red-primary: var(--blue-800);
  --red-dark: var(--blue-900);
  --red-light: var(--blue-700);
  --red-card: var(--blue-800);
  --red-card-inner: var(--blue-900);
  --border-red: var(--blue-line);
  --gold: var(--blue-600);
  --gold-light: var(--blue-200);
  --gold-dark: var(--blue-800);
  --border-gold: var(--blue-line);
  --paper-bg: var(--blue-paper);
  --paper-card: var(--blue-paper);
  --ink: var(--blue-900);
  --muted: var(--blue-600);
  --side-bg: #e8f0f5;
  --shadow-card: var(--blue-shadow);
  --theme-primary: var(--blue-800);
  --theme-text-muted: var(--blue-600);
  --theme-paper-warm: var(--blue-paper);
  --theme-border: var(--blue-line);
  --flower-sprig: url("../assets/f771603a-c20a-4a16-bec5-d0bafe6f7e77.webp");
  --flower-branch-b: url("../assets/71433b05-d276-484c-9e47-5da9dc635546.webp");
  --paper-grain: url("../assets/paper-grain.svg");
  --watercolor: url("../assets/watercolor-blue.svg");
}

body {
  color: var(--blue-900);
  background: var(--side-bg) var(--paper-grain) repeat;
}
html:has(body:not(.invite-opening):not(.invite-open)),
body:not(.invite-opening):not(.invite-open) { overflow-y: hidden; }

.app-container {
  --edge-flower-size: 240px;
  --edge-flower-outset: 210px;
  background: var(--blue-paper) var(--paper-grain) repeat;
  box-shadow: 0 0 42px rgba(36, 73, 112, .1);
}

/* Individually designed invitation cover. */
.envelope-screen {
  background: radial-gradient(ellipse at 15% 10%, #fff 0, transparent 55%),
    radial-gradient(ellipse at 90% 85%, #c2d9eb 0, transparent 50%), #e6eff6;
  padding: 20px;
}

.envelope-box { width: min(430px, 100%); }

.envelope-card {
  height: auto;
  min-height: min(620px, 88svh);
  max-height: none;
  padding: 70px 34px 56px;
  gap: 14px;
  justify-content: center;
  background: var(--paper-grain), radial-gradient(ellipse at 50% 95%, #dcebf6, transparent 65%), var(--blue-paper);
  border: 1px solid #fff;
  border-radius: 6px;
  box-shadow: 0 24px 70px rgba(33, 72, 115, .16), 0 3px 12px rgba(33, 72, 115, .08);
}

.envelope-card::before {
  inset: 22px;
  border: 1px solid #94b2d0;
  border-radius: 190px 190px 3px 3px;
  z-index: 1;
}

.envelope-card::after {
  inset: 28px;
  border: 1px solid rgba(148, 178, 208, .34);
  border-radius: 190px 190px 3px 3px;
  background: none;
}

.envelope-flower-left {
  width: 200px;
  top: 0;
  left: -12px;
  bottom: auto;
  transform: none;
  opacity: .9;
  animation: none;
}

.envelope-flower-right {
  width: 255px;
  right: -10px;
  bottom: -10px;
  top: auto;
  transform: none;
  opacity: .92;
  animation: none;
}

.envelope-kicker { color: var(--blue-800); font-size: .65rem; letter-spacing: .3em; }
.envelope-seal {
  width: 46px;
  height: 46px;
  padding: 0;
  background: radial-gradient(circle at 30% 25%, #638ab5, #255486 60%, #153f6b);
  border: 2px solid #a7c1dc;
  box-shadow: 0 5px 14px rgba(25, 74, 128, .18), inset 0 0 0 2px rgba(255,255,255,.13);
}
.envelope-seal svg { fill: #edf5fb; filter: none; }
.envelope-names { width: 100%; gap: 7px; margin: 5px auto; }
.envelope-name-line { color: var(--blue-900); font-size: clamp(2.6rem, 9vw, 3.7rem); line-height: 1.12; overflow-wrap: anywhere; }
.envelope-name-amp { color: var(--blue-600); margin: 0; font-size: 1.9rem; }
.envelope-date { color: var(--blue-800); font-size: .96rem; letter-spacing: .15em; margin-bottom: 0; }
.envelope-invite-text { color: var(--blue-700); font-size: 1.18rem; margin-bottom: 0; }
.btn-open {
  background: var(--blue-800);
  color: #fff;
  min-height: 44px;
  padding: 10px 34px;
  border: 1px solid var(--blue-800);
  font-size: 1.05rem;
  letter-spacing: .06em;
  box-shadow: 0 5px 16px rgba(25, 74, 128, .15);
}
.btn-open:hover { background: var(--blue-900); box-shadow: 0 8px 20px rgba(25, 74, 128, .22); }
.invite-opening .envelope-seal { box-shadow: 0 0 40px rgba(108, 163, 211, .65); }
.invite-opening .envelope-seal::before,
.invite-opening .envelope-seal::after { border-color: var(--blue-300); }
.envelope-seal:focus-visible,
.btn-open:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 5px; }

/* Reference-inspired hero: blue wash, large photograph, paper date below. */
#hero.hero-section {
  width: calc(100% - 24px);
  max-width: 560px;
  min-height: 0;
  max-height: none;
  margin: 12px auto 22px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible !important;
}
.hero-gold-frame { display: none; }
#hero .hero-inner-stage {
  display: flex;
  justify-content: flex-start;
  min-height: 0;
  max-height: none;
  padding: 0 0 26px;
  gap: 0;
  overflow: visible !important;
}
.hero-title-box {
  padding: 34px 28px 20px;
  background: var(--watercolor) center 22px / 112% calc(100% + 34px) no-repeat;
  z-index: 3;
}
.hero-kicker-wrap { margin: 0 0 21px; }
#hero .hero-kicker { color: var(--blue-900); font-family: var(--font-title); font-weight: 600; font-size: .74rem; letter-spacing: .29em; white-space: normal; }
.hero-kicker-leaf { display: none; }
#hero .hero-names { display: block; margin: 0; width: 100%; }
#hero .hero-name-groom {
  color: var(--blue-900);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.3rem, 9vw, 3.9rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
}
.hero-name-pair { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin: 3px 0 0; }
#hero .hero-names .amp { color: var(--blue-800); font-size: 2.7rem; margin: 0; flex: 0 0 auto; }
#hero .hero-name-bride {
  color: var(--blue-900);
  font-family: "Alex Brush", "Pattaya", cursive;
  font-size: clamp(2.8rem, 10.5vw, 4.3rem);
  line-height: 1.12;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
#hero .hero-photo-arch-wrap {
  width: 100%;
  aspect-ratio: 4 / 4.6;
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: -1px 0 0;
  padding: 0;
  overflow: visible;
}
#hero .hero-couple-photo { inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; mask-image: none; -webkit-mask-image: none; }
#hero .hero-couple-photo { clip-path: polygon(0 0,100% 0,100% 97%,96% 98%,93% 97%,89% 99%,85% 97%,82% 98%,78% 97%,74% 99%,70% 98%,66% 99%,62% 97%,59% 98%,55% 97%,51% 98%,47% 97%,43% 99%,39% 98%,35% 99%,31% 97%,28% 98%,24% 97%,20% 98%,16% 97%,12% 99%,8% 98%,4% 99%,0 97%); }
#hero .hero-couple-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; border-radius: 0; filter: none; }
#hero .hero-couple-photo::after { display: none; }
#hero .hero-leaf { animation: none; opacity: .9; z-index: 4; }
#hero .hero-leaf-tl { width: 90px; top: 2px; left: -15px; transform: none !important; }
#hero .hero-leaf-tr { width: 160px; top: auto; right: -22px; bottom: -30px; transform: none !important; }
#hero .hero-date-wrap { padding: 8px 34px 0; margin: 0; }
#hero .hero-date {
  width: 100%;
  max-width: 390px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  align-items: center;
  color: var(--blue-900);
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: .1em;
}
#hero .hero-date[hidden] { display: none; }
.hero-date-weekday,.hero-date-year { font-size: 1.03rem; line-height: 1.4; text-transform: uppercase; padding: 9px 4px; border-block: 1px solid var(--blue-300); }
.hero-date-main { display: flex; flex-direction: column; padding: 0 8px; margin: 0 12px; border-inline: 1px solid var(--blue-300); }
.hero-date-main strong { font-size: 3.5rem; line-height: .95; font-weight: 600; letter-spacing: -.03em; }
.hero-date-main small { margin-top: 4px; font-size: .76rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .1em; }
#hero .hero-invite-guest { color: var(--blue-800); padding-inline: 34px; margin: 20px 0 0; font-size: 1.2rem; }
#hero .hero-quote-box { width: calc(100% - 64px); max-width: 360px; margin: 18px auto 0; padding: 0; }
#hero .hero-quote-text { color: var(--blue-700); font-size: 1.03rem; font-style: italic; line-height: 1.45; letter-spacing: .01em; }
#hero .hero-quote-heart { display: block; color: var(--blue-700); font-size: 1.3rem; margin-top: 10px; }

/* Keep paper cards only for ceremony, receptions, countdown and timeline. */
#wedding-info .red-card,
#reception .reception-card,
#countdown .countdown-card,
#reception-bride .bride-reception-card {
  background: var(--paper-grain), radial-gradient(ellipse at 5% 100%, rgba(170, 207, 234, .18), transparent 45%), var(--blue-paper);
  border-color: rgba(71, 113, 160, .2);
  border-radius: 4px;
  box-shadow: var(--blue-shadow);
}

/* Other sections flow directly on the invitation paper. */
#couple-portraits .couple-portraits-card,
#couple-portraits .couple-portrait,
#gallery,
#venue,
#venue .map-embed-wrapper,
#dresscode .dresscode-card,
#love-story .story-banner,
#guestbook .guestbook-card,
#guestbook .wish-item,
#gift {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#guestbook .wish-item + .wish-item { border-top: 1px solid var(--blue-line); }

.block-title::after,
#couple-portraits .couple-portraits-heading::after,
#wedding-info .card-heading::after,
#gallery .section-header h2::after,
#reception .reception-header h3::after,
#venue .venue-heading::after,
#timeline .card-heading::after,
#countdown .card-heading::after,
#dresscode .card-heading::after,
#guestbook .guestbook-heading::after,
#gift .gift-heading::after {
  content: "♡" !important;
  width: 132px !important;
  background: linear-gradient(to right, var(--blue-300) 0 39%, transparent 39% 61%, var(--blue-300) 61% 100%) center / 100% 1px no-repeat !important;
  margin-top: 12px !important;
  font-family: Georgia, serif;
  font-size: .82rem !important;
  font-weight: 400;
  color: var(--blue-700) !important;
}

/* Remove all decoration except the three selected margin flowers. */
#hero .hero-leaf,
#couple-portraits .couple-portraits-card::before,
#couple-portraits .couple-portraits-card::after,
#wedding-info .red-card::before,
#wedding-info .card-flower-lotus-wrap,
#couple-portraits::after,
#wedding-info::before,
#wedding-info::after,
#gallery::before,
#gallery::after,
#reception::before,
#reception::after,
#venue::before,
#timeline::before,
#timeline::after,
#countdown::before,
#countdown::after,
#dresscode::after,
#guestbook::before,
#guestbook::after,
#gift::before,
#gift::after,
#gift .gift-flower-right { content: none !important; background: none !important; display: none !important; }

/* Preserve the hero flower at its existing position. */
#hero::after {
  content: "";
  display: block !important;
  position: absolute;
  z-index: 0;
  top: 25%;
  bottom: auto;
  left: auto;
  right: calc(0px - var(--edge-flower-outset) + var(--edge-flower-padding, 0px));
  width: var(--edge-flower-size);
  height: calc(var(--edge-flower-size) * 1.5);
  background: var(--edge-flower-art) center / contain no-repeat;
  opacity: .78;
  transform: none;
  pointer-events: none;
  mix-blend-mode: multiply;
  --edge-flower-art: var(--flower-branch-b);
  --edge-flower-padding: calc(var(--edge-flower-size) * .25);
}

#wedding-info .family-side,
#wedding-info .ceremony-time-badge,
#reception .calendar-paper,
#countdown .countdown-card .count-box {
  border-color: var(--blue-line);
  border-radius: 3px;
  background-color: rgba(255,255,255,.6);
  box-shadow: none;
}
.couple-portrait-photo-wrap { border-radius: 100px 100px 3px 3px; }
#gallery .carousel-slide { box-shadow: 0 8px 20px rgba(25,74,128,.12); }
#countdown .countdown-card::before { border-color: var(--blue-line); }
#reception .calendar-grid-days .wedding-day { color: #fff; }
#reception .btn-gold-outline { border-color: var(--blue-700); }

/* The timeline is the only redesigned interior card. */
#timeline { padding: 16px 14px 20px; }
#timeline::after { width: 100%; height: 70px; bottom: -20px; left: 0; background: var(--watercolor) center / 120% 100% no-repeat; opacity: .5; transform: none; }
#timeline .timeline-card {
  position: relative;
  min-height: 0;
  padding: 48px 28px 40px;
  border: 1px solid #7199c2;
  border-radius: 220px 220px 60px 60px;
  color: var(--blue-900);
  background: var(--paper-grain), var(--blue-paper);
  box-shadow: none;
}
#timeline .timeline-card::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: 5px;
  border: 1px solid #aac3dc;
  border-radius: inherit;
  background: none;
  pointer-events: none;
}
#timeline .timeline-card::after {
  display: none;
}
#timeline .card-heading {
  max-width: 230px;
  font-family: "Alex Brush", "Pattaya", cursive !important;
  font-size: 2.65rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.04 !important;
  margin-bottom: 26px !important;
}
#timeline .timeline-list { display: flex; flex-direction: column; gap: 15px; margin: 0 auto; padding: 0; width: 100%; max-width: 350px; }
#timeline .timeline-list::before { display: none; }
#timeline .timeline-item { display: grid; grid-template-columns: 28px 66px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 28px; padding: 0; margin: 0; }
#timeline .timeline-event-icon { width: 28px; height: 28px; color: var(--blue-800); display: block; }
#timeline .timeline-event-icon svg { width: 100%; height: 100%; }
#timeline .timeline-left { width: auto; flex: none; justify-content: flex-start; padding: 0; text-align: left; }
#timeline .timeline-time { font-family: var(--font-body); font-size: 1.03rem; font-weight: 500; color: var(--blue-800); line-height: 1.4; white-space: nowrap; }
#timeline .timeline-line-col { display: none; }
#timeline .timeline-right { width: auto; padding: 0; }
#timeline .timeline-text { font-size: 1.06rem; font-weight: 500; color: var(--blue-800); line-height: 1.4; }

/* Shared controls and dialogs inherit the same blue ink. */
.floating-music { background: var(--blue-800); border-color: #aac4dd; box-shadow: 0 5px 18px rgba(25,74,128,.22); }
.floating-music .music-inner-ring { border-color: rgba(205,225,242,.35); }
.floating-music .music-icon { color: #fff; }
.lang-trigger-btn { background: var(--blue-paper); color: var(--blue-800); border-color: var(--blue-line); box-shadow: var(--blue-shadow); }
.lang-trigger-btn:hover,.floating-lang.is-open .lang-trigger-btn { background: var(--blue-100); color: var(--blue-900); border-color: var(--blue-300); box-shadow: var(--blue-shadow); }
.lang-dropdown { background: var(--blue-paper); border-color: var(--blue-line); }
.lang-btn { color: var(--blue-700); }
.lang-btn.active { color: var(--blue-900); background: var(--blue-100); }
.lang-btn:hover { color: var(--blue-900); background: var(--blue-100); }
.modal-overlay,.wish-suggestions-modal { background: rgba(12,35,64,.6); }
.gift-modal-box { box-shadow: 0 20px 48px rgba(16,47,82,.25); }
.toast { background: var(--blue-800); color: #fff; border-color: var(--blue-300); }
.not-found-screen { background: var(--blue-50); }
.not-found-card { border-color: var(--blue-line); }
.wish-modal-close,.wish-modal-icon { color: var(--blue-800); }
.wish-modal-close:hover { background: var(--blue-100); }
#guestbook .guestbook-form .form-input::placeholder,
#guestbook .guestbook-form .form-textarea::placeholder { color: #6684a4; }
#guestbook .guestbook-form .form-input:focus,
#guestbook .guestbook-form .form-textarea:focus { box-shadow: 0 0 0 3px rgba(52,100,155,.1); }
#rsvp-modal .modal-box { background: var(--blue-paper) !important; border-color: var(--blue-line) !important; }
#rsvp-modal .modal-subtitle,#rsvp-modal p[data-i18n="rsvp_subtitle"] { color: var(--blue-600) !important; }
#rsvp-modal .modal-close,#rsvp-modal #rsvp-modal-close { background: var(--blue-100) !important; }
#rsvp-modal .rsvp-form-label,#rsvp-modal label { color: var(--blue-900) !important; }
#rsvp-modal .form-input,#rsvp-modal .rsvp-input { color: var(--blue-900) !important; border-color: var(--blue-line) !important; background: #fff !important; }
#rsvp-modal .rsvp-radio-label { border-color: var(--blue-line) !important; color: var(--blue-700) !important; background: #fff !important; }
#rsvp-modal .rsvp-radio-label:has(input:checked) { background: var(--blue-100) !important; border-color: var(--blue-700) !important; color: var(--blue-900) !important; }
#rsvp-modal .rsvp-radio-label input { accent-color: var(--blue-800); }
#rsvp-modal .rsvp-btn-submit,#rsvp-modal button[type="submit"] { background: var(--blue-800) !important; color: #fff !important; border-color: var(--blue-800) !important; box-shadow: 0 5px 16px rgba(25,74,128,.16) !important; }
#gift .gift-envelope-img,
.gift-envelope-img {
  filter: drop-shadow(0 8px 15px rgba(25,74,128,.13));
  animation: giftEnvelopeFloat 3s ease-in-out infinite !important;
  transform-origin: center bottom;
  will-change: transform;
}
#gift .gift-envelope-trigger:hover .gift-envelope-img {
  animation-play-state: paused;
  transform: translateY(-10px) scale(1.05);
  filter: drop-shadow(0 12px 20px rgba(25,74,128,.2));
}

#gift .gift-hint-text {
  animation: giftHintPulse 2.4s ease-in-out infinite;
}
@keyframes giftHintPulse {
  0%, 100% { opacity: 0.85; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

@keyframes giftEnvelopeFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-9px) rotate(-2.5deg) scale(1.03);
  }
  50% {
    transform: translateY(-14px) rotate(0deg) scale(1.05);
  }
  75% {
    transform: translateY(-7px) rotate(2.5deg) scale(1.03);
  }
}

@keyframes giftEnvelopeWiggle {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-9px) rotate(-2.5deg) scale(1.03);
  }
  50% {
    transform: translateY(-14px) rotate(0deg) scale(1.05);
  }
  75% {
    transform: translateY(-7px) rotate(2.5deg) scale(1.03);
  }
}

@media (max-width: 900px) {
  .app-container { --edge-flower-size: 220px; --edge-flower-outset: 180px; }
}

@media (max-width: 600px) {
  .app-container { --edge-flower-size: 190px; --edge-flower-outset: 125px; }
}

@media (max-width: 480px) {
  .envelope-screen { padding: 16px; }
  .envelope-card { min-height: min(570px, 88svh); padding: 58px 28px 46px; gap: 18px; }
  .envelope-flower-left { width: 160px; }
  .envelope-flower-right { width: 210px; }
  .envelope-name-line { font-size: clamp(2.5rem, 10.5vw, 3.3rem); }
  #hero.hero-section { width: calc(100% - 16px); margin-top: 8px; }
  .hero-title-box { padding: 32px 18px 15px; }
  #hero .hero-name-groom { font-size: clamp(2.1rem, 9.6vw, 3rem); }
  #hero .hero-name-bride { font-size: clamp(2.45rem, 11.5vw, 3.5rem); }
  #hero .hero-names .amp { font-size: 2.4rem; }
  #hero .hero-photo-arch-wrap { aspect-ratio: 4 / 4.8; }
  #hero .hero-date-wrap { padding: 9px 24px 0; }
  .hero-date-weekday,.hero-date-year { font-size: .88rem; }
  .hero-date-main { margin-inline: 9px; }
  .hero-date-main strong { font-size: 3.15rem; }
  #hero .hero-leaf-tr { width: 135px; right: -22px; bottom: -30px; }
  #hero .hero-quote-text { font-size: .95rem; }
  #timeline { padding: 15px 8px 20px; }
  #timeline .timeline-card { padding: 44px 19px 36px; }
  #timeline .card-heading { font-size: 2.45rem !important; max-width: 205px; }
  #timeline .timeline-item { grid-template-columns: 24px 55px minmax(0,1fr); gap: 12px; }
  #timeline .timeline-event-icon { width: 24px; height: 26px; }
  #timeline .timeline-time,#timeline .timeline-text { font-size: 1rem; }
}

@media (max-width: 360px) {
  .envelope-card { padding-inline: 24px; gap: 14px; }
  .envelope-name-line { font-size: 2.6rem; }
  .hero-name-pair { gap: 6px; }
  #hero .hero-name-bride { font-size: 2.7rem; }
  #hero .hero-date-wrap { padding-inline: 18px; }
  .hero-date-weekday,.hero-date-year { font-size: .8rem; }
  #timeline .timeline-card { padding-inline: 15px; }
  #timeline .timeline-item { gap: 9px; grid-template-columns: 23px 48px minmax(0,1fr); }
}

@media (max-height: 650px) {
  .envelope-screen { overflow-y: auto; align-items: flex-start; }
  .envelope-card { min-height: 500px; padding-block: 36px; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .envelope-seal,.btn-open .shimmer,.sage-leaf { animation: none !important; }
  .reveal-section,.reveal-block,.reveal-item,.app-container,.envelope-screen { transition-duration: .01ms !important; }
}