/**
 * AZA Route Map — [aza_route_map]
 * Brand-styled Lambert-projected basemap with interactive destination
 * markers, route arcs, and a details popup. WCAG 2.1 AA: keyboard operable,
 * visible focus, reduced-motion aware, color never the sole signal.
 */

.aza-routemap {
	--aza-red: var(--wp--preset--color--red, #a12a1d);
	--aza-black: var(--wp--preset--color--black, #25150c);
	--aza-eggshell: var(--wp--preset--color--eggshell, #e2ddcc);
	--aza-light-eggshell: var(--wp--preset--color--light-eggshell, #f1efe7);
	--aza-yellow: var(--wp--preset--color--yellow, #ffd100);
	--aza-light-grey: var(--wp--preset--color--light-grey, #e6e6e6);
	position: relative;
	font-family: Inter, sans-serif;
	color: var(--aza-black);
}

.aza-routemap .aza-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Header row: count + jump select ---------------------------------- */

.aza-routemap-head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 16px;
}

.aza-routemap-count {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
}

.aza-routemap-count strong {
	font-family: Manrope, sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--aza-red);
}

.aza-routemap-jump {
	margin: 0;
}

.aza-routemap-jump select {
	appearance: none;
	-webkit-appearance: none;
	min-height: 45px;
	padding: 8px 44px 8px 14px;
	font: 600 14px/1.5 Inter, sans-serif;
	color: var(--aza-black);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2325150C' d='M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	border: 1px solid var(--aza-black);
	border-radius: 50px;
	cursor: pointer;
	max-width: 320px;
}

.aza-routemap-jump select:focus-visible {
	outline: 2px solid var(--aza-black);
	outline-offset: 2px;
}

/* ---- Stage ------------------------------------------------------------- */

.aza-routemap-stage {
	position: relative;
	aspect-ratio: var(--aza-map-ar, 1032 / 627);
	background: var(--aza-light-eggshell);
	border-radius: 8px;
	touch-action: pan-y; /* one finger scrolls the page; we get pinch pointers. */
	--aza-zoom: 1;
}

.aza-routemap-stage.is-zoomed {
	touch-action: none; /* zoomed: drag pans the map. */
}

/* Clips the zoomed/panned canvas at the rounded edge; the popup and zoom
   controls live outside it so they are never clipped. */
.aza-routemap-clip {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 8px;
}

.aza-routemap-canvas {
	position: absolute;
	inset: 0;
	transform-origin: 0 0;
	transition: transform 260ms ease;
}

.aza-routemap-stage.is-zoomed .aza-routemap-canvas {
	cursor: grab;
}

.aza-routemap-stage.is-dragging .aza-routemap-canvas {
	cursor: grabbing;
	transition: none;
}

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

.aza-map-other path {
	fill: #eae6d9;
	stroke: #dcd5c2;
	stroke-width: 0.8;
}

.aza-map-us path {
	fill: #fff;
	stroke: var(--aza-eggshell);
	stroke-width: 0.9;
	stroke-linejoin: round;
}

/* ---- Route arcs -------------------------------------------------------- */

.aza-arc {
	fill: none;
	stroke: var(--aza-red);
	stroke-width: 1.4;
	stroke-linecap: round;
	opacity: 0.32;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 900ms ease-out, opacity 200ms ease, stroke-width 200ms ease;
}

.aza-arc--announced {
	stroke-dasharray: 0.035 0.02; /* dashed = announced, not yet flying */
	stroke-dashoffset: 0;
	opacity: 0;
	transition: opacity 900ms ease-out;
}

.aza-routemap-stage.is-revealed .aza-arc {
	stroke-dashoffset: 0;
}

.aza-routemap-stage.is-revealed .aza-arc--announced {
	opacity: 0.32;
}

.aza-routemap-stage .aza-arc.is-hot {
	opacity: 1;
	stroke-width: 2.4;
}

.aza-routemap-stage.has-hot .aza-arc:not(.is-hot) {
	opacity: 0.12;
}

.aza-plane {
	/* AZA black, not red: the plane flies along the route arc, which is itself
	   red, so a red plane disappeared into the line it was travelling. */
	fill: var(--aza-black);
	pointer-events: none;
}

/* ---- Origin (AZA) marker ---------------------------------------------- */

.aza-routemap-origin {
	position: absolute;
	/* Counter-scale so the hub stays a constant screen size while zoomed. */
	transform: translate(-50%, -50%) scale(calc(1 / var(--aza-zoom, 1)));
	display: grid;
	place-items: center;
	pointer-events: none;
	z-index: 3;
}

.aza-origin-dot {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	background: var(--aza-red);
	color: #fff;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(37, 21, 12, 0.35);
}

.aza-origin-pulse {
	position: absolute;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--aza-red);
	opacity: 0.35;
	animation: aza-pulse 2.6s ease-out infinite;
}

@keyframes aza-pulse {
	0% { transform: scale(1); opacity: 0.35; }
	70% { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}

.aza-origin-label {
	position: absolute;
	top: calc(100% + 6px);
	font: 800 13px/1 Manrope, sans-serif;
	letter-spacing: 0.04em;
	background: var(--aza-black);
	color: #fff;
	padding: 4px 8px;
	border-radius: 4px;
	white-space: nowrap;
}

.aza-origin-weather:not(:empty)::before {
	content: " · ";
}

/* ---- Destination markers ----------------------------------------------- */

/* `button.` + ancestor outranks the theme's button:not(...) primary-button
   styling (specificity 0,1,1), which would otherwise turn markers into
   padded red buttons in normal flow. */
.aza-routemap-stage button.aza-routemap-marker {
	position: absolute;
	/* Counter-scale keeps the hit area a constant 30px on screen at any zoom. */
	transform: translate(-50%, -50%) scale(calc(1 / var(--aza-zoom, 1)));
	width: 30px;
	height: 30px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: grid;
	place-items: center;
	z-index: 2;
	/* The theme puts transition:all on buttons. z-index is animatable, so a
	   live transition on it outranks every author declaration — including
	   inline styles — and the lift below silently did nothing. Nothing on this
	   button needs to animate anyway: the visible hover effect belongs to
	   .aza-marker-dot inside it, which runs its own transition. Dropping it
	   also stops the counter-scale easing a step behind the map during zoom. */
	transition: none;
}

.aza-routemap-stage button.aza-routemap-marker:hover,
.aza-routemap-stage button.aza-routemap-marker:focus {
	background: transparent;
	border: 0;
}

/* Lift the whole marker while it is being pointed at.
   Every marker is its own stacking context at z-index 2, so the label inside
   one stacks only against that dot — never against the other 44. With all of
   them on the same level, DOM order decides, and any dot later in the list
   paints straight over an earlier dot's label. That is invisible until two
   destinations sit close together, which is exactly when the label matters.
   Raising the marker itself carries its label clear of its neighbours. It
   stops at 4, below the zoom controls (5) and the popup (10), so a label near
   the top-right can never cover the controls. */
.aza-routemap-stage button.aza-routemap-marker:hover,
.aza-routemap-stage button.aza-routemap-marker:focus-visible,
.aza-routemap-stage button.aza-routemap-marker.is-active {
	z-index: 4;
}

.aza-marker-dot {
	display: grid;
	place-items: center;
	width: 11px;
	height: 11px;
	background: var(--aza-red);
	border: 2px solid #fff;
	border-radius: 50px;
	box-shadow: 0 1px 4px rgba(37, 21, 12, 0.4);
	transition: transform 180ms ease;
}

.aza-marker-code {
	display: none;
	font: 800 9px/1 Manrope, sans-serif;
	letter-spacing: 0.04em;
	color: #fff;
}

/* Zoomed in: dots grow into code pills (constant screen size via counter-scale). */
.aza-routemap-stage.is-zoom-codes .aza-marker-dot {
	width: auto;
	height: auto;
	min-width: 16px;
	min-height: 16px;
	padding: 3px 6px;
}

.aza-routemap-stage.is-zoom-codes .aza-marker-code {
	display: block;
}

.aza-routemap-stage.is-zoom-codes .aza-marker-tag {
	display: none; /* the pill already shows the code */
}

.aza-routemap-marker:hover .aza-marker-dot,
.aza-routemap-marker:focus-visible .aza-marker-dot,
.aza-routemap-marker.is-active .aza-marker-dot {
	transform: scale(1.5);
	background: var(--aza-black);
}

.aza-routemap-stage button.aza-routemap-marker:focus-visible {
	outline: 2px solid var(--aza-black);
	outline-offset: 2px;
	border-radius: 50%;
}

.aza-marker-tag {
	position: absolute;
	bottom: calc(100% + 2px);
	left: 50%;
	transform: translate(-50%, 4px);
	font: 700 12px/1 Manrope, sans-serif;
	letter-spacing: 0.03em;
	background: var(--aza-black);
	color: #fff;
	padding: 4px 7px;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 160ms ease, transform 160ms ease;
	white-space: nowrap;
	z-index: 4;
}

.aza-routemap-marker:hover .aza-marker-tag,
.aza-routemap-marker:focus-visible .aza-marker-tag,
.aza-routemap-marker.is-active .aza-marker-tag {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ---- Zoom controls ------------------------------------------------------ */

.aza-routemap-zoom {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.aza-routemap-stage button.aza-zoom-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	color: var(--aza-black);
	background: #fff;
	border: 1px solid var(--aza-black);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 1px 6px rgba(37, 21, 12, 0.15);
	transition: background 140ms ease, color 140ms ease;
}

.aza-routemap-stage button.aza-zoom-btn:hover,
.aza-routemap-stage button.aza-zoom-btn:focus {
	background: var(--aza-black);
	border-color: var(--aza-black);
	color: #fff;
}

.aza-routemap-stage button.aza-zoom-btn:focus-visible {
	outline: 2px solid var(--aza-black);
	outline-offset: 2px;
}

.aza-routemap-stage button.aza-zoom-btn[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

@media (max-width: 639px) {
	.aza-routemap-zoom {
		top: 8px;
		right: 8px;
	}

	.aza-routemap-stage button.aza-zoom-btn {
		width: 40px;
		height: 40px;
	}
}

/* ---- Popup -------------------------------------------------------------- */

.aza-routemap-popup {
	position: absolute;
	width: min(320px, 86vw);
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 0 25px 1px rgba(0, 0, 0, 0.22);
	z-index: 10;
	overflow: hidden;
	animation: aza-popup-in 220ms ease-out;
}

@keyframes aza-popup-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.aza-routemap-popup button.aza-popup-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 36px;
	height: 36px;
	min-height: 0;
	display: grid;
	place-items: center;
	padding: 0;
	font-size: 22px;
	color: #fff;
	background: rgba(37, 21, 12, 0.65);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.aza-routemap-popup.has-no-media button.aza-popup-close {
	color: var(--aza-black);
	background: var(--aza-light-grey);
}

.aza-routemap-popup button.aza-popup-close:hover,
.aza-routemap-popup button.aza-popup-close:focus {
	background: var(--aza-black);
	border: 0;
	color: #fff;
}

.aza-routemap-popup button.aza-popup-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.aza-routemap-popup.has-no-media button.aza-popup-close:focus-visible {
	outline-color: var(--aza-black);
}

.aza-popup-media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--aza-eggshell);
}

.aza-popup-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aza-popup-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(37, 21, 12, 0.92) 100%);
}

.aza-popup-code {
	position: absolute;
	left: 16px;
	bottom: 8px;
	z-index: 1;
	font: 700 40px/1.1 Manrope, sans-serif;
	color: #fff;
}

.aza-popup-body {
	padding: 18px 20px 20px;
	display: grid;
	gap: 10px;
}

.aza-popup-title {
	margin: 0;
	font: 600 22px/1.3 Manrope, sans-serif;
	color: var(--aza-black);
}

.aza-popup-chips {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.aza-routemap .aza-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	font: 700 13px/1.4 Manrope, sans-serif;
}

.aza-routemap .aza-chip--airline {
	background: var(--aza-red);
	color: #fff;
}

.aza-routemap .aza-chip--announced {
	background: var(--aza-yellow);
	color: var(--aza-black);
}

.aza-routemap .aza-chip--seasonal {
	background: var(--aza-eggshell);
	color: var(--aza-black);
}

.aza-popup-weather,
.aza-popup-facts {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font: 400 15px/1.5 Inter, sans-serif;
}

.aza-popup-weather svg {
	flex: 0 0 auto;
	color: var(--aza-red);
}

/* One button per airline once a route has more than one, so they stack rather
   than crowding the popup's width. */
.aza-popup-booking {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.aza-popup-book.aza-btn-primary {
	justify-self: start;
	display: inline-block;
	padding: 14px 20px;
	font: 500 16px/1 Inter, sans-serif;
	color: #fff;
	background: var(--aza-red);
	border: 0;
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
	transition: background 160ms ease;
}

.aza-popup-book.aza-btn-primary:hover {
	background: var(--wp--preset--color--dark-red, #8e2119);
}

.aza-popup-book.aza-btn-primary:focus-visible {
	outline: 2px solid var(--aza-black);
	outline-offset: 2px;
}

/* Bottom sheet on small screens. */
@media (max-width: 639px) {
	.aza-routemap-popup {
		position: fixed;
		left: 12px !important;
		right: 12px;
		top: auto !important;
		bottom: 12px;
		width: auto;
		max-height: 72vh;
		overflow-y: auto;
	}
}

/* ---- Footnotes ---------------------------------------------------------- */

.aza-routemap-noscript {
	margin: 12px 0 0;
	font-size: 15px;
}

/* ---- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.aza-arc,
	.aza-arc--announced {
		transition: none;
		stroke-dashoffset: 0;
	}

	.aza-arc--announced {
		opacity: 0.32;
	}

	.aza-origin-pulse {
		animation: none;
		opacity: 0;
	}

	.aza-routemap-popup {
		animation: none;
	}

	.aza-marker-dot,
	.aza-marker-tag,
	.aza-routemap-canvas {
		transition: none;
	}
}

/* Small screens: hide hover tags (touch has no hover); popup carries info. */
@media (max-width: 767px) {
	.aza-routemap-count {
		font-size: 15px;
	}

	.aza-popup-code {
		font-size: 32px;
	}
}