/*@import "variables.css";*/

html,
body {
    font-family: var(--mof-body-font-family);
    /* font-size: var(--mof-body-font-size); */
}

.cursor-pointer {
    cursor: pointer !important;
}

a {
    color: black ;
    text-decoration: none;
}

a:hover {
    color: var(--mof-blue-500) ;
}
.text-orange {
    color: var(--mof-orange);
}
/* 定義btn-primary */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--mof-blue-500);
    --bs-btn-border-color: var(--mof-blue-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mof-blue-700);
    --bs-btn-hover-border-color: var(--mof-blue-700);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--mof-blue-700);
    --bs-btn-active-border-color: var(--mof-blue-700);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--disabled-grey-300);
    --bs-btn-disabled-border-color: var(--disabled-grey-300);
}
/*navbar*/
.navbar-custom .navbar-brand {
    font-weight: 700;
    font-size: 2rem;
    color: #F0F9FF;
}
.navbar .nav-item .nav-link {
    color: #FFFFFF;
}
.navbar-custom .navbar .nav-item .nav-link {
    color: #FFFFFF;
}
/* 自定義樣式類，當滾動到非第一頁時應用 */
.navbar-custom.scrolled-black{
    box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.2);
    background-color: white;
}
.navbar-custom.scrolled-black .navbar-brand,
.navbar-custom.scrolled-black .nav-link {
    color: black !important;
    /* 設定字體顏色為黑色 */
}

/*mid-navbar 中間的導航欄*/
.mid-navbar .dropdown-menu a {
    color: #000;
}
.mid-navbar .dropdown-menu a:hover {
    background-color: #f8f9fa;
}
.mid-navbar {
    z-index: 40;
    top: 73px;
    height: 40px;
    background-color: var(--mof-blue-500);
}
.mid-navbar .dropdown-menu {
    display: none;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards; /* 使用fadeIn動畫，持續時間0.3秒，過程漸進，動畫結束後保持最終狀態 */
}
.mid-navbar .nav-item .dropdown-menu .dropdown-item:hover{
    background-color: var(--mof-blue-700);
    color: white;
}
.mid-navbar .dropdown-menu.show {
    display: block;
    opacity: 1;
    animation: none; /* 如果已經顯示，停止動畫 */
}
/*footer*/
footer {
    bottom: 0;
    width: 100%; /* 確保 footer 寬度為整頁 */
    background-color: var(--mof-blue-500);
    color: #ffffff;
    padding: 10px 0;
    font-size: 0.8rem;
    max-height: 200px;
}
.words-not-exceed-1 {
    grid-template-columns:1fr auto auto auto;
}
.words-not-exceed-2 {
    display: grid ;
    grid-template-columns:auto 1fr;
}
.content-nowrap{
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 手機樣式 (寬度 <= 576px)*/
@media (max-width: 576px) {
    .navbar-custom .collapse.navbar-collapse{
        background-color: white;
    }
    .navbar-custom .collapse.navbar-collapse > ul > li > a{
        color: #000 !important;
    }
    .navbar-custom .collapse.navbar-collapse > ul > li > a.show{
        background-color: var(--mof-blue-700);
        color: white !important;
    }
    .navbar-custom .collapse.navbar-collapse > ul > li > ul > li > a:active{
        background-color: var(--mof-blue-700);
        color: white ;
    }
    .navbar-custom .navbar-collapse .nav-item .dropdown-menu{
        animation: fadeIn 0.5s ease forwards; /* 使用fadeIn動畫，持續時間0.3秒，過程漸進，動畫結束後保持最終狀態 */
    }
    .navbar-custom .btn-login-custom{
        margin-left: 0 !important; 
        display: flex;
        justify-content: center;
        text-decoration: none;
    }
    footer{
        max-height: none;
    }
    footer .row:first-child > div > div{
        flex-wrap: wrap;
    }
    footer .row:first-child > div:last-child{
        display: none;
    }

}
/*為第一導航欄定的樣式 (577px <= 寬度 <= 991px ) */
@media (min-width: 577px) and (max-width: 991px) {
    .navbar-custom .collapse.navbar-collapse{
        background-color: white;
    }
    .navbar-custom .collapse.navbar-collapse > ul > li > a{
        color: #000 !important;
    }
    .navbar-custom .btn-login-custom{
        margin-left: 0 !important; 
        display: flex;
        justify-content: center;
        text-decoration: none;
    }
}
/* 平板樣式 (577px <= 寬度 <= 1024px ) */
@media (min-width: 577px) and (max-width: 1024px) {
    .navbar-custom .collapse.navbar-collapse > ul > li > a.show{
        background-color: var(--mof-blue-700);
        color: white !important;
    }
    .navbar-custom .collapse.navbar-collapse > ul > li > ul > li > a:active{
        background-color: var(--mof-blue-700);
        color: white ;
    }
    .navbar-custom .navbar-collapse .nav-item .dropdown-menu{
        animation: fadeIn 0.5s ease forwards; /* 使用fadeIn動畫，持續時間0.3秒，過程漸進，動畫結束後保持最終狀態 */
    }
    .navbar-custom .btn-login-custom{
        margin-left: 0 !important;
    }
}
/* 桌面樣式 (寬度 > 1024px) */
@media (min-width: 1025px) {
    .btn-secondary:hover{
        background-color: white;
        color: #525252;
    }
    .nav-item-custom.dropdown{
        opacity: 0;
        animation: fadeIn 0.3s ease forwards; /* 使用fadeIn動畫，持續時間0.3秒，過程漸進，動畫結束後保持最終狀態 */
    }
    .navbar-custom.scrolled-black .nav-item.nav-item-custom a:hover{
        background-color: var(--mof-blue-500);
        color: white !important;
    }
    .navbar-custom .dropdown-item:hover{
        background-color: var(--mof-blue-500);
    }
    .navbar-custom .nav-item:hover,.dropdown-item:hover{
        color: #FFFFFF;
    }
    /* 調整每個 dropdown-item 的寬度 */
    .navbar-custom .dropdown-menu .dropdown-item {
        box-sizing: border-box; /* 包括內邊距和邊框在內的寬度 */
    }
    /* 當滑鼠移到下拉選單時顯示它 */
    .navbar-custom .nav-item.dropdown:hover>.dropdown-menu,
    .navbar-custom .dropdown-menu.show,
    .navbar-custom .dropdown:hover>.dropdown-menu,
    .navbar-custom .dropdown-menu>.dropdown:hover>.dropdown-menu { 
        display: grid;
        opacity: 1;
        animation: none; /* 如果已經顯示，停止動畫 */
        /* transform: translateY(-10px); */
    }
}
/* 桌面樣式 (寬度 >= 992px) */
@media (min-width: 992px) {
    .mid-navbar .dropdown-toggle::after {
        display: none;
    }
}
/* 手機平板樣式 (寬度 <= 992px) */
@media (max-width: 992px) {
    .mid-navbar .navbar-collapse{
        overflow: scroll;
        height: 70vh;
    }
}
/*動畫*/
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px); /* 開始位置：透明度0，向上移動10px */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* 結束位置：透明度1，不移動 */
    }
}