/**
 * Phase 4D cartographic presentation layer.
 * Loaded only with the Interactive Map and intentionally isolated from the
 * accepted site-wide theme, suggestion, warning-unlock and consent styles.
 */

.ags-map-cartography {
	pointer-events: none;
}

.ags-map-viewport {
	background: #0b2231;
	border-color: rgba(218, 187, 111, 0.52);
	overflow: hidden;
	clip-path: inset(0 round 12px);
	contain: paint;
	box-shadow: inset 0 0 42px rgba(2, 9, 15, 0.5), 0 18px 42px rgba(0, 0, 0, 0.24);
}

.ags-map-base {
	overflow: visible;
}

.ags-map-region path {
	fill: rgba(227, 190, 93, 0.08);
	stroke: rgba(255, 241, 192, 0.56);
	stroke-width: 2.25;
	stroke-dasharray: 7 5;
	vector-effect: non-scaling-stroke;
}

.ags-map-region:hover path,
.ags-map-region:focus-visible path {
	fill: rgba(244, 214, 132, 0.28);
	stroke: #fff3bd;
	stroke-width: 4;
}

.ags-map-region.is-selected path {
	fill: rgba(218, 176, 74, 0.23);
	stroke: #fff0a8;
	stroke-width: 4.5;
	stroke-dasharray: 12 4 3 4;
}

.ags-map-region:focus-visible {
	outline: none;
}

.ags-map-region-label {
	min-width: 86px;
	max-width: 142px;
	min-height: 44px;
	align-content: center;
	padding: 0.42rem 0.55rem;
	background: rgba(5, 18, 29, 0.91);
	border-color: rgba(235, 201, 114, 0.82);
	box-shadow: 0 5px 18px rgba(0, 0, 0, 0.48);
	backdrop-filter: blur(3px);
	isolation: isolate;
}

.ags-map-region-label[data-label-placement="callout"]::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -1;
	width: var(--region-leader-length, 0);
	height: 1px;
	background: rgba(255, 240, 168, 0.72);
	box-shadow: 0 0 0 1px rgba(5, 18, 29, 0.38);
	transform: rotate(var(--region-leader-angle, 0deg));
	transform-origin: 0 50%;
	pointer-events: none;
}

.ags-map-region-label strong,
.ags-map-region-label span {
	position: relative;
	z-index: 1;
}

.ags-map-region-label:hover,
.ags-map-region-label:focus-visible,
.ags-map-region-label[aria-current="true"] {
	color: #161006;
	background: #f4df9d;
	border-color: #fff4c4;
	outline: 3px solid rgba(255, 244, 196, 0.48);
	outline-offset: 2px;
}

.ags-map-region-label:hover span,
.ags-map-region-label:focus-visible span,
.ags-map-region-label[aria-current="true"] span {
	color: #463411;
}

.ags-map-region-label[aria-current="true"]::after {
	content: "Selected";
	font-size: 0.56rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ags-map-directory-jump {
	display: inline-block;
	margin-inline-start: 0.5rem;
	color: var(--ags-map-gold-light);
	font-weight: 700;
}

.ags-map-directory-jump:focus-visible {
	outline: 3px solid var(--ags-map-gold-light);
	outline-offset: 3px;
}

.ags-map-legend {
	width: fit-content;
	max-width: 100%;
	margin: 0 0 0.7rem auto;
	color: var(--ags-map-cream);
	background: rgba(7, 18, 29, 0.88);
	border: 1px solid rgba(218, 187, 111, 0.45);
	border-radius: 8px;
}

.ags-map-legend summary {
	min-height: 44px;
	padding: 0.65rem 0.8rem;
	cursor: pointer;
	font-size: 0.78rem;
	font-weight: 800;
	line-height: 1.5;
}

.ags-map-legend ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.55rem 1rem;
	margin: 0;
	padding: 0 0.85rem 0.85rem;
	list-style: none;
	font-size: 0.72rem;
}

.ags-map-legend li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.ags-map-legend__marker,
.ags-map-legend__region {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	background: #f8eed0;
	border: 2px solid #172438;
	border-radius: 50%;
}

.ags-map-legend__marker--featured {
	width: 19px;
	height: 19px;
	background: #f3d77d;
	border-color: #6f5014;
	border-radius: 4px;
	transform: rotate(45deg) scale(0.78);
}

