/*
    navbar.css (Navigation bar & desktop menu queries)
*/

#check{ display: none; }

#menu-btn .menu-btn{
    width: 20px;
    height: 20px;
    padding: .5rem;
    aspect-ratio: 1;
    border: 1px solid gray;
    border-radius: 8px;
    transition: 0.5s ease-in-out;
}
    .btn-close{
        display: none;
    }

    #check:checked ~ .navbar{
        right: 0;
        left: 0;
        transform: translateX(0);
    }
    #check:checked ~ #menu-btn .btn-close{
        display: block;
    }
    #check:checked ~ #menu-btn .btn-open{
        display: none;
    }

    .logo{
        font-weight: bolder;
    }
    
    .navbar{
        position: absolute;
        top: 50px;
        border: 1px solid var(--border);
        border-radius: 0 0 18px 18px;
        background: rgba(15, 23, 42, 0.98);
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        /* margin: 0 var(--defmargin); */
        transform: translateX(-150%);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    
    .navbar a{
      width: 90%;
      height: 100%;
      text-align: center;
      color: var(--muted);
      border-radius: 5px;
      padding: 0.45rem 0.25rem;
      transition: color 0.2s ease, transform 0.2s ease;
    }
    
    .navbar a:hover, .navbar a:focus-visible {
        color: var(--heading);
        transform: translateY(-1px);
        border: 1px solid gray;
}