/*Base styles for PlumIT4U Menu*/
* {

  Box-sizing: border-box;
  Margin: 0;
  Padding: 0;
  font-family: Arial, Helvetica, sans-serif;

}

/*Header styles*/
header {
    position: sticky;
    top:0;
    left:0;
    width:100%;
    height: 100px; /* Adjusted height to auto for better responsiveness */
    display: flex;
    border-bottom: 4px solid orange;
    justify-content: space-between;
    align-items: center;
    padding: 0.1rem 0.1rem;
    background-color: #003366;
    color: white;  
    /*flex-wrap:wrap-reverse; /* Added to wrap content on smaller screens I HAVE CHANGED THIS ITS NOT PERFECT BUT WORKS*/
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);   
    
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}



.logo {
    display: flex;
    align-items: center;

}

.logo img{
    height: 80px;
    width: auto;
    margin: 0.5rem 0 0 0;
    
}

/* Grid item logo image need to play around with the size of the image i think */
.grid-item img {

    height: 70px; /* Adjust the height as needed */
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 0.75rem;  
    
}

/*--- Navigation ---*/

nav ul  {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin-right: 0.5rem;
    /* text-decoration: none; */
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2 ease;
}

nav a:hover {
    color: #a3c4ff;
    /* text-decoration: none; */
}

/*==== HAMBURGER MENU ====*/

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 3px;
    /* text-decoration: none; */

}

.menu-toggle span {
    width: 25px;
    height: 3px; 
    background-color: white;
    border-radius: 3px;
    transition: all 0.3s ease;

}

/*--- Main Content Styles ---*/
main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  padding: 2rem 2rem 2rem; /* Adjusted for fixed header */
  background-color: #f9f9f9;
  min-height: 100vh;

}

.grid-item {
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem; /* Increased padding for better spacing */
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, background-color 0.2s;
  word-wrap: break-word;

}
.grid-item:hover {
  transform:scale(1.03);
  background-color: #e6f0ff;  
} 

.grid-item h3 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: #003366;
  text-align: center;

}

.grid-item p {
  text-align: center;
  font-size: 0.9rem;
  color: #333;
}

/*---Mobile Styles---*/
@media (max-width: 768px) {

    nav ul {
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        top: 110px;
        right: 0;
        background-color: #003366;
        width: 100%;
        left: 0;
        padding: 1rem 1rem;  /* Adjust padding for mobile from */
        display: none;
    }

  nav ul.active {
        display: flex;
        /* max-height: 300px; /* Adjust based on number of menu items */
    }

    .menu-toggle {
        
        cursor: pointer;
        display: flex; /*i changed all this from just the display:flex*/
      
    }


    nav li {
        margin: 0.5rem 0; /* Increase margin for better spacing */
        text-align: center;
    }

    .menu-toggle.open span:nth-child(1) {
        transform: rotate(45deg) translatey(8px);
    } 

    .menu-toggle.open span:nth-child(2) {
        opacity: 0;
    } 

    .menu-toggle.open span:nth-child(3) {
        transform: rotate(-45deg) translatey(-8px);
    } 

    .logo img{
        height: 40px;
    }

}