/* Extensions of the original invitation palette and typography. */
:root { --nav-height: 76px; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--nav-height) + 24px); }
body { padding-top: var(--nav-height); }
.hero { min-height: calc(100svh - var(--nav-height)); }
.hero .marriage-line { margin-top: 1.8rem; color: var(--gold); font-size: .72rem; letter-spacing: .35em; text-transform: uppercase; }
.hero .date { margin-top: 1.4rem; }
.countdown-wrap h3 { font: 500 clamp(1.65rem, 6vw, 2.1rem)/1.3 var(--serif); color: var(--ink); }
.invite > .divider { margin-top: 3rem; }
/* The whole closing block fills one viewport, rather than the form alone.
   Its flexible gap absorbs the contact panel when there is room, and also
   gives the final anchor enough scroll range to align below the navigation. */
.closing { display: flex; flex-direction: column; min-height: calc(100svh - var(--nav-height) - 24px); margin-top: 5.5rem; }
.closing > .rsvp { width: 100%; flex-shrink: 0; margin-top: 0; padding-bottom: 2rem; }
.closing > .section-divider { flex-shrink: 0; margin-top: 1rem; }
.closing > .photo-share { width: 100%; flex-shrink: 0; margin-top: 2.5rem; padding-bottom: 2.5rem; }
.closing > footer { flex-shrink: 0; margin-top: auto; padding: 2rem 1.5rem 2.5rem; }
/* Let expanded contact details consume the fixed spacers as well as the
   flexible gap, keeping the footer in place when the content fits. */
