/**
 * Search results page (templates/search.html: os/search-hero + os/search-results).
 * Loads where a block with an "os-search-" class renders, after os-blog.css: the hero is the
 * blog listing's hero section (breadcrumb in the same place) and the results reuse its results
 * row, filter, OS Loader and pagination. Here: the search field, the line with the Filter
 * button and the result rows.
 */

/* ---------- Hero (os/search-hero): heading + search field ---------- */
/* A navy blue band (user, 2026-10-11): the navy-band gradient and white text are set on the
   block; here the field's focus ring and the button turn to what reads on blue (green button,
   as on the 404 page's blue card; white rings). */
.os-search-hero__head > .os-search-form { max-width: 640px; margin-top: 24px; }
.os-search-form .wp-block-search__inside-wrapper {
	position: relative;
	gap: 10px;
	align-items: center;
}
/* Magnifier inside the field. */
.os-search-form .wp-block-search__inside-wrapper::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 16px;
	width: 20px;
	height: 20px;
	background-color: var(--wp--custom--color--tertiary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='9' cy='9' r='6.25' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='m13.6 13.6 4 4' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='9' cy='9' r='6.25' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='m13.6 13.6 4 4' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: translateY(-50%);
	pointer-events: none;
}
/* The theme's form field (as the contact form), 16px text so phones don't zoom in on focus. */
.os-search-form .wp-block-search__input {
	box-sizing: border-box;
	min-width: 0;
	height: 45px;
	padding: 10px 16px 10px 46px;
	border: 1px solid var(--wp--custom--color--field-border);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	font: 400 var(--wp--preset--font-size--medium) var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--ink);
	outline: none;
	transition: border-color var(--os-fast) var(--os-ease), box-shadow var(--os-fast) var(--os-ease);
}
.os-search-form .wp-block-search__input::placeholder { color: rgb(28 28 28 / 0.7); opacity: 1; }
.os-search-form .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--brand) 14%, transparent);
}
.os-search-hero .os-search-form .wp-block-search__input { border-color: transparent; }
.os-search-hero .os-search-form .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--white);
	box-shadow: 0 0 0 3px rgb(255 255 255 / 0.3);
}
.os-search-hero .os-search-form .wp-block-search__button { background: var(--wp--preset--color--green); }
.os-search-hero .os-search-form .wp-block-search__button:hover {
	background: var(--wp--preset--color--green-dark);
	box-shadow: 0 8px 20px rgb(1 158 132 / 0.3);
}
.os-search-hero :is(a, button):focus-visible { outline-color: var(--wp--preset--color--white); }
/* The theme's button, with its arrow. */
.os-search-form .wp-block-search__button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 45px;
	margin: 0;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}
.os-search-form .wp-block-search__button::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../images/arrow-tr.svg") center / 10px no-repeat;
	mask: url("../images/arrow-tr.svg") center / 10px no-repeat;
}
.os-search-form .wp-block-search__button:hover::after,
.os-search-form .wp-block-search__button:focus-visible::after { animation: os-arrow-out-in 0.45s ease; }

/* ---------- Results (os/search-results) ---------- */
.os-search-results > .os-blog-list__query { margin-top: 0; }
.os-search-results .os-results { margin-bottom: 0; }
.os-results__term { overflow-wrap: anywhere; }

/* The results found line with the Filter button at its right end. The button is the blog
   listing's filter (os_render_blog_filters, os-blog.css), here with one group, Type; it sits
   outside the results that pagination swaps, placed over the line's right end. */
.os-search-results__body { position: relative; }
.os-search-results__body > * { margin-block: 0; }
.os-search-results__filter {
	position: absolute;
	top: 9px; /* The line's top border + padding. */
	right: 0;
	z-index: 2;
}
.os-search-results .os-results { padding-block: 8px; }
.os-search-results .os-results__count { padding-block: 12px; }
.os-search-results__body:has(.os-blog-filters) .os-results { padding-right: 156px; }
/* The popup's blue gradient is every listing's now (os-blog.css, .os-filter__panel). */
/* One group: its options in two columns across the panel, all in view (no scrolling inside
   the panel: the last type, often Pages, was easy to miss on phones). */
.os-search-results .os-filter__groups { grid-template-columns: minmax(0, 1fr); max-height: none; overflow: visible; }
.os-search-results .os-filter__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 32px;
}

/* The searched words in a result's title and excerpt (os_search_highlight): the badge's teal tint. */
.os-search-mark {
	padding: 0 2px;
	border-radius: 3px;
	background: rgb(20 199 180 / 0.2);
	color: inherit;
}

