/* ==========================================================================
   Hanna & Kenny — RSVP strip, form, boarding pass, footer
   Loaded after invitation.css on index.php.

   Every custom property is --hk- prefixed: the RSVP palette uses the same
   names as the invitation (navy, gold, paper…) with different values, so
   unprefixed ones would silently repaint the whole page.
   This file also declares no element-level resets — invitation.css owns those.
   ========================================================================== */

:root {
  --hk-navy: #14243f;
  --hk-navy-hover: #1d3358;
  --hk-gold: #b08d54;
  --hk-gold-deep: #a9853f;
  --hk-gold-pale: #d8c39c;
  --hk-gold-text: #f0dfbe;
  --hk-paper: #fbf6ec;
  --hk-paper-2: #f6efe1;
  --hk-cream: #f3ead9;
  --hk-line: #ddcaa9;
  --hk-line-2: #d9c6a5;
  --hk-ink: #6d5b41;
  --hk-ink-soft: #8a7659;
  --hk-ink-label: #a08a68;
  --hk-error: #b04f3f;

  --hk-serif: 'Cormorant Garamond', serif;
  --hk-script: 'Parisienne', cursive;
  --hk-mono: 'Courier Prime', monospace;
}

/* --------------------------------------------------------------------------
   Header strip
   -------------------------------------------------------------------------- */

.hk-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--hk-navy);
  color: #d8bd8b;
  font-family: var(--hk-serif);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  text-align: center;
}

.hk-strip i { color: #6d7f9e; font-style: normal; }

/* --------------------------------------------------------------------------
   RSVP block
   -------------------------------------------------------------------------- */

.hk-rsvp {
  background: var(--hk-navy);
  padding: clamp(52px, 8vh, 74px) 22px clamp(60px, 9vh, 84px);
}

.hk-rsvp-inner { max-width: 720px; margin: 0 auto; }

.hk-rsvp-head { text-align: center; margin-bottom: 40px; }

.hk-rsvp-kicker {
  font-family: var(--hk-serif);
  font-size: 12px;
  letter-spacing: .44em;
  text-transform: uppercase;
  color: #8fa2c1;
}

.hk-rsvp-title {
  margin: 12px 0 0;
  font-family: var(--hk-serif);
  font-weight: 500;
  font-size: clamp(32px, 7vw, 44px);
  letter-spacing: .02em;
  color: #f2e2c0;
}

.hk-rsvp-lede {
  margin: 14px auto 0;
  max-width: 500px;
  font-family: var(--hk-serif);
  font-size: 19px;
  line-height: 1.6;
  color: #cdd8e8;
  text-wrap: pretty;
}

.hk-rsvp-deadline {
  font-family: var(--hk-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: #7d8fae;
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.hk-card {
  background: var(--hk-paper);
  border: 1px solid var(--hk-line-2);
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  gap: 34px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .35);
  text-align: left;
}

.hk-card input,
.hk-card textarea,
.hk-card button { font-family: inherit; }

.hk-card input:focus,
.hk-card textarea:focus { outline: none; border-color: var(--hk-gold); }

.hk-card ::placeholder { color: #b9a98f; }

.hk-field { display: flex; flex-direction: column; gap: 14px; }

/* Cormorant Garamond is a light-stemmed serif: at 12px/400 with .32em tracking
   the question labels read as faint dotted lines rather than text. Bigger, a
   heavier cut, and tighter tracking — the uppercase formality is kept. */
.hk-legend {
  font-family: var(--hk-serif);
  font-size: clamp(13px, .3vw + 12.2px, 15px);
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--hk-navy);
  padding: 0;
  border: 0;
}

/* Gold sets the number apart from the question without shouting. --hk-gold-deep
   only reaches 3.2:1 on the card, so this is a darker cut of it at 5.5:1. */
.hk-legend .hk-num {
  color: #7d5f2e;
  margin-right: .55em;
  letter-spacing: .1em;
}

.hk-note {
  font-family: var(--hk-serif);
  font-size: 16px;
  font-style: italic;
  color: var(--hk-ink-soft);
}

/* The rows below are display:flex, which beats the UA stylesheet's
   [hidden] { display: none } — without this the hidden name fields and the
   child-count box stay on screen and the party-size stepper looks inert.
   The noscript overrides are more specific, so they still win. */
.hk-form [hidden] { display: none !important; }

/* Branch visibility. Mirrored server-side (the form carries is-yes / is-no on
   first paint) so the right questions are showing before JS runs. */
.hk-form:not(.is-yes) .hk-yes-only { display: none; }
.hk-form:not(.is-no) .hk-no-only { display: none; }
.hk-form:not(.is-yes):not(.is-no) .hk-any-only { display: none; }

/* choice buttons built from real radios so the form works without JS */
.hk-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hk-choice--inline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.hk-choice input { position: absolute; opacity: 0; pointer-events: none; }

.hk-choice label {
  padding: 18px 12px;
  border: 1px solid var(--hk-line);
  background: #fffdf7;
  color: var(--hk-ink);
  font-family: var(--hk-serif);
  font-size: 17px;
  letter-spacing: .06em;
  cursor: pointer;
  text-align: center;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.hk-choice--inline label { padding: 13px 24px; font-size: 16px; }

.hk-choice input:checked + label {
  background: var(--hk-navy);
  color: var(--hk-gold-text);
  border-color: var(--hk-navy);
}

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

.hk-stepper { display: flex; align-items: center; gap: 18px; }

.hk-step-btn {
  width: 46px;
  height: 46px;
  border: 1px solid var(--hk-line-2);
  background: var(--hk-cream);
  color: var(--hk-navy);
  font-size: 20px;
  cursor: pointer;
}

input.hk-step-value {
  font-family: var(--hk-serif);
  font-size: 34px;
  color: var(--hk-navy);
  min-width: 44px;
  width: 60px;
  text-align: center;
  border: 0;
  background: transparent;
  padding: 0;
  -moz-appearance: textfield;
}

input.hk-step-value::-webkit-outer-spin-button,
input.hk-step-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hk-pax {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.hk-pax-tag {
  font-family: var(--hk-mono);
  font-size: 11px;
  /* --hk-ink-label only reaches 3:1 on the input background; this clears 4.5:1 */
  color: #7d6a4e;
  width: 62px;
  letter-spacing: .1em;
}

.hk-input,
.hk-textarea {
  flex: 1;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--hk-line);
  background: #fffdf7;
  font-family: var(--hk-serif);
  font-size: 18px;
  color: var(--hk-navy);
}

.hk-textarea { resize: vertical; }

.hk-kids-count { display: flex; align-items: center; gap: 12px; }
.hk-kids-count span { font-family: var(--hk-serif); font-size: 16px; color: var(--hk-ink); }
.hk-kids-count input { width: 84px; flex: none; }

.hk-submit-wrap { display: flex; flex-direction: column; gap: 12px; align-items: center; }

.hk-submit {
  width: 100%;
  padding: 19px;
  background: var(--hk-navy);
  color: var(--hk-gold-text);
  border: none;
  font-family: var(--hk-serif);
  font-size: 14px;
  letter-spacing: .34em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease;
}

.hk-submit:hover { background: var(--hk-navy-hover); }
.hk-submit[disabled] { opacity: .6; cursor: default; }

.hk-error {
  font-family: var(--hk-serif);
  font-size: 15px;
  color: var(--hk-error);
  min-height: 20px;
  text-align: center;
}

/* honeypot — off-screen, never focusable by a real guest */
.hk-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Boarding pass
   -------------------------------------------------------------------------- */

.hk-pass {
  background: var(--hk-paper);
  border: 1px solid var(--hk-line-2);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .35);
  text-align: left;
}

.hk-pass-inner { display: flex; align-items: stretch; flex-wrap: wrap; }

.hk-pass-main { flex: 1 1 340px; padding: 34px 30px; }

.hk-pass-kicker {
  font-family: var(--hk-serif);
  font-size: 11px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--hk-ink-label);
}

.hk-pass-title {
  font-family: var(--hk-script);
  font-size: 40px;
  color: var(--hk-gold-deep);
  line-height: 1.15;
  margin: 6px 0 18px;
}

.hk-pass-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}

