/* --- Map Container --- */
@font-face {
    font-family: "FuturaCondensed";
    src: url("/assets/fonts/FuturaCondensed/FuturaCondensed.ttf") format("truetype");
}

.mapContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* aligns title + map to the left */

    position: sticky;
    top: 2rem; /* distance from top of viewport when stuck */

    width: 50%; /* tweak this to taste */
    transform-origin: top right;
}

.mw-body--map {
    padding: 5px 5px;
}

.mapContent {
    position: relative; /* This was inserted to place the markers relatively to this instead of mapContainer*/
    width: 100%;
    overflow: hidden; /* keep scaled image inside its container */
}

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

/* --- Location Markers --- */

.map-marker {
    position: absolute;
    transform: translate(-50%, -100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.map-marker.is-visible {
    opacity: 1;
}

.map-marker-arrow {
    display: block;
    width: 24px;
    height: auto;
}

.map-marker-label {
    position: absolute;
    /* default: above the arrow, centered horizontally */
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 2px;

    font-family: "FuturaCondensed", serif;
    color: white;
    text-shadow:
        -1px -1px 0 black,
        1px -1px 0 black,
        -1px 1px 0 black,
        1px 1px 0 black;
    font-size: 1.45rem;
    letter-spacing: 1px;
    white-space: nowrap;

}

/* Vertical flip: marker extends downward, arrow rotated, label below */
.map-marker.flip-vertical {
    transform: translate(-50%, 0); /* extend downward from coord */
}

.map-marker.flip-vertical .map-marker-arrow {
    transform: rotate(180deg); /* arrow now points up, tip at top of marker */
}

/* Label flips to below arrow when marker is near top of map */
.map-marker.flip-vertical .map-marker-label {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 2px;
}

/* Label anchored to the right of arrow tip (when marker is near left edge) */
.map-marker.label-right .map-marker-label {
    left: 50%;
    transform: translateX(0); /* no centering offset, label starts at arrow center */
}

/* Label anchored to the left of arrow tip (when marker is near right edge) */
.map-marker.label-left .map-marker-label {
    left: auto;
    right: 50%;
    transform: translateX(0);
}