/*
Theme Name: Kenzo
Theme URI: https://mauriciokenzo.com
Author: Mauricio Kenzo
Description: Tema de blocos minimalista para um lifestream pessoal: uma coluna estreita, feed cronológico, texto, foto, vídeo, link e música no mesmo fluxo. Sem construtor de página e sem shortcodes próprios.
Version: 0.13.1
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kenzo
*/

/* O visual vive em theme.json. Aqui ficam só os ajustes que ele não expressa. */

/* ---------- Cabeçalho: barra preta fina, menu à direita (como austinkleon.com) ---------- */

header.wp-block-group a {
	color: inherit;
	text-decoration: none;
}

header.wp-block-group .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent-light);
}

/* Item atual do menu em vermelho. */
header.wp-block-group .wp-block-navigation .current-menu-item > a,
header.wp-block-group .wp-block-navigation [aria-current="page"] {
	color: var(--wp--preset--color--accent-light);
}

/* Cabeçalho fixo no topo. O elemento que gruda é o invólucro da parte de modelo, filho direto do corpo. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .wp-site-blocks > header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header {
		top: 46px;
	}
}

/* ---------- Conteúdo principal ---------- */

/* Sem a fresta que o espaçamento global abre entre cabeçalho, conteúdo e rodapé. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

main.wp-block-group:not(.is-feed) {
	padding-top: var(--wp--preset--spacing--50);
}

/* Título e busca das páginas de arquivo e busca, acima do feed de largura inteira. */
.feed-head {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

/* ---------- Rodapé: faixa preta de colunas + base clara ---------- */

.footer-widgets a {
	color: var(--wp--preset--color--accent-light);
	text-decoration: none;
}

.footer-widgets a:hover {
	text-decoration: underline;
}

.footer-title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Listas de links com divisória fina, no estilo do rodapé do Austin Kleon. */
.footer-list ul,
.footer-list.wp-block-page-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-list li {
	padding-block: 0.55rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
}

.footer-list .wp-block-post-date,
.footer-list .wp-block-post-date a {
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.footer-list .wp-block-post-title {
	margin: 0;
}

.footer-widgets .wp-block-search__input {
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 2px;
	padding: 0.6rem 0.75rem;
	background: #fff;
	color: #141412;
}

.footer-base {
	text-align: center;
	font-family: var(--wp--preset--font-family--sans);
}

.footer-base p {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.footer-base .wp-block-navigation .current-menu-item > a,
.footer-base .wp-block-navigation [aria-current="page"] {
	color: var(--wp--preset--color--accent);
}

/* ---------- Feed ---------- */

.entry {
	padding-block: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* O feed ocupa a largura inteira. Cada post é uma faixa; as cores giram entre fundo, band, band-2 e band-3. */
main .wp-block-post-template {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

main .wp-block-post-template > li {
	--faixa: var(--wp--preset--color--base);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* texto começa no topo, mesmo num par com um vizinho mais alto */
	flex: 0 0 100%;
	min-width: 0; /* sem isto, uma URL longa estica a faixa além da tela e a página ganha rolagem horizontal */
	box-sizing: border-box;
	margin: 0;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background: var(--faixa);
}

main .wp-block-post-template > li > .entry {
	width: 100%;
	position: relative;
	z-index: 1;
	overflow-wrap: anywhere; /* quebra URLs e palavras longas em vez de estourar a largura */
}

/* Empilhamento: só com o script ativo; o `top` de cada faixa é calculado em assets/feed-stack.js. */
.feed-stack main .wp-block-post-template > li {
	position: sticky;
}

/* Desktop: ciclo de 5 posts: 1 de largura inteira, depois dois pares lado a lado. */
@media (min-width: 782px) {
	main .wp-block-post-template > li:nth-child(5n + 2),
	main .wp-block-post-template > li:nth-child(5n + 3),
	main .wp-block-post-template > li:nth-child(5n + 4),
	main .wp-block-post-template > li:nth-child(5n + 5) {
		flex-basis: 50%;
	}

	/* Um par que ficou sem o parceiro (último post da página) ocupa a linha inteira. */
	main .wp-block-post-template > li:nth-child(5n + 2):last-child,
	main .wp-block-post-template > li:nth-child(5n + 4):last-child {
		flex-basis: 100%;
	}
}

/* Post com foto: a imagem destacada vira o fundo da faixa, com uma película escura para o texto. */
main .wp-block-post-template > li > .entry-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	max-width: none;
}

main .wp-block-post-template > li > .entry-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* Parallax (assets/feed-parallax.js): a foto passa 13% da faixa por cima e desliza para baixo dentro dela. */
.feed-parallax main .wp-block-post-template > li > .entry-bg {
	inset: -13% 0 0;
	transform: translate3d(0, var(--py, 0px), 0);
	will-change: transform;
}

main .wp-block-post-template > li:has(> .entry-bg) {
	overflow: hidden;
	--wp--preset--color--contrast: #ffffff;
	--wp--preset--color--muted: rgba(255, 255, 255, 0.8);
	--wp--preset--color--accent: #d0c9ed;
	min-height: min(80vh, 640px);
	justify-content: flex-end;
	color: #ffffff;
}

main .wp-block-post-template > li:has(> .entry-bg)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.15) 70%);
}

/* A foto já é o fundo; esconde a primeira imagem repetida no corpo do post. */
main .wp-block-post-template > li:has(> .entry-bg) .wp-block-post-content > .wp-block-image:first-child {
	display: none;
}

main .wp-block-post-template > li:nth-child(4n + 2) {
	--faixa: var(--wp--preset--color--band);
}

main .wp-block-post-template > li:nth-child(4n + 3) {
	--faixa: var(--wp--preset--color--band-2);
}

main .wp-block-post-template > li:nth-child(4n + 4) {
	--faixa: var(--wp--preset--color--band-3);
}

main .wp-block-post-template .entry {
	padding-block: 0;
	border-bottom: 0;
}

/* Paginação e mensagem de "nada aqui" ficam na coluna de leitura, abaixo das faixas. */
.is-feed .wp-block-query-pagination,
.is-feed .wp-block-query-no-results {
	box-sizing: border-box;
	max-width: 640px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.wp-block-group.entry-meta {
	margin-top: var(--wp--preset--spacing--30);
	gap: 0;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.entry-meta a {
	color: inherit;
	text-decoration: none;
}

.entry-meta a:hover {
	color: var(--wp--preset--color--accent);
}

/* Ponto central entre data, formato e categoria, sem depender de markup extra. */
.entry-meta > * + *::before {
	content: "·";
	margin-inline: 0.6em;
}

/* ---------- Mídia embutida ---------- */

.wp-block-embed iframe,
.wp-block-video video,
.wp-block-image img,
.entry iframe {
	max-width: 100%;
}

/* URL de vídeo colada sozinha numa linha vira um iframe de 500 px fixos (incorporação clássica, fora do
   bloco "Incorporar"). Aqui ele ocupa a largura da faixa, em 16:9. Spotify e outros ficam só limitados. */
.entry iframe[src*="youtube"],
.entry iframe[src*="youtu.be"],
.entry iframe[src*="vimeo"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.wp-block-embed.is-type-video .wp-block-embed__wrapper {
	border-radius: 2px;
	overflow: hidden;
}

/* ---------- Claro e escuro ----------
   O script do tema marca <html data-theme="light|dark"> antes de pintar a página, a partir da
   escolha guardada ou do aparelho. Sem JavaScript, vale o modo do aparelho (bloco @media). */

:root[data-theme="light"] {
	color-scheme: light;
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--base: #141412;
	--wp--preset--color--contrast: #ece9e1;
	--wp--preset--color--muted: #9a958a;
	--wp--preset--color--accent: #a294db;
	--wp--preset--color--line: #2c2a26;
	--wp--preset--color--band: #1d1c19;
	--wp--preset--color--band-2: #172129;
	--wp--preset--color--band-3: #261c1b;
	--wp--preset--color--brand: #000000;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		color-scheme: dark;
		--wp--preset--color--base: #141412;
		--wp--preset--color--contrast: #ece9e1;
		--wp--preset--color--muted: #9a958a;
		--wp--preset--color--accent: #a294db;
		--wp--preset--color--line: #2c2a26;
		--wp--preset--color--band: #1d1c19;
		--wp--preset--color--band-2: #172129;
		--wp--preset--color--band-3: #261c1b;
		--wp--preset--color--brand: #000000;
	}
}

/* ---------- Formulário de contato (HTML em pages/contato.html, envio em functions.php) ---------- */

.kenzo-contact-form {
	display: grid;
	gap: 1.1rem;
}

.kenzo-contact-form label {
	display: grid;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.kenzo-contact-form input[type="text"],
.kenzo-contact-form input[type="email"],
.kenzo-contact-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.75rem 0.85rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent);
	border-radius: 2px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	text-transform: none;
	letter-spacing: 0;
}

.kenzo-contact-form textarea {
	min-height: 10rem;
	resize: vertical;
}

.kenzo-contact-form input:focus-visible,
.kenzo-contact-form textarea:focus-visible,
.kenzo-contact-form button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.kenzo-contact-form button {
	justify-self: start;
	padding: 0.85rem 1.6rem;
	border: 0;
	border-radius: 2px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
}

.kenzo-contact-form button:hover {
	background: var(--wp--preset--color--accent);
}

/* Campo-armadilha: fora da tela para quem enxerga, mas robôs preenchem. */
.kenzo-contact-form .cf-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kenzo-contact-form .cf-status {
	margin: 0;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--band);
}

.kenzo-contact-form .cf-status:empty {
	display: none;
}

.kenzo-contact-form .cf-status.is-ok {
	border-left-color: #2e7d32;
}

/* ---------- Botão de tema (cabeçalho) ---------- */

.theme-toggle {
	display: inline-flex;
	padding: 4px;
	border: 0;
	background: none;
	color: inherit;
	line-height: 0;
	cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
	color: var(--wp--preset--color--accent-light);
}

.theme-toggle svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Mostra o sol no escuro (para ir ao claro) e a lua no claro. */
.theme-toggle .icon-sun {
	display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
	display: inline;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
	display: none;
}