/**
 * Navigation main
 */

.apr-nav-main.wp-block-navigation {
	--nav--button--color--text: var(--wp--preset--color--contrast);
	--menu--icon--color: var(--wp--custom--head--color--text);

	flex: 0 0 32px;

	.wp-block-buttons {
		margin-block-start: var(--wp--preset--spacing--60);
	}

	/* Menu open an close buttons */
	:where(.wp-block-navigation__responsive-container-open, .wp-block-navigation-overlay-close) {
		display: flex;
		align-items: center;
		justify-content: center;
		block-size: 48px;
		inline-size: 48px;
		margin-inline-end: -12px !important;
	}


	.has-modal-open & {
		--menu--icon--color: var(--wp--preset--color--contrast);
	}
}


@media (width >= 1024px) {
	.apr-nav-main.wp-block-navigation {
		--nav--button--color--text: var(--wp--custom--head--color--text, var(--wp--preset--color--base));
		--nav--submenu-icon--size: 16px;
		--nav--submenu-icon--offset: calc(var(--wp--preset--spacing--10) + var(--nav--submenu-icon--size));

		flex: revert;
		inline-size: 100%;

		/* Hide mobile menu button */
		.wp-block-navigation__responsive-container-open {
			display: none;
		}

		.wp-block-button__link {
			white-space: nowrap;
		}

		/* Top level navigation items */
		.wp-block-navigation-item {
			/* Navigation item content */
			> .wp-block-navigation-item__content {
				padding: 11px var(--wp--preset--spacing--10);
				border-radius: var(--wp--preset--border-radius--small);
				color: var(--nav--button--color--text);
				line-height: 1;
				white-space: nowrap;
				transition: background-color var(--wp--custom--transition--button);
			}

			&:where(:hover, :focus, :has([aria-current='page'])) {
				--nav--button--color--text: var(--wp--preset--color--contrast);

				> .wp-block-navigation-item__content {
					background-color: var(--wp--preset--color--base-2);
				}
			}

			&.has-child {
				> .wp-block-navigation-item__content {
					padding-inline-end: calc(var(--nav--submenu-icon--offset) + 0.75em);

					&::before {
						display: none;
						position: absolute;
						inset-block-start: 0;
						inset-inline-start: 0;
						block-size: calc(100% + 37px);
						inline-size: 300px;
						content: '';
						cursor: default;
						z-index: -1;
						clip-path: polygon(0 0, 0 100%, 100% 100%);
					}
				}
			}
		}

		/* Submenu icon */
		.wp-block-navigation__submenu-icon {
			block-size: var(--nav--submenu-icon--size);
			inline-size: var(--nav--submenu-icon--size);
			margin-inline: calc((var(--nav--submenu-icon--offset) + 0.25em) * -1) 0;
			color: var(--nav--button--color--text);
			z-index: 2
		}

		/* Submenu */
		.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
			inset-block-start: calc(100% + var(--wp--preset--spacing--20));
			inset-inline: 0 auto;
			gap: 4px;
			min-inline-size: 265px !important;
			padding: var(--wp--preset--spacing--20);
			translate: 0 -20px;
			border: 0;
			border-radius: var(--wp--preset--border-radius--medium);
			box-shadow: var(--wp--preset--shadow--medium);
			transition: opacity 0.33s ease-out, translate 0.33s ease-out;

			> .wp-block-navigation-item {
				> .wp-block-navigation-item__content {
					padding: var(--wp--preset--spacing--10);
				}
			}
		}

		/* Main navigation buttons */
		.wp-block-buttons {
			margin-block-start: 0;
			margin-inline-start: auto;
		}

		.wp-block-navigation-item.has-child {
			@media (hover:hover) {
				&:hover {
					.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
						translate: 0 0;
					}

					/* Hit area */
					> .wp-block-navigation-item__content::before {
						display: block;
					}
				}
			}
		}
	}
}

