/* Innermedia 2D Map – the map, its markers and the popups.

   Colours and sizes are custom properties a theme sets on :root (the
   defaults below sit in :where(), so any theme rule wins whatever the load
   order). The popups are native <dialog> elements in the browser's top
   layer, so they never sit under a header or inside a clipped section. */

:where(:root) {
	--im-2d-map-accent: #1f4e8c;            /* pin disc, label pill */
	--im-2d-map-accent-hover: #10294a;      /* pin disc on hover */
	--im-2d-map-accent-contrast: #fff;      /* text and rings on the accent */
	--im-2d-map-note: #b32d2e;              /* the logged-in notes */
	--im-2d-map-popup-bg: #fff;
	--im-2d-map-media-bg: #10294a;          /* behind images and the video poster */
	--im-2d-map-control-bg: #fff;           /* carousel arrows */
	--im-2d-map-control-text: #10294a;
	--im-2d-map-control-hover-bg: var(--im-2d-map-accent);
	--im-2d-map-control-hover-text: var(--im-2d-map-accent-contrast);
	--im-2d-map-dot: rgba(255, 255, 255, 0.6);
	--im-2d-map-dot-active: #fff;
	--im-2d-map-close-bg: var(--im-2d-map-accent);  /* the close button: a solid disc, plain to see */
	--im-2d-map-close-text: var(--im-2d-map-accent-contrast);
	--im-2d-map-close-hover-bg: var(--im-2d-map-accent-hover);
	--im-2d-map-scrollbar: var(--im-2d-map-accent);           /* the popup scrollbar's thumb */
	--im-2d-map-scrollbar-track: rgba(0, 0, 0, 0.1);          /* and its track */
	--im-2d-map-scrollbar-hover: var(--im-2d-map-accent-hover);
	--im-2d-map-backdrop: rgba(0, 0, 0, 0.6);
	--im-2d-map-radius: 12px;
	--im-2d-map-title-size: 32px;
	--im-2d-map-focus: var(--im-2d-map-accent);
	--im-2d-map-carousel-fade: 0s;          /* a cross-fade between carousel slides; 0s swaps them instantly */
}

/* ── The map ───────────────────────────────────────────── */
.im-2d-map__header {
	margin-bottom: 30px;
}
.im-2d-map__title {
	margin-bottom: 5px;
}
.im-2d-map__subtitle {
	margin: 0;
}
.im-2d-map__note {
	margin: 0 0 20px;
	font-weight: 700;
	color: var(--im-2d-map-note);
}

.im-2d-map__stage {
	position: relative;
}
.im-2d-map__image {
	display: block;
	width: 100%;
	height: auto;
}

/* Both kinds of marker are buttons centred on their point */
.im-2d-map__marker,
.im-2d-map__pin {
	position: absolute;
	z-index: 2;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 0;
	text-align: left;
	cursor: pointer;
	transform: translate(-50%, -50%);
	-webkit-tap-highlight-color: transparent;
}
.im-2d-map__marker:focus-visible,
.im-2d-map__pin:focus-visible {
	outline: 3px solid var(--im-2d-map-focus);
	outline-offset: 3px;
}

/* An illustration marker: the location's own image, sized by the template as
   its share of the map's width (and layered by it), so it keeps its place
   and size at any screen width. Hovering lifts it with a glow, or swaps in
   the hover image where one is set. */
.im-2d-map__marker {
	display: block;
}
.im-2d-map__marker img {
	display: block;
	width: 100%;
	height: auto;
	transition: filter 0.3s ease;
}
.im-2d-map__marker .im-2d-map__marker-hover {
	display: none;
}
.im-2d-map__marker:hover,
.im-2d-map__marker:focus-visible {
	z-index: 100 !important; /* over the template's layer */
}
.im-2d-map__marker:hover img,
.im-2d-map__marker:focus-visible img {
	filter: brightness(1.1) drop-shadow(0 0 15px rgba(255, 255, 255, 1));
}
.im-2d-map__marker.has-hover:hover .im-2d-map__marker-image,
.im-2d-map__marker.has-hover:focus-visible .im-2d-map__marker-image {
	display: none;
}
.im-2d-map__marker.has-hover:hover .im-2d-map__marker-hover,
.im-2d-map__marker.has-hover:focus-visible .im-2d-map__marker-hover {
	display: block;
}

