/*
 * Visualsoft brand: one header for every page.
 *
 * The theme uses a see-through header (27% dark tint) that only reads well
 * over a dark banner; on pages that start with a light section the white
 * menu text fades into the page. Here the header is solid on every page,
 * before and after scrolling, in the navy and teal of the VisualBase and
 * Genesis pages. Page layout is unchanged: the header keeps its height.
 */

:root {
	--vs-navy: #0a1628;
	--vs-navy-2: #12283f;
	--vs-teal: #00c4b4;
	--vs-menu: #ffffff;
	--vs-menu-dim: #c9d6e3;
}

/* Header bar: same colour everywhere, before and after scrolling */
#main-header,
#main-header.et-fixed-header,
.et_transparent_nav #main-header,
.et_transparent_nav #main-header.et-fixed-header,
#main-header .et-search-form,
.et-fixed-header .et-search-form {
	background-color: var(--vs-navy) !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px rgba(10, 22, 40, 0.18) !important;
}

#top-header {
	background-color: var(--vs-navy-2) !important;
}

/* Top-level menu items */
#top-menu > li > a,
.et-fixed-header #top-menu > li > a,
.et_transparent_nav #top-menu > li > a {
	color: var(--vs-menu) !important;
	opacity: 1 !important;
}

#top-menu > li > a:hover,
.et-fixed-header #top-menu > li > a:hover {
	color: var(--vs-teal) !important;
}

/* Where you are: teal text with a thin underline (not colour alone) */
#top-menu > li.current-menu-item > a,
#top-menu > li.current-menu-ancestor > a,
#top-menu > li.current_page_item > a,
.et-fixed-header #top-menu > li.current-menu-item > a,
.et-fixed-header #top-menu > li.current-menu-ancestor > a {
	color: var(--vs-teal) !important;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
}

/* Dropdowns: white panel, navy text, teal hover */
#main-header .nav li ul {
	background-color: #ffffff !important;
	border-top: 3px solid var(--vs-teal) !important;
}

#main-header .nav li ul a,
.et-fixed-header #top-menu li li a {
	color: var(--vs-navy) !important;
}

#main-header .nav li ul a:hover {
	background-color: #eef6f5 !important;
	color: #00786f !important;
}

/* Search and cart icons, mobile menu button */
#et_search_icon:before,
#et_top_search .et-search-form input,
.et_close_search_field:after,
.mobile_menu_bar:before,
.et-fixed-header #et_search_icon:before,
.et-fixed-header .mobile_menu_bar:before {
	color: var(--vs-menu) !important;
}

/* Mobile menu panel */
#main-header .et_mobile_menu {
	background-color: var(--vs-navy) !important;
	border-top: 3px solid var(--vs-teal) !important;
}

#main-header .et_mobile_menu li a,
.et_mobile_menu li a {
	color: var(--vs-menu) !important;
	border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.et_mobile_menu li a:hover,
.et_mobile_menu .menu-item-has-children > a {
	background-color: rgba(255, 255, 255, 0.06) !important;
}

.et_mobile_menu li li a {
	color: var(--vs-menu-dim) !important;
}

/* Keyboard focus is always visible */
#top-menu a:focus-visible,
.et_mobile_menu a:focus-visible {
	outline: 2px solid var(--vs-teal);
	outline-offset: 3px;
}