/* =============================================================
   VISIA — Header / Footer / Nav / Eye toggle / Preloader
   Component CSS for the template parts (Phase 3).
   ============================================================= */

/* ===================== HEADER ===================== */
.vz-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 200;
	color: var(--c-eye);
	transition: background .4s var(--ease-confident), color .4s, border-color .4s;
	background: transparent;
	border-bottom: 1.5px solid transparent;
	max-width: 100vw;
}
.vz-header.is-solid {
	color: var(--ink);
	background: color-mix(in oklab, var(--surface) 86%, transparent);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1.5px solid var(--line-soft);
}
/* Inner pages have no dark hero, so text is ink from the start. */
body:not(.vz-front) .vz-header { color: var(--ink); }

.vz-header .wp-block-group { min-height: 74px; }
.vz-header .wp-block-site-logo img { height: 26px; width: auto; }

/* Nav */
.vz-header .wp-block-navigation {
	font: 500 12px/1 var(--font-body);
	letter-spacing: .15em;
	text-transform: uppercase;
}
.vz-header .wp-block-navigation__container {
	gap: 30px;
}
.vz-header .wp-block-navigation a {
	color: inherit;
	opacity: .92;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	transition: border-color .25s var(--ease-confident);
}
.vz-header .wp-block-navigation a:hover { border-bottom-color: var(--c-crea); text-decoration: none; }

.wp-block-navigation__responsive-container.is-menu-open { height: 100vh; }

/* WhatsApp CTA */
.vz-header .vz-cta-wa a {
	background: var(--c-crea);
	color: var(--c-eye);
	border: none; border-radius: 0;
	padding: 12px 20px;
	font: 400 16px/1 var(--font-display);
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: background var(--dur-fast) var(--ease-confident);
}
.vz-header .vz-cta-wa a:hover { background: var(--c-pupila); }

/* Header fit at mid widths (before the nav collapses to its mobile overlay). */
@media (max-width: 1200px) {
	.vz-header .wp-block-navigation__container { gap: 20px; }
}
@media (max-width: 1040px) {
	.vz-header .vz-cta-wa { display: none; }
	.vz-header .wp-block-navigation__container { gap: 16px; }
}

/* ===================== EYE TOGGLE ===================== */
.vz-eye {
	display: inline-flex; align-items: center;
	background: transparent; border: none; padding: 6px;
	color: currentColor; cursor: pointer;
}
.vz-eye svg { display: block; overflow: visible; }
.vz-eye .vz-eye-pupil { fill: var(--c-crea); transition: transform .3s var(--ease-confident); transform-origin: center; transform-box: fill-box; }
.vz-eye .vz-eye-spec { fill: var(--surface); }
.vz-eye .vz-eye-ray { stroke: currentColor; stroke-width: 2; opacity: 1; transition: opacity .3s; }
/* Dark mode: pupil contracts, rays hide (matches prototype). */
body.dark .vz-eye .vz-eye-pupil { transform: scale(.72); }
body.dark .vz-eye .vz-eye-ray { opacity: 0; }

/* ===================== FOOTER ===================== */
.vz-footer h2 { font-family: var(--font-display); }
.vz-footer a { color: var(--c-pupila); }
.vz-footer .wp-block-site-title { font: 400 40px/1 var(--font-display); text-transform: uppercase; }
.vz-footer .wp-block-site-title a { text-decoration: none; }
.vz-footer .wp-block-social-links .wp-social-link { border: 1px solid var(--c-pupila); border-radius: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-confident), color var(--dur-fast) var(--ease-confident); }

/* ===================== PRELOADER (page transitions) ===================== */
.vz-preloader {
	position: fixed; inset: 0; z-index: 9500;
	display: flex; pointer-events: none;
}
.vz-preloader > span {
	flex: 1;
	transform: translateY(101%);
}
.vz-preloader > span:nth-child(1) { background: var(--c-crea); }
.vz-preloader > span:nth-child(2) { background: var(--c-chuva); }
.vz-preloader > span:nth-child(3) { background: var(--c-tegy); }
.vz-preloader > span:nth-child(4) { background: var(--c-pupila); }

/* cover: bands drop in to fully cover */
.vz-preloader[data-phase="cover"] { pointer-events: auto; }
.vz-preloader[data-phase="cover"] > span {
	transform: translateY(0);
	transition: transform .46s cubic-bezier(.76, 0, .24, 1);
	transition-delay: calc(var(--i) * .05s);
}
/* reveal: bands slide up and out */
.vz-preloader[data-phase="reveal"] > span {
	transform: translateY(-101%);
	transition: transform .46s cubic-bezier(.76, 0, .24, 1);
	transition-delay: calc(var(--i) * .05s);
}
/* cover-in: bands rise from the bottom to cover before navigating away */
.vz-preloader[data-phase="cover-in"] { pointer-events: auto; }
.vz-preloader[data-phase="cover-in"] > span {
	transform: translateY(0);
	transition: transform .46s cubic-bezier(.76, 0, .24, 1);
	transition-delay: calc(var(--i) * .05s);
}
/* idle: parked off-screen */
.vz-preloader[data-phase="idle"] > span { transform: translateY(101%); transition: none; }

@media (prefers-reduced-motion: reduce) {
	.vz-preloader { display: none !important; }
}

.wp-block-template-part>.wp-block-group>.wp-block-group { padding-inline: clamp(20px,5vw,72px); }