/* ===========================================================================
   sterling-contact.css — the Contact page.

   The form is the page. Everything here exists to make the Form (Pro) widget
   read as part of this design system rather than as a plugin default, and to
   let the confirmation replace the form rather than sit under it.

   Tokens come from the :root block in sterling-header.css, which loads first.
   Component classes (.st-btn, .st-label, .st-shell) come from sterling-ui.css.
   Nothing in this file redefines either.
   =========================================================================== */

/* ===========================================================================
   SECTION 02 — the two columns
   =========================================================================== */

/* A child Container inside a flex row is 100% wide by default in Elementor,
   and it is told otherwise through --width, which .e-con already reads.
   Setting `width` instead fights the widget and loses to the per-post sheet. */
.contact-form-section > .e-con-inner > .contact-form-col  { --width: 58%; }
.contact-form-section > .e-con-inner > .contact-direct-col {
  --width: 34%;
  /* 58 + 34 = 92%, so there is slack after the 80px gap. Spend it on the left
     so the column sits on the shell's right edge rather than floating. */
  margin-inline-start: auto;
}

/* Elementor gives every Container 10px of inline padding. Left on, the form
   starts 10px inside the shell and the h1 above it does not. */
.contact-form-col,
.contact-direct-col,
.contact-getting-col,
.contact-map-col,
.contact-next-col {
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

/* Stack below 1024, form first. The form column is first in the DOM, so
   column direction needs no ordering. */
/* --flex-direction, not flex-direction. .e-con declares
   `flex-direction: var(--flex-direction)`, so a plain property here is
   overwritten by the variable's default and the columns never stack — they
   just shrink to share the row. Same for --flex-wrap below. */
@media (max-width: 1023px) {
  .contact-form-section > .e-con-inner {
    --flex-direction: column;
  }

  .contact-form-section > .e-con-inner > .contact-form-col,
  .contact-form-section > .e-con-inner > .contact-direct-col {
    --width: 100%;
    margin-inline-start: 0;
  }

  .contact-direct-col {
    max-width: 34rem;
  }
}

/* ===========================================================================
   THE FORM

   Rectilinear, hairline-bordered, no radius anywhere. The palette has no
   accent colour, so a field reads as a field through its rule weight and its
   ground, never through a hue.
   =========================================================================== */

/* --- Labels --------------------------------------------------------------
   Tracked Clash caps, the same treatment as .st-label. A form on this site
   labels its fields the way a section labels itself.
-------------------------------------------------------------------------- */

.contact-form .elementor-field-group > label.elementor-field-label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-chrome);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink-muted);
}

/* Elementor prints the required mark inside the label. Kept quiet: six of the
   nine fields are required, so a loud asterisk six times is noise. */
.contact-form .elementor-mark-required .elementor-field-label:after {
  content: '*';
  margin-inline-start: 0.35em;
  color: var(--ink-faint);
}

/* --- Fields --------------------------------------------------------------
   Two classes plus a type selector, because Elementor's own field rules live
   at .elementor-field-textual in a stylesheet that can land after this one.
-------------------------------------------------------------------------- */

.contact-form .elementor-field-textual,
.contact-form input.elementor-field-textual,
.contact-form select.elementor-field-textual,
.contact-form textarea.elementor-field-textual {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--ink);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.contact-form textarea.elementor-field-textual {
  min-height: 7rem;
  padding-top: 0.875rem;
  resize: vertical;
}

.contact-form .elementor-field-textual::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}

.contact-form .elementor-field-textual:hover {
  border-color: var(--ink-muted);
}

.contact-form .elementor-field-textual:focus,
.contact-form .elementor-field-textual:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--ink-strong);
  background: var(--surface-raised);
}

/* --- Select --------------------------------------------------------------
   appearance:none removes the platform arrow, so one is drawn back as a
   background chevron. Sized in em so it tracks the type, per design-system.md
   §3 — a desktop-sized chevron beside 17px type is the tell that a layout was
   scaled rather than designed.
-------------------------------------------------------------------------- */

.contact-form select.elementor-field-textual {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.75rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
                    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - 1rem) 55%;
  background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Native date pickers paint their own indicator; align it to the palette. */
.contact-form input[type='date']::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
}

.contact-form input[type='date']:hover::-webkit-calendar-picker-indicator {
  opacity: 0.8;
}

