/* Preserve the existing front-end palette and desktop layout.
 * Layers: header 10 (style.css), Bootstrap backdrop 1040 / drawer 1045,
 * modal 1050 / 1055. Content titles must stay below the fixed header.
 */
:root {
    color-scheme: light;
}

.frontend-page {
    --frontend-header-height: 100px;
}

.frontend-page > header {
    height: var(--frontend-header-height);
}

.frontend-page > main {
    margin-top: var(--frontend-header-height);
    min-height: calc(100dvh - var(--frontend-header-height) - 198px);
}

.frontend-menu-toggle,
.frontend-menu-header {
    display: none;
}

.frontend-menu-content {
    display: flex;
    align-items: center;
    height: 100%;
    min-width: 0;
}

.frontend-page section .title {
    z-index: auto;
    overflow-wrap: anywhere;
    text-align: center;
}

.bannerSwiper {
    width: 100%;
    min-width: 0;
}

.bannerSwiper .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
}

.bannerSwiper .swiper-prev,
.bannerSwiper .swiper-next {
    border: 0;
    background: transparent;
}

.searchBar .inputBox,
.searchBar .inputBox .form-control,
.courseDetail .basic > *,
.courseDetail .basic ul li > div {
    min-width: 0;
}

.courseDetail {
    padding-top: 0;
}

.courses .course .content .time {
    flex-wrap: wrap;
    gap: 8px;
}

.courses .course .content .time .right,
.newsBoxs a.news .right {
    flex-shrink: 0;
}

.courses .course .content .time .right .check {
    white-space: nowrap;
}

.newsBoxs a.news .left {
    min-width: 0;
    overflow-wrap: anywhere;
}

.newsBoxs a.news .top {
    flex-wrap: wrap;
    gap: 8px 0;
}

.newsBoxs a.news .top .date {
    white-space: nowrap;
}

.courseDetail .basic .courseName,
.courseDetail .basic ul li > div,
.courseDetail .content .text {
    overflow-wrap: anywhere;
}

/* Keep authored tables scrollable inside the article, including pasted
 * fixed-width content, rather than letting them widen the whole page.
 */
