/* ============================================================
 * Página de Dúvidas Frequentes (ModeloFAQ.php)
 * — campo de busca que filtra as perguntas no cliente.
 * JS: js/faq-busca.js. Enqueue condicional em inc/enqueue.php.
 * ============================================================ */

/* ----------------------------------------- Barra topo ----
   Mesma composição da barra do blog (.rvb-blog-toolbar): categorias à
   esquerda, busca à direita, uma linha só. No desktop as categorias vivem na
   sidebar, então sobra só a busca — por isso o margin-left auto. */
.rvb-faq-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .85rem 1.5rem;
	margin-bottom: 1rem;
}

.rvb-faq-toolbar-cats {
	display: flex;
	align-items: center;
	gap: .6rem;
}

/* --------------------------------------------- Busca ----
   Largura cheia do container — do começo da sidebar até o fim da coluna de
   conteúdo. Um campo estreito à direita ficava desalinhado das duas colunas
   abaixo dele e não parecia o controle principal da página, que é o que ele é.
   Sem label visível: o placeholder já diz o que fazer, e o nome acessível vem
   do aria-label do input. */
.rvb-faq-busca {
	width: 100%;
}

.rvb-faq-busca-campo {
	position: relative;
	display: flex;
	align-items: center;
}

.rvb-faq-busca-icone {
	position: absolute;
	left: 1rem;
	display: flex;
	color: var(--rvbSecondaryColorLight);
	font-size: .9375rem;
	pointer-events: none;
}

.rvb-faq-busca-input {
	width: 100%;
	/* 2.9rem à esquerda abre espaço para a lupa; 3rem à direita, para o "limpar" */
	padding: .8rem 3rem .8rem 2.9rem;
	font-family: 'Baloo 2', 'Arial';
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.4;
	color: var(--rvbTextColor);
	background: #fff;
	border: 1px solid var(--rvbLightGrayColor);
	border-radius: 8px;
	transition: var(--rvbHoverTransition);
	transition-property: border-color, box-shadow;
	-webkit-appearance: none;
	appearance: none;
}

.rvb-faq-busca-input::placeholder {
	color: var(--rvbSecondaryColorLight);
	opacity: 1;
}

.rvb-faq-busca-input:focus {
	outline: none;
	border-color: var(--rvbMainColorBlue);
	box-shadow: 0 0 0 3px rgba(14, 48, 204, .12);
}

/* o "x" nativo do type=search some: temos um botão próprio, com alvo de toque
   maior e rótulo acessível */
.rvb-faq-busca-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.rvb-faq-busca-limpar {
	position: absolute;
	right: .4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 44px: alvo de toque confortável no mobile */
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--rvbSecondaryColorLight);
	font-size: 1rem;
	cursor: pointer;
	transition: var(--rvbHoverTransition);
	transition-property: color, background-color;
}

.rvb-faq-busca-limpar:hover,
.rvb-faq-busca-limpar:focus-visible {
	color: var(--rvbMainColorBlue);
	background: var(--rvbMainColorLight);
}

.rvb-faq-busca-status {
	font-size: .875rem;
	color: var(--rvbSecondaryColorLight);
	margin: 0 0 1.5rem;
	min-height: 1.25rem; /* reserva a linha para o texto não empurrar a lista */
}

/* ---------------------------------------- Empty state ----
   :not([hidden]) porque o JS controla o bloco pelo atributo hidden, e um
   display: flex solto venceria o atributo — o estado vazio apareceria sempre. */
.rvb-faq-busca-vazio:not([hidden]) {
	display: flex;
}

.rvb-faq-busca-vazio {
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 3rem 1.5rem;
	border: 1px dashed var(--rvbLightGrayColor);
	border-radius: 12px;
	margin: 0 0 2rem;
}

.rvb-faq-busca-vazio-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	margin-bottom: 1.25rem;
	border-radius: 50%;
	background: var(--rvbMainColorLight);
	color: var(--rvbMainColorBlue);
}

.rvb-faq-busca-vazio-icone svg {
	width: 2.25rem;
	height: 2.25rem;
}

.rvb-faq-busca-vazio-texto {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--rvbTextColor);
	margin: 0 0 .35rem;
}

.rvb-faq-busca-vazio-dica {
	font-size: .9375rem;
	color: var(--rvbSecondaryColorLight);
	margin: 0;
}

/* --------------------------------------- Sidebar ----
   Sticky abaixo do header, que é .fixed-top com 80px de altura (css/style.css)
   — daí o top de 100px, que dá 20px de respiro. O mesmo valor vai no
   scroll-margin-top das seções, senão o título entra por baixo do header ao
   rolar até ele. */
.rvb-faq-nav {
	position: sticky;
	top: 100px;
}

.rvb-faq-nav-titulo {
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--rvbSecondaryColorLight);
	margin: 0 0 .75rem;
}

.rvb-faq-nav-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.rvb-faq-nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	padding: .55rem .75rem;
	border-radius: 8px;
	/* a borda esquerda existe sempre, transparente, para o item não "pular"
	   2px para o lado quando vira o ativo */
	border-left: 2px solid transparent;
	font-size: .9375rem;
	line-height: 1.3;
	color: var(--rvbTextColor);
	text-decoration: none;
	transition: var(--rvbHoverTransition);
	transition-property: background-color, color, border-color;
}

.rvb-faq-nav-link:hover,
.rvb-faq-nav-link:focus-visible {
	background: var(--rvbMainColorLight);
	color: var(--rvbMainColorBlue);
}

.rvb-faq-nav-link.is-ativa {
	background: var(--rvbMainColorLight);
	border-left-color: var(--rvbMainColorBlue);
	color: var(--rvbMainColorBlue);
	font-weight: 600;
}

.rvb-faq-nav-contador {
	flex-shrink: 0;
	font-size: .75rem;
	font-weight: 600;
	color: var(--rvbSecondaryColorLight);
}

.rvb-faq-nav-link.is-ativa .rvb-faq-nav-contador {
	color: var(--rvbMainColorBlue);
}

/* categoria zerada pela busca: continua clicável, mas sai do primeiro plano */
.rvb-faq-nav-link.is-vazia {
	opacity: .4;
}

/* -------------------------------------- Categorias ----
   O acordeão perde o max-width de 820px aqui: dentro da coluna de conteúdo
   quem manda na largura é o grid. */
.rvb-faq-layout .rvb-faq {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.rvb-faq-category {
	scroll-margin-top: 100px;
	margin-bottom: 2.5rem;
}

.rvb-faq-category:last-of-type {
	margin-bottom: 0;
}

/* 22px e à esquerda: com a sidebar ao lado, o centralizado ficava torto em
   relação à coluna, e os 32px de .rvb-section-h3 disputavam atenção com o H1
   da página e com as próprias perguntas. Vira rótulo de grupo. */
.rvb-faq-category-titulo {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -.5px;
	color: var(--rvbTextColor);
	margin: 0 0 1rem;
}

/* Estado de filtragem — aplicado pelo JS nos itens */
.rvb-faq-oculto {
	display: none !important;
}

/* Categoria sem nenhuma pergunta visível sai inteira — título e acordeão. A
   busca não mora mais aqui dentro (vive na barra do topo), então esconder o
   container é seguro. */
.rvb-faq-categoria-vazia {
	display: none;
}

@media (max-width: 575.98px) {
	.rvb-faq-busca-input {
		/* 16px evita o zoom automático do iOS ao focar o campo */
		font-size: 1rem;
	}
}