/*
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.24
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); }

/* Logado: o cabeçalho na largura das páginas (1080 px, como o corpo da
   Central), com "Central do Aluno" e a lupa à esquerda e sino, lua e Sair à
   direita — como no site antigo. */
.ft-cabecalho .alignwide:has(.ft-link-central) {
	max-width: 1080px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
	justify-content: flex-start !important;
	gap: 16px;
}
.ft-cabecalho .alignwide:has(.ft-link-central) > .wp-block-group:last-child { margin-left: auto; }
.ft-link-central {
	display: inline-block;
	line-height: 44px;
	padding: 0 0.5rem;
	color: var(--ft-texto);
	font-size: calc(1rem + 3px);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.ft-link-central:hover { color: var(--ft-verde-texto); }
/* Só a Central desce 12 px para a direita: deslocamento visual, os outros itens não se mexem. */
.ft-cabecalho .ft-link-central { position: relative; left: 12px; }
/* O chapéu 🎓 em cima do último "o", como no site antigo. */
.ft-link-central .ft-o { position: relative; display: inline-block; }
.ft-link-central .ft-o::before {
	content: "🎓";
	position: absolute;
	left: -1px;
	top: 8px;
	transform: rotate(21deg);
	font-size: 0.9em;
	line-height: 1;
}
.ft-busca-lugar { display: flex; align-items: center; flex: 1 1 360px; max-width: 460px; min-width: 0; }
.ft-sair {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 12px;
	background: #dc2626;
	color: #fff !important;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.ft-sair:hover { background: #b91c1c; box-shadow: 0 8px 18px rgba(220, 38, 38, 0.25); }
.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; }
	.ft-link-central { font-size: 1rem; padding: 0 0.25rem; }
}
@media (max-width: 599px) {
	.ft-cabecalho .alignwide:has(.ft-link-central) { flex-wrap: wrap; gap: 8px; }
}

/*
 * 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; }
}

/* Comunidade e redes (padrão faculdade-trader/comunidade): 5 cartões, cada um com a cor da rede. */
.ft-redes { list-style: none; margin: var(--wp--preset--spacing--40, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ft-rede { --ft-rede-cor: #0BCE70; }
.ft-rede--telegram { --ft-rede-cor: #229ED9; }
.ft-rede--whatsapp { --ft-rede-cor: #25D366; }
.ft-rede--youtube { --ft-rede-cor: #FF0033; }
.ft-rede--instagram { --ft-rede-cor: #E1306C; }
.ft-rede a { display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; padding: 22px 20px; border-radius: 18px; border: 1px solid var(--ft-linha); border-top: 4px solid var(--ft-rede-cor); background: var(--ft-superficie); color: var(--ft-texto); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.ft-rede a:hover, .ft-rede a:focus-visible { transform: translateY(-3px); border-color: var(--ft-rede-cor); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.ft-rede__icone { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--ft-rede-cor) 16%, transparent); font-size: 1.4rem; }
.ft-rede__titulo { font-size: 1.05rem; }
.ft-rede__texto { flex: 1; color: var(--ft-texto-suave); font-size: .92rem; line-height: 1.45; }
.ft-rede__botao { margin-top: 6px; color: var(--ft-rede-cor); font-weight: 700; }
@media (max-width: 1000px) { .ft-redes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ft-redes { grid-template-columns: 1fr; } }

/* Destaques acima dos planos (plataforma grátis e aulas gravadas). */
.ft-planos-destaques { list-style: none; margin: 18px auto 26px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ft-planos-destaques li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(11, 206, 112, .45); background: rgba(11, 206, 112, .1); color: var(--ft-texto); font-size: 1rem; line-height: 1.3; }
.ft-planos-destaques li strong { color: var(--ft-verde-texto); }
.ft-planos-destaques li > span:first-child { font-size: 1.3rem; }
@media (max-width: 560px) { .ft-planos-destaques li { width: 100%; justify-content: center; text-align: center; border-radius: 14px; } }