/**
 * Interactive Map block — styles.
 *
 * Architecture: one world.svg lives inside .block-interactive-map. The
 * wrapper carries a data-active-region="<slug>" attribute (set initially
 * by PHP, updated by JS on tab click). Everything else here is just
 * reacting to that attribute and the per-path data-region / .is-active.
 */

.block-interactive-map {
    --imap-color-inactive: #ecf2ec;
    --imap-color-active:   #4b8248;
    --imap-color-stroke:   rgba(0, 0, 0, 0.08);
    --imap-badge-bg:       #ffc900;
    --imap-badge-fg:       #0e0e0e;
    --imap-faded-opacity:  0.3;
    --imap-transition:     0.3s ease;
    --imap-max-height:     640px;   /* SVG never renders taller than this */
}

/* ─── Map container ────────────────────────────────────────────────────── */
.block-interactive-map__map {
    position: relative;
    width: 100%;
    margin-inline: auto;
    text-align: center;     /* centres the SVG when JS sets a smaller width */
}
.block-interactive-map__map svg {
    display: inline-block;
    vertical-align: top;
    /* CSS fallback for when JS hasn't run yet. JS overrides these with
       explicit pixel dimensions so the SVG sits at the optimal size for
       its current viewBox aspect ratio without letterboxing. */
    width: 100%!important;
    height: auto;
    max-width: 100%;
    max-height: var( --imap-max-height, 40rem );

    /* Drag-to-pan affordance and touch handling */
    cursor: grab;
    touch-action: none;
}
.block-interactive-map__map svg:active {
    cursor: grabbing;
}

/* ─── Zoom controls (overlay on the map) ──────────────────────────────── */
.block-interactive-map__zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.block-interactive-map__zoom-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #ffffff;
    border-radius: 4px;
    color: #333;
    font: 500 18px/1 system-ui, -apple-system, sans-serif;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.block-interactive-map__zoom-btn:hover {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.3);
}
.block-interactive-map__zoom-btn:active {
    transform: scale(0.95);
}
.block-interactive-map__zoom-btn:focus-visible {
    outline: 2px solid var(--imap-color-active);
    outline-offset: 2px;
}

/* ─── Default state for every country path ────────────────────────────── */
/* Countries start light green at 10% opacity. The active region's paths
   then get bumped back to 100% by the rule below. */
.block-interactive-map svg path[data-country] {
    fill: var(--imap-color-inactive);
    stroke: var(--imap-color-stroke);
    stroke-width: 0.3;
    opacity: var(--imap-faded-opacity);
    transition: opacity var(--imap-transition), fill var(--imap-transition);
}

/* ─── Active region: full opacity ─────────────────────────────────────── */
.block-interactive-map[data-active-region="europe"]           svg path[data-region="europe"],
.block-interactive-map[data-active-region="africa"]           svg path[data-region="africa"],
.block-interactive-map[data-active-region="north_america"]    svg path[data-region="north_america"],
.block-interactive-map[data-active-region="south_america"]    svg path[data-region="south_america"],
.block-interactive-map[data-active-region="caribbean"]        svg path[data-region="caribbean"],
.block-interactive-map[data-active-region="middle_east_asia"] svg path[data-region="middle_east_asia"],
.block-interactive-map[data-active-region="oceania"]          svg path[data-region="oceania"] {
    opacity: 1;
}

/* ─── Ticked countries inside the active region: dark green ───────────── */
.block-interactive-map[data-active-region="europe"]           svg path[data-region="europe"].is-active,
.block-interactive-map[data-active-region="africa"]           svg path[data-region="africa"].is-active,
.block-interactive-map[data-active-region="north_america"]    svg path[data-region="north_america"].is-active,
.block-interactive-map[data-active-region="south_america"]    svg path[data-region="south_america"].is-active,
.block-interactive-map[data-active-region="caribbean"]        svg path[data-region="caribbean"].is-active,
.block-interactive-map[data-active-region="middle_east_asia"] svg path[data-region="middle_east_asia"].is-active,
.block-interactive-map[data-active-region="oceania"]          svg path[data-region="oceania"].is-active {
    fill: var(--imap-color-active);
}

/* ─── Badges: hidden by default, shown only for active region ─────────── */
.block-interactive-map svg .country-badge {
    opacity: 0;
    transition: opacity var(--imap-transition);
    pointer-events: none;
}
.block-interactive-map[data-active-region="europe"]           svg .country-badge[data-region="europe"],
.block-interactive-map[data-active-region="africa"]           svg .country-badge[data-region="africa"],
.block-interactive-map[data-active-region="north_america"]    svg .country-badge[data-region="north_america"],
.block-interactive-map[data-active-region="south_america"]    svg .country-badge[data-region="south_america"],
.block-interactive-map[data-active-region="caribbean"]        svg .country-badge[data-region="caribbean"],
.block-interactive-map[data-active-region="middle_east_asia"] svg .country-badge[data-region="middle_east_asia"],
.block-interactive-map[data-active-region="oceania"]          svg .country-badge[data-region="oceania"] {
    opacity: 1;
}

/* ─── Tab nav ─────────────────────────────────────────────────────────── */
.block-interactive-map__tabs {
    margin-bottom: 1.5rem;
}

/* ─── Editor previews ─────────────────────────────────────────────────── */
.block-interactive-map__empty,
.block-interactive-map__error {
    padding: 1rem 1.25rem;
    border: 1px dashed #c5c5c5;
    background: #fafafa;
    color: #555;
    font-size: 0.9rem;
    border-radius: 4px;
}