/**
 * Multdivision Storefront: base.
 * Complementa o theme.json com o que ele não expressa: foco visível,
 * mídia fluida, área de toque e movimento reduzido.
 * Cores e tamanhos vêm sempre de variáveis do theme.json.
 */

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
}

/* Foco visível e consistente para teclado, sem afetar clique de mouse (tokens --wp--custom--focus--*). */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: var(--wp--custom--focus--width, 2px) solid var(--wp--custom--focus--color, var(--wp--preset--color--accent));
	outline-offset: var(--wp--custom--focus--offset, 2px);
	border-radius: var(--wp--custom--radius--sm);
}

/* Avisos e listas que recebem foco por script (tabindex="-1") para o leitor de tela anunciar:
 * não são controles, então não mostram contorno de foco (o WooCommerce faz isso nos avisos). */
:where([role="alert"], [role="status"], table, tr, form)[tabindex="-1"]:focus {
	outline: none;
}

/* Área de toque mínima de 44 px para botões e controles (Padrão Base, seção 13). */
:where(.wp-element-button, .wp-block-button__link, button, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) {
	min-height: var(--wp--custom--touch-target);
}

/* Link de pular para o conteúdo (o WordPress gera o link; aqui só o visual). */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	z-index: 100000;
}

/* Texto selecionado. */
::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

/* Movimento reduzido: desliga rolagem suave e transições longas. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Rodapé sempre no fim da janela em páginas curtas, sem deslocar o layout. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > main,
.wp-site-blocks > .mdc-main {
	flex: 1 0 auto;
}

/* =========================================================================
 * Design System (desde 0.3.0). Todos os valores vêm dos tokens do theme.json
 * (--wp--custom--*). Ver DESIGN-SYSTEM.md. O filho muda os tokens, não as regras.
 * ========================================================================= */

/* ---------- Botões: 48 px padrão, 40 px compacto (área de toque 44), 52 px compra ---------- */
:where(.wp-element-button, .wp-block-button__link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: var(--wp--custom--control--height, 3rem);
	box-sizing: border-box;
	text-align: center;
	transition: background-color var(--wp--custom--state--transition), color var(--wp--custom--state--transition), border-color var(--wp--custom--state--transition), opacity var(--wp--custom--state--transition);
}

.wp-block-button.is-style-mdc-compacto > .wp-block-button__link,
.mdc-botao-compacto {
	position: relative;
	min-height: var(--wp--custom--control--height-sm, 2.5rem);
	line-height: 1.2;
}

/* Compacto continua com 44 px de área de toque (a altura visual é 40). */
.wp-block-button.is-style-mdc-compacto > .wp-block-button__link::after,
.mdc-botao-compacto::after {
	content: "";
	position: absolute;
	inset: calc((var(--wp--custom--touch-target, 44px) - 100%) / -2) 0;
	min-height: var(--wp--custom--touch-target, 44px);
}

.wp-block-button.is-style-mdc-compra > .wp-block-button__link,
.mdc-botao-compra {
	min-height: var(--wp--custom--control--height-lg, 3.25rem);
}

/* Botões lado a lado com o mesmo espaçamento; no celular estreito, empilham com largura total. */
.wp-block-buttons {
	gap: var(--wp--custom--control--gap, 0.75rem);
}

@media (max-width: 599px) {
	.wp-block-buttons.mdc-empilhar-mobile {
		flex-direction: column;
		align-items: stretch;
	}

	.wp-block-buttons.mdc-empilhar-mobile > .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons.mdc-empilhar-mobile .wp-block-button__link {
		width: 100%;
	}
}

/* ---------- Estados ---------- */
:where(.wp-element-button, .wp-block-button__link, button):is(:disabled, [aria-disabled="true"]) {
	opacity: var(--wp--custom--state--disabled-opacity, 0.5);
	cursor: not-allowed;
}

/* Classe "disabled" do WooCommerce (ex.: Comprar antes de escolher a variação): o botão continua clicável
 * e avisa o que falta, então o texto mantém contraste AA em vez de ficar transparente. */
:where(.wp-element-button, .wp-block-button__link, button).disabled:not(:disabled) {
	border-color: var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	opacity: 1;
	cursor: not-allowed;
}

:where(.wp-element-button, .wp-block-button__link, button):is([aria-busy="true"], .loading) {
	opacity: var(--wp--custom--state--loading-opacity, 0.7);
	cursor: progress;
}

/* ---------- Campos: 48 px ----------
 * Não vale dentro dos blocos Carrinho, Checkout e Minicarrinho: neles o WooCommerce
 * desenha os próprios campos (rótulo flutuante, seletor de quantidade) e o padding
 * do tema alargava o seletor de quantidade e empurrava o carrinho para fora da tela
 * no celular. A especificidade continua zero. */
:where(
	input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
	input[type="password"], input[type="search"], input[type="url"], input[type="date"],
	select, textarea
):not(:where(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .wp-block-woocommerce-mini-cart-contents) *) {
	box-sizing: border-box;
	min-height: var(--wp--custom--field--height, 3rem);
	padding: 0.5rem var(--wp--custom--field--padding-x, 0.875rem);
	border: var(--wp--custom--field--border-width, 1px) solid var(--wp--custom--field--border-color, var(--wp--preset--color--border));
	border-radius: var(--wp--custom--field--radius, 4px);
	background-color: var(--wp--custom--field--background, var(--wp--preset--color--base));
	color: var(--wp--preset--color--contrast);
	font: inherit;
	line-height: 1.4;
	transition: border-color var(--wp--custom--state--transition, 150ms ease), box-shadow var(--wp--custom--state--transition, 150ms ease);
}

