/**
 * Navigation Customizations
 *
 * Custom mobile menu breakpoint override (800px instead of WordPress default 600px)
 *
 * @package Extendable
 * @since 2.0.35
 */

/* Show full navigation menu above 900px */
@media (min-width: 901px) {
	/* Hide the hamburger button */
	.wp-block-navigation__responsive-container-open {
		display: none !important;
	}

	/* Show the full navigation menu */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block !important;
		width: 100%;
		position: relative;
		z-index: auto;
		background-color: transparent;
	}

	.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--style--block-gap, 2em);
	}

	/* Reset overlay styles for desktop */
	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
	}
}

/* Show hamburger menu at and below 900px */
@media (max-width: 900px) {
	/* Hide the full menu */
	.wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) {
		display: none;
	}

	/* Show the hamburger button */
	.wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
}

/* Responsive Utility Classes (900px breakpoint)
-------------------------------------------------------------- */

/* Hide on mobile (900px and below) */
.hide-on-mobile {
	display: block;
}

.hide-on-mobile.is-layout-flex {
	display: flex;
}

@media (max-width: 900px) {
	.hide-on-mobile,
	.hide-on-mobile.is-layout-flex {
		display: none !important;
	}
}

/* Show on mobile only (900px and below) */
.show-on-mobile,
.show-on-mobile.is-layout-flex {
	display: none;
}

@media (max-width: 900px) {
	.show-on-mobile {
		display: block !important;
	}

	.show-on-mobile.is-layout-flex {
		display: flex !important;
	}
}

/* Hide on desktop (above 900px) */
.hide-on-desktop {
	display: none;
}

.hide-on-desktop.is-layout-flex {
	display: none;
}

@media (max-width: 900px) {
	.hide-on-desktop {
		display: block !important;
	}

	.hide-on-desktop.is-layout-flex {
		display: flex !important;
	}
}

/* Show on desktop only (above 900px) */
.show-on-desktop {
	display: block;
}

.show-on-desktop.is-layout-flex {
	display: flex;
}

@media (max-width: 900px) {
	.show-on-desktop,
	.show-on-desktop.is-layout-flex {
		display: none !important;
	}
}

/* Hide on tablet (900px and below) - override WordPress core breakpoint */
body:not(.wp-admin):not(.editor-styles-wrapper) .hide-on-tablet {
	display: block !important;
}

body:not(.wp-admin):not(.editor-styles-wrapper) .hide-on-tablet.is-layout-flex {
	display: flex !important;
}

@media (max-width: 900px) {
	body:not(.wp-admin):not(.editor-styles-wrapper) .hide-on-tablet,
	body:not(.wp-admin):not(.editor-styles-wrapper) .hide-on-tablet.is-layout-flex {
		display: none !important;
	}
}

/* Reset WordPress core tablet breakpoint */
@media (min-width: 600px) and (max-width: 1023px) {
	body:not(.wp-admin):not(.editor-styles-wrapper) .hide-on-tablet {
		display: block !important;
	}

	body:not(.wp-admin):not(.editor-styles-wrapper) .hide-on-tablet.is-layout-flex {
		display: flex !important;
	}
}

@media (min-width: 600px) and (max-width: 900px) {
	body:not(.wp-admin):not(.editor-styles-wrapper) .hide-on-tablet,
	body:not(.wp-admin):not(.editor-styles-wrapper) .hide-on-tablet.is-layout-flex {
		display: none !important;
	}
}

/* Show on tablet only (900px and below) - override WordPress core breakpoint */
body:not(.wp-admin):not(.editor-styles-wrapper) .show-on-tablet {
	display: none !important;
}

body:not(.wp-admin):not(.editor-styles-wrapper) .show-on-tablet.is-layout-flex {
	display: none !important;
}

@media (max-width: 900px) {
	body:not(.wp-admin):not(.editor-styles-wrapper) .show-on-tablet {
		display: block !important;
	}

	body:not(.wp-admin):not(.editor-styles-wrapper) .show-on-tablet.is-layout-flex {
		display: flex !important;
	}
}

/* Reset WordPress core tablet breakpoint for show-on-tablet */
@media (min-width: 600px) and (max-width: 1023px) {
	body:not(.wp-admin):not(.editor-styles-wrapper) .show-on-tablet,
	body:not(.wp-admin):not(.editor-styles-wrapper) .show-on-tablet.is-layout-flex {
		display: none !important;
	}
}

@media (min-width: 600px) and (max-width: 900px) {
	body:not(.wp-admin):not(.editor-styles-wrapper) .show-on-tablet {
		display: block !important;
	}

	body:not(.wp-admin):not(.editor-styles-wrapper) .show-on-tablet.is-layout-flex {
		display: flex !important;
	}
}

/* Inline variants for flex/inline elements */
.hide-on-mobile-inline {
	display: inline;
}

@media (max-width: 900px) {
	.hide-on-mobile-inline {
		display: none !important;
	}
}

.show-on-mobile-inline {
	display: none;
}

@media (max-width: 900px) {
	.show-on-mobile-inline {
		display: inline !important;
	}
}

/* Flex variants */
.hide-on-mobile-flex {
	display: flex;
}

@media (max-width: 900px) {
	.hide-on-mobile-flex {
		display: none !important;
	}
}

.show-on-mobile-flex {
	display: none;
}

@media (max-width: 900px) {
	.show-on-mobile-flex {
		display: flex !important;
	}
}

/* Search Block - Compact header variant
-------------------------------------------------------------- */
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	padding: 4px;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__input {
	height: 30px;
	min-height: 30px;
	padding: 0 12px;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__button {
	height: 30px;
	min-height: 30px;
	width: 30px;
	min-width: 30px;
	padding: 0;
	margin-left: 4px;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__button svg {
	width: 18px;
	height: 18px;
}

/* Make header flex and space between the mobile navigation on small device */
@media (max-width: 900px) {
	.header-mobile-friendly {
		display: flex;
    	justify-content: space-between;
	}
}

.wp-block-navigation__responsive-container-close {
	svg {
		fill: #000000;
	}
}