/* ==========================================================================
   Bermudez & Briganti Wedding — styles.css
   Palette inspired by the couple's invitation:
   soft sage green, pale yellow, warm ivory, subtle gold, dark green text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --ivory:            #FDFBF3;
  --ivory-warm:       #FAF6E7;
  --pale-yellow:      #F8F1CF;
  --pale-yellow-soft: #FCF8E4;
  --sage-soft:        #DCE6D2;
  --sage:             #A9C097;
  --sage-deep:        #7E9A6A;  /* large script headings only */
  --sage-btn:         #5D774B;  /* buttons — passes contrast with white text */
  --green-text:       #3D5232;
  --green-deep:       #2E3F26;
  --green-muted:      #5F7453;
  --gold:             #C6A64C;  /* decorative rules, hearts, borders */
  --gold-text:        #876C1E;  /* gold used for actual words, so it stays legible */
  --gold-soft:        #E4D2A0;
  --white:            #FFFFFF;

  /* Type */
  --font-script:  "Great Vibes", "Segoe Script", cursive;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Lato", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* Space & shape */
  --wrap-max:     72rem;
  --radius-sm:    0.75rem;
  --radius-md:    1.25rem;
  --radius-lg:    1.75rem;
  --radius-pill:  999px;

  --shadow-soft:  0 2px 10px rgba(61, 82, 50, 0.05),
                  0 12px 32px rgba(61, 82, 50, 0.07);
  --shadow-lift:  0 4px 14px rgba(61, 82, 50, 0.08),
                  0 18px 42px rgba(61, 82, 50, 0.10);

  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Keeps a section heading clear of the sticky bar when a nav link is used.
     script.js measures the bar and updates --header-offset, because the nav
     wraps onto a second row on narrow screens. The value here is the fallback
     used before that runs, and if JavaScript is switched off. */
  scroll-padding-top: var(--header-offset, 7rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  /* Comfortably large for older and younger guests alike. */
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  line-height: 1.75;
  color: var(--green-text);
  background-color: var(--ivory);
  background-image:
    radial-gradient(circle at 8% 4%,   rgba(248, 241, 207, 0.75) 0%, rgba(248, 241, 207, 0) 42%),
    radial-gradient(circle at 94% 12%, rgba(220, 230, 210, 0.65) 0%, rgba(220, 230, 210, 0) 38%),
    radial-gradient(circle at 4% 88%,  rgba(220, 230, 210, 0.55) 0%, rgba(220, 230, 210, 0) 36%),
    radial-gradient(circle at 96% 96%, rgba(248, 241, 207, 0.70) 0%, rgba(248, 241, 207, 0) 40%);
  background-attachment: fixed;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

/* Several components below set display on a class, which outranks the
   browser's own rule for the hidden attribute. Anything the scripts hide —
   the countdown once the day arrives, the RSVP form after it is sent, the
   count field before "Yes" is chosen — must actually disappear, so this is
   stated once, forcefully, for the whole page. */
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--green-deep);
  margin: 0;
  line-height: 1.2;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--sage-btn); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--white);
  color: var(--green-deep);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap {
  width: min(100% - 2.5rem, var(--wrap-max));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   3. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 251, 243, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(198, 166, 76, 0.22);
  transition: box-shadow 0.4s var(--ease), background-color 0.4s var(--ease);
}
.site-header.is-stuck {
  box-shadow: 0 2px 18px rgba(61, 82, 50, 0.08);
  background: rgba(253, 251, 243, 0.95);
}

