/* Variables */
:root {
    --navbar-color: oklch(0.25 0 0);
    --navbar-bg-color:hsl(0, 0%, 92%); /* not used */
    --main-bg-color: oklch(0.95 0 0);
    --secondary-bg-color: oklch(0.63 0.06 21);}

/* Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
}

ul {
    list-style: none;
}

/* Navbar Styles */
.navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 65px;
   padding-right: 5px;
   color: var(--navbar-color);
   background-color: var(--main-bg-color);
}

.navbar__links {
    display: flex;
    padding-top: 12px;
}

.navbar__links li {
    list-style-type: none;
    font-size: 1.2rem;
}

.navbar__item {
    padding: 0 10px;
}

.navbar__item > a {
   text-decoration: none;
   color: var(--navbar-color);
}

.navbar__item > a:hover {
    padding-left: 0.5rem;
    letter-spacing: 1.5px;
}


/* Media queries for small devices */
@media (width < 768px) {
    .navbar__links {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        width: 0;
        height: calc(100vh-72px);
        position: absolute;
        top: 72px;  /* equal to brand-title height */
        right: 0;
        background-color: var(--secondary-bg-color);
        /* transform: translate(101%); */
        transition: all 0.4s ease-in-out;
    }
    
    .show-nav .navbar__links {
        width: 100vw;
        /* transform: translate(0); */
    }
    
    .navbar__item {
        transform: translateX(101%);
    }
    
    .show-nav .navbar__item {
        transform: translateX(0);
    }
    
    .navbar__item > a {
        display: block;
        padding: 0 1rem;
        font-size: 1.6rem;
        transition: all 0.4s ease-in-out;
    }

    .navbar__item > a:hover {
        padding-left: 1rem;
        letter-spacing: 1.5px;
    }

    /* Burger Toggle Menu */
    .burger {
        display: block;
        position: relative;
        padding: 0;
        width: 45px;
        border: none;
        background: transparent;
        cursor: pointer;
        }

    .bar {
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 3px;
        background: var(--navbar-color);
        transition: all 0.4s ease-in-out;
    }

    .show-nav .bar {
        width: 0;
        background: transparent;
    }   

    .bar::before, .bar::after {
        content: "";
        width: 40px;
        height: 4px;
        border-radius: 3px;
        position: absolute;
        left: 0;
        border-radius: 3px;
        background: var(--navbar-color);
        transition: all 0.4s ease-in-out;
    }

    .bar::before {
        transform: translateY(-12px);
    }

    .bar::after {
        transform: translateY(12px);
    }

    .show-nav .bar::before {
        transform: rotate(45deg);
        top: 0;
    }
    .show-nav .bar::after {
        transform: rotate(-45deg);
        top: 0;
    }

        /* bonus + animation */
    .show-nav .first {
        transition: all 1s ease-out;
     } 
    .show-nav .second {
        transition: all 1.1s ease-out;
     }
    .show-nav .third {
        transition: all 1.2s ease-out;
     }
    .show-nav .fourth {
        transition: all 1.3s ease-out;
     } 
    .show-nav .fifth {
        transition: all 1.4s ease-out;
     } 
    }


/* Media queries for laptops and desktops */
@media (width>= 768px) {
    .navbar__item > a::after {
        display: block;
        content: "";
        width: 0;
        height: 1px;
        background: var(--navbar-color);
        transition: width 0.4s;
    }

    .navbar__item:hover > a::after {
        width: 100%;
    }

    .navbar .links ul {
        flex-direction: column;
        gap: 10px;
        padding: 10px 0;
    }

    .navbar .links.show-now {
        max-height: 300px; /* Adjust based on number of links */
    }

    .burger {
    display: none;
    }
}