/* =========================================================================
   Busca sugestiva do cabeçalho.

   O botão vive no header em overlay, que é claro sobre foto e escuro quando
   rola — por isso o ícone usa currentColor e herda a cor do header, como o
   nav-toggle. O painel de resultados, ao contrário, é superfície clara: é uma
   lista para ler, e texto corrido sobre o frosted escuro do header cansa.
   ========================================================================= */

.leto-busca { position: relative; display: inline-flex; align-items: center; }

.leto-busca__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background .25s var(--ease, ease), opacity .25s var(--ease, ease);
}
.leto-busca__toggle:hover { background: rgba(255,255,255,.14); }
.leto-busca__toggle:focus-visible { outline: 2px solid var(--leto-green); outline-offset: 2px; }
.leto-busca.is-open .leto-busca__toggle { background: rgba(255,255,255,.18); }

/* ---------- painel ---------- */

.leto-busca__panel {
	position: absolute;
	top: calc(100% + 14px);
	right: 0;
	z-index: 70;
	width: min(440px, calc(100vw - 2rem));
	background: var(--leto-paper, #fafaf7);
	border-radius: 18px;
	box-shadow: 0 18px 48px rgba(0,0,0,.28);
	overflow: hidden;
}
.leto-busca__panel[hidden] { display: none; }

.leto-busca__form {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: 14px 14px 14px 22px;
	border-bottom: 1px solid rgba(45,45,45,.12);
}
.leto-busca__input {
	flex: 1;
	min-width: 0;
	height: 40px;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: 15px;
	color: var(--leto-ink);
}
.leto-busca__input::placeholder { color: rgba(45,45,45,.5); }
.leto-busca__input::-webkit-search-cancel-button { display: none; }

.leto-busca__close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: transparent;
	color: var(--leto-ink);
	cursor: pointer;
	transition: background .2s var(--ease, ease);
}
.leto-busca__close:hover { background: rgba(45,45,45,.09); }
.leto-busca__close:focus-visible { outline: 2px solid var(--leto-ink); outline-offset: 1px; }

/* ---------- resultados ---------- */

.leto-busca__resultados {
	max-height: min(64vh, 520px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.leto-busca__aviso {
	margin: 0;
	padding: 20px 22px;
	font-size: 13.5px;
	color: rgba(45,45,45,.62);
}

.leto-busca__grupo { padding: 6px 0; }
.leto-busca__grupo + .leto-busca__grupo { border-top: 1px solid rgba(45,45,45,.09); }

/* O nome da área é rótulo, não item clicável — daí o caixa-alta e o tracking. */
.leto-busca__area {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin: 0;
	padding: 12px 22px 6px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(45,45,45,.55);
}
.leto-busca__mais {
	margin-left: auto;
	letter-spacing: 0;
	font-weight: 500;
	color: rgba(45,45,45,.42);
}

.leto-busca__item {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	padding: 9px 22px;
	text-decoration: none;
	color: var(--leto-ink);
	transition: background .18s var(--ease, ease);
}
.leto-busca__item:hover,
.leto-busca__item:focus-visible {
	background: var(--leto-green-soft, #e4f0bb);
	outline: 0;
}
.leto-busca__titulo {
	flex: 1;
	min-width: 0;
	font-size: 14.5px;
	line-height: 1.3;
	font-weight: 500;
}
.leto-busca__sub {
	flex: none;
	font-size: 12px;
	color: rgba(45,45,45,.55);
	white-space: nowrap;
}

.leto-busca__todos {
	display: block;
	width: 100%;
	padding: 15px 22px;
	border: 0;
	border-top: 1px solid rgba(45,45,45,.12);
	background: transparent;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	color: var(--leto-green-deep, #5e6b3a);
	cursor: pointer;
	transition: background .18s var(--ease, ease);
}
.leto-busca__todos:hover { background: rgba(45,45,45,.05); }
.leto-busca__todos:focus-visible { outline: 2px solid var(--leto-green-deep); outline-offset: -2px; }

/* ---------- mobile ----------
   No celular o painel deixa de ser dropdown e ocupa a largura da tela: 440px
   ancorado à direita sairia da viewport em telas estreitas. */
@media (max-width: 620px) {
	.leto-busca__panel {
		position: fixed;
		top: 76px;
		left: 1rem;
		right: 1rem;
		width: auto;
	}
	.leto-busca__resultados { max-height: calc(100vh - 190px); }
}

@media (prefers-reduced-motion: reduce) {
	.leto-busca__toggle,
	.leto-busca__close,
	.leto-busca__item,
	.leto-busca__todos { transition: none; }
}

/* "Você quis dizer" — só aparece quando a busca não devolve nada. */
.leto-busca__sugestao { color: var(--leto-ink); }
.leto-busca__sugestao-btn {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--leto-green-deep, #5e6b3a);
	text-decoration: underline;
	cursor: pointer;
}
.leto-busca__sugestao-btn:hover { text-decoration: none; }