/*  .................................MENU BAR...................................*/


/*  .................................MENU CONTAINERS.............................*/ 
.menu-container-fluid{
	position:relative;
	width:100%;
	background-color:var(--whitecolor);
	height: clamp(6rem, 10vw, 8rem); /* Minimum 3rem, ideal 7% of viewport width, max 5rem */
	z-index: 10;
	border-bottom: 0.1rem solid var(--lightgreycolor);
	box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.05), 
              0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ...............................LOGO............................................*/

.logo-container {
	position: absolute;
    left: 1.5rem ;
    top: 0.5rem;
	z-index: 100;
	width: clamp(8rem, 20vw, 10rem); /* never smaller than 5rem, never larger than 10rem */
    height: auto;      /* Let it scale with width */
}

.full-logo{
	width: 100%;       /* Let the image fill the container */
    height: auto;      /* Maintain aspect ratio */
}

/*  .................................1ST NAV BAR...................................*/ 

.menu-bar1{
	position:relative;
	width:100%;
	height:auto;
}

.site-navbar1 {
    position: relative; /* Ensures child elements position relative to this */
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
   	height: 2.8rem;
    margin-right: 4rem; /* space between cart and right edge */

} 

#burgerIcon {
    display: flex;
    align-items: center;
    width: 1.8rem;
	height: 1.8rem;
    padding-top: 1.0rem; /* Moves it slightly down */
}

.nav1-icon-burger svg {
	width: 100%;
	height: 100%;
}

.nav1-icon-burger:hover svg {
	stroke: var(--darkbluecolor);
	fill: var(--darkbluecolor);
}

#account {
	position: relative;
}

#accountIcon {
    display: flex;
    align-items: center;
    height: 1.7rem;
	width: 1.7rem;
    position: relative; 
	padding-top: 1.0rem; /* Moves it slightly down */
	margin-left: 3.0rem;
}

.nav1-icon-account svg {
	width: 100%;
	height: 100%;
}

.nav1-icon-account:hover svg {
	stroke: var(--darkbluecolor);
	fill: var(--darkbluecolor);
}

#account .account-badge {
    display: none;
	position: absolute;
    top: 0.7rem;
    right: 0.25rem;       
    background-color: var(--lightbluecolor);
    color: var(--whitecolor);
    border-radius: 50%;
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.7rem;
    align-items: center;
    justify-content: center;
    font-family: 'Rubik-Regular';
    pointer-events: none;   /* so clicks go through to the icon */
}

/* when the account icon has the class “has-badge”, we override to show */
#account.has-badge .account-badge {
	display: flex;
}

#cart {
	position: relative;
}

#cartIcon {
    display: flex;
    align-items: center;
    height: 1.5rem;
	width: 1.5rem;
    position: relative; 
	padding-top: 1.0rem; 
	margin-left: 3.0rem;
}

.nav1-icon-cart svg {
	width: 100%;
	height: 100%;
}

.nav1-icon-cart:hover svg {
	stroke: var(--darkbluecolor);
	fill: var(--darkbluecolor);
}

#cart .cart-badge {
    position: absolute;
    top: 0.7rem;
    right: -0.5rem; 
    background-color: var(--darkbluecolor);
    color: var(--whitecolor);
    border-radius: 50%;
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    font-family: 'Rubik-Regular';
	justify-content: center; 
}



/*  .................................2nd NAV BAR ...................................*/ 

.menu-bar2{
	display:flex;
	justify-content: flex-end;
	position:absolute;
	bottom: 0rem;
	right: 0rem;
	height: 2.5rem;
}

.site-navigation{
	display: flex;         
    align-items: center;    
    height: 100%;
}

.site-navigation .site-menu {
	position:relative;
	display:inline-flex;
	justify-content: center;/* Horizontal centering */
	align-items: center;	/* Vertical centering */
	width: 15rem;   
	color: var(--darkgreycolor);
	height:100%;
	font-size: 1.2rem;
	font-family: Rubik-Regular, sans-serif;
	font-weight: 400;
}
 
.site-navigation .site-menu:hover {
	background-color: var(--vlightbluecolor);
	color: var(--whitecolor);
	cursor: pointer; 
}

.site-navigation .site-menu .mydropdown {
	visibility: hidden;
    top: 100%;
    position: absolute;
    text-align: left;
    list-style-type: none;
	box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.2);
	margin-top:0rem;
	padding: 0rem;
    width:100%;
	background-color: var(--whitecolor);
    transition-duration: 0.2s 0s;
} 
 
