/* ===========================================================
   Contact Us page — scoped styles, built on the global design
   system (main.css). Loaded ONLY on the /contact-us/ page
   (conditional enqueue in functions.php), so no other template
   is affected. Section flow: Hero → Appointment form + Info → Map →
   Locations (global .locs/.loc grid, matching single-location "Our Other
   Locations") → Insurance concierge.
   =========================================================== */

/* ---- Hero (no breadcrumb / eyebrow — clean) ---- */
.contact-hero p{ margin-top:.6em; max-width:60ch; }

/* ---- Form + Info layout ---- */
.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:start; }

.contact-form-card{
  background:#fff; border:1px solid var(--cyan-200); border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(16,40,80,.07); padding:36px 34px;
}
.contact-form-card h2{ margin:.45rem 0 0; font-size:1.7rem; }
.contact-form-card__lead{ color:var(--body); margin:.6rem 0 22px; font-size:.96rem; }

/* ---- Form fields ---- */
.contact-form{ display:grid; gap:18px; }
.contact-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-field{ display:flex; flex-direction:column; gap:7px; }
.contact-field > label{ font-family:var(--sans); font-weight:600; font-size:.9rem; color:var(--ink); }
.contact-field > label span{ color:var(--blue); }
.contact-field input,
.contact-field select,
.contact-field textarea{
  font-family:var(--sans); font-size:.95rem; color:var(--ink);
  background:var(--cyan-50); border:1px solid var(--cyan-200); border-radius:var(--radius-sm);
  padding:12px 14px; width:100%; min-height:48px; box-sizing:border-box;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.contact-field textarea{ resize:vertical; min-height:120px; }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
  outline:none; background:#fff; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(4,100,203,.14);
}
.contact-field input::placeholder,
.contact-field textarea::placeholder{ color:#9aa7ba; }

/* Gender radios — sit in a control row that matches the input height so the
   two grid columns stay aligned. */
.contact-gender{ display:flex; align-items:center; gap:26px; min-height:48px; }
.contact-radio{ display:inline-flex; align-items:center; gap:9px; font-size:.95rem; font-weight:500; color:var(--ink); cursor:pointer; }
.contact-radio input{ width:18px; height:18px; min-height:0; accent-color:var(--blue); cursor:pointer; margin:0; }

/* Send button — right-aligned, uppercase, generous padding (matches the
   reference "SEND MESSAGE" CTA). */
.contact-send{ justify-self:end; margin-top:6px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; padding:14px 34px; }

/* honeypot — visually hidden, off-screen (not display:none, so bots fill it) */
.contact-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- Alerts (success / error) ---- */
.contact-alert{ border-radius:var(--radius-sm); padding:14px 16px; font-size:.92rem; margin-bottom:20px; line-height:1.5; }
.contact-alert--ok{ background:#e6f7ee; border:1px solid #b6e6cd; color:#137a47; }
.contact-alert--err{ background:#fdecec; border:1px solid #f5c2c2; color:#b3261e; }

/* ---- Info aside ---- */
.contact-info{
  background:var(--cyan-50); border:1px solid var(--cyan-200); border-radius:var(--radius);
  padding:32px 30px; position:sticky; top:24px;
}
.contact-info h3{ margin:0; font-size:1.35rem; }
.contact-info__lead{ color:var(--body); font-size:.92rem; margin:.5rem 0 22px; }
.contact-info__item{ display:flex; gap:14px; align-items:center; padding:16px 0; border-top:1px solid var(--line); }
.contact-info__item:first-of-type{ border-top:0; padding-top:0; }
.contact-info__ic{
  flex:0 0 46px; width:46px; height:46px; border-radius:12px;
  background:var(--cyan-100); color:var(--blue);
  display:inline-flex; align-items:center; justify-content:center; line-height:0;
}
.contact-info__ic svg{ width:21px; height:21px; display:block; }
.contact-info__item > div{ min-width:0; }
.contact-info__item b{ display:block; color:var(--ink); font-size:.95rem; margin-bottom:3px; }
.contact-info__item > div a,
.contact-info__item > div span{ display:block; color:var(--body); font-size:.92rem; line-height:1.5; overflow-wrap:anywhere; }
.contact-info__item > div a{ color:var(--blue); font-weight:600; }
.contact-info__item > div a:hover{ color:var(--blue-dark); }
.contact-info__portal{ margin-top:24px; width:100%; justify-content:center; }

/* ---- Map ---- */
.contact-map{
  margin-top:26px; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 10px 28px rgba(16,40,80,.07); background:var(--cyan-100); min-height:420px;
}
.contact-map iframe{ width:100%; height:100%; min-height:420px; border:0; display:block; }

/* ---- Locations — replicates the single-location "Our Other Locations" section:
        the global ".locs" 3-col grid + ".loc" cards (title / address / phone /
        "View Location"), so spacing, structure, typography and responsive behaviour
        are identical. Adds the AMG design-system .loc hover (the same blue-fill lift
        used on About Us) so the cards match the system's interactive card behaviour. ---- */
.loc{ transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.loc:hover{ background:#06A9FF; border-color:#06A9FF; color:#fff; transform:translateY(-3px); box-shadow:var(--shadow); }
.loc:hover h3,
.loc:hover p{ color:#fff; }
.loc:hover .btn{ background:#fff; color:#06A9FF; border-color:#fff; }

/* ---- Responsive ---- */
@media(max-width:960px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-info{ position:static; }
}
@media(max-width:560px){
  .contact-row{ grid-template-columns:1fr; }
  .contact-form-card{ padding:28px 22px; }
  .contact-map, .contact-map iframe{ min-height:320px; }
  .contact-send{ justify-self:stretch; width:100%; justify-content:center; }
}