/**
 * Modal Search — frontend styles.
 *
 * Mobile-first. Uses CSS custom properties so themes can override.
 * Picks up Headspin UI design tokens (--hsx-*, --hcl-*, --hrd-*, --hsp-*)
 * automatically when they are present, and falls back to neutral defaults
 * when used on sites without Headspin. Respects prefers-reduced-motion.
 * Includes a screen-reader-text fallback if the active theme does not
 * provide one.
 *
 * Selector strategy
 * -----------------
 * Page builders (Breakdance, Headspin, Elementor, …) inject high-specificity
 * element rules (e.g. ".bde-section h3", ":where(input)") that beat plain
 * BEM single-class selectors. To avoid an !important arms race, the modal
 * scope uses the dialog id (#ms-search-modal) as ancestor — that gives every
 * inner rule (1, 1, 0) specificity which beats virtually all builder output.
 * The trigger button (which lives outside the modal) chains its class with
 * its [data-ms-search-trigger] attribute hook to reach (0, 2, 0).
 *
 * The asset is also enqueued at priority 999 so it loads after builder CSS
 * — for rules with equal specificity the cascade order then resolves in our
 * favour.
 */

:root {
	--ms-search-z-index: 100000;

	--ms-search-bg: var(--hsx-site-background, #ffffff);
	--ms-search-fg: var(--hsx-body-text-color, #1a1a1a);
	--ms-search-muted: var(--hcl-neutral-11, #6b7280);
	--ms-search-border: var(--hcl-neutral-5, #e5e7eb);
	--ms-search-accent: var(--hcl-brand-9, #1f4cff);
	--ms-search-accent-fg: var(--hcl-on-brand, #ffffff);
	--ms-search-overlay: var(--hsx-safe-overlay, rgba(15, 23, 42, 0.65));

	--ms-search-radius: var(--hrd-m, 8px);
	--ms-search-spacing: var(--hsp-m, 1rem);
	--ms-search-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
	--ms-search-focus: 0 0 0 3px var(--hcl-brand-7a, rgba(31, 76, 255, 0.4));

	--ms-search-hover-bg: var(--hcl-neutral-3a, rgba(0, 0, 0, 0.06));
	--ms-search-hover-bg-strong: var(--hcl-neutral-4a, rgba(0, 0, 0, 0.08));
	--ms-search-hover-bg-subtle: var(--hcl-neutral-2a, rgba(0, 0, 0, 0.03));

	/* Trigger icon — defaults to white because it sits in the
	 * site header (dark background). Override per placement if needed.
	 */
	--ms-search-trigger-color: #ffffff;

	/* Inner content max width — matches the site's page width
	 * (Headspin: --hsx-page-width = 1366px on this site).
	 */
	--ms-search-content-max-width: 56rem;
}

/* Trigger button --------------------------------------------------- */

.ms-search__trigger[data-ms-search-trigger] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	color: var(--ms-search-trigger-color);
	cursor: pointer;
	border-radius: 50%;
	transition: background-color 400ms ease;
	box-shadow: none;
	font: inherit;
	line-height: 1;
}

.ms-search__trigger[data-ms-search-trigger]:hover,
.ms-search__trigger[data-ms-search-trigger]:focus-visible {
	background-color: var(--ms-search-hover-bg);
	color: var(--ms-search-trigger-color);
}

.ms-search__trigger[data-ms-search-trigger]:focus {
	outline: 0;
}

.ms-search__trigger[data-ms-search-trigger]:focus-visible {
	box-shadow: var(--ms-search-focus);
}

.ms-search__trigger[data-ms-search-trigger] .ms-search__icon {
	display: inline-flex;
	width: 1.5rem;
	height: 1.5rem;
	color: inherit;
}

.ms-search__trigger[data-ms-search-trigger] .ms-search__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
}

/* Body scroll lock ------------------------------------------------- */

html.ms-search-locked,
body.ms-search-locked {
	overflow: hidden;
}

body.ms-search-locked {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
}

/* Modal ------------------------------------------------------------ */

#ms-search-modal {
	position: fixed;
	inset: 0;
	z-index: var(--ms-search-z-index);
	display: flex;
	align-items: stretch;
	justify-content: center;
}

#ms-search-modal[hidden] {
	display: none;
}

#ms-search-modal .ms-search-modal__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--ms-search-overlay);
	animation: ms-search-fade 180ms ease;
}

#ms-search-modal .ms-search-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	max-width: 100%;
	background-color: var(--ms-search-bg);
	color: var(--ms-search-fg);
	padding: 4.5rem 1.25rem 2rem;
	overflow-y: auto;
	animation: ms-search-rise 220ms ease;
	font-family: inherit;
}

