/******/
/*** MENU ***/
/******/

.global-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	color: var(--color-confident-charcoal);
	background: transparent;
	transition: transform 300ms var(--ease-out), background-color 220ms ease;
}

.global-nav.scrolling_down { transform: translateY(-105%); }
.global-nav.scrolling_up { transform: translateY(0); }
body.scrolled .global-nav.scrolling_up { background: var(--color-clarity-stone); }
body.menu-open .global-nav { transform: none; }

.navigation {
	min-height: var(--nav-height);
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
}

.navigation__side {
	flex: 1 1 42%;
	min-width: 0;
}

.navigation__side--right { margin-left: auto; }
.navigation__links { margin: 0; padding: 0; list-style: none; }
.navigation__links li { list-style: none; }

.navigation__links a,
.language-switcher a,
.language-switcher span {
	font-family: var(--type-mono);
	font-size: clamp(0.6rem, 0.72vw, 0.72rem);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-widest);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.language-switcher {
	flex: 0 0 auto;
	padding: 0.1rem;
	border: 0.0625rem solid color-mix(in srgb, currentColor 25%, transparent);
}

.language-switcher a,
.language-switcher span { padding: 0.1rem 0.3rem; }
.language-switcher [aria-current="page"] { background: var(--color-true-white); }
.language-switcher [aria-disabled="true"] { opacity: 0.5; }

.navigation__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(14rem, 22vw, 21rem);
	color: inherit;
}

.navigation__logo img { width: 100%; max-height: 3.2rem; object-fit: contain; }
.brand-wordmark {
	display: block;
	width: 100%;
	aspect-ratio: 1236 / 357;
	background: currentColor;
	-webkit-mask: url("../images/stonecrest-wordmark.svg") center / contain no-repeat;
	mask: url("../images/stonecrest-wordmark.svg") center / contain no-repeat;
}

.navigation__button,
.navigation__panel { display: none; }
body.admin-bar .global-nav { top: 32px; }

.brand-mark {
	display: inline-flex;
	width: min(100%, 13rem);
	align-items: center;
	gap: var(--gap-8);
	font-family: var(--type-headline);
	font-size: 1.8rem;
	line-height: 1;
}

.brand-mark__line {
	width: 100%;
	height: 0.0625rem;
	background: currentColor;
}

@media screen and (max-width: 64rem) {
	.navigation--mobile { z-index: 2; }
	.navigation__logo { width: 11.5rem; }

	.navigation__button {
		position: relative;
		display: block;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border: 0;
		background: transparent;
		color: currentColor;
		cursor: pointer;
		z-index: 4;
	}

	.navigation__button > span:not(.screen-reader-text) {
		position: absolute;
		right: 0;
		display: block;
		width: 1.45rem;
		height: 0.1rem;
		background: currentColor;
		transition: transform 220ms ease, top 220ms ease;
	}

	.navigation__button > span:nth-of-type(1) { top: 1.1rem; }
	.navigation__button > span:nth-of-type(2) { top: 1.55rem; }
	.navigation__button[aria-expanded="true"] > span:nth-of-type(1) { top: 1.32rem; transform: rotate(45deg); }
	.navigation__button[aria-expanded="true"] > span:nth-of-type(2) { top: 1.32rem; transform: rotate(-45deg); }

	.navigation__panel {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		width: 100%;
		height: 100dvh;
		padding: 2.5rem clamp(1.5rem, 6vw, 3rem) 1.5rem;
		flex-direction: column;
		justify-content: space-between;
		background: var(--color-heritage-brown);
		color: var(--color-confident-charcoal);
		opacity: 0;
		pointer-events: none;
		transform: translateY(-102%);
		transition: transform 320ms var(--ease-out), opacity 220ms ease;
		overflow: hidden auto;
		z-index: 3;
	}

	.navigation__panel::before,
	.navigation__panel::after {
		content: "";
		position: absolute;
		width: 120vw;
		height: 70vh;
		border: 0.0625rem solid color-mix(in srgb, currentColor 24%, transparent);
		border-radius: 50%;
		pointer-events: none;
	}

	.navigation__panel::before { top: -28vh; left: -70vw; transform: rotate(25deg); }
	.navigation__panel::after { right: -75vw; bottom: -25vh; transform: rotate(-30deg); }
	.navigation__button[aria-expanded="true"] + .navigation__panel { opacity: 1; pointer-events: auto; transform: none; }
	.navigation__panel-mark,
	.navigation__panel-links,
	.navigation__panel-languages { position: relative; z-index: 1; }
	.navigation__panel-mark { align-self: center; width: min(55vw, 15rem); }

	.navigation__panel-links {
		display: flex;
		margin: auto 0;
		padding: 2rem 0;
		flex-direction: column;
		align-items: center;
		gap: clamp(1.25rem, 5vh, 3rem);
		list-style: none;
	}

	.navigation__panel-links a {
		font-family: var(--type-headline);
		font-size: clamp(3rem, 10vw, 5rem);
		line-height: 1;
		text-decoration: none;
	}

	.navigation__panel-languages { width: 100%; border: 0.0625rem solid color-mix(in srgb, currentColor 35%, transparent); }
	.navigation__panel-languages > * { flex: 1 1 50%; padding: 0.75rem; font-family: var(--type-mono); text-align: center; text-decoration: none; }
	.navigation__panel-languages [aria-current="page"] { background: var(--color-light-stone); }
}

@media screen and (max-width: 782px) {
	body.admin-bar .global-nav { top: 46px; }
}

@media screen and (max-width: 47.999rem) {
	.navigation { min-height: 4.75rem; }
	.navigation__logo { width: 9.75rem; }
}