/* 
 * Custom Mobile Navigation Overlay Styles
 * Styles for the custom mobile overlay menu
 */

/* Main overlay container - dark green background */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--dark-green) !important;
	color: var(--wp--preset--color--off-white) !important;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0;
}

/* Close button styling - top right */
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--off-white);
	padding: 1.5rem;
	z-index: 1000;
}

.wp-block-navigation__responsive-container-close svg {
	fill: currentColor;
	width: 24px;
	height: 24px;
}

/* Navigation content wrapper */
.wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 0;
}

/* Logo in overlay - positioned at top */
.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

/* Navigation links styling */
.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--s) !important;
	margin-bottom: 2rem;
}

.wp-block-navigation__responsive-container-open {
	width: 24px;
	height: 24px;
}
.wp-block-navigation__responsive-container-open svg {
	fill: var(--wp--preset--color--off-white) !important;
	width: 100%;
	height: 100%;
}

.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.is-menu-open .wp-block-navigation-item a {
	font-family: "Fields", Georgia, "Times New Roman", Times, serif;
	font-size: var(--wp--preset--font-size--step-3);
	color: var(--wp--preset--color--off-white) !important;
	text-decoration: none;
	text-transform: none;
	padding: 0.5rem 0;
	display: block;
	line-height: 1.2;
}

.is-menu-open .wp-block-navigation-item a:hover {
	opacity: 0.8;
}

/* Style pill buttons in mobile overlay to match navigation links */
.is-menu-open .is-style-limson-btn-pill a {
	background-color: transparent !important;
	background: transparent !important;
	color: var(--wp--preset--color--off-white) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0.5rem 0 !important;
	font-family: "Fields", Georgia, "Times New Roman", Times, serif !important;
	font-size: var(--wp--preset--font-size--step-3) !important;
	text-transform: none !important;
	font-weight: 400 !important;
}

.is-menu-open .is-style-limson-btn-pill a:hover {
	background: transparent !important;
	border-color: transparent !important;
	opacity: 0.8;
	transform: none !important;
}

.is-menu-open .is-style-limson-btn-pill a * {
	color: var(--wp--preset--color--off-white) !important;
}

/* Override WordPress default breakpoint from 600px to 800px */
/* Hide the hamburger menu button on screens 800px and wider */
@media (min-width: 800px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(
			.is-menu-open
		) {
		background-color: inherit;
		display: block;
		position: relative;
		width: 100%;
		z-index: auto;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(
			.is-menu-open
		)
		.wp-block-navigation__responsive-container-close {
		display: none;
	}
}

/* Show hamburger menu and enable overlay on screens below 800px */
@media (max-width: 799px) {
	.wp-block-navigation__responsive-container-open {
		display: flex;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		overflow-y: auto;
	}
}