/*
 * Contact Us (page-contact-us.php)
 * Section styles for template-parts/contactus/*. Loaded after style.css, which
 * owns the tokens, base, buttons, header and footer.
 *
 * Lengths are the Figma values converted to the theme's fluid scale
 * (px / 1920 * 100 = vw), so the page tracks the 1920px design canvas.
 *
 * Inner measures inside .container--wide (1686px of content):
 *   hero              — 1584px (168px page margins)
 *   contact cards     — 1602px (159px page margins)
 *   enquiry form      — 1368px (276px page margins)
 *
 * The form fields live in the Contact Form 7 form, so the .wpcf7 rules below
 * are scoped to this page only — the homepage form has its own set in
 * front-page.css.
 */

/* ==========================================================================
   Shared to this page
   ========================================================================== */
.contactus-eyebrow {
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.283;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.contactus-eyebrow--ruled {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, calc(0.57 * var(--vw)), 0.6875rem);
}
.contactus-eyebrow__rule {
  flex: 0 0 auto;
  width: clamp(34px, calc(3.23 * var(--vw)), 62px);
  height: 2px;
  background: var(--c-orange);
}
.contactus-hero .accent,
.contactus-form .accent {
  color: var(--c-orange);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.contactus-hero {
  background: var(--c-white);
  padding-block: clamp(3rem, calc(9.3229 * var(--vw)), 11.1875rem) /* 179 */
    clamp(3rem, calc(9.2708 * var(--vw)), 11.125rem); /* 178 */
}
.contactus-hero__inner {
  max-width: var(--measure-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.contactus-hero__title {
  margin-top: clamp(1.25rem, calc(2.34 * var(--vw)), 2.8125rem);
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.283;
  color: var(--c-charcoal);
}
.contactus-hero__body {
  max-width: 93.5%;
  margin-top: clamp(1.25rem, calc(2.14 * var(--vw)), 2.5625rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-charcoal);
}
/* 494 wide, offset 190 into the 792px column — as drawn */
.contactus-hero__art {
  --hero-art-w: 494;
}

/* ==========================================================================
   Who to contact
   ========================================================================== */
.contactus-directory {
  background: var(--c-ice);
  padding-block: clamp(2.75rem, calc(6.88 * var(--vw)), 8.256rem);
}
.contactus-directory__grid {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: clamp(0.75rem, calc(0.89 * var(--vw)), 1.0625rem);
  row-gap: clamp(1.5rem, calc(2.92 * var(--vw)), 3.5rem);
}
/* Three to a row; the two left over centre themselves on the second row */
.contactus-card {
  flex: 0 1 calc((100% - 2 * clamp(0.75rem, calc(0.89 * var(--vw)), 1.0625rem)) / 3);
  min-height: clamp(220px, calc(16.2 * var(--vw)), 311px);
  padding: clamp(1.75rem, calc(2.81 * var(--vw)), 3.375rem) clamp(1.25rem, calc(1.72 * var(--vw)), 2.0625rem);
  background: var(--c-white);
  border: 1px solid var(--c-orange);
  border-radius: min(20px, calc(1.0417 * var(--vw-inset)));
  /* Reveal target too — see .savings-card in front-page.css. */
  transition:
    var(--reveal-transition),
    transform var(--motion) ease,
    box-shadow var(--motion) ease;
}
.contactus-card:hover {
  transform: translateY(calc(var(--lift) * -1));
  box-shadow: 0 calc(var(--lift) * 2) calc(var(--lift) * 4) rgba(20, 42, 56, 0.13);
}
.contactus-card__label {
  margin: 0;
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.283;
  text-transform: uppercase;
  color: var(--c-blue);
}
.contactus-card__lines {
  margin-top: clamp(0.75rem, calc(1.09 * var(--vw)), 1.3125rem);
}
.contactus-card__line {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.283;
  color: var(--c-charcoal);
  overflow-wrap: anywhere;
}
.contactus-card__key {
  font-weight: 700;
}
.contactus-card__line a {
  color: var(--c-charcoal);
}
.contactus-card__mail {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-position: from-font;
}
.contactus-card__links {
  margin-top: clamp(1rem, calc(1.46 * var(--vw)), 1.75rem);
}
.contactus-card__link {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.283;
}
.contactus-card__link a {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-position: from-font;
}

/* ==========================================================================
   Enquiry form
   ========================================================================== */
.contactus-form {
  background: var(--c-cream);
  padding-block: clamp(2.5rem, calc(6.04 * var(--vw)), 7.248rem);
}
.contactus-form__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
}
.contactus-form__heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.283;
  color: var(--c-charcoal);
}
.contactus-form__notice {
  margin-top: clamp(1rem, calc(1.35 * var(--vw)), 1.625rem);
  font-size: var(--fs-body);
  line-height: 1.8;
  color: #000;
}
.contactus-form__body {
  margin-top: clamp(2rem, calc(4.38 * var(--vw)), 5.25rem);
}

/* Contact Form 7, scoped to this page */
.contactus-form .wpcf7 .drx-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(1rem, calc(1.77 * var(--vw)), 2.125rem);
}
.contactus-form .wpcf7 .drx-form__field {
  margin-bottom: clamp(1.5rem, calc(2.19 * var(--vw)), 2.625rem);
}
.contactus-form .wpcf7 .drx-form__field label {
  display: block;
  margin-bottom: clamp(0.25rem, calc(0.26 * var(--vw)), 0.3125rem);
  font-size: var(--fs-ui);
  font-weight: 600;
  line-height: 1.8;
  color: var(--c-charcoal);
}
.contactus-form .wpcf7 .wpcf7-form-control-wrap {
  display: block;
}
.contactus-form .wpcf7 input[type="text"],
.contactus-form .wpcf7 input[type="email"],
.contactus-form .wpcf7 input[type="tel"],
.contactus-form .wpcf7 textarea {
  width: 100%;
  border: 0;
  border-radius: min(10px, calc(0.5208 * var(--vw-inset)));
  background: var(--c-white);
  padding: clamp(0.75rem, calc(1.25 * var(--vw)), 1.5rem);
  font-family: var(--font-sans);
  font-size: var(--fs-ui);
  color: var(--c-charcoal);
  outline: none;
  transition: box-shadow var(--motion-quick) ease;
}
.contactus-form .wpcf7 input[type="text"],
.contactus-form .wpcf7 input[type="email"],
.contactus-form .wpcf7 input[type="tel"] {
  height: clamp(3.25rem, calc(4.43 * var(--vw)), 5.3125rem);
}
.contactus-form .wpcf7 textarea {
  display: block;
  height: clamp(7.5rem, calc(9.06 * var(--vw)), 10.875rem);
  resize: vertical;
}
/* The field picks up a thin blue ring under the cursor, before it is even
   focused, so it reads as reachable; focus thickens the same ring. */
