/**
 * core/navigation - Main
 */


/* Main nav */
.crbem-nav-main {
	--navigation-layout-justification-setting: stretch;
	--navigation-layout-direction: column;
	--navigation-layout-wrap: nowrap;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: center;
	--navigation--button--color: var(--wp--preset--color--base);
	--navigation--button--color-active: var(--wp--preset--color--accent-2);
	--navigation--icon--size: 14px;
	--navigation--icon--color: var(--wp--preset--color--base);
	--navigation--icon--color-active: var(--wp--preset--color--accent-2);
	--navigation--toggle--size: 40px;
}

/* Submenu toggle */
.crbem-nav-main .wp-block-navigation-submenu__toggle {
	transition: var(--wp--custom--transition--hover);
}

/* Mobile only */
.crbem-nav-main .wp-block-navigation__responsive-container.is-menu-open {
	padding-inline: var(--wp--preset--spacing--10);
	overflow: visible;
}

/* Mobile open/close buttons */
.crbem-nav-main :is(.wp-block-navigation__responsive-container-close, .wp-block-navigation__responsive-container-open) {
	align-items: center;
	justify-content: center;
	block-size: 72px;
	inline-size: calc(50vw - var(--wp--preset--spacing--10));
	padding-block: var(--wp--preset--spacing--20);
	background-color: var(--menu-button--color-background, var(--wp--preset--color--accent-1));
	border-radius: var(--wp--preset--spacing--10);
	color: var(--menu-button--color-text, var(--wp--preset--color--base));
	font-size: 12px !important;
	font-weight: 900 !important;
	letter-spacing: 0.075ch !important;
	text-align: center
}

/* Close button */
.crbem-nav-main .wp-block-navigation__responsive-container-close {
	--menu-button--color-background: var(--wp--preset--color--contrast);

	position: relative;
	inset-block-start: auto;
	inset-inline-end: auto;
	margin-inline: auto 0;
}

.crbem-nav-main .is-menu-open .wp-block-navigation__responsive-container-close {
	display: flex;
}

/* Inner wrapper */
.crbem-nav-main .wp-block-navigation__responsive-dialog {
	margin-block-start: 0;
	padding: 0;
}

/* Mobile nav modal */
.crbem-nav-main .wp-block-navigation__responsive-container.has-modal-open.is-menu-open {
	padding-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--10));
	background-color: transparent;
}

.crbem-nav-main .is-menu-open .wp-block-navigation__responsive-container-content {
	max-block-size: calc(100dvh - 72px - 16px - var(--wp-admin--admin-bar--height, 0px));
	inline-size: 100vw;
	margin-inline-start: calc(var(--wp--preset--spacing--10) * -1);
	translate: 0 var(--wp--preset--spacing--10);
	background-color: var(--wp--preset--color--base);
	border-radius: 0;
	box-shadow: 0 4px 48px 0 rgb(0 0 0 / 16%);
	overflow: auto;
}

.crbem-nav-main .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	margin-block-start: 0;
	padding: 0 var(--wp--preset--spacing--10) var(--wp--preset--spacing--10);
}

/* Nav & submenu */
.crbem-nav-main .wp-block-navigation__container {
	inline-size: 100%;
}

.crbem-nav-main .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content :is(.wp-block-navigation__container,.wp-block-navigation__submenu-container) {
	gap: 0;
}


/* Buttons */
.crbem-nav-main .wp-block-buttons {
	flex-direction: column;
	inline-size: 100%;
}

.crbem-nav-main .wp-block-buttons .wp-block-button {
	flex: 1;
	inline-size: 100%;
}

.crbem-nav-main .wp-block-button .wp-block-button__link.has-icon {
	block-size: 88px;
	padding-inline: clamp(1rem, -11rem + 16vw, 2rem);
	font-size: 12px;
	text-align: start;
}

.crbem-nav-main .wp-block-button .wp-block-button__link.has-icon span {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

/* Nav width */
@media (width >= 1130px) {

	/* Main nav */
	.crbem-nav-main {
		--navigation-layout-direction: row;
		--navigation--icon--size: 14px;
		--navigation--toggle--size: auto;

		flex: 1 0 auto;
		gap: 0;
	}

	.crbem-nav-main .wp-block-buttons {
		flex-direction: row;
	}


	.crbem-nav-main :is(.wp-block-navigation__responsive-container, .wp-block-navigation__responsive-close, .wp-block-navigation__responsive-dialog, .wp-block-navigation__responsive-container-content, ul.crbem-nav-main) {
		block-size: 100%;
	}

	.crbem-nav-main .wp-block-navigation__responsive-dialog {
		padding: 0;
	}
}

/** Override WordPress mobile navigation breakpoint */
@media (width >= 601px) and (width <= 1130px) {
	.crbem-nav-main .wp-block-navigation__responsive-container {
		display: none;
	}

	.crbem-nav-main .wp-block-navigation__responsive-container-open:not(.always-shown),
	.crbem-nav-main .wp-block-navigation__responsive-container.has-modal-open {
		display: flex;
	}
}

/* Small mobile */
@media (width < 375px) {

	/* Close button */
	.crbem-nav-main :is(.wp-block-navigation__responsive-container-close) {
		margin-inline-end: calc(var(--wp--preset--spacing--10) * -1);
	}
}

/* Override default transition */
@keyframes overlay-menu__fade-in-animation {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}