/**
 * VSA — header flotante y home.
 * CSS necesario: posicionamiento flotante sobre hero, z-index, pointer-events y cápsula responsive.
 * Los valores visuales deben apoyarse en presets de theme.json siempre que sea posible.
 */

/* Header base: comportamiento normal para páginas interiores.
   Debe ocupar flujo para que el contenido no pase por debajo. */
.wp-block-template-part:has(.ok-site-header) {
	position: relative;
	z-index: 50;
	width: 100%;
	margin: 0;
	padding: 0;
	pointer-events: none;
	background: transparent;
	border: none;
}

.ok-site-header {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: calc(var(--wp--preset--spacing--xs) * 2) 0;
	pointer-events: none;
}

/* Sólo portada: header flotante sobre el hero.
   Aquí sí debe salir del flujo para no desplazar el hero. */
body.home .wp-block-template-part:has(.ok-site-header) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

body.home .ok-site-header {
	top: calc(var(--wp--preset--spacing--s) * 3.6);
	padding: 0;
}

.ok-header-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	width: min(100% - calc(var(--wp--preset--spacing--xs) * 4), 1320px);
	margin-inline: auto;
	/*min-height: 76px;*/
	padding: 5px 10px 5px 14px;
	background: var(--wp--preset--color--surface, #ffffff);
	border-radius: 22px;
	box-shadow: var(--wp--preset--shadow--shadow-soft, 0 18px 50px rgba(24, 32, 56, 0.12));
	pointer-events: auto;
}

.ok-header-logo {
	flex: 0 0 auto;
}

.ok-header-logo img {
	display: block;
	/*width: 56px;*/
	height: auto;
}

.ok-header-nav {
	flex: 1 1 auto;
	justify-content: center;
}

.ok-header-nav .wp-block-navigation__container {
	gap: clamp(24px, 3vw, 46px);
}

.ok-header-nav a {
	font-size: var(--wp--preset--font-size--nav, 0.82rem);
	font-weight: var(--wp--custom--font-weight--semi-bold, 600);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body, #31354a);
	text-decoration: none;
}

