/*
Theme Name: Listeo Child
Theme URI: https://sovamos.com/
Description: Child theme do Listeo para o Só Vamos. Existe para que customização de CSS
             e de functions.php sobreviva à atualização do tema pai — o Listeo está em
             2.0.21 e a atualização para a série 2.1 é uma tarefa em aberto (TODO 114).
Author: Kaktu
Template: listeo
Version: 1.0.0
Text Domain: listeo-child
*/

/* Escreva o CSS do Só Vamos daqui para baixo.
   O CSS do tema pai é carregado pelo functions.php, então aqui só entra o que muda. */

/* ------------------------------------------------------------------------- *
 * Card de anúncio: o slider de fotos quebrado pelo <picture> do TinyPNG
 * ------------------------------------------------------------------------- *
 * O card novo do Listeo (classes com sufixo `-nl`) monta o slider como um
 * flex container:
 *
 *     .slider-wrapper-nl { display: flex }
 *     .slider-image-nl   { width: 100%; flex-shrink: 0 }   ← espera <img> filha direta
 *
 * Só que o TinyPNG (`tiny-compress-images`) embrulha TODA imagem do site num
 * <picture> para servir WebP. Com isso o filho do flex passa a ser o <picture>,
 * que não tem largura nenhuma declarada — e as fotos, em vez de ocuparem uma
 * "tela" cada, encolhem e ficam lado a lado, deixando o resto do card branco.
 *
 * O defeito só aparece com DUAS OU MAIS fotos na galeria: com uma só, o
 * <picture> único estica e ninguém percebe. Foi por isso que ele passou
 * despercebido — os anúncios de foto única pareciam corretos.
 *
 * A correção é dar ao <picture> exatamente o que o tema dá à <img>. Não
 * desligamos o WebP do TinyPNG: ele continua útil para JPG e PNG.
 *
 * Vale para todo card, inclusive os que ainda serão publicados.
 */
.slider-wrapper-nl > picture {
	display: block;
	width: 100%;
	height: 100%;
	flex-shrink: 0;
}

.slider-wrapper-nl > picture > img.slider-image-nl {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================================
   PÁGINA DO ANÚNCIO — hierarquia visual
   ----------------------------------------------------------------------------
   Quatro problemas apontados pelo usuário em 2026-09-10, olhando a Cachoeira da
   Parida. Todos são de ordem e de peso visual, não de conteúdo faltando:

   1. a ficha de dados (Como chegar / O lugar / Planejamento) ficava com metade
      da caixa vazia, porque cada grupo tem 2 ou 3 itens e o tema reserva 3
      colunas fixas;
   2. o telefone aparecia DEPOIS de todo o texto, como um link cinza — o dado
      que mais decide a visita era o menos visível da página;
   3. o botão "Obter Direções" se perdia sobre o mapa;
   4. o bloco de fontes e créditos tinha o mesmo peso do conteúdo (esse foi
      resolvido no mu-plugin kaktu-creditos-rodape.php, que o move para o fim).
   ========================================================================== */

/* O contato sobe para o topo da visão geral. `order` só funciona em flex/grid,
   e o tema deixa #listing-overview como inline-block. Trocar para flex column
   mantém a ordem natural de tudo o mais — só o contato é puxado para cima. */
#listing-overview {
	display: flex;
	flex-direction: column;
}
#listing-overview > .listing-links-container { order: -1; }

/* O ESTILO DOS LINKS DE CONTATO É DO TEMA — não mexer.
   O Listeo já entrega isso bem resolvido (ver a demo em listeo.pro/listing/sports-car/):
   telefone, e-mail e site saem como pílula cinza discreta, e as redes saem com a COR DE
   CADA MARCA — WhatsApp verde, Instagram rosa, Facebook azul — agrupadas num segmento só.
   Reestilizei isso numa primeira tentativa e ficou pior: o telefone virou um botão verde
   escuro indistinguível do WhatsApp, e as redes perderam a cor que as identifica.
   Aqui fica só o espaçamento; a aparência é a do tema. */
.listing-links-container { margin: 0 0 30px; }
.listing-links-container ul.listing-links { margin-bottom: 10px; }

/* Ficha de dados: sem coluna vazia. O tema usa 3 colunas fixas; aqui os itens
   ocupam a largura do próprio conteúdo e quebram sozinhos. */
ul.listing-details {
	display: flex !important;
	flex-wrap: wrap;
	gap: 18px 40px;
	padding: 20px 24px !important;
	margin-bottom: 10px;
}
/* O tema fixa `flex: 0 0 33%`, o que cria a terceira coluna vazia quando o grupo
   tem 2 itens. Aqui o item ocupa o tamanho do conteúdo e quebra sozinho.
   ⚠️ O `padding-left` NÃO pode ser zerado: o ícone é `position:absolute; left:0`,
   e sem esse espaço ele cai por cima do rótulo. */
ul.listing-details > li {
	flex: 0 1 auto !important;
	width: auto !important;
	min-width: 190px;
	max-width: 300px;
	margin: 0 !important;
	padding: 0 0 0 44px !important;
	float: none !important;
}
h4.listing-details-header {
	margin: 22px 0 8px;
	font-size: 15px;
}
h4.listing-details-header:first-child { margin-top: 0; }

