/* ============================================================================
   CSS — Contact Pages   (WPCodeBox 2 snippet · Type: CSS · Load: Frontend)
   Serves BOTH /contact-ms and /contact-la off one set of .lc-contact-* classes.
   Source of truth: development/contact-pages/contact-page-build-blueprint.md §E
   Mirrors the live footer's .lc-broker-* design language.
   Defaults baked in (confirmed 2026-06-22): navy #334376 buttons · light-bg trust
   badges (no footer white chip) · map = light link · "Send Me a Message" H2.
   Do NOT put this in Bricks Custom Code or Theme Styles (feedback_css_placement).
   ============================================================================ */

/* ---- brand tokens (scoped; mirrors footer values) ---- */
.lc-contact-section{
  --navy:#334376; --gold:#d0a667; --teal:#26a9e1;
  --ink:#2b2b2b; --muted:#6b7280; --line:#e2e5ec;
}

/* ===== shell ===== */
/* top padding clears the site-wide FIXED sticky header (#brx-header.brx-sticky{position:fixed})
   — Bricks adds no spacer, so each page reserves the header height itself. 125px verified. */
.lc-contact-section{
  background:#fff; color:var(--ink); font-family:'Mulish',sans-serif; line-height:1.6;
  padding:125px 0 64px;
}
.lc-contact-container{ max-width:1180px; margin:0 auto; padding:0 40px; width:100%; }