/* A pin: a disc with a centre dot; the place name slides out beside it on
   hover from tablet up (a phone has no hover – the popup's title names it).
   Pins near the right edge (.is-flipped) show the name on their left. */
.im-2d-map__pin {
	display: flex;
	align-items: center;
	color: var(--im-2d-map-accent-contrast);
}
.im-2d-map__pin-dot {
	position: relative;
	z-index: 1;
	display: block;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border: 2px solid var(--im-2d-map-accent-contrast);
	border-radius: 50%;
	background: var(--im-2d-map-accent);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	transition: background 0.3s ease, transform 0.3s ease;
}
.im-2d-map__pin-dot::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--im-2d-map-accent-contrast);
	transform: translate(-50%, -50%);
}
.im-2d-map__pin-label {
	display: none;
}
.im-2d-map__pin:hover,
.im-2d-map__pin:focus-visible {
	z-index: 3;
}
.im-2d-map__pin:hover .im-2d-map__pin-dot,
.im-2d-map__pin:focus-visible .im-2d-map__pin-dot {
	background: var(--im-2d-map-accent-hover);
	transform: scale(1.15);
}

@media (min-width: 768px) {
	.im-2d-map__pin-dot {
		width: 28px;
		height: 28px;
	}
	.im-2d-map__pin-label {
		display: block;
		position: absolute;
		top: 50%;
		left: calc(100% - 14px);
		padding: 6px 14px 6px 24px;
		border-radius: 0 999px 999px 0;
		background: var(--im-2d-map-accent);
		font-size: 14px;
		font-weight: 700;
		line-height: 1.2;
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-50%);
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}
	.im-2d-map__pin.is-flipped .im-2d-map__pin-label {
		right: calc(100% - 14px);
		left: auto;
		padding: 6px 24px 6px 14px;
		border-radius: 999px 0 0 999px;
	}
	.im-2d-map__pin:hover .im-2d-map__pin-label,
	.im-2d-map__pin:focus-visible .im-2d-map__pin-label {
		opacity: 1;
		visibility: visible;
	}
}

/* ── A location's popup ────────────────────────────────── */
/* With media: 16:9 at 80vh on landscape screens – the media filling one
   half and the copy scrolling in the other – and stacked on portrait ones,
   where the box runs to 80vh and scrolls as a whole. Text only: a card as
   tall as its copy, up to 80vh. */
html.im-2d-map-is-open {
	overflow: hidden;
}

.im-2d-map-popup {
	box-sizing: border-box;
	width: min(calc(80vh * 16 / 9), calc(100vw - 48px));
	max-width: none;
	max-height: 80vh;
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--im-2d-map-radius);
	background: var(--im-2d-map-popup-bg);
	color: var(--im-2d-map-popup-text, inherit);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.im-2d-map-popup[open] {
	display: flex;
	animation: im-2d-map-in 0.2s ease-out;
}
.im-2d-map-popup::backdrop {
	background: rgba(0, 0, 0, 0.6);
	background: var(--im-2d-map-backdrop);
	animation: im-2d-map-fade 0.2s ease-out;
}
@keyframes im-2d-map-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}
@keyframes im-2d-map-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.im-2d-map-popup__inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
	max-height: 80vh;
	overflow: hidden auto;
}
/* The copy's scrollbar is always shown, so a popup whose copy runs on reads
   as scrollable before anyone tries. Where the system hides scrollbars until
   they are used (macOS, Windows 11, phones), a native bar stays hidden: so in
   Chrome, Edge and Safari the bar is the ::-webkit-scrollbar one, which is
   always drawn – and only while scrollbar-color and scrollbar-width are left
   at auto, since Chrome ignores those pseudo-elements on an element setting
   either. Firefox has no always-shown bar; it gets the system's own in the
   popup's colours. */
