/**
 * In-page search — see assets/js/inpage-search.js and inc/inpage-search.php.
 *
 * Colours follow the RTSL sodium-framework search (amber highlight, red outline on
 * the match you're currently on) so the two feel like the same tool.
 */

/*
 * Declared on :root, not on .ips. The <mark>s are injected into the page content,
 * which is not a descendant of the search widget — scoping the custom properties to
 * .ips leaves them undefined on the highlights, and background-color: var(--ips-hit)
 * then resolves to nothing at all.
 */
:root {
	--ips-hit: #fcba24;
	/* Brand green — the same value as the section headings and site buttons. */
	--ips-current: #3bb042;
	/* Kept separate from --ips-current so "No results" still reads as a dead end
	   rather than as a success state. */
	--ips-empty: #e8383d;
	--ips-border: #c9ced6;
	--ips-muted: #5a6472;
}

.ips {
	margin: 0 0 1.5rem;
	max-width: 42rem;
}

/* ---------- input row ---------- */

.ips__form {
	position: relative;
	display: flex;
	align-items: center;
}

.ips__input {
	width: 100%;
	padding: 0.7rem 2.75rem 0.7rem 1rem;
	border-radius: 9rem !important;
    border: 1px solid var(--color-blue-grey) !important;
	font-size: 1rem;
	line-height: 1.4;
}
.ips__input:focus {
	outline: 2px solid var(--ips-current);
	outline-offset: 1px;
}

/* Suppress the browser's own clear affordance — we render our own. */
.ips__input::-webkit-search-cancel-button {
	display: none;
}

.ips__clear {
	position: absolute;
	right: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ips-muted);
	cursor: pointer;
}

.ips__clear:hover,
.ips__clear:focus-visible {
	color: var(--ips-current);
	background: rgba(0, 0, 0, 0.05);
}

.ips__clear[hidden] {
	display: none;
}

/* ---------- result count + arrows ---------- */

.ips__status {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.6rem;
	font-size: 0.9rem;
	color: var(--ips-muted);
}

.ips__status[hidden] {
	display: none;
}

.ips.is-empty .ips__count {
	color: var(--ips-empty, #e8383d);
}

.ips__nav {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.ips__nav[hidden] {
	display: none;
}

.ips__prev,
.ips__next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	border: 1px solid var(--ips-border);
	border-radius: 4px;
	background: #fff;
	color: inherit;
	cursor: pointer;
}

.ips__prev:hover:not(:disabled),
.ips__next:hover:not(:disabled),
.ips__prev:focus-visible,
.ips__next:focus-visible {
	border-color: var(--ips-current);
	color: var(--ips-current);
}

.ips__prev:disabled,
.ips__next:disabled {
	opacity: 0.35;
	cursor: default;
}

.ips__prev svg {
	transform: rotate(180deg);
}

/* ---------- the highlights ---------- */

/*
 * Scoped to mark.ips-hit rather than a bare .highlight class: the child theme
 * already uses .highlight for an unrelated callout treatment, and that collision is
 * exactly what forced a per-widget CSS override on the RTSL version.
 */
mark.ips-hit {
	background-color: var(--ips-hit, #fcba24);
	color: inherit;
	padding: 0;
	border-radius: 2px;
}

mark.ips-hit.is-current {
	outline: 2px solid var(--ips-current, #3bb042);
	outline-offset: 1px;
}

@media print {
	.ips {
		display: none;
	}

	mark.ips-hit {
		background: none;
	}

	mark.ips-hit.is-current {
		outline: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ips__prev,
	.ips__next {
		transition: none;
	}
}