/* WINGS World Map block — a simplified, always-on version of the
   homepage's Slide 7 interactive map (see wings/css/home.css and
   wings/js/home-slides.js for the original, which is tied to the
   fullpage slide deck and its HALF/FULL scroll-reveal mechanics).
   This version shows the whole map immediately, all regions
   interactive from the start — no slide-deck concepts here. Scoped
   under .wings-map-block so it never collides with home.css. */

.wings-map-block {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    aspect-ratio: 5088 / 2292; /* matches map.svg's own viewBox */
    background: var(--plum);
    overflow: hidden;
}

.wings-map-block__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.page-id-8846 .wings-map-block__image { opacity: 0; }

.wings-map-block__regions,
.wings-map-block .map-interactive__labels {
    position: absolute;
    inset: 0;
}

.wings-map-block .map-interactive__labels { pointer-events: none; z-index: 3; }

.wings-map-block .map-region { position: absolute; z-index: 1; }
.wings-map-block .map-region[data-region="asia-pacific"] { z-index: 0; }
.wings-map-block .map-region:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.wings-map-block .map-region-hit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: block;
}
.wings-map-block .map-region-hit image { cursor: pointer; }

/* .map-region-shape: a single silhouette per region. Two techniques,
   depending on the asset (see wings_map_inline_region_shape() in
   inc/blocks.php and the $inline_shape_assets list in render.php /
   template-home-slides.php):

   1) north-america + latin-america (raster-in-svg assets, img/map/*-white.svg
      set as --region-mask inline by PHP) still use a CSS mask-image,
      which has always worked fine for them.
   2) europe / mena / sub-saharan-africa / asia-pacific (true vector
      <path> assets) are now inlined directly as <svg> markup instead
      of used as a mask-image source. CSS mask-image on an *external*
      SVG resource turned out to be unreliable across browsers for
      these specific files (blank/partial first paint), almost
      certainly a mask + async-resource-load repaint bug — inlining
      the shape removes that external fetch/decode step entirely.
      These use plain `color` + the SVG's own fill="currentColor".

   Both variants transition color the same way: pale at rest, gold on
   hover/active/focus — no second "gold" image cross-fading any more. */
.wings-map-block .map-region-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    background-color: #BEADB5; /* solid equivalent of the base map.svg's own silhouette colour (white at .65 opacity over --plum, matched exactly -- see img/map/map.svg's fill-opacity) -- matching it exactly means the region overlay and the base map's independently-traced coastline blend into one seamless colour instead of showing a visible double-edge where their tracings don't pixel-for-pixel coincide. It's also NOT an alpha colour, so two adjacent regions' rectangles overlapping (they legitimately do, e.g. mena/sub-saharan-africa, europe/asia-pacific) can never double up and brighten at the seam the way a translucent rgba() would. */
    -webkit-mask-image: var(--region-mask);
    mask-image: var(--region-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color .3s ease-out;
}
.wings-map-block .map-region:focus-visible .map-region-shape,
.wings-map-block .map-region.is-active .map-region-shape { background-color: #EFB935; }

/* inline-SVG variant: no mask, just colour + fill="currentColor". Same
   #BEADB5/#EFB935 values as above, kept in sync deliberately. */
.wings-map-block .map-region-shape--inline {
    background-color: transparent;
    -webkit-mask-image: none;
    mask-image: none;
    color: #BEADB5;
    transition: color .3s ease-out;
}
.wings-map-block .map-region-shape--inline svg {
    display: block;
    width: 100%;
    height: 100%;
}
.wings-map-block .map-region:focus-visible .map-region-shape--inline,
.wings-map-block .map-region.is-active .map-region-shape--inline { color: #EFB935; background-color: transparent; }

.wings-map-block .map-label {
    position: absolute;
    min-width: 220px;
    width: fit-content;
    max-width: 42vw;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
}
.wings-map-block .map-label.is-active { opacity: 1; transform: translateY(0); }
.wings-map-block .map-label h3 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.6);
}
.wings-map-block .map-label ul.chev { margin: 0; list-style: none; padding: 0; }
.wings-map-block .map-label ul.chev li { position: relative; padding-left: 18px; color: #fff; line-height: 1.4; margin-bottom: 3px; }
.wings-map-block .map-label ul.chev li::before { content: "\25B8"; position: absolute; left: 0; top: 0; color: #EFB935; }

@media (max-width: 700px) {
    .wings-map-block .map-label { width: 160px; max-width: 60vw; }
}