/* "Obter Direções" sobre o mapa: era um link claro num canto. Este sim é ajuste nosso —
   o tema não dá destaque nenhum a ele, e é o botão que leva a pessoa até o lugar. */
#getDirection {
	background: #3d7a1b !important;
	color: #fff !important;
	font-weight: 600 !important;
	padding: 12px 20px !important;
	border-radius: 6px !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25) !important;
	border: 0 !important;
}
#getDirection:hover { background: #2f6e14 !important; }

/* Fontes e créditos, já no rodapé do anúncio pelo mu-plugin: peso de nota de
   rodapé, não de conteúdo. Continua legível — crédito de CC BY-SA é exigência
   da licença, não enfeite. */
.kaktu-creditos {
	margin: 40px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid #e4e8e6;
	font-size: 12px;
	line-height: 1.6;
	color: #7b837f;
}
.kaktu-creditos a { color: #5f6b65; text-decoration: underline; }

@media (max-width: 767px) {
	ul.listing-details > li { min-width: 140px; }
}

/* ---- "O que tem por perto" (kaktu-por-perto.php) -------------------------
   Cartões pequenos e densos: o bloco é navegação, não vitrine. Cabem 4 por
   linha no desktop e 1 no celular, sem carrossel — carrossel esconde item e
   este bloco existe justamente para mostrar o que mais o site tem. */
.kaktu-perto { margin: 50px 0 0; }
.kaktu-perto h4.kaktu-perto-grupo {
	margin: 26px 0 12px;
	font-size: 15px;
	color: #6b7671;
	font-weight: 600;
}
.kaktu-perto-lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px;
}
.kaktu-perto-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border: 1px solid #e4e8e6;
	border-radius: 6px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}
