/*!
 * Spirit Menu — header + painel lateral. Author: Lui.
 * Funciona sozinho: tokens com fallback; tipografia usa as fontes do spirit-core quando ativo.
 */

.sp-header,
.sp-menu,
.sp-header-spacer {
	--_yellow: var(--sp-yellow, #FAFA2F);
	--_ink: var(--sp-ink, #181818);
	--_display: var(--sp-font-display, "Spirit Display", "Archivo", "Arial Narrow", Arial, sans-serif);
	--_ease: var(--sp-ease, cubic-bezier(.22, 1, .36, 1));
	--_ease-io: var(--sp-ease-in-out, cubic-bezier(.65, 0, .35, 1));
	--_fast: var(--sp-dur-fast, 300ms);
	--_dur: var(--sp-dur, 600ms);
	--_slow: var(--sp-dur-slow, 1200ms);
	--_admin: var(--wp-admin--admin-bar--height, 0px);
	/* Tamanhos (docs/MOTION.md): 96 desktop / 72 tablet / 64 mobile; compacto 72 */
	--_h: 96px;
	--_h-stuck: 72px;
	--_logo-h: 44px;
	--_logo-h-stuck: 36px;
	--_burger: 42px;
	--_cta-h: 40px;
	--_pad: var(--sp-gutter, clamp(20px, 7vw, 135px));
}

/* Tipografia com fallback (se o spirit-core não estiver ativo) */
.sp-header .sp-display,
.sp-menu .sp-display {
	font-family: var(--_display);
	text-transform: uppercase;
	font-weight: var(--sp-w-black, 850);
	word-spacing: .08em;
	letter-spacing: 0;
}
.sp-header .sp-f-narrow,
.sp-menu .sp-f-narrow { font-stretch: var(--sp-stretch-narrow, 68%); }
.sp-header .sp-f-normal,
.sp-menu .sp-f-normal { font-stretch: var(--sp-stretch-normal, 86%); }
.sp-header .sp-f-extended,
.sp-menu .sp-f-extended { font-stretch: var(--sp-stretch-extended, 128%); }

.sp-header .sp-sr-only,
.sp-menu .sp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ================= HEADER ================= */
.sp-header {
	--_fg: var(--_ink);
	--_bg: var(--_yellow);
	position: absolute;
	top: var(--_admin);
	left: 0;
	right: 0;
	z-index: 1000;
	color: var(--_fg);
	background-color: var(--_bg);
	transition:
		background-color var(--_dur) var(--_ease),
		color var(--_fast) ease,
		transform var(--_dur) var(--_ease),
		box-shadow var(--_dur) ease;
}
/* Com "header fixo" ligado o header já nasce fixo; ao rolar só compacta (sem pular). */
.sp-header--sticky { position: fixed; }
.sp-header--overlay {
	--_fg: var(--_yellow);
	--_bg: transparent;
}

.sp-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--_h);
	padding: 0 var(--_pad);
	transition: height var(--_dur) var(--_ease);
}

.sp-header__logo {
	display: block;
	flex: none;
	height: var(--_logo-h);
	color: inherit;
	line-height: 0;
	text-decoration: none;
	transform-origin: 0 50%;
	transition: height var(--_dur) var(--_ease), transform var(--_dur) var(--_ease);
}
.sp-header__logo:hover { transform: rotate(-3deg); }
.sp-header__logo-svg,
.sp-header__logo-img {
	display: block;
	width: auto;
	height: 100%;
}
.sp-header__logo-img--light { display: none; }
.sp-header--overlay .sp-header__logo-img--dark:not(.sp-header__logo-img--light) { display: none; }
.sp-header--overlay .sp-header__logo-img--light { display: block; }

.sp-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 48px);
}

/* Botão GET A QUOTE: contorno; o fundo preenche da esquerda para a direita (lento) */
.sp-header__cta,
.sp-menu__cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: var(--_cta-h);
	padding: 0 1.45em;
	border: 2px solid currentColor;
	border-radius: 0;
	color: inherit;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	background: transparent;
	transition: color var(--_dur) var(--_ease);
}
.sp-header__cta::before,
.sp-menu__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--_ink);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform var(--_dur) var(--_ease);
}
.sp-header__cta:hover::before,
.sp-header__cta:focus-visible::before,
.sp-menu__cta:hover::before,
.sp-menu__cta:focus-visible::before {
	transform: scaleX(1);
	transform-origin: 0 50%;
}
.sp-header__cta:hover,
.sp-header__cta:focus-visible { color: var(--_yellow); }
.sp-header--overlay .sp-header__cta::before,
.sp-header--overlay.is-stuck .sp-header__cta::before,
.sp-menu__cta::before { background: var(--_yellow); }
.sp-header--overlay .sp-header__cta:hover,
.sp-header--overlay .sp-header__cta:focus-visible,
.sp-menu__cta:hover,
.sp-menu__cta:focus-visible { color: var(--_ink); }

