/*-----------------------------------------------------------------------------
# Navigation
-----------------------------------------------------------------------------*/

// Mixin for icons
@use "../mixins/icons";

/*-----------------------------------------------------------------------------
# Style Nav Menus
-----------------------------------------------------------------------------*/
.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container, 
.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container, 
.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
	min-width: var(--wp--custom--navigation--width, 260px);
}

/* FIX for padding on level 2+ nav menu and pages list drop-downs */
.wp-block-navigation__submenu-container .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
    padding-left: 1em;
}

/* Default nav link opacity on hover */
.wp-block-navigation .wp-block-navigation-item:hover >  .wp-block-navigation-item__content.wp-block-navigation-item__content, 
.wp-block-navigation .wp-block-navigation-item:active > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	opacity: var(--wp--custom--color--link--hover-opacity, 0.8);
}

/*-----------------------------------------------------------------------------
# Style the Nav on HEADER MENU
-----------------------------------------------------------------------------*/

.site-header:not(.has-background) .wp-block-navigation:not(.has-background) .wp-block-navigation-item {
	&.current-menu-item,
	&:has(.current-menu-ancestor),
	&.current-menu-ancestor,
	&:has(.current-menu-ancestor) > .wp-block-navigation-item__content,
	&.wp-block-pages-list__item.current-menu-item > a,
	&.wp-block-home-link > a[aria-current='page'] {
		color: var(--wp--preset--color--highlight);
	}
}

.site-header:not(.has-background) .wp-block-navigation.has-background .wp-block-navigation-item,
.site-header.has-background .wp-block-navigation .wp-block-navigation-item {
	&.current-menu-item:not(.has-child) > a,
	&.current-menu-ancestor,
	&:has(.current-menu-ancestor) > .wp-block-navigation-item__content,
	&.wp-block-pages-list__item.current-menu-item > a,
	&.wp-block-home-link > a[aria-current='page'] {
		font-weight: var(--wp--custom--typography--font-weight--medium);
	}
}

/* Bold or highlight active sub-menu items, depending on whether text color or not */
.wp-block-navigation__submenu-container:not(.has-text-color) .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--highlight);
}
.wp-block-navigation__submenu-container.has-text-color .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-weight: var(--wp--custom--typography--font-weight--medium);
}

/* On hover, bold or highlight menu items, depending on whether background color or not */
.site-header:not(.has-background) .wp-block-navigation:not(.has-background) .wp-block-navigation-item {
	&:hover > .wp-block-navigation-item__content,
	&:hover > .wp-block-navigation__submenu-icon {
    	color: var(--wp--preset--color--highlight-alt);
    }
}

/* Drop-down link hover color. */
.site-header:not(.has-background) .wp-block-navigation-submenu.open-on-click:hover,
.site-header:not(.has-background) .wp-block-navigation-item.has-child.open-on-click:hover {
    color: var(--wp--preset--color--highlight);
}

.wp-block-navigation__submenu-container:not(.has-background) > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--highlight);
}

.wp-block-navigation.has-background .wp-block-navigation-item {
	&:hover > .wp-block-navigation-item__content,
	&:hover > .wp-block-navigation__submenu-icon {
    	opacity: var(--wp--custom--color--link--hover-opacity, 0.8);
    }
}

/* But on mobile nav, don't hover on non-clickable links */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.open-on-click {

	&:hover > .wp-block-navigation-item,
	&:hover > .wp-block-navigation-item__content,
	& > .wp-block-navigation-item:hover,
	& > .wp-block-navigation-item__content:hover {
		color: inherit;
		cursor: unset;
		font-weight: inherit;
		opacity: 1;
	}
}

/*-----------------------------------------------------------------------------
# Style the Mobile Nav Menu
-----------------------------------------------------------------------------*/

// /* Default navigation drop-down menu colors */
// .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
//     background-color: var(--wp--custom--color--navigation--background, var(--wp--preset--color--base));
// }
// 
// .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
//     color: var(--wp--custom--color--navigation--text, var(--wp--preset--color--contrast));
// }

/* 
 * Style the mobile nav open and close buttons. WordPress hard-codes the nav 
 * button at 24px, but we can adjust the padding
 */
$mobile-nav-size: 24px;
$mobile-nav-padding: calc( 1.25 * var(--wp--preset--spacing--20) );

.wp-block-navigation {
	& .wp-block-navigation__responsive-container-open,
	& .wp-block-navigation__responsive-container-close {
		background-color: rgba(0, 0, 0, .05);
		border: 1px solid var(--wp--custom--color--border, var(--wp--preset--color--neutral-alt));
		border-radius: var(--wp--custom--button--radius);
		padding: $mobile-nav-padding;
		box-shadow: var(--wp--custom--shadow--default);
	}
}

/* 
 * On navs with colored backgrounds, round out the mobile nav container to
 * match our open / close menu buttons
 */
.wp-block-navigation.has-background:has(.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open)) {
	border-radius: var(--wp--custom--button--radius);
}

