/* ==========================================================================
   Contact page — details rail beside the enquiry form
   --------------------------------------------------------------------------
   Loaded ONLY on the contact page (see mte_contact_assets() in functions.php),
   so nothing in here can reach any other template. Every selector is scoped
   under .mte-contact or .mte-form-panel for the same reason.

   Palette and type come entirely from the tokens style.css already defines —
   --cobalt-deep #0132A2, --ink #0B1A45, --grey #46517A, --seafoam, --whitecap,
   --wash, --aqua, with Outfit for headings and UI and Lora for reading. No new
   colour and no new font is introduced here.

   CONTRAST NOTE. The theme's own rule is that --aqua, --seafoam and --whitecap
   never carry white text; they carry --ink. That holds here: the submit button
   is --cobalt-deep filled with white (7.07:1), and every aqua surface on this
   page is a hairline or a small accent, never a text background.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.mte-contact {
  padding: 64px 0 8px;
}

.mte-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   The details rail

   Sticky on desktop only, and only when the viewport is tall enough to hold it
   without trapping the visitor above the form. `top` clears the fixed header
   plus the sticky enquiry bar, the same 150px offset pages.css already uses for
   its #enquiry scroll-margin.
   -------------------------------------------------------------------------- */

.mte-contact-details {
  padding: 32px 30px 30px;
  background: var(--ink);
  color: #fff;
  border-radius: 4px;
  /* A single hairline of the brand blue, so the card has an edge on the wash. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}

@media (min-width: 981px) and (min-height: 760px) {
  .mte-contact-details {
    position: sticky;
    top: 150px;
  }
}

.mte-details-title {
  font-family: var(--head);
  font-weight: 200;
  font-size: 30px;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

.mte-details-script {
  font-family: var(--script);
  font-size: 30px;
  line-height: 1.1;
  color: var(--aqua);
  margin: 2px 0 26px;
}

.mte-detail {
  padding: 18px 0;
  border-top: 1px solid rgba(201, 214, 242, .22);
}

.mte-detail:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.mte-detail-label {
  display: block;
  font-family: var(--head);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--seafoam);
  margin-bottom: 8px;
}

.mte-detail-value {
  display: block;
  font-family: var(--head);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.45;
  color: #fff;
}

.mte-detail-address {
  font-size: 17px;
}

a.mte-detail-link {
  border-bottom: 1px solid rgba(198, 161, 78, .55);
  width: fit-content;
  transition: color .2s, border-color .2s;
}

a.mte-detail-link:hover,
a.mte-detail-link:focus-visible {
  color: var(--aqua);
  border-bottom-color: var(--aqua);
}

.mte-detail-hint {
  display: block;
  margin-top: 7px;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--seafoam);
}

.mte-detail-ways ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mte-detail-ways li + li {
  margin-top: 7px;
}

.mte-detail-ways a {
  font-family: var(--head);
  font-weight: 300;
  font-size: 16px;
  color: #fff;
  border-bottom: 1px solid rgba(201, 214, 242, .4);
  transition: color .2s, border-color .2s;
}

.mte-detail-ways a:hover,
.mte-detail-ways a:focus-visible {
  color: var(--aqua);
  border-bottom-color: var(--aqua);
}

.mte-details-foot {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(201, 214, 242, .22);
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--seafoam);
}

/* Focus has to survive on a dark card, where the page's default ring vanishes. */
.mte-contact-details a:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   The form panel
   -------------------------------------------------------------------------- */

.mte-form-panel {
  padding: 36px 38px 38px;
  background: #fff;
  border: 1px solid var(--seafoam);
  border-radius: 4px;
  /* Clears the fixed header and the sticky enquiry bar when #enquiry is hit. */
  scroll-margin-top: 150px;
}

.mte-form-title {
  font-family: var(--head);
  font-weight: 200;
  font-size: 32px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 10px;
}

.mte-form-lede {
  margin: 0 0 26px;
  max-width: 60ch;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--grey);
}

/* --------------------------------------------------------------------------
   Result and error messaging

   The status region is always in the DOM, empty when there is nothing to say,
   so a screen reader announces the outcome rather than having to discover a
   node that appeared from nowhere.
   -------------------------------------------------------------------------- */

.mte-result h2 {
  font-family: var(--head);
  font-weight: 300;
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 12px;
}

.mte-result {
  border-left: 3px solid var(--cobalt-deep);
  padding: 4px 0 4px 22px;
}

.mte-result p {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 12px;
}

/* Amber, not green: the notification failed even though the record was kept,
   and the visitor is being asked to do something about it. */
.mte-result-warn {
  border-left: 3px solid var(--aqua);
  background: var(--wash);
  padding: 14px 16px;
  color: var(--ink);
}

.mte-result-warn a {
  border-bottom: 1px solid var(--cobalt-deep);
  color: var(--cobalt-deep);
}

.mte-result-more {
  margin-bottom: 0;
}

.mte-link {
  font-family: var(--head);
  font-weight: 300;
  color: var(--cobalt-deep);
  border-bottom: 1px solid currentColor;
}

.mte-alert {
  margin: 0 0 26px;
  padding: 16px 20px;
  background: #FCF3F2;
  border-left: 3px solid #9E2B25;
  border-radius: 3px;
}

