/*
Theme Name: Nelblack
Theme URI: https://blog.nelblack.com.br
Author: Convertty
Author URI: https://convertty.com.br
Description: Tema do blog do Nelblack Visagismo e Terapia Capilar. Mesma identidade do site institucional (nelblack.com.br): Playfair Display + Inter, paleta creme/escuro/dourado, sem cantos arredondados e sem sombra. Tema de blocos.
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.1
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nelblack
Tags: blog, one-column, block-patterns, full-site-editing, editor-style, translation-ready
*/

/* O visual vive em theme.json. Aqui só o que o theme.json não alcança. */

/* Rótulo tipográfico das seções — o mesmo do site. */
.rotulo {
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--apoio);
  font-weight: 500;
}

/* Filete da identidade: as oito faixas da mandala do logotipo. Aparece uma vez
   por página, fechando o cabeçalho. Discrição é regra — o site é preto e
   branco e a cor só existe na marca. */
.linha-da-marca {
  height: 2px;
  width: 100%;
  background-image: var(--wp--preset--gradient--linha-da-marca);
}

/* Sublinhado que cresce da esquerda, como no site. */
.entry-content a:not(.wp-element-button),
.link-sublinhado {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  border-bottom: 1px solid var(--wp--preset--color--regua);
}
.entry-content a:not(.wp-element-button):hover,
.link-sublinhado:hover { background-size: 100% 1px; }

/* Toda foto entra em preto e branco e ganha cor no apontamento — a mesma
   regra dos vídeos do site. Foto de conteúdo dentro do texto fica de fora:
   ali a cor é informação (uma mecha, um tom de pele). */
.wp-block-post-featured-image img {
  filter: grayscale(1);
  transition: filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-block-post-featured-image:hover img { filter: grayscale(0); }

/* Leitura: 17px e entrelinha larga. A leitora mediana tem 42 anos. */
.entry-content > * + * { margin-block-start: 1.5em; }
.entry-content p { max-width: 68ch; }

:where(figure) { margin: 0; }

::selection { background: var(--wp--preset--color--escuro); color: var(--wp--preset--color--creme); }

:focus-visible {
  outline: 2px solid var(--wp--preset--color--escuro);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Fundo escuro: o link precisa herdar a cor do texto, senão o "tinta" definido
   em theme.json some contra o preto do rodapé. */
.has-escuro-background-color a,
.has-tinta-background-color a {
  color: inherit;
  border-bottom-color: rgba(250, 248, 245, 0.25);
}
.has-escuro-background-color a:hover,
.has-tinta-background-color a:hover { color: var(--wp--preset--color--dourado); }

/* A lista de categorias do rodapé é uma lista de navegação, não de leitura. */
.wp-block-categories-list { list-style: none; padding: 0; margin: 0; }
.wp-block-categories-list li + li { margin-top: 0.4rem; }