/**
 * Nexus — primary navigation design presets
 *
 * Scoped to header primary nav, storefront secondary nav, and HF builder menu slots.
 *
 * @package Nexus
 */

/* Shared selectors */
body[class*="nexus-menu-style-"] .site-header .main-navigation > ul.nav-menu > li > a,
body[class*="nexus-menu-style-"] .nexus-wc-secondary-nav .main-navigation > ul.nav-menu > li > a,
body[class*="nexus-menu-style-"] .nexus-hf-nav .nexus-hf-primary-menu > li > a {
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* --------------------------------------------------------------------------
   Pills
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	body.nexus-menu-style-pills .site-header .main-navigation > ul.nav-menu > li > a,
	body.nexus-menu-style-pills .nexus-wc-secondary-nav .main-navigation > ul.nav-menu > li > a,
	body.nexus-menu-style-pills .nexus-hf-nav .nexus-hf-primary-menu > li > a {
		border-radius: 999px;
	}

	body.nexus-menu-style-pills .site-header .main-navigation > ul.nav-menu > li > a:hover,
	body.nexus-menu-style-pills .site-header .main-navigation > ul.nav-menu > li > a:focus-visible,
	body.nexus-menu-style-pills .nexus-hf-nav .nexus-hf-primary-menu > li > a:hover,
	body.nexus-menu-style-pills .nexus-hf-nav .nexus-hf-primary-menu > li > a:focus-visible {
		background: color-mix(in srgb, var(--nexus-primary) 14%, transparent);
		color: var(--nexus-primary);
	}

	body.nexus-menu-style-pills .site-header .main-navigation > ul.nav-menu > li.current-menu-item > a,
	body.nexus-menu-style-pills .site-header .main-navigation > ul.nav-menu > li.current-menu-ancestor > a,
	body.nexus-menu-style-pills .nexus-hf-nav .nexus-hf-primary-menu > li.current-menu-item > a,
	body.nexus-menu-style-pills .nexus-hf-nav .nexus-hf-primary-menu > li.current-menu-ancestor > a {
		background: var(--nexus-primary);
		color: var(--nexus-button-text, #fff);
	}

	body.nexus-menu-style-pills .nexus-wc-secondary-nav .main-navigation > ul.nav-menu > li > a:hover,
	body.nexus-menu-style-pills .nexus-wc-secondary-nav .main-navigation > ul.nav-menu > li > a:focus-visible,
	body.nexus-menu-style-pills .nexus-wc-secondary-nav .main-navigation > ul.nav-menu > li.current-menu-item > a {
		border-radius: 999px;
	}
}

@media (max-width: 1024px) {
	body.nexus-menu-style-pills .main-navigation.toggled > ul.nav-menu > li > a {
		border-radius: 8px;
		margin: 0 0.35rem;
	}

	body.nexus-menu-style-pills .main-navigation.toggled > ul.nav-menu > li.current-menu-item > a,
	body.nexus-menu-style-pills .main-navigation.toggled > ul.nav-menu > li.current-menu-ancestor > a {
		background: color-mix(in srgb, var(--nexus-primary) 16%, transparent);
		color: var(--nexus-primary);
	}
}

/* --------------------------------------------------------------------------
   Underline
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	body.nexus-menu-style-underline .site-header .main-navigation > ul.nav-menu > li > a,
	body.nexus-menu-style-underline .nexus-wc-secondary-nav .main-navigation > ul.nav-menu > li > a,
	body.nexus-menu-style-underline .nexus-hf-nav .nexus-hf-primary-menu > li > a {
		border-bottom: 2px solid transparent;
		border-radius: 0;
		padding-bottom: calc(0.5rem - 2px);
	}

	body.nexus-menu-style-underline .site-header .main-navigation > ul.nav-menu > li > a:hover,
	body.nexus-menu-style-underline .site-header .main-navigation > ul.nav-menu > li > a:focus-visible,
	body.nexus-menu-style-underline .site-header .main-navigation > ul.nav-menu > li.current-menu-item > a,
	body.nexus-menu-style-underline .site-header .main-navigation > ul.nav-menu > li.current-menu-ancestor > a,
	body.nexus-menu-style-underline .nexus-hf-nav .nexus-hf-primary-menu > li > a:hover,
	body.nexus-menu-style-underline .nexus-hf-nav .nexus-hf-primary-menu > li > a:focus-visible,
	body.nexus-menu-style-underline .nexus-hf-nav .nexus-hf-primary-menu > li.current-menu-item > a,
	body.nexus-menu-style-underline .nexus-hf-nav .nexus-hf-primary-menu > li.current-menu-ancestor > a {
		border-bottom-color: var(--nexus-primary);
		color: var(--nexus-primary);
	}

	body.nexus-menu-style-underline .nexus-wc-secondary-nav .main-navigation > ul.nav-menu > li > a:hover,
	body.nexus-menu-style-underline .nexus-wc-secondary-nav .main-navigation > ul.nav-menu > li > a:focus-visible,
	body.nexus-menu-style-underline .nexus-wc-secondary-nav .main-navigation > ul.nav-menu > li.current-menu-item > a {
		border-bottom-color: rgba(255, 255, 255, 0.85);
	}
}

@media (max-width: 1024px) {
	body.nexus-menu-style-underline .main-navigation.toggled > ul.nav-menu > li > a {
		border-left: 3px solid transparent;
		padding-left: calc(1rem - 3px);
	}

	body.nexus-menu-style-underline .main-navigation.toggled > ul.nav-menu > li.current-menu-item > a,
	body.nexus-menu-style-underline .main-navigation.toggled > ul.nav-menu > li.current-menu-ancestor > a {
		border-left-color: var(--nexus-primary);
		color: var(--nexus-primary);
	}
}

/* --------------------------------------------------------------------------
   Minimal
   -------------------------------------------------------------------------- */

body.nexus-menu-style-minimal .site-header .main-navigation > ul.nav-menu > li > a,
body.nexus-menu-style-minimal .nexus-hf-nav .nexus-hf-primary-menu > li > a {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nexus-body-text-muted, #64748b);
}

body.nexus-menu-style-minimal .site-header .main-navigation > ul.nav-menu > li > a:hover,
body.nexus-menu-style-minimal .site-header .main-navigation > ul.nav-menu > li > a:focus-visible,
body.nexus-menu-style-minimal .site-header .main-navigation > ul.nav-menu > li.current-menu-item > a,
body.nexus-menu-style-minimal .site-header .main-navigation > ul.nav-menu > li.current-menu-ancestor > a,
body.nexus-menu-style-minimal .nexus-hf-nav .nexus-hf-primary-menu > li > a:hover,
body.nexus-menu-style-minimal .nexus-hf-nav .nexus-hf-primary-menu > li > a:focus-visible,
body.nexus-menu-style-minimal .nexus-hf-nav .nexus-hf-primary-menu > li.current-menu-item > a {
	color: var(--nexus-header-link, var(--nexus-primary));
}

body.nexus-menu-style-minimal .nexus-wc-secondary-nav .main-navigation > ul.nav-menu > li > a {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Shop bar (bold primary strip in header; secondary nav keeps its own bar)
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	body.nexus-menu-style-shop-bar .site-header .main-navigation > ul.nav-menu,
	body.nexus-menu-style-shop-bar .nexus-hf-nav .nexus-hf-primary-menu {
		background: var(--nexus-primary);
		border-radius: var(--nexus-radius, 8px);
		padding: 0.15rem 0.35rem;
		gap: 0;
	}

	body.nexus-menu-style-shop-bar .site-header .main-navigation > ul.nav-menu > li > a,
	body.nexus-menu-style-shop-bar .nexus-hf-nav .nexus-hf-primary-menu > li > a {
		color: var(--nexus-button-text, #fff);
		font-weight: 600;
		font-size: 0.9375rem;
		padding: 0.65rem 1rem;
		border-radius: 0;
	}

	body.nexus-menu-style-shop-bar .site-header .main-navigation > ul.nav-menu > li > a:hover,
	body.nexus-menu-style-shop-bar .site-header .main-navigation > ul.nav-menu > li > a:focus-visible,
	body.nexus-menu-style-shop-bar .site-header .main-navigation > ul.nav-menu > li.current-menu-item > a,
	body.nexus-menu-style-shop-bar .site-header .main-navigation > ul.nav-menu > li.current-menu-ancestor > a,
	body.nexus-menu-style-shop-bar .nexus-hf-nav .nexus-hf-primary-menu > li > a:hover,
	body.nexus-menu-style-shop-bar .nexus-hf-nav .nexus-hf-primary-menu > li > a:focus-visible,
	body.nexus-menu-style-shop-bar .nexus-hf-nav .nexus-hf-primary-menu > li.current-menu-item > a {
		background: rgba(0, 0, 0, 0.12);
		color: var(--nexus-button-text, #fff);
	}

	body.nexus-menu-style-shop-bar .site-header .main-navigation .menu-item-has-children > a::after,
	body.nexus-menu-style-shop-bar .nexus-hf-nav .menu-item-has-children > a::after {
		border-color: currentColor;
		opacity: 0.85;
	}
}

@media (max-width: 1024px) {
	body.nexus-menu-style-shop-bar .main-navigation.toggled > ul.nav-menu {
		background: var(--nexus-primary);
	}

	body.nexus-menu-style-shop-bar .main-navigation.toggled > ul.nav-menu > li > a {
		color: var(--nexus-button-text, #fff);
		font-weight: 600;
	}

	body.nexus-menu-style-shop-bar .main-navigation.toggled > ul.nav-menu > li > a:hover,
	body.nexus-menu-style-shop-bar .main-navigation.toggled > ul.nav-menu > li.current-menu-item > a {
		background: rgba(0, 0, 0, 0.12);
	}
}