/* ==========================================================================
   Mobile Main Menu
   ========================================================================== */

nav.mobile-main {
    position: fixed;
    top: var(--mobile-header-max-height);
    bottom: var(--mobile-footer-max-height);
    left: 0;
    width: 100vw;
    overflow: hidden;
    background-color: var(--custom-white);
    z-index: 9;
    transition: var(--transition-menu);
    transform: translateY(100vh);

	.mobile-breadcrumb{
		padding: 1rem;
		background-color: var(--custom-jade);
		color: #fff;
		opacity: 1;
		transition: opacity 0.3s ease-in-out;
		&:empty{
			opacity: 0;
			transition: opacity 0.3s ease-in-out;
		}
		.breadcrumb-sep {
			opacity: 0.5;
		}
	}

    .mobile-panels-track {
        display: flex;
        height: 100%;
        transition: transform 0.35s ease-in-out;
        position: relative;

        .panel {
            flex-shrink: 0;
            width: 100vw;
            overflow-y: auto;
            padding: 1rem 1rem;
			background-color: var(--custom-white);
			color: var(--custom-black);
			&[data-level="2"]{
				.leaf-button{
					padding-left: 0px;
				}
			}
				*:not(.primary-button){
					&:focus-visible {
						outline: 2px solid var(--custom-sunflower);
					transition: var(--transition-standard);
				}
			}
			.mobile-nav-list{
				&:has(button:not(.leaf-button, .title-button)){
					padding-bottom: 2rem;
				}
				button:not(.leaf-button, .title-button){
					padding: .75rem 0px .75rem 0px;
				}
			}
			button{
				-webkit-appearance: none;
				appearance: none;
				background: none;
				outline: none;
				border: none;
				&.panel-back{
					padding-left: 1.25rem;
					position: relative;
					margin-bottom: 1rem;
					&::before{
						content: "<";
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
			.leaf-button{
				padding-left: calc(2rem + 10px);		
				position: relative;
				&::before{
					content: '';
					position: absolute;
					left: 0;
					height: 2rem;
					width: 2rem;
					border-radius: 0px 13px 0px 13px;
					/* background-color: var(--custom-light-blue); */
					background-color: var(--leaf-color);
					/* Center vertically */
					top: 50%;
					transform: translateY(-50%);

				}		
			}
			.title-button{
				font-family: redonda-condensed, sans-serif;
				font-size: 1.25rem;
				letter-spacing: 3.6px;
				text-transform: uppercase;
				font-weight: 900;
				
			}
			h2{
				a{
					text-decoration: none;
					color: var(--custom-black);
					display: block;
					padding: 0px 2rem 0px 0px;
					margin-bottom: 1rem;
					position: relative;					
					&:focus-visible{
						outline: 2px solid var(--custom-sunflower);
						outline-offset: 4px;
					}
					&::after{
						content: '';
						position: absolute;
						right: 0;
						bottom: 0;
						width: 1rem;
						height: 100%;
						background-image: url('/wp-content/themes/drapes/img/bubble.svg');
						background-repeat: no-repeat;
						background-position: center;
						background-size: contain;
					}
				}
			}
			.wp-block-list{
				padding: 1rem 0px;
				li{
					a{
						text-decoration: none;
						color: var(--custom-black);
						display: block;
						padding: 0.25rem 2rem;
						&:focus-visible{
							outline: 2px solid var(--custom-sunflower);
							outline-offset: 4px;
						}
					}
				}
			}
			&[inert] {
				display: none;
			}
			&[data-level="0"]{
				.mobile-nav-list{					
					li{
						padding: 10px 0px;
						border-top: 1px solid var(--custom-rustic-blue);
						&:last-child{
							border-bottom: 1px solid var(--custom-rustic-blue);
						}
					}
				}
			}
			&[data-level="2"]{
				background-color: var(--custom-light-blue);
			}
			&[data-level="3"]{
				background-color: var(--custom-light-blue-3);
			}
        }
        .panel-slot {
            flex-shrink: 0;
            width: 100vw;
        }
    }
}

body:has(.menu-toggle:checked) {
	overflow: hidden;
	nav.mobile-main{
		transition: var(--transition-menu);
		transform: translateY(0);
	}
}

/* 60em (960px) and up */
@media (min-width: 60em) {
	nav.mobile-sticky,
	nav.mobile-main {
		display: none;
	}
}

/* ==========================================================================
   Body States
   ========================================================================== */

body:has(.mobile-menu-toggle:checked) {
	overflow: hidden;

	.header {
		z-index: 99999;

		.mobile-mega-menu {
			opacity: 1;
			transition: var(--transition-menu);
			height: 100%;
		}
	}
}