/* =====================================================================
 * Contact Us — simple, single-column enquiry page
 * ---------------------------------------------------------------------
 * Deliberately plain: one readable column, one card, big tap targets.
 * Everything is scoped under `.cu` so it cannot leak into other pages.
 *
 * Two things worth knowing before editing:
 *
 * 1. Kadence styles form controls with attribute selectors
 *    (`input[type=text]`, specificity 0-1-1). A single class such as
 *    `.cu__input` (0-1-0) LOSES to those, which is why the fields used to
 *    render as white boxes on a dark card. Every control rule below is
 *    therefore written as `.cu input.cu__input` (0-2-1) so it wins on
 *    specificity rather than on `!important`.
 *
 * 2. There is no blanket `.cu a { color: ... }` rule. That used to beat
 *    `.cu__btn--solid` and paint the Call button label red-on-red
 *    (invisible). Link colour is applied to prose links only.
 *
 * Pairs with contact.js.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * Page shell — flatten Kadence's boxed content wrapper so the dark page
 * runs edge to edge with no white gutters or trailing white band.
 * `mtsb-contact` is added to <body> from functions.php.
 * ------------------------------------------------------------------- */
body.mtsb-contact { background: #0b0b0e; }
body.mtsb-contact #wrapper,
body.mtsb-contact #inner-wrap,
body.mtsb-contact #primary,
body.mtsb-contact #main { background: #0b0b0e; }
/* Kadence's boxed wrapper is flattened by the shared `.mtsb-fullbleed`
 * rules in style.css. Only the page background colour lives here. */

.cu {
  --cu-ink:   #0b0b0e;   /* page background               */
  --cu-card:  #15151a;   /* form card / tiles             */
  --cu-field: #0e0e12;   /* input background              */
  --cu-line:  rgba(255, 255, 255, 0.12);
  --cu-orange: #d95d27;      /* brand accent (--mtrd-orange in style.css) */
  --cu-orange-deep: #a8410f; /* hover shade, as home.css / road-drying.css */
  --cu-error: #d90f0a;       /* invalid fields only — never the accent    */
  --cu-paper: #ffffff;
  --cu-mute:  #a2a2ac;
  --cu-dim:   #74747e;
  --cu-radius: 12px;

  width: 100%;
  background: var(--cu-ink);
  color: var(--cu-paper);
  /* Font is inherited from the theme so this page matches the rest of
     the site — do not hard-code a family here. */
  font-size: 1rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

.cu *,
.cu *::before,
.cu *::after { box-sizing: border-box; }

/* Never let a child push the page sideways on a phone. */
.cu img,
.cu iframe { max-width: 100%; }

/* ---------------------------------------------------------------- shell */
.cu__wrap {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

.cu__inner {
  padding-top: clamp(40px, 8vw, 72px);
  padding-bottom: clamp(40px, 8vw, 72px);
}

/* ----------------------------------------------------------- headings */
.cu__eyebrow {
  margin: 0 0 .6rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cu-orange);
}

.cu .cu__title {
  margin: 0 0 .7rem;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.75rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--cu-paper);
}
.cu .cu__title span { color: var(--cu-orange); }

.cu .cu__h2 {
  margin: 0 0 .45rem;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.55rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--cu-paper);
}

.cu__lead {
  margin: 0;
  color: var(--cu-mute);
  font-size: clamp(1rem, .96rem + .25vw, 1.1rem);
}

.cu__sub {
  margin: 0 0 1.5rem;
  color: var(--cu-mute);
  font-size: .95rem;
}

.cu__req { color: var(--cu-orange); }

/* ------------------------------------------------------ quick contact */
.cu__quick {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  margin: 1.6rem 0 2rem;
  padding: 0;
  list-style: none;
}

.cu a.cu__quick-item {
  display: block;
  padding: .85rem 1rem;
  min-height: 56px;
  border: 1px solid var(--cu-line);
  border-radius: var(--cu-radius);
  background: var(--cu-card);
  color: var(--cu-paper);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.cu a.cu__quick-item:hover,
.cu a.cu__quick-item:focus-visible {
  border-color: var(--cu-orange);
  background: #1b1b21;
}

.cu__quick-k {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cu-mute);
}
.cu__quick-v {
  display: block;
  margin-top: .15rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cu-paper);
}

/* -------------------------------------------------------------- card */
.cu__card {
  padding: clamp(20px, 5vw, 34px);
  border: 1px solid var(--cu-line);
  border-radius: 16px;
  background: var(--cu-card);
}

/* -------------------------------------------------------------- form */
.cu__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.cu__field { margin: 0 0 1.1rem; min-width: 0; }

.cu .cu__label {
  display: block;
  margin: 0 0 .4rem;
  padding: 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--cu-paper);
}