.nav {
  width: min(100% - 1.5rem, var(--wrap-max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.15rem 0.35rem;
}

.nav-list a {
  display: block;
  padding: 0.6rem 0.85rem;     /* generous tap target */
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--green-muted);
  border-radius: var(--radius-pill);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.nav-list a:hover,
.nav-list a:focus-visible { color: var(--green-deep); background: var(--sage-soft); }
.nav-list a.is-active      { color: var(--green-deep); background: var(--pale-yellow-soft); }

.lang-slot:empty { display: none; }
/* Without JavaScript the toggle has nothing to switch, so it is not offered. */
.no-js .lang-slot { display: none; }

/* ---- EN | ES ----
   Two small buttons either side of a hairline, sitting quietly beside the
   menu. The chosen language is filled in, so it reads at a glance. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.15rem;
  border: 1px solid rgba(198, 166, 76, 0.45);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.55);
}

.lang-btn {
  min-width: 2.9rem;
  min-height: 2.4rem;          /* comfortable to tap */
  padding: 0.35rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--green-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.lang-btn:hover { color: var(--green-deep); background: var(--pale-yellow-soft); }
.lang-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.lang-btn.is-active {
  color: var(--white);
  background: var(--sage-btn);
  box-shadow: 0 2px 8px rgba(93, 119, 75, 0.28);
}

.lang-sep {
  color: var(--gold-soft);
  font-size: 0.9rem;
  line-height: 1;
  user-select: none;
}

/* --------------------------------------------------------------------------
   4. Shared pieces: dividers, buttons, cards, section headings
   -------------------------------------------------------------------------- */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 1.5rem auto;
  max-width: 20rem;
  color: var(--gold);
}
.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-soft), transparent);
}
.divider-heart { font-size: 0.85rem; line-height: 1; color: var(--gold); }
.divider--sm     { max-width: 12rem; margin: 1.1rem auto; }
.divider--footer { max-width: 16rem; margin: 0 auto 1.6rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;             /* easy to tap */
  padding: 0.85rem 2.1rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.btn-primary {
  background: var(--sage-btn);
  border-color: var(--sage-btn);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(93, 119, 75, 0.30);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--green-text);
  border-color: var(--green-text);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(61, 82, 50, 0.26);
}
.btn-primary:active { transform: translateY(0); }

/* Disabled, but "RSVP Coming Soon" is a message guests need to read, so it
   keeps full text contrast and leans on the muted fill to read as inactive. */
.btn-disabled {
  background: var(--sage-soft);
  border-color: rgba(126, 154, 106, 0.45);
  color: var(--green-text);
  cursor: not-allowed;
  box-shadow: none;
}

.btn-icon { width: 1.25rem; height: 1.25rem; flex: none; }

.card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(198, 166, 76, 0.28);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.6rem, 1.1rem + 2vw, 2.75rem);
  transition: box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}
.card:hover { box-shadow: var(--shadow-lift); }
.card--narrow { max-width: 44rem; margin-inline: auto; text-align: center; }

.section {
  padding: clamp(3.5rem, 2.4rem + 4vw, 6rem) 0;
}
.section--tint {
  background: linear-gradient(180deg,
              rgba(250, 246, 231, 0) 0%,
              rgba(250, 246, 231, 0.85) 18%,
              rgba(250, 246, 231, 0.85) 82%,
              rgba(250, 246, 231, 0) 100%);
}

.section-title {
  font-size: clamp(2rem, 1.5rem + 2.2vw, 2.9rem);
  text-align: center;
  letter-spacing: 0.02em;
}
.section-title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 0.9rem auto 0;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.section-sub {
  margin-top: 0.9rem;
  margin-bottom: 2.4rem;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  color: var(--green-muted);
}

.amp {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
}

/* Cormorant Garamond defaults to old-style figures, where 0, 1 and 2 sit
   below the cap height and can be mistaken for letters. Dates, times and the
   street address are the details guests most need to read correctly, so those
   use full-height lining figures instead. */
.hero-date,
.footer-date,
.countdown-note,
.count-num,
.detail-value,
.detail-note,
.section-sub,
.dress-name {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.75rem, 1.8rem + 4vw, 5rem) 0 clamp(3rem, 2rem + 4vw, 5.5rem);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(248, 241, 207, 0.85) 0%, rgba(248, 241, 207, 0) 60%);
}

.leaf-corner {
  position: absolute;
  width: clamp(8rem, 18vw, 15rem);
  color: var(--sage);
  opacity: 0.5;
  pointer-events: none;
}
.leaf-corner--tl { top: -1rem; left: -1.5rem; }
.leaf-corner--br { bottom: -1rem; right: -1.5rem; transform: rotate(180deg); }

.hero-inner {
  position: relative;
  z-index: 1;
  width: min(100% - 2.5rem, 52rem);
  margin-inline: auto;
  text-align: center;
}

.hero-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  color: var(--green-muted);
  letter-spacing: 0.04em;
}

.hero-names {
  font-family: var(--font-script);
  font-weight: 400;
  /* Great Vibes is a tall script — it needs breathing room. */
  font-size: clamp(3.1rem, 1.7rem + 7.4vw, 6.25rem);
  line-height: 1.18;
  color: var(--sage-deep);
  margin-top: 0.35rem;
  padding-bottom: 0.12em;
}
.hero-names .amp { color: var(--gold); }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.4rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--green-deep);
}

