/*
Theme Name: Lidi Faria
Theme URI: https://lidifaria.com
Description: Tema filho do Twenty Twenty-Five com a identidade visual de Lidi Faria — paleta roxo/amarelo, tipografia Gabarito, modo escuro automático e ajustes de acessibilidade.
Author: Lidi Faria
Author URI: https://lidifaria.com
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lidifaria-child
*/

/* ==========================================================================
   1. Tokens
   Os tokens de cor vêm do theme.json. Aqui só são reapontados para permitir
   a troca automática no modo escuro.
   ========================================================================== */

:root {
	--lf-fundo: #faf9ff;
	--lf-superficie: #ffffff;
	--lf-tinta: #241d33;
	--lf-titulo: #09060f;
	--lf-apoio: #5b5470;
	--lf-linha: #e6e2f2;
	--lf-roxo: #7b3fd4;
	--lf-roxo-texto: #6b33b8;
	--lf-amarelo: #ffc243;
	--lf-foco: #6b33b8;
	--lf-raio: 20px;
}

/* ==========================================================================
   2. Modo escuro automático
   Segue a preferência do sistema. Sem botão de alternância: menos código,
   menos estado para manter, e respeita a escolha que a pessoa já fez.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root {
		--lf-fundo: #0d0a16;
		--lf-superficie: #171223;
		--lf-tinta: #e0dcf0;
		--lf-titulo: #f4f2fb;
		--lf-apoio: #a79fbf;
		--lf-linha: #2a2340;
		--lf-roxo: #b98bf0;
		--lf-roxo-texto: #c6a6f5;
		--lf-foco: #ffc243;
	}

	body {
		background-color: var(--lf-fundo);
		color: var(--lf-tinta);
	}

	h1, h2, h3, h4, h5, h6,
	.wp-block-post-title,
	.wp-block-site-title a {
		color: var(--lf-titulo);
	}

	a {
		color: var(--lf-roxo-texto);
	}

	.wp-block-button__link {
		background-color: var(--lf-roxo);
		color: #09060f;
	}

	/* o logo troca de versão junto com o tema */
	.custom-logo {
		content: url( "assets/images/logo-escuro.png" );
	}

	img:not(.custom-logo):not([src$=".svg"]) {
		/* fotos ficam levemente rebaixadas para não ofuscar no escuro */
		filter: brightness( 0.92 );
	}
}

/* ==========================================================================
   3. Acessibilidade
   ========================================================================== */

/* 3.1 Foco sempre visível, em qualquer fundo. */
:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 3px solid var(--lf-foco);
	outline-offset: 3px;
	border-radius: 4px;
}

/* 3.2 Respeita quem pediu menos movimento no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* 3.3 Link para pular ao conteúdo, visível ao receber foco. */
.skip-link:focus {
	background: var(--lf-titulo);
	color: var(--lf-amarelo);
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 8px 0;
	z-index: 999999;
}

/* 3.4 Área de toque mínima de 44x44px em controles. */
.wp-block-button__link,
.wp-block-navigation a,
button,
input[type="submit"] {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* 3.5 Alvo de leitura confortável: 65 a 75 caracteres por linha. */
.wp-block-post-content p,
.entry-content p {
	max-width: 68ch;
}

/* ==========================================================================
   4. Cabeçalho e navegação
   ========================================================================== */

.wp-block-site-logo img {
	height: 46px;
	width: auto;
}

.wp-block-navigation {
	font-weight: 500;
}

.wp-block-navigation a {
	text-decoration: none;
}

.wp-block-navigation a:hover,
.wp-block-navigation .current-menu-item a {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--lf-amarelo);
}

/* Botão de destaque do menu. Aplique a classe "botao-destaque" ao item
   "Leia meus artigos no blog" em Aparência > Editor > Navegação. */
.wp-block-navigation .botao-destaque a,
.botao-destaque > a {
	background: var(--lf-roxo);
	color: #faf9ff;
	padding: 0 1.25rem;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
}

.wp-block-navigation .botao-destaque a:hover {
	background: var(--lf-titulo);
	color: var(--lf-amarelo);
	text-decoration: none;
}