/* Constrain inner content to the site's page width while the dialog
 * itself remains edge-to-edge fullscreen.
 */
#ms-search-modal .ms-search-modal__logo,
#ms-search-modal .ms-search-modal__form,
#ms-search-modal .ms-search-modal__popular,
#ms-search-modal .ms-search-modal__results {
	width: 100%;
	max-width: var(--ms-search-content-max-width);
	margin-inline: auto;
	padding: 0 1.5rem;
}

@media (min-width: 720px) {
	#ms-search-modal .ms-search-modal__dialog {
		padding: 8rem 2rem 3rem;
	}
}

/* Close button ----------------------------------------------------- */

#ms-search-modal .ms-search-modal__close {
	position: absolute;
	top: 2rem;
	right: 2rem;
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: #004b6e;
	transition: background-color 400ms ease;
}

#ms-search-modal .ms-search-modal__close:hover,
#ms-search-modal .ms-search-modal__close:focus-visible {
	background-color: var(--ms-search-hover-bg-strong);
}

#ms-search-modal .ms-search-modal__close:focus {
	outline: 0;
}

#ms-search-modal .ms-search-modal__close:focus-visible {
	box-shadow: var(--ms-search-focus);
}

/* Logo ------------------------------------------------------------- */

#ms-search-modal .ms-search-modal__logo {
	display: flex;
	margin-bottom: 2rem;
}

#ms-search-modal .ms-search-modal__logo img {
	max-width: 200px;
	height: auto;
	width: auto;
	display: block;
}

/* Form / input ----------------------------------------------------- */

#ms-search-modal .ms-search-modal__form {
	margin: 0 auto var(--ms-search-spacing);
}

#ms-search-modal .ms-search-modal__input-wrap {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--ms-search-border);
	padding: 0.5rem 0;
	transition: border-color 400ms ease;
	background: transparent;
}

#ms-search-modal .ms-search-modal__input-icon {
	display: inline-flex;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--ms-search-muted);
	margin-right: 0.75rem;
	flex-shrink: 0;
}

#ms-search-modal .ms-search-modal__input-icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: #004b6e;
}

#ms-search-modal .ms-search-modal__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	color: inherit;
	line-height: 1.4;
	padding: 0.5rem 0;
	outline: 0;
	font-family: inherit;
	font-size: 1rem;
	box-shadow: none;
	border-radius: 0;
	font-size: 1.25rem;
}

#ms-search-modal .ms-search-modal__input::-webkit-search-decoration,
#ms-search-modal .ms-search-modal__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* Popular ---------------------------------------------------------- */

#ms-search-modal .ms-search-modal__popular {
	margin-bottom: 1.5rem;
}

#ms-search-modal .ms-search-modal__popular-title {
	margin: 0 0 0.5rem;
	font-size: 1.2125rem;
	letter-spacing: 0.05em;
	line-height: 1.4;
	color: #00344db3;
	font-weight: 500;
}

#ms-search-modal .ms-search-modal__popular-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

#ms-search-modal .ms-search-modal__popular-item {
	margin: 0;
	padding: 0;
}

#ms-search-modal .ms-search-modal__popular-button {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.5rem 0;
	background: transparent;
	border: 0;
	color: inherit;
	text-align: left;
	cursor: pointer;
	font: inherit;
	font-size: 0.95rem;
	text-decoration: underline;
	transition: color 400ms ease, transform 400ms ease;
	transform-origin: left center;
	box-shadow: none;
	border-radius: 0;
}