.hero-date {
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* Couple photograph — framed the way it appears on the invitation. */
.hero-photo {
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0;
  max-width: 40rem;
  padding: 0.55rem;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  transform: rotate(-0.5deg);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.hero-photo:hover { transform: rotate(0deg) translateY(-4px); }
.hero-photo picture { display: block; }
.hero-photo img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-md) - 0.4rem);
}

.hero-invite {
  margin: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem) auto 0;
  max-width: 34rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  font-style: italic;
  line-height: 1.65;
  color: var(--green-text);
}

.hero-inner .btn { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   6. Countdown
   -------------------------------------------------------------------------- */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.6rem, 0.35rem + 1.1vw, 1.4rem);
  max-width: 46rem;
  margin-inline: auto;
}

.count-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: clamp(1rem, 0.7rem + 1.4vw, 1.85rem) 0.5rem;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(198, 166, 76, 0.3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.count-num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.1rem + 3.6vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  color: var(--green-deep);
  font-variant-numeric: tabular-nums;
}

.count-label {
  font-size: clamp(0.7rem, 0.62rem + 0.3vw, 0.85rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-muted);
}

.countdown-day {
  font-family: var(--font-script);
  font-size: clamp(2.2rem, 1.3rem + 4.4vw, 4rem);
  line-height: 1.25;
  text-align: center;
  color: var(--sage-deep);
  padding: 1rem 0 0.4rem;
}

.countdown-note {
  margin-top: 1.6rem;
  text-align: center;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--green-muted);
}

/* --------------------------------------------------------------------------
   7. Wedding details + directions
   -------------------------------------------------------------------------- */
.details-card { max-width: 52rem; margin-inline: auto; }

.detail-list {
  display: grid;
  gap: 1.35rem;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid rgba(198, 166, 76, 0.2);
}
.detail-item:last-child { border-bottom: 0; padding-bottom: 0; }

.detail-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--sage-soft);
  color: var(--sage-deep);
}
.detail-icon svg { width: 1.5rem; height: 1.5rem; }

.detail-text { display: flex; flex-direction: column; gap: 0.15rem; }

.detail-label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-muted);
}
.detail-value {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  line-height: 1.35;
  color: var(--green-deep);
}
.detail-note { font-size: 1rem; color: var(--green-text); }

.directions {
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(198, 166, 76, 0.2);
  text-align: center;
}
.directions-note {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  color: var(--green-muted);
}

/* --------------------------------------------------------------------------
   8. Dress code
   -------------------------------------------------------------------------- */
.dress-name {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);
  letter-spacing: 0.03em;
  color: var(--green-deep);
}
.dress-desc {
  max-width: 32rem;
  margin-inline: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  line-height: 1.65;
  color: var(--green-text);
}

/* --------------------------------------------------------------------------
   9. RSVP
   -------------------------------------------------------------------------- */
.rsvp-deadline {
  display: inline-block;
  margin-bottom: 1.4rem;
  padding: 0.55rem 1.4rem;
  background: var(--pale-yellow-soft);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  font-variant-numeric: lining-nums;
  color: var(--green-deep);
}

.rsvp-instruction {
  max-width: 30rem;
  margin: 0 auto 2.1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  color: var(--green-muted);
}

.rsvp-form {
  display: grid;
  gap: 1.4rem;
  max-width: 26rem;
  margin-inline: auto;
  text-align: left;
}

.field { display: flex; flex-direction: column; gap: 0.4rem; }
/* A class-based display rule outranks the browser's own [hidden] styling, so
   the hidden attribute has to be honoured explicitly or the count field would
   still be on screen before anyone answers "Yes". */
.field[hidden] { display: none; }

/* A fieldset needs resetting before it will behave like the other fields. */
.field--choice { margin: 0; padding: 0; border: 0; min-width: 0; }

.field-label {
  display: block;
  padding: 0;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-muted);
}
.field-required { color: var(--gold-text); margin-left: 0.15rem; }

