@layer components {
	header,
	[role="banner"]{

	}

	.site-header {
		font-family: var(--ff-secondary);
		background-color: hsl(var(--clr-white));
		padding-block: var(--space-s);
		overflow: visible;
		position: relative;
		z-index: 2;
	}

	.site-header > div {
		display: flex;
		gap: 0 var(--space-l);
		align-items: center;
		justify-content: space-between;
	}

	@media(min-width: 1025px) {
		.site-header > div {
			gap: 0 var(--space-2xl);
			align-items: flex-end;
		}
	}

	@media(min-width: 1025px) and (max-width: 1120px) {
		.site-header > div {
			flex-wrap: wrap;
		}
	}

	.site-header .utility-navigation {
		position: absolute;
		top: 126px;
		width: 100%;
		right: -100%;
		background-color: rgba(255, 255, 255, .9);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		transition: right .3s;
		grid-column: unset;
	}

	.site-header .utility-navigation.open {
		right: 0;
	}

	@media(min-width: 1025px) {
		.site-header .utility-navigation {
			position: static;
			width: auto;
			background-color: transparent;
			backdrop-filter: none;
			display: flex;
			justify-content: flex-end;
			gap: 2em;
			grid-column: main;
		}
	}

	.site-header .utility-navigation ul {
		flex-direction: column;
		align-items: center;
		height: 100%;
		gap: var(--space-s);
		padding-left: 0;
	}

	.site-header .utility-navigation > ul > li > a,
	.site-header .utility-navigation span {
		text-transform: uppercase;
	}

	@media(min-width: 1025px) {
		.site-header .utility-navigation ul {
			padding-top: 0;
			flex-direction: row;
			align-items: flex-start;
			justify-content: flex-end;
			height: auto;
			gap: var(--space-m);
		}
	}

	.site-header .utility-navigation li {
		font-size: 1.25rem;
		width: 100%;
		border-bottom: 1px solid  hsl(220, 4%, 85%);
		margin-bottom: 0;
	}

	@media(min-width: 1025px) {
		.site-header .utility-navigation li {
			font-size: .9375rem;
			width: auto;
			text-align: left;
			padding-bottom: 0;
			border: none;
			position: relative;
		}
	}

	.site-header .utility-navigation li:last-child {
		border: none;
	}

	.site-header .utility-navigation li.has-children > a:after {
		content: '\00a0\00a0\f054';
		display: inline-block;
		font-family: FontAwesome;
		font-size: .8em;
		transition: transform .3s;
		transform-origin: 13px 13px;
	}

	.site-header .utility-navigation li.has-children.open > a:after {
		transform: rotate(90deg);
	}

	.site-header .utility-navigation li.has-children.open ul {
		display: block;
	}

	.site-header .utility-navigation a,
	.site-header .utility-navigation ul span {
		color: hsl(var(--clr-dark-gray));
		white-space: pre;
		padding: var(--space-s) 2em;
		display: block;
	}

	.site-header .utility-navigation ul span {
		background-color: hsl(0, 0%, 82%);
	}

	@media(min-width: 1025px) {
		.site-header .utility-navigation a,
		.site-header .utility-navigation ul span {
			padding: 0;
		}
	}

	.site-header .utility-navigation > ul > li > a {
		display: none;
	}

	@media(min-width: 1025px) {
		.site-header .utility-navigation > ul > li > a {
			display: inline;
		}
	}

	.site-header .utility-navigation a:hover {
		text-decoration: underline;
		text-decoration-color: hsl(var(--clr-dark-gold));
		text-underline-offset: 6px;
		text-decoration-skip: none;
		text-decoration-skip-ink: none;
	}

	.site-header .utility-navigation li ul {
		display: block;
		position: static;
	}

	@media(min-width: 1025px) {
		.site-header .utility-navigation li ul {
			background-color: hsl(0, 0%, 97%);
			position: absolute;
			top: 2.5em;
			z-index: 1;
			box-shadow: -1px 2px 4px rgba(0, 0, 0, .1);
			display: none;
		}
	}

	@media(min-width: 1025px) {
		.site-header .utility-navigation li ul a,
		.site-header .utility-navigation li ul span {
			padding: .75em 1.125em;
			display: block;
			white-space: nowrap;
		}

		.site-header .utility-navigation li ul span {
			background-color: hsl(0, 0%, 82%);
			font-size: .825rem;
		}

		.site-header .utility-navigation li ul a:hover {
			text-decoration: none;
			border-left: 4px solid hsl(var(--clr-medium-teal));
			padding-left: calc(1.125em - 4px);
		}
	}

	.site-header .menu-search {
		display: none;
		position: relative;
	}

	@media(min-width: 1025px) {
		.site-header .menu-search {
			display: flex;
		}
	}

	.site-header .header-search-toggle {
		font-family: FontAwesome;
	}

	.site-header .menu-search .form-wrap {
		max-width: 0;
		overflow: hidden;
		position: absolute;
		right: -23px;
		top: -1em;
		transition: max-width .3s;
	}

	.site-header .menu-search .input-wrap {
		position: relative;
	}

	.site-header .menu-search .clear-search {
		position: absolute;
		font-weight: 600;
		right: .75em;
		top: 3px;
		font-family: FontAwesome;
		cursor: pointer;
		display: none;
	}

	.site-header .menu-search input.has-value + .clear-search {
		display: block;
	}

	.site-header .menu-search .form-wrap.open {
		max-width: 675px;
		width: auto;
	}

	.site-header .menu-search .form-wrap.open + .header-search-toggle {
		color: white;
		position: relative;
		z-index: 1;
	}

	.site-header .menu-search form {
		background-color: hsl(var(--clr-capital-blue));
		display: flex;
		align-items: center;
		gap: 1em;
		padding: .666em 2.5em .666em 2em;
		border-radius: 27px;
	}

	.site-header .menu-search label {
		width: 0;
		overflow: hidden;
		color: white;
	}

	.site-header .menu-search input {
		height: 1.875em;
		font-size: .9375em;
		width: 465px;
		border: 1px solid hsl(var(--clr-deep-teal));
	}

	.site-header .menu-search input[type="search"]::-webkit-search-cancel-button {
		-webkit-appearance: none;
	}

	.site-header .menu-search button {
		font-size: .9375em;
		text-transform: uppercase;
		padding: .25em 1em;
	}

	.site-header .main-navigation {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 126px;
		width: 100%;
		right: -100%;
		background-color: rgba(255, 255, 255, .9);
		backdrop-filter: blur(10px);
		transition: right .3s;
		overflow: scroll;
	}

	@media(min-width: 1025px) and (max-width: 1099px) {
		.site-header .main-navigation {
			margin-left: auto;
			margin-top: 1em;
		}
	}

	.site-header .main-navigation.open {
		right: 0;
	}

	@media(min-width: 1025px) {
		.site-header .main-navigation {
			display: block;
			position: static;
			width: auto;
			background-color: transparent;
			backdrop-filter: none;
			overflow: visible;
		}
	}

	.site-header .main-navigation ul {
		flex-direction: column;
		flex: 0 0 calc(100% - 104px);
		align-items: center;
		gap: 0;
		padding-left: 0;
	}

	@media(min-width: 1025px) {
		.site-header .main-navigation ul {
			flex-direction: row;
			align-items: flex-start;
			height: auto;
			gap: var(--space-m);
		}
	}

	.site-header .main-navigation li {
		font-size: 1.15rem;
		width: 100%;
		border-bottom: 1px solid  hsl(220, 4%, 85%);
		margin-bottom: 0;
	}

	@media(min-width: 1025px) {
		.site-header .main-navigation li {
			width: auto;
			text-align: left;
			padding-bottom: 0;
			border: none;
			position: relative;
			margin-bottom: var(--space-2xs);
			border-color: hsl(var(--clr-light-gray));
		}
	}

	.site-header .main-navigation li:last-child {
		border: none;
	}

	.site-header .main-navigation li.has-children > a:after {
		content: '\00a0\00a0\f054';
		display: inline-block;
		font-family: FontAwesome;
		font-size: .8em;
		transition: transform .3s;
		transform-origin: 13px 13px;
		float: right;
	}

	@media(min-width: 1025px) {
		.site-header .main-navigation li.has-children > a:after {
			float: none;
		}
	}

	.site-header .main-navigation li.has-children.open > a:after {
		transform: rotate(90deg);
	}

	.site-header .main-navigation a {
		color: hsl(var(--clr-dark-gray));
		white-space: pre;
		padding: var(--space-s) 2em;
		display: block;
		text-decoration-color: transparent;
		transition: text-decoration-color .3s;
	}

	@media(min-width: 1025px) {
		.site-header .main-navigation a {
			padding: 0;
			line-height: 1;
		}
	}

	.site-header .main-navigation > ul > li.current > a,
	.site-header .main-navigation > ul > li.current-ancenstor > a,
	.site-header .main-navigation li.has-children.open > a,
	.site-header .main-navigation a:hover {
		text-decoration: underline;
		text-decoration-color: hsl(var(--clr-dark-gold));
		text-underline-offset: 6px;
		text-decoration-skip: none;
		text-decoration-skip-ink: none;
	}

	.site-header .main-navigation li ul {
		position: static;
	}

	@media(min-width: 1025px) {
		.site-header .main-navigation li ul {
			background-color: white;
			position: absolute;
			top: 2.5em;
		}
	}

	.site-header .main-navigation li ul a {
		background-color: hsla(var(--clr-medium-teal), .25);
		mix-blend-mode: darken;
		border-bottom: 1px solid  hsl(0, 0%, 89%);
	}

	@media(min-width: 1025px) {
		.site-header .main-navigation li ul a {
			padding: .75em 1.125em;
			display: block;
			white-space: nowrap;
			background-color: white;
			border-bottom-color: hsl(var(--clr-light-gray));

			/* border-left: 0 solid hsl(var(--clr-medium-teal));
			transition: border-left .3s, padding-left .3s; */
		}

		.site-header .main-navigation li ul a:hover {
			text-decoration: none;
			border-left: 4px solid hsl(var(--clr-medium-teal));
			padding-left: calc(1.125em - 4px);
		}
	}

	.site-header .site-title {

	}

	.site-header .site-title a {
		display: block;
		width: 170px;
		height: 0;
		padding-top: 47px;
		overflow: hidden;
		background-image: url(../../../images/StadiaCapitalGroup-headerLogo.png);
		background-size: contain;
	}

	@media(min-width: 1025px) {
		.site-header .site-title a {
			width: 225px;
			padding-top: 61px;
		}
	}

	.site-header .call-button {
		position: absolute;
		width: 100%;
		left: 0;
		right: 0;
		bottom: -44px;
		font-size: 1rem;
		border-radius: 0;
		padding-bottom: .5em;
		padding-top: .5em;
	}

	@media(min-width: 1025px) {
		.site-header .call-button {
			position: static;
			font-size: 1.25em;
			width: auto;
			border-radius: 35px;
			padding-bottom: .75em;
			padding-top: .75em;
		}
	}

	.site-header .skip-to-main {
		position: absolute;
		height: 0;
		top: 0;
		overflow: hidden;
	}

	.site-header .skip-to-main:focus {
		height: auto;
	}

	.site-header .burger,
	.site-header .logburger {
		font-family: FontAwesome;
		text-align: center;
		font-size: 2em;
		font-weight: 100;
		width: auto;
	}

	.site-header .logburger {
		margin-left: auto;
	}

	@media(min-width: 1025px) {
		.site-header .burger,
		.site-header .logburger {
			display: none;
		}
	}

	.site-header .burger span.label,
	.site-header .logburger span.label {
		display: block;
		text-transform: uppercase;
		font-size: .75rem;
		font-weight: 400;
		font-family: var(--ff-secondary);
	}

	#mobile-search-form {
		background-color: hsl(var(--clr-deep-teal));
		padding: 1.75em;
		display: flex;
		gap: 1em;
	}

	@media(min-width: 1025px) {
		#mobile-search-form {
			display: none;
		}
	}

	#mobile-search-form label {
		display: none;
	}

	#mobile-search-form input {
		flex: 1;
	}

	#mobile-search-form button {
		text-transform: uppercase;
		padding: .5em 1.5em;
	}
}