/* Schießstände map — marker, popup, accordion, legend.
 * Consumes the markup emitted by the schiessstaende section of Maps.html
 * (#ttaddress__map, #ttaddress__records, .ljn-schiess__* classes). */

/* --- Segmented-circle marker -------------------------------------------- */
/* Strip Leaflet's default divIcon white box/border so only the SVG shows;
 * allow overflow for any drop shadow. */
.ljn-schiess__marker {
	background: none;
	border: 0;
	overflow: visible;
}
.ljn-schiess__marker svg {
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* --- Popup -------------------------------------------------------------- */
.ljn-schiess__popupwrap .leaflet-popup-content-wrapper {
	border-radius: 6px;
}
.ljn-schiess__popupwrap .leaflet-popup-content {
	margin: 12px 14px;
	line-height: 1.45;
	font-size: 14px;
}
.ljn-schiess__name {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

/* Category chips — single rule colours every chip via the --c custom prop. */
.ljn-schiess__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 8px;
}
.ljn-schiess__chips .chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--c, #999);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}
.ljn-schiess__chips .chip svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
}

.ljn-schiess__web {
	display: inline-block;
	margin-bottom: 8px;
	word-break: break-word;
}

/* --- Accordion (<details>/<summary>) ----------------------------------- */
.ljn-schiess__acc details {
	border-top: 1px solid #e0e0e0;
}
.ljn-schiess__acc details:last-child {
	border-bottom: 1px solid #e0e0e0;
}
.ljn-schiess__acc summary {
	position: relative;
	padding: 7px 20px 7px 0;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	user-select: none;
}
.ljn-schiess__acc summary::-webkit-details-marker {
	display: none;
}
.ljn-schiess__acc summary::after {
	content: "\203A"; /* › */
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%) rotate(90deg);
	transition: transform 0.15s ease;
	font-size: 18px;
	line-height: 1;
	color: #666;
}
.ljn-schiess__acc details[open] > summary::after {
	transform: translateY(-50%) rotate(-90deg);
}
.ljn-schiess__acc summary:hover {
	color: #2a7de1;
}
.ljn-schiess__contact,
.ljn-schiess__hours {
	padding: 0 0 8px;
}
/* Cap height + scroll ONLY inside the marker popup, where space is tight. The
 * list below the map (.ljn-schiess__list) shows the same fields in full,
 * uncapped. line-height in the popup is 1.45, so the em fallback (6.5 * 1.45)
 * matches 6.5lh where the lh unit is supported. */
.ljn-schiess__popupwrap .ljn-schiess__contact,
.ljn-schiess__popupwrap .ljn-schiess__hours {
	max-height: 9.43em;
	max-height: 6.5lh;
	overflow-y: auto;
	/* Keep scroll inside the popup — don't chain to the page/map at the ends. */
	overscroll-behavior: contain;
}
/* Shorter cap on phones so the popup fits a small map viewport. */
@media (max-width: 600px) {
	.ljn-schiess__popupwrap .ljn-schiess__contact,
	.ljn-schiess__popupwrap .ljn-schiess__hours {
		max-height: 7.25em;
		max-height: 5lh;
	}
}
.ljn-schiess__contact > div {
	margin-bottom: 3px;
}
.ljn-schiess__contact .fas,
.ljn-schiess__contact .fa {
	width: 1.1em;
	margin-right: 4px;
	color: #666;
	text-align: center;
}

/* --- Legend ------------------------------------------------------------- */
/* Legend — relocated into the map's bottom-left corner by Schiessstaende.js
 * (gets the .leaflet-control class there). Vertically stacked overlay box. */
.ljn-schiess__legend {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 10px 0 0;
	padding: 8px 10px;
	list-style: none;
	font-size: 13px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.ljn-schiess__legend li {
	display: flex;
	align-items: center;
}
.ljn-schiess__legend .sw {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-right: 8px;
	border-radius: 6px;
	background: #999;
	flex: 0 0 auto;
}
.ljn-schiess__legend .sw svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* --- List below the map ------------------------------------------------- */
/* Responsive card grid; each card reuses the popup "card" markup so it shows
 * exactly the same fields as the marker popup. */
.ljn-schiess__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
.ljn-schiess__listitem {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.45;
}
/* PLZ band header: spans the full grid width so each group reads as a row. */
.ljn-schiess__plzhead {
	grid-column: 1 / -1;
	margin: 22px 0 2px;
	font-size: 18px;
	font-weight: 700;
	border-bottom: 2px solid #6b7b5e;
	padding-bottom: 4px;
}
.ljn-schiess__plzhead:first-child {
	margin-top: 0;
}
.ljn-schiess__listitem .ljn-schiess__name {
	font-size: 16px;
}
.ljn-schiess__listlink {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.ljn-schiess__listlink .fas {
	margin-right: 4px;
}

/* --- Fullscreen button -------------------------------------------------- */
/* Centre the expand/compress glyph in the standard leaflet-bar button. The
 * :hover selector repeats the geometry to override any site-wide a:hover rule
 * (transform / padding / text-decoration) that would otherwise shove the icon
 * to a corner on rollover. */
.ljn-schiess__fs a,
.ljn-schiess__fs a:hover,
.ljn-schiess__fs a:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transform: none;
	text-decoration: none;
}
.ljn-schiess__fs a svg {
	display: block;
}
/* In fullscreen the map element becomes the whole screen; make it fill it so
 * Leaflet (after invalidateSize) paints tiles edge to edge. */
#ttaddress__map:fullscreen {
	width: 100%;
	height: 100%;
	min-height: 0;
}
#ttaddress__map:-webkit-full-screen {
	width: 100%;
	height: 100%;
	min-height: 0;
}