/*
 * Base do tema Zafarie — escuro-primeiro.
 * Tokens vivem em theme.json e chegam aqui como custom properties.
 * Nada de valores crus: sempre var(--wp--...).
 */

/* ---------- Acessibilidade ---------- */

/*
 * Skip link: o core ja imprime <a class="skip-link screen-reader-text">
 * nos temas de bloco e cuida do mostrar-ao-focar. Aqui so trocamos as
 * cores para as da marca — nao reimplementamos o componente.
 *
 * O seletor precisa de 3 classes + elemento: a regra do core e
 * .skip-link.screen-reader-text:focus e sai inline no rodape, portanto
 * depois desta folha. Empatar na especificidade nao basta.
 */
a.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--roxo-acao);
	color: var(--wp--preset--color--branco);
	text-decoration: none;
	border-radius: var(--wp--custom--raio--medio);
	padding: 0.75rem 1.25rem;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
}

/*
 * Foco visivel. Em fundo escuro o roxo da marca (#2b045f) da 1,2:1 e
 * desaparece — o anel usa sempre o tom claro.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--roxo-claro);
	outline-offset: 2px;
	border-radius: var(--wp--custom--raio--pequeno);
}

/* Excecao: dentro de um bloco de fundo claro, o anel volta ao roxo de acao */
.has-branco-background-color :where(a, button, input, select):focus-visible,
.has-cinza-claro-background-color :where(a, button, input, select):focus-visible {
	outline-color: var(--wp--preset--color--roxo-acao);
}

/* Secao 9: respeitar quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Superficies ---------- */

/*
 * Fundo profundo da marca. O #2b045f nao serve como destaque sobre preto,
 * mas e exatamente a cor certa para um fundo de secao: e o papel que ele
 * tem no proprio design system, como fim do gradiente da marca.
 */
.zafarie-fundo-profundo {
	background:
		radial-gradient(120% 80% at 15% 0%, var(--wp--custom--roxo--800) 0%, transparent 60%),
		var(--wp--preset--color--preto);
}

.zafarie-superficie {
	background: var(--wp--preset--color--grafite);
	border: 1px solid var(--wp--preset--color--cinza-borda);
	border-radius: var(--wp--custom--raio--grande);
}

/* ---------- Trilha de navegacao ---------- */

.zafarie-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--cinza);
}

.zafarie-breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--wp--preset--color--cinza-borda);
}

.zafarie-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--cinza-claro);
	font-weight: 600;
}

/* ---------- Imagens ---------- */

/* Secao 9: sem CLS por imagem sem dimensao */
img,
video {
	max-width: 100%;
	height: auto;
}

/* ---------- Alvos de toque ---------- */

/* Secao 10.1: minimo de 44x44 px em area de toque */
@media (pointer: coarse) {
	.wp-block-navigation a,
	.wp-block-navigation button {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}

/* ---------- Formularios ---------- */

/*
 * Borda de campo e componente de interface: precisa de 3:1 contra o fundo
 * (WCAG 1.4.11). cinza-borda da 4,09:1 sobre preto.
 */
input:where([type="text"], [type="email"], [type="tel"], [type="url"], [type="search"], [type="number"]),
textarea,
select {
	border: 1px solid var(--wp--preset--color--cinza-borda);
	border-radius: var(--wp--custom--raio--medio);
	padding: 0.75rem 1rem;
	font-size: var(--wp--preset--font-size--base);
	font-family: inherit;
	background: var(--wp--preset--color--grafite);
	color: var(--wp--preset--color--cinza-claro);
	min-height: 44px;
}

input::placeholder,
textarea::placeholder {
	color: var(--wp--preset--color--cinza);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	border-color: var(--wp--preset--color--roxo-claro);
}

/* Estado de erro nao pode depender so de cor (WCAG 1.4.1): a mensagem
   carrega a informacao, a borda apenas reforca. */
[aria-invalid="true"] {
	border-color: #ff8a80;
}

/* ---------- Identidade no rodape (secao 6.2) ---------- */

.zf-rodape-identidade { max-width: 34rem; }

.zf-rodape-identidade__tagline {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--cinza-claro);
}

.zf-rodape-identidade__contatos,
.zf-rodape-identidade__perfis {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--pequeno);
}

.zf-rodape-identidade a { color: var(--wp--preset--color--roxo-claro); }
.zf-rodape-identidade a:hover { color: var(--wp--preset--color--branco); }

.zf-rodape-identidade__endereco {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--pequeno);
	font-style: normal;
	color: var(--wp--preset--color--cinza);
}

.zf-rodape-identidade__legal {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--cinza);
}

/* WCAG 2.2 (2.5.8): alvos de toque com no minimo 24px de altura. */
.zf-rodape-identidade a,
.zafarie-breadcrumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}