/*
	Guiow — estilos complementares ao Tailwind (CDN).
	Apenas o que NÃO pode ser expresso por classes utilitárias:
	- defaults globais leves (smooth scroll, focus visível, mídia responsiva)
	- skip link de acessibilidade
	- ajustes do Material Symbols Outlined
	- fundo decorativo do hero
	- regras de impressão e prefers-reduced-motion
*/

html {
	scroll-behavior: smooth;
}

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

a {
	color: inherit;
}

::selection {
	background: #00a5ee;
	color: #ffffff;
}

:focus-visible {
	outline: 3px solid #f59e0b;
	outline-offset: 3px;
}

/* Link para usuários de teclado pularem direto ao conteúdo */
.skip-link {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 9999;
	transform: translateY(-150%);
	border-radius: 999px;
	background: #00a5ee;
	color: #ffffff;
	font-weight: 700;
	padding: 0.75rem 1rem;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
	transition: transform 0.2s ease;
}

.skip-link:focus {
	transform: translateY(0);
}

/* Material Symbols: peso/preenchimento padrão e variante .fill */
.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.fill {
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Fundo decorativo do hero (usado em index, sobre, cadastrar) */
.guiow-hero-bg {
	background:
		radial-gradient(circle at 18% 15%, rgba(0, 165, 238, 0.45), transparent 30rem),
		radial-gradient(circle at 82% 20%, rgba(92, 163, 213, 0.35), transparent 26rem),
		linear-gradient(135deg, #102331 0%, #1a1c1e 58%, #0b1720 100%);
}

/* Reduz animações para usuários com essa preferência no sistema */
@media (prefers-reduced-motion: reduce) {

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

/* Ajustes para impressão: foco em conteúdo do comércio, sem chrome do site */
@media print {

	.skip-link,
	header[role="banner"],
	header.sticky,
	footer,
	nav,
	[aria-label="Publicidade"],
	[data-copy],
	[data-share],
	.guiow-hero-bg,
	iframe {
		display: none !important;
	}

	body {
		background: #ffffff !important;
		color: #000000 !important;
		font-size: 11pt;
	}

	main {
		max-width: 100% !important;
	}

	article,
	section {
		page-break-inside: avoid;
	}

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

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 80%;
		word-break: break-all;
	}

	a[href^="#"]::after,
	a[href^="javascript:"]::after {
		content: "";
	}
}