/*
 * jetsearch.css — Fontes adicionais do Ajax Search (JetSearch)
 * Tema: hello-elementor-child
 *
 * Estiliza os blocos adicionais que o mu-plugin bit-crossblog-search.php
 * injeta no dropdown da busca do header — notícias, eventos, participantes,
 * Cultura (páginas do /cultura/ e artistas do Atlas) e exposições —, todos
 * com a classe
 *   .jet-ajax-search__source-results-holder_bit_<seção>
 *
 * Os itens usam o mesmo markup dos itens de post (.jet-ajax-search__results-item)
 * e herdam o estilo do widget; aqui fica só o rótulo de cada bloco, que o
 * widget não estiliza (fundo secondary, rótulo em accent).
 * Cores só via Global Colors do Elementor.
 *
 * Especificidade alta de propósito: quando a busca não acha post nenhum, os
 * blocos ficam dentro de .jet-ajax-search__results-list e o CSS do plugin
 * (.jet-ajax-search__results-list .…-holder-title { font-size: 24px }) vence
 * um seletor curto.
 */

.jet-ajax-search .jet-ajax-search__results-holder [class*="jet-ajax-search__source-results-holder_bit_"] {
	background-color: var(--e-global-color-secondary);
	border-top: 1px solid color-mix(in srgb, var(--e-global-color-primary) 20%, transparent);
	padding: 0;
}

.jet-ajax-search .jet-ajax-search__results-holder [class*="jet-ajax-search__source-results-holder_bit_"] .jet-ajax-search__source-results-holder-title {
	color: var(--e-global-color-accent);
	font-family: Roboto, sans-serif;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.5;
	padding: 12px 10px 2px;
	text-transform: uppercase;
}

/* ==========================================================================
   Página de resultados — /busca/ e /en/busca/ ("Ver mais resultados")
   Markup do mu-plugin bit-crossblog-search.php. Mesma linguagem do painel de
   busca e do dropdown: títulos Poppins, itens Rubik com thumb redonda, rótulos
   Roboto em accent. Os seletores dos itens levam .bit-busca na frente porque
   o kit do Elementor estiliza todo <a> (.elementor-kit-N a: negrito, accent),
   e um seletor de uma classe só perde para ele.
   ========================================================================== */

/* O fundo cream das páginas vem das configurações de cada página no
   Elementor (body.elementor-page-N). A rota /busca/ não é página do WP e
   cai no `html body.elementor-default` do base.css, que usa
   --ucpa-color-offwhite -> --offwhite, variável legada que não existe:
   fundo transparente (branco). Mesmo token das páginas, com a mesma
   especificidade do base.css (este arquivo carrega depois dele). */
html body.bit-busca-page {
	background-color: var(--e-global-color-secondary);
}

