/*
 * Shared United States map presentation for Public Workspace and marketing surfaces.
 *
 * The geometry is vendored from usapr_frontend/public/maps/usa.svg into the theme.
 * Public State-hub highlighting is geographic-only; the homepage registration-risk
 * coloring is explicitly synthetic marketing presentation and never regulatory state.
 */

.usapr-state-map,
.usapr-home-map__geography {
    width: 100%;
    min-width: 0;
}

.usapr-state-map__svg,
.usapr-home-map__svg,
.usapr-home-registration-map__svg {
    display: block;
    width: 100%;
    height: auto;
}

.usapr-state-map__svg .state,
.usapr-home-map__svg .state,
.usapr-home-registration-map__svg .state {
    fill: #d9e5f5;
}

.usapr-state-map__svg .borders,
.usapr-home-map__svg .borders,
.usapr-home-registration-map__svg .borders {
    stroke: #fff;
    stroke-width: 1;
}

.usapr-state-map__svg .separator1,
.usapr-home-map__svg .separator1,
.usapr-home-registration-map__svg .separator1 {
    stroke: #a8b8cf;
}

.usapr-state-map__svg .separator2,
.usapr-home-map__svg .separator2,
.usapr-home-registration-map__svg .separator2 {
    stroke: #d9e5f5;
}

