/*
 * Camada base do tema — o que não pertence a nenhum bloco.
 *
 * Três coisas moram aqui, e só elas:
 *
 * 1. Os apelidos curtos (--ink, --gutter, ...) para os tokens que o
 *    theme.json gera como --wp--preset--*. O CSS dos blocos é escrito com os
 *    nomes curtos porque é como o design foi pensado e documentado; o
 *    theme.json continua sendo a fonte de verdade, editável no Site Editor.
 *    Trocar uma cor lá muda o site inteiro, sem tocar em nenhum bloco.
 *
 * 2. O reset e a tipografia de documento, que valem para markup que nenhum
 *    bloco emite (o conteúdo do editor, por exemplo).
 *
 * 3. As primitivas compartilhadas — .reveal, .tag, .section-head, .chip,
 *    .byline, .wp-site-blocks — usadas por meia dúzia de blocos. Repetir
 *    cada uma dentro de cada bloco seria pior: a mesma regra em seis
 *    arquivos, divergindo na primeira vez que alguém ajustar uma delas.
 *
 * Tudo que é de um bloco só está no style.scss daquele bloco.
 */

:root {
	--ink: var(--wp--preset--color--ink);
	--ink-soft: var(--wp--preset--color--ink-soft);
	--ink-mute: var(--wp--preset--color--ink-mute);
	--paper: var(--wp--preset--color--paper);
	--paper-sunk: var(--wp--preset--color--paper-sunk);
	--line: var(--wp--preset--color--line);
	--red-900: var(--wp--preset--color--red-900);
	--red-700: var(--wp--preset--color--red-700);
	--red-500: var(--wp--preset--color--red-500);
	--teal-700: var(--wp--preset--color--teal-700);
	--teal-500: var(--wp--preset--color--teal-500);
	--teal-200: var(--wp--preset--color--teal-200);
	--teal-100: var(--wp--preset--color--teal-100);
	--gold-600: var(--wp--preset--color--gold-600);
	--gold-100: var(--wp--preset--color--gold-100);
	--accent: var(--wp--preset--color--accent);

	--serif: var(--wp--preset--font-family--cactus-classical-serif);
	--sans: var(--wp--preset--font-family--poppins);

	--gutter: var(--wp--custom--gutter);
	--nav-h: var(--wp--custom--nav-height);
	--dur: var(--wp--custom--duration);
	--ease: var(--wp--custom--ease);
}

/* ---------------------------------------------------------------------
 * Reset
 * ------------------------------------------------------------------ */

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	display: block;
	max-width: 100%;
}

/*
 * O `display:none` que o navegador dá a [hidden] vem da folha do
 * user-agent e tem especificidade mínima: qualquer `display:flex` de uma
 * classe do tema o vence, e o elemento continua visível com o atributo
 * ligado. Vários componentes escondem assim (banner de manutenção, gaveta,
 * busca, abas do painel), então a guarda é global.
 */
[hidden] {
	display: none !important;
}

h1,
h2,
h3 {
	margin: 0;
}

p {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

button {
	font-family: inherit;
	cursor: pointer;
}

figure {
	margin: 0;
}

main {
	display: block;
}

/*
 * Todo card e manchete do tema é clicável, mas o mockup nunca desenha um
 * "link azul" — desenha um título na cor do contexto. Sem isto, TODA
 * manchete do site sai com a cor de link.
 */
h1 a,
h2 a,
h3 a,
.brand,
.brand-mini,
.brand a,
.brand-mini a {
	color: inherit;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h1 a:focus-visible,
h2 a:focus-visible,
h3 a:focus-visible {
	color: var(--red-700);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--teal-500);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * Acessibilidade
 * ------------------------------------------------------------------ */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: 12px;
	top: -60px;
	background: var(--ink);
	color: #fff;
	padding: 10px 16px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	z-index: 100;
	transition: top 0.2s var(--ease);
}

.skip-link:focus {
	top: 12px;
}

/* ---------------------------------------------------------------------
 * Casca da página e as duas interfaces
 *
 * Abaixo de 900px o site é um app de coluna única com bottom nav fixo;
 * a partir dali vira revista de várias colunas com nav horizontal. São
 * duas interfaces do mockup, não uma escala contínua da mesma — por isso
 * um único breakpoint estrutural, e não uma série deles.
 * ------------------------------------------------------------------ */

/*
 * O "cartão" branco que envolve header + main + footer. No tema clássico era
 * uma <div class="page">; num tema de blocos o canvas já entrega
 * .wp-site-blocks nesse mesmo lugar, então é ele que recebe as regras — sem
 * isso o site perde a largura máxima, o fundo branco e, no mobile, a folga
 * que reserva os 68px da bottom-nav fixa (o rodapé ficava embaixo dela).
 */
.wp-site-blocks {
	margin: 0 auto;
	background: var(--paper);
	min-height: 100%;
	padding-bottom: calc(var(--nav-h) + 14px);
	position: relative;
}

.desktop-only {
	display: none;
}

.mobile-only {
	display: block;
}

section {
	padding: 32px var(--gutter);
}

/* ---------------------------------------------------------------------
 * Primitivas compartilhadas
 * ------------------------------------------------------------------ */

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 18px;
	gap: 12px;
}