.hk-pass-grid .wide { grid-column: span 2; }

.hk-pass-label {
  font-family: var(--hk-serif);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--hk-navy);
}

.hk-pass-value {
  font-family: var(--hk-serif);
  font-size: 19px;
  color: #2a2a2a;
  margin-top: 4px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.hk-pass-note {
  font-family: var(--hk-serif);
  font-size: 17px;
  color: var(--hk-ink);
  margin: 22px 0 0;
}

.hk-pass-actions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.hk-btn {
  padding: 14px 24px;
  background: var(--hk-navy);
  color: var(--hk-gold-text);
  font-family: var(--hk-serif);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
}

.hk-btn:hover { background: var(--hk-navy-hover); color: var(--hk-gold-text); }

.hk-btn--ghost {
  background: transparent;
  border: 1px solid var(--hk-line-2);
  color: var(--hk-ink);
}

.hk-btn--ghost:hover { background: transparent; color: var(--hk-navy); border-color: var(--hk-gold); }

.hk-pass-stub {
  width: 168px;
  border-left: 2px dashed var(--hk-line-2);
  background: var(--hk-paper-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 12px;
}

.hk-pass-stamp {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 2px solid #35507f;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #35507f;
  font-family: var(--hk-serif);
  font-size: 12px;
  letter-spacing: .12em;
  text-align: center;
  line-height: 1.3;
  transform: rotate(-8deg);
}

.hk-pass-seat {
  font-family: var(--hk-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--hk-ink-soft);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.hk-foot {
  max-width: 1040px;
  margin: 0 auto;
  padding: 66px 22px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 30px;
  text-align: left;
}

.hk-foot-label {
  font-family: var(--hk-serif);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--hk-ink-label);
}

.hk-foot-value {
  font-family: var(--hk-serif);
  font-size: 19px;
  color: var(--hk-navy);
  line-height: 1.5;
  margin-top: 6px;
}

.hk-mrz {
  background: var(--hk-navy);
  padding: 26px 22px;
  overflow: hidden;
}

.hk-mrz div {
  max-width: 1040px;
  margin: 0 auto;
  font-family: var(--hk-mono);
  font-size: 13px;
  letter-spacing: .16em;
  color: #7d8fae;
  line-height: 1.8;
  white-space: nowrap;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* at full tracking the strip wraps to three lines and reads as a slab */
  .hk-strip { gap: 10px; padding: 12px 16px; font-size: 10px; letter-spacing: .18em; }
  .hk-card { padding: 28px 20px; gap: 28px; }
  .hk-choice { grid-template-columns: 1fr; }
  .hk-pass-main { padding: 26px 22px; }
  .hk-pass-grid { grid-template-columns: 1fr; }
  .hk-pass-grid .wide { grid-column: span 1; }
  .hk-pass-stub {
    width: 100%;
    border-left: 0;
    border-top: 2px dashed var(--hk-line-2);
    flex-direction: row;
    gap: 22px;
  }
  .hk-mrz div { font-size: 10px; letter-spacing: .1em; }
}