/*
Theme Name: ARPAN
Theme URI: https://arpan.com.br/
Author: ARPAN
Description: Tema institucional personalizado da ARPAN — Associação dos Revendedores de Produtos Agropecuários do Nordeste. Desenvolvido especificamente para este projeto, sem tema pai, page builder ou framework visual pronto.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: arpan
*/

/*
 * Fundação do sistema visual V1 — fonte de verdade: /specs/design.md
 * Tokens e estilos globais. O layout de cada seção/página fica em assets/css/.
 */

:root {
	/* Paleta aprovada V1 (specs/design.md) */
	--color-verde-arpan: #008D43;
	--color-verde-profundo: #073D2B;
	--color-verde-suave: #E7F1EA;
	--color-laranja-arpan: #F58A0A;
	--color-off-white: #F5F3ED;
	--color-branco: #FFFFFF;
	--color-grafite: #18201C;
	--color-cinza-esverdeado: #66716B;
	--color-linha: #D9DED9;

	/* Papéis semânticos */
	--color-bg: var(--color-off-white);
	--color-text: var(--color-grafite);
	--color-text-muted: var(--color-cinza-esverdeado);
	--color-border: var(--color-linha);
	--color-brand: var(--color-verde-arpan);
	--color-brand-deep: var(--color-verde-profundo);
	--color-accent: var(--color-laranja-arpan);

	/* Tipografia aprovada V1 */
	--font-heading: "Manrope", system-ui, sans-serif;
	--font-body: "Inter", system-ui, sans-serif;

	/* Escala tipográfica fluida — faixas iniciais (specs/design.md) */
	--font-size-hero: clamp(2.75rem, 2rem + 3.5vw, 6.5rem);
	--font-size-h2: clamp(2rem, 1.6rem + 1.8vw, 4.5rem);
	--font-size-h3: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
	--font-size-editorial: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
	--font-size-body: clamp(1rem, 0.95rem + 0.15vw, 1.125rem);
	--font-size-label: clamp(0.75rem, 0.72rem + 0.1vw, 0.875rem);

	/* Grid e container — V1 */
	--container-max: 1440px;
	--container-pad-desktop: clamp(48px, 4vw, 72px);
	--container-pad-notebook: 40px;
	--container-pad-tablet: 28px;
	--container-pad-mobile: 20px;

	/* Espaçamento — base 8px (V1) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 80px;
	--space-10: 96px;
	--space-11: 128px;
	--space-12: 160px;
	--section-space-desktop: clamp(120px, 10vw, 160px);
	--section-space-mobile: clamp(72px, 18vw, 96px);

	/* Radius — V1 */
	--radius-button: 8px;
	--radius-card: 12px;
	--radius-input: 8px;

	/* Movimento — timings V1 */
	--motion-micro: 200ms;
	--motion-reveal: 700ms;
	--motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* Header — altura aprovada (specs/design.md, faixa 80–96px); V2 usa o
	   topo da faixa para acompanhar a logo maior (ver memoria.md) */
	--header-height: 96px;
	--header-height-mobile: 80px;
}

/* Reset leve / normalização (não é framework CSS) */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	color: var(--color-text);
	margin: 0 0 var(--space-4);
	line-height: 1.15;
}

p {
	margin: 0 0 var(--space-4);
}

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

a {
	color: inherit;
}

/* Container base — grid V1 */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-mobile);
}

@media (min-width: 768px) {
	.container {
		padding-inline: var(--container-pad-tablet);
	}
}

@media (min-width: 1024px) {
	.container {
		padding-inline: var(--container-pad-notebook);
	}
}

@media (min-width: 1440px) {
	.container {
		padding-inline: var(--container-pad-desktop);
	}
}

/* Acessibilidade global essencial */
:focus-visible {
	outline: 2px solid var(--color-brand-deep);
	outline-offset: 2px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Botões — sistema aprovado V1 (specs/design.md) */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	padding: 16px 32px;
	border-radius: var(--radius-button);
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background-color var(--motion-micro) var(--motion-ease),
		color var(--motion-micro) var(--motion-ease),
		border-color var(--motion-micro) var(--motion-ease);
}

.button--primary {
	background: var(--color-brand-deep);
	color: var(--color-branco);
}

.button--primary:hover,
.button--primary:focus-visible {
	background: var(--color-brand);
}

.button--secondary {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-border);
	padding-inline: 20px;
}

.button--secondary:hover,
.button--secondary:focus-visible {
	border-color: var(--color-brand-deep);
	color: var(--color-brand-deep);
}

.button--secondary__arrow {
	display: inline-block;
	transition: transform var(--motion-micro) var(--motion-ease);
}

.button--secondary:hover .button--secondary__arrow,
.button--secondary:focus-visible .button--secondary__arrow {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.button,
	.button--secondary__arrow {
		transition: none;
	}
}

/* ============================================================
   POLIMENTO PREMIUM — refinamentos globais
   ------------------------------------------------------------
   Ajustes de acabamento aplicados a todo o site. Não alteram estrutura,
   paleta, tipografia ou composição aprovadas — corrigem detalhes que
   reduziam a qualidade percebida. Ver memoria.md.
   ============================================================ */

/*
 * Equilíbrio de linhas em títulos.
 *
 * BUG CORRIGIDO: na página Associados, a headline "Busque uma empresa
 * associada." quebrava deixando "associada." sozinha na segunda linha — o
 * que lia como um fragmento solto/cortado antes do campo de busca. A causa
 * não era clipping nem overflow: era quebra de linha desequilibrada.
 *
 * `text-wrap: balance` distribui as linhas de forma equilibrada e elimina
 * palavras órfãs em títulos curtos. Onde não houver suporte, o
 * comportamento anterior permanece — nada quebra.
 */
h1, h2, h3,
.hero__headline,
.about__headline,
.atuacao__headline,
.reversa__headline,
.presenca__headline,
.associados__headline,
.assoc-hero__headline,
.assoc-rede__statement,
.assoc-diretorio__headline,
.lr-hero__headline,
.lr-ciclo__headline,
.blogp-abertura__headline,
.contato-abertura__headline,
.contato-local__headline {
	text-wrap: balance;
}

/* Parágrafos: evita a última linha com uma única palavra. */
p {
	text-wrap: pretty;
}

/*
 * Sublinhado tipográfico melhor em links de corpo de texto: descendentes
 * (g, p, q) deixam de ser cortados pela linha.
 */
a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
}

/*
 * Foco visível consistente em todo o site. O padrão do navegador variava
 * de elemento para elemento; aqui fica um único tratamento, com offset,
 * legível sobre superfícies claras.
 */
:focus-visible {
	outline: 2px solid var(--color-brand-deep);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Botões: microinteração de feedback ao pressionar — reforça acabamento
   sem chamar atenção. */
.button {
	will-change: transform;
}

.button:active {
	transform: translateY(1px);
}

/*
 * Imagens dentro de molduras nunca devem "vazar" antes do radius ser
 * aplicado nem herdar o baseline de inline.
 */
img {
	vertical-align: middle;
}

/* Seleção de texto na identidade da marca. */
::selection {
	background: var(--color-brand-deep);
	color: var(--color-off-white);
}

@media (prefers-reduced-motion: reduce) {
	.button:active {
		transform: none;
	}
}