.bit-busca {
	color: var(--e-global-color-text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	padding: 3.5rem 1rem 5rem;
}

.bit-busca__inner {
	margin: 0 auto;
	max-width: 960px;
}

.bit-busca__title {
	border-bottom: 2px solid var(--e-global-color-primary);
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	margin: 0 0 1.5rem;
	padding-bottom: 0.75rem;
	text-align: center;
	text-transform: uppercase;
}

.bit-busca__form {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.bit-busca__input {
	background-color: var(--ucpa-color-white);
	border: 1px solid color-mix(in srgb, var(--e-global-color-primary) 30%, transparent);
	border-radius: 8px;
	color: var(--e-global-color-text);
	flex: 1 1 auto;
	font-family: inherit;
	font-size: 1rem;
	min-width: 0;
	padding: 0.85rem 1rem;
}

.bit-busca__input:focus-visible {
	border-color: var(--e-global-color-accent);
	outline: 2px solid var(--e-global-color-accent);
	outline-offset: 1px;
}

.bit-busca__submit {
	background-color: var(--e-global-color-primary);
	border: 0;
	border-radius: 8px;
	color: var(--e-global-color-secondary);
	cursor: pointer;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	padding: 0 1.5rem;
	text-transform: uppercase;
}

.bit-busca__submit:hover,
.bit-busca__submit:focus-visible {
	background-color: var(--e-global-color-accent);
}

.bit-busca__summary {
	font-size: 1rem;
	margin: 0 0 2rem;
}

.bit-busca__section {
	margin-bottom: 2.5rem;
}

.bit-busca__section-title {
	border-bottom: 1px solid color-mix(in srgb, var(--e-global-color-primary) 20%, transparent);
	color: var(--e-global-color-accent);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	margin: 0;
	padding-bottom: 0.5rem;
	text-transform: uppercase;
}

.bit-busca__count {
	color: var(--e-global-color-text);
	margin-left: 0.35rem;
	opacity: 0.7;
}

.bit-busca__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bit-busca__item {
	border-bottom: 1px solid color-mix(in srgb, var(--e-global-color-primary) 15%, transparent);
}

.bit-busca .bit-busca__link {
	align-items: flex-start;
	color: var(--e-global-color-text);
	font-weight: 400;
	display: flex;
	gap: 1rem;
	padding: 1rem 0;
	text-decoration: none;
}

.bit-busca__thumb {
	flex: 0 0 56px;
}

.bit-busca__img {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	display: block;
	height: 56px;
	object-fit: cover;
	width: 56px;
}

.bit-busca__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.bit-busca .bit-busca__item-title {
	color: var(--e-global-color-primary);
	font-weight: 400;
	font-family: var(--e-global-typography-secondary-font-family), sans-serif;
	font-size: 1.2rem;
	line-height: 1.35;
}

.bit-busca .bit-busca__link:hover .bit-busca__item-title,
.bit-busca .bit-busca__link:focus-visible .bit-busca__item-title {
	color: var(--e-global-color-accent);
	text-decoration: underline;
}

.bit-busca .bit-busca__text {
	color: var(--e-global-color-text);
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.5;
}

.bit-busca__more {
	font-size: 0.9rem;
	margin: 0.75rem 0 0;
}

.bit-busca__more a {
	color: var(--e-global-color-accent);
}

.bit-busca__pagination {
	align-items: center;
	display: flex;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 0.9rem;
	justify-content: space-between;
	padding-top: 1rem;
}

.bit-busca__page-link {
	color: var(--e-global-color-primary);
	font-weight: 500;
	text-transform: uppercase;
}

.bit-busca__page-link:hover,
.bit-busca__page-link:focus-visible {
	color: var(--e-global-color-accent);
}

@media (max-width: 767px) {
	.bit-busca {
		padding-top: 2rem;
	}

	.bit-busca__submit {
		padding: 0 1rem;
	}

	.bit-busca__thumb {
		flex-basis: 44px;
	}

	.bit-busca__img {
		height: 44px;
		width: 44px;
	}

	.bit-busca .bit-busca__item-title {
		font-size: 1.05rem;
	}
}

/* ==========================================================================
   Abas por categoria — página /busca/ e dropdown do painel
   Linha de abas como a do Google: rótulo, contagem num badge, sublinhado de
   3px em accent na ativa. Rola na horizontal quando não cabe (sem barra), com
   esmaecimento só do lado em que há mais (classes has-more-* postas pelo JS).
   A página usa links (<a>, funciona sem JS); o dropdown usa <button>.
   Seletores com :is(.bit-busca, .jet-ajax-search) na frente: o kit do
   Elementor estiliza todo <a> e <button> (.elementor-kit-N button: fundo,
   borda, padding) e um seletor curto perde para ele.
   ========================================================================== */
.bit-tabs {
	position: relative;
}

.bit-tabs__track {
	border-bottom: 1px solid color-mix(in srgb, var(--e-global-color-primary) 18%, transparent);
	display: flex;
	gap: 2px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.bit-tabs__track::-webkit-scrollbar {
	display: none;
}

/* Máscara: só a opacidade conta, "black" aqui não é cor de tela. */
.bit-tabs.has-more-right .bit-tabs__track {
	mask-image: linear-gradient(90deg, black calc(100% - 48px), transparent);
}

.bit-tabs.has-more-left .bit-tabs__track {
	mask-image: linear-gradient(90deg, transparent, black 48px);
}

.bit-tabs.has-more-left.has-more-right .bit-tabs__track {
	mask-image: linear-gradient(90deg, transparent, black 48px, black calc(100% - 48px), transparent);
}

:is(.bit-busca, .jet-ajax-search) .bit-tabs .bit-tabs__tab {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: color-mix(in srgb, var(--e-global-color-text) 75%, transparent);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: var(--e-global-typography-accent-font-family), Roboto, sans-serif;
	font-size: 0.9rem;
	font-weight: 500;
	gap: 0.45rem;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0;
	padding: 0.75rem 0.85rem;
	position: relative;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
}

:is(.bit-busca, .jet-ajax-search) .bit-tabs .bit-tabs__tab:hover,
:is(.bit-busca, .jet-ajax-search) .bit-tabs .bit-tabs__tab:focus-visible {
	background: transparent;
	color: var(--e-global-color-primary);
}

:is(.bit-busca, .jet-ajax-search) .bit-tabs .bit-tabs__tab:focus-visible {
	outline: 2px solid var(--e-global-color-accent);
	outline-offset: -2px;
}

:is(.bit-busca, .jet-ajax-search) .bit-tabs .bit-tabs__tab:is([aria-current="page"], [aria-selected="true"]) {
	color: var(--e-global-color-accent);
}

:is(.bit-busca, .jet-ajax-search) .bit-tabs .bit-tabs__tab:is([aria-current="page"], [aria-selected="true"])::after {
	background: var(--e-global-color-accent);
	border-radius: 3px 3px 0 0;
	bottom: 0;
	content: "";
	height: 3px;
	left: 0.6rem;
	position: absolute;
	right: 0.6rem;
}

:is(.bit-busca, .jet-ajax-search) .bit-tabs .bit-tabs__tab[aria-disabled="true"] {
	cursor: default;
	opacity: 0.45;
	pointer-events: none;
}

.bit-tabs .bit-tabs__count {
	background: color-mix(in srgb, var(--e-global-color-primary) 12%, transparent);
	border-radius: 999px;
	color: var(--e-global-color-primary);
	font-size: 0.72rem;
	font-weight: 500;
	line-height: 1.4;
	padding: 0.05rem 0.45rem;
}

.bit-tabs .bit-tabs__tab:is([aria-current="page"], [aria-selected="true"]) .bit-tabs__count {
	background: color-mix(in srgb, var(--e-global-color-accent) 16%, transparent);
	color: var(--e-global-color-accent);
}

/* O base.css põe overflow-x:hidden em html E body no celular: com os dois,
   o body vira um contêiner de rolagem que nunca rola, e o sticky das abas
   para de funcionar. `clip` corta a lateral do mesmo jeito sem criar
   contêiner. Só nesta página. */
html body.bit-busca-page {
	overflow-x: clip;
}

/* Página: a linha fica presa no topo ao rolar, sobre o fundo cream. */
.bit-busca__tabs {
	background-color: var(--e-global-color-secondary);
	margin: 0 0 1.25rem;
	position: sticky;
	top: var(--bit-busca-tabs-top, 0px);
	z-index: 5;
}

.bit-busca__group + .bit-busca__group {
	margin-top: 0.5rem;
}

.bit-busca .bit-busca__see-all {
	color: var(--e-global-color-primary);
	display: inline-block;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	margin-top: 0.85rem;
	text-decoration: none;
	text-transform: uppercase;
}

.bit-busca .bit-busca__see-all:hover,
.bit-busca .bit-busca__see-all:focus-visible {
	color: var(--e-global-color-accent);
}

/* Dropdown: menor, entre a barra "N resultados" e a lista. A barra do
   contador tem o fundo teal do widget; as abas ficam numa faixa cream
   própria, colada à lista (sobre o teal, os rótulos perdiam contraste). */
.jet-ajax-search .bit-tabs--compact {
	background-color: var(--e-global-color-secondary);
	margin: 0;
	padding: 0 10px;
}

.jet-ajax-search .bit-tabs--compact .bit-tabs__tab {
	font-size: 0.8rem;
	padding: 0.55rem 0.6rem;
}

/* Filtro do dropdown: bloco fora da aba, e os posts da lista principal
   (filhos diretos do slide) fora de "Tudo" e "Estudos". */
.jet-ajax-search .jet-ajax-search__results-holder .bit-tab-hidden,
.jet-ajax-search__results-area[data-bit-tab]:not([data-bit-tab=""]):not([data-bit-tab="estudos"]) .jet-ajax-search__results-slide > .jet-ajax-search__results-item {
	display: none;
}

/* ==========================================================================
   Painel de busca do header — campo centralizado
   O widget reserva 35px à esquerda (lugar de um ícone que ele não mostra);
   com o texto centralizado o respiro fica simétrico, e o "×" de limpar
   continua à direita, dentro dos 44px.
   ========================================================================== */
.jet-hamburger-panel__content[data-template-id="4360"] .jet-ajax-search .jet-ajax-search__field {
	padding-left : 44px;
	padding-right: 44px;
	text-align   : center;
}