/* ==========================================================================
   contact.css — Hunter Huon Valley · Contact page
   Page-specific styles only. Header, footer, nav, hero shell, split, FAQ,
   buttons, bands and reveal all come from base.css + home.css. Every value
   here references tokens.css — no hex, ever.
   ========================================================================== */

/* --- Active nav state ----------------------------------------------------
   Contact is the current page. A persistent Copper hairline underline marks
   it (Copper as an accent/underline only — never a fill, never body text). */
.nav__link[aria-current="page"] {
  color: var(--color-text-on-dark);
  border-bottom-color: var(--color-accent);
}
.mobile-menu__list a[aria-current="page"] { color: var(--color-accent); }
.footer-col a[aria-current="page"] { color: var(--color-text-on-dark); }

/* --- Hero (photo-free, flat) ---------------------------------------------
   Rebuilt 2026-08-25 to match the reviews page hero. It now reuses the shared
   .hero shell (as reviews.css does) instead of its own flex box: no photo, no
   scrim, no eyebrow, just the signature Forest band with the off-white heading
   and sub sitting straight on it. min-height:0 lets the content set the height,
   which is what gives it the same compact proportions as /reviews/. The old
   Forest→Earth gradient is gone with it — Earth no longer appears on the page. */
.hero.contact-hero {
  min-height: 0;
  background: var(--c-forest);
}
.hero.contact-hero .hero__content {
  padding-block-end: var(--space-2xl);
}
.contact-hero__sub {
  color: var(--color-text-on-dark-alt);
  max-width: 52ch;
  margin-block-start: var(--space-sm);
}

/* A single soft entrance. Guarded so no-JS / reduced-motion users get the
   final state immediately (default opacity is 1, no transform). */
@media (prefers-reduced-motion: no-preference) {
  .contact-hero .hero__content > * {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
    animation: contact-hero-rise var(--dur-reveal) var(--ease-out) forwards;
  }
  .contact-hero .hero__content h1 { animation-delay: 60ms; }
  .contact-hero__sub              { animation-delay: 180ms; }
}
@keyframes contact-hero-rise {
  to { opacity: 1; transform: none; }
}

/* --- Contact details (section 2) -----------------------------------------
   Rebuilt 2026-08-25. Was a full-bleed 50/50 .split where the photo stretched
   to whatever height the copy demanded (960px on desktop, the tallest block on
   the page). It now follows the homepage .positioning pattern: a contained
   two-column grid inside the standard .section padding, copy in the wider
   column and an inset 4:5 photo in the narrower one, so the picture is a fixed
   shape rather than a full-height panel and the whole section is far shorter. */
/* Trimmed band padding, borrowed from .amenities on the homepage rather than
   the 140px .section default, since shrinking this block was half the point. */
.contact-intro.section { padding-block: var(--space-2xl); }
@media (min-width: 900px) {
  .contact-intro.section { padding-block: var(--space-3xl); }
}
.contact-intro__grid {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .contact-intro__grid { grid-template-columns: 7fr 5fr; gap: var(--space-3xl); }
}
.contact-intro__body { max-width: 60ch; }
.contact-intro h2 { margin-block-end: var(--space-lg); }
.contact-intro__media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
/* The <img> is wrapped in <picture>, which is globally height:auto, so inside
   this 4:5 box it collapses to the image's own height and overflow just clips
   the bottom, ignoring object-position. Force the wrapper to fill the box, the
   same fix `.amenities__media picture` and `.inset-split__media picture` carry. */
.contact-intro__media picture { display: block; width: 100%; height: 100%; }
/* Portrait 2:3 in a 4:5 box, so ~17% of the height goes. Anchor to the top: the
   foot of the frame is plain concrete below the hearth ledge, while the top
   carries the flue and the bushland through the window. The whisky glass and
   the full ledge survive either way, so the concrete is what to spend. */
.contact-intro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* The description list itself: plain type with air around it. No icons, no
   boxes. Each row pairs a small uppercase label with its value. */
.contact-details {
  display: grid;
  gap: var(--space-lg);
  margin-block-start: var(--space-lg);
}
.contact-details__row { display: grid; gap: var(--space-3xs); }
.contact-details dt {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-on-light-2);
}
.contact-details dd {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--color-text-on-light);
}
.contact-details address { font-style: normal; }
/* The phone uses the shared .text-link treatment, same as email and Instagram,
   so all three values match in size, colour, and underline. */

/* --- Enquiry form (section 3, flat Olive) --------------------------------
   Underlined fields: transparent background, a single off-white hairline
   under each control, Copper on focus. No boxes, no radii on fields.

   The whole section is centred in the container: at 1200px the 46rem form
   otherwise sat hard left with a wide band of empty Olive beside it. Heading,
   lead, form, and button share one centre line. Field labels stay LEFT
   aligned inside the form, since centred labels detach from their inputs. */
.enquiry__head {
  max-width: 46rem;
  margin-inline: auto;
}
.enquiry__lead {
  max-width: 52ch;
  margin-block-end: var(--space-md);
  color: var(--color-text-on-dark-alt);
}
.enquiry__lead-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-block-end: var(--space-2xl);
}

