/*!
 * Mousas — Acessibilidade (foco visível, forced-colors, reduced-*, print)
 *
 * @author   Dante Testa <https://dantetesta.com.br>
 * @version  2.0.0
 * @since    2026-04-17 15:46:00 UTC-03
 */

/* =============================================================================
 * 1. Foco visível — reforçado e consistente em todas as rotas de input
 * ========================================================================== */

*:focus { outline: none; } /* remove outline default do browser (feio) */

*:focus-visible {
	outline: 3px solid color-mix(in oklab, var(--mousas-accent) 75%, transparent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Inputs/textarea/select com foco mais evidente */
.mousas-field__input:focus-visible,
.mousas-field__textarea:focus-visible,
.mousas-field__select:focus-visible,
.mousas-search__input:focus-visible {
	outline: 3px solid color-mix(in oklab, var(--mousas-primary) 55%, transparent);
	outline-offset: 0;
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--mousas-primary) 15%, transparent);
}

/* Botões com foco diferenciado por contraste */
.mousas-btn:focus-visible {
	outline: 3px solid color-mix(in oklab, var(--mousas-accent) 80%, transparent);
	outline-offset: 3px;
	box-shadow: var(--mousas-shadow-md);
}

/* =============================================================================
 * 2. Forced colors (Windows High Contrast + modo de alto contraste do SO)
 * ========================================================================== */

@media (forced-colors: active) {
	.mousas-btn,
	.mousas-card,
	.mousas-card-post,
	.mousas-pilar,
	.mousas-publico,
	.mousas-card-plano,
	.mousas-canal,
	.mousas-faq__item,
	.mousas-field__input,
	.mousas-field__textarea,
	.mousas-field__select {
		border: 1px solid CanvasText;
		forced-color-adjust: none;
	}

	.mousas-btn--primary,
	.mousas-btn--accent,
	.mousas-btn--dark {
		background: Highlight;
		color: HighlightText;
		border-color: HighlightText;
	}

	.mousas-ico { fill: CanvasText; }
}

/* =============================================================================
 * 3. Reduced motion — desativa todas as animações não-essenciais
 * ========================================================================== */

@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;
	}

	.mousas-whatsapp-float { animation: none !important; }
	[data-mousas-reveal] { opacity: 1 !important; transform: none !important; }
}

/* =============================================================================
 * 4. Reduced transparency — substitui backdrop-filter por fundo sólido
 * ========================================================================== */

@media (prefers-reduced-transparency: reduce) {
	.mousas-header {
		background: var(--mousas-white);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.mousas-mockup-phone__item { background: rgba(30, 37, 54, 0.95); backdrop-filter: none; }
}

/* =============================================================================
 * 5. Target mínimo de toque (WCAG 2.5.5, 44×44 CSS px)
 * ========================================================================== */

.mousas-menu__link,
.mousas-btn,
.mousas-chip,
.mousas-share__btn,
.mousas-pagination .page-numbers {
	min-height: 44px;
}

.mousas-menu-toggle { min-width: 44px; min-height: 44px; }

/* =============================================================================
 * 6. Print — layout limpo para impressão
 * ========================================================================== */

@media print {
	.mousas-header,
	.mousas-footer,
	.mousas-whatsapp-float,
	.mousas-skip-link,
	.mousas-nav__cta,
	.mousas-share,
	[data-mousas-reveal] { display: none !important; }

	body { color: #000; background: #fff; font-size: 11pt; }

	a { color: #000; text-decoration: underline; }
	a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #333; }
	a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; }

	.mousas-btn {
		border: 1px solid #000;
		background: #fff;
		color: #000;
		box-shadow: none;
		padding: 0.25rem 0.6rem;
		min-height: auto;
	}

	.mousas-section,
	.mousas-card,
	.mousas-card-plano,
	.mousas-post,
	.mousas-page-hero { page-break-inside: avoid; }

	h1, h2, h3, h4 { page-break-after: avoid; }

	.mousas-container { max-width: 100%; padding: 0; }
	.mousas-prose img { max-width: 100%; page-break-inside: avoid; }
}