/* ============================================================
   EVE Theme — Utilities
   Classes utilitárias de propósito único.
   ============================================================ */

/* ── Visibilidade / Acessibilidade ───────────────────────── */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.hidden { display: none !important; }

.visible-mobile  { display: block; }
.hidden-mobile   { display: none; }

@media (min-width: 768px) {
	.visible-mobile { display: none; }
	.hidden-mobile  { display: block; }
}

/* ── Texto ───────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.font-heading  { font-family: var(--font-heading); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold); }

.text-primary { color: var(--color-primary); }
.text-accent  { color: var(--color-accent); }
.text-muted   { color: var(--color-text-muted); }
.text-white   { color: var(--color-white); }

/* ── Espaçamento ─────────────────────────────────────────── */
.mt-auto  { margin-top: auto; }
.mb-0     { margin-bottom: 0; }
.mb-4     { margin-bottom: var(--space-4); }
.mb-6     { margin-bottom: var(--space-6); }
.mb-8     { margin-bottom: var(--space-8); }
.mt-4     { margin-top: var(--space-4); }
.mt-6     { margin-top: var(--space-6); }
.mt-8     { margin-top: var(--space-8); }

/* ── Largura ─────────────────────────────────────────────── */
.w-full   { width: 100%; }
.max-w-prose { max-width: 65ch; }

/* ── Posição ─────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }

/* ── Overflow ────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }

/* ── Separador visual "pill" com cor de acento ───────────── */
.accent-line {
	display: block;
	width: 40px;
	height: 3px;
	background: var(--color-accent);
	border-radius: var(--radius-full);
	margin-bottom: var(--space-4);
}

.accent-line--center {
	margin-inline: auto;
}

/* ── Tag / Badge ─────────────────────────────────────────── */
.tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 0.2em 0.7em;
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	border-radius: var(--radius-sm);
	background: var(--color-primary-light);
	color: var(--color-primary);
	line-height: 1.5;
}

.tag--accent {
	background: rgba(61, 180, 124, 0.12);
	color: var(--color-accent-hover);
}

.tag--teal {
	background: rgba(26, 163, 154, 0.12);
	color: var(--color-secondary);
}

.tag--dark {
	background: rgba(16, 42, 67, 0.08);
	color: var(--color-deep-blue);
}

.tag--light {
	background: rgba(255, 255, 255, 0.15);
	color: var(--color-white);
}

/* ── Ícone wrapper ───────────────────────────────────────── */
.icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-lg);
	background: var(--color-primary-light);
	color: var(--color-primary);
	flex-shrink: 0;
}

.icon-box--sm {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-md);
}

.icon-box--lg {
	width: 64px;
	height: 64px;
	border-radius: var(--radius-xl);
}

.icon-box--dark {
	background: rgba(255,255,255,0.08);
	color: var(--color-white);
}

.icon-box--accent {
	background: rgba(61,180,124,0.12);
	color: var(--color-accent);
}

/* ── Animações de entrada ────────────────────────────────── */
.fade-in {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ── No-JS fallback ──────────────────────────────────────── */
.no-js .fade-in {
	opacity: 1;
	transform: none;
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
	.no-print { display: none !important; }
	.site-header,
	.site-footer,
	.breadcrumbs { display: none; }
	body { font-size: 12pt; color: #000; }
}