/* Trime 2026 site search — overlay (triggered from the header search button)
   and search-results page layout. Both share the input pill, hairline result
   rows, and result-type chips so the two surfaces feel like the same feature. */

/* ============================================================
   Tokens
   ============================================================ */
.trime2026-search-overlay,
.trime2026-search-results {
	--trime-search-surface: var(--wp--preset--color--base);
	--trime-search-surface-alt: var(--wp--preset--color--accent-2);
	--trime-search-text: var(--wp--preset--color--contrast);
	--trime-search-text-muted: var(--wp--preset--color--accent-3);
	--trime-search-accent: var(--wp--preset--color--accent-1);
	--trime-search-hairline: rgba(20, 28, 22, 0.12);
}

/* ============================================================
   Overlay
   ============================================================
   The overlay element stays in the DOM at all times so the panel can
   slide back out when closed (instead of disappearing instantly).
   `pointer-events` gates interaction; the panel itself sits
   off-screen (translateX) and the backdrop sits at opacity 0 when
   closed, so the overlay is invisible without display:none / hidden
   visibility — both of which kill in-flight CSS transitions.
   Screen readers are kept out via `aria-hidden` toggled by the JS.
   ============================================================ */
.trime2026-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	pointer-events: none;
}

.trime2026-search-overlay[data-state="open"] {
	pointer-events: auto;
}

/* Force border-box on everything inside the overlay so children with
   `width: 100%` and padding stay INSIDE the panel's content rectangle
   (i.e. don't overflow into the panel's right padding the way they do
   under the default content-box). */
.trime2026-search-overlay,
.trime2026-search-overlay *,
.trime2026-search-overlay *::before,
.trime2026-search-overlay *::after {
	box-sizing: border-box;
}

.trime2026-search-overlay__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(20, 28, 22, 0.3);
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	cursor: pointer;
}

.trime2026-search-overlay[data-state="open"] .trime2026-search-overlay__backdrop {
	opacity: 1;
}

.trime2026-search-overlay__panel {
	position: absolute;
	top: 8px;
	right: 8px;
	bottom: 8px;
	/* `width: min()` keeps the panel inside the viewport with an 8px
	   margin on each side at any screen size. border-box makes the
	   width INCLUDE the padding so the box matches the Figma 640px
	   panel exactly (and doesn't bleed past narrow viewports). */
	box-sizing: border-box;
	width: min(640px, calc(100vw - 16px));
	background-color: var(--trime-search-surface);
	border-radius: 40px;
	padding: 64px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	overflow: hidden;
	transform: translateX(calc(100% + 16px));
	transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
	box-shadow: 0 30px 80px rgba(20, 28, 22, 0.18);
}

.trime2026-search-overlay[data-state="open"] .trime2026-search-overlay__panel {
	transform: translateX(0);
}

/* Honour reduced-motion users — collapse both transitions to a tiny
   crossfade so the overlay still has a perceivable transition without
   the slide. */
@media (prefers-reduced-motion: reduce) {
	.trime2026-search-overlay__backdrop,
	.trime2026-search-overlay__panel {
		transition-duration: 0.01s;
	}
	.trime2026-search-overlay__panel {
		transform: none;
		opacity: 0;
		transition-property: opacity;
	}
	.trime2026-search-overlay[data-state="open"] .trime2026-search-overlay__panel {
		opacity: 1;
	}
}

.trime2026-search-overlay__close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 64px;
	height: 64px;
	border: none;
	background-color: var(--trime-search-surface-alt);
	border-radius: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--trime-search-text);
	transition: background-color 0.2s ease;
}

.trime2026-search-overlay__close:hover,
.trime2026-search-overlay__close:focus-visible {
	background-color: color-mix(in srgb, var(--trime-search-surface-alt) 80%, var(--trime-search-text));
}

.trime2026-search-overlay__close svg {
	width: 24px;
	height: 24px;
	display: block;
}

.trime2026-search-overlay__title {
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 1;
	letter-spacing: -1.6px;
	color: var(--trime-search-text);
	margin: 0;
	padding-right: 80px;
}

/* ============================================================
   Search input — shared by overlay & results page
   ============================================================ */
