/* continent-map.css — Leaflet map for continent L2 pages.
 *
 * The trick to "no grey bars + nothing cropped + nothing repeated" is to
 * make the CONTAINER aspect ratio match the Mercator projection's aspect
 * ratio for the bbox the JS is going to fitBounds() to. Then Leaflet's
 * default contain-fit fills the container exactly.
 *
 * Aspect ratios below are computed for each continent's hand-picked bbox
 * in the JS — change one without the other and you re-introduce letterbox
 * bars or cropping. Numbers are precise to 0.01 (close enough to look
 * pixel-clean at any reasonable viewport).
 */

.enc-continent-map {
    width: 100%;
    margin: 0 auto 1.5em;
    border-radius: 8px;
    overflow: hidden;
    background: #eef4f7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    min-height: 260px;       /* keep mobile maps usable */
    max-height: 75vh;        /* never dominate the viewport */
}

/* Aspect-ratio per continent, matching the JS's CONTINENT_BOUNDS bboxes
   projected through Web Mercator. width / height. */
.enc-continent-map[data-continent="world"]         { aspect-ratio: 1.70 / 1; }
.enc-continent-map[data-continent="africa"]        { aspect-ratio: 0.91 / 1; max-width: 700px; }
.enc-continent-map[data-continent="asia"]          { aspect-ratio: 0.99 / 1; max-width: 800px; }
.enc-continent-map[data-continent="europe"]        { aspect-ratio: 1.25 / 1; }
.enc-continent-map[data-continent="north-america"] { aspect-ratio: 1.10 / 1; }
.enc-continent-map[data-continent="south-america"] { aspect-ratio: 0.60 / 1; max-width: 520px; }
.enc-continent-map[data-continent="oceania"]       { aspect-ratio: 1.11 / 1; }

/* Continent name pills shown on the WORLD overview map only.
 * Clickable on the world view (.enc-continent-pill--link), static on
 * single-continent views. White text on dark semi-transparent background. */
.enc-continent-pill {
    background: transparent;
    border: 0;
}
.enc-continent-pill span,
.enc-continent-pill a {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(31, 41, 51, 0.82);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}
.enc-continent-pill--link a:hover,
.enc-continent-pill--link a:focus-visible {
    background: #4A7286;
    transform: translateY(-1px);
    outline: none;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
.enc-continent-pill--link a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
@media (max-width: 560px) {
    .enc-continent-pill span,
    .enc-continent-pill a { font-size: 10px; padding: 2px 7px; letter-spacing: 0; }
}

.enc-map-fallback {
    padding: 1em;
    color: #777;
    text-align: center;
    font-style: italic;
}

/* Small overlay toggle button (top-right corner of each map). Sits
 * alongside the zoom controls in a Leaflet bar. */
.enc-overlay-toggle a {
    display: block;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #1f2933;
    background: #fff;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.enc-overlay-toggle a:hover,
.enc-overlay-toggle a:focus-visible {
    background: #f5f7fa;
    color: #4A7286;
    outline: none;
}
.enc-overlay-toggle a[aria-pressed="true"] {
    background: #4A7286;
    color: #fff;
}
.enc-overlay-toggle a[aria-pressed="true"]:hover {
    background: #3d5f70;
    color: #fff;
}