/**
 * esteri/service-network — /huoltoverkosto finder.
 * Translates source ServiceNetworkPage.tsx (Tailwind) to the theme tokens.
 */

:root {
	--snw-blue: var(--wp--preset--color--primary-deep, hsl(222, 68%, 20%));
	--snw-green: var(--wp--preset--color--accent, hsl(74, 87%, 40%));
	--snw-border: var(--wp--preset--color--border, hsl(220, 14%, 88%));
	--snw-fg: var(--wp--preset--color--foreground, hsl(222, 30%, 12%));
	--snw-muted: var(--wp--preset--color--muted-foreground, hsl(222, 10%, 42%));
	--snw-bg: var(--wp--preset--color--background, #fff);
	--snw-surface: var(--wp--preset--color--secondary, hsl(220, 20%, 96%));
	--snw-mono: var(--wp--preset--font-family--mono, "Space Mono", ui-monospace, monospace);
}

/* The block toggles elements with the native `hidden` attribute (rows past
 * the 12-cap, the clear/show-all buttons, the map panel, the empty state).
 * Several of those carry an explicit `display` (grid / inline-flex) which —
 * being an author rule — beats the UA `[hidden] { display:none }`. Force it
 * back so `hidden` actually hides. (Caught on the editor-view read: without
 * this, all 61 rows showed instead of 12.) */
.esteri-snw [hidden] { display: none !important; }

/* Full-bleed card band; wire-section supplies the vertical rhythm + border. */
.esteri-snw {
	background: var(--wp--preset--color--card, hsl(0, 0%, 99%));
}
.esteri-snw__inner {
	max-width: 1508px;
	margin-inline: auto;
	padding-inline: var(--wire-edge, 1.25rem);
}

.esteri-snw__icon { flex-shrink: 0; }

/* ---- Search ---- */
.esteri-snw__search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border: 2px solid var(--snw-border);
	background: var(--snw-bg);
	padding: 1rem 0.75rem;
	margin-bottom: 1.5rem;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.esteri-snw__search:focus-within {
	border-color: var(--snw-blue);
	box-shadow: 0 4px 20px -8px hsl(222 68% 20% / 0.25);
}
.esteri-snw__search:hover { border-color: hsl(222 30% 12% / 0.3); }
.esteri-snw__search .esteri-snw__icon { color: var(--snw-blue); }
.esteri-snw__search-input {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: none;
	font-family: var(--snw-mono);
	font-size: 1rem;
	color: var(--snw-fg);
}
.esteri-snw__search-input::placeholder { color: var(--snw-muted); }
.esteri-snw__search-clear {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0 0.5rem;
	font-family: var(--snw-mono);
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--snw-muted);
	transition: color 0.15s;
}
.esteri-snw__search-clear:hover { color: var(--snw-fg); }
.esteri-snw__search-clear-text { display: none; }
@media (min-width: 768px) {
	.esteri-snw__search { gap: 0.75rem; padding-inline: 1.25rem; }
	.esteri-snw__search-clear-x { display: none; }
	.esteri-snw__search-clear-text { display: inline; }
}

/* ---- Collapsible map ---- */
.esteri-snw__mapwrap {
	border: 2px solid var(--snw-border);
	background: var(--snw-bg);
	margin-bottom: 1.5rem;
}
.esteri-snw__maptoggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	transition: background-color 0.15s;
}
.esteri-snw__maptoggle:hover { background: var(--snw-surface); }
.esteri-snw__maptoggle .esteri-snw__icon { color: var(--snw-blue); }
.esteri-snw__maptoggle-label {
	flex: 1 1 auto;
	font-family: var(--snw-mono);
	font-size: 0.9375rem;
	line-height: 1.6;   /* source 24px (was normal) */
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--snw-fg);
}
.esteri-snw__chevron { transition: transform 0.2s; color: var(--snw-muted); }
.esteri-snw__maptoggle.is-open .esteri-snw__chevron { transform: rotate(180deg); }
.esteri-snw__mappanel { border-top: 1px solid var(--snw-border); }
.esteri-snw__map {
	position: relative;
	/* Source puts z-0 on the MapContainer (ServicePartnersMap.tsx): the
	 * stacking context traps Leaflet's internal panes (z-index 200–1000)
	 * so the sticky header (110) and its menus stay on top. */
	z-index: 0;
	width: 100%;
	height: 480px;
	background: var(--snw-surface);
}
.esteri-snw__map-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2rem;
	text-align: center;
}
.esteri-snw__map-placeholder-eyebrow {
	font-family: var(--snw-mono);
	font-size: 0.875rem;
	letter-spacing: 0.18em;
	color: var(--snw-muted);
}
.esteri-snw__map-placeholder p {
	margin: 0;
	max-width: 28rem;
	font-size: 0.9375rem;
	color: var(--snw-muted);
	line-height: 1.5;
}
/* Error state — missing or rejected Google Maps key (set by service-network.js). */
.esteri-snw__map-placeholder.is-error .esteri-snw__map-placeholder-eyebrow {
	color: #b32d2e;
}

