/*
 * Contact page (templates/page-contact.php).
 *
 * The page own rules from design/contact.html. Global rules live in site.css.
 *
 * The prototype fake "message sent" panel is not part of the WordPress page:
 * the form plugin owns validation, sending and its own confirmation, so those
 * rules are not carried over. The field and error rules stay, since most form
 * plugins can be pointed at the same class names.
 */

.contact-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:40px;align-items:start}
.contact-grid .talk{position:sticky;top:120px}
.contact-form .box{padding:38px}
.contact-form .intro{font-size:14.5px;margin:-10px 0 26px}
.form-grid .inp{align-content:start}
.req{color:var(--muted);font-weight:400;letter-spacing:.06em;text-transform:none;margin-left:4px}
.inp select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230A1F44' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 18px center}
.inp.bad input,.inp.bad select,.inp.bad textarea{border-color:var(--err);box-shadow:0 0 0 4px rgba(180,35,24,.08)}
/* topic select is the shared custom dropdown (site.js enhanceSelects): paint the error on its button */
.inp.bad .dd-btn{border-color:var(--err);box-shadow:0 0 0 4px rgba(180,35,24,.08)}
.err{display:none;align-items:center;gap:7px;font-size:12.5px;color:var(--err)}
.err i{font-size:12px}
.bad>.err,.check-wrap.bad>.err{display:flex}
.check-wrap{display:grid;gap:8px;padding:16px 18px;border-radius:14px;background:#F4F5F7;border:1px solid var(--line);transition:border-color .3s}
.check-wrap.bad{border-color:var(--err)}
.count{justify-self:end;font-size:12px;color:var(--muted)}
.form-foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;margin-top:6px}
.form-foot small{font-size:12.5px;color:var(--muted);max-width:340px}
.form-foot .btn[disabled]{opacity:.6;pointer-events:none}
.talk .note{position:relative;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;line-height:1.6;color:#8E9DB7}
.talk .note i{margin-right:6px;color:var(--sky)}
@media (max-width:1080px){
  .contact-grid{grid-template-columns:1fr}
  .contact-grid .talk{position:relative;top:auto}
}
@media (max-width:760px){
  .contact-form .box{padding:24px 20px}
  .contact-form .intro{margin:-6px 0 22px}
  /* 16px stops iOS Safari zooming the page when a field is focused */
  .inp input,.inp select,.inp textarea{font-size:16px}
  .inp textarea{height:140px}
  .err{align-items:flex-start;line-height:1.45}
  .err i{margin-top:2px}
  .check-wrap{padding:14px 16px}
  .check{font-size:13.5px}
  .check input{width:22px;height:22px;margin-top:0}
  .form-foot{gap:14px}
  .form-foot small{max-width:none}
  .form-foot .btn{width:100%}
  .talk{padding:34px 24px}
  .talk h3{font-size:26px}
  .talk-row{padding:16px 18px;min-height:64px}
  .talk-row div{min-width:0}
  .talk-row b{overflow-wrap:anywhere}
  .talk-row small{display:block;line-height:1.45;margin-top:3px}
}
@media (max-width:380px){
  .talk{padding:30px 20px}
  .talk-row{gap:14px;padding:14px 16px}
}

/* ---------- Fallback shown until the form plugin shortcode is set ---------- */
.form-fallback p{font-size:14.5px;line-height:1.75}
.form-fallback .btn{margin:18px 0 22px}
.form-fallback .intro{margin:0}

/* ---------- The theme's own form (inc/forms.php) ----------
   The design's field classes are reused as they are, so the only new rule here
   is the result banner the redirect lands on. The honeypot is hidden in
   site.css, because the footer signup carries one on every page.             */

.sp-form-note{
  display:flex;gap:12px;align-items:flex-start;
  margin:0 0 26px;padding:16px 18px;border-radius:14px;
  border:1px solid var(--line);background:#F4F5F7;
  font-size:14px;line-height:1.6;color:var(--text)}
.sp-form-note i{margin-top:3px;font-size:15px}
.sp-form-ok{border-color:rgba(10,31,68,.18);background:#F1F5FB}
.sp-form-ok i{color:var(--navy)}
.sp-form-bad{border-color:rgba(180,35,24,.3);background:#FCF3F2}
.sp-form-bad i{color:var(--err)}

.sp-contact .form-foot{margin-top:22px}