/* ---------- Sistema de formulários: estados ----------
 * Mesmos estados em todos os formulários do tema (busca, Minha Conta, login, cadastro,
 * recuperação de senha, rastreio de pedido, formulários institucionais). Carrinho e
 * checkout aplicam os mesmos tokens nos campos do WooCommerce (blocks/woocommerce-*.css). */
:where(
	input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
	input[type="password"], input[type="search"], input[type="url"], input[type="date"],
	select, textarea
):not(:where(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .wp-block-woocommerce-mini-cart-contents) *):hover {
	border-color: var(--wp--custom--field--border-color-hover);
}

:where(
	input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
	input[type="password"], input[type="search"], input[type="url"], input[type="date"],
	select, textarea
):not(:where(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .wp-block-woocommerce-mini-cart-contents) *):focus {
	border-color: var(--wp--custom--field--border-color-focus);
	outline: none;
	box-shadow: var(--wp--custom--field--focus-ring);
}

:where(input, textarea)::placeholder {
	color: var(--wp--custom--field--label-color, var(--wp--preset--color--muted));
	opacity: 1;
}

/* Caixas de seleção e botões de opção nativos (formulários clássicos). */
:where(input[type="checkbox"], input[type="radio"]):not(:where(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .wp-block-woocommerce-mini-cart-contents) *) {
	width: var(--wp--custom--field--control-size, 1.25rem);
	height: var(--wp--custom--field--control-size, 1.25rem);
	accent-color: var(--wp--custom--field--control-checked, var(--wp--preset--color--primary));
}

/* Rótulos de formulários clássicos. */
:where(form label:not(.screen-reader-text)):not(:where(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .wp-block-woocommerce-mini-cart-contents) *) {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

:where(textarea) {
	min-height: var(--wp--custom--field--textarea-height, 8rem);
}

/* Campos de uma linha com altura exata (não só mínima), para alinhar lado a lado. */
:where(
	input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
	input[type="password"], input[type="search"], input[type="url"], input[type="date"],
	select:not([multiple])
):not(:where(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .wp-block-woocommerce-mini-cart-contents) *) {
	height: var(--wp--custom--field--height, 3rem);
}

/* Campo com erro (padrão do WordPress/WooCommerce: aria-invalid ou classe de erro do formulário). */
:where(input, select, textarea)[aria-invalid="true"],
.woocommerce-invalid :where(input, select, textarea) {
	border-color: var(--wp--custom--field--error-color, var(--wp--preset--color--error));
	box-shadow: inset 0 0 0 1px var(--wp--custom--field--error-color, var(--wp--preset--color--error));
}

/* ---------- Ícones e áreas clicáveis ---------- */
.mdc-icone {
	width: var(--wp--custom--icon--md, 1.25rem);
	height: var(--wp--custom--icon--md, 1.25rem);
}

.mdc-alvo-toque {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--touch-target, 44px);
	min-height: var(--wp--custom--touch-target, 44px);
}

/* Ícones sociais com área de toque de 44 px (o ícone continua do tamanho escolhido). */
.wp-block-social-links .wp-block-social-link-anchor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--touch-target, 44px);
	min-height: var(--wp--custom--touch-target, 44px);
}

/* ---------- Selos (badges) ---------- */
.is-style-mdc-selo,
.mdc-selo {
	display: inline-block;
	width: fit-content;
}

.mdc-selo {
	padding: var(--wp--custom--badge--padding-y) var(--wp--custom--badge--padding-x);
	border-radius: var(--wp--custom--badge--radius);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--custom--badge--font-size);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.6;
	text-transform: uppercase;
}

/* ---------- Seções ---------- */
.mdc-secao {
	padding-block: var(--wp--custom--section--padding);
}

.mdc-secao--compacta {
	padding-block: var(--wp--custom--section--padding-tight);
}

/* ---------- Página de auditoria do Design System (pattern design-system) ---------- */
.mdc-ds-secao {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
}

.mdc-ds-nota {
	color: var(--wp--preset--color--muted);
}

.wp-block-columns.mdc-ds-cores {
	flex-wrap: wrap !important;
}

.wp-block-columns.mdc-ds-cores > .wp-block-column {
	flex: 0 0 7rem !important;
}

.mdc-ds-cor__amostra {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
}

/* ---------- Submenus da navegação do computador (ex.: categorias em "Loja") ---------- */
.mdc-nav--desktop .wp-block-navigation__submenu-container {
	min-width: 14rem !important;
	padding: var(--wp--preset--spacing--20) 0 !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--base) !important;
	box-shadow: 0 16px 40px -20px color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
}

.mdc-nav--desktop .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1rem !important;
	font-size: var(--wp--preset--font-size--small);
}

.mdc-nav--desktop .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

.mdc-nav--desktop .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	top: calc(-1 * var(--wp--preset--spacing--20) - 1px);
	left: calc(100% - 0.25rem);
}

/* No menu do celular, subníveis com recuo e letra menor que o nível principal. */
.mdc-nav--mobile .wp-block-navigation__submenu-container {
	padding-top: 0 !important;
	font-size: 0.85em;
}

.mdc-nav--mobile .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large) !important;
}