/*
Theme Name: FESPSP — Projetos
Theme URI: https://www.fespsp.org.br/
Template: fespsp-base
Author: FESPSP
Description: Child theme do fespsp-base para o microsite Projetos. Contém só o conteúdo/templates próprios do site (front-page, páginas e patterns de conteúdo); todo o design system — tokens (theme.json), CSS do sistema, blocos custom, patterns estruturais e parts de marca — vem do parent fespsp-base. Sem plugins.
Version: 0.1.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fespsp-projetos
Tags: full-site-editing, block-templates, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, featured-images
*/

/* =============================================================
   FESPSP — Projetos (child de fespsp-base)
   ----------------------------------------------------------------
   Este arquivo é intencionalmente vazio de regras: o design system
   (cores, tipografia, layout, componentes) mora no parent fespsp-base
   e é carregado automaticamente pelo WordPress em temas de bloco.
   Só adicione CSS aqui se for um override específico do microsite Projetos.
   ============================================================= */

/* =============================================================
   ROLAGEM SUAVE — os itens do menu apontam para âncoras da própria
   Home (#historia, etc.). Sem isto o clique "salta" direto pra seção;
   com scroll-behavior o navegador anima a rolagem até ela. O
   scroll-padding-top dá um respiro no topo pra a seção não encostar
   na borda superior da viewport ao chegar.
   ============================================================= */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 24px;
}

/* =============================================================
   HEADER — microsite Projetos (override da part `header` do DS).
   Logo "FESPSP Projetos" (mais largo que o do site principal) + menu
   Roboto 16/700 #1a1a1a, sem topbar. Valores extraídos do Nicepage
   (#header: altura 118px; logo 281×108; nav Roboto 16px/700 #1a1a1a).
   ============================================================= */
.fespsp-projetos-header.fespsp-header { padding: 5px 0; }

/* No mobile o wrapper interno (logo + hambúrguer) ocupa 100% da largura sem
   padding — logo colava na borda esquerda e o hambúrguer na direita. Aplica o
   mesmo gutter de 20px das seções (ver bloco GUTTER LATERAL) para que logo e
   botão fiquem alinhados ao recuo do conteúdo do hero logo abaixo. */
@media (max-width: 781px) {
	.fespsp-projetos-header > .wp-block-group {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Logo mais largo que o padrão 205px do DS. Cobre core/image (legado) e core/site-logo. */
.fespsp-projetos-header .fespsp-header__logo img,
.fespsp-projetos-header .wp-block-image img,
.fespsp-projetos-header .wp-block-site-logo img {
	max-width: 281px !important;
	max-height: 108px !important;
	width: auto !important;
	object-fit: contain;
}

/* Menu: Roboto 16/700 grafite (o DS usa Montserrat 14/400 do site principal). */
.fespsp-projetos-header .fespsp-main-nav a.wp-block-navigation-item__content,
.fespsp-projetos-header .fespsp-main-nav button.wp-block-navigation-item__content {
	font-family: 'Roboto', sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	color: #1a1a1a !important;
}
.fespsp-projetos-header .fespsp-main-nav a.wp-block-navigation-item__content:hover {
	color: #bc2f2c !important;
}

/* Divisores verticais entre itens (Nicepage: traço 2px grey-30 #b3b3b3 de
   16px de altura à direita de cada item, inclusive um final após "Transparência").
   Pseudo-elemento em vez de border-right — a borda pegaria a altura toda do item. */
.fespsp-projetos-header .fespsp-main-nav .wp-block-navigation-item {
	display: flex;
	align-items: center;
}
.fespsp-projetos-header .fespsp-main-nav .wp-block-navigation-item::after {
	content: "";
	width: 2px;
	height: 16px;
	background: #b3b3b3;
	flex: 0 0 auto;
}

/* Menu mobile — drawer do hambúrguer (< 760px, colapso no DS/base). Os itens
   empilham na vertical: esconde os divisores verticais (feitos p/ o menu
   horizontal) e centraliza os itens, como o sidenav do Nicepage original.
   Escopo em .is-menu-open → não afeta o menu inline no desktop. */
.fespsp-projetos-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::after {
	display: none;
}
.fespsp-projetos-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.fespsp-projetos-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	align-items: center;
	justify-content: center;
}

/* Botão de fechar (X) do overlay: o core o posiciona colado na borda direita.
   Recua 20px para alinhar ao mesmo gutter do hambúrguer/logo (ver bloco HEADER). */
.fespsp-projetos-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	right: 20px;
}

/* =============================================================
   GUTTER LATERAL NO MOBILE (global do microsite).
   As seções são grupos full-width + constrained (align:full, contentSize
   1140). O DS tem `useRootPaddingAwareAlignments` mas o root padding do
   parent é 0, e o root padding não alcança o conteúdo DENTRO de seções
   full-bleed — então no mobile título/texto/formulário encostavam nas
   bordas (Quem somos, Áreas, Entre em contato, Stats, Notícias…).
   Aqui dou 20px de gutter direto nas seções constrained full-width, só no
   mobile: o fundo continua sangrando de ponta a ponta (a seção segue
   `alignfull`) e só o conteúdo interno recua. 781px = breakpoint em que o
   core empilha as colunas. O hero (.fespsp-hero) é `wp-block-columns`, não
   `wp-block-group`, então mantém o sangramento próprio.
   ============================================================= */
