/*------------------------------------------------------------------
header.css
Last edited: 9/17/25
[Table of contents]

1. HEADER
2. MAIN MENU
3. TOP MENU
4. SEARCH
5. MOBILE MENU


100. MEDIA QUERIES
    100b. SMALL DEVICES (tablets, 768px and up)
    100c. MEDIUM DEVICES (desktops, 992px and up)
    100d. LARGE DEVICES (large desktops, 1200px and up)
    100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)

[Notes]
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
1. HEADER
-------------------------------------------------------------------*/
.site-header {
	background:#ffffff;
	border-bottom: solid 1px #e3e3e3;
	padding: 0;
	position: relative;
	z-index: 100;
}
.site-header-wrapper {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
}
.site-header .logo-wrapper img {
	margin: 0;
    width: 250px;
}

/*------------------------------------------------------------------
2. MAIN MENU
-------------------------------------------------------------------*/
.site-navigation {
	justify-content: flex-end;
	padding: 0;
	width: 100%;
}
.site-navigation ul#main-menu {
	display: flex;
	margin: 0;
}
.site-navigation ul#main-menu li {
    display: block;
	margin: 0 16px;
    padding: 0;
}
.site-navigation ul#main-menu li:first-child {
	margin-left: 0;	
}
.site-navigation ul#main-menu li:last-child {
	margin-right: 0;	
}
.site-navigation ul#main-menu li a {
	color: var(--theme-color-light);
	display: block;
	font-weight: 600;
	padding: 15px;
}
.site-navigation ul#main-menu li:hover, 
.site-navigation ul#main-menu li:hover > a,
.site-navigation ul#main-menu li.current-menu-item a,
.site-navigation ul#main-menu li.current_page_item a, 
.site-navigation ul#main-menu li.current-menu-ancestor a,
.site-navigation ul#main-menu a:hover, 
.site-navigation ul#main-menu a:active, 
.site-navigation ul#main-menu a:focus {
	color: var(--theme-color-green);
    position: relative;
	text-decoration: none;
}
.site-navigation ul#main-menu ul.sub-menu {
    display: none;
	left: -10px;
	margin: 0;
    position: absolute;
    top: 100%;
    z-index: 100;
}
.site-navigation ul#main-menu li.align-right ul.sub-menu {
	right: 0;
}
.site-navigation ul#main-menu > .menu-item-has-children:hover ul.sub-menu {
	background-color: var(--theme-color-foam);
	background-color: #dcf3fd;
	border: solid 1px #e3e3e3;
	border-top: none;
    display: block;
	padding: 0;
	width: 275px;
}
.site-navigation ul#main-menu > .menu-item-has-children > ul.sub-menu li {
    display: block;
    float: none;
	margin: 0;
    padding: 15px 20px 5px 25px;
	position: relative;
}
.site-navigation ul#main-menu > .menu-item-has-children > ul.sub-menu li a {
	color: var(--theme-color-blue);
	padding: 0;
	text-transform: none;	
}
.site-navigation ul#main-menu > .menu-item-has-children > ul.sub-menu li a:hover,
.site-navigation ul#main-menu ul.sub-menu li.current-menu-item > a,
.site-navigation ul#main-menu ul.sub-menu li.current_page_item > a {
	color: var(--theme-color-orange);
}
.site-navigation ul#main-menu>.menu-item-has-children ul.sub-menu ul.sub-menu {
    border: none;
	left: 0;
    margin: 3px 0;
    position: relative;
    width: 100%;
}
.site-navigation ul#main-menu>.menu-item-has-children ul.sub-menu ul.sub-menu li {
	padding: 4px 0 4px 15px;
}
.site-navigation ul#main-menu>.menu-item-has-children ul.sub-menu ul.sub-menu li a {
	font-size: 0.8em;
}

/*------------------------------------------------------------------
3. TOP MENU
-------------------------------------------------------------------*/
.top-nav-wrapper {
	align-items: center;
	display: flex;
    float: right;
}
ul#top-menu {
	margin: 0;
	padding: 0 0 5px;
}
ul#top-menu li {
    /*border-right: 1px solid #000000;*/
    padding: 0 10px;
}
ul#top-menu li:last-child {
	border-right: none;
	padding: 0 0 0 10px;
}