/* ===== intro ===== */
.lc-contact-intro{ margin-bottom:36px; }
.lc-contact-h1{
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:34px; line-height:1.2;
  color:var(--navy); margin:0 0 14px;
}
.lc-contact-lead{ font-size:16.5px; color:#3a3f4b; margin:0 0 12px; }
.lc-contact-crosslink{ font-size:14px; color:var(--muted); margin:0; }
.lc-contact-crosslink a{ color:var(--teal); font-weight:600; text-decoration:none; }
.lc-contact-crosslink a:hover{ text-decoration:underline; }

/* ===== two-column grid (form 1.5fr | reach 1fr) ===== */
.lc-contact-grid{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:50px; align-items:start;
}

/* ===== shared headings (one scale for both columns) ===== */
.lc-contact-form-h2,.lc-contact-reach-h2{
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:22px;
  color:var(--navy); margin:0 0 18px;
}

/* ===== reach-us column ===== */
.lc-contact-reach-col{
  border:1px solid var(--line); border-radius:10px; padding:26px 26px 24px; background:#fcfcfd;
}
.lc-contact-agent{ display:flex; flex-direction:column; }
/* broker block: logo is pinned top-left (absolute); every meta line is indented into ONE
   aligned column beside it — mirrors the agent head's avatar|text alignment and fixes the
   ragged left edge the old float produced. Buttons/map/by-appt stay full-width below. */
.lc-contact-broker{ position:relative; margin-top:22px; padding-top:22px; border-top:1px solid var(--line); }
.lc-contact-broker > .lc-contact-label,
.lc-contact-broker > .lc-contact-name,
.lc-contact-broker-sub,
.lc-contact-broker-addr,
.lc-contact-broker .lc-contact-phone,
.lc-contact-broker-meta,
.lc-contact-broker-juris{ margin-left:100px; }   /* 84px logo + 16px gap */

/* agent headshot row — 84px circle: personalizes without tipping MREC §3.3 prominence */
.lc-contact-agent-head{ display:flex; gap:16px; align-items:center; margin-bottom:4px; }
.lc-contact-agent-head > div{ min-width:0; }
.lc-contact-avatar{
  width:84px; height:84px; border-radius:50%; object-fit:cover; flex:none;
  border:3px solid #fff; box-shadow:0 1px 8px rgba(0,0,0,.18);
}

/* §8.11: brokerage logo LEADS the broker block at the headshot's height (84px),
   pinned top-left so every meta line aligns in the column to its right. Circular to pair
   with the round headshot. */
.lc-contact-broker-logo{
  position:absolute; left:0; top:22px; height:84px; width:84px; object-fit:contain;
}

/* labels — mirror footer .lc-broker-label; same style for AGENT + BROKERAGE = equal rank */
.lc-contact-label{
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px; letter-spacing:1px;
  text-transform:uppercase; color:var(--gold); margin:0 0 6px;
}

/* SHARED name class — equal size for agent + brokerage = STRUCTURAL §3.3 parity.
   Never give the agent and broker names different sizes; differ only by weight. */
.lc-contact-name{
  font-family:'Montserrat',sans-serif; font-size:20px; line-height:1.25; color:var(--navy); margin:0 0 4px;
}
.lc-contact-agent .lc-contact-name{ font-weight:600; }
.lc-contact-broker .lc-contact-name{ font-weight:700; }

.lc-contact-license,
.lc-contact-broker-addr,
.lc-contact-broker-meta,
.lc-contact-broker-juris{ font-size:14px; color:#4a4f5a; margin-top:2px; margin-bottom:2px; }
.lc-contact-broker-sub{ font-size:13px; color:var(--muted); margin-top:0; margin-bottom:4px; }
.lc-contact-broker-addr{ font-style:italic; }
.lc-contact-broker-juris{ font-weight:600; color:var(--navy); }   /* "Licensed in {State}" */

/* visible, tel-linked phone line — desktop readability + conspicuous broker phone (MREC §3.3) */
.lc-contact-phone{ font-size:14px; color:#4a4f5a; margin:4px 0 0; }
.lc-contact-phone a{ color:var(--navy); font-weight:700; text-decoration:none; }
.lc-contact-phone a:hover{ color:var(--teal); text-decoration:underline; }

/* ===== call / email buttons — ALL equal weight (navy fill); no primary/secondary ===== */
.lc-contact-btn-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; clear:both; }
.lc-contact-btn{
  flex:1 1 auto; min-width:140px; text-align:center; font-family:'Montserrat',sans-serif;
  font-weight:600; font-size:15px; background:var(--navy); color:#fff; text-decoration:none;
  padding:13px 16px; border-radius:8px; border:none; cursor:pointer; display:inline-block;
}
.lc-contact-btn:hover{ background:#2a3760; color:#fff; }

/* ===== map link + by-appointment ===== */
.lc-contact-map-link{
  display:inline-block; margin-top:14px; color:var(--teal); font-size:14px;
  font-weight:600; text-decoration:none;
}
.lc-contact-map-link:hover{ text-decoration:underline; }
.lc-contact-byappt{ font-style:italic; color:var(--muted); font-size:13px; margin:8px 0 0; }

/* ===== trust row — light-bg badges (NOT the footer white chip, which vanishes on white) ===== */
.lc-contact-trust{
  display:flex; align-items:center; justify-content:flex-start; gap:18px;
  margin-top:22px; padding-top:20px; border-top:1px solid var(--line);
}
/* If using IMAGE assets (REALTOR® + EHO marks), they carry their own color — show plain: */
.lc-contact-trust img{ height:48px; width:auto; }
/* If using text/icon chips instead (self-contained, no media dependency): */
.lc-contact-trust-badge{
  display:flex; align-items:center; gap:8px; font-family:'Montserrat',sans-serif;
  font-weight:700; font-size:12px; letter-spacing:.5px; color:var(--navy);
  border:1px solid var(--line); border-radius:6px; padding:8px 12px; background:#fff;
}
.lc-contact-trust-badge .eho-house{ width:18px; height:18px; display:inline-block; }

/* ============================================================================
   WPForms restyle — SCOPED under .lc-contact-form-col so nothing leaks site-wide.
   WPForms Lite renders a known markup tree; these match the .lc-contact-* family.
   The submit button may be the page's most prominent button — intended (form =
   primary conversion); it is NOT part of the agent-vs-broker parity rule.
   ============================================================================ */
.lc-contact-form-col .wpforms-field{ margin-bottom:16px; padding:0; }
.lc-contact-form-col .wpforms-field-label{
  font-family:'Mulish',sans-serif; font-weight:600; font-size:14px; color:var(--navy); margin-bottom:6px;
}
.lc-contact-form-col .wpforms-field input[type=text],
.lc-contact-form-col .wpforms-field input[type=email],
.lc-contact-form-col .wpforms-field input[type=tel],
.lc-contact-form-col .wpforms-field textarea{
  width:100%; border:1px solid #d8d8d8; border-radius:6px; padding:12px;
  font-family:'Mulish',sans-serif; font-size:15px; background:#fff; box-shadow:none;
}
.lc-contact-form-col .wpforms-field textarea{ min-height:120px; resize:vertical; }
.lc-contact-form-col .wpforms-field input:focus,
.lc-contact-form-col .wpforms-field textarea:focus{ outline:none; border-color:var(--teal); }
.lc-contact-form-col .wpforms-submit{
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:15px;
  background:var(--navy); color:#fff; border:none; border-radius:8px; padding:13px 28px; cursor:pointer;
}
.lc-contact-form-col .wpforms-submit:hover{ background:#2a3760; }

/* ============================================================================
   Responsive (≤991px) — matches footer breakpoint. Form stacks ABOVE reach-us.
   ============================================================================ */
@media (max-width:991px){
  .lc-contact-grid{ grid-template-columns:1fr !important; gap:34px; }
  .lc-contact-btn-row{ flex-direction:column; }
  .lc-contact-btn{ width:100%; flex:none; }
  .lc-contact-h1{ font-size:28px; }
}