.kaktu-perto-card:hover {
	border-color: #3d7a1b;
	box-shadow: 0 2px 12px -6px rgba(0, 0, 0, .3);
}
.kaktu-perto-card:focus-visible { outline: 3px solid #3d7a1b; outline-offset: 2px; }
.kaktu-perto-card img,
.kaktu-perto-semfoto {
	width: 64px;
	height: 64px;
	flex: 0 0 64px;
	border-radius: 5px;
	object-fit: cover;
	background: #eef1ef;
}
.kaktu-perto-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kaktu-perto-txt strong {
	font-size: 14px;
	line-height: 1.3;
	font-weight: 600;
}
.kaktu-perto-meta { font-size: 12px; color: #7b837f; }

/* ---- caixa "Reivindique este anúncio!" ----------------------------------
   É a porta de venda mais curta do site: quem chega nela é o dono do negócio
   procurando a própria página. O tema deixa o ícone na mesma cor do texto, e a
   caixa inteira passa batida. Cor de atenção no ícone é o que a faz existir.
   #b4451f dá 5,5:1 no branco — passa na WCAG com folga. */
/* ⚠️ Precisa de especificidade alta E `!important`: o CSS de cor gerado pelo
   customizer do Listeo sai INLINE no <head>, com `!important`, e um dos seletores
   daquela lista alcança este ícone. Uma regra simples aqui perde para ele. */
.listeo-single-listing-sidebar .claim-badge a i,
.listeo-single-listing-sidebar .claim-badge a .sl {
	color: #b4451f !important;
	font-size: 17px;
	vertical-align: -1px;
	margin-right: 4px;
}
.claim-badge a { font-weight: 600; }
.claim-badge a:hover i { color: #8f3617; }

/* ── Anel de foco ─────────────────────────────────────────────────────────
   O style.css do tema pai (linha 166) tem `a, button { outline: none !important }`:
   o foco do teclado ficava invisível no site inteiro — 54 de 55 elementos da home,
   medido com wordpress/teclado.sh em 2026-09-11 (WCAG 2.4.7).
   `:focus-visible` só aparece para quem navega por teclado; clique de mouse não
   mostra o anel. `!important` porque a regra do tema também usa, e a especificidade
   maior (a:focus-visible > a) decide a favor desta. Azul da marca: 9,5:1 sobre o
   branco — o âmbar de destaque dava 2:1 e reprovava no 1.4.11. Sobre fundo escuro
   quem troca a cor é o próprio bloco (ver kaktu-home-blocos.php). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid #2b4860 !important;
	outline-offset: 2px;
}

/* ── Widgets do tema 2.1 com o nosso conteúdo ─────────────────────────────
   O Simple Hero foi desenhado para UM campo de busca; o nosso formulário tem quatro
   (IA, localização, categoria e botão). Sem isto os rótulos saem cortados dentro da
   coluna: "Pesqu…", "Local…". Aqui eles quebram em duas linhas e o botão ocupa a
   largura toda. Abaixo de 1025px o tema já empilha sozinho. */
@media (min-width: 1025px) {
	.listeo-simple-hero__search-form .main-search-input {
		flex-wrap: wrap;
		height: auto;
		/* o tema limita a caixa em `max-height: 68px`; sem soltar isto a segunda linha
		   do formulário TRANSBORDA e o botão fica por cima do texto de baixo */
		max-height: none;
		padding: 8px;
	}
	.listeo-simple-hero__search-form .main-search-input-item {
		flex: 1 1 46%;
		min-width: 0;
	}
	.listeo-simple-hero__search-form .main-search-input-item.ai_search {
		flex-basis: 100%;
		border-right: 0;
		border-bottom: 1px solid #e3e8ee;
	}
	.listeo-simple-hero__search-form .main-search-input > button {
		flex: 1 1 100%;
		margin: 10px 0 0;
	}
	/* o bloco da busca tem altura fixa no tema; com o formulário em duas linhas ele
	   passava por cima da linha "Grátis e sem cadastro" logo abaixo */
	.listeo-simple-hero__search {
		height: auto;
		margin-bottom: 26px;
	}
}

/* O site ainda não tem depoimento de cliente para citar, e depoimento inventado é a
   primeira coisa que derruba a confiança de quem decide anunciar. Sem avaliações
   cadastradas, o cartão da grade bento fica só com a moldura — melhor não ocupar a
   célula. Quando houver avaliação de verdade, ele volta sozinho. */
/* `:empty` não serve: o widget deixa quebras de linha dentro do contêiner, e espaço em
   branco conta como conteúdo. O teste certo é "não tem nenhum cartão dentro". */
.listeo-bento__review-stack:not(:has(.listeo-bento__card)) {
	display: none;
}

/* Prova social sem rostos cadastrados: o widget cai no placeholder cinza do Elementor. */
.listeo-simple-hero__faces:has(img[src*="placeholder"]) {
	display: none;
}

/* Os pontinhos dos carrosséis do tema 2.1 medem 18×22 — abaixo do mínimo de 24×24 que a
   WCAG 2.5.8 (AA) exige para alvo de toque. O ponto continua do mesmo tamanho; o que
   cresce é a área que responde ao dedo.
   ⚠️ Precisa do contêiner no seletor: `.listeo-fan-hero__controls button { min-width: 0 }`
   é mais específico que a classe sozinha e zerava o mínimo. */
.listeo-fan-hero__dots .listeo-fan-hero__dot,
.listeo-fan-hero__controls .listeo-fan-hero__nav,
.listeo-simple-hero__dots .listeo-simple-hero__dot,
.listeo-simple-hero__controls .listeo-simple-hero__nav,
.listeo-bento__stat-navigation .listeo-bento__stat-nav,
.listeo-bento__review-navigation .listeo-bento__review-nav {
	min-width: 24px;
	min-height: 24px;
}

/* Complexo de atrativos: o conjunto que se visita com uma entrada só. Fica no topo do
   conteúdo, com peso de aviso e não de lista de links — é informação que muda o
   planejamento da visita, não sugestão de leitura. Ver kaktu-complexo.php. */
.kaktu-complexo {
	margin: 0 0 26px;
	padding: 16px 18px;
	background: #f5f8fb;
	border: 1px solid #dde7f0;
	border-left: 3px solid #2b4860;
	border-radius: 5px;
}
.kaktu-complexo-titulo {
	margin: 0 0 4px !important;
	font-size: 15px;
	color: #2b4860;
}
.kaktu-complexo-nota {
	margin: 0 0 12px !important;
	font-size: 13px;
	color: #6f7f8c;
	line-height: 1.5;
}
.kaktu-complexo-lista {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.kaktu-complexo-lista li {
	margin: 0 !important;
	padding: 0 !important;
	background: #fff;
	border: 1px solid #dde7f0;
	border-radius: 4px;
}
.kaktu-complexo-lista li::before { content: none !important; }
.kaktu-complexo-lista a {
	display: block;
	padding: 8px 13px;
	font-size: 14px;
	font-weight: 600;
	color: #2b4860;
	text-decoration: none;
}
.kaktu-complexo-lista a:hover { background: #eef4f9; }
.kaktu-complexo-lista span {
	display: block;
	padding: 0 13px 8px;
	font-size: 12px;
	color: #8a98a3;
	font-weight: 400;
	margin-top: -4px;
}

/* ── "Explore por cidade": nome da cidade inteiro no cartão ────────────────────
   O carrossel em curva (listeo-fan-hero, modo curve_3d) é o mesmo da demo
   home-10, onde os rótulos são "Miami" e "Chicago". O badge do tema trunca em
   UMA linha (white-space: nowrap), e topônimo brasileiro é bem mais longo:
   "São João Batista do Glória" saía como "São João B…". A quebra em duas ou três linhas resolve
   sem mexer no cartão nem no desenho da curva.

   ⚠️ Nada de -webkit-line-clamp aqui: dentro da curva 3D o navegador blockifica o
   badge (o display computa `flow-root` mesmo com `!important` inline), o clamp não
   vale e a terceira linha sai cortada ao meio. Quebra natural, sem corte. */
.listeo-fan-hero__slide .listeo-fan-hero__badge {
	display: block;
	white-space: normal;
	text-overflow: clip;
	font-size: 13px;
	line-height: 16px;
	padding: 5px 12px;
	max-width: calc(100% - 20px);
}