/* HEADER */

.HEADER {
	height: 100%;
	transition: background 0.25s;
	background: #fff;
	box-shadow: var(--box-shadow);
}

.HEADER .b-frame {
	padding-top: 0;
	padding-bottom: 0;
	height: 100%;
	max-width: 1200rem;
}

.HEADER .container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

.HEADER .logo {
	flex: 0 0 auto;
	width: 170rem;
	height: 50rem;
	background: url(/wp-content/themes/wp-parchment/assets/images/Logo-Parchment-Instructure.png) no-repeat center / contain;
}

.HEADER .nav-trigger {
	display: none;
	flex: 0 0 auto;
	width: 20rem;
	height: 20rem;
	text-indent: -9999rem;
	background: url(/wp-content/themes/wp-parchment/assets/images/ui-nav.svg) no-repeat center / contain;
}

.HEADER ul {
	list-style: none;
	padding-inline-start: 0;
}

.HEADER ul li {
	padding-left: 0;
}

.HEADER ul li::marker {
	content: '';
}

.HEADER nav .a {
	color: var(--dark-blue);
	cursor: default;
	pointer-events: none;
}

.HEADER nav .a::after {
	content: "";
    display: inline-block;
    vertical-align: middle;
    width: 12rem;
    height: 8rem;
    margin: -1rem 0 0 6rem;
    background: url(/wp-content/themes/wp-parchment/assets/images/ui-expand.svg) no-repeat center / 100%;
}

.HEADER nav a:not(.b-button) {color: var(--black);}
.HEADER nav a:not(.b-button):hover {color: blue;}

.HEADER nav > ul {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.HEADER nav > ul > li {
	flex: 0 0 auto;
	position: relative;
	margin: 30rem 0 0 20rem;
	padding-bottom: 30rem;
	font-size: 16rem;
	font-weight: 700;
	color: var(--dark-blue);
}

.HEADER nav > ul > li:focus-visible {
	border: 2px solid var(--dark-blue);
}

/*.HEADER nav > ul > li:last-child {margin-right: 40rem;}*/

/*.HEADER nav > ul > li > .b-button.alt-blue {
	margin: 0 0 0 25rem;
}*/

.HEADER nav > ul > li > button span {
	padding-bottom: 5rem;
}

.HEADER nav > ul > li:hover > button span {
	border-bottom: 2rem solid var(--dark-blue);
}

.HEADER nav > ul > li > a:not(.b-button),
.HEADER nav > ul > li > .with-icon {
	display: inline;
	font-weight: 700;
	text-decoration: none;
	color: var(--dark-blue);
	padding-bottom: 5rem;
}

.HEADER nav > ul > li > a:not(.b-button):hover,
.HEADER nav > ul > li > .with-icon:hover {
	color: var(--dark-blue);
	border-bottom: 2rem solid var(--dark-blue);
}

.HEADER nav > ul > li > .with-icon > img {
	display: inline;
	width: 25rem;
	height: 25rem;
/*	padding-right: 5rem;*/
    vertical-align: bottom;
}

.HEADER nav > ul > li > .with-icon::after {
	display: none;
}

/* links */

.HEADER nav > ul > li > .dropdown {
	display: block !important;
	position: absolute;
	top: 100%;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transform: translate(0, 40rem);
	pointer-events: none;
	transition: opacity 0.25s, transform 0.25s;
	min-width: 300rem;
	padding-top: 20rem;
	box-shadow: 0 20rem 20rem 0 rgba(0,0,0,0.07);
	border-radius: 0 0 10rem 10rem;
}

/* .HEADER nav > ul > li:hover > .dropdown,
.HEADER nav > ul > li:focus-within > .dropdown {
	opacity: 1;
	transform: translate(0, -30rem);
	pointer-events: auto;
} */

.HEADER nav > ul > li.enter-enabled > .dropdown,
.HEADER nav > ul > li:focus-within.enter-enabled > .dropdown {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -30rem);
	pointer-events: auto;
}

.HEADER button {
	all: unset;
	cursor: pointer;
}

.HEADER button:focus-visible {
	border: 2px solid var(--dark-blue);
	border-radius: 2px;
}


.HEADER nav > ul > li > .dropdown .links {
	background: var(--white);
	border-top: 0.5rem solid #ccc;
	border-radius: 0 0 10rem 10rem;
}