/** Override WordPress mobile navigation breakpoint */
@media (width >= 600px) and (width < 1024px) {
	.apr-nav-main.wp-block-navigation {
		.wp-block-navigation__responsive-container:not(.hidden-by-default, .is-menu-open) {
			display: none;
		}

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


/* --- Mobile nav overlay --- */
.apr-nav-overlay {
	/* Account for admin bar height if present */
	padding-block-start: var(--wp-admin--admin-bar--height) !important;
}

.apr-nav-overlay__head {
	block-size: var(--wp--custom--head--dimensions--height);
}

/* --- Mobile nav --- */
.apr-nav-mobile {
	--nav-mobile--gutter: var(--wp--preset--spacing--20);

	/* Hides buttons on mobile */
	.wp-block-buttons {
		display: none;
	}

	.wp-block-navigation__container {
		--navigation-layout-align: stretch;
		--wp--style--block-gap: 0;

		> .wp-block-navigation-item {
			padding-inline: var(--nav-mobile--gutter);

			> .wp-block-navigation-item__content {
				border-block-end: 1px solid var(--wp--preset--color--base-2);
			}

			&:not(.has-child) {
				> .wp-block-navigation-item__content {
					&::after {
						display: inline-block;
						position: absolute;
						inset-block-start: 50%;
						inset-inline-end: var(--nav-mobile--gutter);
						flex: 0 0 auto;
						block-size: 24px;
						inline-size: 24px;
						translate: 0 -50%;
						background-color: currentColor;
						color: var(--icon--color);
						content: '';
						mask-size: contain;
						mask-position: center;
						mask-repeat: no-repeat;
						mask-image: var(--wp--custom--icons--arrow-angled);
					}
				}
			}
		}

		.wp-block-navigation-submenu {
			background: transparent;

			/* Nested submenu */
			.wp-block-navigation-submenu {
				border: 0;

				.wp-block-navigation-item__content {
					padding: var(--wp--preset--spacing--10) 0;
					font-size: 14px;
				}
			}
		}
	}

	/* Buttons */
	.wp-block-navigation-item__content,
	.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
		inline-size: 100%;
		padding: var(--wp--preset--spacing--30) 0;
		letter-spacing: 0.075ch;
		line-height: 1;
	}

	.wp-block-navigation-item.has-child.open-on-click {
		--icon--color: var(--wp--preset--color--contrast);

		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.wp-block-navigation-item.has-child.open-on-click:has(> [aria-expanded='true']) {
		--icon--color: var(--wp--preset--color--contrast);
	}

	.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle:is([aria-expanded='true']) {
		padding-block-end: var(--wp--preset--spacing--20);
		background-color: var(--wp--preset--color--base);
		border: 0;
		color: var(--wp--preset--color--contrast);

		/* Nested submenu */
		~ .wp-block-navigation-submenu {
			padding-block-end: var(--wp--preset--spacing--10);
			border-block-end: 1px solid var(--wp--preset--color--base-2);
		}
	}

	/* Submenu expand button */
	.wp-block-navigation__submenu-icon {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		block-size: 66px;
		inline-size: 100%;
		margin: 0 !important;
		z-index: 1;

		& svg {
			position: absolute;
			inset-block-start: 50%;
			inset-inline-end: var(--nav-mobile--gutter);
			block-size: 16px;
			inline-size: 16px;
			margin: 0;
			translate: 0 -50%;
			color: var(--icon--color);
		}
	}

	/* Submenu / subnav */
	&.wp-block-navigation {
		background-color: transparent;

		.wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
			position: relative;
			inset: auto;
			min-inline-size: 100%;
		}

		.has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
			color: var(--wp--preset--color--contrast);
			line-height: 1.55;
		}
	}
}

/** Override WordPress mobile navigation breakpoint */
@media (width >= 600px) and (width < 1024px) {
	.apr-nav-main {
		.wp-block-navigation__responsive-container:not(.hidden-by-default, .is-menu-open) {
			display: none;
		}

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

/* Override default transition */
/* stylelint-disable-next-line keyframes-name-pattern */
@keyframes overlay-menu__fade-in-animation {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}