/**
 * Bugg World Map - public styles.
 *
 * Everything an admin is likely to restyle is a custom property, so the custom
 * CSS field rarely needs to fight selector specificity.
 */

.bwm-wrap {
	--bwm-fill: #bcc8cb;
	--bwm-ocean: #d6e0e2;
	--bwm-stroke: #edf0ef;
	--bwm-stroke-w: 1.4;
	--bwm-hover: #8fa3a8;
	--bwm-sel-color: #16242a;
	--bwm-sel-width: 1.4;
	--bwm-marker-r: 2.6;
	--bwm-zoom-size: 44px;
	--bwm-radius: 3px;

	--bwm-pop-bg: #ffffff;
	--bwm-pop-fg: #16242a;
	--bwm-pop-muted: #4a5c64;
	--bwm-pop-accent: #0e6e77;
	--bwm-pop-font: inherit;
	--bwm-pop-title: 1rem;
	--bwm-pop-body: 0.8rem;
	--bwm-pop-link: 0.72rem;
	--bwm-pop-w: 250px;

	--bwm-tip-bg: #16242a;
	--bwm-tip-fg: #ffffff;
	--bwm-tip-size: 12px;

	position: relative;
	max-width: 100%;
}

/*
 * Reserve the aspect ratio so injecting the SVG doesn't shift the layout.
 * 2.294 is the ratio of the generated viewBox with Antarctica removed - keep
 * these in sync if the map is ever regenerated.
 */
.bwm-stage {
	position: relative;
	aspect-ratio: 2.294 / 1;
	background: var(--bwm-ocean);
	border-radius: var(--bwm-radius);
	overflow: hidden;
	touch-action: none;
}

/* An explicit height wins over the aspect ratio. */
.bwm-wrap[style*="--bwm-height"] .bwm-stage {
	aspect-ratio: auto;
	height: var(--bwm-height);
}

/* ---------- layout modes ---------- */

/*
 * Full-bleed fallback for classic themes that don't support alignfull. The
 * negative margins let the box grow to the viewport without setting an
 * explicit width, which avoids the horizontal scrollbar that 100vw causes on
 * desktop (vw includes the scrollbar gutter, the content box does not).
 *
 * Block themes handle .alignfull themselves and this is harmless there.
 */
.bwm-wrap--wide,
.bwm-wrap--full {
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	max-width: 100vw;
}

.bwm-wrap--full .bwm-stage,
.bwm-wrap--wide .bwm-stage {
	border-radius: 0;
}

/*
 * A full-page map is taller than the map's own 2.29:1 proportions, so the SVG
 * is letterboxed rather than cropped - nothing is cut off. Because the stage
 * background is the ocean colour, the letterbox reads as more ocean rather
 * than as empty space, so the map still fills the page visually.
 *
 * Set fit="slice" on the shortcode to crop instead: the map covers every
 * pixel, at the cost of losing the top and bottom edges.
 */
.bwm-stage[data-fit="slice"] svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bwm-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bwm-pop-muted);
}

.bwm-stage svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------- territories ---------- */

.bwm-stage .wm-c {
	fill: var(--bwm-fill);
	stroke: var(--bwm-stroke);
	stroke-width: var(--bwm-stroke-w);
	transition: fill 0.12s ease;
	vector-effect: non-scaling-stroke;
}

/*
 * Only territories that open a popup get the pointer cursor. Everything else
 * still highlights and names itself on hover, but shouldn't imply a click
 * target that isn't there.
 */
.bwm-stage .wm-c.bwm-has-popup {
	cursor: pointer;
}

/*
 * Hover only where a pointer can actually hover. On touch there is no hover
 * state, and applying one leaves a country stuck in the hover colour after a
 * tap until something else is touched.
 */
@media (hover: hover) and (pointer: fine) {
	.bwm-stage .wm-c:hover {
		fill: var(--bwm-hover);
	}
}

.bwm-stage .wm-c:focus-visible {
	outline: none;
	stroke: var(--bwm-sel-color);
	stroke-width: 1.6;
	stroke-opacity: 1;
}

.bwm-stage .wm-c.is-active {
	stroke: var(--bwm-sel-color);
	stroke-width: var(--bwm-sel-width);
	paint-order: stroke;
}

.bwm-stage .wm-mark {
	r: var(--bwm-marker-r);
	stroke-width: 0.55;
}

.bwm-overlay .bwm-pattern {
	pointer-events: none;
	stroke: none;
}

/* ---------- hover tooltip ---------- */

.bwm-tip {
	position: absolute;
	z-index: 6;
	max-width: 220px;
	padding: 4px 8px;
	border-radius: var(--bwm-radius);
	background: var(--bwm-tip-bg);
	color: var(--bwm-tip-fg);
	font-family: var(--bwm-pop-font);
	font-size: var(--bwm-tip-size);
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.1s ease;
}

.bwm-tip.is-on {
	opacity: 1;
}

/* ---------- zoom controls ---------- */