/* Controls. The `element.class` form is deliberate — see the note at the
   top of this file. 16px minimum keeps iOS Safari from zooming on focus.
   The three `!important`s are load-bearing: WordPress global styles emit
     body .wp-site-blocks input:not([type=submit]):not(...)  →  0-10-2
   which no sane selector can outrank, and it sets background/border from
   `--wp--preset--color--base` / `--contrast`, which this theme never
   defines. Undefined var() falls back to `unset`, so those inputs end up
   transparent with border-style:none — the fields looked like they were
   missing entirely. */
.cu input.cu__input,
.cu textarea.cu__input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 50px;
  margin: 0;
  padding: .8rem .9rem;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: var(--cu-paper) !important;
  background: var(--cu-field) !important;
  border: 1px solid var(--cu-line) !important;
  border-radius: 10px;
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.cu input.cu__input::placeholder,
.cu textarea.cu__input::placeholder { color: var(--cu-dim); opacity: 1; }

.cu input.cu__input:focus,
.cu textarea.cu__input:focus {
  outline: none;
  color: var(--cu-paper) !important;
  background: var(--cu-field) !important;
  border-color: var(--cu-orange) !important;
  box-shadow: 0 0 0 3px rgba(217, 93, 39, .25);
}

.cu .cu__input.cu--invalid,
.cu .cu__input.cu--invalid:focus { border-color: var(--cu-error) !important; }

.cu textarea.cu__input {
  min-height: 140px;
  resize: vertical;
}

/* Autofill in Chrome/Safari repaints the field white — keep it dark. */
.cu input.cu__input:-webkit-autofill,
.cu input.cu__input:-webkit-autofill:hover,
.cu input.cu__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cu-paper);
  -webkit-box-shadow: 0 0 0 1000px var(--cu-field) inset;
  caret-color: var(--cu-paper);
}

.cu .cu__input.cu--invalid {
  border-color: var(--cu-error);
  box-shadow: 0 0 0 3px rgba(217, 15, 10, .2);
}

/* honeypot — off-screen rather than display:none, which bots skip */
.cu__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------ button */
.cu a.cu__btn,
.cu button.cu__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  width: 100%;
  min-height: 54px;
  padding: .95rem 1.6rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  /* Colour is set here, not via a blanket `.cu a`. `!important` for the same
     reason as the inputs above: global styles ship
       .wp-site-blocks button[type="submit"]:not(.wp-element-button)  →  0-3-1
     painting it with an undefined `--wp--preset--color--accent-2`, which
     resolves to `unset` and leaves the button transparent. */
  color: #fff !important;
  background: var(--cu-orange) !important;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background .18s ease;
}
.cu a.cu__btn:hover,
.cu button.cu__btn:hover,
.cu button.cu__btn:focus-visible { background: var(--cu-orange-deep) !important; color: #fff !important; }
.cu button.cu__btn[disabled] { opacity: .7; cursor: progress; }

.cu__spinner {
  display: none;
  width: 1em;
  height: 1em;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cu-spin .7s linear infinite;
}
.cu button.cu__btn.is-loading .cu__spinner { display: inline-block; }
@keyframes cu-spin { to { transform: rotate(360deg); } }

.cu__privacy {
  margin: .9rem 0 0;
  font-size: .8rem;
  color: var(--cu-dim);
}

/* ------------------------------------------------------------ alerts */
.cu__alert {
  margin: 1.1rem 0 0;
  padding: .9rem 1rem;
  border-radius: 10px;
  font-size: .95rem;
  line-height: 1.5;
}
.cu__alert[hidden] { display: none; }
.cu__alert--ok  { background: rgba(43, 182, 115, .12); border: 1px solid rgba(43, 182, 115, .5); color: #b7f0d3; }
.cu__alert--err { background: rgba(217, 15, 10, .12);  border: 1px solid rgba(217, 15, 10, .5);  color: #ffc9c7; }
.cu .cu__alert a { color: inherit; text-decoration: underline; }

/* -------------------------------------------------------------- note */
.cu__note {
  margin: 1.6rem 0 0;
  font-size: .9rem;
  color: var(--cu-mute);
  text-align: center;
}
.cu .cu__note a { color: var(--cu-orange); }

/* --------------------------------------------------------------- map */
.cu__map { border-top: 1px solid var(--cu-line); }
.cu__map iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
}

/* --------------------------------------------------------- responsive */
@media (min-width: 640px) {
  .cu__quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cu__row {
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
  }
  .cu a.cu__btn,
  .cu button.cu__btn { width: auto; min-width: 220px; }
  .cu__map iframe { height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .cu * { transition: none !important; }
  .cu__spinner { animation: none; }
}