.contact-form {
  display: grid;
  gap: var(--space-lg);
  max-width: 46rem;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .contact-form { grid-template-columns: 1fr 1fr; }
  .field--full,
  .contact-form__submit { grid-column: 1 / -1; }
}

.field { display: grid; gap: var(--space-2xs); }
.field > label,
.dates__legend {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-on-dark);
}
.field__hint {
  font-size: var(--fs-small);
  color: var(--color-text-on-dark-alt);
  opacity: 0.85;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background-color: transparent;
  color: var(--color-text-on-dark);
  border: none;
  border-bottom: var(--divider-w) solid var(--border-on-dark);
  border-radius: 0;
  padding-block: var(--space-2xs);
  padding-inline: 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 7.5rem; line-height: var(--lh-body); }

/* Focus: suppress the boxed outline, thicken the underline to Copper so the
   indicator is thickness + colour, not colour alone. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-bottom-width: 2px;
  border-bottom-color: var(--color-accent);
  padding-block-end: calc(var(--space-2xs) - 1px);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--color-text-on-dark-alt); opacity: 0.6; }

/* Native invalid state (after a no-JS submit attempt) */
.field input:user-invalid,
.field textarea:user-invalid { border-bottom-color: var(--color-accent); }

/* Custom caret for the cabin select (appearance stripped) */
.select-wrap { position: relative; display: block; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: var(--space-lg);
}
.select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: 4px;
  inset-block-start: 50%;
  width: 0.5em;
  height: 0.5em;
  border-right: var(--divider-w) solid currentColor;
  border-bottom: var(--divider-w) solid currentColor;
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}
.select-wrap select option { color: var(--c-forest); }

/* Dates: two date controls under one legend */
.dates { border: none; padding: 0; margin: 0; display: grid; gap: var(--space-2xs); }
.dates__legend { padding: 0; }
.dates__grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr 1fr; }
.dates__field { display: grid; gap: var(--space-3xs); }
.dates__field label { font-size: var(--fs-small); color: var(--color-text-on-dark-alt); }
.dates input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; }

.contact-form__submit { margin-block-start: var(--space-2xs); }

/* Centre only where there is room to centre in. Below 900px the form already
   fills the container, so there is no empty band to correct, and every other
   section head on the page is left aligned there. */
@media (min-width: 900px) {
  .enquiry__head { text-align: center; }
  .enquiry__lead { margin-inline: auto; }
  .enquiry__lead-actions { justify-content: center; }
  .contact-form__submit { display: flex; justify-content: center; }
}

/* Honeypot — present for Netlify, hidden from people. */
.hp-field { display: none; }

/* --- Getting here (section 4, Sandstone band) ----------------------------
   Runs on the shared .band--light-alt, same as the Good to know FAQ; the
   Olive booking dock now sits between them, so they never touch. */
.getting-here__grid {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .getting-here__grid { grid-template-columns: 6fr 6fr; gap: var(--space-3xl); }
}
.getting-here__body h2 { margin-block: var(--space-sm) var(--space-md); }
.getting-here__body p { color: var(--color-text-on-light); }
.getting-here__body p + p { margin-block-start: var(--space-md); }

/* Inline drive-time row (· separated) */
.drive-times {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  margin-block: var(--space-lg);
  font-size: var(--fs-small);
  color: var(--color-text-on-light-2);
}
.drive-times strong {
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-on-light);
}
.drive-times .sep { color: var(--c-copper); opacity: 0.7; }

.driveway-note {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text-on-light-2);
  max-width: 52ch;
  margin-block-start: var(--space-lg);
}
.getting-here__directions { margin-block-start: var(--space-lg); }

/* Line-drawing route map. currentColor = Forest; pins pick up Copper accent. */
.contact-map {
  width: 100%;
  height: auto;
  color: var(--color-text-on-light);
  border-radius: var(--radius);
}
.contact-map .map-road {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.35;
}
.contact-map .map-route {
  fill: none;
  stroke: var(--c-copper);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 4;
}
.contact-map .map-pin { fill: var(--c-copper); }
.contact-map .map-pin--dest { fill: var(--c-forest); }
.contact-map .map-label {
  fill: currentColor;
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: var(--fw-medium);
}
.contact-map .map-label--muted { fill: var(--color-text-on-light-2); font-weight: var(--fw-regular); }

/* --- Booking dock band (section 6) --------------------------------------
   Slim Olive band carrying the Lodgify portable search bar — the target the
   "Check availability" links jump to. .booking-dock/.card come from home.css. */
.booking-band { padding-block: var(--space-2xl); }
.booking-band__head {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  margin-block-end: var(--space-lg);
}
.booking-band__head h2 { margin-block-end: var(--space-2xs); }
.booking-band__head p { color: var(--color-text-on-dark-alt); margin-inline: auto; }
.booking-band .booking-dock { margin-block-start: 0; }