/* InteractiveFacilitiesMap
 *
 * Two display modes share one container: MAP mode shows the Leaflet map and its pins,
 * LIST mode overlays a grid of facility cards on top of the (still visible) map.
 *
 * Everything is styled from the "not ready" baseline up: with javascript off, the map and
 * the controls are hidden and the card list renders as a plain flowing grid. The js adds
 * .is-ready to the canvas, which switches on the map, the controls, and mode switching.
 */

.ifMap {
	position: relative;
	background: #f4f0f0;
}
.ifMap-intro {
	padding: 40px 0 24px;
}

/* ── Baseline (no js): plain card grid, no map, no controls ─────────────────── */
.ifMap-map,
.ifMap-controls,
.ifMap-viewMoreWrap {
	display: none;
}
.ifMap-listWrap {
	padding: 32px 24px;
}

/* ── Canvas ────────────────────────────────────────────────────────────────── */
.ifMap-canvas.is-ready {
	position: relative;
}
.ifMap-canvas.is-ready .ifMap-map {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	background: #f4f0f0;
}
.ifMap-canvas.is-ready .ifMap-controls {
	display: flex;
}

/* MAP mode: fixed-height band, list hidden */
.ifMap-canvas.is-ready.ifMap-canvas_map {
	height: 620px;
}
.ifMap-canvas.is-ready.ifMap-canvas_map .ifMap-listWrap {
	display: none;
}

/* LIST mode: canvas grows with the cards, map stays visible behind them */
.ifMap-canvas.is-ready.ifMap-canvas_list {
	min-height: 620px;
}
.ifMap-canvas.is-ready.ifMap-canvas_list .ifMap-listWrap {
	position: relative;
	z-index: 900;
	padding: 84px 24px 32px;
}

/* ── Controls bar ──────────────────────────────────────────────────────────── */
.ifMap-controls {
	position: absolute;
	top: 20px;
	right: 20px;
	left: 20px;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	pointer-events: none; /* let map drags through the empty middle */
}
.ifMap-controlsL,
.ifMap-modes {
	display: flex;
	align-items: center;
	gap: 10px;
	pointer-events: auto;
}

/* Inline SVG icons (see the note in the view: the site's Font Awesome kit is broken) */
.ifMap-sprite {
	position: absolute;
	width: 0;
	height: 0;
}
.ifMap-icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	vertical-align: -.13em;
	fill: currentColor;
	pointer-events: none;
}

.ifMap-filtersBtn,
.ifMap-mode {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Arvo', 'Arial', sans-serif;
	font-size: 13px;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
	padding: 13px 24px;
	white-space: nowrap;
}
.ifMap-filtersBtn .ifMap-icon,
.ifMap-mode .ifMap-icon {
	font-size: 16px;
}

