/* Taster kitchen finder.
 * Tokens follow the Astro design system the page was designed against:
 * Material greys, 4px base radius, Roboto, MUI elevation shadows.
 */

:root {
	--text-primary: rgba(0, 0, 0, .87);
	--text-secondary: rgba(0, 0, 0, .6);
	--divider: rgba(0, 0, 0, .12);
	--grey-50: #fafafa;
	--grey-100: #f5f5f5;
	--grey-400: #bdbdbd;
	--action-hover: rgba(0, 0, 0, .04);
	--radius-base: 4px;
	--radius-lg: 8px;
	--radius-pill: 9999px;
	--shadow-4: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
	--ease-standard: cubic-bezier(.4, 0, .2, 1);
	--font-sans: 'Roboto', 'Helvetica', 'Arial', sans-serif;
	--shell: 1360px;
	color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
	background: #fff;
	color: var( --text-primary );
	font-family: var( --font-sans );
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

a { color: inherit; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- hero -- */

.tsl-hero {
	background: var( --grey-50 );
	border-bottom: 1px solid var( --divider );
}
.tsl-hero__inner {
	max-width: var( --shell );
	margin: 0 auto;
	padding: 32px;
	display: flex;
	gap: 64px;
	align-items: flex-end;
	flex-wrap: wrap;
}
.tsl-hero__lede {
	flex: 1;
	min-width: 320px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.tsl-hero__title {
	margin: 0;
	font-size: 2.125rem;
	font-weight: 300;
	line-height: 1.2;
}
.tsl-hero__intro {
	max-width: 560px;
	margin: 0;
	font-size: 1rem;
	color: var( --text-secondary );
	text-wrap: pretty;
}
.tsl-stats { display: flex; gap: 48px; padding-bottom: 8px; }
.tsl-stat { display: flex; flex-direction: column; gap: 4px; }
.tsl-stat__value { font-size: 2.125rem; font-weight: 300; line-height: 1; }
.tsl-stat__label { font-size: .8125rem; color: var( --text-secondary ); }

/* ------------------------------------------------------------- filters -- */

.tsl-filters {
	position: sticky;
	top: 0;
	z-index: 9;
	background: #fff;
	border-bottom: 1px solid var( --divider );
}
.tsl-filters__inner {
	max-width: var( --shell );
	margin: 0 auto;
	padding: 16px 32px;
	display: flex;
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
}

.tsl-search {
	position: relative;
	display: flex;
	align-items: center;
	width: 360px;
	max-width: 100%;
}
.tsl-search__icon {
	position: absolute;
	left: 12px;
	color: var( --text-secondary );
	pointer-events: none;
}
.tsl-search input {
	width: 100%;
	height: 40px;
	padding: 0 12px 0 40px;
	border: 1px solid var( --divider );
	border-radius: var( --radius-base );
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: .9375rem;
}
.tsl-search input:hover { border-color: rgba( 0, 0, 0, .3 ); }
.tsl-search input:focus {
	outline: none;
	border-color: var( --text-primary );
	box-shadow: inset 0 0 0 1px var( --text-primary );
}

.tsl-chipset { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tsl-chipset--brands { flex: 1; }

.tsl-filters__divider {
	width: 1px;
	height: 32px;
	background: var( --divider );
}

/* Filter chips. Pressed state is driven by aria-pressed, so the styling and
   the accessibility state cannot disagree. */
.tsl-filter {
	height: 24px;
	padding: 0 10px;
	border: 1px solid var( --divider );
	border-radius: var( --radius-pill );
	background: transparent;
	color: var( --text-primary );
	font: inherit;
	font-size: .8125rem;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background 150ms var( --ease-standard ), border-color 150ms var( --ease-standard );
}
.tsl-filter:hover { background: var( --action-hover ); }
.tsl-filter:focus-visible { outline: 2px solid var( --text-primary ); outline-offset: 2px; }
.tsl-filter[aria-pressed="true"] {
	background: var( --text-primary );
	border-color: var( --text-primary );
	color: #fff;
}

.tsl-count {
	font-size: .8125rem;
	color: var( --text-secondary );
	white-space: nowrap;
}

/* ---------------------------------------------------------------- body -- */

.tsl-main {
	max-width: var( --shell );
	margin: 0 auto;
	padding: 32px;
	display: flex;
	gap: 32px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.tsl-list {
	flex: 1 1 380px;
	min-width: 320px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tsl-item {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding: 20px 24px;
	border: 1px solid var( --divider );
	border-radius: var( --radius-base );
	background: #fff;
	transition: box-shadow 150ms var( --ease-standard ), border-color 150ms var( --ease-standard );
}
.tsl-item:hover { box-shadow: var( --shadow-4 ); border-color: transparent; }
.tsl-item[hidden] { display: none; }

.tsl-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.tsl-item__head { display: flex; flex-direction: column; gap: 2px; }
.tsl-item__city { margin: 0; font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.tsl-item__address { font-style: normal; font-size: .875rem; color: var( --text-secondary ); }

.tsl-brands { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }

/* Outlined chip tinted with the brand's own colour, matching the legend dots. */
.tsl-brand {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid color-mix( in srgb, var( --brand, var( --grey-400 ) ) 45%, transparent );
	border-radius: var( --radius-pill );
	color: var( --brand, var( --text-primary ) );
	font-size: .8125rem;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}
a.tsl-brand:hover { background: color-mix( in srgb, var( --brand ) 8%, transparent ); }

.tsl-directions {
	flex-shrink: 0;
	font-size: .875rem;
	color: var( --text-secondary );
	text-decoration: none;
}
.tsl-directions:hover { color: var( --text-primary ); text-decoration: underline; }

.tsl-empty {
	margin: 0;
	padding: 48px;
	border: 1px solid var( --divider );
	border-radius: var( --radius-base );
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.tsl-empty[hidden] { display: none; }
.tsl-empty strong { font-size: 1.125rem; font-weight: 500; }
.tsl-empty span { font-size: .875rem; color: var( --text-secondary ); }

.tsl-more-wrap { display: flex; justify-content: center; padding: 16px 0 8px; }
.tsl-more {
	min-width: 200px;
	height: 42px;
	padding: 0 22px;
	border: 1px solid var( --divider );
	border-radius: var( --radius-base );
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: .9375rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 150ms var( --ease-standard );
}
.tsl-more:hover { background: var( --action-hover ); border-color: rgba( 0, 0, 0, .3 ); }
.tsl-more[hidden] { display: none; }

/* --------------------------------------------------------------- aside -- */

.tsl-aside {
	flex: 2 1 560px;
	min-width: 320px;
	position: sticky;
	top: 104px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Height is reserved up front so Leaflet cannot shift the layout on load. */
.tsl-map {
	height: 620px;
	border-radius: var( --radius-lg );
	background: var( --grey-50 );
	border: 1px solid var( --divider );
}

.tsl-legend {
	padding: 20px 24px;
	border: 1px solid var( --divider );
	border-radius: var( --radius-base );
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tsl-legend__title {
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --text-secondary );
}
.tsl-legend__rows { display: flex; flex-direction: column; gap: 10px; }
.tsl-legend__row { display: flex; align-items: center; gap: 12px; }
.tsl-legend__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tsl-legend__name { font-size: .875rem; flex: 1; }
.tsl-legend__count { font-size: .875rem; color: var( --text-secondary ); }

/* --------------------------------------------------------------- popup -- */

.leaflet-popup-content .tsl-brands { line-height: 1.4; margin-top: .5rem; }
.leaflet-popup-content .tsl-brands li { margin: 0; }
.leaflet-popup-content strong { font-size: 1rem; }

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

@media ( max-width: 900px ) {
	.tsl-hero__inner, .tsl-filters__inner, .tsl-main { padding: 20px 16px; }
	.tsl-hero__inner { gap: 24px; }
	.tsl-stats { gap: 32px; }
	.tsl-filters__divider { display: none; }

	/* Stack the bar instead of letting the chipsets share a row: at this width
	   flex:1 on the brands squeezed them into a narrow column with the labels
	   wrapping mid-chip. */
	.tsl-filters__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.tsl-search { width: 100%; }
	.tsl-chipset--brands { flex: none; }

	/* One swipeable row per facet rather than seven wrapped rows, which keeps
	   the bar short enough to leave the list visible. */
	.tsl-chipset {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 2px;
	}
	.tsl-chipset::-webkit-scrollbar { display: none; }
	.tsl-filter { flex: 0 0 auto; }

	/* Still not sticky: even stacked this is ~160px of a phone viewport. */
	.tsl-filters { position: static; }
	.tsl-count { align-self: flex-start; }
	.tsl-aside { position: static; }
	.tsl-map { height: 360px; }
	.tsl-item { flex-direction: column; gap: 12px; }
}