/**
 * Busca global do cabeçalho.
 *
 * O painel é um disclosure em fluxo, não modal.
 * Sem JavaScript o fallback permanece visível.
 */

.search-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--control-height);
	min-width: var(--control-height);
	min-height: var(--control-height);
	padding: 0;
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-md);
	background-color: transparent;
	color: var(--color-text);
	cursor: pointer;
}

[data-search-ready] .search-toggle {
	display: inline-flex;
}

.search-toggle:focus-visible {
	color: var(--color-brand-primary);
}

.search-toggle:active,
.search-close:active {
	color: var(--color-brand-primary-dark);
}

.search-toggle:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

.search-toggle[aria-expanded="true"] {
	color: var(--color-brand-primary);
}

.search-toggle__icon {
	width: 1.5rem;
	height: 1.5rem;
}

.site-search-fallback {
	width: 100%;
	padding-block: var(--space-md);
	border-block-start: var(--border-width) solid var(--color-surface-muted);
	background-color: var(--color-background);
}

[data-search-ready] .site-search-fallback {
	display: none;
}

.site-search-fallback__inner,
.site-search-panel__inner {
	min-width: 0;
}

.site-search-panel {
	width: 100%;
	padding-block: var(--space-md);
	border-block-start: var(--border-width) solid var(--color-surface-muted);
	background-color: var(--color-surface-muted);
	box-shadow: var(--shadow-subtle);
}

.site-search-panel__toolbar {
	display: flex;
	justify-content: flex-end;
	margin-block-end: var(--space-sm);
}

.search-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	min-width: var(--control-height);
	min-height: var(--control-height);
	padding-inline: var(--space-sm);
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-md);
	background-color: transparent;
	color: var(--color-text);
	font-weight: 500;
	cursor: pointer;
}

.search-close:focus-visible {
	color: var(--color-brand-primary);
}

.search-close:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

.search-close__icon {
	width: 1.25rem;
	height: 1.25rem;
}

.site-search-panel .search-form,
.site-search-fallback .search-form {
	width: 100%;
	max-width: 100%;
}

.site-search-panel .search-form .form-field,
.site-search-fallback .search-form .form-field {
	flex: 1 1 100%;
}

.site-search-panel .search-form .form-actions,
.site-search-fallback .search-form .form-actions {
	flex: 1 1 100%;
}

.site-search-panel .search-form .button,
.site-search-fallback .search-form .button {
	width: 100%;
}

@media (min-width: 480px) {
	.site-search-panel .search-form,
	.site-search-fallback .search-form {
		flex-wrap: nowrap;
		align-items: flex-end;
	}

	.site-search-panel .search-form .form-field,
	.site-search-fallback .search-form .form-field {
		flex: 1 1 auto;
	}

	.site-search-panel .search-form .form-actions,
	.site-search-fallback .search-form .form-actions {
		flex: 0 0 auto;
	}

	.site-search-panel .search-form .button,
	.site-search-fallback .search-form .button {
		width: auto;
	}
}

@media (min-width: 1024px) {
	.site-search-panel .search-form,
	.site-search-fallback .search-form {
		max-width: var(--container-content);
	}
}

@media (hover: hover) and (pointer: fine) {
	.search-toggle:hover,
	.search-close:hover {
		color: var(--color-brand-primary);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.search-toggle,
	.search-close {
		transition: color var(--transition-fast);
	}
}