/* COR Region Map — v1.3 restyle to the "Local Relationships, National Scale" comp:
   map is all-grey at rest, "+" pins mark the three regions; hovering a row / pin / region colours that region
   (pin fades out) and tints the row. Colours come from Elementor Global Colors (--e-global-color-<id>); hex = fallback. */
:root {
    /* Map fill and row tint are the same Flight Blue at different strengths ON PURPOSE: the map sits on the
       grey states, the row on the near-white page, so 55% / 35% read as the same weight. (Feedback 08/18 + 08/20.) */
    --crm-active:  rgba(184, 220, 252, .55);                     /* Flight Blue @55% — map region on hover */
    --crm-cor:     var(--crm-active);                            /* per-region overrides if wanted, e.g. var(--e-global-color-primary) */
    --crm-hb:      var(--crm-active);
    --crm-co:      var(--crm-active);
    --crm-other:   #E6E7E7;                                      /* resting state fill (comp grey) */
    --crm-line:    var(--e-global-color-946f83a,   #FFFFFF);   /* state borders (white global) */
    --crm-ink:     var(--e-global-color-primary,   #1A4348);   /* Midnight — titles, plus, arrow */
    --crm-muted:   var(--e-global-color-primary,   #1A4348);   /* region label */
    --crm-rule:    #D9D9D6;                                      /* hairlines */
    --crm-tint:    rgba(184, 220, 252, .35);                      /* Flight Blue @35% — row hover background */
    --crm-shift:   0px;                                           /* vertical nudge for the map (set per-shortcode via shift="-60px") */
    --crm-ease:    cubic-bezier(.22, 1, .36, 1);
    --crm-dur:     520ms;
}

/* ---------------- Map ---------------- */
.crm-map { width: 100%; line-height: 0; margin-top: var(--crm-shift, 0px); }
.crm-map svg { width: 100%; height: auto; display: block; overflow: visible; }

.crm-state {
    outline: none;
    stroke: var(--crm-line);
    stroke-width: .5;
    fill: var(--crm-other);
    fill-opacity: 1;
    transition: fill var(--crm-dur) var(--crm-ease);
}
.crm-cor, .crm-hb, .crm-co { cursor: pointer; }
.crm-cor.is-active { fill: var(--crm-cor); }
.crm-hb.is-active  { fill: var(--crm-hb); }
.crm-co.is-active  { fill: var(--crm-co); }

/* "+" pins: white disc, soft shadow, Midnight plus; hidden while its region is active */
.crm-pin { cursor: pointer; outline: none; transition: opacity var(--crm-dur) var(--crm-ease), transform var(--crm-dur) var(--crm-ease); }
.crm-pin__disc { fill: #fff; filter: drop-shadow(0 2px 6px rgba(26, 67, 72, .18)); transition: fill .2s; }
.crm-pin__plus { stroke: var(--crm-ink); stroke-width: 1.8; stroke-linecap: round; fill: none; }
.crm-pin:hover .crm-pin__disc, .crm-pin:focus-visible .crm-pin__disc { fill: var(--crm-active); }
.crm-pin.is-active { opacity: 0; pointer-events: none; }

/* ---------------- Rows ---------------- */
.crm-list {
    --crm-serif: utile-display, "Utile Display", Georgia, "Times New Roman", serif;
    --crm-sans:  CircularXX, "Circular XX", Circular, "Helvetica Neue", Arial, sans-serif;
    display: flex; flex-direction: column; gap: 0;
    margin: 0; padding: 0;
    max-width: 600px;
    font-family: var(--crm-sans);
    border-top: 1px solid var(--crm-rule);
}
.crm-row,
.crm-row:hover,
.crm-row:focus,
.crm-row:active {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 120px 1fr 72px;
    align-items: stretch;
    column-gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0; border-radius: 0;
    border-bottom: 1px solid var(--crm-rule);
    background: transparent;
    box-shadow: none !important;
    text-decoration: none;
    cursor: pointer;
    color: var(--crm-ink);
    line-height: 1.2;
    min-height: 110px;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; user-select: none;
}
.crm-row { transition: background-color var(--crm-dur) var(--crm-ease); }
.crm-row:focus { outline: none; }
.crm-row:focus-visible { outline: 2px solid var(--crm-ink); outline-offset: -2px; }

/* mark column: logo, centred in its column so all three line up */
.crm-row__mark {
    display: flex; align-items: center; justify-content: center;
    padding: 0 12px 0 0;                    /* no vertical padding — the row's min-height sets a uniform height for all three */
    font-family: var(--crm-serif); font-weight: 500; font-size: 35px; letter-spacing: -0.2px; line-height: 1;
    color: var(--crm-ink);
}
/* CS-132 (17 Sep): these three rules had never applied. Elementor's
   `.elementor img { height: auto; max-width: 100% }` is (0,1,1) and a bare
   `.crm-row__logo` is (0,1,0), so every height and max-width below lost, and
   the marks were rendering at whatever their intrinsic aspect gave them — which
   is why HB came out at 93px against a 46px spec. Scoping to the mark takes
   these to (0,2,0), which outranks it. Same lesson as the testimonial dots:
   on this site, assume Elementor's CSS outranks a plugin's and check the
   computed box, not the intent. */
.crm-row__mark .crm-row__logo { display: block; width: auto; height: 46px; max-width: 96px; object-fit: contain; object-position: center; }
/* CS-132 (17 Sep): COR is a thin, wide wordmark; HB is a solid badge and CO a
   dense outlined mark, so matching or exceeding COR's height made the two
   acquired brands read as the bigger logos. Sized down until they sit under
   the parent optically, judged on a render of the real row, not the numbers. */
/* CS-258 (23 Sep): the team asked for HB and CO at the same height as the COR
   mark. Matched on INK height, not box height — COR's wordmark fills 65% of
   its box, HB and CO about 76% of theirs — so 46px COR = 30px of letters, and
   39px HB/CO = 30px of mark. (Replaces the CS-132 sizes of 36/34.) */
.crm-row__mark .crm-row__logo--hb { height: 54px; }
.crm-row__mark .crm-row__logo--co { height: 54px; }
/* 23 Sep, Jim: "a little bit bigger — 54px instead of 39px". Phones scaled by
   the same ratio (29 → 40). */
.crm-row__text  { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; padding: 22px 16px 22px 24px; }
.crm-row__title {
    font-family: var(--crm-sans);
    font-weight: 500; font-size: 21px; line-height: 1.2;
    color: var(--crm-ink);
}
.crm-row__region {
    font-family: var(--crm-sans);
    font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; line-height: 1.1;
    color: var(--crm-muted);
}
.crm-row__arrow {
    color: var(--crm-ink);
    font-family: utile-display, "Utile Display", Georgia, serif !important; font-weight: 500 !important; font-size: 32px; line-height: 1;
    display: inline-flex; justify-content: flex-end; align-items: center;
    padding-right: 22px;                     /* room for the hover nudge inside the tinted row */
    transition: transform var(--crm-dur) var(--crm-ease);
}

/* active row: Flight-Blue tint, arrow nudges right */
.crm-row.is-active { background: var(--crm-tint); }
.crm-row.is-active .crm-row__arrow { transform: translateX(6px); }

@media (min-width: 1025px) { .crm-row__title { white-space: nowrap; } }
@media (max-width: 767px) {
    .crm-row { grid-template-columns: 88px 1fr 52px; }
    .crm-row { min-height: 78px; }
    .crm-row__mark { padding: 0 8px 0 0; }
    .crm-row__mark .crm-row__logo { height: 34px; max-width: 70px; } .crm-row__mark .crm-row__logo--hb { height: 40px; } .crm-row__mark .crm-row__logo--co { height: 40px; }
    .crm-row__text { padding: 14px 8px 14px 14px; gap: 4px; }
    .crm-row__title { font-size: 17px; }
    .crm-row__region { font-size: 13px; letter-spacing: 1.6px; }
    .crm-row__arrow { font-size: 26px; padding-right: 14px; }
    .crm-pin__disc { r: 22px; } .crm-pin__plus { stroke-width: 2.4; }
}
@media (prefers-reduced-motion: reduce) { .crm-state, .crm-row, .crm-row__arrow, .crm-pin { transition: none !important; } }