/* Coverage map styles for the [coverage_map] shortcode.
   Source: EXTRA/coverage-map-page-valuation-html-bk.html (valuation design).
   Only styles for markup the shortcode actually outputs are kept — the
   mainnav / menu-toggle / breadcrumb / buttons / newsletter styles from the
   reference were removed because those come from the theme. */

.wrap {
    max-width: 1420px;
    margin: 0 auto;
}

.label {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: #F47640;
}

/* HERO + MAP */
.hero {
    background: #f8f6f1;
}

.hero .wrap {
    padding: 50px;
}

.hero .label {
    margin-bottom: 16px;
}

.hero h1 {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    color: #333333;
    font-size: 62px;
    max-width: 710px;
    line-height: normal;
}

.hero h1 em {
    font-style: normal;
    color: #F47640;
}

.hero p.lead {
    font-family: 'Sora', sans-serif;
    margin-top: 17.6px;
    font-size: 20px;
    line-height: 33px;
    color: #333333;
    max-width: 710px;
}

.mapwrap {
    margin-top: 32px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 24px;
    align-items: center;
    max-width: 1150px;
}

#map {
    width: 100%;
    height: auto;
    display: block;
}

.state {
    stroke: #fff;
    stroke-width: .4px;
    fill: rgba(112, 112, 112, 0.8);
    transition: fill .15s;
}

.state.primary {
    fill: #0086C0;
    cursor: pointer;
}

.state.primary:hover {
    fill: #F47640;
}

/* D.C. overlay marker — real D.C. is a diamond (rotated 45deg by the JS),
   drawn on every map variant. */
.dc-marker rect {
    fill: #D62828;
    stroke: #fff;
    stroke-width: 1.2px;
    cursor: pointer;
    transition: fill .15s;
}

.dc-marker:hover rect {
    fill: #F47640;
}

.legend {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.legend .li {
    display: flex;
    gap: 11.2px;
    align-items: flex-start;
}

.legend .sw {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 1px;
}

.legend .sw.pri {
    background: #0086C0;
}

.legend .sw.sec {
    background: rgba(112, 112, 112, 0.8);
}

.legend h4 {
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #333333;
    line-height: normal;
}

.legend p {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: #333333;
    line-height: 120%;
    opacity: 0.8;
}

.maptip {
    position: fixed;
    pointer-events: none;
    background: #333333;
    color: #fff;
    font-size: 12.48px;
    font-weight: 600;
    padding: 6.4px 11.2px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity .12s;
    z-index: 80;
    white-space: nowrap;
}

.maptip small {
    display: block;
    font-weight: 400;
    color: rgba(255, 255, 255, .7);
    font-size: 11.2px;
}

/* DIRECTORY */
.dir {
    background: #ffffff;
    border-top: 1px solid #f5f5f5;
}

.dir .wrap {
    padding: 50px;
	background: transpare
}

.sec-head {
    margin-bottom: 9.6px;
}

.sec-head .label {
    margin-bottom: 14.4px;
}

.sec-head h2 {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    color: #333333;
    font-size: 62px;
    line-height: normal;
}

.sec-head h2 em {
    font-style: normal;
    color: #F47640;
}

.dir-note {
    font-family: 'Sora', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 33px;
    color: #333333;
    opacity: 0.8;
    max-width: 910px;
}

.state-block {
    border-top: 1px solid #f5f5f5;
    padding-block: 25.6px;
    scroll-margin-top: 120px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.state-block:first-child {
    border-top: none;
}

.state-block h3 {
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 28px;
    color: #333333;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0px;
}

.state-block h3 .pin {
    width: 28px;
    height: 28px;
    stroke: #0086C0;
    fill: none;
    stroke-width: 2;
}

.state-block .cnt {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 33px;
    color: #333333;
    margin-bottom: 0px;
    opacity: 0.8;
}

.cities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 9.6px;
}

.cities a {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: rgba(51, 51, 51, 0.8);
    background: #ffffff;
    border: 1px solid #f5f5f5;
    border-radius: 100px;
    padding: 10px 12px;
    transition: all .16s;
}

.cities a:hover {
    border-color: #F47640;
    color: #F47640;
    background: rgba(237, 125, 49, 0.1);
}

.tabs {
    display: flex;
    gap: 6.4px;
    margin: 0px;
}

.tab-btn {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 120%;
    color: #333333;
    background: none;
    border: 1px solid #707070;
    border-radius: 100px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all .16s;
}

.tab-btn:hover {
    border-color: #0086C0;
    color: #0086C0;
}

.tab-btn.on {
    background: #0086C0 !important;
    border-color: #0086C0 !important;
    color: #fff !important;
}

.tabpanel {
    display: none;
}

.tabpanel.on {
    display: block;
}


/* ── CAPITAL VARIANT — added from EXTRA/principlerec-capital-coverage-v1.html ──
   The [coverage_map variant="capital"] shortcode renders a focus-state map
   and a chips section (no directory). The capital reference used a different
   palette/layout, so these rules are scoped to the .coverage-map--capital
   wrapper (added by the shortcode) and styled with the project's palette to
   match the rest of the site. */

.coverage-map--capital .state.focus {
    fill: #0086C0;
    cursor: pointer;
}

.coverage-map--capital .state.focus:hover {
    fill: #F47640;
}

.coverage-map--capital .legend .sw.focus {
    background: #0086C0;
}

.coverage-map--capital .legend .sw.nat {
    background: rgba(112, 112, 112, 0.8);
}

.coverage-map--capital .focussec {
    background: #ffffff;
    border-top: 1px solid #f5f5f5;
}

.coverage-map--capital .focussec .wrap {
    padding: 50px;
}

.coverage-map--capital .focussec p.intro {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    line-height: 33px;
    color: #333333;
    opacity: 0.8;
    max-width: 910px;
    margin: 1rem 0 1.8rem;
}

.coverage-map--capital .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 9.6px;
}

.coverage-map--capital .chips span {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    background: #ffffff;
    border: 1px solid #f5f5f5;
    border-left: 3px solid #0086C0;
    border-radius: 4px;
    padding: 10px 16px;
}

.coverage-map--capital .natline {
    margin-top: 1.8rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f5f5f5;
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #333333;
    opacity: 0.8;
    max-width: 910px;
    font-style: italic;
}

@media(max-width:1024px) {
	.hero .wrap,
	.coverage-map--capital .focussec .wrap,
	.dir .wrap {
		padding: 30px 12px;
	}
}
@media(max-width:820px) {
    .mapwrap {
        grid-template-columns: 1fr;
    }

    .legend {
        flex-direction: row;
        gap: 25.6px;
    }
}

@media(max-width:760px) {
    .dir .wrap {
        padding: 30px 12px;
    }
}

@media(max-width:991px) {
    .hero h1,
    .sec-head h2 {
        font-size: 48px;
    }

    .hero p.lead,
    .dir-note {
        font-size: 18px;
        line-height: 29px;
    }

    .legend h4 {
        font-size: 22px;
    }

    .legend p {
        font-size: 16px;
    }
}

@media(max-width:480px) {
    .hero .wrap {
        padding: 30px 12px;
    }

    .hero h1,
    .sec-head h2 {
        font-size: 36px;
    }

    .hero p.lead,
    .dir-note {
        font-size: 16px;
        line-height: 26px;
    }

    .state-block h3 {
        font-size: 24px;
    }

    .state-block .cnt {
        font-size: 16px;
        line-height: 26px;
    }

    .legend {
        flex-direction: column;
        gap: 16px;
    }

    .legend h4 {
        font-size: 20px;
    }

    .legend p {
        font-size: 14px;
    }
}