/* Same red gradient + triangle texture + hard bottom edge as the site's .btn */
.ifMap-filtersBtn {
	border-radius: 999px;
	background-image: url(../Layout/images/triangles.png), linear-gradient(0deg, #ae3235 0%, #d23235 100%);
	box-shadow: 0 2px 0 0 #750000;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .26);
}
.ifMap-filtersBtn:hover {
	background-image: url(../Layout/images/triangles.png), linear-gradient(0deg, #b8383b 0%, #e04043 100%);
}

.ifMap-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #dcd6d6;
	border-radius: 50%;
	background: #f7f5f5;
	color: #5d5656;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
/* The reset symbol's viewBox is its glyph's ink box, so 1em is the drawn diameter -- 18px in
 * a 40px button matches the icon-to-button ratio in the comps. */
.ifMap-reset .ifMap-icon {
	font-size: 18px;
	vertical-align: 0;
}
.ifMap-reset:hover {
	color: #ae3235;
	border-color: #c9c2c2;
	background: #fff;
}

/* Segmented MAP | LIST toggle: rounded outer ends, square where the halves meet */
.ifMap-modes {
	gap: 0;
	background: #f2efef;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
	overflow: hidden;
}
.ifMap-mode {
	background: transparent;
	color: #5d5656;
}
.ifMap-mode:hover {
	color: #ae3235;
}
.ifMap-mode.is-active {
	background-image: url(../Layout/images/triangles.png), linear-gradient(0deg, #ae3235 0%, #d23235 100%);
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .26);
}
.ifMap-mode[data-mode="map"].is-active {
	border-radius: 999px 6px 6px 999px;
}
.ifMap-mode[data-mode="list"].is-active {
	border-radius: 6px 999px 999px 6px;
}

/* ── Filters popover ───────────────────────────────────────────────────────── */
.ifMap-filters {
	position: absolute;
	top: 74px;
	left: 20px;
	z-index: 1001;
	width: 320px;
	max-width: calc(100% - 40px);
	padding: 24px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
}
.ifMap-filters[hidden] {
	display: none;
}
/* caret pointing up at the FILTERS button */
.ifMap-filters:before {
	content: '';
	position: absolute;
	top: -9px;
	left: 34px;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-bottom: 9px solid #fff;
}
.ifMap-filtersClose {
	position: absolute;
	top: 8px;
	right: 10px;
	border: 0;
	background: none;
	color: #a5a5a5;
	font-size: 17px;
	line-height: 1;
	padding: 4px 6px;
	cursor: pointer;
}
.ifMap-filtersClose:hover {
	color: #5d5656;
}

.ifMap-field {
	margin: 0 0 16px;
}
.ifMap-fieldLbl {
	display: block;
	margin: 0 0 5px;
	font-family: 'proxima-nova', 'Arial', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #7b7373;
}
.ifMap-select {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	font-family: 'proxima-nova', 'Arial', sans-serif;
	font-size: 15px;
	color: #464040;
	background: #fff;
	border: 1px solid #ccc5c5;
	border-radius: 3px;
}
.ifMap-filtersFoot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin: 20px 0 0;
	font-family: 'proxima-nova', 'Arial', sans-serif;
	font-size: 14px;
	color: #5d5656;
}
.ifMap-count {
	color: #30424c;
}

/* Buttons that should read as text links */
.ifMap-showAll,
.ifMap-viewMore {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	font-family: 'proxima-nova', 'Arial', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #3697d2;
}
.ifMap-showAll:hover,
.ifMap-viewMore:hover {
	color: #2b7bad;
}
.ifMap-showAll .ifMap-icon,
.ifMap-viewMore .ifMap-icon {
	font-size: 17px;
	vertical-align: 0;
}
/* One chevron symbol, flipped when the list is expanded */
.ifMap-viewMore.is-expanded .ifMap-viewMoreIcon {
	transform: rotate(180deg);
}

/* ── Card list ─────────────────────────────────────────────────────────────── */
/* grid-auto-rows: 1fr keeps every row the same height, so a card with no star rating or
 * no award badge is still exactly the same shape as its neighbours. */
/* minmax(0, 1fr) not 1fr: plain 1fr floors each track at its min-content width, and the
 * long serif facility names make that wide enough to overflow the container. */
.ifMap-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ifMap-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 20px 22px 22px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .17);
}
/* [hidden] = filtered out; .is-collapsed = beyond the "View More" cut-off */
.ifMap-card[hidden],
.ifMap-card.is-collapsed,
.ifMap-empty[hidden] {
	display: none;
}
/* Two lines reserved so one- and two-line facility names keep the body aligned */
.ifMap-cardTitle {
	margin: 0 0 14px;
	min-height: 2.3em;
	font-family: 'kings-caslon-display', 'Times New Roman', serif;
	font-size: 25px;
	font-weight: 400;
	line-height: 1.15;
	color: #5d5656;
}
.ifMap-cardTitle a {
	color: inherit;
	text-decoration: none;
}
.ifMap-cardTitle a:hover {
	color: #ae3235;
}
.ifMap-cardBody {
	display: flex;
	align-items: stretch;
	gap: 18px;
	flex: 1 1 auto;
	min-height: 108px; /* the thumbnail height, so thumbless cards don't collapse */
}
/* align-self keeps the anchor at the image's own height -- the parent stretches its items,
 * which would otherwise draw this border as a tall empty box below the thumbnail. */
.ifMap-cardThumb {
	flex: 0 0 auto;
	align-self: flex-start;
	display: block;
	line-height: 0;
	border: 1px solid #e2dcdc;
	background: #fff;
}
.ifMap-cardThumb img {
	display: block;
	width: 106px;
	height: 106px;
	object-fit: cover;
}
.ifMap-cardInfo {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	font-family: 'proxima-nova', 'Arial', sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: #5d5656;
}
/* Scoped to .ifMap-card, not bare classes: leaflet.css ships
 * `.leaflet-popup-content p { margin: 1.3em 0 }`, and a single class (0,1,0) loses to that
 * (0,1,1). Two classes (0,2,0) win, and unlike an `.ifMap`-prefixed selector this holds
 * wherever Leaflet chooses to mount the popup. Street/city/phone read as one tight block,
 * as in the comps. */