/* --- The submit button ---------------------------------------------------
   Geometry and the bottom-wipe fill come from .st-btn / .st-btn--solid in
   sterling-ui.css, which are on this widget's wrapper. Only two things are
   settled here: the widget's own stretch, and the specificity fight with
   .elementor-widget-form .elementor-button, which ties with .st-btn
   .elementor-button and can win on load order.
-------------------------------------------------------------------------- */

/* Auto on desktop, full width on mobile. Elementor's own
   elementor-button-align-stretch would otherwise run it the width of the
   column, where a single control 600px wide stops reading as a button. */
@media (min-width: 768px) {
  .contact-form .elementor-field-type-submit {
    width: auto;
  }

  .contact-form .elementor-field-type-submit .elementor-button {
    width: auto;
    padding-inline: var(--space-6);
  }
}

.contact-form .elementor-field-type-submit {
  margin-top: var(--space-3);
}

.contact-form .elementor-field-type-submit .elementor-button,
.contact-form.st-btn--solid .elementor-field-type-submit .elementor-button {
  min-height: 3.25rem;
  border-radius: 0;
  box-shadow: none;
}

/* --- Messages ------------------------------------------------------------
   The inline success message is suppressed: the confirmation block replaces
   the form instead, which is unambiguous in a way a green bar under a form
   still standing is not. Errors keep their inline message, because the form
   has to stay on screen for them.
-------------------------------------------------------------------------- */

.contact-form .elementor-message-success {
  display: none;
}

.contact-form .elementor-message {
  margin-top: var(--space-4);
  padding: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  line-height: 1.6;
}

.contact-form .elementor-message-danger {
  background: var(--surface-sunk);
  border-inline-start: 2px solid var(--ink-strong);
  color: var(--ink);
}

/* A field that failed validation. The border alone would be the only signal,
   and the palette has no red to carry it — so the field is thickened and
   darkened, and the message plus aria-invalid do the announcing. */
.contact-form .elementor-field.elementor-error,
.contact-form input.elementor-field-textual[aria-invalid='true'],
.contact-form select.elementor-field-textual[aria-invalid='true'],
.contact-form textarea.elementor-field-textual[aria-invalid='true'] {
  border-color: var(--ink-strong);
  border-width: 2px;
}

.contact-form .elementor-field-group .elementor-error-message {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  color: var(--ink);
}

/* ===========================================================================
   THE CONFIRMATION

   Hidden until the form's submit_success event. Not display:none at rest —
   it has to be reachable for the fade — but visibility and the height
   collapse keep it out of the tab order and the accessibility tree.
   =========================================================================== */

/* The reveal deliberately does NOT transition.

   The form carries the motion — it fades out, and the confirmation takes its
   place. Fading the confirmation IN as well would make the visitor's
   confirmation depend on a transition completing, and a suspended animation
   timeline (a backgrounded tab, a throttled renderer) would then leave a
   visitor who has successfully enquired looking at an empty column, because
   the form beside it is already display:none. On the site's only conversion
   that trade is not worth 420ms of polish. */
.contact-form-col .contact-confirm {
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  padding-top: 0;
}

/* The rule belongs to the sent state, not to the block. Left on at rest a
   border sits outside the collapsed height box and prints a stray hairline
   under the submit button. */
.contact-form-col.is-sent .contact-confirm {
  height: auto;
  overflow: visible;
  visibility: visible;
  border-top: 1px solid var(--rule);
  padding-top: var(--space-6);
}

/* The heading is focused programmatically so a screen reader announces the
   change. It is not a control, so it must not carry a permanent focus ring
   the pointer user sees — :focus-visible never matches a scripted focus() on
   a tabindex="-1" element, which is exactly the behaviour wanted. */
.contact-form-col .contact-confirm .elementor-heading-title:focus {
  outline: none;
}

.contact-form-col .contact-confirm .elementor-heading-title:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
}

/* The form leaves before the confirmation arrives. */
.contact-form-col .elementor-widget-form,
.contact-form-col > .e-con-inner > .elementor-widget-heading {
  transition: opacity var(--dur-base) var(--ease-out);
}

.contact-form-col.is-sending .elementor-widget-form {
  opacity: 0.45;
}