.bwm-zoom {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 5px;
	z-index: 4;
}

.bwm-zoom--top-left {
	top: 10px;
	left: 10px;
}

.bwm-zoom--top-right {
	top: 10px;
	right: 10px;
}

.bwm-zoom--bottom-left {
	bottom: 10px;
	left: 10px;
}

.bwm-zoom--bottom-right {
	bottom: 10px;
	right: 10px;
}

.bwm-zoom button {
	width: var(--bwm-zoom-size);
	height: var(--bwm-zoom-size);
	padding: 0;
	border: 1px solid rgba(22, 36, 42, 0.15);
	border-radius: var(--bwm-radius);
	background: rgba(255, 255, 255, 0.92);
	color: var(--bwm-pop-fg);
	/* Glyph scales with the button so a larger control isn't mostly padding. */
	font-size: calc( var(--bwm-zoom-size) * 0.44 );
	line-height: 1;
	cursor: pointer;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.bwm-zoom button:hover {
	background: #fff;
}

.bwm-zoom button:focus-visible {
	outline: 2px solid var(--bwm-sel-color);
	outline-offset: 2px;
}

.bwm-zoom button:disabled {
	opacity: 0.4;
	cursor: default;
}

/* ---------- popup ---------- */

.bwm-pop {
	position: absolute;
	z-index: 5;
	width: var(--bwm-pop-w);
	max-width: calc(100% - 16px);
	padding: 14px 15px 13px;
	background: var(--bwm-pop-bg);
	color: var(--bwm-pop-fg);
	font-family: var(--bwm-pop-font);
	border-radius: var(--bwm-radius);
	box-shadow: 0 10px 28px -12px rgba(22, 36, 42, 0.45);
	opacity: 0;
	transform: translateY(5px);
	pointer-events: none;
	transition: opacity 0.14s ease, transform 0.14s ease;
}

.bwm-pop.is-open {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.bwm-pop__bar {
	display: block;
	height: 3px;
	border-radius: 2px;
	margin-bottom: 9px;
	background: var(--bwm-fill);
}

.bwm-pop__title {
	margin: 0 0 6px;
	font-family: inherit;
	font-size: var(--bwm-pop-title);
	line-height: 1.2;
	font-weight: 600;
}

.bwm-pop__body {
	margin: 0 0 11px;
	font-size: var(--bwm-pop-body);
	line-height: 1.5;
	color: var(--bwm-pop-muted);
}

.bwm-pop__body:empty {
	display: none;
}

.bwm-pop__link {
	display: inline-block;
	font-size: var(--bwm-pop-link);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bwm-pop-accent);
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 2px;
}

.bwm-pop__link:hover,
.bwm-pop__link:focus {
	color: var(--bwm-pop-fg);
}

.bwm-pop__x {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 32px;
	height: 32px;
	border: 0;
	background: none;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: var(--bwm-pop-muted);
}

.bwm-pop__x:hover {
	color: var(--bwm-pop-fg);
}

/* ---------- mobile ---------- */

/*
 * Below 600px a 250px floating card covers most of the map and lands partly
 * offscreen near the edges. Docking it to the bottom as a sheet keeps the map
 * visible and puts the link within thumb reach.
 */
@media (max-width: 600px) {
	.bwm-pop {
		left: 0 !important;
		right: 0;
		top: auto !important;
		bottom: 0;
		width: 100%;
		max-width: none;
		border-radius: var(--bwm-radius) var(--bwm-radius) 0 0;
		padding: 16px 18px 20px;
		transform: translateY(100%);
		box-shadow: 0 -8px 28px -14px rgba(22, 36, 42, 0.5);
	}

	.bwm-pop.is-open {
		transform: translateY(0);
	}

	.bwm-pop__title {
		font-size: calc(var(--bwm-pop-title) * 1.05);
	}

	.bwm-pop__link {
		display: block;
		padding: 10px 0;
		text-align: center;
		border: 1.5px solid currentColor;
		border-radius: var(--bwm-radius);
	}

	/*
	 * The bottom-right set would sit under the popup sheet on a phone, so on
	 * small screens only the top set is shown.
	 */
	.bwm-zoom--bottom-right,
	.bwm-zoom--bottom-left {
		display: none;
	}

	/* Unless it is the only set, in which case hiding it would leave the map
	   with no controls at all. */
	.bwm-zoom.is-solo {
		display: flex;
	}
}

/* ---------- accessible fallback ---------- */

/*
 * Visually hidden but present for screen readers, and the visible path when
 * the SVG fails to load. 236 unlabelled paths are not navigable on their own.
 */
.bwm-fallback {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bwm-failed .bwm-fallback {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	list-style: none;
	columns: 2;
}

.bwm-failed .bwm-fallback li {
	break-inside: avoid;
	margin-bottom: 0.5em;
}

@media (max-width: 600px) {
	.bwm-failed .bwm-fallback {
		columns: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bwm-stage .wm-c,
	.bwm-pop,
	.bwm-stage #wm-viewport {
		transition: none;
	}
}