/* =====================================================================
   Builder Advisor rep-finder — [hs_rep_finder]

   LAYOUT: two columns. Map on the left (~2/3), and everything the
   selection drives — dropdown, rep cards, form — on the right, so the
   result of a click lands BESIDE the map instead of below the fold.
   Collapses to one column under 900px.

   PORT NOTES
   - Colours were `var(--wp--preset--color--*)` from the abandoned FSE
     theme.json. Remapped onto this site's `--hs-*` tokens.
   - Type is in PX, NOT the `--hs-fs-*` tokens. Those are rem-based and
     something outside the child theme sets `html { font-size: 10px }`,
     so a rem token resolves to ~62.5% of intent. Sizes below match the
     `.hs-eyebrow` / `.hs-small` / `.hs-lead` utilities in base.css.
   - Radii use the radius scale.
   ===================================================================== */

/* --- Two-column shell ------------------------------------------------- */

.hs-rf-layout {
    display: grid;
    /* fr, never %: a % pair summing to 100 plus a gap overflows the row. */
    grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr);
    gap: var(--hs-space-32);
    align-items: start;
}
@media (max-width: 900px) {
    .hs-rf-layout { grid-template-columns: 1fr; gap: var(--hs-space-24); }
}

.hs-rf-sidecol {
    display: flex;
    flex-direction: column;
    gap: var(--hs-space-16);
}

/* --- Map -------------------------------------------------------------- */

.hs-rf-map-wrap {
    position: relative;
    width: 100%;
    padding: var(--hs-space-24);
    background-color: var(--hs-fill-warm);
    border-radius: var(--hs-radius-card);
}
.hs-rf-map-wrap svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .hs-rf-map-wrap { padding: var(--hs-space-12); }
    .hs-rf-map-wrap svg { max-height: 420px; }
}
.hs-rf-map-placeholder {
    padding: 40px var(--hs-space-24);
    text-align: center;
    font-size: 13px;
    color: var(--hs-muted);
    background: repeating-linear-gradient(45deg,
        transparent, transparent 12px,
        rgba(0, 0, 0, 0.03) 12px, rgba(0, 0, 0, 0.03) 24px);
    border-radius: var(--hs-radius-control);
}
.hs-rf-map-placeholder code {
    padding: 1px 4px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--hs-radius-xs);
    font-size: 12px;
}

/* State paths — resting, hover, focus, selected.

   The map reads as a solid navy landmass, not a pale wash: RESTING is
   --hs-navy, hover lifts to --hs-blue, and the pick is --hs-orange. That
   is a clear three-step progression and it makes the map look like a
   deliberate graphic at rest rather than an empty one.

   State separations are drawn in the panel's own background colour, so the
   internal borders read as hairline gaps and the coastline has no outline
   ringing it.

   `!important` on fill/stroke is deliberate: the SVG carries a `fill`
   presentation attribute on its parent <g class="state">, and inlined SVG
   fights authored CSS unpredictably across browsers. Every selector here
   is scoped to .hs-rf-map-wrap, so the hammer stays contained. */
.hs-rf-map-wrap svg [id^="US-"] {
    cursor: pointer;
    outline: none;
}
.hs-rf-map-wrap svg [id^="US-"] {
    fill: var(--hs-navy) !important;
    stroke: var(--hs-fill-warm) !important;
    stroke-width: 1.5;
    transition: fill 0.12s ease;
}
.hs-rf-map-wrap svg [id^="US-"]:hover {
    fill: var(--hs-blue) !important;
}
.hs-rf-map-wrap svg [id^="US-"]:focus-visible {
    fill: var(--hs-blue) !important;
    stroke: var(--hs-orange) !important;
    stroke-width: 2.5;
}
.hs-rf-map-wrap svg [id^="US-"].is-selected {
    fill: var(--hs-orange) !important;
}

/* The SVG draws internal borders AGAIN as a separate white-stroked group.
   Left alone, those stayed white hairlines across the navy landmass. */
.hs-rf-map-wrap svg g.borders path {
    stroke: var(--hs-fill-warm) !important;
}

/* District of Columbia is a 5px marker <circle> that the source SVG parks
   OUTSIDE the <g class="state" fill="#E8EDF4"> wrapper — so it inherited no
   fill and painted solid black over Maryland. It now carries id="US-DC" like
   every other state and picks up the rules above; the stroke is thinned so a
   1.5px ring does not swallow a 5px dot. */
