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


/*  .................................MENU CONTAINERS.............................*/ 
.menu-container-fluid1{
	position:relative;
	width:100%;
	background-color:var(--whitecolor);
	height: clamp(3rem, 7vw, 5rem); /* Minimum 3rem, ideal 7% of viewport width, max 5rem */
}

.menu-container-fluid2{
	padding-top: 0.2rem;
	position:relative;
	width:100%;
	background-color:var(--whitecolor);
	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);
	height:2.5rem;
}

/* ...............................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%;
}

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

} 

#burger {
    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 {
    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 {
    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.4rem; 
    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:relative;
	height: 100%;
}


.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: 12rem;   
	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:12rem;
	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: clamp(1rem, 1.1vw, 1.2rem);
	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); 
}


/*  .................................NAV SEARCH ...................................*/ 

/* Search Container */
.menu-search-container {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    transition: width 3s ease;
    height: 100%;
    background-color: var(--whitecolor);
    z-index: 10;
    overflow: visible;
    position: relative;
    margin-top:0.5rem;
	box-sizing: border-box;
	flex-wrap: nowrap;
}

/* Updated: Position the Search Icon inside the container */
.menu-search-container .nav1-icon-search {
    cursor: pointer;
    width: 1.4rem;
    height: 1.4rem;
    min-width: 1.4rem;
    min-height: 1.4rem;
    position: relative;      /* Anchor icon inside the container */
    z-index: 20;             /* Ensures the icon remains on top */
	transition: transform 0.5s ease;
}

/* Search Icons */
.nav1-icon-search svg,
.nav1-icon-search-close svg {
	width: 100%;
	height: 100%;
}

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

/* Move search icon when active */
.menu-search-container.active .nav1-icon-search {
    right: auto;
} 

/* Search Input Container */
.menu-search-container .menu-search-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
	width: 0rem;
    transition: width 0.5s ease-in-out;
    background-color: transparent;
    border: none;
    padding: 0.5rem 0;
    margin: 0;
    overflow: hidden;
    height: 100%;
    z-index: 15;  /* Stays beneath the search icon */
}

/* Expand Input when Active */
.menu-search-container.active .menu-search-input {
    width: 25rem;
    background-color: transparent;
    box-sizing: border-box;
	padding: 0 0 0 1.0rem;
}

/* Input Field */
.menu-search-container .menu-search-input input {
    flex: 1;
	width: 100%;
    height:80%;
	font-size: 1.1rem !important;
    font-weight: 300 !important;
    font-family: Rubik-Light, sans-serif !important;
    color: var(--darkgreycolor) !important;
   	border: none;
    transition: background-color 0.3s ease-in-out;
    box-sizing: border-box;
}

/* Active Input Field */
.menu-search-container.active .menu-search-input input {
    background-color: var(--whitecolor);
    border: 0.1rem solid var(--lightgreycolor); 
	border-radius: 0.25rem;      
	outline: none;
	padding: 0 0.5rem;
}

/* Placeholder visibility when focused or active */
.menu-search-container .menu-search-input input:focus::placeholder,
.menu-search-container.active .menu-search-input input::placeholder {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* Hide placeholder when not active */
.menu-search-container .menu-search-input input::placeholder {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Close Button (Initially Hidden) */
.menu-search-container .nav1-icon-search-close {
   	width: 1.4rem;
	height: 1.4rem;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	background-color: transparent;
	transition: opacity 0.3s ease-in-out;
	z-index: 20;
	min-width: 1.25rem;
    min-height: 1.25rem;
    padding: 0.3rem 0 0 1.0rem;
}

/* Show Close Button when Active */
.menu-search-container.active .nav1-icon-search-close {
    display: inline-flex;
    opacity: 1;
}


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


.side-navbar {
	position: fixed; /* Pulls it out of the flow */
	top: 2.5rem;
	right: 0;
	width: 25rem;
	max-width: 75%;
	background-color: var(--darkbluecolor);
	transform: translateX(100%);  /* Hides it off-screen */
	transition: transform 0.3s ease-in-out;
	z-index: 1000;
	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;
	z-index: 5;
}

.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;
	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: none;
	z-index: 10;
	top:3.0rem;
} 

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



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

@media (min-width: 75rem) {

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

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

	.site-navbar1 {
        padding-right: 4rem; /* Reduce right padding for better fit */
    }
	.site-navbar3 .search-container .nav3-icon-search {
		right: 3.8rem;
	}

	.site-navbar3 .nav3-icon-gear {
		margin-left:3.0rem;
	}
	
}

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

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

	.site-navbar1 {
		padding-right: 3rem; /* Reduce right padding for better fit */
    }
	.site-navbar3 .search-container .nav3-icon-search {
		right: 2.8rem;
	}
	
	.site-navbar3 .nav3-icon-gear {
		margin-left:2.0rem;
	}

}

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

	.site-navbar1 {
        padding-right: 1.5rem; /* Reduce right padding for better fit */
    }
	
	.site-navbar3 .search-container .nav3-icon-search {
		right: 1.8rem;
	}
	
	.site-navbar3 .nav3-icon-gear {
		margin-left:2.0rem;
	}

}