/*
Theme Name: Atmos Base
Theme URI: https://atmosdigital.com.br
Author: Atmos Digital
Author URI: https://atmosdigital.com.br
Description: Tema mínimo da Atmos Digital, feito para servir o CrocoBuilder. Não traz header, rodapé nem estilos visuais: o layout, as classes e o design system ficam no CrocoBuilder. O tema só garante uma base técnica limpa e a Biblioteca de Fontes do WordPress.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atmos-base
*/

/*
 * Reset mínimo. Todo o visual (cores, tipografia, espaçamentos, motion)
 * vem das classes e variáveis do CrocoBuilder.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
}

/*
 * Rolagem suave só para quem não pediu menos movimento.
 * As demais regras de "reduzir movimento" ficam nas classes do CrocoBuilder,
 * seguindo a página Motion do Figma.
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/*
 * Foco pelo teclado. O CrocoBuilder 1.0.1 não gera o estado focus-visible
 * nas classes, então a regra fica aqui, usando as variáveis do CrocoBuilder.
 * :where() mantém a especificidade zero, para qualquer classe poder sobrescrever.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--color-accent-default, #3381FF);
	outline-offset: 3px;
}

.btn:focus-visible {
	outline: 3px solid var(--color-accent-default, #3381FF);
	outline-offset: 3px;
}

/*
 * Nav Menu do CrocoBuilder no celular. O painel nasce aberto e o JS do
 * elemento o recolhe, o que mostrava o painel deslizando ao carregar a página.
 * Só anima ao abrir; fechado, muda na hora. Sem animação com "reduzir movimento".
 */
.pb-nav.is-collapsed:not(.is-open) .pb-nav__mobile-panel {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.pb-nav__mobile-panel {
		transition: none;
	}
}