/* ============================================================================
   FIO BRANCO — busca instantânea
   ----------------------------------------------------------------------------
   Painel que desce sob o cabeçalho e escurece a página. No celular vira
   tela cheia. Sem plugin: alimentado pelo endpoint REST do próprio tema.
   ========================================================================== */

/* ---- gatilho no cabeçalho ---- */
.fb-buscar {
	display: inline-flex;
	align-items: center;
	gap: var(--fb-space-2xs);
	padding-block: 0.5625rem;
	padding-inline: var(--fb-space-sm);
	border: 0.0625rem solid var(--fb-seam);
	border-radius: var(--fb-radius-pill);
	background-color: var(--fb-ground);
	color: var(--fb-ink-3);
	font-family: var(--fb-font);
	font-size: var(--fb-text-sm);
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;

	/* Foco por clique repõe o repouso inteiro. Precisa dos três: o tema pai
	   pinta fundo #c36 E texto branco em :focus, e era o texto branco sobre
	   bege que sumia com o rótulo depois de fechar a busca. */
	&:focus {
		background-color: var(--fb-ground);
		border-color: var(--fb-seam);
		color: var(--fb-ink-3);
	}

	/* declarado depois do &:focus de propósito: mesma especificidade, ganha
	   a ordem, então o estado aceso prevalece sobre a reposição acima */
	&:is(:hover, :focus-visible) {
		background-color: var(--fb-surface);
		border-color: var(--fb-seam-strong);
		color: var(--fb-ink-2);
	}

	& svg {
		inline-size: 1.125rem;
		block-size: 1.125rem;
		stroke: currentcolor;
		fill: none;
		stroke-width: 1.6;
	}

	& span { padding-inline-end: var(--fb-space-lg); }

	/* no celular vira ícone */
	@media (width <= 64rem) {
		padding-inline: 0;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		justify-content: center;
		border-color: transparent;
		background: none;
		color: var(--fb-ink);

		& span { display: none; }
		& svg { inline-size: 1.5rem; block-size: 1.5rem; stroke-width: 1.75; }

		&:focus {
			background: none;
			border-color: transparent;
			color: var(--fb-ink);
		}
	}
}

/* ---- fundo escurecido ---- */
.fb-busca-fundo {
	position: fixed;
	inset: 0;
	z-index: 190;
	background-color: rgb(23 16 14 / 0.35);
	opacity: 0;
	transition: opacity 0.25s var(--fb-ease);

	&.is-aberto { opacity: 1; }
}

/* ---- painel ---- */
.fb-busca-painel {
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 220;
	max-block-size: min(85dvh, 46rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-block: var(--fb-space-md) var(--fb-space-lg);
	background-color: var(--fb-surface);
	border-block-end: 0.0625rem solid var(--fb-seam);
	font-family: var(--fb-font);
	translate: 0 -100%;
	visibility: hidden;

	/* visibility NÃO entra na transição com duração: o Chromium só aplica
	   'visible' ao final dela, e nesse meio-tempo o campo não é focável.
	   Ao abrir, aparece no instante zero; ao fechar, some depois do slide. */
	transition: translate 0.28s var(--fb-ease), visibility 0s linear 0.28s;

	&.is-aberto {
		translate: 0 0;
		visibility: visible;
		transition: translate 0.28s var(--fb-ease), visibility 0s;
	}

	&.is-carregando .fb-busca-painel__topo { opacity: 0.55; }

	& .fb-busca-painel__topo,
	& .fb-busca-painel__corpo {
		inline-size: min(52rem, 100% - var(--fb-space-lg));
		margin-inline: auto;
	}
}

/* ---- campo ---- */
.fb-busca-painel__topo {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--fb-space-sm);
	transition: opacity 0.2s;
}

.fb-busca-form {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--fb-space-xs);
	flex: 1;
	padding-block: var(--fb-space-xs);
	border-block-end: 0.0625rem solid var(--fb-ink);

	& .fb-busca-form__lupa {
		flex: none;
		inline-size: 1.25rem;
		block-size: 1.25rem;
		stroke: var(--fb-ink-2);
		fill: none;
		stroke-width: 1.5;
	}

	& input {
		flex: 1;
		min-inline-size: 0;
		border: none;
		background: none;
		outline: none;
		font: inherit;
		font-size: var(--fb-text-xl);
		color: var(--fb-ink);

		&::placeholder { color: var(--fb-ink-3); }
		&::-webkit-search-cancel-button { display: none; }
	}
}

/* Único × do painel. Havia um segundo, de limpar o campo, encostado neste:
   dois × idênticos lado a lado não dizem qual faz o quê. Ficou o que fecha —
   apagar o texto já é trivial pelo teclado. */
