/**
 * Theme:	Flat Blocks
 * File:	custom-fixedheader.css
 * 
 * The stylesheet for the theme's custom fixed header and fixed navigation menus
 * 
 * NOTE: These are ONLY the styles for the front-end. Styles for both front-end and
 * the Block Editor are in the main flat-blocks.css file.
 *
 * @package flat-blocks
 * @since 	1.0
 */

/*--------------------------------------------------------------
# Fixed Header: Front-end Styles
--------------------------------------------------------------*/

/* Position the fixed header group */
.wp-block-group.is-style-fixed-header {
    position: fixed;
    top: 0;
	left: 0;
	right: 0;
    z-index: 10;
    margin-top: 0;
}

/* Adjust fixed header position so its underneath the WordPress admin bar */
.admin-bar .is-style-fixed-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}

/* Fix WordPress Admin bar on phones not sticking to the top 
 *
 * Note to theme reviewers, this issues a warning but is actually fixing an issue
 * in core WordPress v6.0. It is not hiding the admin bar like the warning indicates.
 */
@media screen and (max-width: 600px) {
    #wpadminbar {
        position: fixed;
    }
}

/*--------------------------------------------------------------
# Fixed Navigation Menu: Front-end Styles
--------------------------------------------------------------*/

/* Position the fixed nav menu to the top left */
nav.wp-block-navigation.is-style-fixed-menu {
    position: fixed;
    top: var(--wp--style--root--padding-top, 0);
	/*margin-top: var(--wp--preset--spacing--50);*/
	margin: var(--wp--preset--spacing--60) 0 0;
	/*padding: var(--wp--preset--spacing--60) 0 0;*/
	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: 10;
}

/* If WordPress Admin Bar, adjust fixed menu top position so its underneath */
.admin-bar nav.wp-block-navigation.is-style-fixed-menu {
	top: calc( var(--wp--style--root--padding-top, 0) + var(--wp-admin--admin-bar--height, 0) );
}

/* 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 {
	left: 0; 
	right: auto;
}
nav.wp-block-navigation.is-style-fixed-menu .wp-block-navigation__responsive-container-close {
	left: 0;
	right: auto;
}

/* If right justified, position the fixed menu and its drop-down to the right */
.site-header.is-content-justification-right > nav.wp-block-navigation.is-style-fixed-menu,
.site-header.is-content-justification-right > .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 {
		right: 0;
		left: auto;
	}
	.wp-block-navigation__responsive-container-close {
		right: 0;
		left: auto;
	}

}

/* If center justified, position the fixed menu and its drop-down in the center */
.site-header.is-content-justification-center > nav.wp-block-navigation.is-style-fixed-menu,
.site-header.is-content-justification-center > .wp-block-template-part > nav.wp-block-navigation.is-style-fixed-menu {

    left: calc(50% - 12px - var(--wp--preset--spacing--20));
    right: auto;
    
    .wp-block-navigation__responsive-container {
		/*left: calc(50% - 5 * var(--wp--preset--spacing--60));*/
		left: calc(50% - 180px);
		right: auto;
	}
	
	.wp-block-navigation__responsive-container-close {
		left: calc(50% - 12px - 0.5 * var(--wp--preset--spacing--20));
		right: auto;
	}

}