/*
Theme Name: Recicla Bebedouro
Theme URI: https://reciclabebedouro.com.br
Author: YouGreen Cooperativa
Author URI: https://yougreen.coop
Description: Tema de bloco do Recicla Bebedouro. Página única, sem cabeçalho de navegação: os dois logos no topo e o mapa da coleta seletiva ocupando a primeira tela. Feito para o plugin Recicla Bebedouro – Coleta Seletiva.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: reciclabebedouro
Tags: full-site-editing, block-patterns, one-column, custom-colors, accessibility-ready
*/

/**
 * Só o que não cabe no theme.json mora aqui: a ponte de tokens com o plugin,
 * a conta da altura da primeira tela, o topo e o rodapé.
 *
 * Prefixo das classes do tema: rbt-. O plugin usa rbc-.
 */

/* ---------------------------------------------------------------------------
 * Tokens
 *
 * Duas responsabilidades:
 *
 * 1. Ponte com o plugin reciclabebedouro-coleta. Ele lê os slugs de cor do
 *    padrão dos temas do WordPress (base, contrast, accent-3..6), que não são
 *    os slugs de marca deste tema. Como os tokens --rbc-* são declarados no
 *    próprio .rbc-bloco, o tema não consegue sobrescrevê-los de um ancestral —
 *    o que dá para fazer é entregar os presets que aquelas var() procuram.
 *    É o único lugar a mexer se a paleta mudar.
 *
 * 2. As duas variáveis que o estilo de bloco "Tela cheia" espera do TEMA:
 *    --rbc-altura e --rbc-raio-mapa. Ficam aqui, num ancestral do bloco,
 *    nunca no próprio bloco.
 * ------------------------------------------------------------------------ */

body {
	/* 1. Ponte de cores para o plugin. */
	--wp--preset--color--base: var( --wp--preset--color--fundo );
	--wp--preset--color--contrast: var( --wp--preset--color--texto );
	--wp--preset--color--accent-3: var( --wp--preset--color--verde-escuro ); /* acento e foco */
	--wp--preset--color--accent-4: var( --wp--preset--color--texto-suave );
	--wp--preset--color--accent-5: var( --wp--preset--color--fundo-suave );
	--wp--preset--color--accent-6: var( --wp--preset--color--borda );

	/*
	 * 2. Altura da primeira tela, sem número mágico: a altura do topo é a
	 * altura do logo mais o respiro de cima e de baixo, e o logo é dimensionado
	 * pela altura (a largura vem da proporção do arquivo). Mudou o logo, muda
	 * só --rbt-logo-altura.
	 */
	--rbt-logo-altura: 63px;                              /* ≈150px de largura */
	--rbt-assinatura-altura: 24px;
	--rbt-topo-respiro: var( --wp--preset--spacing--30 );
	--rbt-topo-altura: calc( var( --rbt-logo-altura ) + 2 * var( --rbt-topo-respiro ) );

	/* O espaço entre o topo e o bloco é o blockGap do fluxo. */
	--rbt-intervalo: var( --wp--preset--spacing--40 );
	--rbt-respiro-inferior: var( --wp--preset--spacing--40 );

	--rbc-altura: calc(
		100svh - var( --rbt-topo-altura ) - var( --rbt-intervalo ) - var( --rbt-respiro-inferior )
	);
	--rbc-raio-mapa: var( --wp--custom--raio );
}

@media ( min-width: 1024px ) {
	body {
		--rbt-logo-altura: 92px;                          /* ≈220px de largura */
		--rbt-assinatura-altura: 34px;
		--rbt-topo-respiro: var( --wp--preset--spacing--40 );
	}
}

/* ---------------------------------------------------------------------------
 * Acessibilidade
 *
 * .screen-reader-text não vem do WordPress no front de um tema de bloco; o
 * <h1> do topo e os rótulos do bloco core/social-links dependem dela.
 * ------------------------------------------------------------------------ */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 3px solid var( --wp--preset--color--verde-escuro );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
 * Topo (pattern reciclabebedouro/topo)
 *
 * Sem barra e sem menu: os dois logos direto sobre o fundo da página. O da
 * esquerda é a marca; o da direita é assinatura e por isso é bem menor.
 * ------------------------------------------------------------------------ */

.rbt-topo {
	display: flex;
	gap: var( --wp--preset--spacing--30 );
	align-items: center;
	justify-content: space-between;
	padding-block: var( --rbt-topo-respiro );
	padding-inline: var( --wp--preset--spacing--margem );
}

.rbt-topo__marca,
.rbt-topo__assinatura {
	display: inline-flex;
	text-decoration: none;
}

/*
 * Dimensionar pela altura é o que mantém --rbt-topo-altura verdadeiro: a
 * largura sai da proporção do arquivo.
 */
.rbt-topo__logo {
	width: auto;
	height: var( --rbt-logo-altura );
}

.rbt-topo__assinatura-img {
	width: auto;
	height: var( --rbt-assinatura-altura );
}

/* ---------------------------------------------------------------------------
 * Conteúdo dos demais templates
 *
 * A margem lateral e a largura de conteúdo já vêm do layout "constrained"
 * (has-global-padding); aqui só o respiro vertical.
 * ------------------------------------------------------------------------ */

.rbt-conteudo {
	padding-top: var( --wp--preset--spacing--50 );
	padding-bottom: var( --wp--preset--spacing--60 );
}

/* ---------------------------------------------------------------------------
 * Rodapé (pattern reciclabebedouro/rodape)
 * ------------------------------------------------------------------------ */

.rbt-rodape {
	border-top: 1px solid var( --wp--preset--color--borda );
	padding-block: var( --wp--preset--spacing--50 );
}

.rbt-rodape__conteudo {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--50 );
}

.rbt-grupo__titulo {
	margin: 0 0 var( --wp--preset--spacing--30 );
	color: var( --wp--preset--color--texto-suave );
	font-size: var( --wp--preset--font-size--pequeno );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.rbt-grupo__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--40 );
	align-items: center;
	padding: 0;
	margin: 0;
	list-style: none;
}

.rbt-grupo__logo {
	width: auto;
	height: 36px;
	object-fit: contain;
}

@media ( min-width: 782px ) {
	.rbt-grupo__logo {
		height: 48px;
	}
}

.rbt-rodape__base {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--30 );
}

/*
 * A linha só separa os créditos de alguma coisa. Sem apoiadores nem parceiros
 * a base é o primeiro filho e ficaria colada na borda do próprio rodapé.
 */
.rbt-rodape__base:not( :first-child ) {
	padding-top: var( --wp--preset--spacing--40 );
	border-top: 1px solid var( --wp--preset--color--borda );
}

@media ( min-width: 782px ) {
	.rbt-rodape__base {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.rbt-rodape__creditos {
	margin: 0;
	font-size: var( --wp--preset--font-size--pequeno );
}

.rbt-rodape__iniciativa {
	margin: 0.25rem 0 0;
	color: var( --wp--preset--color--texto-suave );
	font-size: var( --wp--preset--font-size--pequeno );
}

/* O bloco de redes não precisa da margem que o fluxo dá aos irmãos. */
.rbt-rodape__redes {
	margin: 0;
}

/*
 * No estilo "Apenas logos" o core pinta cada ícone com a cor da marca da rede
 * (#f00075 no Instagram, #0866ff no Facebook). Aqui os ícones seguem a cor do
 * texto. A regra do core mora num :where() de especificidade 0,2,0; esta tem
 * 0,3,0 e vence sem depender da ordem de carregamento.
 */
.rbt-rodape__redes.is-style-logos-only .wp-social-link {
	color: var( --wp--preset--color--texto );
}