/* ==========================================================================
   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; }

/* --------------------------------------------------------------------------
   Passenger repeater

   One row per traveller: who they are, and whether they are an adult or one of
   the little ones. The rows replaced a separate party-size counter and a
   separate "any children?" question — the same two facts, asked once.
   -------------------------------------------------------------------------- */

.hk-pax {
  display: flex;
  align-items: center;
  gap: 12px;
  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;
  flex: none;
  letter-spacing: .1em;
}

/* The native arrow is drawn in the browser's own grey and sits oddly against
   the cream field, so it is replaced with one in the gold used elsewhere. */
select.hk-select {
  flex: none;
  width: 112px;
  padding: 13px 34px 13px 13px;
  border: 1px solid var(--hk-line);
  background-color: #fffdf7;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b08d54' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  font-family: var(--hk-serif);
  font-size: 16px;
  color: var(--hk-navy);
  cursor: pointer;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select.hk-select:focus { outline: none; border-color: var(--hk-gold); }

.hk-pax-del {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--hk-ink-label);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.hk-pax-del:hover { color: var(--hk-error); border-color: var(--hk-line); }
.hk-pax-del:focus-visible { outline: 2px solid var(--hk-gold); outline-offset: 2px; }

.hk-add {
  align-self: flex-start;
  margin-top: 4px;
  padding: 11px 20px;
  border: 1px dashed var(--hk-line-2);
  background: transparent;
  color: var(--hk-ink);
  font-family: var(--hk-serif);
  font-size: 15px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.hk-add:hover { background: var(--hk-cream); border-color: var(--hk-gold); }
.hk-add:focus-visible { outline: 2px solid var(--hk-gold); outline-offset: 2px; }
.hk-add span { color: var(--hk-gold-deep); margin-right: .4em; }

/* the parenthetical in the question sits below the tracked-out uppercase */
.hk-legend em {
  display: inline-block;
  font-size: .92em;
  font-style: italic;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--hk-ink-soft);
}

.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; }

/* a passenger name shares its row with the adult/child menu and the remove
   button, so it may shrink below the default min-content width of an input */
.hk-pax .hk-input { min-width: 0; }

.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; }

  /* A name, a menu and a remove button will not share 320px and stay tappable.
     The name takes its own line; the label, the adult/child menu and the
     remove button sit under it as one compact strip. */
  .hk-pax {
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eee2ca;
  }
  .hk-pax .hk-input { order: 1; flex: 1 0 100%; }
  .hk-pax-tag { order: 2; width: auto; align-self: center; }
  .hk-pax select.hk-select { order: 3; flex: 1 1 auto; width: auto; }
  .hk-pax-del { order: 4; margin-left: auto; }
  .hk-add { align-self: stretch; text-align: center; }
  .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; }
}