/*
Theme Name: Faculdade Trader
Theme URI: https://faculdadetrader.com.br
Author: Faculdade Trader
Description: Tema de blocos da Faculdade Trader (EAD 2027). Só aparência: cores, fontes, cabeçalho, rodapé e moldes de página. Regras de acesso, aulas e cobrança ficam no plugin FT Core.
Version: 0.1.2
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: Proprietária
Text Domain: faculdade-trader
*/

/*
 * Cores por tema. Sem escolha do aluno, segue o sistema (prefers-color-scheme).
 * O botão do cabeçalho grava data-tema="claro" ou "escuro" no <html>.
 * O bloco claro aparece duas vezes de propósito: uma para o sistema claro sem escolha,
 * outra para a escolha explícita.
 */
:root {
	color-scheme: dark;
	--ft-bg: #0A0D0F;
	--ft-faixa: #0E1215;
	--ft-superficie: #12171B;
	--ft-superficie-2: #1A2127;
	--ft-linha: #1A2127;
	--ft-borda: #3A4550;
	--ft-texto: #F1F5F4;
	--ft-texto-2: #C3CCD2;
	--ft-texto-suave: #A3AFB8;
	--ft-verde-texto: #0BCE70;
	--ft-laranja-texto: #FF6C13;
	--ft-vermelho: #FF4D5E;
	--ft-amarelo: #F5B70A;
	--ft-borda-botao: #0BCE70;
	--ft-mostra-escuro: inline-block;
	--ft-mostra-claro: none;
}

@media (prefers-color-scheme: light) {
	:root:not([data-tema="escuro"]) {
		color-scheme: light;
		--ft-bg: #F6F8F7;
		--ft-faixa: #EEF2F0;
		--ft-superficie: #FFFFFF;
		--ft-superficie-2: #E7EDEA;
		--ft-linha: #DCE3E0;
		--ft-borda: #C9D3CF;
		--ft-texto: #0E1412;
		--ft-texto-2: #2B3632;
		--ft-texto-suave: #4B5853;
		--ft-verde-texto: #067A46;
		--ft-laranja-texto: #C2500A;
		--ft-vermelho: #C2182E;
		--ft-amarelo: #8A6200;
		--ft-borda-botao: #09A85C;
		--ft-mostra-escuro: none;
		--ft-mostra-claro: inline-block;
	}
}

:root[data-tema="claro"] {
	color-scheme: light;
	--ft-bg: #F6F8F7;
	--ft-faixa: #EEF2F0;
	--ft-superficie: #FFFFFF;
	--ft-superficie-2: #E7EDEA;
	--ft-linha: #DCE3E0;
	--ft-borda: #C9D3CF;
	--ft-texto: #0E1412;
	--ft-texto-2: #2B3632;
	--ft-texto-suave: #4B5853;
	--ft-verde-texto: #067A46;
	--ft-laranja-texto: #C2500A;
	--ft-vermelho: #C2182E;
	--ft-amarelo: #8A6200;
	--ft-borda-botao: #09A85C;
	--ft-mostra-escuro: none;
	--ft-mostra-claro: inline-block;
}

/* Elementos que só existem num dos temas (logo, ícone do botão). */
.ft-so-escuro { display: var(--ft-mostra-escuro); }
.ft-so-claro { display: var(--ft-mostra-claro); }

/* Logo: duas imagens, uma por tema. */
.ft-logo { display: inline-flex; align-items: center; line-height: 0; }
.ft-logo img { height: 40px; width: auto; }

/* Botão de tema. */
.ft-botao-tema {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	border: 1px solid var(--ft-borda);
	background: var(--ft-superficie);
	color: var(--ft-texto);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}
.ft-botao-tema:hover { background: var(--ft-superficie-2); }
.ft-botao-tema svg { width: 20px; height: 20px; }

/* Foco sempre visível. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--ft-verde-texto);
	outline-offset: 2px;
}

/* Cartão: superfície com borda fina e cantos de 18 px. */
.is-style-ft-cartao {
	background: var(--ft-superficie);
	border: 1px solid var(--ft-linha);
	border-radius: 18px;
}

/* Rótulo pequeno em maiúsculas acima dos títulos. */
.is-style-ft-rotulo {
	font-size: 13px !important;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ft-verde-texto);
}

/* Lista com marcador ✓. */
.is-style-ft-lista-check { list-style: none; padding-left: 0; }
.is-style-ft-lista-check li { padding-left: 1.6em; position: relative; }
.is-style-ft-lista-check li::before { content: "✓"; position: absolute; left: 0; color: var(--ft-verde-texto); font-weight: 700; }

/* Cabeçalho e rodapé: linha fina separando do conteúdo. */
.ft-cabecalho { border-bottom: 1px solid var(--ft-linha); }
.ft-rodape { border-top: 1px solid var(--ft-linha); }
.ft-rodape .wp-block-navigation a { color: var(--ft-texto-suave); }
@media (max-width: 480px) {
	.ft-logo img { height: 30px; }
}

/*
 * Celular (abaixo de 600 px, onde o menu do WordPress vira o botão ☰):
 * cabeçalho numa linha só — logo, botão de tema e menu. "Entrar" e
 * "Quero estudar" saem do topo e aparecem dentro do menu.
 */
@media (min-width: 600px) {
	.ft-so-celular { display: none !important; }
}
@media (max-width: 599px) {
	.ft-botoes-topo { display: none !important; }
	.ft-cabecalho .alignwide { flex-wrap: nowrap; }
	.ft-cabecalho .wp-block-navigation { order: 3; }
	.ft-cabecalho .wp-block-navigation__responsive-container-open {
		width: 44px;
		height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* Perguntas que abrem e fecham. */
.wp-block-details {
	background: var(--ft-superficie);
	border: 1px solid var(--ft-linha);
	border-radius: 14px;
	padding: 1rem 1.25rem;
}
.wp-block-details summary { font-weight: 600; cursor: pointer; min-height: 1.6em; }
.wp-block-details[open] summary { margin-bottom: 0.5rem; }

/* Menu do celular aberto acompanha o tema, com letras grandes e alvo de toque folgado. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--ft-bg) !important;
	color: var(--ft-texto) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: 1.25rem;
	font-weight: 600;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.6rem 0;
	color: var(--ft-texto);
}
.wp-block-navigation__responsive-container.is-menu-open .ft-item-botao {
	margin-top: 0.75rem;
}
.wp-block-navigation__responsive-container.is-menu-open .ft-item-botao .wp-block-navigation-item__content {
	background: #0BCE70;
	color: #04140B;
	border: 1px solid var(--ft-borda-botao);
	border-radius: 12px;
	padding: 0.8rem 1.6rem;
	font-weight: 700;
}

/* Números alinhados (preços, datas). */
.ft-numero { font-variant-numeric: tabular-nums; }

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