/* =========================================================
 * Header Aquavest — landing
 * Barra única: logo + menú + teléfono + CTA de WhatsApp.
 * Markup: template-parts/site-header.php · JS: assets/js/site-header.js
 * ========================================================= */

:root {
	--ozh-bg: #0b2a33;
	--ozh-text: #ffffff;
	--ozh-muted: rgba(255, 255, 255, .72);
	--ozh-accent: #f1552b;
	--ozh-accent-hover: #e04519;
	--ozh-height: 84px;
	--ozh-height-mobile: 68px;
	/* Alto real del header en el breakpoint activo (lo compensa el body). */
	--ozh-offset: var(--ozh-height-mobile);
}

.ozh,
.ozh * {
	box-sizing: border-box;
}

/* El header sale del flujo (fixed), así que el documento compensa su altura con
   padding-top: sin esto el contenido saltaría hacia arriba al cargar. La misma
   variable alimenta el scroll-padding, para que los anclas (#productos, etc.)
   no queden tapados por el header. */
body {
	padding-top: var(--ozh-offset, var(--ozh-height-mobile));
}

html {
	scroll-padding-top: var(--ozh-offset, var(--ozh-height-mobile));
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.ozh {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1000;
	background: var(--ozh-bg);
	color: var(--ozh-text);
	font-family: var(--OZ-Font-Base, system-ui, -apple-system, "Segoe UI", sans-serif);
	transform: translateY(0);
	transition: transform .32s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

/* Oculto: se retira hacia arriba al bajar. `top` (barra de admin) se descuenta
   con el 100% del propio header más ese desplazamiento, para que no asome nada. */
.ozh.is-hidden {
	transform: translateY(-100%);
}

/* Mientras el menú móvil está abierto el header nunca se esconde. */
.ozh.is-menu-open {
	transform: translateY(0);
}

/* El usuario prefiere menos movimiento: header fijo, sin deslizamiento. */
@media (prefers-reduced-motion: reduce) {
	.ozh {
		transition: none;
	}

	.ozh.is-hidden {
		transform: translateY(0);
	}
}

/* Barra de administración de WordPress: es fixed y ocuparía el mismo espacio. */
body.admin-bar .ozh {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .ozh {
		top: 46px;
	}
}

.ozh ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ozh a {
	color: inherit;
	text-decoration: none;
}

.ozh__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	width: 100%;
	max-width: 1560px;
	min-height: var(--ozh-height-mobile);
	margin: 0 auto;
	padding: 0 20px;
}

/* ---------- Logo ---------- */
.ozh__brand {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.ozh__brand .custom-logo-link,
.ozh__brand .custom-logo {
	display: block;
}

.ozh__brand .custom-logo {
	width: auto;
	height: 40px;
	max-height: 44px;
	object-fit: contain;
}

/* Marca de respaldo cuando no hay logo cargado en el Personalizador. */
.ozh__wordmark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 27px;
	font-weight: 800;
	letter-spacing: .01em;
	line-height: 1;
	text-transform: uppercase;
}

.ozh__wordmark svg {
	display: block;
	flex-shrink: 0;
}

/* ---------- Navegación ---------- */
.ozh__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.ozh__menu {
	display: flex;
	align-items: center;
	gap: 34px;
}

.ozh__menu > li {
	position: relative;
}

.ozh__menu > li > a {
	display: inline-block;
	padding: 6px 0;
	color: var(--ozh-text);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color .2s ease;
}

.ozh__menu > li > a::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 4px;
	background: var(--ozh-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s ease;
}

.ozh__menu > li > a:hover,
.ozh__menu > li > a:focus-visible,
.ozh__menu > .current-menu-item > a {
	color: #fff;
}

.ozh__menu > li > a:hover::after,
.ozh__menu > li > a:focus-visible::after,
.ozh__menu > .current-menu-item > a::after {
	transform: scaleX(1);
}

/* Submenú (por si el menú de WP trae hijos). */
.ozh__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	padding: 8px 0;
	background: #0f3641;
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.ozh__menu > li:hover .sub-menu,
.ozh__menu > li:focus-within .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ozh__menu .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-size: 14px;
	color: var(--ozh-muted);
	transition: color .2s ease, background .2s ease;
}