@media (max-width: 781px) {
	.wp-block-group.alignfull.is-layout-constrained {
		padding-left: 20px;
		padding-right: 20px;
	}
	/* QUEM SOMOS / Tradição e Inovação (Seção 3): ao empilhar no mobile o
	   blockGap 0 do DS cola o título no texto. Espelha o respiro título→texto
	   de #areas (16px) para as duas seções ficarem consistentes. */
	#quemsomos .wp-block-columns > .wp-block-column:first-child .wp-block-heading {
		margin-bottom: 16px;
	}
}

/* =============================================================
   ÁREAS DE ATUAÇÃO (SEÇÃO 4) — Bloco H/H6.
   Composição do microsite: intro (38%) + grid (62%) lado a lado.
   O Nicepage empilha (intro por cima, grid full-width) a partir do
   md (≤980) — antes do core empilhar sozinho (≤781). Forçamos aqui;
   o grid em si vira 3→2→1 no DS (fespsp-values--boxed).
   ============================================================= */
@media (max-width: 980px) {
	/* !important vence o `flex-wrap:nowrap !important` que o core aplica em
	   min-width:782px — sem isso as colunas encolhem lado a lado em vez de empilhar. */
	#areas .wp-block-columns {
		flex-wrap: wrap !important;
		/* respiro texto → grid de cards (o blockGap global do DS é 0, então
		   ao empilhar a intro colava no grid). */
		row-gap: 32px;
	}
	#areas .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
	/* respiro título → texto dentro da intro (blockGap 0 os deixava colados). */
	#areas .wp-block-columns > .wp-block-column:first-child .wp-block-heading {
		margin-bottom: 16px;
	}
}

/* =============================================================
   FOOTER — microsite Projetos (réplica do rodapé de fespsp.org.br).
   Difere do footer institucional do DS: sem logo/colunas de links; é
   contato + SIGA-NOS (ícones brancos) + e-MEC + mapa. Reaproveita as
   classes .fespsp-footer / .fespsp-btn-pill / .fespsp-whats-icon /
   .fespsp-emec do parent; aqui só o que é próprio deste layout.
   ============================================================= */

/* O footer institucional do DS tem min-height:740px (comporta as colunas de
   links). Este é mais curto — solta a altura mínima e controla o próprio espaço. */
.fespsp-projetos-footer.fespsp-footer {
	min-height: 0;
	padding: 0 0 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Região superior (contato | SIGA-NOS | e-MEC). O parent força width:1140 +
   padding 43/58 em toda .wp-block-columns direta; aqui só ajusto o respiro. */
.fespsp-projetos-footer > .wp-block-columns.fespsp-projetos-footer__top {
	padding: 48px 0 36px !important;
	align-items: flex-start;
}

/* Endereço — cinza claro, maior que os 12px do footer institucional. */
.fespsp-projetos-footer .fespsp-projetos-footer__addr {
	font-family: Roboto, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
	color: #a7abae !important;
	max-width: none !important;
	margin: 22px 0 0 !important;
}

/* SIGA-NOS — rótulo cinza, caixa alta, espaçado (Open Sans). */
.fespsp-projetos-footer .fespsp-projetos-footer__siga {
	font-family: "Open Sans", sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #c7c9cb !important;
	margin: 4px 0 18px !important;
	display: block !important;
	width: auto !important;
}

/* Ícones sociais — glifos brancos monocromáticos (Facebook, Instagram,
   LinkedIn, TikTok, YouTube, X). fill=currentColor → cor controla tudo. */
.fespsp-projetos-footer__social {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
}

.fespsp-projetos-footer__social a {
	display: inline-flex;
	width: 26px;
	height: 26px;
	color: #fff;
	transition: color 0.15s ease, transform 0.15s ease;
}

.fespsp-projetos-footer__social a:hover {
	color: #bc2f2c;
	transform: translateY(-1px);
}

.fespsp-projetos-footer__social svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Divisor antes do mapa — hairline na largura do container. */
.fespsp-projetos-footer .fespsp-projetos-footer__rule {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin: 8px 0 24px;
	width: 100% !important;
	max-width: 100% !important;
	opacity: 1;
}

/* Mapa Google embutido — largura total do container, cor original. */
.fespsp-projetos-footer__map {
	line-height: 0;
}

.fespsp-projetos-footer__map iframe {
	display: block;
	width: 100%;
	height: 150px;
	border: 0;
}

/* =============================================================
   SEÇÃO 10 — "A história contada por quem vive" (#historia): vídeo + texto.
   É um wp:columns sem align/gutter e o root padding do DS é 0, então no
   mobile vídeo/título/texto/botão encostavam nas bordas; o blockGap vertical
   é 0, então ao empilhar o vídeo colava no título. Aqui, só no mobile (o
   breakpoint em que o core empilha as colunas, ≤781px):
     · gutter lateral de 20px (mesma medida do footer deste microsite);
     · respiro vertical entre vídeo e texto ao empilhar;
     · CTA vira botão full-width com rótulo centralizado (alvo de toque maior
       e peso visual coerente com a seção).
   ============================================================= */
/* Ritmo vertical da coluna de texto: o blockGap do DS é 0, então título,
   parágrafo e botão encostavam. Replica os 18px do Nicepage (.u-text-2 e
   .u-btn-1: margin-top 18px) entre cada elemento empilhado. */
#historia .wp-block-column > * + * {
	margin-top: 18px;
}

