/**
 * TLR locations map.
 *
 * Two jobs beyond the obvious: reserve the map's box before anything loads so the page never
 * jumps, and take Google's InfoWindow chrome off the info card so what shows is our card and
 * not Google's.
 *
 * Made Nice.
 */

.tlr-map {
	--tlr-map-height: 520px;
	--tlr-map-radius: 8px;

	/* Sampled from the static map in the design, so the placeholder, the loading state and the
	   live tiles are all the same navy. */
	--tlr-map-water: #193440;
	--tlr-map-land: #2c5a71;

	--tlr-map-ink: var(--e-global-color-primary, #003b4e);
	--tlr-map-body: var(--e-global-color-text, #00506d);
	--tlr-map-accent: var(--e-global-color-secondary, #94d6dc);
	--tlr-map-card-bg: #ffffff;

	font-family: var(--e-global-typography-text-font-family, "Manrope"), sans-serif;

	position: relative;
	/* The box exists at its final size from the first paint, so swapping the map in shifts
	   nothing below it. */
	height: var(--tlr-map-height);
	border-radius: var(--tlr-map-radius);
	overflow: hidden;
	background: var(--tlr-map-water);
}

/* Inside a card that used to hold a picture, the map has to keep that picture's proportions or
   the row it sits in changes height. The floor stops a wide ratio collapsing to an unusable
   strip on a phone, where the same card is a single narrow column. */
.tlr-map--ratio {
	/* The width MUST stay definite. With `width: auto` and a min-height that beats the ratio -
	   which is exactly what happens in a one-column card on a phone - the browser is free to
	   resolve the width FROM the height instead, and a 260px floor on a 1720/830 ratio blew the
	   map out to about 538px, straight through the side of its card. Pinning the width means
	   the ratio can only ever set the height, and the floor can only ever raise it. */
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: var(--tlr-map-aspect);
	min-height: 260px;
}

/* aspect-ratio is Safari 15. Without this an older iPhone gets height:auto over nothing but
   absolutely-positioned children, and the map collapses to the min-height rather than the
   card's shape. */
@supports not (aspect-ratio: 1 / 1) {
	.tlr-map--ratio {
		height: 320px;
	}
}

@media (max-width: 767px) {
	.tlr-map:not(.tlr-map--ratio) {
		/* Only applies when nothing else has set the height for this breakpoint - the
		   Elementor control writes --tlr-map-height per device and wins here. */
		height: var(--tlr-map-height-mobile, var(--tlr-map-height));
	}
}

.tlr-map__canvas {
	position: absolute;
	/* Long-hand rather than `inset`, which is Safari 14.1. If it is not understood the box
	   collapses to nothing and the map has no canvas to draw into. */
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* --- the placeholder ------------------------------------------------------------------- */

/* What is actually in the HTML: the designed static map, and a button for anyone whose browser
   cannot tell us when the map scrolls into view. Removed once the real map is up. */
.tlr-map__placeholder {
	position: absolute;
	/* Long-hand rather than `inset`, which is Safari 14.1. If it is not understood the box
	   collapses to nothing and the map has no canvas to draw into. */
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tlr-map-water);
	transition: opacity 0.35s ease;
}

.tlr-map__poster {
	position: absolute;
	/* Long-hand rather than `inset`, which is Safari 14.1. If it is not understood the box
	   collapses to nothing and the map has no canvas to draw into. */
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tlr-map__activate {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--tlr-map-accent);
	color: var(--tlr-map-ink);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(4, 26, 34, 0.45);
}

.tlr-map__activate:hover,
.tlr-map__activate:focus-visible {
	background: #ffffff;
}

.tlr-map__activate-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

/* Once the map is loading, the button has nothing left to do but it should not vanish and
   reflow - fade it and take it out of the tab order via [hidden] in the script. */
.tlr-map.is-loading .tlr-map__activate {
	opacity: 0.5;
	pointer-events: none;
}

.tlr-map.is-ready .tlr-map__placeholder {
	opacity: 0;
	pointer-events: none;
}

/* --- status --------------------------------------------------------------------------- */

/* Empty and invisible until something goes wrong. Kept in the flow underneath the map rather
   than over it, so a failure message is never sitting on top of the fallback image. */
.tlr-map__status:empty {
	display: none;
}

.tlr-map__status {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 6px;
	background: #fdf4e3;
	color: #8a5a12;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.tlr-map__notice {
	margin: 0;
	padding: 16px;
	border: 1px dashed #b48a3c;
	border-radius: 6px;
	background: #fdf4e3;
	color: #8a5a12;
}

/* --- the info card -------------------------------------------------------------------- */

/* Google's InfoWindow ships its own white box, padding, drop shadow and scroll container. The
   card below is ours, so those are flattened to nothing and the card provides its own. The
   class names are Google's internals: if a future release renames them the card simply sits
   inside Google's default box, which is untidy rather than broken. */
.tlr-map .gm-style-iw.gm-style-iw-c {
	padding: 0;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(4, 26, 34, 0.35);
	max-width: 300px !important;
	background: var(--tlr-map-card-bg);
}

/* Google measures the room above the marker when the window opens and caps the bubble's height
   to it. On a 380px map that cap lands mid-card, and with the overflow hidden the bottom of the
   card is simply cut off rather than scrolled - which is how "Directions" went missing on a
   phone. The cap has to go on BOTH elements: it is set inline, so only !important beats it.
   Nothing is lost by removing it, because correctCardPosition() then moves the map until the
   whole card is inside. */
.tlr-map .gm-style-iw-c,
.tlr-map .gm-style-iw-d {
	max-height: none !important;
}

.tlr-map .gm-style-iw-d {
	overflow: hidden !important;
}

/* Google's close button sits over the card's top-right corner. Give it room and our colour. */
.tlr-map .gm-style-iw-c button.gm-ui-hover-effect {
	top: 4px !important;
	right: 4px !important;
	width: 36px !important;
	height: 36px !important;
	opacity: 1;
}

.tlr-map .gm-style-iw-c button.gm-ui-hover-effect > span {
	background-color: var(--tlr-map-ink);
	margin: 8px !important;
}

/* The tail under the bubble. */
.tlr-map .gm-style-iw-tc::after {
	background: var(--tlr-map-card-bg);
}

.tlr-map__card {
	padding: 16px 44px 16px 18px;
	color: var(--tlr-map-body);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.tlr-map__card p {
	margin: 0 0 6px;
}

.tlr-map__card-town {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--tlr-map-body) 70%, transparent);
}

.tlr-map__card-name {
	font-family: var(--e-global-typography-primary-font-family, "Manrope"), sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--tlr-map-ink);
}

.tlr-map__card-name a {
	color: inherit;
	text-decoration: none;
}

.tlr-map__card-name a:hover,
.tlr-map__card-name a:focus-visible {
	text-decoration: underline;
}

.tlr-map__card-hours {
	color: color-mix(in srgb, var(--tlr-map-body) 78%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.tlr-map__card-town,
	.tlr-map__card-hours {
		color: #4a7d94;
	}
}

.tlr-map__card-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 12px;
}

.tlr-map__card-cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 16px;
	border-radius: 6px;
	background: var(--tlr-map-accent);
	color: var(--tlr-map-ink);
	font-weight: 600;
	text-decoration: none;
}

