/* ============================================
   Premiere — elementy wspólne dla obu ekranów
   ============================================ */

/* === Pasek odnośników ========================================
   Dwie równe grupy po bokach, kokardka pośrodku (Figma 422:7627). */
.topnav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: var(--wide-w);
  height: var(--nav-h);
  margin-inline: auto;
  padding: 0;
  color: var(--text-on-dark);
  background: var(--c-ink);
}

.topnav__side {
  display: flex;
  gap: 48px;
  justify-content: space-between;
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
}

.topnav__side a {
  text-decoration: none;
  opacity: .92;
  transition: opacity .2s ease;
}

.topnav__side a:hover { opacity: 1; text-decoration: underline; }

/* Kokardka rysowana maską: kolor bierze z tekstu, więc zmienia się
   razem z paletą i działa na ciemnym oraz na jasnym tle. */
.bow {
  display: block;
  background: currentColor;
  -webkit-mask: var(--bow) center / contain no-repeat;
  mask: var(--bow) center / contain no-repeat;
}

.topnav__bow { width: 74px; height: 66px; }

/* === Stopka ==================================================
   W makiecie na monitorze pas jest pusty; układ bierzemy z wersji
   na telefon (Figma 417:3267), gdzie widać imiona, datę i kokardkę. */
.site-footer {
  display: grid;
  justify-items: center;
  gap: 18px;
  min-height: var(--footer-h);
  /* Stopka jest ostatnim oddechem strony — przy 64/56 imiona siedziały
     tuż pod zaproszeniem i pas nie wyglądał na zamknięcie. Przy 96/88
     nadal było ciasno, bo nad nią kończy się zdjęcie z kopertą i oko
     nie łapie granicy. */
  padding: 128px 24px 120px;
  color: var(--text-on-dark);
  text-align: center;
  background: var(--c-ink);
}

.site-footer__names {
  font-size: var(--fs-script);
  line-height: 1;
}

.site-footer__date {
  color: var(--c-soft);
}

.site-footer__note {
  max-width: 40ch;
  color: var(--c-soft);
  font-size: var(--fs-small);
}

.site-footer__bow { width: 44px; height: 39px; }

/* === Przycisk ================================================ */
.pill {
  display: inline-block;
  padding: 14px 42px;
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--c-paper);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity .2s ease;
}

.pill:hover { opacity: .88; }

/* Wariant na całą szerokość — SUBMIT w formularzu RSVP (Figma 516:224). */
.pill--block {
  display: block;
  width: 100%;
  text-align: center;
}

/* === Pola formularza ========================================= */
.field { margin-bottom: 28px; }

.field__label {
  display: block;
  margin-bottom: 10px;
  font-size: var(--fs-small);
  letter-spacing: .04em;
}

.field__input {
  width: 100%;
  padding: 12px 16px;
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  background: rgba(233, 227, 213, .08);
  border: 1px solid rgba(233, 227, 213, .38);
  border-radius: 4px;
}

.field__input:focus {
  outline: 2px solid var(--c-paper);
  outline-offset: 2px;
}

.option-list { display: grid; gap: 10px; }

.option-pill {
  display: block;
  padding: 11px 18px;
  font-size: var(--fs-small);
  text-align: center;
  background: rgba(233, 227, 213, .1);
  border: 1px solid rgba(233, 227, 213, .3);
  border-radius: 999px;
  cursor: pointer;
}

.option-pill input { position: absolute; opacity: 0; pointer-events: none; }

.option-pill:has(input:checked) {
  color: var(--c-ink);
  background: var(--c-paper);
  border-color: var(--c-paper);
}

.option-pill:has(input:focus-visible) { outline: 2px solid var(--c-paper); outline-offset: 2px; }

.form-status {
  margin-top: 14px;
  font-size: var(--fs-small);
  text-align: center;
}

/* rsvp-form.js ustawia data-state="error" — selektor musi się zgadzać. */
.form-status[data-state="error"] { color: #f0b7ae; }