/**
 * Header + navegación principal (patrón Versn, tokens Vittarial).
 */

/* Variables CSS */
:root {
	--vit-admin-bar-offset: 0px;
}

.admin-bar {
	--vit-admin-bar-offset: 32px;
}

/* Estilos generales del header */
.site-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1000;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

body.home {
	padding-top: 0;
}

html {
	scroll-padding-top: calc(var(--mwm-header-height, 0px) + var(--wp-admin--admin-bar--height, 0px));
}

.site-header--home {
	background-color: transparent;
}

.site-header--solid,
.site-header--home.is-scrolled {
	background-color: var(--vit-bg);
}

.site-header--solid{
	color: var(--vit-dark);
}

.site-header.is-scrolled {
	box-shadow: 0 8px 24px rgba(16, 46, 62, 0.12);
	background-color: var(--vit-bg) !important;
	color: var(--vit-dark);
}

body.home .site-header {
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	color: var(--vit-dark);
}

body:not(.home) .site-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
}

body:has(main.mwm-wc-single-product) .site-header {
	background-color: transparent;
	color: var(--vit-bg);
}

body:has(main.mwm-wc-single-product) .site-header.is-scrolled {
	background-color: var(--vit-bg);
	color: var(--vit-dark);
}

/* Contenedor interno del header */
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px clamp(16px, 4vw, 56px);
	max-width: calc(1312px + 128px);
	margin: 0 auto;
	box-sizing: border-box;
}

/* Branding */
.site-branding {
	display: flex;
	align-items: center;
	min-width: 120px;
	flex: 0 0 auto;
}

.site-branding .custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.site-branding .custom-logo-link--light {
	display: none;
}

.site-branding .custom-logo {
	width: auto;
	max-height: 40px;
}

/* WooCommerce (main contiene una clase mwm-wc-*) y categorías de producto: usar logo light al inicio */
body:has(main[class*="mwm-wc-"]) .site-branding .custom-logo-link--light,
body.tax-product_cat .site-branding .custom-logo-link--light {
	display: inline-flex;
}

body:has(main[class*="mwm-wc-"]) .site-branding .custom-logo-link:not(.custom-logo-link--light),
body.tax-product_cat .site-branding .custom-logo-link:not(.custom-logo-link--light) {
	display: none;
}

/* Cuando el header hace sticky (is-scrolled): volver al logo default */
body:has(main[class*="mwm-wc-"]) #site-header.is-scrolled .site-branding .custom-logo-link--light,
body.tax-product_cat #site-header.is-scrolled .site-branding .custom-logo-link--light {
	display: none;
}

body:has(main[class*="mwm-wc-"]) #site-header.is-scrolled .site-branding .custom-logo-link:not(.custom-logo-link--light),
body.tax-product_cat #site-header.is-scrolled .site-branding .custom-logo-link:not(.custom-logo-link--light) {
	display: inline-flex;
}

.site-title {
	color: var(--vit-dark);
	font-family: var(--vit-font-heading);
	font-size: clamp(1.125rem, 2.5vw, 1.5rem);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	letter-spacing: -0.02em;
}

.site-header--solid .site-title,
.site-header--home.is-scrolled .site-title {
	color: var(--vit-dark);
}

/* Toggle del menú */
.site-header__menu-toggle {
	display: none;
}