#ms-search-modal .ms-search-modal__popular-button::before {
	content: '';
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center / contain no-repeat;
	color: #004b6e;
	opacity: 0.65;
}

#ms-search-modal .ms-search-modal__popular-button:hover,
#ms-search-modal .ms-search-modal__popular-button:focus-visible {
	color: var(--ms-search-accent);
	background: transparent;
	transform: scale(1.04);
}

#ms-search-modal .ms-search-modal__popular-button:focus {
	outline: 0;
}

#ms-search-modal .ms-search-modal__popular-button:focus-visible {
	box-shadow: var(--ms-search-focus);
	border-radius: 4px;
}

/* Results ---------------------------------------------------------- */

#ms-search-modal .ms-search-modal__results[aria-busy="true"] {
	opacity: 0.7;
}

#ms-search-modal .ms-search-modal__results-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

#ms-search-modal .ms-search-modal__result {
	margin: 0;
	padding: 0;
}

#ms-search-modal .ms-search-modal__result-link {
	display: block;
	padding: 0.875rem;
	border-bottom: 1px solid var(--ms-search-border);
	color: inherit;
	text-decoration: none;
	transition: background-color 400ms ease, transform 400ms ease;
	border-radius: 0;
}

#ms-search-modal .ms-search-modal__result-link:hover,
#ms-search-modal .ms-search-modal__result-link:focus-visible {
	background-color: var(--ms-search-hover-bg-subtle);
	color: inherit;
	text-decoration: none;
	transform: scale(1.02);
}

#ms-search-modal .ms-search-modal__result-link:focus {
	outline: 0;
}

#ms-search-modal .ms-search-modal__result-link:focus-visible {
	box-shadow: var(--ms-search-focus);
	border-radius: 4px;
}

#ms-search-modal .ms-search-modal__result-title {
	display: block;
	font-weight: 600;
	font-size: 1rem;
	color: var(--ms-search-fg);
	margin-bottom: 0.25rem;
	font-family: inherit;
	line-height: 1.4;
}

#ms-search-modal .ms-search-modal__result-meta {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--ms-search-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.25rem;
	font-family: inherit;
}

#ms-search-modal .ms-search-modal__result-excerpt {
	display: block;
	font-size: 0.9rem;
	color: var(--ms-search-muted);
	line-height: 1.5;
	font-family: inherit;
}

#ms-search-modal .ms-search-modal__empty {
	margin: 0;
	padding: 1rem 0;
	color: var(--ms-search-muted);
	font-size: 0.95rem;
	font-family: inherit;
}

/* Screen-reader-text utility (fallback if theme lacks it) ---------- */

#ms-search-modal .screen-reader-text,
.ms-search__trigger[data-ms-search-trigger] .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Animations ------------------------------------------------------- */

@keyframes ms-search-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes ms-search-rise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	#ms-search-modal .ms-search-modal__overlay,
	#ms-search-modal .ms-search-modal__dialog,
	.ms-search__trigger[data-ms-search-trigger],
	#ms-search-modal .ms-search-modal__close,
	#ms-search-modal .ms-search-modal__popular-button,
	#ms-search-modal .ms-search-modal__result-link,
	#ms-search-modal .ms-search-modal__input-wrap {
		animation: none !important;
		transition: none !important;
	}

	#ms-search-modal .ms-search-modal__popular-button:hover,
	#ms-search-modal .ms-search-modal__popular-button:focus-visible {
		transform: none;
	}
}

/* Forced colors / Windows High Contrast --------------------------- */

@media (forced-colors: active) {
	.ms-search__trigger[data-ms-search-trigger]:focus-visible,
	#ms-search-modal .ms-search-modal__close:focus-visible,
	#ms-search-modal .ms-search-modal__popular-button:focus-visible,
	#ms-search-modal .ms-search-modal__result-link:focus-visible {
		outline: 2px solid CanvasText;
		box-shadow: none;
	}
}