/*
 * Header search panel (design audit Phase 4, PR 4B). Markup: template-parts/site/search-dialog.php; the
 * results are built by js/site-search.js. Served whole (inc/wp-rocket-exclusions.php), so every rule here
 * reaches pages whose stored used-CSS predates the panel. Self-contained classes with token fallbacks.
 * Traps it avoids: no h2/h3 in the panel (style.css forces heading sizes with !important), extra classes
 * against `.roc-kit a` and `.roc-kit button`, and style.css's `input` border !important and its
 * `a, button` box-shadow and text-decoration resets. Blue, black and white only; light theme only.
 */

.roc-search-panel.roc-search-panel {
	box-sizing: border-box;
	width: min(720px, calc(100vw - 32px));
	max-width: none;
	max-height: min(720px, calc(100dvh - 12vh - 16px));
	margin: 8vh auto auto;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: var(--roc-white, #fff);
	color: var(--roc-slate-900, #0f172a);
	box-shadow: 0 32px 64px -16px rgba(2, 6, 23, 0.4);
	overflow: hidden;
	font: 400 1rem / 1.5 var(--roc-font-body, Roboto, system-ui, -apple-system, "Segoe UI", sans-serif);
	text-align: left;
}

.roc-search-panel.roc-search-panel[open] {
	display: flex;
	flex-direction: column;
}

.roc-search-panel *,
.roc-search-panel *::before,
.roc-search-panel *::after {
	box-sizing: border-box;
}

.roc-search-panel::backdrop {
	background: rgba(2, 6, 23, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

html:has(.roc-search-panel[open]) {
	overflow: hidden;
}

.roc-search-panel .roc-search-panel__vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.roc-search-panel .roc-icon {
	flex: none;
	width: 18px;
	height: 18px;
}

/* ---------- Field ---------- */
.roc-search-panel__head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 12px 12px 12px 16px;
	border-bottom: 1px solid var(--roc-border, #e2e8f0);
}

.roc-search-panel .roc-search-panel__form {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.roc-search-panel__field {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 14px;
	border: 2px solid var(--roc-border-strong, #cbd5e1);
	border-radius: 12px;
	background: var(--roc-white, #fff);
}

/* The field shows focus; the input inside it needs no ring of its own. */
.roc-search-panel__field:focus-within {
	border-color: var(--roc-blue-600, #2563eb);
}

.roc-search-panel__field .roc-icon {
	width: 20px;
	height: 20px;
	color: var(--roc-slate-500, #64748b);
}

/* style.css forces input borders and corners with !important; this input is borderless inside the field. */
.roc-search-panel .roc-search-panel__input.roc-search-panel__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-color: transparent !important;
	border-radius: 0 !important;
	background: transparent;
	color: var(--roc-slate-900, #0f172a);
	font: 400 1.0625rem / 1.4 var(--roc-font-body, Roboto, system-ui, sans-serif);
	-webkit-appearance: none;
	appearance: none;
}

.roc-search-panel .roc-search-panel__input.roc-search-panel__input:focus,
.roc-search-panel .roc-search-panel__input.roc-search-panel__input:focus-visible {
	outline: none !important;
}

/* No native clear button: the close button stays the panel's only X. */
.roc-search-panel .roc-search-panel__input::-webkit-search-cancel-button {
	display: none;
	-webkit-appearance: none;
	appearance: none;
}

.roc-search-panel .roc-search-panel__input::placeholder {
	color: var(--roc-slate-500, #64748b);
	opacity: 1;
}

.roc-search-panel .roc-search-panel__close.roc-search-panel__close {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--roc-slate-700, #334155);
	font: inherit;
	cursor: pointer;
}

/* The base layer's `.roc-kit button:focus` paints focused buttons black; keep these colours. */
.roc-search-panel .roc-search-panel__close.roc-search-panel__close:focus {
	background: transparent;
	color: var(--roc-slate-700, #334155);
}

.roc-search-panel .roc-search-panel__close.roc-search-panel__close:hover {
	background: var(--roc-slate-100, #f1f5f9);
	color: var(--roc-slate-900, #0f172a);
}

.roc-search-panel__close .roc-icon {
	width: 22px;
	height: 22px;
}

/* ---------- Body ---------- */
.roc-search-panel__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 12px 16px;
}

.roc-search-panel__body:empty {
	padding: 0;
}

.roc-search-panel .roc-search-panel__note,
.roc-search-panel .roc-search-panel__summary,
.roc-search-panel .roc-search-panel__dym,
.roc-search-panel .roc-search-panel__group-title,
.roc-search-panel .roc-search-panel__related {
	margin: 0;
}

.roc-search-panel .roc-search-panel__note {
	padding: 16px 8px 8px;
	color: var(--roc-slate-600, #475569);
}

.roc-search-panel .roc-search-panel__summary {
	padding: 10px 8px 2px;
	color: var(--roc-slate-600, #475569);
	font-size: 0.875rem;
}

/* Videos and courses left out because the site index is unavailable. */
.roc-search-panel .roc-search-panel__muted {
	margin: 0;
	padding: 2px 8px 0;
	color: var(--roc-slate-500, #64748b);
	font-size: 0.8125rem;
}

.roc-search-panel .roc-search-panel__group-title {
	padding: 14px 8px 4px;
	color: var(--roc-slate-500, #64748b);
	font: 700 0.75rem / 1.2 var(--roc-font-body, Roboto, system-ui, sans-serif);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- Tabs ---------- */
.roc-search-panel__tabs {
	display: flex;
	gap: 2px;
	margin: 0 -4px;
	padding: 0 4px;
	overflow-x: auto;
	border-bottom: 1px solid var(--roc-border, #e2e8f0);
	scrollbar-width: thin;
}

.roc-search-panel .roc-search-panel__tab.roc-search-panel__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	min-height: 44px;
	margin: 0 0 -1px;
	padding: 0 12px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 8px 8px 0 0;
	background: transparent;
	color: var(--roc-slate-700, #334155);
	font: 600 0.875rem / 1.2 var(--roc-font-body, Roboto, system-ui, sans-serif);
	white-space: nowrap;
	cursor: pointer;
}

.roc-search-panel .roc-search-panel__tab.roc-search-panel__tab:focus {
	background: transparent;
	color: var(--roc-slate-700, #334155);
}

.roc-search-panel .roc-search-panel__tab.roc-search-panel__tab:hover {
	background: var(--roc-slate-50, #f8fafc);
	color: var(--roc-slate-900, #0f172a);
}

.roc-search-panel .roc-search-panel__tab.roc-search-panel__tab[aria-selected="true"] {
	border-bottom-color: var(--roc-blue-600, #2563eb);
	color: var(--roc-blue-700, #1d4ed8);
}

.roc-search-panel__count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--roc-slate-100, #f1f5f9);
	color: var(--roc-slate-700, #334155);
	font: 600 0.75rem / 1 var(--roc-font-body, Roboto, system-ui, sans-serif);
}

.roc-search-panel__tab[aria-selected="true"] .roc-search-panel__count {
	background: var(--roc-blue-50, #eff6ff);
	color: var(--roc-blue-700, #1d4ed8);
}

/* ---------- Results ---------- */
.roc-search-panel .roc-search-panel__list,
.roc-search-panel .roc-search-panel__hubs {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.roc-search-panel .roc-search-panel__link.roc-search-panel__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 8px 10px;
	border-radius: 12px;
	color: var(--roc-slate-900, #0f172a);
	text-decoration: none;
}

.roc-search-panel .roc-search-panel__link.roc-search-panel__link:hover,
.roc-search-panel .roc-search-panel__link.roc-search-panel__link:focus-visible {
	background: var(--roc-blue-50, #eff6ff);
	color: var(--roc-slate-900, #0f172a);
}

/* Focus rings stay inside the scrolling body, which would clip an outside ring. */
.roc-search-panel .roc-search-panel__body :is(a, button):focus-visible {
	outline-offset: -3px !important;
}

.roc-search-panel__badge {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--roc-blue-50, #eff6ff);
	color: var(--roc-blue-700, #1d4ed8);
}

.roc-search-panel__link:hover .roc-search-panel__badge,
.roc-search-panel__link:focus-visible .roc-search-panel__badge {
	background: var(--roc-blue-600, #2563eb);
	color: var(--roc-white, #fff);
}

.roc-search-panel__text {
	display: grid;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.roc-search-panel__title {
	font: 600 0.9375rem / 1.35 var(--roc-font-body, Roboto, system-ui, sans-serif);
	overflow-wrap: anywhere;
}

.roc-search-panel__meta {
	color: var(--roc-slate-500, #64748b);
	font: 400 0.8125rem / 1.4 var(--roc-font-body, Roboto, system-ui, sans-serif);
}

.roc-search-panel .roc-search-panel__mark {
	padding: 0 1px;
	border-radius: 3px;
	background: var(--roc-blue-100, #dbeafe);
	color: inherit;
}

/* The Enter hint marks the result Enter opens, while the field has focus. */
.roc-search-panel__enter {
	display: none;
	flex: none;
	color: var(--roc-slate-400, #94a3b8);
}

.roc-search-panel:has(.roc-search-panel__input:focus) .roc-search-panel__enter {
	display: inline-grid;
}

.roc-search-panel .roc-search-panel__more.roc-search-panel__more,
.roc-search-panel .roc-search-panel__suggest.roc-search-panel__suggest {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 2px 0 0;
	padding: 0 10px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--roc-blue-700, #1d4ed8);
	font: 600 0.875rem / 1.2 var(--roc-font-body, Roboto, system-ui, sans-serif);
	cursor: pointer;
}

.roc-search-panel .roc-search-panel__suggest.roc-search-panel__suggest {
	margin: 0;
	padding: 0 6px;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.roc-search-panel .roc-search-panel__more.roc-search-panel__more:focus,
.roc-search-panel .roc-search-panel__suggest.roc-search-panel__suggest:focus {
	background: transparent;
	color: var(--roc-blue-700, #1d4ed8);
}

.roc-search-panel .roc-search-panel__more.roc-search-panel__more:hover,
.roc-search-panel .roc-search-panel__suggest.roc-search-panel__suggest:hover {
	background: var(--roc-blue-50, #eff6ff);
	color: var(--roc-blue-800, #1e40af);
}

.roc-search-panel .roc-search-panel__dym {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0 8px;
	color: var(--roc-slate-700, #334155);
	font-size: 0.875rem;
}

/* Related tools: linked from the top articles, shown without being counted. */
.roc-search-panel .roc-search-panel__related {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12px;
	padding: 4px 8px 0;
	color: var(--roc-slate-600, #475569);
	font-size: 0.875rem;
}

.roc-search-panel .roc-search-panel__related-link.roc-search-panel__related-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--roc-blue-700, #1d4ed8);
	font-weight: 600;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.roc-search-panel .roc-search-panel__ticker {
	margin: 8px 0 2px;
}

.roc-search-panel .roc-search-panel__titles.roc-search-panel__titles {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 10px 0 0;
	padding: 0 10px;
	border-top: 1px solid var(--roc-border, #e2e8f0);
	border-radius: 0 0 10px 10px;
	color: var(--roc-blue-700, #1d4ed8);
	font: 600 0.875rem / 1.3 var(--roc-font-body, Roboto, system-ui, sans-serif);
	text-decoration: none;
}

.roc-search-panel .roc-search-panel__titles.roc-search-panel__titles:hover {
	background: var(--roc-blue-50, #eff6ff);
	color: var(--roc-blue-800, #1e40af);
}

/* ---------- Quick links (empty panel) ---------- */
.roc-search-panel .roc-search-panel__hubs {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: 6px;
	padding: 2px 0 4px;
}

.roc-search-panel .roc-search-panel__hub.roc-search-panel__hub {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--roc-border, #e2e8f0);
	border-radius: 10px;
	color: var(--roc-slate-900, #0f172a);
	font: 500 0.9375rem / 1.3 var(--roc-font-body, Roboto, system-ui, sans-serif);
	text-decoration: none;
}

.roc-search-panel .roc-search-panel__hub.roc-search-panel__hub:hover {
	border-color: var(--roc-blue-600, #2563eb);
	background: var(--roc-blue-50, #eff6ff);
	color: var(--roc-blue-700, #1d4ed8);
}

.roc-search-panel__hub .roc-icon {
	color: var(--roc-slate-400, #94a3b8);
}

/* ---------- Phones: the panel fills the screen ---------- */
@media (max-width: 575.98px) {
	.roc-search-panel.roc-search-panel {
		width: 100%;
		height: 100dvh;
		max-height: 100dvh;
		margin: 0;
		border-radius: 0;
	}

	.roc-search-panel__head {
		padding: 10px 8px 10px 12px;
	}
}

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion: no-preference) {
	.roc-search-panel.roc-search-panel,
	.roc-search-panel::backdrop {
		transition: opacity var(--roc-base, 220ms) var(--roc-ease, ease), transform var(--roc-base, 220ms) var(--roc-ease, ease),
			overlay var(--roc-base, 220ms) allow-discrete, display var(--roc-base, 220ms) allow-discrete;
	}

	.roc-search-panel.roc-search-panel:not([open]),
	.roc-search-panel:not([open])::backdrop {
		opacity: 0;
	}

	.roc-search-panel.roc-search-panel:not([open]) {
		transform: translateY(8px) scale(0.985);
	}

	@starting-style {
		.roc-search-panel.roc-search-panel[open] {
			opacity: 0;
			transform: translateY(8px) scale(0.985);
		}

		.roc-search-panel[open]::backdrop {
			opacity: 0;
		}
	}

	.roc-search-panel__link,
	.roc-search-panel__badge,
	.roc-search-panel__tab,
	.roc-search-panel__hub,
	.roc-search-panel__more,
	.roc-search-panel__titles {
		transition: background-color var(--roc-fast, 150ms) var(--roc-ease, ease), color var(--roc-fast, 150ms) var(--roc-ease, ease),
			border-color var(--roc-fast, 150ms) var(--roc-ease, ease);
	}
}

@media (forced-colors: active) {
	.roc-search-panel.roc-search-panel {
		border: 1px solid CanvasText;
	}

	.roc-search-panel__field,
	.roc-search-panel .roc-search-panel__hub.roc-search-panel__hub,
	.roc-search-panel .roc-search-panel__close.roc-search-panel__close {
		border: 1px solid CanvasText;
	}

	.roc-search-panel .roc-search-panel__tab.roc-search-panel__tab[aria-selected="true"] {
		border-bottom: 3px solid Highlight;
	}

	.roc-search-panel .roc-search-panel__mark {
		background: Mark;
		color: MarkText;
	}

	.roc-search-panel__badge,
	.roc-search-panel__count {
		border: 1px solid CanvasText;
	}
}

@media print {
	.roc-search-panel {
		display: none !important;
	}
}