/*
 * Wedding colour motif: burgundy, red wine, champagne, gold, midnight blue
 * Shared styles for home, RSVP, success, admin, and layout.
 */
:root {
  --w-midnight:       #0f1729;
  --w-midnight-deep:  #0a1120;
  --w-midnight-mid:   #1a2744;
  --w-wine:           #581c2e;
  --w-wine-deep:      #4a1525;
  --w-burgundy:       #722F37;
  --w-burgundy-light: #8B2942;
  --w-champagne:      #FAF3E8;
  --w-champagne-soft: #F5E6C8;
  --w-gold:           #C9A227;
  --w-gold-light:     #D4AF37;
  --w-gold-pale:      #E6C88A;
  --w-text:           #2d1818;
  --w-text-muted:     #581c2e;

  --w-shadow-soft:    0 8px 32px rgba(15, 23, 41, 0.08);
  --w-shadow-card:    0 12px 40px rgba(15, 23, 41, 0.12);
  --w-border-gold:    rgba(212, 175, 55, 0.22);
  --w-border-light:   rgba(212, 175, 55, 0.12);
  --w-focus-ring:     0 0 0 3px rgba(212, 175, 55, 0.45);
}

/* ── Section typography ──────────────────────────────────────────── */
.section-label {
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--w-burgundy);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.section-heading {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  color: var(--w-midnight);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.accent-rule {
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--w-gold), var(--w-gold-light), transparent);
  margin: 0 auto;
}

.section-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 1rem auto 0;
}

.section-ornament span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(15, 23, 41, 0.15);
}

/* ── Countdown ───────────────────────────────────────────────────── */
.wedding-countdown__celebration {
  color: var(--w-gold-light);
  font-size: 1rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  margin: 0;
}

.wedding-countdown--hero {
  margin: 0.85rem 0 1.75rem;
}

.wedding-countdown__hero-days {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  color: #fff;
  line-height: 1.2;
  margin: 0 0 0.35rem;
}

.wedding-countdown__hero-days strong {
  color: var(--w-gold-light);
  font-weight: 400;
}

.wedding-countdown__hero-sub {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.65);
  font-family: 'DM Sans', sans-serif;
  margin: 0;
}

.wedding-countdown--full {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.wedding-countdown__block {
  text-align: center;
}

.wedding-countdown__num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 2.4rem;
  color: #fff;
  line-height: 1;
  min-width: 50px;
}

.wedding-countdown__label {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.55);
  font-family: 'DM Sans', sans-serif;
  margin-top: 0.2rem;
}

.wedding-countdown__sep {
  color: rgba(212, 175, 55, 0.3);
  font-size: 1.6rem;
  font-family: 'Cormorant Garamond', serif;
  margin-top: 0.3rem;
}

/* ── Navigation active state ─────────────────────────────────────── */
.nav-links a.is-active,
#nav-drawer a[data-nav-target].is-active {
  color: var(--w-gold-light) !important;
}

.nav-links a.is-active::after {
  right: 0;
}

/* ── RSVP form & interactive focus ───────────────────────────────── */
.rsvp-input:focus-visible,
.rsvp-submit:focus-visible,
.hero-cta:focus-visible,
.rsvp-link-big:focus-visible,
.map-open-btn:focus-visible,
.nav-rsvp:focus-visible,
.nav-burger:focus-visible,
.success-home-btn:focus-visible,
.attend-label:focus-within .attend-card {
  outline: none;
  box-shadow: var(--w-focus-ring);
}

.attend-label:focus-within .attend-card {
  border-color: var(--w-gold-light);
}

.nav-links a:focus-visible,
#nav-drawer a:focus-visible,
.nav-logo:focus-visible {
  outline: 2px solid var(--w-gold-light);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Colour motif palette ────────────────────────────────────────── */
.motif-palette {
  margin-top: 1.75rem;
  padding: 1.35rem 1.5rem 1.25rem;
  background: rgba(15, 23, 41, 0.42);
  border: 1px solid var(--w-border-gold);
  border-radius: 1rem;
  backdrop-filter: blur(6px);
}

.motif-palette-heading {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--w-gold-light);
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  margin-bottom: 1.1rem;
}

.motif-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.35rem;
}

.motif-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  min-width: 4.5rem;
}

.motif-circle {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

.motif-circle.is-light {
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(114, 47, 55, 0.08);
}

.motif-name {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}

/* ── Shared RSVP form controls ───────────────────────────────────── */
.rsvp-input {
  width: 100%;
  border: 1.5px solid var(--w-gold-pale);
  border-radius: 0.75rem;
  background: #fff;
  padding: 0.85rem 1.1rem;
  font-size: 0.875rem;
  color: var(--w-text);
  outline: none;
  font-family: 'DM Sans', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.rsvp-input::placeholder {
  color: rgba(114, 47, 55, 0.4);
}

.rsvp-input:focus {
  border-color: var(--w-gold);
}

.attend-card {
  border: 1.5px solid var(--w-gold-pale);
  border-radius: 0.875rem;
  background: #fff;
  padding: 1rem 0.75rem;
  text-align: center;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}

.attend-label {
  position: relative;
  cursor: pointer;
}

.attend-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.rsvp-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--w-burgundy), var(--w-wine));
  color: #fff;
  border: none;
  border-radius: 0.875rem;
  padding: 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 4px 20px rgba(114, 47, 55, 0.3);
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
}

.rsvp-submit:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ── Page transitions (layout) ───────────────────────────────────── */
#page-wrap { width: 100%; transform-style: preserve-3d; }

@keyframes pageFoldOut {
  from { opacity: 1; transform: perspective(1400px) translateX(0) rotateY(0) scale(1); transform-origin: left center; }
  to { opacity: 0; transform: perspective(1400px) translateX(-18%) rotateY(-22deg) scale(0.93); transform-origin: left center; }
}

@keyframes pageFoldIn {
  from { opacity: 0; transform: perspective(1400px) translateX(10%) rotateY(18deg) scale(0.95); transform-origin: right center; }
  to { opacity: 1; transform: perspective(1400px) translateX(0) rotateY(0) scale(1); transform-origin: right center; }
}

#page-wrap.is-exiting {
  animation: pageFoldOut 0.42s cubic-bezier(0.4, 0, 0.6, 1) both;
  pointer-events: none;
  overflow: hidden;
}

#page-wrap.is-entering {
  animation: pageFoldIn 0.48s cubic-bezier(0.2, 0, 0.2, 1) both;
}

/* ── Motion & accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ticker-track { animation: none !important; }
  .scroll-cue { animation: none !important; }
  #page-wrap.is-exiting,
  #page-wrap.is-entering { animation: none !important; }
  .fade-up, .slide-r, .slide-l, .form-stagger { animation: none !important; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */