/******/
/*** NAVIGATION + FOOTER ***/
/******/

.global-nav {
	position: sticky;
	top: 0;
	background: var(--color-nav-yellow);
	box-shadow: 0 0.25rem 1rem rgba(35, 31, 32, 0);
	transition: box-shadow 180ms ease;
}

body.scrolled .global-nav {
	box-shadow: 0 0.25rem 1rem rgba(35, 31, 32, 0.14);
}

.navigation {
	min-height: var(--nav-height);
	padding-block: 0.65rem;
}

.site-logo {
	flex: 0 0 auto;
	text-decoration: none;
}

.site-logo__bueno {
	width: 3.2rem;
	height: 2.5rem;
	object-fit: contain;
}

.site-logo__wordmark {
	width: clamp(6.5rem, 9vw, 8.1rem);
	height: auto;
}

.navigation__links,
.footer-menu,
.footer-utility {
	margin: 0;
	padding: 0;
	list-style: none;
}

.navigation__links a {
	font-family: var(--font-display);
	font-size: 0.9rem;
	text-decoration: none;
}

.navigation__links a:hover,
.footer-menu a:hover,
.footer-utility a:hover {
	text-decoration: underline;
}

.navigation__button {
	display: none;
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.6rem;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.navigation__button > span:not(.screen-reader-text) {
	display: block;
	width: 100%;
	height: 0.18rem;
	margin: 0.32rem 0;
	border-radius: 999px;
	background: currentColor;
	transition: transform 180ms ease, opacity 180ms ease;
}

body.menu-open .navigation__button > span:nth-child(1) { transform: translateY(0.5rem) rotate(45deg); }
body.menu-open .navigation__button > span:nth-child(2) { opacity: 0; }
body.menu-open .navigation__button > span:nth-child(3) { transform: translateY(-0.5rem) rotate(-45deg); }

.navigation__actions .button {
	min-height: 2.55rem;
	padding: 0.35rem 0.75rem 0.3rem;
	border-width: 0.2rem;
	font-size: 0.85rem;
}

.site-footer .grid-container-full {
	align-items: flex-start;
}

.footer-logo {
	display: block;
	width: min(100%, 31rem);
}

.footer-brand p {
	max-width: 34rem;
}

.footer-brand .footer-consent {
	max-width: 35rem;
	font-size: 0.78rem;
	line-height: 1.45;
	opacity: 0.72;
}

.footer-newsletter-placeholder {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(100%, 35rem);
	min-height: 3.2rem;
	padding: 0.45rem 0.55rem 0.45rem 1rem;
	border: 0.15rem solid var(--color-cream);
	border-radius: 0.55rem;
	color: rgba(255, 251, 231, 0.75);
}

.footer-newsletter-placeholder strong {
	padding: 0.55rem 0.75rem;
	border-radius: 0.35rem;
	background: var(--color-cream);
	color: var(--color-black);
	font-family: var(--font-display);
	font-size: 0.8rem;
}

.footer-menu-heading {
	margin-bottom: 1rem;
	font-family: var(--font-condensed);
	font-size: 1.2rem;
	letter-spacing: 0;
}

.footer-menu-group {
	flex: 1 1 0;
	min-width: 0;
}

.footer-menu li + li {
	margin-top: 0.35rem;
}

.footer-menu a,
.footer-utility a,
.footer-bottom p {
	font-size: 0.9rem;
	text-decoration: none;
}

.footer-bottom {
	padding-top: 1.5rem;
	border-top: 0.1rem solid rgba(255, 251, 231, 0.45);
}

@media (max-width: 63.999rem) {
	.navigation__button { display: block; }
	.navigation__links {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		padding: 2rem;
		background: var(--color-nav-yellow);
		box-shadow: 0 1rem 1.5rem rgba(35, 31, 32, 0.14);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-0.75rem);
		transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
	}
	body.menu-open .navigation__links {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
	}
	.navigation__links a { font-size: 1.35rem; }
}

@media (max-width: 47.999rem) {
	:root { --nav-height: 4.25rem; }
	.navigation { padding-inline: 1rem; gap: 0.4rem; }
	.site-logo__bueno { width: 2.9rem; height: 2.3rem; }
	.navigation__actions { gap: 0.45rem; }
	.navigation__actions .button { min-height: 2.3rem; padding-inline: 0.6rem; font-size: 0.76rem; }
	.navigation__button { width: 2.45rem; height: 2.45rem; padding: 0.45rem; }
	.footer-brand,
	.footer-navigation { max-width: 100%; min-width: 100%; }
	.footer-logo { width: min(100%, 21rem); }
	.footer-newsletter-placeholder {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.9rem;
		padding: 0;
		border: 0;
	}
	.footer-newsletter-placeholder span {
		width: 100%;
		min-height: 3.2rem;
		padding: 0.8rem 1rem;
		border: 0.15rem solid var(--color-cream);
		border-radius: 0.55rem;
	}
	.footer-newsletter-placeholder strong {
		padding: 0.7rem 1rem 0.65rem;
		border: 0.15rem solid var(--color-cream);
		background: transparent;
		color: var(--color-cream);
		font-size: 0.9rem;
	}
	.footer-navigation { gap: 2rem; }
	.footer-menu-group { width: 100%; }
	.footer-bottom { align-items: flex-start; }
}