/* ==========================================================================
   Contact page (page-contact.php)
   --------------------------------------------------------------------------
   Layout and colour only. All type — families, sizes, weights, tracking,
   bullets — comes from type.css / user-style.css. If a rule here starts
   setting font properties, it is in the wrong file. Anything that needs a
   type treatment wears a type.css class in the markup instead
   (.ww-eyebrow, .ww-display-6, .ww-label-sm).
   ========================================================================== */

.wwt-contact-page {
  background: #fffef5;
  padding-top: var(--ww-menu-header-height, 67px);
}

/* --------------------------------------------------------------------------
   Enquiry: intro + form share the first screen
   -------------------------------------------------------------------------- */

.wwt-contact-enquiry {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.wwt-contact-intro {
  padding-top: 1.5rem;
}

.wwt-contact-intro .ww-eyebrow {
  color: #966022;
  margin-bottom: 1.4rem;
}

/* 2.3rem, not 1.6rem: the context block used to sit in this gap and carry it.
   With that moved below the list the h1 butted straight onto the body copy. */
.wwt-contact-intro h1 {
  margin-bottom: 2.3rem;
}

.wwt-contact-intro > p {
  max-width: 34em;
}

/* Context block — rendered only when a ?special/?location/?package resolves.
   Was a rounded pill built for one short line; collection titles run long
   ("Get married at Cradle Mountain") and wrapped it into a lopsided blob.
   A left rule takes any number of lines without deforming, and the kind sits
   above the title rather than trying to be grammar around it.

   Sized down from the first pass, which ran to four wrapped lines and 113px
   on a narrow phone. The kind dropped to --lbl-sm and the title to --ds-7,
   which lands both on one line at any width the intro column reaches. */
.wwt-contact-context {
  border-left: 2px solid #966022;
  background: linear-gradient(90deg, rgba(150, 96, 34, 0.08), rgba(150, 96, 34, 0));
  padding: 0.7rem 1rem 0.75rem;
  margin-bottom: 1.7rem;
  max-width: 30em;
}

.wwt-contact-context .wwt-contact-context__kind {
  color: #966022;
  margin-bottom: 0.3rem;
}

.wwt-contact-context__label {
  color: #283022;
  margin: 0;
}

/* Photographic variant — the same card single-location.php uses for its
   "Available with" packages (.ww-location-package-card), at roughly a third
   the height: square corners, rgba(150,96,34,0.55) hairline, hero bled behind
   a bottom-weighted scrim, copy pinned to the bottom edge.

   The scrim is heavier than the package card's 0.08→0.68. That card stands
   14–20rem tall so the gradient has room to build; this one is ~8rem, and
   against a bright hero the cream label was not clearing 4.5:1 on the
   original ramp.

   Only applied when a hero actually resolved — an unresolved ?package= slug
   has no post behind it and keeps the flat left-rule treatment above. */
.wwt-contact-context--has-image {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(7rem, 11vw, 8.5rem);
  overflow: hidden;
  border: 1px solid rgba(150, 96, 34, 0.55);
  background: #38281b;
  padding: 1.05rem 1.15rem;
}

.wwt-contact-context__image {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  background-position: center;
  background-size: cover;
}

.wwt-contact-context__image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(36, 30, 23, 0.1) 0%,
    rgba(28, 24, 19, 0.5) 52%,
    rgba(20, 17, 14, 0.93) 100%
  );
  content: "";
}

.wwt-contact-context--has-image .wwt-contact-context__kind,
.wwt-contact-context--has-image .wwt-contact-context__label {
  position: relative;
  z-index: 1;
  color: #fffef5;
}

/* Reassurance list — Elementor icon-list markup, but the widget CSS does not
   load on this template, so the flex layout and icon sizing live here. */
.wwt-contact-reassure {
  list-style: none;
  margin: 2.2rem 0 2.4rem;
  padding: 0;
}

.wwt-contact-reassure .elementor-icon-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
}

.wwt-contact-reassure .elementor-icon-list-item + .elementor-icon-list-item {
  margin-top: 1.15rem;
}

/* Diamond bullets — same treatment as the seasonal collections lists: the
   circle SVG is hidden and a ✦ is drawn instead. */
.wwt-contact-reassure .elementor-icon-list-icon {
  display: none;
}

.wwt-contact-reassure .elementor-icon-list-item::before {
  content: "✦";
  flex-shrink: 0;
  margin-top: 0.6em;
  color: #966022;
  font-size: 10px;
  line-height: 1;
}

.wwt-contact-reassure .elementor-icon-list-text {
  min-width: 0;
}

.wwt-contact-fallback {
  border-top: 1px solid rgba(40, 48, 34, 0.18);
  padding-top: 1.6rem;
  color: #526759;
}

.wwt-contact-fallback a {
  color: #966022;
}

/* Intro frame — closes the left column, which otherwise ran out of copy
   roughly 380px before the form ended and left the first screen looking
   half-empty. 3:2 is sized to that gap, so the two columns finish level.
   Once the grid stacks it is also the first photograph on the page, ahead of
   the form rather than a screen and a half below it. */
.wwt-contact-figure {
  position: relative;
  margin: 2.4rem 0 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 4px;
  background: #283022;
}

.wwt-contact-figure img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wwt-contact-figure figcaption {
  position: absolute;
  right: 1rem;
  bottom: 0.85rem;
  color: #fffef5;
  text-shadow: 0 1px 0.7rem rgba(0, 0, 0, 0.65);
}