.im-2d-map-popup__inner,
.im-2d-map-popup__body {
	scrollbar-color: var(--im-2d-map-scrollbar) var(--im-2d-map-scrollbar-track);
}
@supports selector(::-webkit-scrollbar) {
	.im-2d-map-popup__inner,
	.im-2d-map-popup__body {
		scrollbar-color: auto;
		scrollbar-width: auto;
	}
	.im-2d-map-popup__inner::-webkit-scrollbar,
	.im-2d-map-popup__body::-webkit-scrollbar {
		width: 12px;
	}
	.im-2d-map-popup__inner::-webkit-scrollbar-track,
	.im-2d-map-popup__body::-webkit-scrollbar-track {
		border-radius: 6px;
		background: var(--im-2d-map-scrollbar-track);
	}
	.im-2d-map-popup__inner::-webkit-scrollbar-thumb,
	.im-2d-map-popup__body::-webkit-scrollbar-thumb {
		border: 2px solid transparent;
		border-radius: 6px;
		background: var(--im-2d-map-scrollbar) padding-box;
	}
	.im-2d-map-popup__inner::-webkit-scrollbar-thumb:hover,
	.im-2d-map-popup__body::-webkit-scrollbar-thumb:hover {
		background: var(--im-2d-map-scrollbar-hover) padding-box;
	}
}

.im-2d-map-popup__close {
	position: absolute;
	top: 12px;
	right: 22px; /* clear of the always-shown scrollbar at the popup's right edge */
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--im-2d-map-close-bg);
	color: var(--im-2d-map-close-text);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: background 0.3s ease;
}
.im-2d-map-popup__close:hover,
.im-2d-map-popup__close:focus-visible {
	background: var(--im-2d-map-close-hover-bg);
}
.im-2d-map-popup__close svg {
	width: 22px;
	height: 22px;
}
.im-2d-map-popup__close:focus-visible,
.im-2d-map-popup__nav:focus-visible,
.im-2d-map-popup__dot:focus-visible {
	outline: 3px solid var(--im-2d-map-focus);
	outline-offset: 2px;
}
/* drawn inside: the media panel clips anything outside it */
.im-2d-map-popup__play:focus-visible,
.im-2d-map-popup__track:focus-visible {
	outline: 3px solid var(--im-2d-map-focus);
	outline-offset: -3px;
}

/* the media side */
.im-2d-map-popup__media {
	position: relative;
	flex-shrink: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--im-2d-map-media-bg);
}
.im-2d-map-popup__media > img,
.im-2d-map-popup__media > iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

/* the carousel: the slides stacked in the panel, one shown at a time –
   stepped by the arrows, the dots, the arrow keys or a sideways swipe
   (assets/js/map.js). They swap instantly unless --im-2d-map-carousel-fade
   sets a cross-fade. */
.im-2d-map-popup__gallery {
	position: relative;
	height: 100%;
}
.im-2d-map-popup__track {
	position: relative;
	z-index: 0;
	height: 100%;
	overflow: hidden;
	touch-action: pan-y pinch-zoom; /* a sideways swipe is the script's */
}
/* With a fade set, the slide being left stays put, fully shown, under the
   one fading in, and only goes once that has faded in – so the change never
   dips through to the panel's background. */
