/* ==========================================================================
   Contact popup overlay  (src/overlays/contact.html · js/contact.js)
   Figma "Contact Pop Up" (1920×1154): card 1499×800 at (209,218), radius 21,
   3px inside stroke, fill #262222 → #111111 and stroke #312e2e (34%) → #fff,
   both top → bottom. Heading 80px green at (292,304), paragraph at (292,781),
   form column x=948 (659 wide: 321 + 17 + 321), labels 24px, fields 18px over
   1px underlines, "Book Now" pill 172×36 at (948,919), close circle at (1638,275).
   Everything is scoped to .contact*. The page behind is faded by js/contact.js
   (GSAP on #smooth-wrapper / .site-header / .side-tab), never display:none.
   States: .contact[hidden] (closed) · .contact.is-open (open, transitions run)
           .contact__field.is-invalid (error) · .contact__card.is-sent (success)
           .contact__form[aria-busy="true"] (sending: pill aria-disabled, status "Sending…")
   ========================================================================== */

.contact {
  --contact-error: #ff7a7a;                 /* the palette has no red; a soft one that sits on the dark card */
  --contact-placeholder: rgba(255, 255, 255, .56);
  --contact-muted: rgba(255, 255, 255, .72);   /* neutral status ("Sending…"): ≥ 7:1 on the card, as booking's --bk-muted */
  position: fixed;
  inset: 0;
  z-index: 200;                             /* above the header (100) and the side tab (90) */
  display: flex;
  flex-direction: column;
  /* The card is centred in the padding box: 106 top / 24 bottom puts its centre 41px below the
     viewport centre, so at 1920×1154 it sits at y=218 like the mock. Scrolls if the card is taller. */
  padding: 106px var(--gutter) 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: rgba(13, 13, 13, .35);
  opacity: 0;
  transition: opacity .45s ease;
}
.contact[hidden] { display: none; }
.contact.is-open { opacity: 1; }

.contact__backdrop {
  position: fixed;
  inset: 0;
  cursor: default;
}

/* ---- Card ---------------------------------------------------------------- */
.contact__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1499px;
  margin: auto;                             /* centred when it fits, scrolls from the top when it does not */
  padding: 82px 101px 57px 83px;            /* first label y=300, text x=292, form right edge 1607, bottom 1018 */
  border: 3px solid transparent;
  border-radius: var(--radius-card);
  /* fill on the padding box, the gradient stroke on the border box (Figma: 3px INSIDE stroke) */
  background:
    linear-gradient(180deg, #262222 0%, #111111 100%) padding-box,
    linear-gradient(180deg, #312e2e 34%, #ffffff 100%) border-box;
  color: var(--fg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 659px);
  column-gap: 60px;                         /* 292 + 596 + 60 = 948 */
  align-items: stretch;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}
.contact.is-open .contact__card {
  opacity: 1;
  transform: none;
}

/* ---- Close (26px green circle + X, hover = green fill, black X) ---------- */
.contact__close {
  position: absolute;
  top: 57px;                                /* 275 − 218 */
  right: 44px;                              /* 1708 − 1664 */
  z-index: 2;
  width: 26px;
  height: 26px;
  color: var(--accent);
}
.contact__close::before {                   /* bigger tap target, same drawing */
  content: "";
  position: absolute;
  inset: -12px;
}
.contact__close svg {
  display: block;
  width: 26px;
  height: 26px;
  overflow: visible;
}
.contact__close circle,
.contact__close path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transition: fill .25s ease, stroke .25s ease;
}
.contact__close:hover circle,
.contact__close:focus-visible circle { fill: var(--accent); }
.contact__close:hover path,
.contact__close:focus-visible path { stroke: var(--black); }

/* ---- Intro column: heading at the top, paragraph aligned to the form's bottom */
.contact__intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.contact__title {
  max-width: 496px;
  margin-top: 4px;                          /* text box y=304 vs the first label at 300 */
  color: var(--accent);
}
.contact__lede {
  max-width: 368px;
  margin-top: 48px;
  font-size: 24px;
  line-height: 1.24;
  white-space: pre-line;                    /* the copy carries its own line breaks (Figma text) */
}

/* ---- Form ------------------------------------------------------------------ */
.contact__form { min-width: 0; }

.contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 17px;                         /* 948 + 321 + 17 = 1286 */
}
.contact__row--full { grid-template-columns: 1fr; }
.contact__row + .contact__row { margin-top: 40px; }   /* underline y=384 → next label y=424 */

.contact__field {
  position: relative;
  min-width: 0;
}
.contact__label {
  display: block;
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 1.24;
  color: var(--fg);
}
.contact__req { color: var(--accent); }

.contact__input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 21px 0 10px;                     /* label bottom 330 → text 351–373 → underline at 384 */
  border: 0;
  border-bottom: 1px solid var(--fg);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.24;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 1px 0 transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.contact__input::placeholder {
  color: var(--contact-placeholder);
  opacity: 1;
}
.contact__input:focus {
  outline: 0;
}
.contact__input:focus-visible {
  outline: 0;                               /* the underline is the focus indicator on these box-less fields */
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 var(--accent);
}
/* Chrome / Safari autofill would paint a pale box over the dark card */
.contact__input:-webkit-autofill,
.contact__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg);
  -webkit-box-shadow: 0 0 0 1000px #1c1919 inset;
  transition: background-color 9999s ease-out;
}

/* Selects: same underline, the 14×7 white chevron at the right end of the line */
.contact__select {
  padding-right: 28px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='8' viewBox='0 0 15 8' fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Cpath d='M.5.5l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 top 30px;    /* chevron 726–733 under a label ending at 696 */
  background-size: 15px 8px;
}
.contact__select:required:invalid { color: var(--contact-placeholder); }   /* "Select an option" reads as a placeholder */
.contact__select option {
  color: var(--fg);
  background: #1c1919;                      /* the dropdown list inherits the transparent select on Windows / Android */
}

/* Error state: red underline + message tucked into the 40px row gap (no reflow) */
.contact__error {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3;
  color: var(--contact-error);
}
.contact__field.is-invalid .contact__error { display: block; }
.contact__field.is-invalid .contact__input {
  border-bottom-color: var(--contact-error);
  box-shadow: 0 1px 0 var(--contact-error);
}
.contact__field.is-invalid .contact__input:focus-visible {   /* focus still shows on a flagged field; the red message keeps the error */
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 var(--accent);
}
.contact__field.is-invalid .contact__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='8' viewBox='0 0 15 8' fill='none' stroke='%23ff7a7a' stroke-width='1.2'%3E%3Cpath d='M.5.5l7 7 7-7'/%3E%3C/svg%3E");
}

/* ---- "Book Now →" pill (172×36, 2px green stroke; hover = green fill + black text; subtle pulse) */
.contact__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 45px;                         /* underline 874 → pill 919 */
}
.contact__pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 172px;
  height: 36px;
  padding: 0 12px 0 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 0 rgba(99, 249, 162, .35);   /* outward pulse only; the outline is .btn--wipe::after */
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 0.98;
  text-transform: capitalize;
  white-space: nowrap;
  animation: contact-pulse 2.6s ease-in-out infinite;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.contact__arrow {
  flex: 0 0 auto;
  width: 28px;
  height: 12px;
  color: var(--accent);
  transition: color .25s ease;
}
.contact__arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact__pill:hover,
.contact__pill:focus-visible {
  color: var(--black);
  animation-play-state: paused;
}
/* Hover: green fill wipes in from the left, black label. Uses .btn--wipe. */
.contact__pill { --wipe-fill: var(--accent); --wipe-edge: var(--accent); --wipe-txt: var(--black); }
.contact__pill:hover .contact__arrow,
.contact__pill:focus-visible .contact__arrow { color: var(--black); }
.contact__pill:hover .contact__arrow,
.contact__pill:focus-visible .contact__arrow { color: var(--black); }
.contact__pill:active { transform: scale(.97); }
@keyframes contact-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 0 rgba(99, 249, 162, .35); }
  55%      { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 8px rgba(99, 249, 162, 0); }
}
/* Sending (js/contact.js: form aria-busy, pill aria-disabled — it keeps focus): dimmed, no wipe, no pulse, no press */
.contact__form[aria-busy="true"] .contact__pill {
  opacity: .6;
  cursor: default;
  animation: none;
}
.contact__form[aria-busy="true"] .contact__pill::before { clip-path: inset(0 100% 0 0 round var(--radius-pill)); }
.contact__form[aria-busy="true"] .contact__pill:hover,
.contact__form[aria-busy="true"] .contact__pill:focus-visible { color: var(--fg); }
.contact__form[aria-busy="true"] .contact__pill:hover .contact__arrow,
.contact__form[aria-busy="true"] .contact__pill:focus-visible .contact__arrow { color: var(--accent); }
.contact__form[aria-busy="true"] .contact__pill:active { transform: none; }