/*
 * Responsive menu container padding. This behavior may be built into the 
 * Block Editor in the future. Add 14px to the top to align with our fixed
 * headers.
 */ 
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	padding-top: calc( var(--wp--preset--spacing--40) + 14px );
	padding-bottom: calc( var(--wp--preset--spacing--40) + 14px );
	padding-right: var(--wp--style--root--padding-right, var(--wp--preset--spacing--50));
	padding-left: var(--wp--style--root--padding-left, var(--wp--preset--spacing--50));	
}

/* Adjust mobile nav menu top when Admin Bar is present */
.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
    margin-top: 0;
}

.admin-bar .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	top: var(--wp-admin--admin-bar--height, 0);
}

/* Set padding on drop-down menus when expanded on the mobile nav */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {	
	.has-child .wp-block-navigation__submenu-container {
	    padding: 0 var(--wp--preset--spacing--40);
	}
}

/* Increase animation TIME on nav menu drop-downs */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	transition-duration: var(--wp--custom--animation--duration--short);
}

/* Increase animation DELAY on nav drop-downs when NOT requiring a click */
.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
	transition-delay: var(--wp--custom--animation--duration--short);
}

/*-----------------------------------------------------------------------------
# Custom: Up Arrow Icon
-----------------------------------------------------------------------------*/
@include icons.svg-icon(
	$class: 'is-style-icon-arrow-up-alt2',
	$icon: 'arrow-up-alt2',
	$location: 'before',
	$link: true,
	$margin: true,
);

.is-style-icon-arrow-up-alt2 > a:before {
// 	top: 0.25em;
	top: 0;
}

/* Set icons on navigation items to inline flex */
[class*="is-style-icon-"] > a.wp-block-navigation-item__content {
	display: inline-flex;
}

/*-----------------------------------------------------------------------------
# Custom: Fixed Navigation Menu
-----------------------------------------------------------------------------*/

/* Navigation Fixed menu */
nav.wp-block-navigation.is-style-fixed-menu {
	& .wp-block-navigation__responsive-container-open,
 	& .wp-block-navigation__responsive-container-close {
		background: rgba(0, 0, 0, .25);
		color: white;
		border: none;
	}
}

/* On the front-end, position nav menu open and close buttons at the top */
.wp-site-blocks:not(.is-root-container) {
	& nav.wp-block-navigation.is-style-fixed-menu {
 	    position: fixed;
		top: var(--wp--preset--spacing--60);
		
		& .wp-block-navigation__responsive-container-close {
			top: 4px;
		}
	}
}

/* On the front-end, if WordPress Admin Bar, adjust fixed menu top position so 
 * its underneath 
 */
.admin-bar .wp-site-blocks:not(.is-root-container) {
 	& nav.wp-block-navigation.is-style-fixed-menu { 	
		top: calc( var(--wp--preset--spacing--60) + var(--wp-admin--admin-bar--height, 0) );
	}
}

/* On the front-end, default the fixed nav menu position to the left */
.wp-site-blocks:not(.is-root-container) nav.wp-block-navigation.is-style-fixed-menu {
	left: max( calc(0.5 * (100% - var(--wp--style--global--wide-size)) ), var(--wp--style--root--padding-left, calc(2 * var(--wp--preset--spacing--50)) ) );
	right: auto;
    z-index: 9999;
}

/* Default the fixed menu's drop-down and close button also to the left */ 
nav.wp-block-navigation.is-style-fixed-menu {
	& .wp-block-navigation__responsive-container,
	& .wp-block-navigation__responsive-container-close {
		left: max( calc(0.5 * (100% - var(--wp--style--global--wide-size) - 2 *  var(--wp--style--root--padding-right, var(--wp--preset--spacing--50)))),0px );
		right: auto;
	}
	
	& .wp-block-navigation__responsive-container {
		width: var(--wp--custom--navigation--wide-width, 360px);
	}
}

/* If header right justified, position the fixed menu to the right */
.site-header.is-content-justification-right { 
	& > nav.wp-block-navigation.is-style-fixed-menu,
	& > .wp-block-template-part > nav.wp-block-navigation.is-style-fixed-menu {
		right: max( calc(0.5 * (100% - var(--wp--style--global--wide-size)) ), var(--wp--style--root--padding-right, calc(2 * var(--wp--preset--spacing--50)) ) );
		left: auto;
		
		& .wp-block-navigation__responsive-container,
		& .wp-block-navigation__responsive-container-close {
			right: max( calc(0.5 * (100% - var(--wp--style--global--wide-size) - 2 *  var(--wp--style--root--padding-right, var(--wp--preset--spacing--50)))),0px );
			left: auto;
		}
	}
}

/* If header center justified, position the fixed menu in the center */
.site-header.is-content-justification-center { 
	& > nav.wp-block-navigation.is-style-fixed-menu,
	& > .wp-block-template-part > nav.wp-block-navigation.is-style-fixed-menu {
		left: calc( 50% - 0.5 * $mobile-nav-size - $mobile-nav-padding );
		right: auto;
		
		& .wp-block-navigation__responsive-container-close {
			left: calc( 50% - 0.5 * $mobile-nav-size - $mobile-nav-padding );
			right: auto;
		}

		& .wp-block-navigation__responsive-container {
			left: calc(50% - 0.5 * var(--wp--custom--navigation--wide-width, 360px));
			right: auto;
		}		
	}
}