/* State highlighting is geographic orientation only, never a compliance determination. */
.usapr-state-map__svg .is-current {
    fill: var(--usapr-primary, #1457e6) !important;
}

/*
 * The canonical SVG retains a commented-out DC path before its visible DC circle.
 * The renderer may encounter that historic path first, so use the container's
 * explicit jurisdiction code to ensure the visible circle receives the same
 * geographic-only highlight without rewriting the vendored source asset.
 */
.usapr-state-map[data-current-state="DC"] .dc {
    fill: var(--usapr-primary, #1457e6) !important;
}

.usapr-state-map__fallback,
.usapr-home-map__fallback {
    display: grid;
    min-height: 220px;
    place-items: center;
    padding: 24px;
    border: 1px dashed var(--usapr-border, #dfe7f5);
    border-radius: 18px;
    color: var(--usapr-muted, #5f7096);
    text-align: center;
}

/* Keep State pages map-led and balanced against the large State header. */
.usapr-state-hub__visual .usapr-state-map {
    max-width: none;
    margin-inline: auto;
    padding-bottom: 46px;
}

.usapr-state-hub__visual .usapr-state-map__svg {
    width: 100%;
    max-width: none;
    margin-inline: auto;
}

/* Keep the State locator crisp: no selected-State blur or background halo. */
.usapr-state-hub__visual {
    background: linear-gradient(145deg, var(--usapr-surface-info), #fff);
}

/*
 * State hub hero composition is owned here because this stylesheet loads after the
 * shared navigation layer. Do not depend on :has() matching the exact WordPress
 * Post Content wrapper: canonical State-guide templates always use this frame.
 */
.usapr-state-guide .wp-block-post-content {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
    column-gap: clamp(32px, 5vw, 72px);
    row-gap: 24px;
    width: min(1280px, calc(100% - 48px));
    max-width: none;
    margin-inline: auto;
}

.usapr-state-guide .wp-block-post-content > .usapr-page-header {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: auto;
    max-width: 580px;
    margin: 0 !important;
    padding: 36px 0 30px;
    text-align: left;
}

.usapr-state-guide .wp-block-post-content > .usapr-page-header .usapr-page-title {
    max-width: 14ch;
    margin-inline: 0;
    font-size: clamp(2.45rem, 4.5vw, 3.85rem);
    letter-spacing: -.045em;
}

.usapr-state-guide .wp-block-post-content > .usapr-page-header .usapr-pattern-copy {
    max-width: 570px;
    margin-inline: 0 !important;
    font-size: 1.075rem;
}

.usapr-state-guide .usapr-state-hub {
    display: contents;
}

.usapr-state-guide .usapr-state-hub__visual {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    width: 100%;
    min-width: 0;
    min-height: 360px;
    padding: 28px 28px 34px;
}

.usapr-state-guide .usapr-state-statistics,
.usapr-state-guide .usapr-state-hub__body {
    grid-column: 1 / -1;
}

.usapr-state-guide .wp-block-post-content > :not(.usapr-page-header):not(.usapr-state-hub) {
    grid-column: 1 / -1;
}

.usapr-home-map__geography {
    margin-top: 10px;
}

.usapr-home-map__svg {
    max-height: 300px;
    margin-inline: auto;
}

.usapr-home-states__visual .usapr-home-map__svg .state {
    fill: #cfe3ff;
}

.usapr-home-states__visual .usapr-home-map__svg {
    filter: drop-shadow(0 18px 30px rgba(20, 56, 132, .09));
}

/*
 * Homepage registration mock: red/yellow/green are the only status colors.
 * The status allocation is synthetic and bounded to the marketing figure created
 * by usapr_home_registration_map_figure(). Neutral states remain gray.
 */
.usapr-home-registration-visual {
    margin: 0;
    overflow: hidden;
    border: 1px solid #dfe7f5;
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 28px 80px rgba(20, 56, 132, .14);
}

.usapr-home-registration-visual__header {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    padding: 17px 20px;
    border-bottom: 1px solid #e4eaf5;
}

.usapr-home-registration-visual__header > div {
    display: grid;
    gap: 1px;
}

.usapr-home-registration-visual__header span,
.usapr-home-registration-visual__header small {
    color: #6b7897;
    font-size: .68rem;
}

.usapr-home-registration-visual__header strong {
    color: #10275b;
    font-size: .92rem;
}

.usapr-home-registration-visual__badge {
    padding: 5px 8px;
    border: 1px solid #e4eaf5;
    border-radius: 999px;
    background: #f8fafc;
    white-space: nowrap;
}

.usapr-home-registration-visual__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: #e4eaf5;
}

.usapr-home-registration-metric {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 0 7px;
    align-items: center;
    min-width: 0;
    padding: 14px 18px;
    background: #fff;
}

.usapr-home-registration-metric > span {
    grid-row: 1 / 3;
    font-size: .82rem;
}

.usapr-home-registration-metric strong {
    color: #10275b;
    font-size: 1rem;
    line-height: 1.1;
}

.usapr-home-registration-metric small {
    color: #6b7897;
    font-size: .64rem;
}

.usapr-home-registration-metric--low > span { color: #3fbf84; }
.usapr-home-registration-metric--medium > span { color: #f1b72e; }
.usapr-home-registration-metric--high > span { color: #e75b61; }

.usapr-home-registration-visual__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 18px;
    align-items: start;
    min-height: 340px;
    padding: 12px 24px 20px;
    background:
        radial-gradient(circle at 52% 44%, rgba(20, 87, 230, .08), transparent 34%),
        linear-gradient(180deg, #fbfdff 0%, #f7faff 100%);
}

.usapr-home-registration-map {
    display: grid;
    min-width: 0;
    place-items: center;
    transform: translateY(-10px);
}

.usapr-home-registration-map__svg {
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    filter: drop-shadow(0 16px 26px rgba(15, 23, 42, .08));
}

.usapr-home-registration-map__svg .state {
    fill: #dfe4ec;
}

.usapr-home-registration-map__svg .is-registration-risk-low {
    fill: #4fc493 !important;
}

.usapr-home-registration-map__svg .is-registration-risk-medium {
    fill: #f2bf48 !important;
}

.usapr-home-registration-map__svg .is-registration-risk-high {
    fill: #e9656a !important;
}

.usapr-home-registration-legend {
    display: grid;
    gap: 9px;
    align-self: center;
    align-content: center;
    padding: 14px;
    border: 1px solid #e4eaf5;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.usapr-home-registration-legend strong {
    margin-bottom: 2px;
    color: #10275b;
    font-size: .72rem;
}

.usapr-home-registration-legend span {
    display: flex;
    gap: 7px;
    align-items: center;
    color: #5f7096;
    font-size: .64rem;
}

.usapr-home-registration-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dfe4ec;
}

.usapr-home-registration-legend .is-low i { background: #4fc493; }
.usapr-home-registration-legend .is-medium i { background: #f2bf48; }
.usapr-home-registration-legend .is-high i { background: #e9656a; }

.usapr-home-registration-visual figcaption {
    padding: 0 20px 16px;
    color: #6b7897;
    font-size: .72rem;
}

.usapr-home-registration-visual figcaption strong {
    color: #334155;
}

/* `/states/` uses the same canonical SVG as a large neutral research locator. */
.usapr-states-hero {
    padding: clamp(32px, 4vw, 52px) !important;
}

.usapr-states-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.usapr-states-hero__copy > * {
    margin-inline: 0 !important;
}

.usapr-states-hero__map {
    min-height: 420px;
    background-image: url('../images/usa.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* Tint the neutral source map toward the same light-blue family used by State hubs. */
    filter:
        sepia(22%)
        saturate(180%)
        hue-rotate(175deg)
        brightness(108%)
        drop-shadow(0 18px 34px rgba(20, 56, 132, .10));
}

@media (max-width: 980px) {
    .usapr-state-guide .wp-block-post-content {
        grid-template-columns: 1fr;
        width: min(760px, calc(100% - 32px));
    }

    .usapr-state-guide .wp-block-post-content > .usapr-page-header,
    .usapr-state-guide .usapr-state-hub__visual,
    .usapr-state-guide .usapr-state-statistics,
    .usapr-state-guide .usapr-state-hub__body {
        grid-column: 1;
    }

    .usapr-state-guide .wp-block-post-content > .usapr-page-header {
        grid-row: 1;
        max-width: none;
        padding-bottom: 8px;
    }

    .usapr-state-guide .usapr-state-hub__visual { grid-row: 2; }
    .usapr-state-guide .usapr-state-statistics { grid-row: 3; }
    .usapr-state-guide .usapr-state-hub__body { grid-row: 4; }

    .usapr-states-hero__grid {
        grid-template-columns: 1fr;
    }

    .usapr-states-hero__map {
        min-height: 330px;
    }

    .usapr-home-registration-visual__body {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .usapr-home-registration-map {
        transform: none;
    }

    .usapr-home-registration-legend {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
    }

    .usapr-home-registration-legend strong {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .usapr-state-hub__visual .usapr-state-map {
        padding-bottom: 70px;
    }

    .usapr-state-hub__visual .usapr-state-map__svg {
        width: 100%;
        margin-left: 0;
    }

    .usapr-state-map__fallback,
    .usapr-home-map__fallback {
        min-height: 180px;
    }

    .usapr-home-registration-visual__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .usapr-home-registration-visual__metrics {
        grid-template-columns: 1fr;
    }

    .usapr-home-registration-visual__body {
        padding-inline: 12px;
    }

    .usapr-home-registration-map__svg {
        width: 100%;
        margin-left: 0;
    }

    .usapr-home-registration-legend {
        grid-template-columns: 1fr;
    }

    .usapr-states-hero {
        padding: 24px !important;
    }

    .usapr-states-hero__map {
        min-height: 240px;
    }
}