/*
Fuel Theme
Version: 6.0.0
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Shared Menu Styles
# Mobile Menu
# Desktop Menu
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Shared Menu Styles
--------------------------------------------------------------*/
.primary-menu-wrapper {
    z-index: 998;
}
.primary-menu {
    display: flex;
    background-color: var(--primary-color);
    justify-content: center;
}
.primary-menu .menu-level-1 > .menu-item-title {
	display: block;
	padding: clamp(0.6rem, 2vw, 0.85rem) clamp(0.5rem, 2vw, 2rem);
}

/* Remove detail markers */
summary.menu-item-title::-webkit-details-marker {
	display: none;
}
summary.menu-item-title {
	list-style: none;
	cursor: pointer;
	color: var(--accent-color);
}

/* First Level */
.menu-level-1 > summary {
    color: #fff;
}

/*--------------------------------------------------------------
# Mobile Menu
--------------------------------------------------------------*/
@media (max-width: 68.49em) {
    .primary-menu-wrapper {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        box-shadow: 0 0 0.5rem rgba(0,0,0,0.2);
    }
    .primary-menu .menu-desktop {
		display: none;
	}

    /* Menu Level 1 */
	.primary-menu .menu-level-1 {
		flex: 1 1 auto;
	}
	.primary-menu .menu-level-1:nth-child(n+3) {
		border-left: 1px solid rgba(255,255,255,0.1);
	}
	.primary-menu .menu-level-1 > .menu-item-title > span {
		display: block;
		font-size: 0.6em;
		text-align: center;
		color: var(--menu-link-color);
		transition: background-color 300ms, box-shadow 300ms;
	}
	.primary-menu .menu-level-1.menu-open > .menu-item-title > span {
		color: var(--menu-link-color);
		background: var(--menu-lvl1-bg-color);
		box-shadow: 0 0.3rem 0.4rem rgba(0,0,0,0.1);
	}
	.primary-menu .menu-level-1 > .menu-item-title > span > svg {
		display: block;
		margin: 0 auto 0.1rem;
		width: 1.5rem;
		height: 1rem;
	}

	/* Level 1 Sub Menu */
	.primary-menu .menu-level-1 > .menu-sub {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		padding: 1.3rem 0 4.5rem;
		overflow: auto;
		overscroll-behavior: contain;
		background: #a0a0a0;
		box-shadow: 0 0 2rem rgba(0,0,0,0.3);
		transition: opacity 200ms, transform 300ms;
	}
}


/*--------------------------------------------------------------
# Desktop Menu
--------------------------------------------------------------*/
@media (min-width: 68.5em) {
    .primary-menu,
    .primary-menu-wrapper {
        position: sticky;
        top: 0;
        margin: 0;
        z-index: 999;
    }
    .primary-menu .menu-mobile {
		display: none;
	}
    .primary-menu-wrapper + * {
        margin-top: 0;
    }
    .primary-menu-wrapper + * {
        margin-top: 0 !important;
    }
	.primary-menu .menu-level-1 > .menu-item-title > span > svg {
		display: none;
	}
    .primary-menu > div a {
        color: #fff;
    }
    details.menu-item {
        --height: var(--collapsed);
    }
    details.menu-item[open] {
        --height: var(--expanded);
    }

    .menu-level-1 > .menu-sub {
        position: absolute;
        top: 100%;
        left: 3rem;
        right: 3rem;
        max-height: 0;
        box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 25%);
        background: #fff;
        padding: 1rem;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        transition: max-height 600ms;
        overflow: hidden;
    }
    .menu-level-1[open] > .menu-sub {
        max-height: var(--expanded);
    }
}