/*!*******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/block-library/parts/part-nav-header/style.css ***!
  \*******************************************************************************************************************************************************************************************************/
/** ======================
 ** NAV CONTAINER
 ** ==================== */
.site-header__nav {
	--_text-color: var(--wp--preset--color--foreground);
	--_text-family: var(--wp--preset--font-family--text);
	--_text-weight: 600;
	--_text-size: var(--wp--preset--font-size--medium);

	--_icon-color: var(--wp--preset--color--foreground);

	--_gap: var(--wp--preset--spacing--20);

	position: fixed;
	top: 0;

	display: flex;
	align-items: center;
	flex-direction: row;

	width: var(--wp--custom--wide-size);
	height: var(--_header-height);
}

@media (min-width: 1200px) {
	.site-header__nav {
		--_gap: 0;
		justify-content: flex-end;
	}
}

/** ======================
 ** SUB-NAV
 ** ==================== */
/* Hide visually when closed.*/
.site-header__sub-menu {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.site-header__menu-title:hover + .site-header__sub-menu,
.site-header__sub-menu:focus-within,
.site-header__sub-menu:hover,
[data-modal="open"] .site-header__sub-menu {
	/* Reset */
	clip: auto;
	clip-path: none;
	height: auto;
	margin: 0;
	overflow: visible;
	padding: 0;
	position: static !important;
	width: auto;
	word-wrap: normal;

	/* Custom styles */
	gap: 0;
	padding-top: var(--wp--preset--spacing--10);
	text-align: center;
}

[data-modal="open"]
	:is(
		.site-header__menu-title:hover + .site-header__sub-menu,
		.site-header__sub-menu:hover
	) {
	padding: initial;
	text-align: left;
	gap: 1rem;
	margin-block: 1rem;
	padding-top: var(--wp--preset--spacing--10);
	padding-left: 1rem;
}

[data-modal="open"] .site-header__sub-menu {
	margin-block: 1rem;
	padding-left: 1rem;
	gap: 1rem;
	text-align: left;
}

.site-header__sub-menu > .site-header__menu-item a {
	display: block;

	font-size: var(--wp--preset--font-size--medium);

	width: 100%;
	height: 100%;

	padding-block: 0.75em;
}

.site-header__sub-menu > .site-header__menu-item a:hover {
	color: var(--wp--preset--color--black);
	background-color: hsl(0, 0%, 95%);
}

@media screen and (min-width: 800px) {
	.site-header__menu-title:hover + .site-header__sub-menu,
	.site-header__sub-menu:focus-within,
	.site-header__sub-menu[aria-expanded="true"],
	.site-header__sub-menu:hover {
		position: absolute !important;

		/* Custom styles */
		background: var(--wp--preset--color--background);
		text-align: left;
	}
}

/** ======================
 ** DIALOG
 ** ==================== */
.site-header__dialog {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--_gap);

	height: 100%;
	max-height: 0; /* This is the initial state of the dialog. Max-height because animation reasons */

	visibility: hidden;
}

[data-modal="open"] .site-header__dialog {
	--_gap: var(--wp--preset--spacing--30);

	position: fixed;
	top: var(--_header-height);
	right: 0;
	left: 0;

	max-height: 100%;

	background: var(--wp--preset--color--background);

	visibility: visible;

	/* Animations */
	animation: dialogSize 0.1s ease-in-out;
}

.site-header__sub-menu[aria-expanded="true"] {
	text-align: center;
}

@media screen and (min-width: 800px) {
	.site-header__sub-menu[aria-expanded="true"] {
		text-align: left;
	}
}

@media (min-width: 1200px) {
	.site-header__dialog {
		flex-direction: column-reverse;
		align-items: flex-end;
		gap: 0rem;

		padding: 1em;

		max-height: initial;
		visibility: visible;
	}
}

@keyframes dialogSize {
	0% {
		max-height: 0%;
	}
	100% {
		max-height: 100%;
	}
}