.field-input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.65rem 0.95rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--green-text);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(126, 154, 106, 0.45);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field-input:hover { border-color: var(--sage-btn); }
.field-input:focus {
  outline: none;
  border-color: var(--sage-btn);
  box-shadow: 0 0 0 3px rgba(126, 154, 106, 0.25);
}
.field-input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.field-hint {
  font-size: 0.9rem;
  color: var(--green-muted);
}

/* ---- Yes / No ---- */
.choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.15rem;
}

.choice { position: relative; display: block; }

/* The real radio stays in the page for keyboard and screen-reader support;
   it is simply drawn by the label instead of by the browser. */
.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice-face {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.65rem 1rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-text);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(126, 154, 106, 0.45);
  border-radius: var(--radius-pill);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.choice:hover .choice-face { border-color: var(--sage-btn); }

.choice input:focus-visible + .choice-face {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.choice input:checked + .choice-face {
  background: var(--sage-btn);
  border-color: var(--sage-btn);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(93, 119, 75, 0.28);
}
/* A tick makes the chosen answer obvious without relying on colour alone. */
.choice input:checked + .choice-face::before {
  content: "\2713";
  margin-right: 0.5rem;
  font-size: 0.95em;
}

/* ---- the count field appearing and disappearing ---- */
.field--count { overflow: hidden; }
.field--count:not([hidden]) { animation: field-in 0.35s var(--ease) both; }

@keyframes field-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.rsvp-submit { width: 100%; margin-top: 0.4rem; }
.rsvp-submit.is-sending { cursor: progress; }
.rsvp-submit:disabled {
  background: var(--sage);
  border-color: var(--sage);
  box-shadow: none;
  transform: none;
}

/* ---- messages ---- */
.rsvp-error {
  margin-top: 0.2rem;
  padding: 0.85rem 1rem;
  background: #FBF0E4;
  border: 1px solid #D9A96B;
  border-radius: var(--radius-sm);
  color: #7A4A16;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}
.rsvp-error[hidden] { display: none; }

.rsvp-success { text-align: center; }
.rsvp-success[hidden] { display: none; }
.rsvp-success:focus { outline: none; }

.rsvp-success-mark {
  display: block;
  font-size: 1.75rem;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.rsvp-success-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  line-height: 1.35;
  color: var(--green-deep);
}
.rsvp-success-note {
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--green-muted);
}

/* Deliberately understated — it is only needed by the rare guest replying
   for a second household. */
.btn-quiet {
  margin-top: 1.6rem;
  min-height: 2.75rem;
  padding: 0.55rem 1.4rem;
  font-size: 0.95rem;
  background: transparent;
  border-color: rgba(126, 154, 106, 0.5);
  color: var(--green-text);
}
.btn-quiet:hover,
.btn-quiet:focus-visible {
  background: var(--sage-soft);
  border-color: var(--sage-btn);
}

/* ---- spam trap ----
   Out of sight, out of the tab order, and never read aloud. */
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   10. Gifts
   -------------------------------------------------------------------------- */
/* Sits between Wedding Details and Dress Code, so it gets a slightly warmer
   card and a thin gold edge to feel like a considered part of the invitation
   rather than an afterthought — noticeable, but never insistent. */
.gifts-card {
  background:
    linear-gradient(180deg, rgba(252, 248, 228, 0.72) 0%, rgba(255, 255, 255, 0.82) 55%);
  border-color: rgba(198, 166, 76, 0.42);
}
.gifts-card::before {
  content: "";
  display: block;
  width: 4.5rem;
  height: 2px;
  margin: 0 auto 1.4rem;
  border-radius: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.gifts-mark {
  display: block;
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 1rem;
}
.gifts-text {
  max-width: 36rem;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  line-height: 1.7;
  color: var(--green-text);
}

.gifts-toggle { margin-top: 2rem; }

/* Softer than the primary buttons — this is an invitation, not an ask. */
.btn-outline {
  background: transparent;
  border-color: var(--sage-btn);
  color: var(--sage-btn);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--sage-btn);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(93, 119, 75, 0.24);
}
.btn-outline.is-open {
  background: var(--sage-soft);
  border-color: var(--sage-btn);
  color: var(--green-deep);
}

.zelle-panel {
  max-width: 30rem;
  margin: 1.6rem auto 0;
  padding: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  background: var(--pale-yellow-soft);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-md);
  animation: zelle-in 0.45s var(--ease) both;
}
.zelle-panel[hidden] { display: none; }

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

.zelle-label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-muted);
}