/* Ícone de 3 círculos (seletores com .sp-header para vencer o reset de <button> do tema) */
.sp-header .sp-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	box-sizing: border-box;
	width: var(--_burger);
	height: var(--_burger);
	min-width: 0;
	position: relative;
	margin: 0 calc(var(--_burger) * -.12) 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: inherit;
	line-height: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* Área de toque >= 44x44 sem mudar o ícone */
.sp-header .sp-burger::after {
	content: "";
	position: absolute;
	inset: min(0px, calc((var(--_burger) - 44px) / 2));
}
.sp-header .sp-burger:hover,
.sp-header .sp-burger:focus,
.sp-header .sp-burger:active {
	background: transparent;
	color: inherit;
	border: 0;
}
.sp-header .sp-burger__icon {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.sp-burger__c {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.6;
	transform-origin: 24px 24px;
	transition: transform var(--_dur) var(--_ease);
}
.sp-burger__chain {
	transform-origin: 24px 24px;
	transition: transform var(--_slow) var(--_ease);
}
/* Fechado: diagonal. Aberto: gira -45° e fica horizontal. Hover: os círculos se afastam e giram um pouco. */
.sp-burger__c--1 { transform: translate(-10.3px, -10.3px); }
.sp-burger__c--3 { transform: translate(10.3px, 10.3px); }
.sp-burger:hover .sp-burger__c--1 { transform: translate(-12.2px, -12.2px); }
.sp-burger:hover .sp-burger__c--3 { transform: translate(12.2px, 12.2px); }
.sp-burger:hover .sp-burger__c--2 { transform: scale(.86); }
.sp-burger:hover .sp-burger__chain { transform: rotate(-14deg); }
.sp-burger[aria-expanded="true"] .sp-burger__chain,
.sp-burger[aria-expanded="true"]:hover .sp-burger__chain { transform: rotate(-45deg); }

.sp-header :focus-visible,
.sp-menu :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Espaçador do modo sólido: mesma altura do header (as variáveis também valem nele) */
.sp-header-spacer { height: var(--_h); }

/* Ao rolar: compacto e sólido, com transição suave */
.sp-header.is-stuck { box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.sp-header.is-stuck .sp-header__bar { height: var(--_h-stuck); }
.sp-header.is-stuck .sp-header__logo { height: var(--_logo-h-stuck); }
.sp-header--overlay.is-stuck { --_bg: var(--_ink); box-shadow: 0 1px 0 rgba(250, 250, 47, .12); }
.sp-header.is-stuck.is-hidden:not(.is-menu-open) { transform: translateY(calc(-100% - var(--_admin) - 2px)); }

/* ================= PAINEL ================= */
.sp-menu {
	position: fixed;
	inset: 0;
	z-index: 999;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear var(--_dur);
}
.sp-menu.is-open {
	visibility: visible;
	pointer-events: auto;
	transition: none;
}

.sp-menu__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(24, 24, 24, .38);
	opacity: 0;
	transition: opacity var(--_dur) ease;
}
.sp-menu.is-open .sp-menu__backdrop { opacity: 1; }

.sp-menu__panel {
	--_top: calc(var(--_admin) + var(--_h));
	position: absolute;
	top: var(--_top);
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: max(32vw, 420px);
	max-width: 100%;
	padding: clamp(28px, 3.1vw, 60px) var(--_pad) clamp(28px, 3.4vw, 64px) clamp(28px, 3.1vw, 60px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--_ink);
	color: var(--_yellow);
	border-left: 2px solid var(--_yellow);
	transform: translateX(101%);
	transition: transform var(--_dur) var(--_ease-io);
	will-change: transform;
}
.sp-menu.is-open .sp-menu__panel {
	transform: none;
	transition: transform 900ms var(--_ease);
}
/* Overlay: painel ocupa a altura toda, header transparente fica por cima */
.sp-menu--overlay .sp-menu__panel {
	top: var(--_admin);
	padding-top: calc(var(--_h) + clamp(16px, 2vw, 40px));
}
.sp-header.is-stuck ~ .sp-menu--solid .sp-menu__panel { --_top: calc(var(--_admin) + var(--_h-stuck)); }
.sp-header.is-stuck ~ .sp-menu--overlay .sp-menu__panel { padding-top: calc(var(--_h-stuck) + clamp(16px, 2vw, 40px)); }

.sp-menu__panel:focus { outline: none; }
.sp-menu__nav { flex: 1 0 auto; display: flex; flex-direction: column; }

.sp-menu__list,
.sp-menu__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sp-menu__list {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.1vw, 20px);
}
/* Itens sem submenu depois de um grupo com submenu descem para a base (como no layout) */
.sp-menu__item--parent + .sp-menu__item:not(.sp-menu__item--parent) { margin-top: auto; padding-top: 32px; }
.sp-menu__item--parent { margin-bottom: clamp(8px, 1vw, 20px); }