.ozh__menu .sub-menu a:hover {
	color: #fff;
	background: rgba(255, 255, 255, .06);
}

/* ---------- Teléfono ---------- */
.ozh__phone {
	display: flex;
	align-items: center;
	gap: 11px;
	flex-shrink: 0;
	color: #fff;
}

.ozh__phone-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
}

.ozh__phone-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.1;
}

.ozh__phone-number {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
}

.ozh__phone-label {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ozh-muted);
	white-space: nowrap;
}

/* ---------- CTA WhatsApp ---------- */
.ozh__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	padding: 14px 24px;
	background: var(--ozh-accent);
	color: #fff;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition: background .2s ease, transform .2s ease;
}

.ozh__cta:hover,
.ozh__cta:focus-visible {
	background: var(--ozh-accent-hover);
	color: #fff;
	transform: translateY(-1px);
}

.ozh__cta svg {
	flex-shrink: 0;
}

/* ---------- Hamburguesa ---------- */
.ozh__burger {
	display: none;
	/* En columna: sin esto las tres barras se apilan en fila y el icono sale como un guion. */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background .2s ease;
}

.ozh__burger:hover,
.ozh__burger:focus-visible {
	background: rgba(255, 255, 255, .1);
}

.ozh__burger span {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .25s ease, opacity .2s ease;
}

/* Abierto: las barras exteriores se cruzan en X (8px = alto de barra + gap). */
.ozh__burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.ozh__burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.ozh__burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Panel móvil ---------- */
.ozh__panel {
	display: none;
	padding: 8px 20px 26px;
	background: var(--ozh-bg);
	border-top: 1px solid rgba(255, 255, 255, .1);
	/* El header es fixed: si el menú es más alto que la pantalla, scrollea dentro. */
	max-height: calc(100vh - var(--ozh-offset) - 20px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ozh__panel.is-open {
	display: block;
}

.ozh__panel .ozh__menu {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.ozh__panel .ozh__menu > li > a {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ozh__panel .ozh__menu > li > a::after {
	display: none;
}

.ozh__panel .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	min-width: 0;
	padding: 0 0 8px 14px;
	background: none;
	box-shadow: none;
}

.ozh__panel-actions {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 22px;
}

.ozh__panel .ozh__cta {
	justify-content: center;
}

/* ---------- Responsive ---------- */
@media (min-width: 1100px) {
	:root {
		--ozh-offset: var(--ozh-height);
	}

	.ozh__inner {
		min-height: var(--ozh-height);
		gap: 34px;
		padding: 0 32px;
	}

	.ozh__brand .custom-logo {
		height: 44px;
	}
}

/* ---------- Tablet y móvil (<1100px) ----------
   El menú y el teléfono se van al panel; en la barra queda logo + CTA de
   WhatsApp (la acción principal, siempre a un toque) + hamburguesa. */
@media (max-width: 1099px) {
	.ozh__nav,
	.ozh__inner > .ozh__phone {
		display: none;
	}

	.ozh__inner {
		gap: 12px;
		padding: 0 16px;
	}

	.ozh__brand {
		margin-right: auto;
	}

	.ozh__inner > .ozh__cta {
		padding: 11px 16px;
		font-size: 14px;
		gap: 8px;
	}

	.ozh__burger {
		display: flex;
	}
}

/* Móvil estrecho: el CTA se queda solo con el icono de WhatsApp, para que el
   logo no tenga que encogerse ni el botón empujar a la hamburguesa. */
@media (max-width: 560px) {
	.ozh__inner > .ozh__cta {
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
	}

	.ozh__inner > .ozh__cta span {
		display: none;
	}
}

@media (min-width: 1100px) {
	.ozh__panel {
		display: none !important;
	}
}

@media (max-width: 420px) {
	.ozh__wordmark {
		font-size: 22px;
	}

	.ozh__brand .custom-logo {
		height: 34px;
	}
}