@media (max-width: 781px) {
	#historia.wp-block-columns {
		padding-left: 20px;
		padding-right: 20px;
		row-gap: 24px;
	}
	#historia .wp-block-button {
		width: 100%;
	}
	#historia .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* =============================================================
   PÁGINA DE DETALHE DA PUBLICAÇÃO — template single-publicacao
   -------------------------------------------------------------
   Layout de ficha bibliográfica: à esquerda o objeto (capa A4 — componente
   .fespsp-cover-a4 do parent, o mesmo do carrossel —, botão de download e dados);
   à direita o texto. Só o que é próprio desta página mora aqui; tipografia, cores
   e a receita da capa vêm do design system.
   ============================================================= */
.fespsp-publicacao__meta {
	font-size: 0.9rem;
	color: #7a7d81;
	margin: 0 0 18px;
}

/* Vitrine da capa: faixa de largura total (fundo cinza-claro), capa centralizada e o
   botão de download logo abaixo, alinhado à borda esquerda da capa. */
.fespsp-publicacao__vitrine {
	background: #f2f2f2;
	padding: 46px 20px;
	margin-top: 30px;
	margin-bottom: 40px;
}

.fespsp-publicacao__vitrine-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;

	/* A largura da coluna é a da capa — assim o botão nasce alinhado com ela. */
	width: min(320px, 100%);
	margin: 0 auto;
}

.fespsp-publicacao__capa {
	width: 100%;
	box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.fespsp-publicacao__download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	/* border-box: no mobile o botão vai a width:100% e o padding lateral somaria
	   48px à largura da coluna, estourando a faixa. */
	box-sizing: border-box;
	padding: 13px 24px;
	background: #bc2f2c;
	color: #fff;
	font-family: Montserrat, sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.fespsp-publicacao__download:hover,
.fespsp-publicacao__download:focus-visible {
	background: #a92a28;
	color: #fff;
}

.fespsp-publicacao__download svg {
	width: 15px;
	height: 15px;
}

/* Resumo como abertura do texto: maior que o corpo, mesma família. */
.fespsp-publicacao__resumo {
	font-size: 1.1rem;
	line-height: 1.6;
	color: #53565a;
	margin-bottom: 26px;
}

/* Ritmo do corpo. O theme.json zera o blockGap global (a Home compõe tudo com
   espaçamento explícito), então o texto corrido desta página precisa do seu: sem
   isso parágrafos e títulos saem colados. */
.fespsp-publicacao .wp-block-post-content > * + * {
	margin-top: 18px;
}

.fespsp-publicacao .wp-block-post-content p {
	line-height: 1.7;
	color: #53565a;
}

.fespsp-publicacao .wp-block-post-content :is(h2, h3, h4) {
	font-family: Montserrat, sans-serif;
	font-weight: 800;
	line-height: 1.25;
	color: #1c1c1c;
	margin-top: 34px;
	margin-bottom: 10px;
}

.fespsp-publicacao .wp-block-post-content h2 {
	font-size: 1.375rem;
}

.fespsp-publicacao .wp-block-post-content h3 {
	font-size: 1.125rem;
}

.fespsp-publicacao .wp-block-post-content :is(ul, ol) {
	padding-left: 22px;
	line-height: 1.7;
	color: #53565a;
}

/* Mobile: gutter lateral (o main é constrained, sem padding horizontal próprio) e
   título proporcional à tela — 2.25rem quebra em três linhas num 390px. A vitrine
   compensa a gutter com margem negativa para seguir sangrando de ponta a ponta. */
@media (max-width: 760px) {
	.fespsp-publicacao {
		padding-left: 20px;
		padding-right: 20px;
	}
	.fespsp-publicacao .wp-block-post-title {
		font-size: 1.75rem;
	}
	.fespsp-publicacao__vitrine {
		margin-left: -20px;
		margin-right: -20px;
		padding: 34px 20px;
	}
	.fespsp-publicacao__download {
		width: 100%;
	}
}

/* Mobile (≤760): empilha e centraliza. As colunas do core já empilham; o
   parent já centraliza .wp-block-buttons — aqui dou a gutter lateral (o footer
   institucional do DS não tem padding horizontal) e centralizo endereço/ícones. */
@media (max-width: 760px) {
	.fespsp-projetos-footer.fespsp-footer {
		padding-left: 20px;
		padding-right: 20px;
	}
	.fespsp-projetos-footer .fespsp-projetos-footer__addr {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.fespsp-projetos-footer__social {
		justify-content: center;
	}
}