.HEADER nav > ul > li > .dropdown li {
	padding: 25rem;
}

.HEADER nav > ul > li > .dropdown .links > li:last-child {
	border-radius: 0 0 10rem 10rem;
}

.HEADER nav > ul > li > .dropdown .links > li:hover {
	background: var(--light-blue);
	text-decoration: underline;
}

.HEADER nav > ul > li > .dropdown .links > .has-sublinks:hover {
	text-decoration: none;
}

.HEADER nav > ul > li > .dropdown .links > li > a {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.HEADER nav > ul > li > .dropdown .links > li:hover > a {
	color: var(--dark-blue);
}

.HEADER nav > ul > li > .dropdown .links > li > a.has-sublinks {
	cursor: pointer;
	pointer-events: none;
	position: relative;
}

.HEADER nav > ul > li > .dropdown .links > li > a > img {
	width: 40rem;
	margin-right: 20rem;
}

.HEADER nav > ul > li > .dropdown .links > li span {
	width: auto;
}

.HEADER nav > ul > li > .dropdown .links a.has-sublinks::after {
	content: "";
    display: block;
    vertical-align: middle;
    width: 12rem;
    height: 8rem;
    margin: -1rem 0 0 6rem;
    background: url(/wp-content/themes/wp-parchment/assets/images/ui-expand.svg) no-repeat center / 100%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: rotate(-90deg);
}

.HEADER nav > ul > li > .dropdown .links li:hover a.has-sublinks::after {
    background: url(/wp-content/themes/wp-parchment/assets/images/ui-expand-hover.svg) no-repeat center / 100%;
	transform: rotate(90deg);
}


/* sublinks */

.HEADER nav > ul > li .sublinks {
	min-width: 320rem;
	height: calc(100% - 20rem);
	border-radius: 0 0 10rem 0;
	background: var(--light-blue);
	box-shadow: 10rem 20rem 20rem 0 rgba(0,0,0,0.07);
	position: absolute;
	top: 20rem;
	left: 290rem;
	opacity: 0;
}

.HEADER nav > ul > li .sublinks > li {
	/* padding: 20rem 40rem 20rem 25rem; */
	padding: 0;
}

.HEADER nav > ul > li .sublinks a {
	text-decoration: none;
}

.HEADER nav > ul > li .sublinks .title {
	font-weight: 500;
	color: var(--black);
}

.HEADER nav > ul > li .sublinks li:hover > a > .title {
	text-decoration: underline;
	color: var(--dark-blue);
}

.HEADER nav > ul > li .sublinks > li > a {
	position: relative;

	padding: 20rem 40rem 20rem 25rem;
	box-sizing: border-box;
	display: inline-block;
	width: 100%;
}

.HEADER nav > ul > li .sublinks > li.has-subsublinks:hover > a::after, 
.HEADER nav > ul > li .sublinks > li.has-subsublinks.focus > a::after {
	content: '';
	display: block;
	background: var(--white);
	width: 34rem;
	height: 34rem;
	transform: translate(6rem, 0) rotate(45deg);
	position: absolute;
	top: 30%;
	right: 0;
	z-index: 1;
	border: none;
	outline: none;
}

.HEADER nav > ul > li .sublinks > li.has-subsublinks:focus > a::after,
.HEADER nav > ul > li .sublinks > li.has-subsublinks:focus-within > a::after,
.HEADER nav > ul > li .sublinks > li.has-subsublinks> a:focus::after,
.HEADER nav > ul > li .sublinks > li.has-subsublinks > a:focus-within::after {
	border: none;
	outline: none;
}

.HEADER nav > ul > li .sublinks .description {
	font-size: 14rem;
	font-weight: 400;
	margin-top: 10rem;
	color: var(--black);
}

.HEADER nav > ul > li .sublinks img {
	position: absolute;
	width: 100rem;
	bottom: 20rem;
	right: 30rem;
	opacity: 0.2;
}



/* sublinks */

.HEADER nav > ul > li .subsublinks {
	min-width: 300rem;
	height: 100%;
	border-radius: 0 0 10rem 0;
	background: var(--white);
	box-shadow: 10rem 20rem 20rem 0 rgba(0,0,0,0.07);
	position: absolute;
	top: 0rem;
	left: 310rem;
	opacity: 0;
}

.HEADER nav > ul > li .subsublinks > li {
	padding: 10rem 30rem;
}

.HEADER nav > ul > li .subsublinks > li:first-child {padding-top: 30rem;}

.HEADER nav > ul > li .subsublinks a {
	text-decoration: none;
}

.HEADER nav > ul > li .subsublinks .title {
	font-weight: 500;
	color: var(--black);
}

.HEADER nav > ul > li .subsublinks a:hover .title {
	text-decoration: underline;
	color: var(--dark-blue);
}



/* resource */

.HEADER nav > ul > li > .dropdown .resource {
	position: absolute;
	height: auto;
	min-width: 250rem;
	background: var(--light-blue);
/*	border-radius: 0 0 10rem 0;*/
	padding: 25rem;
	top: 0;
	left: 290rem;
}

.HEADER nav > ul > li > .dropdown .resource a {
	text-decoration: none;
}

.HEADER nav > ul > li > .dropdown .resource span {
	font-size: 20rem;
	font-weight: 600;
	color: var(--dark-blue);
}

.HEADER nav > ul > li > .dropdown .resource .image {
	margin-top: 15rem;
}

.HEADER nav > ul > li > .dropdown .resource img {
	aspect-ratio: 3/2;
    object-fit: cover;
}

.HEADER nav > ul > li > .dropdown .resource p {
	font-weight: 400;
	color: var(--black);
}



/* slide down */

.b-page[data-scroll] .HEADER {background: #fff;}
.b-page[data-scroll] .HEADER .megamenu > ul::before {height:20rem;}

/* nav open */

#toggle-nav:checked ~ .b-page .HEADER {background: #fff;}
#toggle-nav:checked ~ .b-page .HEADER .nav-trigger {background: url(/wp-content/themes/wp-parchment/assets/images/ui-close.svg) no-repeat center / contain;}

/* fix to make sure the nav can always be closed */

#toggle-nav:checked ~ .b-page .HEADER .nav-trigger {display: block;}
#toggle-nav:checked ~ .b-page .HEADER nav {display: none;}

@media screen and (max-width: 960px) {
	.HEADER .nav-trigger {display: block;}
	.HEADER nav {display: none;}
}






/* LANGUAGE DROPDOWN */


.HEADER nav > ul > li.alt-language > button > .a {
	display: flex;
	align-items: center;
	justify-content: left;
}

.HEADER nav > ul > li.alt-language > button > .a > .img-wrapper {
	height: 38rem;
	aspect-ratio: 690/453;
}

.HEADER nav > ul > li.alt-language > button > .a > .img-wrapper > img {
	width: inherit;
	height: inherit;
}


/* LANGUAGE DROPDOWN - dropdown */

.HEADER nav > ul > li > .dropdown.alt-language {
	left: auto;
	right: 0;
	min-width: unset;
}

.HEADER nav > ul > li > .dropdown.alt-language > ul {
	padding-top: 13rem;
	padding-bottom: 13rem;
}

.HEADER nav > ul > li > .dropdown.alt-language > ul > li.language-option {
	position: relative;
	line-height: 0;
}

.HEADER nav > ul > li > .dropdown.alt-language > ul > li.language-option > a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16rem;
}

.HEADER nav > ul > li > .dropdown.alt-language > ul > li.language-option > a > :where(.flag-img-wrapper, .temp-flag) {
	height: 38rem;
	aspect-ratio: 690/453;
	margin-right: 0;
}

.HEADER nav > ul > li > .dropdown.alt-language > ul > li.language-option > a > :where(.flag-img-wrapper, .temp-flag) + span {
	font-weight: 600;
	flex-grow: 1;
	text-align: left;
}

.HEADER nav > ul > li > .dropdown.alt-language > ul > li.language-option > a > .flag-img-wrapper > img {
	display: block;
	/* height: 38rem;
	aspect-ratio: 690/453; */
	width: 100%;
	height: 100%;
	margin-right: 0;
}

.HEADER nav > ul > li > .dropdown.alt-language > ul > li.language-option > a > .temp-flag {
	display: flex;
	align-items: center;
	justify-content: center;
}