/* ---- Count ---- */
.esteri-snw__count {
	font-family: var(--snw-mono);
	font-size: 0.9375rem;
	color: var(--snw-muted);
	padding-inline: 0.25rem;
	margin: 0 0 2rem;
}
/* The count renders as a <p>, so WP global-styles' `:root :where(p)` (16px,
   specificity 0,1,0) ties the single-class rule above and wins on source order.
   Bump to (0,1,1) so source text-sm (15px) holds. The <span> variant is
   unaffected (not matched by :where(p)). */
p.esteri-snw__count { font-size: 0.9375rem; }
.esteri-snw__count-shown { color: var(--snw-fg); font-weight: 600; }

/* ---- List ---- */
.esteri-snw__listhead {
	display: none;
}
@media (min-width: 768px) {
	.esteri-snw__listhead {
		display: grid;
		grid-template-columns: 180px minmax(0, 1fr) minmax(180px, 200px);
		gap: 1.5rem;
		padding: 0 0.25rem 0.75rem;
		border-bottom: 1px solid var(--snw-border);
		margin-bottom: 0.5rem;
	}
	.esteri-snw__listhead span {
		font-family: var(--snw-mono);
		font-size: 0.9375rem;
		line-height: 1.6;   /* source 24px (was inherited 1.55 → 23.25) */
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--snw-muted);
	}
}

.esteri-snw__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.25rem 1.5rem;
	padding: 1rem 0.25rem;
	border-bottom: 1px solid var(--snw-border);
	align-items: start;
	transition: background-color 0.3s;
}
.esteri-snw__row.is-focused { background: var(--snw-surface); }
@media (min-width: 768px) {
	.esteri-snw__row { grid-template-columns: 180px minmax(0, 1fr) minmax(180px, 200px); }
}
.esteri-snw__city span {
	font-family: var(--snw-mono);
	font-size: 0.9375rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--snw-fg);
	word-break: break-word;
}
.esteri-snw__name { min-width: 0; }
.esteri-snw__name-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--snw-blue);
	text-decoration: none;
	word-break: break-word;
}
.esteri-snw__name-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.esteri-snw__name-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	background: var(--snw-green);
	color: var(--snw-fg);
	border-radius: var(--radius, 4px);
	transition: transform 0.2s;
}
.esteri-snw__name-link:hover .esteri-snw__name-badge { transform: translate(0.125rem, -0.125rem); }
.esteri-snw__name-plain { font-size: 0.9375rem; font-weight: 600; color: var(--snw-fg); word-break: break-word; }
.esteri-snw__addr-mobile {
	display: block;
	font-size: 0.9375rem;
	color: var(--snw-muted);
	line-height: 1.3;
	margin-top: 0.125rem;
}
@media (min-width: 768px) { .esteri-snw__addr-mobile { display: none; } }
.esteri-snw__phone {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--snw-fg);
	text-decoration: none;
	/* Wraps instead of `nowrap` + ellipsis: at 200 % text (WCAG 1.4.4) the ellipsis
	 * ate digits ("044 7437 3…"). Every default-size number fits its 180–200px column
	 * on one line, so nothing moves at rest. */
	overflow-wrap: anywhere;
}
.esteri-snw__phone:hover { color: var(--snw-blue); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Show all ---- */
.esteri-snw__showall {
	margin-top: 1.5rem;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 1px solid var(--snw-border);
	background: var(--snw-bg);
	/* source ServiceNetworkPage.tsx:273 is `w-full … py-3` — VERTICAL padding only,
	 * no horizontal. The stray 12px of inline padding cost 24px of label width and
	 * wrapped "Näytä kaikki 62 huoltoliikettä" onto a second line at 390 (button
	 * 74px vs the design's 50px). Full-width + centred, so the inline padding was
	 * doing nothing but shrinking the text box. */
	padding: 0.75rem 0;
	cursor: pointer;
	font-family: var(--snw-mono);
	font-size: 0.9375rem;
	line-height: 1.6;   /* source 24px (was normal) */
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--snw-fg);
	transition: background-color 0.15s, border-color 0.15s;
}
.esteri-snw__showall:hover { background: var(--snw-surface); border-color: hsl(222 30% 12% / 0.3); }
.esteri-snw__showall .esteri-snw__chevron { transition: transform 0.15s; }
.esteri-snw__showall:hover .esteri-snw__chevron { transform: translateY(0.125rem); }

