/*
Theme Name: Fundação Christiano Rosa
Theme URI: https://www.fundacaochristianorosa.org.br
Author: Estúdio Astrolábio
Description: Tema de blocos da Fundação Christiano Rosa (Piquete/SP). Desenvolvido do zero, sem código de terceiros. Fontes Fraunces e Source Sans 3 (licença OFL), hospedadas no próprio tema.
Version: 0.4.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fcr
*/

/* O visual vem do theme.json; aqui ficam só os detalhes que o editor de blocos não cobre. */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	* {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------- Cabeçalho ---------- */

/* Claro por padrão (fundo branco, texto grafite, logo escuro). */
.fcr-cabecalho {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--branco);
	color: var(--wp--preset--color--tinta);
	border-bottom: 1px solid var(--wp--preset--color--cinza-claro);
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.fcr-cabecalho .fcr-logo {
	display: block;
	line-height: 0;
}

.fcr-cabecalho .fcr-logo--claro {
	display: none;
}

/* Na página inicial o cabeçalho flutua sobre a foto (texto e logo brancos) e fica claro ao rolar. */
body.home .fcr-cabecalho {
	position: fixed;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0));
	border-bottom-color: transparent;
	color: var(--wp--preset--color--branco);
}

body.home .fcr-cabecalho .fcr-logo--claro {
	display: block;
}

body.home .fcr-cabecalho .fcr-logo--escuro {
	display: none;
}

body.home .fcr-cabecalho.is-rolado {
	background: var(--wp--preset--color--branco);
	border-bottom-color: var(--wp--preset--color--cinza-claro);
	color: var(--wp--preset--color--tinta);
}

body.home .fcr-cabecalho.is-rolado .fcr-logo--claro {
	display: none;
}

body.home .fcr-cabecalho.is-rolado .fcr-logo--escuro {
	display: block;
}

body.admin-bar.home .fcr-cabecalho {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar.home .fcr-cabecalho {
		top: 46px;
	}
}

.fcr-cabecalho .wp-block-navigation {
	font-size: 1rem;
	font-weight: 500;
}

.fcr-cabecalho .wp-block-navigation a {
	color: inherit;
	text-decoration: none;
	padding-block: 0.4rem;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat;
	transition: background-size 0.25s ease;
}

.fcr-cabecalho .wp-block-navigation a:hover,
.fcr-cabecalho .wp-block-navigation a:focus-visible,
.fcr-cabecalho .wp-block-navigation .current-menu-item > a {
	background-size: 100% 2px;
}

/* Dentro dos submenus não há sublinhado (ele ocuparia a largura toda e pareceria um traço solto):
   o item da página atual fica em negrito e o item sob o mouse ou o teclado ganha um fundo claro. */
.fcr-cabecalho .wp-block-navigation__submenu-container a {
	background-image: none;
	padding-block: 0.55rem;
}

.fcr-cabecalho .wp-block-navigation__submenu-container a:hover,
.fcr-cabecalho .wp-block-navigation__submenu-container a:focus-visible {
	background-color: var(--wp--preset--color--claro);
}

.fcr-cabecalho .wp-block-navigation__submenu-container .current-menu-item > a {
	font-weight: 700;
}

.fcr-cabecalho .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--branco) !important;
	color: var(--wp--preset--color--tinta) !important;
	border: 1px solid var(--wp--preset--color--cinza-claro) !important;
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
	padding: 0.5rem 0;
}

/* ---------- Destaques de texto ---------- */

/* Pequena legenda em maiúsculas acima dos títulos de seção. */
.fcr-sobretitulo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.6rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cinza);
}

.fcr-sobretitulo::before {
	content: "";
	width: 2.25rem;
	height: 3px;
	background: currentColor;
}

.has-tinta-background-color .fcr-sobretitulo,
.fcr-hero .fcr-sobretitulo,
.fcr-bloco-foto .fcr-sobretitulo,
.fcr-visite .fcr-sobretitulo {
	color: var(--wp--preset--color--branco);
}

.fcr-hero {
	/* Em monitores muito altos o destaque não deve esticar sem fim. */
	min-height: min(94vh, 900px) !important;
}

.fcr-visite {
	/* Altura pela proporção da foto (2000×908): em telas largas mostra a casa inteira, com o muro; em telas estreitas corta as laterais. */
	min-height: min(max(460px, 45.4vw), 88vh) !important;
}

.fcr-visite .wp-block-cover__image-background {
	object-position: 50% 80%;
}

.fcr-hero h1 {
	text-wrap: balance;
	text-shadow: 0 2px 24px rgb(0 0 0 / 0.4);
}

.fcr-hero .wp-block-button__link {
	background: var(--wp--preset--color--branco);
	color: var(--wp--preset--color--tinta);
}

.fcr-hero .wp-block-button__link:hover {
	background: var(--wp--preset--color--cinza-claro);
}

.fcr-hero .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--branco);
	border: 2px solid var(--wp--preset--color--branco);
}

.fcr-hero .is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--branco);
	color: var(--wp--preset--color--tinta);
}

/* ---------- Cartões de conteúdo ---------- */

.fcr-cartao {
	height: 100%;
}

.fcr-cartao .wp-block-post-featured-image {
	overflow: hidden;
	background: var(--wp--preset--color--cinza-claro);
	margin-bottom: 1rem;
}