.ok-header-nav a:hover,
.ok-header-nav .current-menu-item > a {
	color: var(--wp--preset--color--secondary, #494999);
}

.ok-header-actions {
	flex: 0 0 auto;
	gap: 14px;
}

.ok-header-actions .wp-block-button__link {
	min-width: 172px;
	padding: 13px 28px;
	border-radius: var(--wp--preset--border-radius--pill, 999px);
	font-size: var(--wp--preset--font-size--button, 0.82rem);
	font-weight: var(--wp--custom--font-weight--semi-bold, 600);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	text-align: center;
	transition: var(--wp--custom--transition--default, 400ms cubic-bezier(0.25, 0.8, 0.25, 1));
}

.is-style-ok-primary-pill .wp-block-button__link {
	background: var(--wp--preset--color--secondary, #494999);
	color: var(--wp--preset--color--text-inverse, #ffffff);
	border: 1px solid var(--wp--preset--color--secondary, #494999);
}

/*.is-style-ok-primary-pill .wp-block-button__link:hover,
.is-style-ok-primary-pill .wp-block-button__link:focus {
	background: var(--wp--preset--color--primary, #63c3d1);
	border-color: var(--wp--preset--color--primary, #63c3d1);
	color: var(--wp--preset--color--text-inverse, #ffffff);
}*/

.is-style-ok-outline-pill .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--secondary, #494999);
	border: 1px solid var(--wp--preset--color--secondary, #494999);
}

/*.is-style-ok-outline-pill .wp-block-button__link:hover,
.is-style-ok-outline-pill .wp-block-button__link:focus {
	background: var(--wp--preset--color--secondary-100, #ececf6);
	color: var(--wp--preset--color--secondary, #494999);
}*/

/* Portada: sin margen superior en main (header flotante + hero en post-content) */
.ok-front-main {
	margin-block-start: 0;
}

/* Header móvil: Mi cuenta y Contactar sólo visibles dentro del overlay */
.ok-site-header .ok-mobile-only-nav-item {
	display: none;
}

@media (max-width: 980px) {
	body.home .ok-site-header {
		top: calc(var(--wp--preset--spacing--xs) * 2);
	}

	.ok-header-shell {
		width: min(100% - 28px, 760px);
		min-height: 64px;
		padding: 8px 14px 8px 18px;
		border-radius: 22px;
	}

	.ok-header-logo img {
		max-width: 50px;
		height: auto;
	}

	.ok-header-actions {
		display: none;
	}

	.ok-header-shell > .wp-block-woocommerce-customer-account,
	.ok-header-shell > .wc-block-customer-account {
		display: none;
	}

	.ok-header-nav {
		flex: 0 0 auto;
		margin-left: auto;
		justify-content: flex-end;
	}

	.ok-site-header .wp-block-navigation__responsive-container-open {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		color: var(--wp--preset--color--body, #31354a);
		background: transparent;
		border: 0;
		border-radius: 999px;
		box-shadow: none;
	}

	.ok-site-header .wp-block-navigation__responsive-container-open svg {
		width: 24px;
		height: 24px;
	}

	.ok-site-header .wp-block-navigation__responsive-container-open:hover,
	.ok-site-header .wp-block-navigation__responsive-container-open:focus-visible {
		background: var(--wp--preset--color--secondary-100, #ececf6);
		outline: none;
	}

	.ok-site-header .wp-block-navigation__responsive-container.is-menu-open {
		padding: var(--wp--preset--spacing--xl, 32px);
		background: var(--wp--preset--color--surface, #ffffff);
		color: var(--wp--preset--color--body, #31354a);
	}

	.ok-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch;
		padding-top: var(--wp--preset--spacing--xl, 32px);
	}

	.ok-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: stretch;
		gap: var(--wp--preset--spacing--m, 20px);
		width: 100%;
	}

	.ok-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 10px 0;
		font-size: var(--wp--preset--font-size--body-medium, 1rem);
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.ok-site-header .wp-block-navigation__responsive-container.is-menu-open .ok-mobile-only-nav-item {
		display: flex;
	}

	.ok-site-header .wp-block-navigation__responsive-container.is-menu-open .ok-mobile-contact-link > a,
	.ok-site-header .wp-block-navigation__responsive-container.is-menu-open .ok-mobile-contact-link .wp-block-navigation-item__content {
		justify-content: center;
		margin-top: var(--wp--preset--spacing--s, 12px);
		padding: 14px 24px;
		border-radius: var(--wp--preset--border-radius--pill, 999px);
		background: var(--wp--preset--color--secondary, #494999);
		color: var(--wp--preset--color--text-inverse, #ffffff);
		font-weight: var(--wp--custom--font-weight--semi-bold, 600);
		text-align: center;
	}
}

@media (min-width: 981px) {
	.ok-site-header .ok-mobile-only-nav-item {
		display: none !important;
	}
}

/* Header navigation underline hover.
   La línea se pinta con pseudo-elemento absoluto para no alterar la altura del menú. */
.ok-site-header .ok-header-nav .wp-block-navigation-item__content {
	position: relative;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.ok-site-header .ok-header-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.35em;
	height: 2px;
	background: var(--wp--preset--color--secondary);
	border-radius: 999px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 180ms ease;
	pointer-events: none;
}

.ok-site-header .ok-header-nav .wp-block-navigation-item__content:hover::after,
.ok-site-header .ok-header-nav .wp-block-navigation-item__content:focus-visible::after,
.ok-site-header .ok-header-nav .current-menu-item > .wp-block-navigation-item__content::after,
.ok-site-header .ok-header-nav .current-menu-ancestor > .wp-block-navigation-item__content::after,
.ok-site-header .ok-header-nav .wp-block-navigation-item__content[aria-current="page"]::after {
	transform: scaleX(1);
}

.ok-site-header .ok-header-nav .wp-block-navigation-item__content:hover,
.ok-site-header .ok-header-nav .wp-block-navigation-item__content:focus-visible {
	text-decoration: none;
}

/* Refuerzo: ocultar botón Contactar externo en móvil.
   Gutenberg aplica body .is-layout-flex { display:flex } con más especificidad que .ok-header-actions. */
@media (max-width: 980px) {
	.ok-site-header .ok-header-shell > .wp-block-buttons.ok-header-actions,
	.ok-site-header .ok-header-actions {
		display: none !important;
	}
}