.top-nav-wrapper .menu li {
    display: inline-block;
	letter-spacing: normal;
	margin: 0;
    padding: 0 20px 0 0;
}
ul#top-menu li a {
    color: var(--theme-color-blue);
	font-weight: 500;
}
.top-nav-wrapper .menu li:last-child {
	padding-right: 0;	
}
.top-nav-wrapper .menu li a {
    font-size: 16px;
	letter-spacing: normal;
	text-transform: none;
}
/*------------------------------------------------------------------
4. SEARCH
-------------------------------------------------------------------*/
.top-nav-wrapper form.searchform {
	display: flex;
	float: right;
	margin-left: 10px;
	position: relative;
}
.top-nav-wrapper form.searchform label {
	left: -36px;
	position: relative;
}
.search-toggle { 
	display: none;
}
.top-nav-wrapper form.searchform .search-toggle {
	background: none;
	border: none;
    cursor: pointer;
	display: block;
	margin-left: 6px;
    padding: 6px;
    text-decoration: none;
}
.top-nav-wrapper form.searchform .search-toggle [class^="icon-"], 
.top-nav-wrapper form.searchform .search-toggle [class*=" icon-"] {
	color: var(--theme-color-blue);
	font-size: 18px;
	padding: 0;
}
.top-nav-wrapper form.searchform .search-toggle:hover [class^="icon-"], 
.top-nav-wrapper form.searchform .search-toggle:hover [class*=" icon-"]
.top-nav-wrapper form.searchform .search-toggle.active [class^="icon-"], 
.top-nav-wrapper form.searchform .search-toggle.active [class*=" icon-"] {
	color: var(--theme-color-orange);
}
.top-nav-wrapper form.searchform input[type="text"] {
	border: solid 1px #e3e3e3;
	opacity: 0;
	font-size: 16px;
	font-weight: 400;
	left: 0;
	margin-left: 15px;
	padding: 4px;
	position: absolute;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
	width: 0px;
	z-index: -1;
}
.top-nav-wrapper form.searchform input[type="text"].show-search {
	display: block;
	left: -352px;
	opacity: 1;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
	width: 340px;
	z-index: 2;
}
.top-nav-wrapper form.searchform input[type="submit"] {
	display: none;	
}
/*------------------------------------------------------------------
5. MOBILE MENU
-------------------------------------------------------------------*/
/* Mobile Menu Search Form */
span.search-icon {
	background: none;
	border-radius: initial;
	color: var(--theme-color-blue);
	cursor: pointer;
	float: right;
	font-size: 24px;
	margin: 9px 2px 0 0;
	padding: 10px;
	position: relative;
	z-index: 20;
}
span.search-icon:hover {
	background: none;
}
.mobile-search-wrapper{
	display: none;
	height: 0;
	text-align: center;
}
.mobile-search-wrapper.active {
    display: inline-block;
    height: 40px;
    margin: 0 0 25px;
	width: 100%;
}
.mobile-search-wrapper .searchform {
	margin: 12px 0 0;	
}
.mobile-search-wrapper .searchform input[type=text] {
	background-image: none;
	font-size: 16px;
	margin-right: 5px;
	padding: 8px;
	width: 65%;
}
.mobile-search-wrapper .searchform ::-webkit-input-placeholder {
	color: transparent;
}
.mobile-search-wrapper .searchform :-moz-placeholder {
	color: transparent;
}
.mobile-search-wrapper .searchform ::-moz-placeholder {
	color: transparent;
}
.mobile-search-wrapper .searchform :-ms-input-placeholder {
	color: transparent;
}
.mobile-search-wrapper .searchform input[type="submit"] {
    background: var(--theme-color-blue);
	border: none;
    color: var(--theme-color-light);
	font-size: 16px;
	height: 39px;
    letter-spacing: 0.1em;
    padding: 8px 15px;
    text-transform: uppercase;	
}

