.nav {
  background: var(--card-background-color);
  padding: 1rem;
  height: 100vh;
  width: 250px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  transition: transform 0.3s ease;

  @media (max-width: 768px) {
    transform: translateX(-100%);
    
    &.active {
      transform: translateX(0);
    }
  }

  nav {
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    li {
      margin: 0;
    }

    a {
      display: block;
      padding: 0.5rem;
      color: var(--h1-color);
      text-decoration: none;
      
      &:hover {
        color: var(--primary);
      }

      &.active {
        color: #fff;
        background-color: #bf9631;
        color: #000;
        font-weight: 500;
      }
    }

    details {
      margin-bottom: 0;

      summary {
        padding: 0.5rem 0;
        cursor: pointer;
        color: var(--h1-color);
        font-weight: 500;

        &:hover {
          color: var(--primary);
        }
      }

      ul {
        padding-left: 1.25rem;
      }
    }

    hr {
      margin: 1rem 0;
    }
  }
}

.nav-toggle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 99;
  display: none;
  padding: 0.5rem;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  color: white;
  box-shadow: var(--card-box-shadow);

  svg {
    display: block;
  }

  @media (max-width: 768px) {
    display: block;
  }
}

// Ensure main content is pushed to the right
main {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  margin-right: 1.5rem;
  margin-left: 250px;

  @media (max-width: 768px) {
    margin-left: 0;
  }
}
