/**
 * LECL Park Atlas — page-atlas.php
 *
 * Prefix: .lca-
 *
 * The map is the subject. The band above it is a nameplate, not a hero, and
 * everything else lives in one rail that also serves as the legend: each row
 * carries a rule in the colour its features are drawn in, solid when the layer
 * is on the map and faint when it is not. That is why there is no separate
 * legend box and no modal in front of the map.
 *
 * Palette and type come from the site: Playfair Display / Source Sans 3,
 * brown #2C1810, cream #FAF8F5, tan #D4C5A9, gold #8B6914, teal #2d9da6.
 *
 * @since 2.22.0
 */

.lca {
	--ink: #2C1810;
	--ink-2: #3D2E1F;
	--cream: #FAF8F5;
	--tan: #D4C5A9;
	--gold: #8B6914;
	--teal: #2d9da6;
	--copper: #b87333;
	--line: rgba(44, 24, 16, .13);
	--muted: #7d6e60;
	--rail-w: 344px;
	background: var(--cream);
}

.lca-band-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* ----------------------------------------------------------- nameplate */

.lca-band {
	background: var(--ink);
	color: var(--cream);
	padding: 1.9rem 0 1.75rem;
}

.lca-band h1 {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--cream);
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 .5rem;
}

.lca-band p {
	margin: 0;
	max-width: 68ch;
	font-size: .98rem;
	line-height: 1.55;
	color: rgba(250, 248, 245, .78);
}

/* --------------------------------------------------------------- stage */

.lca-stage {
	display: flex;
	align-items: stretch;
	height: clamp(560px, 80vh, 920px);
	border-bottom: 1px solid var(--line);
	position: relative;
}

.lca-map-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	background: #e6e9e5;
}

#lca-map {
	position: absolute;
	inset: 0;
}

.lca-loading {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	background: rgba(44, 24, 16, .88);
	color: var(--cream);
	padding: .55rem 1rem;
	font-size: .88rem;
	border-radius: 2px;
	pointer-events: none;
	transition: opacity .25s;
}

.lca-loading[hidden] {
	display: block;
	opacity: 0;
}

/* ---------------------------------------------------------------- rail */

.lca-rail {
	flex: 0 0 var(--rail-w);
	width: var(--rail-w);
	display: flex;
	flex-direction: column;
	background: var(--cream);
	border-right: 1px solid var(--line);
	min-height: 0;
}

.lca-rail-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.lca-block {
	padding: 1.15rem 1.25rem .5rem;
}

.lca-block + .lca-block {
	border-top: 1px solid var(--line);
}

.lca-block-head {
	font-family: var(--font-heading);
	font-size: 1.08rem;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 .75rem;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
}

.lca-block-count {
	font-family: var(--font-primary);
	font-size: .78rem;
	font-weight: 400;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* modes */

.lca-modes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.lca-mode {
	--rule: var(--gold);
	display: grid;
	grid-template-columns: 1.4rem 1fr;
	grid-template-rows: auto auto;
	column-gap: .7rem;
	row-gap: .1rem;
	width: 100%;
	text-align: left;
	appearance: none;
	background: none;
	border: 0;
	border-left: 3px solid transparent;
	padding: .6rem .6rem .6rem .75rem;
	cursor: pointer;
	color: var(--ink);
	transition: background .14s, border-color .14s;
}

.lca-mode i {
	grid-row: 1 / 3;
	align-self: center;
	font-size: 1.2rem;
	color: var(--rule);
}

.lca-mode-name {
	font-size: .97rem;
	font-weight: 600;
	line-height: 1.2;
}

.lca-mode-note {
	font-size: .78rem;
	color: var(--muted);
	line-height: 1.35;
}

.lca-mode:hover,
.lca-mode:focus-visible {
	background: rgba(139, 105, 20, .07);
	border-left-color: var(--rule);
	outline: none;
}

.lca-mode.is-on {
	background: rgba(139, 105, 20, .1);
	border-left-color: var(--rule);
}

/* search */

.lca-search-wrap {
	position: relative;
	padding: .9rem 1.25rem;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.lca-search-wrap i {
	position: absolute;
	left: 1.9rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted);
	font-size: .88rem;
	pointer-events: none;
}

.lca-search {
	width: 100%;
	border: 1px solid var(--tan);
	border-radius: 2px;
	background: #fff;
	color: var(--ink);
	font-size: .92rem;
	padding: .5rem .7rem .5rem 2.05rem;
}

.lca-search::placeholder {
	color: #a39486;
}

.lca-search:focus {
	outline: 2px solid var(--gold);
	outline-offset: 1px;
	border-color: var(--gold);
}

/* results */

.lca-results {
	border-bottom: 1px solid var(--line);
	padding: .35rem 0 .5rem;
	max-height: 44vh;
	overflow-y: auto;
}

.lca-results[hidden] {
	display: none;
}

.lca-result-head {
	margin: .5rem 0 .2rem;
	padding: 0 1.25rem;
	font-size: .76rem;
	font-weight: 600;
	color: var(--muted);
}

.lca-result {
	display: block;
	width: 100%;
	text-align: left;
	appearance: none;
	background: none;
	border: 0;
	padding: .38rem 1.25rem;
	font-size: .9rem;
	line-height: 1.35;
	color: var(--ink);
	cursor: pointer;
}

.lca-result:hover,
.lca-result:focus-visible {
	background: rgba(139, 105, 20, .1);
	outline: none;
}

.lca-result small {
	display: block;
	font-size: .76rem;
	color: var(--muted);
}

.lca-result-empty {
	padding: .5rem 1.25rem 1rem;
	font-size: .86rem;
	line-height: 1.5;
	color: var(--muted);
}

/* groups */

.lca-block-layers {
	padding-bottom: 1rem;
}

.lca-group {
	border-top: 1px solid var(--line);
}

.lca-group:first-of-type {
	border-top: 0;
}

.lca-group > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: .6rem 0;
	font-size: .92rem;
	font-weight: 600;
	color: var(--ink);
}