.site-navigation .site-menu:hover .mydropdown {
	transition-delay: 0s; 
 	z-index: 10;
	visibility: visible;
} 
 
.site-navigation .site-menu .mydropdown > li > a{
	color: var(--blackcolor); 
	font-size: 1.0rem);
	font-weight: 300;
	text-decoration:none;
	padding: 0.5rem 0.5rem;
	background-color: var(--whitecolor);
	text-align:left;
	display: block;
}

.site-navigation .site-menu .mydropdown > li > a:hover {
	background: var(--vlightbluecolor); 
    color: var(--whitecolor); 
}


/*  .................................SIDE MENU...................................*/    

.side-navbar {
	position: fixed; /* Pulls it out of the flow */
	top: 2.5rem;
	right: 0;
	width: 25rem;
	height:100%;
	max-width: 75%;
	background-color: var(--darkbluecolor);
	transform: translateX(100%);  /* Hides it off-screen */
	transition: transform 0.3s ease-in-out;
	z-index: 3000;
	overflow-y: auto;
	visibility: hidden;
	opacity: 0;
	overflow: visible;  /* allow it to grow naturally */
	border-top: 0.1rem solid var(--whitecolor);
	margin: 0;
	padding: 0;
}

.side-navbar.active {
	transform: translateX(0);     /* Slide into view */
	visibility: visible;
	opacity: 1;
	transition: transform 0.3s ease-in-out, visibility 0s, opacity 0.3s;
}

.side-navbar ul {
    list-style: none;
    margin: 0;
	padding-left: 0;
}

.side-navbar a {
	text-decoration: none;
}

.side-navbar .sidemenu {
	position:relative;
	display: flex;
    flex-direction: column;
	background-color: var(--darkbluecolor);
	z-index: 3001;   
}

.side-navbar .sidemenu li {
	position:relative;
	display:flex;
	pointer-events: auto;
	align-items: center;
	justify-content: flex-start;
	padding-left:1rem;
	width:100%;
	height:3.0rem;
	cursor: pointer;
	color: var(--whitecolor);
	list-style-type: none;		/* Remove li bullets */
	border-bottom: 0.1rem solid var(--whitecolor);
	text-decoration:none;
}

.side-navbar .sidemenu .submenu {
	display:none;
	position: static; 
	background-color:var(--vlightgreycolor);
	box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.2);
} 

.side-navbar .sidemenu .submenu li a{
	color: var(--darkgreycolor);
	display: block; /* Make the link fill the entire list item */
    width: 100%;    /* Stretch the clickable area to full width */
}

.side-navbar .sidemenu li:hover {
	color: var(--darkgreycolor);
	background-color:var(--vlightbluecolor);
}

.side-navbar .sidemenu li:hover > .submenu {
	position:absolute;
	display:block;
	right:0;
	width:75%;
	pointer-events: auto;
	z-index: 3002;
	top:3.0rem;
} 

.side-navbar .sidemenu li:hover .submenu li:hover a {
	color: var(--darkgreycolor);	
}

#menuOverlay {
	position: fixed;
	inset: 0;                 /* top/right/bottom/left: 0 */
	z-index: 2000;
	background: rgba(0, 0, 0, 0.55); /* backdrop */
}

#menuOverlay[hidden] { display: none; }

/*............................................ MEDIA QUERIES................................... */

@media (min-width: 95rem) {

	#menuSearchContainer{
		display:flex;
	}
	
	#burgerIcon{
		display:none;
	}

	#mySidemenu{
		display:none;
	}
	
	#site-navigation{
		display:inline-block;
	}
	
	.nav1-group {
        gap: 5rem; 
    }
}

@media (max-width: 95rem) {
	
	#menuSearchContainer{
		display:none;
	}
	
	#burgerIcon{
		display:inline-block;
	}

	#site-navigation{
		display:none;
	}
	
	.nav1-group {
        gap: 3rem; /* Reduce spacing for mobile */
    }
}

@media (max-width: 60rem) {
	
	#menuSearchContainer{
		display:none;
	}
		
	#burgerIcon{
		display:inline-block;
	}
	
	#site-navigation{
		display:none;
	}
	
	.nav1-group {
        gap: 1.5rem; /* Reduce spacing for mobile */
    }
}