.contact__status {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3;
  color: var(--contact-error);
}
.contact__status:empty { display: none; }
.contact__form[aria-busy="true"] .contact__status { color: var(--contact-muted); }   /* "Sending…" is not an error */

/* ---- Success state: overlays the card's inner area; the intro + form stay in the layout (hidden) so
   the card keeps its size and the popup does not jump. */
.contact__success {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  padding: 82px 101px 57px 83px;
  border-radius: inherit;
}
.contact__success[hidden] { display: none; }
.contact__success-title {
  max-width: 980px;
  color: var(--accent);
  outline: 0;
}
.contact__card.is-sent .contact__intro,
.contact__card.is-sent .contact__form { visibility: hidden; }

/* ---- Forced colors (Windows High Contrast): the underline's colour + box-shadow focus is dropped ---- */
@media (forced-colors: active) {
  .contact__input:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* ---- Reduced motion: instant states, no transforms ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .contact,
  .contact__card { transition: none; }
  .contact__card { transform: none; }
  .contact__pill { animation: none; }
}

/* ---- Short viewports (laptops): tighter rhythm so the 800px card fits ------ */
@media (max-height: 1000px) and (min-width: 641px) {
  .contact { padding-top: 72px; }   /* req #10: more clearance between the fixed header and the form top */
  .contact__card { padding-top: 56px; padding-bottom: 44px; }
  .contact__close { top: 32px; right: 32px; }
  .contact__row + .contact__row { margin-top: 30px; }
  .contact__actions { margin-top: 36px; }
  .contact__success { padding-top: 56px; padding-bottom: 44px; }
}

/* ---- Tablet / small desktop: one column, intro above the form -------------- */
@media (max-width: 1100px) {
  .contact { padding-top: 72px; }   /* req #10: match the header clearance on tablet/small-desktop too */
  .contact__card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
    padding: 56px 48px 48px;
  }
  .contact__close { top: 24px; right: 24px; }
  .contact__intro { justify-content: flex-start; }
  .contact__title { margin-top: 0; }
  .contact__lede { margin-top: 32px; }
  .contact__success { padding: 56px 48px 48px; }
}

/* ---- Mobile: full-screen scrollable sheet, single-column fields ------------- */
@media (max-width: 640px) {
  .contact {
    padding: 0;
    background: var(--bg);
  }
  .contact__card {
    max-width: none;
    min-height: 100%;
    margin: 0;
    padding: 84px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, #1c1919 0%, var(--bg) 60%);
    row-gap: 40px;
    transform: none;                        /* fade only: a translated card would carry the fixed close button with it */
  }
  .contact__close {
    position: fixed;                        /* stays put while the sheet scrolls (.is-open clears the card transform) */
    top: 24px;
    right: 20px;
    z-index: 3;
  }
  .contact__title { max-width: none; }
  .contact__lede {
    margin-top: 24px;
    font-size: 20px;
  }
  .contact__row {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .contact__row + .contact__row { margin-top: 28px; }
  .contact__label { font-size: 20px; }
  .contact__input {
    padding: 14px 0 8px;
    font-size: 18px;                        /* ≥ 16px so iOS does not zoom the field */
  }
  .contact__select { background-position: right 0 top 22px; }
  .contact__error { margin-top: 4px; font-size: 14px; }
  .contact__actions { margin-top: 36px; }
  .contact__pill { min-width: 160px; }
  .contact__success {
    position: relative;
    inset: auto;
    min-height: calc(100vh - 124px);
    padding: 0;
  }
  .contact__card.is-sent .contact__intro,
  .contact__card.is-sent .contact__form { display: none; }
}

/* While the popup is open the header stays fully visible (js/contact.js leaves it out of the
   page fade) but loses its hairline + glass tint, so only the nav items read over the dark page. */
html.contact-open .site-header,
html.contact-open .site-header.is-stuck {
  border-bottom-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: border-color .3s ease, background-color .3s ease;
}