.section-head h2 {
	font-size: 24px;
	color: var(--red-900);
}

.lm-section-eyebrow {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: 6px;
}

.lm-see-all {
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	flex: none;
}

.tags {
	display: flex;
	gap: 6px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.tag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 3px;
}

.tag-destaque {
	background: var(--red-700);
	color: #fff;
}

.tag-city {
	background: var(--teal-200);
	color: var(--teal-700);
}

.tag-type {
	background: var(--ink);
	color: #fff;
}

.byline {
	font-size: 13px;
	color: var(--ink-soft);
	margin: 10px 0 0;
}

.chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	font-size: 14px;
	font-weight: 500;
	padding: 9px 16px;
	border-radius: 20px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink-soft);
	cursor: pointer;
}

.chip-active {
	background: var(--teal-700);
	border-color: var(--teal-700);
	color: #fff;
}

.icon-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--ink-soft);
}

.icon-btn[aria-expanded="true"] {
	background: var(--paper-sunk);
	color: var(--ink);
	border-color: var(--ink);
}

.avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	border-radius: 50%;
	background: var(--red-700);
	color: #fff;
	font-weight: 700;
}

/*
 * Uma <img> que não carrega (foto apagada, upload que falhou) tem tamanho
 * intrínseco degenerado. Dentro de um item flex ou grid — cujo min-width
 * padrão é `auto`, isto é, "nunca menor que o conteúdo" — combinada com
 * `width: 100%`, ela vira uma referência circular: a largura da imagem
 * depende do cartão, e a largura mínima do cartão depende da imagem. O
 * navegador resolve o ciclo com um número grande e arbitrário, e o cartão
 * empurra a página inteira para fora da viewport (scroll horizontal real,
 * medido em document.documentElement.scrollWidth: 3040px numa janela de
 * 1905px).
 *
 * Com as fotos no lugar isso nunca aparece — por isso passou batido no tema
 * clássico, que tem o mesmo CSS. Basta uma imagem apagada num "Leia também"
 * para aparecer. Zerar o min-width dos cartões que empilham foto quebra o
 * ciclo e não muda nada quando a foto carrega.
 */
.lm-related-card,
.lm-archive-card,
.hero-media,
.card-media,
.side-card,
.lm-reel-card,
.lm-city-card,
.lm-job-card,
.lm-doc-card {
	min-width: 0;
}

/* ---------------------------------------------------------------------
 * Reveal on scroll
 * ------------------------------------------------------------------ */

.js-scroll .reveal:not(.in-view),
.js-scroll .reveal-item:not(.in-view) {
	opacity: 0;
	transform: translateY(22px);
}

.reveal,
.reveal-item {
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
	will-change: opacity, transform;
}

.no-motion,
.in-view {
	transition: none;
}

.reveal.in-view,
.reveal-item.in-view {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	.reveal,
	.reveal-item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------
 * Banner (LM Banner Manager)
 * ------------------------------------------------------------------ */

.banner-slot {
	margin: 0 var(--gutter);
	border-radius: 10px;
	border: 1px dashed var(--line);
	background: var(--paper-sunk);
	padding: 16px;
	text-align: center;
	color: var(--ink-mute);
	font-size: 12px;
}

.banner-slot strong {
	display: block;
	color: var(--ink-soft);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 3px;
}

section.banner-section {
	padding: 22px 0;
}

.banner-section-inline {
	padding: 22px var(--gutter);
}

/*
 * O plugin injetava um botão flutuante próprio de notificações; o tema tem
 * o sino no app-bar e encaminha o clique para ele. Dois sinos na tela é o
 * que esta regra evita.
 */
#portal-push-bell {
	display: none !important;
}

/* ---------------------------------------------------------------------
 * Desktop (>= 900px)
 * ------------------------------------------------------------------ */

@media (min-width: 900px) {

	.wp-site-blocks {
		max-width: 1440px;
		width: 100%;
		padding-bottom: 0;
	}

	.mobile-only {
		display: none;
	}

	.desktop-only {
		display: block;
	}

	main {
		padding: 0 clamp(24px, 3vw, 40px);
	}

	section {
		padding: clamp(32px, 4vw, 48px) 0;
	}

	section.banner-section {
		padding: clamp(22px, 2.6vw, 28px) 0;
	}

	.banner-slot {
		margin: 0;
		padding: 18px;
	}

	.section-head {
		margin-bottom: 24px;
	}

	.section-head h2 {
		font-size: clamp(24px, 1.6vw + 15px, 27px);
	}

	.chip {
		padding: 9px 18px;
		font-size: 13.5px;
	}
}