.ags-map-legend__marker--wonder {
	width: 22px;
	height: 22px;
	color: #171006;
	background: #d8ad44;
	border-color: #fff0bd;
	border-radius: 5px;
	font-size: 0.78rem;
}

.ags-map-legend__region {
	width: 25px;
	height: 15px;
	background: repeating-linear-gradient(135deg, rgba(218, 176, 74, 0.42) 0 3px, transparent 3px 6px);
	border: 2px dashed #fff0a8;
	border-radius: 2px;
}

.ags-map-marker {
	width: 44px;
	height: 44px;
	color: #101827;
	background: transparent;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
}

.ags-map-marker:hover,
.ags-map-marker:focus-visible,
.ags-map-marker[aria-pressed="true"] {
	background: transparent;
	border-color: transparent;
}

.ags-map-marker:focus-visible {
	outline: 3px solid #fff2ad;
	outline-offset: 2px;
}

.ags-map-marker__symbol {
	display: grid;
	place-items: center;
	width: 19px;
	height: 19px;
	color: #101827;
	background: #f8eed0;
	border: 3px solid #172438;
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
	font-size: 0.7rem;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.ags-map-marker--featured .ags-map-marker__symbol {
	width: 24px;
	height: 24px;
	color: #2a1d05;
	background: #f3d77d;
	border-color: #6f5014;
	border-radius: 5px;
}

.ags-map-marker--wonder .ags-map-marker__symbol {
	width: 29px;
	height: 29px;
	color: #191105;
	background: #d8ad44;
	border-color: #fff0bd;
	border-radius: 7px;
	font-size: 0.94rem;
}

.ags-map-marker:hover .ags-map-marker__symbol,
.ags-map-marker:focus-visible .ags-map-marker__symbol,
.ags-map-marker[aria-pressed="true"] .ags-map-marker__symbol {
	box-shadow: 0 0 0 4px rgba(255, 240, 168, 0.52), 0 6px 14px rgba(0, 0, 0, 0.58);
	transform: scale(1.14);
}

.ags-map-marker__label {
	top: calc(50% + 17px);
	max-width: 145px;
	padding: 0.25rem 0.42rem;
	background: rgba(4, 14, 23, 0.94);
	border: 1px solid rgba(244, 223, 157, 0.32);
	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.36);
	font-size: 0.66rem;
	white-space: normal;
}

.ags-map-marker[data-tier="standard"] .ags-map-marker__label {
	opacity: 0;
	pointer-events: none;
}

.ags-map-marker[data-tier="standard"]:hover .ags-map-marker__label,
.ags-map-marker[data-tier="standard"]:focus-visible .ags-map-marker__label,
.ags-map-marker[data-tier="standard"][aria-pressed="true"] .ags-map-marker__label {
	opacity: 1;
}

.ags-interactive-map.has-region .ags-map-region.is-selected {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 760px) {
	.ags-map-legend {
		width: 100%;
		margin-inline: 0;
	}

	.ags-map-legend ul {
		grid-template-columns: 1fr;
	}

	.ags-map-directory-jump {
		display: block;
		margin: 0.5rem 0 0;
	}

	.ags-map-marker__label {
		display: none;
	}

	.ags-map-viewport {
		height: clamp(320px, 92vw, 430px);
		min-height: 0;
	}

	.ags-interactive-map.has-mobile-region-fit .ags-map-stage {
		inset: auto 0;
		top: var(--mobile-map-stage-top, 0);
		width: 100%;
		height: var(--mobile-map-stage-height, 50vw);
	}

	.ags-interactive-map.has-mobile-region-fit .ags-map-base,
	.ags-interactive-map.has-mobile-region-fit .ags-map-markers {
		inset: 0;
		width: 100%;
		height: 100%;
	}
}

@media (max-width: 480px) {
	.ags-map-viewport {
		height: clamp(320px, 92vw, 430px);
		min-height: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ags-map-marker__symbol,
	.ags-map-region path {
		transition: none;
	}
}

@media (forced-colors: active) {
	.ags-map-region path,
	.ags-map-region.is-selected path {
		fill: transparent;
		stroke: CanvasText;
	}

	.ags-map-marker__symbol,
	.ags-map-legend__marker,
	.ags-map-legend__region {
		forced-color-adjust: none;
	}
}