.mte-alert p {
  margin: 0 0 8px;
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.65;
  color: #6E1B17;
}

.mte-alert p:last-child {
  margin-bottom: 0;
}

.mte-alert ul {
  margin: 0;
  padding-left: 20px;
}

.mte-alert li {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  color: #6E1B17;
  margin-bottom: 4px;
}

.mte-alert a {
  color: #6E1B17;
  border-bottom: 1px solid currentColor;
}

.mte-alert:focus-visible {
  outline: 2px solid #9E2B25;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Fields

   A twelve-column grid so halves and quarters both land cleanly; four date /
   headcount boxes in a row on desktop, two per row on a phone.
   -------------------------------------------------------------------------- */

.mte-form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px 22px;
}

.mte-f-half { grid-column: span 6; }
.mte-f-quarter { grid-column: span 3; }
.mte-f-full { grid-column: 1 / -1; }

.mte-f label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--head);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .4px;
  color: var(--ink);
}

.mte-req {
  color: #9E2B25;
  font-weight: 500;
}

.mte-opt {
  font-weight: 300;
  font-size: 12.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--grey);
}

.mte-f input,
.mte-f select,
.mte-f textarea {
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--seafoam);
  border-radius: 3px;
  background: #fff;
  font-family: var(--body);
  font-size: 16px; /* 16px stops iOS zooming the page on focus. */
  line-height: 1.4;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}

.mte-f textarea {
  resize: vertical;
  min-height: 150px;
}

/* Date and number inputs have intrinsic widths that ignore width:100% in some
   WebKit builds; this is what keeps a 375px viewport from scrolling sideways. */
.mte-f input[type="date"],
.mte-f input[type="number"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
}

.mte-f select {
  /* No native arrow on the custom background, so one is drawn in. */
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1A45' stroke-width='1.5'%3E%3Cpath d='M4 9l8 7 8-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px 16px;
}

.mte-f input:focus,
.mte-f select:focus,
.mte-f textarea:focus {
  outline: none;
  border-color: var(--cobalt-deep);
  box-shadow: 0 0 0 3px rgba(1, 50, 162, .18);
}

/* Keyboard users get a ring that does not rely on the colour change alone. */
.mte-f input:focus-visible,
.mte-f select:focus-visible,
.mte-f textarea:focus-visible {
  outline: 2px solid var(--cobalt-deep);
  outline-offset: 1px;
}

.mte-f input[aria-invalid="true"],
.mte-f select[aria-invalid="true"],
.mte-f textarea[aria-invalid="true"] {
  border-color: #9E2B25;
  background: #FEFAFA;
}

.mte-field-error {
  display: block;
  margin-top: 7px;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  color: #9E2B25;
}

/* The honeypot. Not display:none — bots skip fields that are display:none, and
   no person can reach it because it is aria-hidden and out of the tab order. */
.mte-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Submit
   -------------------------------------------------------------------------- */

.mte-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 28px;
}

.mte-submit {
  flex: 0 0 auto;
  background: var(--cobalt-deep);
  color: #fff;
  border: 0;
  border-radius: 30px;
  padding: 15px 42px;
  font-family: var(--head);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .8px;
  cursor: pointer;
  transition: background .25s, transform .18s;
}

.mte-submit:hover {
  background: var(--ink);
}

.mte-submit:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.mte-submit:active {
  transform: translateY(1px);
}

.mte-form-note {
  flex: 1 1 220px;
  margin: 0;
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--grey);
}

@media (prefers-reduced-motion: reduce) {
  .mte-submit,
  .mte-f input,
  .mte-f select,
  .mte-f textarea,
  a.mte-detail-link {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Narrow viewports

   Single column from 980px down. The details card comes first because at that
   width the fastest thing a phone visitor wants is the number to call, and the
   form is one thumb-flick below it.
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .mte-contact { padding: 44px 0 4px; }
  .mte-contact-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .mte-contact-details { position: static; }
}

@media (max-width: 700px) {
  .mte-contact { padding: 32px 0 4px; }
  .mte-contact-details { padding: 26px 22px 24px; }
  .mte-details-title { font-size: 26px; }
  .mte-details-script { font-size: 27px; margin-bottom: 20px; }
  .mte-detail-value { font-size: 18px; }

  .mte-form-panel { padding: 26px 20px 28px; }
  .mte-form-title { font-size: 26px; }
  .mte-form-lede { font-size: 15.5px; }

  .mte-form-grid { gap: 16px 14px; }
  .mte-f-half { grid-column: 1 / -1; }
  .mte-f-quarter { grid-column: span 6; }

  .mte-submit { width: 100%; }
  .mte-form-foot { margin-top: 22px; }
}

/* A native date input renders `mm/dd/yyyy` plus a picker button and needs
   roughly 150px before it starts clipping its own text. Half of a 375px phone
   column is about 143px, so the two date boxes — and only those — go full width
   here. The headcount boxes are two digits and stay side by side. */
@media (max-width: 430px) {
  .mte-f-date { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
  .mte-form-panel { padding: 22px 16px 24px; }
  .mte-contact-details { padding: 22px 18px 20px; }
}