/* Rows: text on the left, the featured image (when there is one) on the right. */
.os-search-results .os-search-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.os-search-list > li { margin: 0; }
.os-search-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
	padding: 28px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.os-search-item__text { flex: 1 1 auto; min-width: 0; max-width: 860px; }
.os-search-item__text > * { margin: 0; }
.os-search-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}
.os-search-item__meta > * { margin: 0; }
.os-search-item__type:empty { display: none; }
.os-search-item__date {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--custom--color--tertiary);
}
.os-search-item__text > .os-search-item__title {
	margin-top: 12px;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}
.os-search-item__title a {
	color: var(--wp--preset--color--ink-deep);
	text-decoration: none;
	transition: color var(--os-fast) var(--os-ease);
}
/* The title link covers the row, so a click anywhere on a result opens it. */
.os-search-item__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.os-search-item:hover .os-search-item__title a { color: var(--wp--preset--color--brand); }
.os-search-item__title a:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 3px; }
.os-search-item__text > .os-search-item__excerpt {
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--custom--color--tertiary);
}
.os-search-item__excerpt > * { margin: 0; }
.os-search-item__excerpt .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}
.os-search-item > .os-search-item__image {
	flex: none;
	width: 200px;
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 8px;
	background: var(--wp--preset--color--ice);
}
.os-search-item__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--os-slow) var(--os-ease);
}
.os-search-item:hover .os-search-item__image img { transform: scale(1.06); }

/* Nothing found: the message, then links to the main sections. */
.os-search-none { padding-bottom: 8px; text-align: center; }
.os-search-none > * { margin: 0; }
.os-search-none > .os-blog-list__empty { max-width: 720px; margin-inline: auto; padding-bottom: 20px; overflow-wrap: anywhere; }
.os-search-none__hint {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--custom--color--tertiary);
}
.os-search-none > .os-search-none__links { justify-content: center; margin-top: 20px; }

@media (max-width: 1100px) {
	.os-search-item { gap: 32px; }
	.os-search-item > .os-search-item__image { width: 168px; }
}
@media (max-width: 768px) {
	/* Phones: the Search button without its arrow, beside the field (never full width). */
	.os-search-form .wp-block-search__button::after { content: none; }
	/* The line: the count beside the button, the chips on their own row below. */
	.os-search-results__body:has(.os-blog-filters) .os-results { padding-right: 0; }
	.os-search-results__body:has(.os-blog-filters) .os-results__count { box-sizing: border-box; padding-right: 156px; }
	/* The panel opens across the page from the button's right edge (the blog's spans its
	   full-width button; this button is only as wide as its label). */
	.os-search-results__filter .os-filter__panel { left: auto; right: 0; width: calc(100vw - 2 * var(--wp--custom--gutter)); }
	.os-search-item { padding: 22px 0; }
	.os-search-item > .os-search-item__image { display: none; }
	.os-search-none > .os-blog-list__empty { padding-top: 32px; }
}
@media (max-width: 540px) {
	/* Phones: the Filter button is its icon alone (with the number of chosen types). */
	.os-search-results__filter .os-filter__toggle { min-width: 0; padding-inline: 13px; }
	.os-search-results__filter .os-filter__toggle::after { content: none; }
	.os-search-results__filter .os-filter__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.os-search-results__body:has(.os-blog-filters) .os-results__count { padding-right: 92px; }
	.os-search-results .os-filter__list { grid-template-columns: minmax(0, 1fr); }
	.os-search-item__text > .os-search-item__title { font-size: var(--wp--preset--font-size--large); }
	.os-search-none__links .wp-block-button { flex: 1 1 calc(50% - 6px); }
	.os-search-none__links .wp-block-button__link { width: 100%; box-sizing: border-box; }
}
@media (prefers-reduced-motion: reduce) {
	.os-search-form .wp-block-search__input,
	.os-search-form .wp-block-search__button,
	.os-search-item__title a,
	.os-search-item__image img { transition: none; }
	.os-search-form .wp-block-search__button:hover::after,
	.os-search-form .wp-block-search__button:focus-visible::after { animation: none; }
	.os-search-item:hover .os-search-item__image img { transform: none; }
}

/* Editor (Site Editor → Search Results): the editor makes every block position: relative and
   the stretched title link would cover the row's other blocks; the Filter block (a search field
   there) goes back in the flow above the results. */
.is-root-container .os-search-item__title a::after { content: none; }
.is-root-container .os-search-results__filter { position: static; margin-bottom: 16px; }