/*
Theme Name: VRAA
Theme URI: https://www.instagram.com/vraaparaty/
Author: Wesley
Description: Tema do VRAA, Coletivo LGBTQIAPN+ de Paraty, feito a partir do Manual de Marca do coletivo. Cores, fontes, logos e elementos gráficos oficiais, com páginas prontas para editar no Editor de Blocos.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: vraa
*/

/* =========================================================
   Cores e fontes ficam no theme.json.
   Aqui só o que o editor visual não faz sozinho.
   ========================================================= */

/* ---------- Cabeçalho ---------- */
.vraa-topo { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--wp--preset--color--cinza); }
.vraa-topo .vraa-marca img { max-height: 56px; width: auto !important; }

/* ---------- Botões extras ---------- */
.wp-block-button.is-style-amarelo .wp-block-button__link { background: var(--wp--preset--color--amarelo); color: var(--wp--preset--color--preto); }
.wp-block-button.is-style-amarelo .wp-block-button__link:hover { background: #ffe07f; }
.wp-block-button.is-style-contorno-branco .wp-block-button__link { background: transparent; color: var(--wp--preset--color--branco); border: 2px solid var(--wp--preset--color--branco); }
.wp-block-button.is-style-contorno-branco .wp-block-button__link:hover { background: var(--wp--preset--color--branco); color: var(--wp--preset--color--roxo-profundo); }
.wp-block-button__link { transition: transform .15s; }
.wp-block-button__link:hover { transform: translateY(-2px); }

/* ---------- Grupo estilo "Cartão" ---------- */
.wp-block-group.is-style-cartao { background: var(--wp--preset--color--branco); color: var(--wp--preset--color--preto); border: 2px solid var(--wp--preset--color--cinza); border-radius: 22px; padding: 26px 22px; }
.wp-block-group.is-style-cartao h3 { color: var(--wp--preset--color--roxo); }

/* ---------- Espaçamento das seções ---------- */
.vraa-secao { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.vraa-sobretitulo { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .82rem; }
.vraa-icone img { width: 56px; height: 56px; }

/* ---------- Hero ---------- */
.vraa-hero { position: relative; overflow: hidden; }
.vraa-hero__logo img { background: #fff; padding: clamp(24px, 4vw, 48px); border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; }
.vraa-hero .vraa-hero__rabisco { position: absolute !important; right: 4%; top: 22px; width: 180px; opacity: .9; margin: 0 !important; }

/* ---------- Faixa do título das páginas ---------- */
.vraa-pagina-topo { padding-top: 64px; padding-bottom: 64px; margin-top: 0 !important; }

/* ---------- Acrônimo ---------- */
.vraa-acronimo { text-align: center; }
.vraa-acronimo__rotulo { display: inline-block; padding: 8px 22px; text-transform: uppercase; letter-spacing: .03em; }
.vraa-acronimo__letras { text-align: center; }
.vraa-acronimo__letras .vraa-letra { font-family: var(--wp--preset--font-family--destaque); font-weight: 800; font-size: clamp(4rem, 13vw, 10rem); line-height: .9; color: var(--wp--preset--color--roxo); margin: 0; }
.vraa-acronimo__letras p:not(.vraa-letra) { margin-top: 6px; font-weight: 600; color: #4a4250; }
.vraa-faixa-frase { padding-top: 26px; padding-bottom: 26px; margin-block: 0 !important; line-height: 1.2; }

/* ---------- Objetivos (lista com letras) ---------- */
.vraa-objetivos { columns: 2; column-gap: 48px; padding-left: 0; list-style: none; counter-reset: obj; }
.vraa-objetivos li { counter-increment: obj; break-inside: avoid; padding: 12px 0 12px 48px; position: relative; border-bottom: 1px solid #333; }
.vraa-objetivos li::before { content: counter(obj, lower-alpha); position: absolute; left: 0; top: 10px; width: 32px; height: 32px; border-radius: 50%; background: var(--wp--preset--color--amarelo); color: var(--wp--preset--color--preto); font-weight: 700; display: grid; place-items: center; }

/* ---------- Mosaico do rodapé ---------- */
.vraa-mosaico { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 0 !important; margin-block: 0 !important; }
.vraa-mosaico > .wp-block-group { aspect-ratio: 1; display: grid; place-items: center; margin: 0 !important; }
.vraa-mosaico figure { margin: 0; width: 46%; }
.vraa-mosaico img { width: 100%; height: auto; }
.vraa-rodape { margin-top: 0 !important; }
.vraa-rodape .vraa-rodape__logo img { width: 190px; }
.vraa-rodape a { color: inherit; }

/* ---------- Celular ---------- */
@media (max-width: 781px) {
	.vraa-hero__rabisco { display: none; }
	.vraa-objetivos { columns: 1; }
	.vraa-mosaico { grid-template-columns: repeat(3, 1fr); }
	.vraa-topo .vraa-marca img { max-height: 46px; }
}

/* ---------- Estrutura ---------- */
.wp-site-blocks > * { margin-block-start: 0; }
.vraa-main > * { margin-block-start: 0 !important; }
.vraa-topo { padding-top: 10px; padding-bottom: 10px; }
.vraa-mosaico > .wp-block-group { padding: 0 !important; }
.vraa-rodape { padding-top: 56px; padding-bottom: 28px; }
.vraa-rodape__copy { border-top: 1px solid #333; padding-top: 22px; margin-top: 40px !important; color: #a59cab; }
.vraa-acronimo__letras.wp-block-columns { flex-wrap: wrap !important; }
@media (max-width: 781px) {
	.vraa-acronimo__letras.wp-block-columns > .wp-block-column { flex-basis: 45% !important; }
}
.vraa-acronimo { padding-top: clamp(56px, 7vw, 88px); padding-bottom: 32px; }