/* An address a guest may need to read or type, so it uses the plain body face
   with full-height figures rather than the decorative serif. */
.zelle-email {
  margin: 0.4rem 0 1.3rem;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.25rem);
  font-variant-numeric: lining-nums;
  letter-spacing: 0.01em;
  word-break: break-word;
}
.zelle-email a {
  color: var(--green-deep);
  text-decoration-color: var(--gold);
  text-underline-offset: 0.22em;
}

.btn-copy {
  min-height: 3rem;
  padding: 0.7rem 1.5rem;
  font-size: 1rem;
  background: var(--white);
  border-color: rgba(126, 154, 106, 0.45);
  color: var(--green-deep);
}
.btn-copy:hover,
.btn-copy:focus-visible {
  background: var(--sage-soft);
  border-color: var(--sage-btn);
  transform: translateY(-2px);
}

.zelle-status {
  min-height: 1.6rem;      /* reserve the space so nothing jumps */
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--sage-btn);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.zelle-status.is-shown { opacity: 1; }

.zelle-note {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(198, 166, 76, 0.3);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--green-text);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding: clamp(3rem, 2.2rem + 3vw, 4.75rem) 0 clamp(2.5rem, 2rem + 2vw, 3.5rem);
  text-align: center;
  background: linear-gradient(180deg, rgba(220, 230, 210, 0) 0%, rgba(220, 230, 210, 0.5) 100%);
  border-top: 1px solid rgba(198, 166, 76, 0.22);
}
.footer-names {
  font-family: var(--font-script);
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 3.6rem);
  line-height: 1.25;
  color: var(--sage-deep);
  padding-bottom: 0.1em;
}
.footer-date {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.footer-closing {
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--green-muted);
}

.footer-top { margin-top: 1.8rem; }
.back-to-top {
  display: inline-block;
  padding: 0.55rem 1.3rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--green-muted);
  border: 1px solid rgba(198, 166, 76, 0.45);
  border-radius: var(--radius-pill);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.back-to-top:hover,
.back-to-top:focus-visible {
  color: var(--green-deep);
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--gold);
}

/* --------------------------------------------------------------------------
   12. Subtle entrance animation
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* If JavaScript never runs, nothing should stay invisible. */
.no-js .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   13. Responsive adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 40rem) {
  html { scroll-padding-top: var(--header-offset, 8.5rem); }

  /* On a phone the menu becomes one line that slides sideways rather than
     wrapping. Spanish labels are long — "Confirmar Asistencia", "Código de
     Vestimenta" — and left to wrap they pushed the sticky bar to roughly half
     the height of the screen. One scrolling row keeps it slim in both
     languages, and the language buttons stay put at the end. */
  .nav {
    flex-wrap: nowrap;
    gap: 0.4rem;
    padding: 0.3rem 0;
  }

  .nav-list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* the row is short; no bar needed */
    scroll-snap-type: x proximity;
  }
  .nav-list::-webkit-scrollbar { display: none; }

  .nav-list li { flex: none; scroll-snap-align: start; }
  .nav-list a {
    padding: 0.5rem 0.6rem;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  .lang-slot { flex: none; }
  .lang-btn {
    min-width: 2.5rem;
    min-height: 2.75rem;   /* a full-size tap target on a phone */
    padding: 0.35rem 0.5rem;
  }

  /* Two rows of two reads better than four cramped columns on a phone. */
  .countdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .leaf-corner { opacity: 0.35; width: 7.5rem; }

  .hero-photo { transform: none; }
  .hero-photo:hover { transform: translateY(-3px); }

  .detail-item { gap: 0.9rem; }
  .detail-icon { width: 2.6rem; height: 2.6rem; }
  .detail-icon svg { width: 1.3rem; height: 1.3rem; }

  .btn { width: 100%; padding-inline: 1.25rem; }

  /* These two are sized by their own container, not the full card width. */
  .choice-face { width: 100%; }
  .btn-quiet { width: auto; }
}

@media (min-width: 40.0625rem) and (max-width: 60rem) {
  .hero-photo { max-width: 30rem; }
}

/* --------------------------------------------------------------------------
   14. Accessibility & print
   -------------------------------------------------------------------------- */
@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;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .leaf-corner { display: none; }
  body { background: var(--white); color: #000; }
  .card { box-shadow: none; border-color: #ccc; }
}