.contactus-form .wpcf7 input[type="text"]:hover,
.contactus-form .wpcf7 input[type="email"]:hover,
.contactus-form .wpcf7 input[type="tel"]:hover,
.contactus-form .wpcf7 textarea:hover {
  box-shadow: inset 0 0 0 1px var(--c-blue);
}
.contactus-form .wpcf7 input:focus,
.contactus-form .wpcf7 textarea:focus {
  box-shadow: inset 0 0 0 2px var(--c-blue);
}
.contactus-form .wpcf7 .wpcf7-submit {
  min-width: clamp(200px, calc(11.75 * var(--vw)), 225px);
  height: clamp(2.75rem, calc(3.07 * var(--vw)), 3.6875rem);
  padding-block: 0;
  padding-inline: clamp(1.25rem, calc(1.6 * var(--vw)), 1.9375rem);
  text-transform: uppercase;
  font-weight: 600;
}
.contactus-form .wpcf7 .wpcf7-not-valid-tip {
  margin-top: 0.3em;
  font-size: 0.8em;
  color: var(--c-orange);
}
.contactus-form .wpcf7 .wpcf7-response-output {
  margin: 1.5em 0 0;
  padding: 0.75em 1em;
  border: 1px solid var(--c-blue);
  border-radius: min(8px, calc(0.4167 * var(--vw-inset)));
  font-size: var(--fs-ui);
}
/* CF7 only hides the spinner with visibility, so keep it beside the button
   rather than below it — on its own line it adds ~48px of dead space. */
.contactus-form .wpcf7 .wpcf7-spinner {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 0.75em;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
  .contactus-card {
    flex: 0 1 calc((100% - clamp(0.75rem, calc(0.89 * var(--vw)), 1.0625rem)) / 2);
  }
}

@media (max-width: 991px) {
  .contactus-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
  }
  .contactus-hero__art {
    width: min(100%, 494px);
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .contactus-card {
    flex: 0 1 100%;
    min-height: 0;
  }
  .contactus-form .wpcf7 .drx-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .contactus-form .wpcf7 .wpcf7-submit {
    width: 100%;
  }
}

/* A visitor who has asked for reduced motion still gets the feedback, just
   not the movement — see the matching block in front-page.css. */
@media (prefers-reduced-motion: reduce) {
  .contactus-card:hover {
    transform: none;
  }
}