/* ==========================================================================
   No-JS fallback: static underline under the active tab only.
   Hidden automatically once the JS sliding version initializes
   (JS adds the "has-js-underline" class to the menu).
   ========================================================================== */

#blog-menu .et-menu > li.current-menu-item > a,
#blog-menu .et-menu > li.current_page_item > a {
	position: relative;
}

#blog-menu .et-menu > li.current-menu-item > a::after,
#blog-menu .et-menu > li.current_page_item > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px; /* adjust to match the actual spacing under the tabs */
	height: 3px;
	background-color: #ed1c27;
}

#blog-menu .et-menu.has-js-underline > li.current-menu-item > a::after,
#blog-menu .et-menu.has-js-underline > li.current_page_item > a::after {
	display: none;
}

/* ==========================================================================
   Sliding underline (JS-driven)
   ========================================================================== */

#blog-menu .et-menu {
	position: relative;
}

.highland-menu-underline {
	position: absolute;
	bottom: -10px; /* keep this matched to the fallback rule above */
	height: 3px;
	background-color: #ed1c27;
	opacity: 0;
	pointer-events: none;
	transition: left 0.25s ease, width 0.25s ease, opacity 0.2s ease;
}

/* ==========================================================================
   Hide the underline entirely on mobile
   ========================================================================== */

@media (max-width: 767px) {
	#blog-menu .et-menu > li.current-menu-item > a::after,
	#blog-menu .et-menu > li.current_page_item > a::after {
		display: none;
	}

	.highland-menu-underline {
		display: none;
	}
}