/* ==========================================================================
   5. Rótulo de seção (pílula preta com texto amarelo)
   Aplique a classe "rotulo" a um parágrafo.
   ========================================================================== */

.rotulo {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--lf-titulo);
	color: var(--lf-amarelo);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Quadrado amarelo de fim de frase, citando o ponto final do logo.
   Aplique a classe "ponto" a um span. */
.ponto::after {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	background: var(--lf-amarelo);
	margin-left: 0.25em;
}

/* ==========================================================================
   6. Listagem de posts
   ========================================================================== */

.wp-block-post-template li,
.wp-block-query .wp-block-post {
	background: var(--lf-superficie);
	border: 1px solid var(--lf-linha);
	border-radius: var(--lf-raio);
	overflow: hidden;
}

.wp-block-post-featured-image img {
	border-radius: 0;
}

.wp-block-post-title a {
	text-decoration: none;
	color: var(--lf-titulo);
}

.wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--lf-amarelo);
	text-underline-offset: 4px;
}

.wp-block-post-date,
.wp-block-post-terms {
	color: var(--lf-apoio);
	font-size: 0.8125rem;
}

/* ==========================================================================
   7. Formulário de contato (Fluent Forms)
   ========================================================================== */

.fluentform .ff-el-input--label label {
	font-weight: 700;
	color: var(--lf-titulo);
}

.fluentform .ff-el-form-control {
	background: var(--lf-superficie);
	border: 1px solid #cfc7e6;
	border-radius: 14px;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--lf-tinta);
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--lf-roxo);
	outline: 3px solid var(--lf-foco);
	outline-offset: 2px;
}

.fluentform .ff-btn-submit {
	background: var(--lf-roxo);
	color: #faf9ff;
	border: none;
	border-radius: 999px;
	padding: 0.9rem 1.8rem;
	font-weight: 700;
	min-height: 48px;
}

.fluentform .ff-btn-submit:hover {
	background: var(--lf-titulo);
	color: var(--lf-amarelo);
}

/* Mensagens de erro: cor não é o único sinal — há também ícone e texto. */
.fluentform .error-text,
.fluentform .ff-el-is-error .error {
	color: #a4133c;
	font-weight: 600;
}

@media (prefers-color-scheme: dark) {
	.fluentform .error-text,
	.fluentform .ff-el-is-error .error {
		color: #ff8fa3;
	}
}

/* ==========================================================================
   8. Rodapé
   ========================================================================== */

.wp-block-template-part.rodape,
.rodape {
	background: var(--lf-titulo);
	color: #dcd7ec;
}

.rodape a {
	color: #dcd7ec;
	text-decoration: none;
}

.rodape a:hover {
	color: var(--lf-amarelo);
	text-decoration: underline;
}

.rodape .rotulo-rodape {
	color: var(--lf-amarelo);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.redes-sociais a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
}

/* ==========================================================================
   9. Impressão
   ========================================================================== */

@media print {
	.wp-block-navigation,
	.rodape,
	.wp-block-button {
		display: none;
	}

	body {
		background: #ffffff;
		color: #000000;
	}
}

/* ==========================================================================
   10. Estilos registrados no editor
   register_block_style() gera as classes is-style-*; elas apontam para os
   mesmos estilos das classes manuais acima.
   ========================================================================== */

p.is-style-rotulo {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--lf-titulo);
	color: var(--lf-amarelo);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
}

.wp-block-group.is-style-cartao {
	background: var(--lf-superficie);
	border: 1px solid var(--lf-linha);
	border-radius: var(--lf-raio);
	padding: 1.75rem;
}

/* ==========================================================================
   11. Faixa de assinatura e cartões de seção
   ========================================================================== */

.faixa-nome {
	background: var(--lf-titulo);
	color: #faf9ff;
	text-align: center;
}

.faixa-nome p {
	margin: 0;
	font-size: clamp( 1.25rem, 3vw, 1.875rem );
	font-weight: 700;
	letter-spacing: -0.01em;
}

.logos-clientes img {
	max-height: 46px;
	width: auto;
	object-fit: contain;
}

.logos-clientes figure {
	background: #ffffff;
	border: 1px solid var(--lf-linha);
	border-radius: 16px;
	padding: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 84px;
	margin: 0;
}