.ifMap-card .ifMap-cardAddress,
.ifMap-card .ifMap-cardPhone {
	margin: 0;
	font-weight: 700;
}
/* A phone number should never break across lines */
.ifMap-card .ifMap-cardPhone {
	white-space: nowrap;
}
.ifMap-cardPhone a {
	color: inherit;
	text-decoration: none;
}
.ifMap-cardPhone a:hover {
	color: #ae3235;
}
/* Stars strip and award badge, pinned to the bottom of the info column so they line up with
 * the thumbnail's lower edge. flex-wrap is the safety net: on a narrow card the badge drops
 * under the stars instead of being forced to overlap them. */
.ifMap-cardMeta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: auto 0 0;
	padding-top: 8px;
}
/* Card-scoped for the same specificity reason as the address/phone rules above */
.ifMap-card .ifMap-cardStars {
	display: flex;
	align-items: center;
	flex-wrap: wrap; /* last resort: wrap the stars rather than let the strip escape the card */
	gap: 4px;
	max-width: 100%;
	margin: 0;
	padding: 7px 12px;
	background: #f7f5f5;
	line-height: 1;
}
.ifMap-star {
	width: 22px;
	height: 22px;
	fill: #ffd24d;
	stroke: #e0a02a;
	stroke-width: .9;
	pointer-events: none;
}
/* margin-left rather than justify-content, so the badge stays at the right edge on the row
 * it shares with the stars *and* on its own row once it wraps */
.ifMap-cardAward {
	flex: 0 0 auto;
	margin-left: auto;
	line-height: 0;
}
.ifMap-cardAward img {
	display: block;
	width: 40px;
	height: auto;
}

.ifMap-empty {
	margin: 0;
	padding: 28px 0;
	text-align: center;
	font-family: 'proxima-nova', 'Arial', sans-serif;
	font-size: 16px;
	color: #5d5656;
}
.ifMap-canvas.is-ready .ifMap-viewMoreWrap {
	display: block;
	margin: 24px 0 0;
	text-align: center;
}
.ifMap-canvas.is-ready .ifMap-viewMoreWrap[hidden] {
	display: none;
}
/* Withdrawn from the browser's scroll-anchoring candidates. These sit directly below the
 * cards View More reveals, so anchoring on one holds *it* still and shoves the card being
 * read up off the screen -- exactly what a reader tapping View More does not want.
 * animateList() anchors the scroll on a card instead. */
.ifMap-viewMoreWrap,
.ifMap-empty {
	overflow-anchor: none;
}

/* ── Expand / collapse animation ───────────────────────────────────────────── */
/* Cards past the cut-off are display:none, so their height can't be known ahead of the
 * click -- animateList() in the js measures the clip before and after the toggle and drives
 * this transition with an inline height. Clipping is switched on only while it runs, so the
 * cards' drop shadows aren't cut off the rest of the time. */
.ifMap-listClip.is-animating {
	overflow: hidden;
	transition: height .38s ease;
}
/* Cards arriving: revealed behind the growing clip edge */
.ifMap-card.is-revealing {
	animation: ifMap-reveal .38s ease both;
}
/* Cards leaving: the mutation already display:none'd them, so put them back for the
 * duration and let them slide up behind the shrinking clip edge instead of vanishing. */
.ifMap-listClip.is-animating .ifMap-card.is-collapsing {
	display: flex;
	animation: ifMap-conceal .38s ease both;
}
@keyframes ifMap-reveal {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}
@keyframes ifMap-conceal {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(12px); }
}
.ifMap-viewMoreIcon {
	transition: transform .3s ease;
}
@media (prefers-reduced-motion: reduce) {
	.ifMap-listClip.is-animating {
		transition: none;
	}
	.ifMap-card.is-revealing,
	.ifMap-listClip.is-animating .ifMap-card.is-collapsing {
		animation: none;
	}
	.ifMap-viewMoreIcon {
		transition: none;
	}
}

/* ── Marker popup (reuses the card markup) ─────────────────────────────────── */
.ifMap .leaflet-popup-content-wrapper {
	border-radius: 14px;
	padding: 0;
	box-shadow: 0 3px 14px rgba(0, 0, 0, .3);
}
.ifMap .leaflet-popup-content {
	margin: 0;
	width: 400px !important;
}
/* The wrapper already supplies the rounded card, so the clone drops its own chrome */
.ifMap .leaflet-popup-content .ifMap-card {
	box-shadow: none;
	border-radius: 14px;
	padding: 16px 36px 18px 18px;
}
.ifMap .leaflet-popup-content .ifMap-cardTitle {
	min-height: 0;
	margin-bottom: 10px;
	font-size: 21px;
}
/* leaflet.css ships `.leaflet-popup-content p { margin: 1.3em 0 }`, which outspecifies the
 * `margin: 0` on the card's own paragraph classes and pries the address apart. */