.im-2d-map-popup__slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0s linear var(--im-2d-map-carousel-fade), visibility 0s linear var(--im-2d-map-carousel-fade);
}
.im-2d-map-popup__slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity var(--im-2d-map-carousel-fade) ease;
}
.im-2d-map-popup__slide > img,
.im-2d-map-popup__slide > iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
.im-2d-map-popup__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--im-2d-map-control-bg);
	color: var(--im-2d-map-control-text);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background 0.3s ease, color 0.3s ease;
}
.im-2d-map-popup__nav svg {
	width: 22px;
	height: 22px;
}
.im-2d-map-popup__nav:hover,
.im-2d-map-popup__nav:focus-visible {
	background: var(--im-2d-map-control-hover-bg);
	color: var(--im-2d-map-control-hover-text);
}
.im-2d-map-popup__nav.is-prev {
	left: 12px;
}
.im-2d-map-popup__nav.is-next {
	right: 12px;
}
.im-2d-map-popup__dots {
	position: absolute;
	right: 0;
	bottom: 10px;
	left: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 2px;
	pointer-events: none; /* only the dots themselves take clicks */
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* a video playing in the carousel: the dots step aside from its controls */
.im-2d-map-popup__gallery.is-playing .im-2d-map-popup__dots {
	opacity: 0;
	visibility: hidden;
}
.im-2d-map-popup__dot {
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	pointer-events: auto;
}
.im-2d-map-popup__dot::before {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	margin: auto;
	border-radius: 50%;
	background: var(--im-2d-map-dot);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	transition: background 0.3s ease;
}
.im-2d-map-popup__dot[aria-current="true"]::before,
.im-2d-map-popup__dot:hover::before {
	background: var(--im-2d-map-dot-active);
}

/* the click-to-play video poster, on its own or as a slide */
.im-2d-map-popup__play {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--im-2d-map-media-bg);
	cursor: pointer;
}
.im-2d-map-popup__play img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.im-2d-map-popup__play-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.25);
	transition: background 0.3s ease;
}
.im-2d-map-popup__play-icon svg {
	width: 64px;
	height: 64px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.im-2d-map-popup__play:hover .im-2d-map-popup__play-icon,
.im-2d-map-popup__play:focus-visible .im-2d-map-popup__play-icon {
	background: rgba(0, 0, 0, 0.45);
}

/* the copy side */
.im-2d-map-popup__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: 30px;
}
.im-2d-map-popup.no-media .im-2d-map-popup__body {
	padding-top: 60px; /* clear of the close button */
}
.im-2d-map-popup__title {
	margin: 0;
	font-size: var(--im-2d-map-title-size);
	line-height: 1.2;
	color: var(--im-2d-map-popup-title, inherit);
}
.im-2d-map-popup__content > :last-child {
	margin-bottom: 0;
}
.im-2d-map-popup__button {
	margin-top: auto;
}

.im-2d-map-popup.no-media {
	width: min(800px, calc(100vw - 48px));
}

@media (min-width: 768px) and (orientation: landscape) {
	.im-2d-map-popup.has-media {
		height: min(80vh, calc((100vw - 48px) * 9 / 16));
	}
	.im-2d-map-popup.has-media .im-2d-map-popup__inner {
		flex-direction: row;
		max-height: none;
		overflow: hidden;
	}
	.im-2d-map-popup.has-media .im-2d-map-popup__media {
		width: 50%;
		height: 100%;
		aspect-ratio: auto;
	}
	.im-2d-map-popup.has-media .im-2d-map-popup__body {
		width: 50%;
		height: 100%;
		box-sizing: border-box;
		padding: 40px 70px 40px 30px;
		overflow-y: auto;
	}
	.im-2d-map-popup.no-media .im-2d-map-popup__body {
		padding: 50px 70px 50px 60px;
	}
}

@media (orientation: portrait) {
	.im-2d-map-popup {
		width: min(calc(100vw - 32px), 760px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.im-2d-map__marker img,
	.im-2d-map__pin-dot,
	.im-2d-map-popup__close,
	.im-2d-map__pin-label,
	.im-2d-map-popup__nav,
	.im-2d-map-popup__dots,
	.im-2d-map-popup__dot::before,
	.im-2d-map-popup__play-icon,
	.im-2d-map-popup__slide,
	.im-2d-map-popup__slide.is-active {
		transition: none;
	}
	.im-2d-map-popup[open],
	.im-2d-map-popup::backdrop {
		animation: none;
	}
}