.trime2026-search-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.trime2026-search-form__input-wrap {
	display: flex;
	align-items: center;
	gap: 24px;
	background-color: var(--trime-search-surface-alt);
	border-radius: 32px;
	padding: 8px 8px 8px 32px;
	width: 100%;
}

.trime2026-search-form__input {
	flex: 1 1 0;
	min-width: 0;
	border: none;
	background: transparent;
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.16px;
	color: var(--trime-search-text);
	padding: 12px 0;
}

.trime2026-search-form__input:focus {
	outline: none;
}

.trime2026-search-form__input::placeholder {
	color: var(--trime-search-text);
	opacity: 0.3;
}

.trime2026-search-form__submit {
	border: none;
	background-color: var(--trime-search-accent);
	color: var(--trime-search-text);
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: -0.18px;
	padding: 12px 32px;
	border-radius: 28px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.trime2026-search-form__submit:hover,
.trime2026-search-form__submit:focus-visible {
	opacity: 0.85;
}

/* ============================================================
   Overlay content area (quick-links / results / no-results)
   ============================================================ */
.trime2026-search-overlay__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Quick links shown before the user types */
.trime2026-search-overlay__quick-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.trime2026-search-overlay__quick-link,
.trime2026-search-overlay__quick-link:hover,
.trime2026-search-overlay__quick-link:focus,
.trime2026-search-overlay__quick-link:visited {
	display: inline-flex;
	align-items: center;
	background-color: var(--trime-search-surface-alt);
	color: var(--trime-search-text);
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: -0.36px;
	padding: 8px 20px;
	border-radius: 20px;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.trime2026-search-overlay__quick-link:hover,
.trime2026-search-overlay__quick-link:focus-visible {
	opacity: 0.8;
}

/* ============================================================
   Result rows — shared between overlay and results page
   ============================================================ */
.trime2026-search-results-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.trime2026-search-results-list > li + li {
	border-top: 1px solid var(--trime-search-hairline);
	padding-top: 20px;
}

/* On the overlay, the first item also gets a top hairline so it visually
   separates from the input above. */
.trime2026-search-overlay .trime2026-search-results-list > li:first-child {
	border-top: 1px solid var(--trime-search-hairline);
	padding-top: 20px;
}

.trime2026-search-result {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.trime2026-search-result__link,
.trime2026-search-result__link:hover,
.trime2026-search-result__link:focus,
.trime2026-search-result__link:visited {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-decoration: none;
	color: inherit;
}

.trime2026-search-result__link * {
	text-decoration: none;
}

.trime2026-search-result__title {
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.4;
	color: var(--trime-search-text);
	margin: 0;
	transition: opacity 0.2s ease;
}

.trime2026-search-result__link:hover .trime2026-search-result__title,
.trime2026-search-result__link:focus-visible .trime2026-search-result__title {
	opacity: 0.7;
}

.trime2026-search-result__excerpt {
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.5;
	color: var(--trime-search-text-muted);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.trime2026-search-result__type {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	background-color: var(--trime-search-surface-alt);
	color: var(--trime-search-text);
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: -0.28px;
	padding: 6px 16px;
	border-radius: 20px;
}

/* ============================================================
   "Kaikki hakutulokset →" footer link (overlay only)
   ============================================================ */
.trime2026-search-overlay__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: -0.2px;
	color: var(--trime-search-text);
	text-decoration: none;
	border-top: 1px solid var(--trime-search-hairline);
	padding-top: 20px;
	width: 100%;
	transition: opacity 0.2s ease;
}

.trime2026-search-overlay__all:hover,
.trime2026-search-overlay__all:focus-visible {
	opacity: 0.7;
}

.trime2026-search-overlay__all svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* ============================================================
   Empty / no-results state inside overlay
   ============================================================ */
.trime2026-search-overlay__empty {
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.5;
	color: var(--trime-search-text-muted);
	margin: 0;
	padding: 20px 0;
	border-top: 1px solid var(--trime-search-hairline);
}

[hidden] {
	display: none !important;
}

/* Body scroll lock when overlay is open */
body.trime2026-search-open {
	overflow: hidden;
}

/* ============================================================
   Results page
   ============================================================ */

/* Section wrapper exists so main-header.js sees a container at the top
   of the page and resets the body theme (otherwise the footer's
   container would leak its dark-green theme onto the search page). */
.trime2026-search-results-section {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
	padding-inline: var(--wp--preset--spacing--40);
}

.trime2026-search-results {
	display: flex;
	flex-direction: column;
	gap: 60px;
	max-width: 720px;
	margin: 0 auto;
}

.trime2026-search-results__header {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
}

.trime2026-search-results__title {
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 500;
	font-size: clamp(40px, 6vw, 80px);
	line-height: 1;
	letter-spacing: -3.2px;
	color: var(--trime-search-text);
	text-align: center;
	margin: 0;
	width: 100%;
}

.trime2026-search-results__title mark.trime2026-highlight {
	background: transparent;
	color: inherit;
}

/* The results list on the search page gets hairlines above AND below the
   first/last items so the entire block reads as a contained list. */
.trime2026-search-results .trime2026-search-results-list {
	width: 100%;
	border-top: 1px solid var(--trime-search-hairline);
	border-bottom: 1px solid var(--trime-search-hairline);
	padding: 20px 0;
}

/* ============================================================
   No-results state on the results page
   ============================================================ */
.trime2026-search-no-results {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 20px 0;
	border-top: 1px solid var(--trime-search-hairline);
	border-bottom: 1px solid var(--trime-search-hairline);
	width: 100%;
	text-align: center;
}

.trime2026-search-no-results__title {
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 500;
	font-size: 40px;
	line-height: 1.25;
	letter-spacing: -0.8px;
	color: var(--trime-search-text);
	margin: 0;
}

.trime2026-search-no-results__lede {
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.5;
	color: var(--trime-search-text-muted);
	margin: 0;
}

.trime2026-search-no-results__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
}

.trime2026-search-no-results__link,
.trime2026-search-no-results__link:hover,
.trime2026-search-no-results__link:focus,
.trime2026-search-no-results__link:visited {
	display: inline-flex;
	align-items: center;
	background-color: var(--trime-search-surface-alt);
	color: var(--trime-search-text);
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: -0.36px;
	padding: 12px 32px;
	border-radius: 40px;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.trime2026-search-no-results__link:hover,
.trime2026-search-no-results__link:focus-visible {
	opacity: 0.8;
}

/* ============================================================
   Pagination (the search results page falls back to plain
   numeric pagination output by paginate_links()).
   ============================================================ */
.trime2026-search-results__pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.trime2026-search-results__pagination a,
.trime2026-search-results__pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 8px 14px;
	border-radius: 20px;
	font-family: var(--wp--preset--font-family--bricolage-grotesque), sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: var(--trime-search-text);
	text-decoration: none;
}

.trime2026-search-results__pagination .current {
	background-color: var(--trime-search-accent);
}

.trime2026-search-results__pagination a:hover,
.trime2026-search-results__pagination a:focus-visible {
	background-color: var(--trime-search-surface-alt);
}

/* ============================================================
   Responsive
   ============================================================
   The panel width is already responsive via `width: min(640px,
   calc(100vw - 16px))` on the base rule — it auto-shrinks so the
   panel always stays inside the viewport with an 8px margin on
   each side. These media queries only tune the *internal* padding
   and typography so the layout still breathes on narrower screens;
   the panel keeps its right-anchored, rounded shape across all
   viewport sizes.
   ============================================================ */
@media (max-width: 720px) {
	.trime2026-search-overlay__panel {
		padding: 32px;
		gap: 24px;
		border-radius: 32px;
	}
	.trime2026-search-overlay__title {
		font-size: 32px;
		letter-spacing: -1.2px;
		padding-right: 64px;
	}
	.trime2026-search-overlay__close {
		top: 16px;
		right: 16px;
		width: 48px;
		height: 48px;
	}
	.trime2026-search-form__input-wrap {
		padding: 6px 6px 6px 20px;
		gap: 12px;
	}
	.trime2026-search-form__submit {
		padding: 10px 20px;
		font-size: 16px;
	}
	.trime2026-search-result__title {
		font-size: 22px;
	}
}

@media (max-width: 600px) {
	.trime2026-search-no-results__title {
		font-size: 28px;
		letter-spacing: -0.5px;
	}
}