/* Form card — the Studio Ninja iframe lives inside */
.wwt-contact-form {
  --ww-contact-form-pad: clamp(1.1rem, 2vw, 1.6rem);
  background: #fffef5;
  border: 1px solid rgba(40, 48, 34, 0.08);
  border-radius: 4px;
  padding: var(--ww-contact-form-pad);
  box-shadow: 0 1px 2px rgba(40, 48, 34, 0.06), 0 12px 40px -18px rgba(40, 48, 34, 0.25);
}

.wwt-contact-form .ww-eyebrow {
  color: #966022;
  margin-bottom: 1.4rem;
}

/* Studio Ninja renders its own generous gutter inside the frame, and the
   frame is cross-origin so that padding cannot be reached from here. Ours was
   landing on top of it — 44.8px of card padding before theirs even began.
   Bleeding the frame back out to the card edges leaves theirs as the only
   gutter. The eyebrow above still sits on the card padding. */
.wwt-contact-form iframe {
  display: block;
  width: calc(100% + var(--ww-contact-form-pad) * 2);
  margin-inline: calc(var(--ww-contact-form-pad) * -1);
  border: 0;
}

/* --------------------------------------------------------------------------
   Mood — the emotional beat, below the form on purpose
   -------------------------------------------------------------------------- */

.wwt-contact-mood {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: flex-end;
  background: #38281b url("../../uploads/2025/02/snowy-mountains-elopement-1-1536x1024.webp") center 35% / cover no-repeat;
}

.wwt-contact-mood::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 17, 11, 0.05) 30%, rgba(10, 17, 11, 0.72) 100%);
}

.wwt-contact-mood__inner {
  position: relative;
  z-index: 1;
  color: #fffef5;
  padding: 4rem 2rem 4.5rem;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}

.wwt-contact-mood .ww-eyebrow {
  color: #d4b1a1;
  margin-bottom: 1.2rem;
}

.wwt-contact-mood h2 {
  max-width: 14em;
}

/* --------------------------------------------------------------------------
   What happens next — split band, matching the homepage/seasonal idiom.
   Was three columns on flat cream between two photographs, which made the
   whole lower page read as one pale stretch. The dark ground gives the page
   its third colour beat and the steps read better stacked than in a row.
   -------------------------------------------------------------------------- */

.wwt-contact-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background: #38281b;
}

/* Media sits right, copy left — the inverse of the footer's acknowledgement
   panel directly below, which runs image-left against #283022. Matching both
   the layout and the colour merged the two into one dark slab; alternating
   them reads as two bands. */
.wwt-contact-next__media {
  grid-column: 2;
  grid-row: 1;
}

.wwt-contact-next__content {
  grid-column: 1;
  grid-row: 1;
}

.wwt-contact-next__media {
  position: relative;
  margin: 0;
  min-height: clamp(30rem, 52vw, 44rem);
  overflow: hidden;
  background: #283022;
}

.wwt-contact-next__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.wwt-contact-next__media figcaption {
  position: absolute;
  right: clamp(1.1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  color: #fffef5;
  text-shadow: 0 1px 0.7rem rgba(0, 0, 0, 0.65);
}

.wwt-contact-next__content {
  display: grid;
  align-content: center;
  padding: clamp(3.5rem, 6vw, 6rem) clamp(1.75rem, 5vw, 4.5rem);
}

.wwt-contact-next__inner {
  max-width: 34rem;
}

.wwt-contact-next .ww-eyebrow {
  color: #e9dbc6;
  margin-bottom: 1.2rem;
}

.wwt-contact-next h2 {
  color: #fffef5;
  margin-bottom: 2.6rem;
}

.wwt-contact-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(1.6rem, 2.6vw, 2.2rem);
}

.wwt-contact-steps li {
  border-top: 1px solid rgba(255, 254, 245, 0.16);
  padding-top: clamp(1rem, 1.6vw, 1.35rem);
}

.wwt-contact-steps .ww-eyebrow {
  color: #e9dbc6;
  margin-bottom: 0.7rem;
}

.wwt-contact-steps p {
  color: rgba(255, 254, 245, 0.74);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Sticky mobile enquire
   -------------------------------------------------------------------------- */

/* Carries .site-menu__enquire in the markup, so fill, radius, padding and the
   label treatment all come from that one definition in critical-hero.css and
   the two Enquire buttons cannot drift apart. Only placement belongs here —
   nothing below may set background, radius or type. */
.wwt-contact-sticky {
  display: none;
  position: fixed;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(40, 48, 34, 0.5);
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 880px) {
  .wwt-contact-enquiry {
    grid-template-columns: 1fr;
    padding-top: 1.2rem;
    gap: 2.6rem;
  }

  .wwt-contact-intro {
    padding-top: 0.4rem;
  }

  .wwt-contact-form {
    --ww-contact-form-pad: 0.8rem;
  }

  /* Dropped on phones. The intro already runs a full screen before the form,
     and the frame added ~236px on top of that — on a task page the form
     matters more than the picture. Desktop keeps it: there it fills dead
     space beside the form rather than pushing it down. The mood band and the
     split band still carry the page's photography below the fold. */
  .wwt-contact-figure {
    display: none;
  }

  .wwt-contact-next {
    grid-template-columns: 1fr;
  }

  .wwt-contact-next__media,
  .wwt-contact-next__content {
    grid-column: auto;
    grid-row: auto;
  }

  .wwt-contact-next__media {
    display: none;
  }

  .wwt-contact-mood {
    min-height: 56vh;
  }

  /* inline-flex, not inline-block — .site-menu__enquire centres its label
     with flex alignment. */
  .wwt-contact-sticky.is-scrolled {
    display: inline-flex;
  }
}