/* Hamburger */
.header-mobile-menu-button {
	float: right;
}
button.menu-button {
    background: none;
    border: none;
    cursor: pointer;
    float: right;
    height: 44px;
    margin-top: 10px;
    outline: none;
    overflow: hidden;
    position: relative;
    text-indent: -900em;
    width: 50px;
}
button.menu-button::after {
    content: '';
    position: absolute;
    width: 60%;
    height: 5px;
    background: var(--theme-color-blue);
    top: 9px;
    left: 16%;
    box-shadow: 0 9px 0 var(--theme-color-blue), 0 18px 0 var(--theme-color-blue);
}
button.menu-button.active::after {
	bottom: 0;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
button.menu-button.active::before {
	top: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
button.menu-button.active::before, button.menu-button.active::after {
    box-shadow: none;
    position: absolute;
    display: block;
    height: 4px;
    background-color: var(--theme-color-blue);
    content: "";
    left: 5px;
    top: 18px;
    width: 65%;
}

/* Flexnav Base Styles */
.flexnav {
	border-top: 1px solid #dadada;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	transition: none;
	-webkit-transform-style: preserve-3d;
	list-style-type: none;
	overflow: hidden;
	margin: 0 auto;
	max-height: 0;
	width: 100%;
}
.flexnav.opacity {
	opacity: 0; 
}
.flexnav.flexnav-show {
	max-height: 2000px;
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.flexnav li {
	border-bottom: 1px solid #dadada;
	overflow: hidden;
    position: relative;
}
.flexnav li a {
	background: var(--theme-color-light);
	color: var(--theme-color-blue);
	display: block;
	font-size: var(--theme-fs-small);
	font-weight: 500;
	overflow: hidden;
	padding: .45em .75em;
    position: relative;
	text-decoration: none;
	text-transform: none;
    z-index: 2;
}
.flexnav li ul {
	list-style-type: none;
	margin: 0;
    width: 100%; 
}
.flexnav li ul li {
	border-bottom: none;
	font-size: 100%;
	overflow: hidden; 
	position: relative;
}
.flexnav li ul.flexnav-show li {
	overflow: visible; 
}
.flexnav li ul li a {
    display: block;
	padding: 0.25em 2em 0.25em 0.75em;
}
.flexnav ul li ul li a {
	background-color: var(--theme-color-foam);
	color: #021e2f;
}
.flexnav ul li ul li ul li a {
    background: #e3e3e3; 
}
.flexnav .touch-button {
	align-items: center;
	display: flex;
	height: 50px;
	justify-content: center;
	position: absolute;
    right: 15px;
	text-align: center;
	top: 0;
    width: 49px;
	z-index: 999;
}
.flexnav li ul li .touch-button {
	height: 32px;
}
.flexnav .touch-button:hover {
	cursor: pointer; 
}
.flexnav .touch-button .navicon {
	background: none;
	color: var(--theme-color-blue);
	font-size: 16px;
	margin: 0;
	position: relative; 
}
.flexnav .touch-button.active .navicon {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}
/* add mobile CSS here */

/*------------------------------------------------------------------
100. MEDIA QUERIES
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
100a. EXTRA SMALL DEVICES (phones 576px and up)
-------------------------------------------------------------------*/
@media (min-width: 576px) {
    
}
/*------------------------------------------------------------------
100b. SMALL DEVICES (tablets, 768px and up)
-------------------------------------------------------------------*/
@media (min-width: 768px) {
    
}

/*------------------------------------------------------------------
100c. MEDIUM DEVICES (desktops, 992px and up)
-------------------------------------------------------------------*/
@media (min-width: 992px) {
/*------------------------------------------------------------------
1. HEADER
-------------------------------------------------------------------*/
	.site-header-wrapper {
		padding: 15px 30px;
	}	
	.site-header .logo-wrapper img {
		height: auto;
		margin: 0;
		width: 300px;
	}
/*------------------------------------------------------------------
2. MAIN MENU
-------------------------------------------------------------------*/
	.site-navigation {
		padding: 0 30px;
	}  
}

/*------------------------------------------------------------------
100d. LARGE DEVICES (large desktops, 1200px and up)
-------------------------------------------------------------------*/
@media (min-width: 1200px) {
/*------------------------------------------------------------------
1. HEADER
-------------------------------------------------------------------*/
	.site-header-wrapper {
		padding: 15px 50px;
	}	
/*------------------------------------------------------------------
2. MAIN MENU
-------------------------------------------------------------------*/
	.site-navigation {
		padding: 0 50px;
	}  	
	.site-navigation ul#main-menu li {
		margin: 0 20px;
	}
}

/*------------------------------------------------------------------
100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)
-------------------------------------------------------------------*/
@media screen and (min-width: 1450px) {
/*------------------------------------------------------------------
1. HEADER
-------------------------------------------------------------------*/
	.site-header-wrapper {
		padding: 15px 60px;
	}	
/*------------------------------------------------------------------
2. MAIN MENU
-------------------------------------------------------------------*/
	.site-navigation {
		padding: 0 60px;
	}  	
}