/* ==========================================================================
   county-map.css - Landing-page county SVG map popup (interactive-map.js).
   (Renamed from interactive-map.css; unrelated to the MapLibre map in map.js.)
   ========================================================================== */

/* Popup positioning */
#county-popup { display: none; position: fixed; z-index: 1055; width: 300px; }

/* Popup internals */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.stat-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: .82rem; }

/* Region badge colors */
.rbadge-r1 { background-color: #c697ff !important; color: #2a0060 !important; }
.rbadge-r2 { background-color: #FFFFB3 !important; color: #5a5000 !important; }
.rbadge-r3 { background-color: #BEBADA !important; color: #2a1f6e !important; }
.rbadge-r4 { background-color: #FB8072 !important; color: #6b0f05 !important; }
.rbadge-r5 { background-color: #80B1D3 !important; color: #0a2f4a !important; }
.rbadge-r6 { background-color: #FDB462 !important; color: #5a2800 !important; }
.rbadge-r7 { background-color: #00cd9b !important; color: #003d2e !important; }
.rbadge-r8 { background-color: #FCCDE5 !important; color: #6b0038 !important; }
.rbadge-r9 { background-color: #D9D9D9 !important; color: #2a2a2a !important; }

#map-legend {
    @media (max-width: 280px) {
        font-size: 0.66rem;
    }
    @media (min-width: 280px) and (max-width: 350px) {
        font-size: .77rem;
    }
    @media (min-width: 350px) and (max-width: 561px) {
        font-size: 0.88rem;
    }
    @media (min-width: 561px) and (max-width: 768px) {
        font-size: 1rem;
    }
    @media (min-width: 768px) {
        font-size: 1.25rem;
    }
}