/*
Theme Name: Fábrica de Monstros CT
Theme URI: https://fabricactmontserrat.com.br/
Author: Fábrica de Monstros CT Goiás
Author URI: https://fabricactmontserrat.com.br/
Description: Tema da landing page Fábrica de Monstros CT Goiás — o primeiro CT temático da América Latina, em Aparecida de Goiânia. Toda a página inicial é editável pelo Personalizador (Aparência → Personalizar), sem necessidade de plugins: textos, imagens, cores, grade de aulas, depoimentos, FAQ e links de contato.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fabrica-monstros
Tags: custom-logo, custom-menu, featured-images, translation-ready, accessibility-ready, block-styles, wide-blocks

Fábrica de Monstros CT é um tema WordPress derivado da landing page estática
do projeto Site-fabrica-ct. O CSS original do site é carregado a partir de
assets/css/site.css; este arquivo contém apenas o cabeçalho exigido pelo
WordPress e os ajustes específicos da integração.
*/

/* ===========================================================================
   1) Ajustes de integração com o WordPress
   ======================================================================== */

/* A logo do tema usa .logo-header / .footer-logo, já dimensionados pelo
   site.css (height 55px / 40px). Não usamos the_custom_logo(), então as
   classes .custom-logo do WordPress não se aplicam — regra abaixo é só uma
   malha de segurança caso algo injete uma imagem no lugar. */
.navbar-brand img,
.site-footer img {
	max-height: 130px;
	width: auto;
}

/* O cabeçalho é fixo; compensar a barra de administração quando logado */
@media screen and (max-width: 782px) {
	.admin-bar #header {
		top: 46px;
	}
}

@media screen and (min-width: 783px) {
	.admin-bar #header {
		top: 32px;
	}
}

/* Link "pular para o conteúdo" (acessibilidade).
   Estado OCULTO: padrão do WordPress (clip + left:-9999px), sem transição.
   Por que não usar `top: -100%` + `transition` (como o site.css): a
   transição depende de quadros serem compostos e o valor percentual depende
   da altura do containing block. Em teste ao vivo isso deixou o link preso
   fora da tela mesmo com :focus aplicado (styleTop=0px, offsetTop=-945). */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	margin: 0;
	padding: 10px 18px;
	font-size: 1rem;
	font-weight: 700;
	line-height: normal;
	text-decoration: none;
	transition: none;
}

/* Estado FOCADO: seletor único de propósito. Uma lista
   `:focus, :focus-within` na mesma declaração não foi aplicada pelo browser
   em teste ao vivo (a regra base casava e a lista era ignorada pelo parser).
   Medido no site publicado: com a lista, computed position=absolute;
   com seletor único, position=fixed e o link aparece em 16,0. */
.skip-link.screen-reader-text:focus {
	position: fixed;
	left: 16px;
	top: 16px;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
	z-index: 100000;
	transition: none;
}

.skip-link.screen-reader-text:focus-within {
	position: fixed;
	left: 16px;
	top: 16px;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
	z-index: 100000;
}

/* ===========================================================================
   2) Componentes gerados dinamicamente pelo tema
   ======================================================================== */

/* Vídeo de apresentação (seção A Fábrica) */
.fabrica-video-embed {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	min-height: 320px;
	border: 0;
	border-radius: 8px;
	background: #000;
}

.video-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 360px;
	padding: 2rem;
	text-align: center;
	border: 1px dashed var(--fdm-border);
	border-radius: 8px;
	background: var(--fdm-surface);
	color: var(--fdm-gray);
}

.video-placeholder i {
	font-size: 3rem;
	color: var(--fdm-orange);
	line-height: 1;
}

.video-placeholder strong {
	color: var(--fdm-white);
	font-size: 1rem;
}

.video-placeholder span {
	font-size: 0.8rem;
}

/* Avatar dos depoimentos quando não há foto (usa a inicial do nome) */
.review-avatar-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--fdm-orange);
	color: #000;
	font-weight: 800;
	font-size: 1rem;
	line-height: 1;
	user-select: none;
}

/* Mensagem exibida em dias sem aulas na grade mobile */
.mobile-schedule-empty {
	margin: 0;
	padding: 18px 4px;
	text-align: center;
	color: var(--fdm-gray);
	font-size: 0.9rem;
}

/* ===========================================================================
   3) Páginas e posts internos
   ======================================================================== */

.article-wrapper,
body:not(.fdm-front) .section-py .body-copy {
	color: var(--fdm-light-gray);
}

.body-copy p {
	margin-bottom: 1rem;
}

.body-copy a {
	color: var(--fdm-orange);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.body-copy a:hover {
	color: var(--fdm-yellow);
}

.body-copy ul,
.body-copy ol {
	padding-left: 1.25rem;
	margin-bottom: 1rem;
}

.body-copy li {
	margin-bottom: 0.35rem;
}

.body-copy blockquote {
	margin: 1.25rem 0;
	padding: 0.75rem 1.25rem;
	border-left: 3px solid var(--fdm-orange);
	background: var(--fdm-surface);
	font-style: italic;
}

/* Botões nativos do editor blocos */
.wp-block-button__link {
	background: var(--fdm-orange);
	border: 1px solid var(--fdm-orange);
	color: var(--fdm-black);
	font-weight: 700;
	border-radius: 6px;
}

.wp-block-button__link:hover {
	background: var(--fdm-orange-hover);
	border-color: var(--fdm-orange-hover);
	color: var(--fdm-black);
}

/* Paginação de posts */
.navigation.pagination {
	margin-top: 2rem;
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.navigation.pagination .page-numbers {
	display: inline-block;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--fdm-border);
	border-radius: 6px;
	color: var(--fdm-white);
	text-decoration: none;
}

.navigation.pagination .page-numbers.current,
.navigation.pagination .page-numbers:hover {
	background: var(--fdm-orange);
	border-color: var(--fdm-orange);
	color: var(--fdm-black);
}