/**
 * Header navigation — typography, dropdowns, hover line animations.
 */

/* Base desktop menu */
.main-navigation.header-element > ul,
.main-navigation.header-element .menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: clamp(12px, 2vw, 24px);
	align-items: center;
}

.main-navigation.header-element a,
.tekton-nav.header-element a {
	position: relative;
	display: inline-block;
	font-size: var(--tekton-nav-font-size, 15px);
	font-weight: var(--tekton-nav-font-weight, 500);
	text-decoration: none;
	color: var(--tekton-nav-link-color, inherit);
	transition: color 0.2s ease;
}

.main-navigation.header-element a:hover,
.main-navigation.header-element a:focus,
.tekton-nav.header-element a:hover,
.tekton-nav.header-element a:focus {
	color: var(--tekton-nav-link-hover-color, var(--primary-color, #0274be));
}

/* Desktop dropdown sub-menus */
.main-navigation ul ul {
	background: var(--tekton-nav-dropdown-bg, #fff) !important;
	min-width: var(--tekton-nav-dropdown-min-width, 200px);
	border: 1px solid var(--tekton-nav-dropdown-border, #e2e8f0);
	border-radius: var(--tekton-nav-dropdown-radius, 8px);
	padding: 8px 0;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.main-navigation ul ul a {
	font-size: var(--tekton-nav-dropdown-font-size, 14px);
	padding: 10px 18px;
	white-space: nowrap;
}

/* Mobile panel (#mobile-navigation) */
.mobile-navigation-container ul,
#mobile-navigation ul {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.mobile-navigation-container ul li a,
#mobile-navigation ul li a {
	display: block;
	padding: 14px 20px;
	font-size: var(--tekton-nav-mobile-font-size, 16px);
	font-weight: var(--tekton-nav-font-weight, 500);
	color: var(--tekton-nav-mobile-link-color, var(--text-color, #333));
	text-decoration: none;
	position: relative;
}

#mobile-navigation.mobile-menu-style-dropdown.toggled,
#mobile-navigation.toggled {
	background: var(--tekton-nav-mobile-panel-bg, #fff) !important;
}

#mobile-navigation.mobile-menu-style-sidebar {
	background: var(--tekton-nav-mobile-panel-bg, #fff);
}

#mobile-navigation.mobile-menu-style-fullscreen {
	background: var(--tekton-nav-mobile-panel-bg, rgba(255, 255, 255, 0.96));
}

/* ----- Hover animations (top-level + mobile panel links) ----- */
body.tekton-nav-hover-underline-left .main-navigation.header-element > ul > li > a::after,
body.tekton-nav-hover-underline-left .tekton-nav.header-element > ul > li > a::after,
body.tekton-nav-hover-underline-left #mobile-navigation ul li a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 6px;
	width: 0;
	height: 2px;
	background: var(--tekton-nav-link-hover-color, var(--primary-color, #0274be));
	transition: width 0.25s ease;
}

body.tekton-nav-hover-underline-left .main-navigation.header-element > ul > li > a:hover::after,
body.tekton-nav-hover-underline-left .tekton-nav.header-element > ul > li > a:hover::after,
body.tekton-nav-hover-underline-left #mobile-navigation ul li a:hover::after {
	width: 100%;
}

body.tekton-nav-hover-underline-center .main-navigation.header-element > ul > li > a::after,
body.tekton-nav-hover-underline-center .tekton-nav.header-element > ul > li > a::after,
body.tekton-nav-hover-underline-center #mobile-navigation ul li a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 6px;
	width: 0;
	height: 2px;
	background: var(--tekton-nav-link-hover-color, var(--primary-color, #0274be));
	transform: translateX(-50%);
	transition: width 0.25s ease;
}

body.tekton-nav-hover-underline-center .main-navigation.header-element > ul > li > a:hover::after,
body.tekton-nav-hover-underline-center .tekton-nav.header-element > ul > li > a:hover::after,
body.tekton-nav-hover-underline-center #mobile-navigation ul li a:hover::after {
	width: 80%;
}

body.tekton-nav-hover-underline-slide .main-navigation.header-element > ul > li > a::after,
body.tekton-nav-hover-underline-slide .tekton-nav.header-element > ul > li > a::after,
body.tekton-nav-hover-underline-slide #mobile-navigation ul li a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 6px;
	width: 100%;
	height: 2px;
	background: var(--tekton-nav-link-hover-color, var(--primary-color, #0274be));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease;
}

body.tekton-nav-hover-underline-slide .main-navigation.header-element > ul > li > a:hover::after,
body.tekton-nav-hover-underline-slide .tekton-nav.header-element > ul > li > a:hover::after,
body.tekton-nav-hover-underline-slide #mobile-navigation ul li a:hover::after {
	transform: scaleX(1);
}

body.tekton-nav-hover-bg-fill .main-navigation.header-element > ul > li > a,
body.tekton-nav-hover-bg-fill .tekton-nav.header-element > ul > li > a,
body.tekton-nav-hover-bg-fill #mobile-navigation ul li a {
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.tekton-nav-hover-bg-fill .main-navigation.header-element > ul > li > a:hover,
body.tekton-nav-hover-bg-fill .tekton-nav.header-element > ul > li > a:hover,
body.tekton-nav-hover-bg-fill #mobile-navigation ul li a:hover {
	background: color-mix(in srgb, var(--tekton-nav-link-hover-color, #0274be) 12%, transparent);
	border-radius: 6px;
}

body.tekton-nav-hover-line-top .main-navigation.header-element > ul > li > a::before,
body.tekton-nav-hover-line-top .tekton-nav.header-element > ul > li > a::before,
body.tekton-nav-hover-line-top #mobile-navigation ul li a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 3px;
	background: var(--tekton-nav-link-hover-color, var(--primary-color, #0274be));
	transition: width 0.25s ease;
}

body.tekton-nav-hover-line-top .main-navigation.header-element > ul > li > a:hover::before,
body.tekton-nav-hover-line-top .tekton-nav.header-element > ul > li > a:hover::before,
body.tekton-nav-hover-line-top #mobile-navigation ul li a:hover::before {
	width: 100%;
}

body.tekton-nav-hover-scale .main-navigation.header-element > ul > li > a,
body.tekton-nav-hover-scale .tekton-nav.header-element > ul > li > a,
body.tekton-nav-hover-scale #mobile-navigation ul li a {
	transition: transform 0.2s ease, color 0.2s ease;
}

body.tekton-nav-hover-scale .main-navigation.header-element > ul > li > a:hover,
body.tekton-nav-hover-scale .tekton-nav.header-element > ul > li > a:hover,
body.tekton-nav-hover-scale #mobile-navigation ul li a:hover {
	transform: scale(1.04);
}