.hs-rf-map-wrap svg circle[id^="US-"] { stroke-width: 1; }

/* --- Picker ----------------------------------------------------------- */

.hs-rep-finder .hs-rf-label {
    display: block;
    margin-bottom: var(--hs-space-8);
    font-size: 13px;
    font-weight: var(--hs-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--hs-tracking-eyebrow);
    color: var(--hs-muted);
}
.hs-rep-finder .hs-rf-select {
    width: 100%;
    min-height: 44px;              /* touch target */
    padding: 12px 40px 12px 16px;
    font-family: inherit;
    font-size: 16px;               /* <16px makes iOS Safari zoom on focus */
    color: var(--hs-ink);
    background-color: var(--hs-surface);
    border: 1px solid var(--hs-border-strong);
    border-radius: var(--hs-radius-control);
    appearance: none;
    /* Chevron is a data URI, so the navy is literal — a var() cannot reach
       inside one. Matches --hs-navy (#173C6D); update both together. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23173C6D' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.hs-rep-finder .hs-rf-select:focus-visible {
    outline: 2px solid var(--hs-blue);   /* 2px focus ring — radius-scale exempt */
    outline-offset: 2px;
    border-color: var(--hs-blue);
}

/* --- California toggle ------------------------------------------------ */

.hs-rf-ca-toggle {
    padding: var(--hs-space-12) var(--hs-space-16);
    background: var(--hs-orange-tint);
    border: 1px solid var(--hs-orange);
    border-radius: var(--hs-radius-card);
}
.hs-rf-ca-toggle[hidden] { display: none; }
.hs-rf-ca-label {
    margin: 0 0 var(--hs-space-8);
    font-size: 13px;
    font-weight: var(--hs-fw-semibold);
    color: var(--hs-orange-tint-ink);
}
/* Sentence case, Inter 700, control radius, no arrow — the site button rule. */
.hs-rep-finder .hs-rf-ca-btn {
    display: block;
    width: 100%;
    margin: 6px 0 0;
    padding: 10px 16px;
    min-height: 44px;
    font-family: inherit;
    font-size: 15px;
    font-weight: var(--hs-fw-bold);
    color: var(--hs-on-navy);
    background: var(--hs-navy);
    border: 1px solid var(--hs-navy);
    border-radius: var(--hs-radius-control);
    cursor: pointer;
}
.hs-rep-finder .hs-rf-ca-btn:hover { background: var(--hs-navy-deep); }
.hs-rep-finder .hs-rf-ca-btn:focus-visible {
    outline: 2px solid var(--hs-blue);
    outline-offset: 2px;
}
/* BB writes `.fl-page .fl-builder-content button:not(.fl-content-ui-button)`
   { font-family: Arial; font-weight: 300 } into EVERY page's layout CSS at
   (0,3,1). That beat a (0,2,0) rule, so this button rendered Arial 300
   instead of Inter 700 — the same global-typography trap base.css documents
   for headings. Matched and raised to (0,4,1), not solved with !important. */
.fl-page .fl-builder-content .hs-rep-finder button.hs-rf-ca-btn {
    font-family: var(--hs-font-sans);
    font-weight: var(--hs-fw-bold);
}

/* --- Team panel ------------------------------------------------------- */

.hs-rf-team-empty {
    padding: var(--hs-space-24);
    text-align: center;
    font-size: 15px;
    color: var(--hs-muted);
    background: var(--hs-fill-warm);
    border-radius: var(--hs-radius-card);
}
/* The form slot is listed here too: it starts hidden in the markup and is
   revealed with the team panel, so it needs the same guard against any
   theme rule that sets a display value and defeats the hidden attribute. */
.hs-rf-team-empty[hidden],
.hs-rf-team-panel[hidden],
.hs-rf-form-slot[hidden] { display: none; }

/* base.css caps every <p> at --hs-measure (65ch) and auto-centres the BOX
   only for paragraphs carrying inline text-align:center or
   .has-text-align-center. These inherit their centring from a parent class
   instead, so the 65ch box stayed anchored to the left edge and the text
   read as left-shifted inside a centred panel. Centre the box as well.
   Scoped here rather than widened in base.css — that rule is site-wide. */