.courseDetail .content .text {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.courseDetail .content .text img,
.courseDetail .content .text video {
    max-width: 100% !important;
    height: auto !important;
}

.courseDetail .content .text iframe,
.courseDetail .content .text embed,
.courseDetail .content .text object {
    max-width: 100%;
}

.courseDetail .content .text iframe {
    height: auto;
    aspect-ratio: 16 / 9;
}

.courseDetail .content .text h4 {
    line-height: 1.5;
}

.frontend-menu-toggle:focus-visible,
.frontend-navigation a:focus-visible {
    outline: 3px solid #046d65;
    outline-offset: 3px;
}

@media (min-width: 1200px) {
    header nav.frontend-navigation {
        position: static;
        width: auto;
        height: 100%;
        max-width: none;
        visibility: visible;
        transform: none;
        border: 0;
        background-color: transparent;
        flex-direction: row;
        z-index: auto;
    }

    header nav .link a {
        white-space: nowrap;
    }

    header nav .login span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 1199.98px) {
    .frontend-page {
        --frontend-header-height: 80px;
    }

    .frontend-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        margin-right: 3vw;
        border: 1px solid #1b8585;
        border-radius: 8px;
        color: #046d65;
        background-color: transparent;
        font-size: 20px;
    }

    header nav.frontend-navigation {
        align-items: stretch;
        justify-content: flex-start;
        width: min(360px, 90vw);
        height: 100%;
        height: 100dvh;
        padding: 0;
        background-color: #f6f7f8;
    }

    .frontend-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        min-height: var(--frontend-header-height);
        padding: 12px 20px;
        border-bottom: 1px solid #d4e3e3;
    }

    .frontend-menu-header h2 {
        margin: 0;
        color: #046d65;
        font-size: 16px;
        font-weight: 700;
    }

    .frontend-menu-close {
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        margin-right: -12px;
        padding: 12px;
        background-size: 16px;
    }

    .frontend-menu-content {
        display: block;
        flex: 1;
        min-height: 0;
        height: auto;
        padding: 12px 20px 24px;
        padding-bottom: max(24px, env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }

    header nav .link {
        display: block;
        height: auto;
    }

    header nav .link a {
        justify-content: flex-start;
        min-height: 48px;
        height: auto;
        padding: 12px;
        font-size: 16px;
    }

    header nav .login {
        flex-direction: row;
        gap: 12px;
        width: 100%;
        min-height: 56px;
        height: auto;
        margin: 12px 0 0;
        padding: 12px;
        border-radius: 8px;
        font-size: 16px;
    }

    header nav .login i,
    header nav .login img {
        flex-shrink: 0;
        margin-bottom: 0;
    }

    header nav .login span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .searchBar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .searchBar .inputBox {
        margin: 0;
    }

    .searchBar .btn {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .courses,
    .albums,
    .albumPhotos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
        padding: 15px;
    }

    .courses a.course,
    .albums .album,
    .albumPhotos > a {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .courseDetail .basic .photo {
        align-self: flex-start;
    }

    .courseDetail .basic .action {
        flex-wrap: wrap;
        gap: 16px;
    }

    .courseDetail .basic .action .btn {
        width: 100%;
        min-height: 44px;
        height: auto;
    }

    footer .footer {
        align-items: flex-start;
        gap: 24px;
    }

    footer .footer .left {
        flex-shrink: 0;
    }

    footer .footer .right {
        min-width: 0;
    }

    footer .footer .right ul {
        flex-wrap: wrap;
        gap: 16px 24px;
    }

    footer .footer .right ul li {
        margin-left: 0;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 767.98px) {
    .frontend-page {
        --frontend-header-height: 72px;
    }

    .bannerSection {
        padding: 20px 16px;
    }

    .bannerSwiper {
        border-radius: 16px;
    }

    .searchBar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px;
        margin-bottom: 30px;
    }

    .searchBar .inputBox i {
        width: 24px;
    }

    .searchBar .btn {
        width: 100%;
    }

    .courses,
    .albums,
    .albumPhotos {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 0;
        margin-bottom: 40px;
    }

    .courses .course .content .name,
    .albums .album .name {
        height: auto;
        min-height: 48px;
        overflow-wrap: anywhere;
    }

    section.course,
    section.news {
        padding-top: 24px;
    }

    .newsBoxs {
        margin-bottom: 40px;
    }

    .newsBoxs a.news {
        gap: 12px;
        padding: 20px 16px;
        border-radius: 24px;
    }

    .newsBoxs a.news .left {
        margin-left: 0;
    }

    .newsBoxs a.news .right {
        width: 44px;
        height: 44px;
    }

    .courseDetail .basicWrap {
        padding: 20px 0;
    }

    .courseDetail .basic {
        flex-direction: column;
        gap: 24px;
    }

    .courseDetail .basic .photo,
    .courseDetail .basic .text {
        width: 100%;
        padding-left: 0;
    }

    .courseDetail .basic .photo img {
        display: block;
        width: 100%;
        height: auto;
    }

    .courseDetail .basic ul li {
        align-items: flex-start;
        gap: 12px;
    }

    .courseDetail .basic ul li span {
        width: 80px;
    }

    .courseDetail .content {
        margin-top: 20px;
        padding: 20px 16px;
        border-radius: 16px;
    }

    .courseDetail .share a {
        width: 44px;
        height: 44px;
    }

    #applyModal .modal-body {
        padding: 20px 16px;
    }

    #applyModal .formGroup .form-control {
        min-width: 0;
        min-height: 44px;
        width: 100%;
        margin-left: 0;
        font-size: 16px;
    }

    #applyModal .formGroup label {
        line-height: 1.5;
    }

    #applyModal .cer {
        padding: 12px;
    }

    footer .footer {
        flex-direction: column;
        gap: 24px;
        padding-top: 32px;
        padding-bottom: 24px;
    }

    footer .footer .right ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    footer .footer .right ul li {
        display: flex;
        align-items: flex-start;
    }

    footer .footer .right ul li i {
        flex-shrink: 0;
        width: 24px;
        text-align: center;
    }

    footer .copyRight {
        padding: 20px 0;
        text-align: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 374.98px) {
    .searchBar {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .frontend-navigation,
    .offcanvas-backdrop,
    .courses a.course,
    .albums .album,
    .newsBoxs a.news {
        transition: none;
    }

    .courses a.course:hover,
    .albums .album:hover,
    .newsBoxs a.news:hover {
        transform: none;
    }
}

/* 會員選單：頭像連到會員中心，登出放在頭像左側；抽屜選單改為上下排列 */
header nav .member-links {
    display: flex;
    align-items: stretch;
    height: 100%;
}

header nav .member-links .login {
    margin-left: 0;
}

header nav .member-links .logout {
    order: -1;
    display: flex;
    align-items: center;
    margin-right: 15px;
    padding: 15px;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
}

@media (max-width: 1199.98px) {
    header nav .member-links {
        flex-direction: column;
        height: auto;
        margin: 12px 0 0;
    }

    header nav .member-links .login {
        margin: 0;
    }

    header nav .member-links .logout {
        order: 0;
        margin-right: 0;
        min-height: 48px;
        padding: 12px;
        font-size: 16px;
    }
}