/*
 * Extend Karolo Blocks main navigation mobile behavior up to 1300px.
 * Plugin default mobile breakpoint is 1240px.
 */
@media only screen and (min-width: 1241px) and (max-width: 1300px) {
	.kd-main-navigation {
		overflow: visible;
	}

	.kd-main-navigation .kd-section .kd-container {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.kd-main-navigation .logo-main .wp-block-site-logo.is-default-size img {
		width: 180px;
	}

	.kd-main-navigation .main-menu-icon {
		display: block;
	}

	.kd-main-navigation .main-nav {
		margin: 0;
		height: auto;
		display: none;
		position: absolute;
		top: 98px;
		right: calc(var(--wp--custom--gap--horizontal) * -1);
		background-color: transparent;
		z-index: 10;
		width: 100%;
		left: 0;
	}

	.kd-main-navigation .main-nav:before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--wp--preset--color--bg);
		border-radius: 0 0 var(--wp--custom--borderradius)
			var(--wp--custom--borderradius);
	}

	.kd-main-navigation .main-nav.open {
		display: block;
	}

	.kd-main-navigation .main-nav .items {
		flex-direction: column;
		justify-content: center;
		flex-wrap: nowrap;
	}

	.kd-main-navigation .main-nav ul {
		flex-direction: column;
		padding: 0 20px 20px;
	}

	.kd-main-navigation .main-nav .items .main-menu > ul {
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
	}

	.kd-main-navigation .main-nav ul li a {
		padding: 12px var(--wp--custom--gap--horizontal);
		justify-content: space-between;
	}

	.kd-main-navigation span.sub-menu-icon {
		width: 30px;
		height: 24px;
		margin: 0;
	}

	.kd-main-navigation span.sub-menu-icon::after {
		background-size: 8px;
	}

	.kd-main-navigation
		.kd-container
		.main-nav
		ul
		li:not(.wp-block-button__link)
		a,
	.kd-main-navigation.header--floating
		.kd-container
		.main-nav
		ul
		li:not(.wp-block-button__link)
		a {
		padding: 12px 0;
	}

	.kd-main-navigation .main-nav ul li a::before {
		display: none;
	}

	.kd-main-navigation .main-nav ul li > ul.sub-menu {
		position: relative;
		background-color: var(--wp--preset--color--bg);
		width: 100%;
		left: 0;
		right: 0;
		padding: 20px;
		top: auto;
		min-width: unset;
		transition: none;
	}

	.kd-main-navigation .main-nav ul li:hover > ul.sub-menu {
		display: none;
	}

	.kd-main-navigation .main-nav ul li > ul.sub-menu li:not(:last-child) {
		padding: 0;
		margin-bottom: 12px;
	}

	.kd-main-navigation .main-nav ul li.open > ul.sub-menu {
		display: block;
	}

	.kd-main-navigation .main-nav ul li ul.sub-menu li a {
		color: var(--wp--preset--color--primary);
	}

	.kd-main-navigation .main-nav ul li > ul.sub-menu li > ul.sub-menu {
		left: 0;
	}

	.kd-main-navigation .main-nav ul li > ul.sub-menu li a .sub-menu-icon {
		border-color: var(--wp--preset--color--primary);
	}

	.kd-main-navigation .main-nav ul li > ul.sub-menu li > ul.sub-menu li a {
		font-weight: var(--wp--custom--typography--font-weight--normal);
	}

	.kd-main-navigation
		.main-nav
		ul
		li.menu-item-has-children
		> a
		span.sub-menu-icon.open {
		transform: rotate(-180deg);
	}
}