.hs-rf-team-empty p {
    margin: 0 auto;
    max-width: 28ch;
}

.hs-rf-team-panel {
    padding: var(--hs-space-16);
    background: var(--hs-surface);
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius-card);
}
.hs-rf-team-panel:focus { outline: none; }   /* focused by JS for screen readers only */
.hs-rep-finder .hs-rf-team-header {
    margin: 0 0 var(--hs-space-12);
    font-size: 18px;
    font-weight: var(--hs-fw-semibold);
    line-height: var(--hs-lh-snug);
    color: var(--hs-ink);
}

/* Two reps SIDE BY SIDE, not stacked — the form needs the vertical room.
   In a ~375px panel that is ~180px per card, too narrow for a photo beside
   text, so each card stacks internally: photo, then role/name/title.
   align-items: stretch keeps both cards equal height when one name wraps. */
.hs-rf-cards {
    /* One equal column per ASSIGNED rep (up to three: outside, inside,
       multifamily). Unassigned cards are [hidden] = display:none, which takes
       them out of the grid, so 3, 2 or 1 cards always fill the row. */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}
.hs-rf-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--hs-space-12);
    background: var(--hs-page);
    border-radius: var(--hs-radius-card);
}
/* A hidden card must not leave an empty grid cell — a territory with only an
   outside rep should show one card, not one card and a gap. */
.hs-rf-card[hidden] { display: none; }
.hs-rf-card-photo {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    overflow: hidden;
    background: var(--hs-fill-warm);
    border-radius: var(--hs-radius-pill);
}
.hs-rf-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Hide the <img> outright when there is no headshot. The JS removes its
   src, and an <img> with no src still paints a broken-image glyph over the
   silhouette in Chrome — visible as a stray mark inside the circle. */
.hs-rf-card-photo.is-empty img { display: none; }
.hs-rf-card-photo.is-empty {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Ccircle cx='36' cy='28' r='12' fill='%23DDD6C9'/%3E%3Cpath fill='%23DDD6C9' d='M14 68c0-12 10-20 22-20s22 8 22 20z'/%3E%3C/svg%3E");
    background-size: contain;
}
.hs-rf-card-text { min-width: 0; }
.hs-rep-finder .hs-rf-card-name {
    margin: 0;
    font-size: 15px;
    font-weight: var(--hs-fw-semibold);
    line-height: var(--hs-lh-snug);
    color: var(--hs-ink);
}
.hs-rep-finder .hs-rf-card-title {
    margin: 0;
    font-size: 13px;
    line-height: var(--hs-lh-snug);
    color: var(--hs-body);
}
/* Phones: three columns are too narrow for a name + title, so the cards
   stack, each one a row with the photo beside the text. After the card
   rules on purpose, so it wins over them. */
@media (max-width: 560px) {
    .hs-rf-cards { grid-auto-flow: row; grid-auto-columns: auto; }
    .hs-rf-card { flex-direction: row; align-items: center; gap: 12px; text-align: left; }
}

/* --- Form slot -------------------------------------------------------- */

.hs-rf-form-slot {
    padding: var(--hs-space-16);
    background: var(--hs-surface);
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius-card);
}
.hs-rep-finder .hs-rf-form-slot h3 {
    /* Was 4px, with the subtext below supplying the gap to the form. With the
       subtext gone this heading sits directly on the form. */
    margin: 0 0 var(--hs-space-12);
    font-size: 17px;
    font-weight: var(--hs-fw-semibold);
    color: var(--hs-ink);
}
.hs-rf-form-placeholder {
    padding: var(--hs-space-12);
    font-size: 12px;
    line-height: var(--hs-lh-snug);
    color: var(--hs-body);
    background: var(--hs-fill-warm);
    border: 1px dashed var(--hs-border-strong);
    border-radius: var(--hs-radius-control);
}
.hs-rf-form-placeholder p { margin: 0 0 6px; max-width: none; }
.hs-rf-form-placeholder p:last-child { margin-bottom: 0; }
.hs-rf-form-placeholder code {
    display: inline-block;
    margin: 1px 2px 1px 0;
    padding: 1px 4px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: var(--hs-radius-xs);
    font-family: var(--hs-font-mono);
    font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
    .hs-rf-map-wrap svg [id^="US-"] { transition: none; }
}