.closing:has(.contact-details[open]) > .rsvp { padding-bottom: .5rem; }
.closing:has(.contact-details[open]) > footer { padding-top: 0; }
.locations-grid { display: grid; gap: 1.5rem; margin-top: 2rem; }
.locations-grid .loc-card { margin-top: 0; display: flex; flex-direction: column; min-width: 0; }
.locations-grid .map-frame { height: clamp(120px, 15svh, 160px); }
.locations-grid .body { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.locations-grid .map-btn { margin-top: auto; letter-spacing: .16em; }
.rsvp-status:empty { margin-top: 0; }
.contact-details { margin-top: 1.5rem; border-top: 1px solid #e5d8c1; border-bottom: 1px solid #e5d8c1; text-align: left; }
.contact-details summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .85rem .25rem; color: var(--sage); font-size: .9rem; cursor: pointer; list-style: none; }
.contact-details summary::-webkit-details-marker { display: none; }
.contact-toggle { position: relative; flex-shrink: 0; width: 14px; height: 14px; color: var(--gold); }
.contact-toggle::before, .contact-toggle::after { content: ''; position: absolute; background: currentColor; }
.contact-toggle::before { width: 14px; height: 1px; top: 6px; }
.contact-toggle::after { height: 14px; width: 1px; left: 6px; }
.contact-details[open] .contact-toggle::after { display: none; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; padding: .25rem .25rem 1.25rem; }
.contact-person { min-width: 0; font-style: normal; }
.contact-person h3 { font: 500 1.4rem var(--serif); margin-bottom: .5rem; }
.contact-person a { display: block; width: fit-content; max-width: 100%; padding: .4rem 0; color: var(--sage); font-size: .875rem; overflow-wrap: anywhere; text-underline-offset: 4px; text-decoration-color: var(--gold-light); }
.contact-person a:hover { color: var(--ink); text-decoration-color: var(--gold); }
@media (max-width: 520px) { .contact-grid { grid-template-columns: 1fr; } }
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding: env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  background: rgba(250,247,241,.97); border-bottom: 1px solid #e5d8c1;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.topbar-inner { max-width: 1280px; min-height: 75px; margin: auto; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; white-space: nowrap; font: 500 1.5rem var(--serif); }
.brand img { width: 34px; height: 34px; }
.brand em { color: var(--gold); font-weight: 400; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: 20px; margin-left: auto; }
.nav-links a { color: var(--sage); text-decoration: none; font-size: .875rem; padding: 10px 0; white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current="location"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--gold); }
.languages { display: flex; flex-shrink: 0; gap: 2px; border-left: 1px solid #e5d8c1; padding-left: 12px; }
.languages button { background: none; border: 0; border-radius: 6px; padding: 0 8px; min-height: 44px; color: var(--sage); font: 400 .8rem var(--sans); cursor: pointer; }
.languages button[aria-pressed="true"] { background: var(--cream); color: var(--ink); box-shadow: inset 0 -2px var(--gold); }
.menu-toggle { display: none; border: 1px solid #ddd2bd; border-radius: 8px; background: none; color: var(--sage); width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 18px; height: 1px; background: currentColor; position: relative; }
.menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; }
.menu-icon::before { top: -6px; } .menu-icon::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { top: 0; transform: rotate(-45deg); }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.choice input:focus-visible + label { outline: 2px solid var(--sage); outline-offset: 4px; }
fieldset.field { border: 0; min-width: 0; }
.field legend { font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--sage); margin-bottom: .55rem; }
.rsvp-status { margin-top: 1.5rem; text-align: center; color: var(--sage); font-size: 1rem; }
.rsvp-status[data-state="error"] { color: #8a3c2b; }
.rsvp-status[data-state="success"] { font: italic 1.35rem/1.6 var(--serif); }
.submit-btn:disabled { opacity: .65; cursor: default; transform: none; }
.countdown-arrived { font: italic 1.4rem var(--serif); color: var(--gold); margin-top: 2rem; }
.photo-share .photo-card { padding: clamp(2rem, 7vw, 3.5rem) clamp(1.25rem, 6vw, 3rem); border: 1px solid #e5d8c1; border-radius: 16px; background: linear-gradient(145deg, rgba(255,253,249,.96), rgba(243,237,226,.72)); }
.photo-share .photo-card h2 { margin-bottom: 1rem; }
.photo-share .photo-card > p:not(.section-label) { max-width: 520px; margin: 0 auto; color: var(--sage); font-family: var(--serif); font-size: clamp(1.05rem, 4vw, 1.25rem); }
.photo-button { display: inline-block; margin-top: 1.6rem; padding: .8rem 1.35rem; border: 1px solid var(--gold); border-radius: 8px; background: var(--sage); color: var(--white); font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; transition: transform .2s ease, background .2s ease; }
.photo-button:hover { background: var(--ink); transform: translateY(-1px); }
@media (max-width: 1100px) {
  :root { --nav-height: 68px; }
  .topbar-inner { min-height: 67px; gap: 12px; }
  .languages { margin-left: auto; }
  .menu-toggle { display: flex; flex-shrink: 0; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ivory); padding: 12px 24px 20px; border-bottom: 1px solid #e5d8c1; box-shadow: 0 12px 20px rgba(46,51,46,.06); max-height: calc(100svh - var(--nav-height)); overflow-y: auto; }
  .nav-links.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { padding: 12px; font-size: 1rem; }
}
@media (max-width: 767px) {
  /* Use one gap between sections instead of adding bottom padding to the
     next section's top margin. Keep the closing block's internal spacing. */
  main > section { padding-bottom: 0; margin-top: 3rem; }
  main > .closing { margin-top: 3rem; }
  .languages { border-left: 0; padding-left: 0; }
}
@media (max-width: 420px) {
  .topbar { padding-left: 12px; padding-right: 12px; }
  .topbar-inner { gap: 8px; }
  .brand { font-size: 1.2rem; gap: 5px; }
  .brand img { width: 26px; height: 26px; }
  .languages { padding-left: 0; }
  .languages button { padding: 0 6px; }
  .countdown { gap: 10px; }
  .countdown .unit { min-width: 0; flex: 1; }
  .countdown .lbl { letter-spacing: .1em; }
}
@media (max-width: 350px) { .brand img { display: none; } }
@media (max-height: 700px) { .hero { padding-top: 3rem; padding-bottom: 5rem; } }