/* Icon */

/* Icon container */
#theme-header-hamburger {
	height: fit-content;
	display: flex;
	align-items: center;
}

/* Icon size */
#theme-header-hamburger svg path {
	fill: none;
	stroke-width: 3px;
	transition: stroke 200ms;
}

/* Icon svg properties */
#theme-header-hamburger svg {
	fill-rule: evenodd;
	clip-rule: evenodd;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 1.5;
	cursor: pointer;
}

#theme-header-hamburger #top,
#theme-header-hamburger #bottom {
	stroke-dasharray: 30, 75.39;
}

#theme-header-hamburger svg.active #top,
#theme-header-hamburger svg.active #bottom {
	stroke-dashoffset: -60;
}

/* Responsive adjustments */
@media only screen and (min-width: 993px) {
	/* Hide icon on desktop if functionality is disabled */
	body:not(.theme-desktop-hamburger) #theme-header-hamburger {
		display: none !important;
	}
}

/* END */

/* Overlay defaults */

/* Overlay positioning */
#theme-overlay {
	position: fixed;
	z-index: 1002;
	top: 0;
	height: 100%;
	overflow-y: auto;
}

@media only screen and (min-width: 993px) {
	#theme-overlay {
		border-radius: 0 0 0 50px;
	}
}

/* Overlay layout */
#theme-overlay .overlay-menu-inner {
	padding: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	gap: 35px;
}

/* Menu alignment */
#theme-overlay .menu {
	display: flex;
	flex-direction: column;
	gap: 50px;
	margin-bottom: 0;
}

/* Search box margin */
#theme-overlay .overlay-menu-search {
	margin-bottom: 30px;
}

#theme-overlay .overlay-footer {
	padding-bottom: 30px;
}

/* END */

/* Desktop overlay */

@media only screen and (min-width: 993px) {
	/* Admin bar calc */
	.theme-desktop-hamburger.admin-bar #theme-overlay {
		top: 32px;
		height: calc(100% - 32px);
	}

	.theme-desktop-hamburger.admin-bar.rmkr-admin-bar #theme-overlay {
		top: 50px;
		height: calc(100% - 50px);
	}

	/* Desktop menu */
	.theme-desktop-hamburger #theme-overlay {
		right: -350px;
		width: 350px;
		transition: right 300ms;
	}

	/* Menu activation */
	.theme-desktop-hamburger.menu-visible #theme-overlay {
		right: 0;
		box-shadow: 0 0 20px 0 #00000070;
	}

	.theme-desktop-hamburger .site-container::before {
		content: '';
		position: fixed;
		z-index: 10;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #00000070;
		transition: 300ms;
		opacity: 0;
		visibility: hidden;
	}

	.theme-desktop-hamburger.menu-visible .site-container::before {
		opacity: 1;
		visibility: initial;
	}

	/* Site size adjustment when menu is open */
	.theme-desktop-hamburger.menu-visible #theme-header,
	.theme-desktop-hamburger.menu-visible #theme-banner,
	.theme-desktop-hamburger.menu-visible .site-inner,
	.theme-desktop-hamburger.menu-visible #theme-footer {
		padding-right: 400px;
		padding-left: 50px;
	}


	/* Smooth transition */
	.theme-desktop-hamburger #theme-header {
		transition-property: padding, background;
		transition-duration: 300ms, 200ms;
	}

	.theme-desktop-hamburger .site-container > *:not(#theme-overlay, #theme-header) {
		transition: padding 300ms;
	}

	/* Menu items spacing */
	.theme-desktop-hamburger #theme-overlay .menu {
		gap: 35px;
	}

	/* Menu search box */
	.theme-desktop-hamburger #theme-overlay .search-form {
		flex-direction: column;
	}

	.theme-desktop-hamburger #theme-overlay .search-form .search-form-submit {
		width: 100%;
	}
}


/* END */

/* Mobile overlay */
@media only screen and (min-width: 993px) {
	body:not(.theme-desktop-hamburger) #theme-overlay {
		display: none;
	}
}

@media only screen and (max-width: 992px) {
	/* Removes scrolling when menu is open */
	html:has(.menu-visible) {
		overflow: hidden;
	}

	/* Mobile menu */
	#theme-overlay {
		right: -100vw;
		opacity: 0.8;
		width: 100%;
		transition: right 300ms, opacity 300ms;
	}

	/* Menu activation */
	.menu-visible #theme-overlay {
		right: 0;
		opacity: 1;
	}

	@media only screen and (min-width: 481px) and (max-width: 992px) {
		/* Padding on tablet */
		#theme-overlay .overlay-menu-inner {
			padding: 175px 50px 30px;
		}
	}
	@media only screen and (max-width: 480px) {
		/* Padding on mobile */
		#theme-overlay .overlay-menu-inner {
			padding: 130px 20px 20px;
		}

		/* Small devices admin bar calc */
		.admin-bar #theme-overlay {
			top: 46px;
			height: calc(100% - 46px);
		}
	}
}

/* END */