.contact-form-col.is-sent .elementor-widget-form {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .contact-form-col .elementor-widget-form,
  .contact-form .elementor-field-textual {
    transition-duration: 1ms;
  }
}

/* ===========================================================================
   THE DIRECT CONTACT COLUMN

   Four blocks separated by hairlines. This duplicates the footer deliberately:
   someone who wants to phone will not scroll to the footer to find the number.
   =========================================================================== */

.contact-direct-col > .e-con-inner {
  display: block;
}

.contact-direct-col .direct-block {
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --width: 100%;
  padding-block: var(--space-5);
  border-top: 1px solid var(--rule);
}

.contact-direct-col .direct-block--first {
  padding-top: 0;
  border-top: 0;
}

.contact-direct-col .direct-block__label .elementor-heading-title {
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}

.contact-direct-col .direct-block__body,
.contact-direct-col .direct-block__body p {
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
}

.contact-direct-col .direct-block__body p + p {
  margin-top: var(--space-3);
}

/* Links carry the drawn underline the rest of the site uses, rather than
   text-decoration, so they can grow on hover. */
.contact-direct-col .direct-block__body a {
  position: relative;
  display: inline-block;
  color: var(--ink-strong);
  text-decoration: none;
}

.contact-direct-col .direct-block__body a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15em;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    right var(--dur-base) var(--ease-out);
}

.contact-direct-col .direct-block__body a:hover::after,
.contact-direct-col .direct-block__body a:focus-visible::after {
  opacity: 1;
}

.contact-direct-col .direct-block__body a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

/* ===========================================================================
   SECTION 03 — WHAT HAPPENS NEXT
   =========================================================================== */

/* Elementor's 10px of container padding would start these three columns 10px
   inside the shell while the h1 two sections above starts on it. One shell,
   one line. */
.contact-next-cols {
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

/* Three tracks sized after the 48px gaps, so there is no percentage sum to
   keep in step with the gap value. */
.contact-next-cols > .e-con-inner > .contact-next-col {
  --width: calc((100% - 2 * 48px) / 3);
}

/* Playfair at display size is what makes three list items read as a sequence
   rather than as bullets. Tabular figures so 01, 02 and 03 sit on one grid. */
.contact-next-col .elementor-heading-title {
  font-variant-numeric: tabular-nums;
}

.contact-next-col > .e-con-inner > .elementor-widget-heading:first-child .elementor-heading-title {
  line-height: 1;
  color: var(--ink-strong);
}

.contact-next-col .elementor-widget-text-editor p {
  margin: 0;
  line-height: 1.7;
}

@media (max-width: 1023px) {
  .contact-next-cols > .e-con-inner {
    --flex-wrap: wrap;
  }

  .contact-next-cols > .e-con-inner > .contact-next-col {
    --width: calc((100% - 48px) / 2);
  }
}

@media (max-width: 767px) {
  .contact-next-cols > .e-con-inner {
    --flex-direction: column;
  }

  .contact-next-cols > .e-con-inner > .contact-next-col {
    --width: 100%;
  }
}

/* ===========================================================================
   SECTION 04 — GETTING HERE
   =========================================================================== */

.contact-getting > .e-con-inner > .contact-getting-col { --width: 46%; }
.contact-getting > .e-con-inner > .contact-map-col {
  --width: 46%;
  margin-inline-start: auto;
}

/* A ruled list, right-aligned times. Grid rather than a flex row with
   space-between, so the times land on one line rather than on four
   independently-measured ones. */
.contact-distances__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem;
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-3);
  border-top: 1px solid var(--rule);
}

.contact-distances__row:last-child {
  border-bottom: 1px solid var(--rule);
}

.contact-distances__row > span:last-child {
  text-align: right;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.contact-distances-wrap p {
  margin: 0;
}

.contact-map .elementor-widget-container,
.contact-map iframe {
  display: block;
  width: 100%;
}

@media (max-width: 1023px) {
  .contact-getting > .e-con-inner {
    --flex-direction: column;
  }

  .contact-getting > .e-con-inner > .contact-getting-col,
  .contact-getting > .e-con-inner > .contact-map-col {
    --width: 100%;
    margin-inline-start: 0;
  }
}

@media (max-width: 767px) {
  .contact-distances__row {
    grid-template-columns: minmax(0, 1fr) 6.5rem;
    gap: var(--space-3);
  }
}