/* Estilos base do tema MakeGrow: foco visível, tipografia de apoio e movimento. */

html {
	scroll-behavior: smooth;
}

/*
 * Corpo em 17 px no celular (especificação 3.3). O theme.json define 18 px
 * como padrão do corpo (styles.typography.fontSize = preset "base"); a partir
 * de 768 px devolvemos esse preset.
 */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
	font-size: var(--wp--preset--font-size--base-menor);
}

@media (min-width: 768px) {

	body {
		font-size: var(--wp--preset--font-size--base);
	}
}

/*
 * Sublinhado dos links: 1 px, 2 px no hover, afastado do texto em 0,2em
 * (SPEC 1, seção 5; protótipo estilo.css:59-60). O seletor repete
 * "a:where(:not(.wp-element-button))", o mesmo que o "elements.link" do
 * theme.json gera nos estilos globais: mesma especificidade (só a tag
 * "a"), então esta folha (carregada depois dos estilos globais) prevalece
 * sem precisar de "!important". Não altera links de navegação nem do
 * rodapé, que já têm decoração própria em sections.css.
 */
a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

/*
 * Foco visível global: 3 px, afastado 3 px, cor do papel semântico de foco.
 * A SPEC pede ":root :focus-visible"; a lista com :where() abaixo cobre os
 * mesmos elementos na prática (:focus-visible só combina com algo que pode
 * receber foco) e documenta explicitamente quais são: links, botões, campos
 * de formulário, o cabeçalho do acordeão (summary) e qualquer elemento com
 * tabindex explícito. `[tabindex]:not([tabindex="-1"])` exclui elementos como
 * o `<main id="conteudo">`, que recebe tabindex="-1" só para aceitar o foco
 * programático do skip-link: esses elementos não são alcançáveis por Tab, então
 * não devem desenhar o contorno de foco. :where() mantém a especificidade zero.
 */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: var(--wp--custom--foco--espessura) solid var(--wp--custom--foco--cor);
	outline-offset: 3px;
}

/*
 * Cantos do contorno levemente arredondados nos links, como no protótipo. Só links que não
 * são botão: o raio dos botões nos estilos globais também tem especificidade zero e perderia
 * para esta regra, e eles (assim como o "Menu" e o alternador) mantêm os 6 px próprios.
 */
:where(a:not(.wp-element-button, .wp-block-button__link)):focus-visible {
	border-radius: 2px;
}

/* O link do logo recebe do núcleo "border-radius: inherit" (".wp-block-site-logo a"). */
.wp-block-site-logo a:focus-visible {
	border-radius: 2px;
}

/*
 * Foco dentro de bloco escuro (estilo ".is-style-escuro", SPEC 1, seção 7) usa mel em vez
 * da cor de foco padrão, porque em fundo escuro ela não tem contraste suficiente.
 * Fica em base.css, carregado sempre: um arquivo por bloco (como blocks/button.css)
 * só entra na página quando esse bloco existe, e um template sem "core/button"
 * (por exemplo, sem a barra fixa de contato) perderia a regra. Repete a mesma
 * especificidade de ":focus-visible" acima (0,1,0) e vem depois dela, então só a
 * cor do contorno muda; a espessura e o afastamento continuam os globais.
 */
:where(.is-style-escuro) :focus-visible {
	outline-color: var(--wp--preset--color--mel);
}

:where(a, button):focus:not(:focus-visible) {
	outline: none;
}

/*
 * O `<main tabindex="-1">` recebe foco programático (ativação do skip-link)
 * mas não é alcançável por Tab, então não participa do contrato de foco
 * visível. Sem esta regra o navegador aplica seu próprio contorno padrão de
 * :focus (fora do nosso controle de token e cor) a um elemento que nunca
 * deveria exibir contorno algum.
 */
:where([tabindex="-1"]):focus {
	outline: none;
}

/*
 * .screen-reader-text não é definida aqui: o WordPress já a fornece no
 * front-end de temas em blocos pelo handle "wp-block-library" (arquivo
 * wp-includes/css/dist/block-library/common.css), carregado incondicionalmente.
 */

/*
 * Formato "Sublinhado mel" (makegrow/highlight-underline, src/editor/index.js): marca a
 * parte que a pessoa completa numa mensagem pronta, como "[profissão]" no balão. Fica
 * aqui, e não no estilo do balão, porque o formato está disponível em qualquer texto
 * rico; sem esta regra o <mark> sairia com o fundo amarelo do navegador. O mel entra só
 * no sublinhado, nunca como cor de texto.
 */
mark.makegrow-highlight-underline {
	background: none;
	color: inherit;
	font-weight: var(--wp--custom--tipografia--peso-titulo);
	text-decoration-line: underline;
	text-decoration-color: var(--wp--preset--color--mel);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

/* Imagens por tema: a versão negativa só aparece no escuro. */
.only-dark {
	display: none;
}

/*
 * Alvo de toque mínimo para links de navegação e rodapé no celular. Os botões
 * (.wp-element-button, como o core/button dentro do menu "Principal") ficam de fora:
 * têm altura própria de 48 px em blocks/button.css, que esta regra venceria por
 * especificidade. A exclusão vai dentro de ":where()" para não somar especificidade: a
 * regra continua perdendo para os estilos de componente, como os itens do painel do
 * makegrow/mobile-menu. O link do logo do rodapé (".custom-logo-link", do core/site-logo)
 * também fica de fora: a imagem já tem 32 px de altura e, com o padding, o logo descia
 * 10 px em relação ao protótipo (o logo do cabeçalho não recebe esta regra).
 */
.wp-block-navigation a:where(:not(.wp-element-button)),
.site-footer a:where(:not(.wp-element-button, .custom-logo-link)) {
	display: inline-block;
	padding-block: 10px;
}

@media (min-width: 768px) {

	.wp-block-navigation a:where(:not(.wp-element-button)),
	.site-footer a:where(:not(.wp-element-button, .custom-logo-link)) {
		display: inline;
		padding-block: 0;
	}
}

/* Transições padrão de botões e links. */
.wp-element-button,
.wp-block-button__link,
.wp-block-navigation a {
	transition:
		background-color var(--wp--custom--movimento--duracao) ease,
		border-color var(--wp--custom--movimento--duracao) ease,
		color var(--wp--custom--movimento--duracao) ease,
		background-size var(--wp--custom--movimento--duracao) ease;
}

/* Movimento reduzido: único lugar com !important, por acessibilidade. */
@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0ms !important;
		animation-duration: 0ms !important;
	}
}