.tlr-map__card-cta:hover,
.tlr-map__card-cta:focus-visible {
	background: var(--tlr-map-ink);
	color: #ffffff;
}

/* Inline-flex with a height because a bare text link is a small target on a phone. */
.tlr-map__card-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--tlr-map-body);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Google's own focus ring is invisible against the navy tiles. Scoped to things you can
   actually operate: Google focuses the info window's container when it opens, so a blanket
   rule drew a thick ring around the whole card on touch, which reads as a selected state
   nobody asked for. */
.tlr-map .gm-style a:focus-visible,
.tlr-map .gm-style button:focus-visible,
.tlr-map .gm-style [role="button"]:focus-visible {
	outline: 3px solid var(--tlr-map-accent);
	outline-offset: 2px;
}

/* The card has to fit inside a 380px map on a phone, above a 47px pin, with a margin top and
   bottom. Everything below trims height without touching the tap targets. */
@media (max-width: 767px) {
	.tlr-map__card {
		padding: 14px 42px 14px 16px;
		font-size: 0.9375rem;
		line-height: 1.45;
	}

	.tlr-map__card p {
		margin-bottom: 4px;
	}

	.tlr-map__card-name {
		font-size: 1.125rem;
	}

	.tlr-map__card-actions {
		gap: 6px 14px;
		margin-top: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tlr-map__placeholder {
		transition: none;
	}
}