/* Navegación primaria */
.site-navigation--primary {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.site-navigation--primary .menu {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.5vw, 32px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-navigation--primary .menu > li > a {
	display: inline-flex;
	align-items: center;
	padding: 12px 0;
	color: inherit;
	font-family: var(--vit-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.site-navigation--primary .menu > li > a:hover,
.site-navigation--primary .menu > li > a:focus-visible {
	color: var(--vit-teal);
}

.site-navigation--primary .menu > li.current-menu-item > a,
.site-navigation--primary .menu > li.current-menu-ancestor > a {
	color: var(--vit-teal);
}

.site-navigation--primary .menu > .menu-item-has-children {
	position: relative;
}

.site-navigation--primary .menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1001;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--vit-bg);
	border: 1px solid rgba(16, 46, 62, 0.12);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(16, 46, 62, 0.1);
	display: none;
}

.site-navigation--primary .menu .sub-menu li {
	margin: 0;
}

.site-navigation--primary .menu .sub-menu a {
	display: block;
	padding: 10px 16px;
	color: var(--vit-dark);
	text-decoration: none;
	white-space: nowrap;
	font-weight: 500;
}

.site-navigation--primary .menu .sub-menu a:hover,
.site-navigation--primary .menu .sub-menu a:focus-visible {
	background: rgba(37, 219, 191, 0.12);
	color: var(--vit-teal);
}

.site-navigation--primary .menu .menu-item-has-children:hover > .sub-menu,
.site-navigation--primary .menu .menu-item-has-children:focus-within > .sub-menu,
.site-navigation--primary .menu .menu-item-has-children.is-submenu-open > .sub-menu {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.site-navigation--primary .submenu-toggle {
	display: none;
}

/* CTA del header */
.site-header__cta {
	align-items: center;
	background: var(--vit-teal);
	border-radius: 4px;
	color: var(--vit-slate);
	display: inline-flex;
	flex: 0 0 auto;
	font-family: var(--vit-font-body);
	font-size: 16px;
	font-weight: 600;
	justify-content: center;
	letter-spacing: -0.02em;
	line-height: 1;
	padding: 10px 16px;
	text-decoration: none;
	transition: opacity 0.2s ease;
	white-space: nowrap;
}

.site-header__cta:hover,
.site-header__cta:focus-visible {
	opacity: 0.88;
}

/* Media queries */

/* Tablet y mobile */
@media (max-width: 1350px) {
	.site-navigation--primary .menu {
		gap: 20px;
	}

	.site-header__cta {
		display: none;
	}

	.site-header__inner {
		padding: 12px 16px;
		gap: 12px;
		position: relative;
		z-index: 1102;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
	}

	.site-branding {
		margin-right: auto;
		min-width: 0;
		order: 1;
	}

	.site-header__menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		color: inherit;
		cursor: pointer;
		position: fixed;
		top: calc(var(--vit-admin-bar-offset) + 12px);
		right: 16px;
		z-index: 1103;
		flex: 0 0 auto;
		order: 2;
	}

	.site-header__menu-toggle:focus-visible {
		outline: 2px solid var(--vit-teal);
		outline-offset: 2px;
	}

	.site-header__cta {
		order: 3;
		padding: 8px 12px;
		font-size: 14px;
		margin-right: 52px;
	}

	.site-header__menu-toggle-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
	}

	.site-header__menu-toggle-icon svg {
		display: block;
		width: 24px;
		height: 24px;
	}

	.site-header__menu-toggle-icon--close {
		display: none;
	}

	.site-header.is-menu-open .site-header__menu-toggle-icon--menu {
		display: none;
	}

	.site-header.is-menu-open .site-header__menu-toggle-icon--close {
		display: inline-flex;
	}

	.site-header.is-menu-open .site-header__menu-toggle {
		color: var(--vit-slate);
	}

	.site-header.is-menu-open .site-navigation--primary {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}

	.site-navigation--primary {
		position: fixed;
		top: var(--vit-admin-bar-offset);
		right: 0;
		width: 100vw;
		height: calc(100vh - var(--vit-admin-bar-offset));
		background: var(--vit-bg);
		transform: translateX(100%);
		transition: transform 0.35s ease, visibility 0s linear 0.35s;
		visibility: hidden;
		pointer-events: none;
		padding: 96px 16px 28px;
		box-sizing: border-box;
		overflow-y: auto;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		z-index: 1101;
		flex: none;
		order: 4;
		width: 100%;
	}

	.site-navigation--primary .menu,
	.site-navigation--primary .menu .sub-menu {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.site-navigation--primary .menu {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 14px;
		align-items: flex-start;
	}

	.site-navigation--primary .menu > li {
		width: 100%;
		text-align: left;
	}

	.site-navigation--primary .menu > li > a {
		display: inline-flex;
		align-items: center;
		padding: 10px 12px;
		margin-left: -12px;
		border-radius: 8px;
		color: var(--vit-dark);
		font-size: 16px;
		line-height: 24px;
		font-weight: 500;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	/* Mismo feedback que submenú (fondo + teal). Incluye .is-menu-open para ganar a .menu a { color } */
	.site-header.is-menu-open .site-navigation--primary .menu > li > a:hover,
	.site-header.is-menu-open .site-navigation--primary .menu > li > a:focus-visible,
	.site-header.is-menu-open .site-navigation--primary .menu > li > a:active,
	.site-navigation--primary .menu > li > a:hover,
	.site-navigation--primary .menu > li > a:focus-visible,
	.site-navigation--primary .menu > li > a:active {
		background: rgba(37, 219, 191, 0.12);
		color: var(--vit-teal);
	}

	.site-header.is-menu-open .site-navigation--primary .menu .sub-menu a:hover,
	.site-header.is-menu-open .site-navigation--primary .menu .sub-menu a:focus-visible,
	.site-header.is-menu-open .site-navigation--primary .menu .sub-menu a:active,
	.site-navigation--primary .menu .sub-menu a:hover,
	.site-navigation--primary .menu .sub-menu a:focus-visible,
	.site-navigation--primary .menu .sub-menu a:active {
		background: rgba(37, 219, 191, 0.12);
		color: var(--vit-teal);
	}

	.site-navigation--primary .menu .sub-menu {
		position: static;
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
		margin-top: 10px;
		background: rgba(16, 46, 62, 0.04);
		border: 1px solid rgba(16, 46, 62, 0.08);
		border-radius: 12px;
		min-width: 0;
		padding: 12px 12px 12px 22px;
		box-shadow: none;
	}

	.site-navigation--primary .menu .sub-menu a {
		display: inline-flex;
		padding: 6px .5rem;
		color: var(--vit-dark);
		font-size: 15px;
		line-height: 24px;
		white-space: normal;
		font-weight: 500;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.site-header.is-menu-open .site-navigation--primary .menu a {
		color: var(--vit-dark);
	}

	.site-navigation--primary .submenu-toggle {
		display: none;
	}

	body.has-mobile-menu-open {
		overflow: hidden;
	}
}

/* Mobile pequeño */
@media (max-width: 782px) {
	.admin-bar {
		--vit-admin-bar-offset: 46px;
	}
}