/* 導覽列 - base */
.navbar {
    padding: 16px 120px;
    position: fixed;
    z-index: 100;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(12px);
}

@media screen and (max-width:1280px) {
    .navbar {
        padding: 16px 40px;
    }
}

@media screen and (max-width:768px) {
    .navbar {
        padding: 16px 24px;
    }
}

.navbar-dark {
    border-bottom: none;
}

.navbar-light {
    background-color: var(--gray-BG);
    border-bottom: 1px solid #dee2e6;
    box-shadow: 0px 2px 10px 0px rgba(11, 68, 117, 0.25);

    .navlink {
        background-color: var(--gray-BG);
    }

    .link {
        color: var(--gray-dark);
    }
}

.navdrawer {
    display: none;
    border: 1px solid var(--white-20);
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    background: none;
    i {
        color: var(--white-100);
    }
}

/* 導覽清單 (desktop ver.)*/

.navlink {
    display: flex;
    align-items: center;
    gap: 32px;
}

.link {
    font-size: 18px;
    line-height: 100%;
    color: var(--white-80);
    cursor: pointer;

    &:hover {
        color: var(--primary-500);
        font-weight: 500;
        opacity: 0.8;
    }
}

/*浮動選單導覽清單 (mobile ver.) */

.mobile-menu {
    display: none;
    /* display: flex; */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 背景 */
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 1000;
}

/* 關閉選單的按鈕 */
.close-menu {
    padding: 4px;
    cursor: pointer;
    position: absolute;
    top: 18px;
    right: 24px;
}

@media screen and (max-width:1024px) {
    .navdrawer {
        display: block;
    }

    .navlink {
        display: none;
    }

    .navbar-light {

        .navdrawer {
            border: 1px solid var(--gray-light);
            border-radius: 4px;
            padding: 4px;
            cursor: pointer;
            background: none;

            i {
                color: var(--gray-mid);
            }
        }
    }
}

/*下拉式導覽清單 (mobile ver.)) */
/* 
@media screen and (max-width:1024px) {
    .navdrawer {
        display: block;
    }

    .navbar-dark {
        border-bottom: none;

        .navlink {
            backdrop-filter: blur(12px);
        }
    }

    .navbar-light {
        border-bottom: none;
        box-shadow: none;

        .navlink {
            background-color: var(--gray-BG);
        }

        .navdrawer {
            border: 1px solid var(--gray-light);
            border-radius: 4px;
            padding: 4px;
            cursor: pointer;
            background: none;

            svg>path {
                fill: var(--gray-mid);
            }
        }
    }

    .navlink {
        display: none;
        position: absolute;
        z-index: 1000;
        top: 100%;
        left: 0;
        width: 100%;
        animation: slideDown 0.3s ease-in-out;
        box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(12px);

        div {
            margin: 24px auto 40px;
            display: flex;
            flex-direction: column;
        }

        button {
            display: none;
        }

    }

    .navlink a {
        color: var(--white-100);
        font-size: 1.125rem;
        line-height: 1.5rem;
        text-align: center;
        width: 100%;

        &:hover {
            color: var(--primary-500);
            font-weight: 500;
            opacity: 0.8;
        }

    }

    .navlink.open {
        display: block;
    }

    @keyframes slideDown {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
} */