.lca-group > summary::-webkit-details-marker {
	display: none;
}

.lca-group > summary::after {
	content: '';
	width: 7px;
	height: 7px;
	border-right: 1.5px solid var(--muted);
	border-bottom: 1.5px solid var(--muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .16s;
	flex: 0 0 auto;
	margin-left: auto;
}

.lca-group[open] > summary::after {
	transform: rotate(-135deg) translate(-3px, -3px);
}

.lca-group-n {
	font-size: .78rem;
	font-weight: 400;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.lca-group-blurb {
	margin: -.2rem 0 .55rem;
	font-size: .8rem;
	line-height: 1.45;
	color: var(--muted);
}

.lca-layers {
	list-style: none;
	margin: 0 0 .7rem;
	padding: 0;
}

.lca-row {
	--rule: var(--gold);
}

.lca-row.is-hidden {
	display: none;
}

.lca-row-main {
	display: grid;
	grid-template-columns: auto 3px 1fr auto;
	align-items: center;
	gap: .55rem;
	padding: .35rem .3rem;
	cursor: pointer;
	border-radius: 2px;
}

.lca-row-main:hover {
	background: rgba(139, 105, 20, .07);
}

.lca-row-main input {
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: var(--gold);
	cursor: pointer;
}

/* The rail is the legend: this rule is the colour the layer draws in. */
.lca-rule {
	display: block;
	width: 3px;
	height: 15px;
	background: var(--rule);
	opacity: .3;
	transition: opacity .14s;
}

.lca-row-main input:checked ~ .lca-rule {
	opacity: 1;
}

.lca-row-name {
	font-size: .89rem;
	line-height: 1.3;
	color: var(--ink-2);
}

.lca-row-main input:checked ~ .lca-row-name {
	color: var(--ink);
	font-weight: 600;
}

.lca-row-n {
	font-size: .74rem;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.lca-row.is-busy .lca-row-n::after {
	content: '…';
	color: var(--gold);
}

.lca-row-note {
	margin: -.1rem 0 .4rem 2.15rem;
	font-size: .76rem;
	line-height: 1.45;
	color: var(--muted);
}

/* facets */

.lca-facets {
	display: none;
	gap: .3rem;
	flex-wrap: wrap;
	margin: .1rem 0 .5rem 2.15rem;
}

.lca-row:has(input:checked) .lca-facets {
	display: flex;
}

.lca-facet {
	appearance: none;
	background: none;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: .16rem .55rem;
	font-size: .74rem;
	color: var(--muted);
	cursor: pointer;
	line-height: 1.5;
}

.lca-facet:hover {
	border-color: var(--rule);
	color: var(--ink);
}

.lca-facet.is-on {
	background: var(--rule);
	border-color: var(--rule);
	color: #fff;
}

/* rail foot */

.lca-rail-foot {
	flex: 0 0 auto;
	border-top: 1px solid var(--line);
	padding: .7rem 1.25rem;
	background: var(--cream);
}

.lca-clear {
	appearance: none;
	width: 100%;
	background: none;
	border: 1px solid var(--tan);
	border-radius: 2px;
	padding: .45rem .8rem;
	font-size: .84rem;
	color: var(--ink-2);
	cursor: pointer;
}

.lca-clear:hover {
	border-color: var(--copper);
	color: var(--copper);
}

/* mobile rail trigger */

.lca-rail-toggle {
	display: none;
	position: absolute;
	left: .75rem;
	top: .75rem;
	z-index: 4;
	appearance: none;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 2px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
	padding: .5rem .85rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
}

.lca-rail-toggle i {
	color: var(--gold);
}

/* -------------------------------------------------------------- popups */

.lca .mapboxgl-popup-content {
	background: var(--cream);
	border-radius: 2px;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(44, 24, 16, .26);
	max-width: 300px;
}

.lca .mapboxgl-popup-close-button {
	font-size: 1.1rem;
	color: var(--ink);
	padding: .1rem .35rem;
	right: 2px;
	top: 2px;
}

.lca-pop-img {
	display: block;
	width: 100%;
	height: 126px;
	object-fit: cover;
	background: var(--tan);
}

.lca-pop-body {
	padding: .75rem .85rem .8rem;
	border-left: 3px solid var(--pop-rule, var(--gold));
}

.lca-pop-layer {
	margin: 0 0 .15rem;
	font-size: .76rem;
	color: var(--muted);
}

.lca-pop-title {
	font-family: var(--font-heading);
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.25;
	margin: 0 0 .45rem;
}

.lca-pop-fields {
	margin: 0;
	font-size: .83rem;
	line-height: 1.45;
}

.lca-pop-fields dt {
	font-size: .74rem;
	color: var(--muted);
	margin-top: .35rem;
}

.lca-pop-fields dd {
	margin: 0;
	color: var(--ink-2);
	overflow-wrap: anywhere;
}

.lca-pop-links {
	margin-top: .6rem;
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
}

.lca-pop-links a {
	font-size: .8rem;
	color: var(--teal);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lca-pop-links a:hover {
	color: var(--copper);
}

/* ---------------------------------------------------------- provenance */

.lca-provenance {
	padding: 3rem 0 3.75rem;
	background: var(--cream);
}

.lca-provenance h2 {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 1.25rem;
}

.lca-prov-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 3rem;
	align-items: start;
}

.lca-prov-lead {
	max-width: 68ch;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ink-2);
	margin: 0 0 1rem;
}

.lca-prov-note {
	max-width: 68ch;
	font-size: .87rem;
	line-height: 1.6;
	color: var(--muted);
	margin: 0 0 .75rem;
}

.lca-inventory {
	margin: 0;
	display: grid;
	gap: .1rem;
	border-left: 1px solid var(--line);
	padding-left: 1.75rem;
	min-width: 190px;
}

.lca-inventory > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.25rem;
	padding: .38rem 0;
	border-bottom: 1px solid var(--line);
}

.lca-inventory > div:last-child {
	border-bottom: 0;
}

.lca-inventory dt {
	font-size: .85rem;
	color: var(--muted);
}

.lca-inventory dd {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.15rem;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.lca-prov-details {
	margin-top: 2rem;
	border-top: 1px solid var(--line);
	padding-top: 1rem;
}

.lca-prov-details summary {
	cursor: pointer;
	font-size: .92rem;
	font-weight: 600;
	color: var(--teal);
	padding: .3rem 0;
}

.lca-prov-details summary:hover {
	color: var(--copper);
}

.lca-prov-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: .6rem;
	font-size: .84rem;
}

.lca-prov-table th,
.lca-prov-table td {
	text-align: left;
	padding: .42rem .6rem .42rem 0;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.lca-prov-table th {
	font-size: .78rem;
	font-weight: 600;
	color: var(--muted);
}

.lca-prov-table td:nth-child(2) {
	font-variant-numeric: tabular-nums;
}

.lca-prov-table code {
	font-size: .78rem;
	color: var(--muted);
	background: none;
	padding: 0;
}

.lca-prov-sensitive {
	margin-top: 1.75rem;
	padding: .95rem 1.15rem;
	background: rgba(212, 197, 169, .26);
	border-left: 3px solid var(--gold);
	font-size: .87rem;
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 80ch;
}

.lca-empty {
	padding: 3rem 0;
	color: var(--muted);
}

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

@media (max-width: 900px) {
	.lca-band {
		padding: 1.4rem 0 1.25rem;
	}

	.lca-stage {
		display: block;
		height: auto;
	}

	.lca-map-wrap {
		height: clamp(400px, 62vh, 620px);
	}

	.lca-rail-toggle {
		display: inline-flex;
		align-items: center;
		gap: .4rem;
	}

	.lca-rail {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		max-height: 78vh;
		z-index: 1200;
		border-right: 0;
		border-top: 1px solid var(--line);
		border-radius: 10px 10px 0 0;
		box-shadow: 0 -10px 40px rgba(44, 24, 16, .26);
		transform: translateY(101%);
		transition: transform .24s ease;
	}

	.lca-rail.is-open {
		transform: translateY(0);
	}

	.lca-rail::before {
		content: '';
		display: block;
		width: 38px;
		height: 4px;
		border-radius: 2px;
		background: var(--tan);
		margin: .6rem auto .1rem;
		flex: 0 0 auto;
	}

	.lca-prov-grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.lca-inventory {
		border-left: 0;
		border-top: 1px solid var(--line);
		padding: .75rem 0 0;
	}

	.lca-prov-table {
		font-size: .8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lca-mode,
	.lca-rule,
	.lca-loading,
	.lca-rail,
	.lca-group > summary::after {
		transition: none;
	}
}