/* HEADER */
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: var(--branding-white);
	border-bottom: 5px solid;
	border-image: linear-gradient(to right, var(--branding-red), var(--branding-blue)) 1;
	z-index: 100;
	height: var(--header-height);
}

/* NAV */
.nav {
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

/* LOGO */
.nav-logo {
	color: var(--branding-red);
	font-size: 28px;
	font-weight: 900;
	font-style: italic;
	letter-spacing: 2px;
	border-radius: 4px;
}

/* NAVIGATION */
.nav-list {
	display: flex;
	height: 100%;
	justify-content: space-between;
	column-gap: 48px;
}

.nav-list>li {
	display: flex;
	height: 100%;
}

.nav-link,
.dropdown-trigger,
.dropdown-nav-link,
.sub-dropdown-trigger,
.sub-dropdown-nav-link {
	display: flex;
	align-items: center;
	font-weight: var(--font-semi-bold);
	height: 100%;
	transition: all 0.3s;
}

.nav-link,
.dropdown-trigger,
.sub-dropdown-trigger {
	column-gap: 3px;
}

.nav-link:hover,
.dropdown-trigger:hover {
	color: var(--branding-red);
}

.dropdown-arrow,
.sub-dropdown-arrow {
	display: inline-flex;
	font-size: 1rem;
	font-weight: initial;
	transition: transform .4s;
}

.link-with-dropdown:hover .dropdown-arrow {
	transform: rotate(90deg);
}

.link-with-sub-dropdown:hover .sub-dropdown-arrow {
	transform: rotate(-90deg);
}

.dropdown-nav-link,
.sub-dropdown-trigger,
.sub-dropdown-nav-link {
	padding: 16px;
	width: 100%;
}

.dropdown-nav-link,
.sub-dropdown-trigger {
	color: var(--branding-white);
	cursor: pointer;
}

.dropdown-container,
.sub-dropdown-container {
	position: relative;
}

.dropdown-nav-list,
.sub-dropdown-nav-list {
	position: absolute;
	min-width: 175px;
	width: max-content;
	background-color: var(--branding-blue);
	visibility: hidden;
	opacity: 0;
	max-height: 0;
}

.dropdown-nav-list {
	top: calc(100% + 9px);
	transition: visibility 0.2s, top 0.2s, opacity 0.3s ease, max-height 0.3s ease;
}

.sub-dropdown-nav-list {
	left: calc(100% + 9px);
	top: 0;
	background-color: var(--branding-green);
	transition: visibility 0.2s, left 0.2s, opacity 0.3s ease, max-height 0.3s ease;
}

.dropdown-nav-link:hover,
.sub-dropdown-trigger:hover,
.sub-dropdown-nav-link:hover {
	background-color: #4C3C01;
}

.sub-dropdown-nav-link:hover {
	color: var(--branding-white);
}

.link-with-dropdown:hover ul.dropdown-nav-list {
	top: 100%;
	opacity: 1;
	visibility: visible;
	max-height: 500px;
}

.link-with-sub-dropdown:hover ul.sub-dropdown-nav-list {
	top: 0;
	left: 100%;
	opacity: 1;
	visibility: visible;
	max-height: 500px;
}

/* CONTACT INFO */
.contact-info {
	font-size: 14px;
	display: flex;
	align-items: center;
	letter-spacing: 1px;
}

.contact-info a {
	color: var(--text-color-black);
}

.contact-info a:not(:last-child) {
	padding-right: 16px;
}

/* MOBILE NAV TOGGLE */
.mobile-nav-toggle {
	position: relative;
	width: 32px;
	height: 32px;
	display: none;
	align-items: center;
	justify-content: flex-end;
}

.mobile-nav-icon {
	position: absolute;
	width: max-content;
	height: max-content;
	inset: 0;
	margin: auto;
	font-size: 1.25rem;
	cursor: pointer;
	transition: opacity .1s, visibility .1s, transform .4s;
}

i.mobile-nav-icon.close {
	opacity: 0;
	visibility: hidden;
}

.show-mobile-icons .mobile-nav-icon.burger {
	opacity: 0;
	visibility: hidden;
	transform: rotate(90deg);
}

.show-mobile-icons .mobile-nav-icon.close {
	opacity: 1;
	visibility: visible;
	transform: rotate(90deg);
}