.sp-menu__link,
.sp-menu__sublink {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	color: inherit;
	font-size: clamp(26px, 2.08vw, 40px);
	line-height: 1.02;
	text-decoration: none;
	transition: transform var(--_dur) var(--_ease);
}
.sp-menu__link { flex-direction: column; align-items: flex-start; gap: .28em; }
.sp-menu__link:hover,
.sp-menu__link:focus-visible,
.sp-menu__sublink:hover,
.sp-menu__sublink:focus-visible { transform: translateX(12px); }
.sp-menu__label-row { display: inline-flex; align-items: center; gap: .3em; }
.sp-menu__label,
.sp-menu__text {
	background: linear-gradient(currentColor, currentColor) 100% 100% / 0 .09em no-repeat;
	transition: background-size var(--_dur) var(--_ease);
}
.sp-menu__link:hover .sp-menu__label,
.sp-menu__link:focus-visible .sp-menu__label,
.sp-menu__sublink:hover .sp-menu__text,
.sp-menu__sublink:focus-visible .sp-menu__text,
.sp-menu__link.is-current .sp-menu__label,
.sp-menu__sublink.is-current .sp-menu__text {
	background-size: 100% .09em;
	background-position: 0 100%;
}

/* Seta que surge no hover */
.sp-menu__go {
	width: .7em;
	height: .7em;
	flex: none;
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity var(--_dur) var(--_ease), transform var(--_dur) var(--_ease);
}
.sp-menu__sublink:hover .sp-menu__go,
.sp-menu__sublink:focus-visible .sp-menu__go,
.sp-menu__link:hover .sp-menu__go,
.sp-menu__link:focus-visible .sp-menu__go { opacity: 1; transform: none; }

.sp-menu__arrow {
	width: 1.18em;
	height: 1.18em;
	transition: transform var(--_dur) var(--_ease);
}
.sp-menu__link:hover .sp-menu__arrow { transform: rotate(-45deg); }

.sp-menu__sub {
	display: flex;
	flex-direction: column;
	gap: .08em;
	margin-top: .5em;
}
.sp-menu__sublink { font-size: clamp(24px, 2.08vw, 40px); }

.sp-menu__footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
	margin-top: clamp(28px, 3vw, 56px);
}
.sp-menu__cta { display: none; font-size: 16px; }
.sp-menu__social {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	--sp-social-size: 30px;
}
.sp-menu__social li { margin: 0; }
.sp-menu__social a { display: inline-flex; color: inherit; font-size: var(--sp-social-size); line-height: 0; }
.sp-menu__social svg { width: 1em; height: 1em; fill: currentColor; }
.sp-menu__seal {
	width: clamp(140px, 10.6vw, 204px);
	line-height: 0;
}
.sp-menu__seal-svg,
.sp-menu__seal-img { width: 100%; height: auto; }

/* Entrada em sequência */
.sp-menu__item,
.sp-menu__subitem,
.sp-menu__footer {
	opacity: 0;
	transform: translateX(36px);
	transition: opacity var(--_fast) ease, transform var(--_fast) ease;
}
.sp-menu.is-open .sp-menu__item,
.sp-menu.is-open .sp-menu__subitem,
.sp-menu.is-open .sp-menu__footer {
	opacity: 1;
	transform: none;
	transition: opacity 900ms ease calc(.28s + var(--i, 0) * .085s), transform var(--_slow) var(--_ease) calc(.28s + var(--i, 0) * .085s);
}

/* Travar rolagem */
html.sp-menu-lock,
html.sp-menu-lock body { overflow: hidden; }

/* ================= RESPONSIVO ================= */
@media (max-width: 1024px) {
	html:root { --sp-header-h: 72px; }
	.sp-header,
	.sp-menu,
	.sp-header-spacer { --_h: 72px; --_h-stuck: 64px; --_logo-h: 36px; --_logo-h-stuck: 32px; --_burger: 40px; --_cta-h: 36px; }
	.sp-menu__panel { width: min(62vw, 560px); }
	.sp-header__cta { font-size: 14px; }
}
@media (max-width: 700px) {
	html:root { --sp-header-h: 64px; }
	.sp-header,
	.sp-menu,
	.sp-header-spacer { --_h: 64px; --_h-stuck: 56px; --_logo-h: 32px; --_logo-h-stuck: 28px; --_burger: 38px; --_cta-h: 32px; --_pad: 20px; }
	.sp-menu__panel {
		width: 100%;
		border-left: 0;
		padding-left: var(--_pad);
	}
	.sp-menu__link,
	.sp-menu__sublink { font-size: clamp(26px, 8.4vw, 40px); }
	.sp-menu__cta { display: inline-flex; }
	.sp-menu__backdrop { display: none; }
	.sp-header__cta { font-size: 12px; padding: 0 1em; }
	.sp-header__actions { gap: 14px; }
}
@media (max-width: 420px) {
	.sp-header__cta { display: none; }
}
@media (max-width: 600px) {
	/* A barra de admin não é fixa no mobile: o header fixo vai para o topo */
	.sp-header.is-stuck { top: 0; }
	.sp-header.is-stuck ~ .sp-menu--solid .sp-menu__panel { --_top: var(--_h-stuck); }
	.sp-header.is-stuck ~ .sp-menu--overlay .sp-menu__panel { top: 0; }
}
@media (min-width: 421px) and (max-width: 700px) {
	.sp-menu--header-cta .sp-menu__cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sp-header,
	.sp-header *,
	.sp-menu,
	.sp-menu * {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
		animation: none !important;
	}
}