@media (prefers-reduced-motion) {
	.site-header__dialog {
		animation: none;
	}
}

/** ======================
 ** PAGE MENU
 ** ==================== */
.site-header__menu {
	/* Reset list styles */
	list-style: none;
	padding: 0;
	margin: 0;
	width: 0;

	/* Menu styling */
	gap: var(--_gap);

	position: relative;
}

.site-header__menu-item :is(a, span) {
	font-family: var(--_text-family);
	font-weight: var(--_text-weight);
	font-size: var(--_text-size);
	color: var(--_text-color);

	padding-inline: var(--wp--preset--spacing--10);
}

[data-modal="open"] .site-header__menu-item :is(a, span) {
	padding-inline: var(--wp--preset--spacing--10);
	padding-block: 0;
}

[data-modal="open"] .site-header__menu {
	--_gap: var(--wp--preset--spacing--20);

	display: block;

	width: 100%;

	padding: 1rem;

	overflow-y: scroll;
	max-height: 75dvh;
}

.site-header__menu-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--10);

	cursor: pointer;
}

[data-modal="open"] .site-header__menu-title {
	justify-content: flex-start;
}

.site-header__menu-title svg {
	color: var(--_icon-color);
	width: 1em;
	height: 1em;
}

@media (min-width: 800px) {
	.site-header__menu-title {
		justify-content: normal;
	}
}

@media (min-width: 1200px) {
	.site-header__menu {
		display: flex;
		flex-direction: row;
		align-items: center;

		width: -moz-fit-content;

		width: fit-content;
		height: 100%;
	}
}

/** ======================
 ** SECONDARY MENU
 ** ==================== */
.site-header__site-header__menu-secondary {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;

	width: 100%;

	padding-block: 0.5em;
	padding-inline: 1em;
}

@media screen and (min-width: 1200px) {
	.site-header__site-header__menu-secondary {
		justify-content: flex-end;
		position: absolute;
		top: 0;
	}
}

/** ======================
 ** PREFERENCES MENU
 ** ==================== */
.site-header__preferences {
	display: none;
}

[data-modal="open"] .site-header__preferences {
	display: flex;
	flex-direction: row;
	align-items: center;
}

@media (min-width: 1200px) {
	.site-header__preferences {
		display: flex;
	}
}

/** ======================
 ** TOGGLE BUTTONS
 ** - The typical hamburger menu button. This is the button that toggles the mobile menu.
 ** - For accessibility reasons, there are separate close button close to actual dialog content.
 ** ==================== */
.site-header__toggle {
	/* Resets */
	background: none;
	padding: 0;

	/* Variables */
	--_color: var(--wp--preset--color--foreground);
	--_size: var(--wp--preset--font-size--huge);

	--_margin-block: var(--_header-offset-block);
	--_margin-inline: var(--_header-offset-inline);

	--_border: 0 solid var(--wp--preset--color--foreground);
	--_radius: 0;

	--_animation-duration: 200ms;

	/* Custom styles*/
	position: fixed;
	top: 0;
	right: 0;

	height: var(--_header-height);
	aspect-ratio: 1 / 1;

	border: var(--_border);
	border-radius: var(--_radius);

	cursor: pointer;
	z-index: 9999;
}

@media (min-width: 1200px) {
	.site-header__toggle {
		display: none;
	}
}

/* Icon styling */
.site-header__toggle__icon {
	width: var(--_size);
}

.site-header__toggle:hover {
	background: var(--_header-background-hover-color);
}

/** ======================
 ** ICON STYLES
 ** ==================== */
.site-header__toggle--close {
	--_size: var(--wp--preset--font-size--large);
}

[data-modal="open"] .site-header__toggle--open,
[data-modal="closed"] .site-header__toggle--close {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

[data-modal="closed"] .site-header__toggle--close {
	display: none;
}

@media screen and (min-width: 1400px) {
	.site-header__close {
		display: none;
	}
}


/*# sourceMappingURL=style-index.css.map*/