/* ------------------------------------------------------------------ */
/* Tokens de tema (claro / escuro)                                    */
/* O site é "escuro" por omissão (identidade visual atual). O modo    */
/* claro é ativado com o atributo data-theme="light" no <html>,       */
/* alternado pelo botão [ksp_theme_toggle] (ver theme-toggle.js).     */
/* ------------------------------------------------------------------ */

:root {
	--ksp-bg: #000000;
	--ksp-bg-elevated: #0a0a0c;
	--ksp-bg-elevated-2: #111111;
	--ksp-text: #ffffff;
	--ksp-fg-rgb: 255, 255, 255;
}

:root[data-theme="light"] {
	--ksp-bg: #ffffff;
	--ksp-bg-elevated: #ffffff;
	--ksp-bg-elevated-2: #f5f8fb;
	--ksp-text: #000000;
	--ksp-fg-rgb: 0, 0, 0;
}

/* Alguns templates dão margin-top ao <main>, o que revela o fundo do
   <body> por trás (margens não são pintadas pelo próprio elemento).
   Pintar o body evita frestas da cor errada entre o cabeçalho e o main. */
body {
	background: var(--ksp-bg);
}

/* O WP dá automaticamente margin-top ao rodapé (regra global "> *" do
   layout constrained), o que cria uma barra branca entre o conteúdo e o
   rodapé (fundo do body à mostra). O footer não precisa dessa margem. */
footer.wp-block-template-part {
	margin-top: 0;
}

/* ------------------------------------------------------------------ */
/* Faixa de publicações recentes — acima do cabeçalho, bem fininha     */
/* ------------------------------------------------------------------ */

.ksp-latest-ticker {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 30px;
	padding: 0 clamp(16px, 4vw, 48px);
	background: linear-gradient(90deg, var(--wp--preset--color--accent-2), var(--wp--preset--color--accent-1));
	overflow: hidden;
}
.ksp-latest-ticker__label {
	flex: 0 0 auto;
	font-size: 0.62rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
}
/* Ticker contínuo, como nas notícias: o texto vai entrando pela direita e
   sai pela esquerda, em loop infinito (faixa duplicada — ver PHP). Pausa
   ao passar o rato para dar para ler/clicar com calma. */
.ksp-latest-ticker__stage {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ksp-latest-ticker__track {
	display: flex;
	align-items: center;
	width: max-content;
	height: 100%;
	gap: 48px;
	animation: ksp-ticker-scroll 32s linear infinite;
}
.ksp-latest-ticker__stage:hover .ksp-latest-ticker__track {
	animation-play-state: paused;
}
@keyframes ksp-ticker-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}
.ksp-latest-ticker__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	font-size: 0.68rem;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	white-space: nowrap;
}
.ksp-latest-ticker__item:hover {
	color: #fff;
}
.ksp-latest-ticker__title {
	flex: 0 0 auto;
	font-weight: 800;
}
.ksp-latest-ticker__excerpt {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 400;
}
@media (prefers-reduced-motion: reduce) {
	.ksp-latest-ticker__track {
		animation: none;
	}
}

/* ------------------------------------------------------------------ */
/* Botão de alternância claro/escuro                                  */
/* ------------------------------------------------------------------ */

.ksp-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	cursor: pointer;
	flex: 0 0 auto;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.ksp-theme-toggle:hover {
	border-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-1);
}
.ksp-theme-toggle svg {
	width: 17px;
	height: 17px;
	stroke: currentColor;
	fill: none;
}
/* O ícone mostra a ação do clique, não o estado atual: em modo escuro
   mostra-se o sol (clica para passar a claro) e vice-versa. */
.ksp-theme-toggle__icon--moon { display: none; }
:root[data-theme="light"] .ksp-theme-toggle__icon--sun { display: none; }
:root[data-theme="light"] .ksp-theme-toggle__icon--moon { display: block; }