.fb-busca-painel__fechar {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	border: 0.0625rem solid var(--fb-seam);
	border-radius: var(--fb-radius-pill);
	background-color: var(--fb-surface);
	color: var(--fb-ink-2);
	cursor: pointer;

	&:focus {
		background-color: var(--fb-surface);
		border-color: var(--fb-seam);
		color: var(--fb-ink-2);
	}

	&:is(:hover, :focus-visible) {
		background-color: var(--fb-ground);
		border-color: var(--fb-ink);
		color: var(--fb-ink);
	}

	& svg {
		inline-size: 1.125rem;
		block-size: 1.125rem;
		stroke: currentcolor;
		fill: none;
		stroke-width: 1.6;
	}
}

/* ---- resultados ---- */
.fb-busca-painel__corpo {
	padding-block-start: var(--fb-space-md);
}

.fb-busca-grade {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fb-space-2xs) var(--fb-space-md);

	@media (width <= 40rem) { grid-template-columns: 1fr; }
}

.fb-busca-item {
	display: flex;
	align-items: center;
	gap: var(--fb-space-xs);
	padding: var(--fb-space-2xs);
	border-radius: var(--fb-radius);
	text-decoration: none;
	transition: background-color 0.15s;

	&:is(:hover, .is-ativo, :focus-visible) {
		background-color: var(--fb-ground);
	}

	& img {
		flex: none;
		inline-size: 3.5rem;
		block-size: 4.375rem;
		object-fit: cover;
		border-radius: 0.125rem;
		background-color: var(--fb-surface-2);
	}
}

.fb-busca-item__txt {
	display: flex;
	flex-direction: column;
	gap: 0.1875rem;
	min-inline-size: 0;

	& strong {
		font-size: var(--fb-text-sm);
		font-weight: 500;
		line-height: 1.3;
		color: var(--fb-ink);
	}
}

.fb-busca-item__meta {
	font-size: var(--fb-text-xs);
	color: var(--fb-ink-2);
	font-variant-numeric: tabular-nums;
}

.fb-busca-painel :is(mark) {
	background: none;
	color: inherit;
	font-weight: 700;
}

/* ---- sugestões ---- */
.fb-busca-sugestoes {
	margin-block-start: var(--fb-space-md);
	padding-block-start: var(--fb-space-md);
	border-block-start: 0.0625rem solid var(--fb-seam);
}

.fb-busca-sugestoes__titulo {
	margin: 0 0 var(--fb-space-xs);
	font-size: var(--fb-text-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fb-ink-3);
}

.fb-busca-sugestoes__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fb-space-2xs);
}

.fb-busca-sug {
	display: inline-flex;
	align-items: center;
	gap: var(--fb-space-2xs);
	padding-block: 0.5rem;
	padding-inline: 0.875rem;
	border: 0.0625rem solid var(--fb-seam-strong);
	border-radius: var(--fb-radius-pill);
	font-size: var(--fb-text-sm);
	color: var(--fb-ink);
	text-decoration: none;
	transition: border-color 0.2s, background-color 0.2s;

	&:is(:hover, .is-ativo, :focus-visible) {
		border-color: var(--fb-ink);
		background-color: var(--fb-ground);
	}

	& em {
		font-style: normal;
		font-size: var(--fb-text-xs);
		color: var(--fb-ink-3);
	}
}

.fb-busca-sug__cor {
	inline-size: 0.875rem;
	block-size: 0.875rem;
	border-radius: var(--fb-radius-pill);
	background-color: var(--cor);
	border: 0.0625rem solid var(--fb-seam-strong);
}

/* ---- rodapé e estados ---- */
.fb-busca-todos {
	display: block;
	margin-block-start: var(--fb-space-md);
	padding: var(--fb-space-xs);
	border-radius: var(--fb-radius-pill);
	background-color: var(--fb-espresso);
	color: var(--fb-on-espresso);
	font-size: var(--fb-text-sm);
	font-weight: 600;
	text-align: center;
	text-decoration: none;

	&:is(:hover, .is-ativo, :focus-visible) {
		background-color: var(--fb-espresso-hi);
		color: var(--fb-on-espresso);
	}
}

.fb-busca-vazio {
	margin: 0;
	padding-block: var(--fb-space-lg);
	text-align: center;
	color: var(--fb-ink-2);
	text-wrap: balance;
}

.fb-busca-painel__estado {
	position: absolute;
	inline-size: 0.0625rem;
	block-size: 0.0625rem;
	margin: -0.0625rem;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- celular: tela cheia ---- */
@media (width <= 48rem) {
	.fb-busca-painel {
		max-block-size: 100dvh;
		block-size: 100dvh;
		padding-block-start: var(--fb-space-sm);

		& .fb-busca-painel__topo,
		& .fb-busca-painel__corpo {
			inline-size: min(52rem, 100% - var(--fb-space-md));
		}
	}

	.fb-busca-form input { font-size: var(--fb-text-lg); }
	.fb-busca-fundo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fb-busca-painel,
	.fb-busca-fundo {
		transition-duration: 0.01ms !important;
	}
}