/* -------------------------------------- */
/* --- Modular Navigation Bar Styling --- */
/* -------------------------------------- */

/* Define the height as a variable for reuse in other files (like homepage.css) */
:root {
  --navbar-height: 5vw; /* Explicit height for fixed bar */
}

/* Base Navbar Container (Fixed at Top) */
.navbar {
    background-color: #ffffff20;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 5px 15vw;
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 999;
    border-bottom: 2px solid red ;
    height: var(--navbar-height); 
}
  
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    padding-top: 0px;
    margin: 0px;
    height: 100%;
}
  
/* Logo Styling */
.logo-icon {
    margin: 8px 0px 2px;
    height: 40px;
    background-color: transparent;
    fill: rgb(0, 0, 0);
    transition: fill .5s ease;
}

.logo-icon:hover .logo-outline{
  fill: #D41700;
}

.logo-fill{
  fill: #ffffff;
}

.logo-outline{
  fill: #000000;
  transition: all .3s ease;
}


  
/* Desktop Nav Links */
.nav-links {
    display: flex;
    gap: 1vw;
}
  
.nav-links li {
    list-style: none;
}
  
.nav-links a {
    text-decoration-color: #000000;
    color: rgb(0, 0, 0);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 20px;
    transition: color  .5s ease;
    background-color: #ffffff60;
    border-radius: 10px;
}
  
.nav-links a:hover {
    color: red;
    border-radius: 10px;
    font-weight: bold;
}

.sidebar{
  display: none; 
}

label {
  top: 3px;
  display: inline-block;
  padding: 2vw 2vw;
  background-color: #ffffff20;
  border-radius: 10px;
  cursor: pointer;
  margin: 0px 10vw 0px 0px;
  z-index: 1000; 
  position: fixed;
  right: 10vw; 
}

.bar {
  display: block;
  background-color: #000000;
  width: 30px;
  height: 3px;
  border-radius: 5px;
  margin: 5px auto;
  transition: background-color 0.2s ease-in, transform 0.2s ease-in,
    width 0.2s ease-in;
}

label:hover .bar {
    background-color: #D41700;
}


.aside-section {
  top: 0;
  bottom: 0;
  position: absolute;
}

.aside-right {
  height: 100vh;
  width: 100%; 
  right: 0;
  background-color: #000000ee; 
  transform: translateX(100%); 
  transition: transform 0.4s ease-in-out;
  z-index: 999; 
}

.aside-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 150px;
  text-align: left;
  padding-left: 50px;
}

.aside-list li {
  margin-bottom: 20px;
}

.aside-anchor {
  padding-bottom: 7px;
  color: #ffffff;
  text-decoration: none;
  font-size: 30px;
  position: relative;
  font-weight: 500;
}


input[type="checkbox"] {
  display: none;
}

/* Sidebar open */
input[type="checkbox"]:checked ~ aside .aside-right {
  transform: translateX(0%);
}

/* Icon transformation when sidebar is open */
input[type="checkbox"]:checked ~ label .bar {
  background-color: #D41700; 
}

input[type="checkbox"]:checked ~ label  {
  background-color: transparent; 
}

input[type="checkbox"]:checked ~ label .top {
  transform: translateY(5px) rotateZ(45deg);
}

input[type="checkbox"]:checked ~ label .bottom {
  transform: translateY(-10px)  rotateZ(-45deg);
}

input[type="checkbox"]:checked ~ label .middle {
  width: 0;
}

/* --- Mobile Specific Overrides --- */

@media (max-width: 900px) {
  .navbar{
    height: 15vw;
  }  
  
  .nav-links {
        display: none; 
    }
    .sidebar {
        display: block; 
    }

    label {
        right: 5vw; 
        top: 2vw;
    }
}

@media (max-width: 550px) {
  .navbar{
    height: 20vw;
  } 

  label {
        right: 5vw; 
        top: 3vw;
    }
}