/* Grupo Paranã — CSS custom (complementa o Tailwind CDN).
   Foco: base tipográfica, animações de scroll reveal e conteúdo editorial. */

:root {
	--gp-navy: #153A6B;
	--gp-gold: #F5A800;
}

html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', system-ui, sans-serif; }
h1, h2, h3, h4, .font-display { font-family: 'DM Sans', system-ui, sans-serif; letter-spacing: -0.02em; }

/* Seleção com a cor da marca */
::selection { background: var(--gp-gold); color: #0b1e39; }

/* Foco visível e acessível */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 2px solid var(--gp-gold);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Header: sombra sutil ao rolar */
[data-header].is-scrolled {
	box-shadow: 0 8px 30px -18px rgba(11, 30, 57, .45);
}

/* Scroll reveal */
[data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s ease, transform .7s ease;
	transition-delay: var(--d, 0ms);
}
[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* Conteúdo editorial (páginas/posts) */
.gp-prose { color: #3a3f47; line-height: 1.75; font-size: 1.075rem; }
.gp-prose > * + * { margin-top: 1.15em; }
.gp-prose h2 { font-family: 'DM Sans', sans-serif; color: var(--gp-navy); font-size: 1.6rem; font-weight: 700; margin-top: 1.8em; line-height: 1.25; }
.gp-prose h3 { font-family: 'DM Sans', sans-serif; color: var(--gp-navy); font-size: 1.25rem; font-weight: 600; margin-top: 1.4em; }
.gp-prose a { color: var(--gp-navy); text-decoration: underline; text-decoration-color: var(--gp-gold); text-underline-offset: 3px; }
.gp-prose a:hover { color: #d68f00; }
.gp-prose ul { list-style: none; padding: 0; }
.gp-prose ul li { position: relative; padding-left: 1.6rem; }
.gp-prose ul li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: .5rem; height: .5rem; border-radius: 9999px; background: var(--gp-gold);
}
.gp-prose ol { padding-left: 1.3rem; }
.gp-prose ol li { padding-left: .3rem; }
.gp-prose blockquote {
	border-left: 4px solid var(--gp-gold);
	padding: .4rem 0 .4rem 1.2rem;
	font-size: 1.15rem; color: var(--gp-navy); font-style: italic;
}
.gp-prose img { border-radius: 1rem; }
.gp-prose strong { color: var(--gp-navy); }

/* Navegação — link ativo */
.gp-menu a.is-current { color: var(--gp-gold); }

/* Submenu suspenso (desktop) */
.gp-desktop-nav .menu-item-has-children { position: relative; }
.gp-desktop-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	margin-top: .4rem;
	padding: .4rem;
	background: #fff;
	border: 1px solid rgba(21, 58, 107, .08);
	border-radius: 1rem;
	box-shadow: 0 20px 45px -20px rgba(11, 30, 57, .45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 50;
}
.gp-desktop-nav .menu-item-has-children:hover > .sub-menu,
.gp-desktop-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.gp-desktop-nav .menu-item-has-children:hover > a .gp-caret {
	transform: rotate(180deg);
}
.gp-desktop-nav .gp-caret { transition: transform .18s ease; }

/* Submenu no mobile (estático, recuado) */
.gp-mobile-nav .sub-menu { margin: .1rem 0 .3rem; }
.gp-mobile-nav .gp-caret { display: none; }

/* Campos de formulário */
.gp-field {
	width: 100%;
	border: 1px solid rgba(21, 58, 107, .18);
	border-radius: .75rem;
	padding: .8rem 1rem;
	background: #fff;
	font-size: 1rem;
	transition: border-color .2s, box-shadow .2s;
}
.gp-field:focus {
	outline: none;
	border-color: var(--gp-navy);
	box-shadow: 0 0 0 3px rgba(21, 58, 107, .12);
}
.gp-label { font-weight: 600; color: var(--gp-navy); font-size: .9rem; display: block; margin-bottom: .4rem; }

/* Carrossel de imagens */
.gp-carousel-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.gp-carousel-track::-webkit-scrollbar { display: none; }
.gp-carousel-track > * {
	flex: 0 0 100%;
	scroll-snap-align: start;
}
.gp-carousel-dot {
	width: .5rem;
	height: .5rem;
	border-radius: 9999px;
	background: rgba(21, 58, 107, .18);
	transition: background .2s, transform .2s;
}
.gp-carousel-dot.is-active {
	background: var(--gp-gold);
	transform: scale(1.25);
}