/* ============================================================
   ob-contact.css — Contact-page-specific layout + CF7 form skin.
   Loads AFTER the shared ob-home.css (same tokens, chrome, hero,
   buttons). The CF7 form is embedded verbatim via do_shortcode and
   only styled here (targeting CF7's stable classes).
   ============================================================ */

.hero h1{max-width:16ch}

/* ---------- two-column body ---------- */
.contact-grid{
  display:grid;grid-template-columns:minmax(0,.40fr) minmax(0,.60fr);
  gap:clamp(32px,5vw,80px);align-items:start;
}

/* LEFT — direct / editorial */
.contact-lead{color:var(--muted);font-size:clamp(15px,1.5vw,18px);line-height:1.6;
  margin-top:18px;max-width:42ch}
.contact-dl{margin-top:clamp(28px,3.5vw,44px)}
.contact-row{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;
  padding:16px 0;border-top:1px solid var(--line)}
.contact-row:last-child{border-bottom:1px solid var(--line)}
.contact-row dt{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.contact-row dd{margin:0;color:var(--text);font-size:15px;line-height:1.55}
.contact-info a{color:var(--accent);text-decoration:none;transition:color .2s var(--ease)}
.contact-info a:hover,.contact-info a:focus-visible{color:var(--accent-hover)}

/* RIGHT — form column kicker spacing */
.contact-form-col .kicker{margin-bottom:clamp(20px,2.5vw,30px);display:inline-flex}

/* ============================================================
   CF7 FORM SKIN (dark editorial). Targets CF7 stable classes.
   ============================================================ */
.ob-form .wpcf7{max-width:640px}
.ob-form .wpcf7-form p{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);line-height:1.4;margin:0 0 20px;
}
.ob-form .wpcf7-form label{display:block;font:inherit;color:inherit}
.ob-form .wpcf7-form-control-wrap{display:block;margin-top:9px}

/* inputs / textarea / select */
.ob-form input[type=text],
.ob-form input[type=email],
.ob-form input[type=tel],
.ob-form input[type=url],
.ob-form input[type=number],
.ob-form textarea,
.ob-form select{
  width:100%;box-sizing:border-box;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font-family:var(--font-body);font-size:15px;font-weight:400;
  letter-spacing:0;text-transform:none;padding:13px 15px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.ob-form textarea{min-height:150px;resize:vertical;line-height:1.5}
.ob-form input::placeholder,.ob-form textarea::placeholder{color:var(--muted);opacity:1}

/* custom select chevron (since appearance is removed) */
.ob-form select{
  padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8A99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center;background-size:14px;
}
.ob-form select option{background:var(--surface);color:var(--text)}

/* focus state — gold border + ring */
.ob-form input:focus,
.ob-form textarea:focus,
.ob-form select:focus{
  outline:none;border-color:var(--accent-hover)!important; /* beats OceanWP input:focus !important */
  box-shadow:0 0 0 3px rgba(255,200,87,.20);
}
.ob-form input:focus-visible,
.ob-form textarea:focus-visible,
.ob-form select:focus-visible{border-color:var(--accent-hover)!important}

/* submit — reuse the site's primary .btn (indigo fill) */
.ob-form .wpcf7-submit{
  display:inline-flex;align-items:center;width:auto;cursor:pointer;
  background:var(--accent-strong);color:#fff;border:1px solid var(--accent-strong);
  font-family:var(--font-body);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;
  padding:14px 28px;border-radius:11px;margin-top:6px;
  transition:transform .16s var(--ease),box-shadow .25s var(--ease),filter .2s;
}
.ob-form .wpcf7-submit:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(124,92,255,.34)}
.ob-form .wpcf7-submit:focus-visible{outline:2px solid var(--accent-hover);outline-offset:3px}
.ob-form .wpcf7-spinner{margin:0 0 0 12px}

/* validation + response messages — legible on dark, clear error state */
.ob-form .wpcf7-not-valid-tip{
  color:#ff9b9b;font-family:var(--font-mono);font-size:12px;text-transform:none;letter-spacing:0;
  margin-top:7px;display:block;
}
.ob-form input.wpcf7-not-valid,
.ob-form textarea.wpcf7-not-valid,
.ob-form select.wpcf7-not-valid{border-color:#e0533a;box-shadow:0 0 0 3px rgba(224,83,58,.18)}
.ob-form .wpcf7-response-output{
  margin:22px 0 0;padding:13px 16px;border-radius:10px;font-family:var(--font-body);font-size:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);
}
.ob-form .wpcf7-form.invalid .wpcf7-response-output,
.ob-form .wpcf7-form.unaccepted .wpcf7-response-output,
.ob-form .wpcf7-form.failed .wpcf7-response-output{border-color:rgba(224,83,58,.55);color:#ffb4a6}
.ob-form .wpcf7-form.sent .wpcf7-response-output{border-color:rgba(124,92,255,.55);color:var(--text)}

/* ---------- responsive: stack ---------- */
@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr;gap:clamp(40px,7vw,56px)}
}
@media (max-width:620px){
  .hero h1{max-width:none}
  .contact-row{grid-template-columns:110px minmax(0,1fr);gap:12px}
}