/*
 * Real US state-outline map (client-supplied SVG). Base per-state
 * colors are set inline via JS (usp-job-map.js), since the SVG ships
 * its own <style> block with a class-based fill that would otherwise
 * fight a plain external stylesheet rule. The one thing that reliably
 * beats an inline style is an !important rule loaded later — used here
 * only for the hover/focus state, which needs to react to something JS
 * already set inline as the base color.
 */
.usp-map {
    --usp-navy: #003B5E;
    --usp-cream: #F2EBE7;
    --usp-accent: #BE5500;
    --usp-border: #DCD2CA;
    position: relative;
    font-family: Figtree, Georgia, sans-serif;
}

.usp-map__graphic {
    max-width: 900px;
    margin: 0 auto;
}

.usp-map__graphic svg {
    /* Deliberately width:auto with a fixed-pixel max-width — NOT
       width:100% and NOT max-width:100% either; any percentage here,
       even on max-width, depends entirely on the parent for size. That's
       fine in normal layout, but this site's page-builder grid lays out
       columns using CSS tables (display:table-cell), where a
       percentage-only child gives the auto-sizing algorithm nothing to
       measure and the whole column collapses to 0 (verified: a
       percentage max-width collapses it exactly the same as
       width:100% does). Auto + a fixed max-width instead uses the SVG's
       own width/height attributes (added server-side — see
       class-map-shortcode.php) as a real intrinsic size that table
       auto-layout can actually measure, while still shrinking it
       responsively below that cap exactly like a percentage would on a
       normal parent. */
    width: auto;
    max-width: 900px;
    height: auto;
    display: block;
}

.usp-map__graphic svg rect.st1 {
    /* The source SVG ships a full-bleed background rect (its only use
       of this class, confirmed against the file). Hiding it removes
       the tan fill without touching the state shapes, which use a
       different class. */
    display: none;
}

.usp-map__region--active {
    cursor: pointer !important;
    transition: fill 0.18s ease, filter 0.18s ease;
}

.usp-map__region--active:hover,
.usp-map__region--active:focus-visible,
.usp-map__region--active:hover path,
.usp-map__region--active:focus-visible path {
    fill: var(--usp-accent) !important;
    outline: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.usp-map__region--active:focus-visible {
    outline: 2px solid var(--usp-accent) !important;
    outline-offset: 2px;
}

.usp-map__region--empty {
    cursor: default !important;
}

.usp-map__tooltip {
    /* Vertically centered in the viewport (not tracked to the cursor)
       so a long list of listings is never partly off-screen — see
       usp-job-map.js for why cursor-following vertical positioning was
       dropped. Horizontal position is still set by JS (left, in px)
       tracking the cursor, so the tooltip doesn't permanently sit over
       one spot on the map and block the states underneath it. */
    position: fixed !important;
    top: 50%;
    transform: translateY(-50%);
    /* Max possible z-index — centered still isn't guaranteed clear of
       a sticky nav (and, for a logged-in admin, the wp-admin toolbar on
       top of that) on a short viewport. Both are fixed-position with
       their own high z-index, so anything lower gets painted over. */
    z-index: 2147483647;
    max-width: 380px;
    max-height: 80vh;
    overflow-y: auto;
    background: #fff !important;
    color: #1a1a1a !important;
    border: 1px solid var(--usp-border) !important;
    border-radius: 10px !important;
    padding: 14px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    text-align: left !important;
    opacity: 0;
    /* none while hidden so it never blocks clicks on whatever's behind
       it; switched to auto only when visible (below) so the mouse can
       actually scroll a long list instead of the scroll passing through
       to the page underneath. */
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.usp-map__tooltip.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.usp-map__tooltip-title {
    font-family: Georgia, serif !important;
    font-weight: 400 !important;
    color: var(--usp-navy) !important;
    font-size: 17px !important;
    text-align: left !important;
    margin: 0 0 6px !important;
}

.usp-map__tooltip-heading {
    font-weight: 700 !important;
    color: var(--usp-accent) !important;
    font-size: 12px !important;
    text-transform: uppercase;
    text-align: left !important;
    letter-spacing: 0.04em;
    margin: 10px 0 2px !important;
}

.usp-map__tooltip-list {
    list-style: none !important;
    text-align: left !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
}

.usp-map__tooltip-list li {
    margin: 0 0 4px !important;
    padding: 0 !important;
    text-align: left !important;
    color: #1a1a1a !important;
}

@media (max-width: 600px) {
    .usp-map__tooltip {
        max-width: 280px;
    }
}