/* ---- Zero-results ---- */
.esteri-snw__empty { border: 1px solid var(--snw-border); background: var(--snw-bg); }
.esteri-snw__empty-head {
	padding: 1.5rem;
	text-align: center;
	border-bottom: 1px solid var(--snw-border);
}
.esteri-snw__empty-head p { margin: 0; font-size: 1rem; color: var(--snw-muted); }
.esteri-snw__empty-query { font-family: var(--snw-mono); color: var(--snw-fg); }
.esteri-snw__empty-clear {
	margin-top: 0.75rem;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--snw-mono);
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: underline;
	color: var(--snw-fg);
}
.esteri-snw__empty-clear:hover { color: var(--snw-blue); }
.esteri-snw__nearest { padding: 1.25rem 1.5rem; }
.esteri-snw__nearest-label { margin-bottom: 1rem; }

/* ---- Pepa highlight ---- */
.esteri-snw__pepa {
	position: relative;
	margin-top: 2.5rem;
	border: 1px solid var(--snw-border);
	background: var(--snw-bg);
	overflow: hidden;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: center;
	padding: 1.25rem 1.5rem;
}
.esteri-snw__pepa-bar {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--snw-green);
}
.esteri-snw__pepa-icon {
	width: 3rem; height: 3rem;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	background: hsl(222 68% 20% / 0.05);
	border: 1px solid hsl(222 68% 20% / 0.2);
	color: var(--snw-blue);
}
.esteri-snw__pepa-body { min-width: 0; }
/* Source: `wire-label block mb-1` — the `block` collapses the green ::before
 * dash. The display:block here LOSES to theme.css's later `.wire-label
 * {display:inline-flex}` (equal specificity, load order), so the dash painted
 * anyway — suppress it explicitly. */
.esteri-snw__pepa-eyebrow { display: block; margin-bottom: 0.25rem; }
.esteri-snw__pepa-eyebrow::before { display: none; }
p.esteri-snw__pepa-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--snw-fg); line-height: 1.375; } /* p. beats :where(p) 1.6 tie */
/* <p> — bumped to p. so it beats WP's `:root :where(p)` 16px tie (source text-sm=15px). */
p.esteri-snw__pepa-desc { margin: 0.25rem 0 0; font-size: 0.9375rem; color: var(--snw-muted); line-height: 1.375; }
.esteri-snw__pepa-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
	font-family: var(--snw-mono);
	font-size: 0.9375rem;
	line-height: 1.6;   /* source 24px (was inherited 1.55 → 23.25) */
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--snw-fg);
	text-decoration: none;
	position: relative;
	padding-bottom: 0.5rem;
}
.esteri-snw__pepa-link::before {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	height: 2px; width: 100%;
	background: var(--snw-green);
	transform: scaleX(1);
	transform-origin: left;
}
.esteri-snw__pepa-link:hover { color: var(--snw-blue); }
.esteri-snw__pepa-link svg { transition: transform 0.3s; }
.esteri-snw__pepa-link:hover svg { transform: translateX(0.25rem); }
@media (max-width: 767px) {
	.esteri-snw__pepa { grid-template-columns: 1fr; }
	.esteri-snw__pepa-link { justify-self: start; }
}

/* Leaflet popup content (was the Google InfoWindow's) */
.esteri-snw__info { font-size: 0.875rem; line-height: 1.4; }
.esteri-snw__info a { color: var(--snw-blue); }

/* ── Leaflet map surface (2026-08-05: OSM tiles, no API key) ───────────────
 * Leaflet ships `.leaflet-div-icon { background:#fff; border:1px solid #666 }`
 * and ADDS our className to it, so the green "nearest" teardrop would render
 * inside a white bordered box. The design source hits the same default and
 * never resets it, but a boxed pin is an omission there rather than a decision
 * — and the Google build it replaces drew the pin boxless (an image icon, not
 * a divIcon), so resetting keeps the pin exactly as it renders today. */
.esteri-map-marker-highlight {
	background: none;
	border: 0;
	line-height: 0;
}

/* Cooperative-zoom hint. Google painted its own "use ctrl + scroll to zoom"
 * overlay; Leaflet has no equivalent, and losing it would leave a plain wheel
 * over the map silently doing nothing — the exact complaint that made the
 * Google build adopt gestureHandling in the first place. Shown for ~1.4 s on a
 * plain wheel (service-network.js), aria-hidden because it is a transient
 * pointer affordance and keyboard users have the +/- controls. */
.esteri-snw__zoomhint {
	position: absolute;
	inset: 0;
	z-index: 500;                    /* over tiles + markers, under the controls */
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 1rem;
	background: hsla(222, 30%, 12%, 0.55);
	color: #fff;
	font-family: var(--snw-mono);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
	pointer-events: none;            /* never eats the scroll it is describing */
}
.esteri-snw__zoomhint.is-visible {
	opacity: 1;
	visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
	.esteri-snw__zoomhint { transition: none; }
}