.ifMap .leaflet-popup-content p {
	margin: 0;
}

/* A popup sizes to its content, so drop the list-mode rules that stretch a card to fill
 * a uniform grid cell -- otherwise the stars get pushed to the bottom of a tall gap. */
.ifMap .leaflet-popup-content .ifMap-cardBody {
	min-height: 0;
}
.ifMap .leaflet-popup-content .ifMap-cardMeta {
	margin-top: 12px;
	padding-top: 0;
}
/* Leaflet positions and sizes this with `.leaflet-container a.leaflet-popup-close-button`
 * (0,2,1), so an override has to carry at least that much specificity -- hence the `a` and
 * the `.leaflet-container` here. Inset from the corner so it clears the card's radius. */
.ifMap .leaflet-container a.leaflet-popup-close-button {
	top: 10px;
	right: 5px;
	width: 26px;
	height: 26px;
	font-size: 20px;
	line-height: 26px;
	color: #a5a5a5;
}
.ifMap .leaflet-container a.leaflet-popup-close-button:hover,
.ifMap .leaflet-container a.leaflet-popup-close-button:focus {
	color: #5d5656;
}

/* Leaflet's default link colour fights the card styling */
.ifMap .leaflet-container a.ifMap-cardThumb,
.ifMap .leaflet-container .ifMap-cardTitle a,
.ifMap .leaflet-container .ifMap-cardPhone a {
	color: inherit;
}
.ifMap .leaflet-control-attribution {
	font-size: 10px;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
	.ifMap-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* Two columns leave the info beside the thumbnail narrow, and the stars strip is as wide
	 * as its stars make it -- so give the column more room and trim the stars, instead of
	 * letting the strip decide how wide the card has to be. */
	.ifMap-cardThumb img {
		width: 88px;
		height: 88px;
	}
	.ifMap-cardBody {
		min-height: 90px;
	}
	.ifMap-card .ifMap-cardStars {
		padding: 6px 10px;
	}
	.ifMap-star {
		width: 18px;
		height: 18px;
	}
}

@media (max-width: 700px) {
	.ifMap-canvas.is-ready.ifMap-canvas_map {
		height: 440px;
	}
	.ifMap-canvas.is-ready.ifMap-canvas_list {
		min-height: 440px;
	}
	.ifMap-canvas.is-ready.ifMap-canvas_list .ifMap-listWrap {
		padding: 72px 14px 24px;
	}
	.ifMap-controls {
		top: 14px;
		right: 14px;
		left: 14px;
		gap: 8px;
	}
	.ifMap-filtersBtn,
	.ifMap-mode {
		font-size: 11px;
		padding: 10px 14px;
	}
	.ifMap-reset {
		width: 34px;
		height: 34px;
	}
	.ifMap-reset .ifMap-icon {
		font-size: 15px;
	}
	.ifMap-filters {
		top: 62px;
		right: 14px;
		left: 14px;
		width: auto;
		max-width: none;
		padding: 20px;
	}
	.ifMap-filters:before {
		left: 26px;
	}
	/* One card per row, so equalising row heights buys nothing here -- and it couples every
	 * card's height to the tallest in the whole list, which is what made the cards above the
	 * newly revealed ones move on View More. The mobile comp has them snug to their content. */
	.ifMap-list {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		gap: 16px;
	}
	.ifMap .leaflet-popup-content {
		width: 290px !important;
	}
	.ifMap .leaflet-popup-content .ifMap-cardBody {
		gap: 12px;
	}
	.ifMap .leaflet-popup-content .ifMap-cardThumb img {
		width: 80px;
		height: 80px;
	}
	.ifMap .leaflet-popup-content .ifMap-cardAward img {
		width: 34px;
	}
	/* A 290px popup leaves ~145px for the info column; a five-star strip at the full size
	 * doesn't fit that, so trim the stars rather than let them push the badge out. */
	.ifMap .leaflet-popup-content .ifMap-card .ifMap-cardStars {
		padding: 6px 9px;
	}
	.ifMap .leaflet-popup-content .ifMap-star {
		width: 17px;
		height: 17px;
	}
}

/* ── Utility ───────────────────────────────────────────────────────────────── */
.ifMap-srOnly {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}