/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT — details block, enquiry form, validation and success states.

   Loaded on both the home page and the contact page, because the same
   partial (inc/partials/contact.php) renders in both places.
   ═══════════════════════════════════════════════════════════════════════════ */

.contact{
  padding:var(--pad-y) var(--pad-x);background:var(--sand);
  display:grid;grid-template-columns:1fr 1.2fr;
  gap:clamp(36px,5vw,72px);align-items:start;
}
/* On the contact page the section is the whole page, so it drops the sand
   background — the page banner above it already carries the colour change. */
.contact--page{background:transparent}

.contact-head h2{margin:0 0 20px}
.contact-intro{font-size:16px;line-height:1.7;color:#555;margin:0 0 32px}
.contact-list{font-size:16px;line-height:2;color:var(--body)}
.contact-list strong{word-break:break-word}
.contact-list a{text-decoration:none;border-bottom:1px solid var(--line)}
.contact-list a:hover{border-color:var(--amber-dark)}

/* ── Success state ───────────────────────────────────────────────────────
   Shown after a successful POST/redirect/GET round trip, so a refresh cannot
   resubmit the enquiry. */
.thanks{
  background:#fff;border:1px solid var(--amber);
  border-radius:14px;padding:clamp(32px,5vw,48px);text-align:center;
}
.thanks-h{font-family:var(--sora);font-weight:600;font-size:22px}
.thanks p{color:#666;margin:12px 0 0}

/* ── Form ────────────────────────────────────────────────────────────────── */
.form{
  display:grid;gap:18px;background:#fff;
  padding:clamp(22px,4vw,36px);border-radius:16px;
  box-shadow:0 16px 40px -26px rgba(0,0,0,0.4);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* Labels are off-screen by design — the placeholder carries the field name, as
   in the approved layout. :not() keeps this rule from resurrecting them: it is
   more specific than .visually-hidden and would otherwise win on display. */
.form label:not(.visually-hidden){
  display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#555;
}
.form input,.form textarea{
  width:100%;padding:15px 16px;border:1px solid var(--line);
  border-radius:9px;font-size:15px;background:var(--paper);color:var(--ink);
}
.form textarea{resize:vertical}
.form input:focus,.form textarea:focus{
  outline:3px solid #fff;outline-offset:1px;
  border-color:transparent;box-shadow:0 0 0 4px var(--focus);
}
.form input[aria-invalid="true"],.form textarea[aria-invalid="true"]{
  border-color:#c0392b;background:#fdf6f5;
}
.form button{
  background:var(--ink);color:#fff;
  font-weight:700;font-size:16px;padding:16px;
  border:none;border-radius:999px;cursor:pointer;
  transition:opacity .18s ease;
}
.form button:hover{opacity:.86}
.form button[disabled]{opacity:.55;cursor:progress}

/* The honeypot's .hp rule lives in base.css, not here — see the note there. */

/* ── Errors ──────────────────────────────────────────────────────────────── */
.form-errors{
  background:#fdf1ef;border:1px solid #e8c4bd;border-left:3px solid #c0392b;
  border-radius:9px;padding:16px 18px;
}
.form-errors strong{display:block;font-size:15px;margin-bottom:8px;color:#8c2c20}
.form-errors ul{margin:0;padding-left:20px;font-size:14px;line-height:1.7;color:#8c2c20}
.field-err{display:block;margin-top:6px;font-size:13px;color:#c0392b}

@media(max-width:900px){
  .contact{grid-template-columns:1fr}
}
@media(max-width:560px){
  .form-row{grid-template-columns:1fr}
}