.fcr-cartao .wp-block-post-featured-image img {
	width: 100%;
	display: block;
	transition: transform 0.5s ease;
}

.fcr-cartao:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.fcr-cartao .wp-block-post-title {
	margin-top: 0;
	margin-bottom: 0.4rem;
}

.fcr-cartao .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--tinta);
}

.fcr-cartao .wp-block-post-title a:hover {
	color: var(--wp--preset--color--cinza);
}

.fcr-cartao .wp-block-post-date,
.fcr-meta {
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cinza);
	font-weight: 700;
	margin: 0;
}

/* ---------- Agenda: data em destaque ---------- */

.fcr-evento {
	display: flex;
	gap: 1.25rem;
	align-items: stretch;
	border-top: 1px solid var(--wp--preset--color--cinza-claro);
	padding-top: 1.25rem;
}

.fcr-evento__data {
	flex: none;
	width: 4.5rem;
	text-align: center;
	background: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--branco);
	padding: 0.6rem 0.25rem;
	line-height: 1;
}

.fcr-evento__data p {
	margin: 0;
}

.fcr-evento__dia {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 2.1rem;
	font-weight: 700;
}

.fcr-evento__mes {
	margin-top: 0.3rem !important;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
}

.fcr-evento .wp-block-post-title {
	margin: 0 0 0.25rem;
}

.fcr-evento .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--tinta);
}

.fcr-evento .wp-block-post-title a:hover {
	color: var(--wp--preset--color--cinza);
}

/* ---------- Blocos de foto (Acervo, destaques) ---------- */

.fcr-bloco-foto {
	overflow: hidden;
}

.fcr-bloco-foto .wp-block-cover__image-background {
	transition: transform 0.6s ease;
}

.fcr-bloco-foto:hover .wp-block-cover__image-background {
	transform: scale(1.05);
}

.fcr-bloco-foto a {
	color: inherit;
	text-decoration: none;
}

.fcr-bloco-foto a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ---------- O Estafeta: capas ---------- */

.fcr-capa .wp-block-post-featured-image {
	box-shadow: 0 8px 22px rgb(0 0 0 / 0.18);
	transition: transform 0.3s ease;
}

.fcr-capa:hover .wp-block-post-featured-image {
	transform: translateY(-4px);
}

.fcr-capa .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	/* Se sobrar altura, corta embaixo: o cabeçalho "O ESTAFETA" no topo nunca é cortado. */
	object-position: top center;
}

.fcr-capa .wp-block-post-title a,
.fcr-capa p {
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

/* ---------- Rodapé ---------- */

.fcr-rodape a {
	color: var(--wp--preset--color--tinta);
}

.fcr-rodape a:hover,
.fcr-rodape a:focus-visible {
	color: var(--wp--preset--color--cinza);
}

.screen-reader-text:focus {
	background: #fff;
	color: #000;
	padding: 0.75rem 1rem;
	z-index: 100000;
}

/* Link "Pular para o conteúdo" para teclado e leitores de tela. */
.fcr-pular {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100001;
	background: var(--wp--preset--color--branco);
	color: var(--wp--preset--color--tinta);
	padding: 0.75rem 1rem;
}

.fcr-pular:focus {
	left: 0.5rem;
	top: 0.5rem;
}

/* Telas pequenas: as capas do Estafeta e as grades de 4 itens ficam em 2 colunas (e não 1 por linha). */
@media (max-width: 781px) {
	.wp-block-post-template.is-layout-grid.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1.25rem !important;
	}
}

/* Filtro do Estafeta por ano */
.fcr-anos ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 1.5rem 0 2rem;
	padding: 0;
}

.fcr-anos a {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	border: 2px solid var(--wp--preset--color--tinta);
	border-radius: 999px;
	color: var(--wp--preset--color--tinta);
	font-weight: 600;
	text-decoration: none;
}

.fcr-anos a:hover,
.fcr-anos a[aria-current="page"] {
	background: var(--wp--preset--color--tinta);
	color: #fff;
}

.fcr-anos a:focus-visible {
	outline: 3px solid #1A5FB4;
	outline-offset: 2px;
}

/* ---------- Agenda e Atividades realizadas ---------- */

/* Campos vinculados sem valor (data, horário, local) não ocupam espaço nos cartões. */
.fcr-cartao p:empty {
	display: none;
}

/* Evento sem foto: a data em destaque no lugar da imagem. */
.fcr-sem-foto {
	display: block;
	margin: 0 0 1rem;
	background: var(--wp--preset--color--cinza-claro);
	color: var(--wp--preset--color--tinta);
}

.fcr-sem-foto a,
.fcr-sem-foto > span {
	text-decoration: none;
	color: inherit;
}

.fcr-sem-foto a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.fcr-sem-foto__dia {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: clamp(3rem, 8vw, 4.5rem);
	font-weight: 700;
	line-height: 1;
}

.fcr-sem-foto__mes {
	margin-top: 0.4rem;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.fcr-sem-foto:not(:has(a)) {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Página do evento: link de volta e aviso de "atividade realizada". */
.fcr-evento-nota {
	margin: 0 0 1.25rem;
	font-size: 0.9375rem;
}

.fcr-evento-nota--realizada {
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--cinza-claro);
	border-left: 4px solid var(--wp--preset--color--tinta);
}