/* =====================================================
   hkitweb/wwwroot/assets/css/site.css
   HKIT 品牌色 + 版面微調（對照新 mockup 嘅配色）
   ===================================================== */

:root {
    --hkit-navy:   #0b2545;
    --hkit-blue:   #134074;
    --hkit-accent: #0077b6;
    --hkit-gold:   #d4af37;
    --hkit-yellow: #facc15;
    --brand-50:    #eef6ff;
}

body {
    font-family: 'Noto Sans TC', 'Inter', 'Helvetica Neue', Arial, sans-serif;
    background-color: #f8fafc;
    color: #1e293b;
}

/* ---- 品牌色 helper ---- */
.bg-hkit-navy   { background-color: var(--hkit-navy) !important; }
.bg-hkit-blue   { background-color: var(--hkit-blue) !important; }
.text-hkit-navy { color: var(--hkit-navy) !important; }
.text-hkit-blue { color: var(--hkit-blue) !important; }
.text-hkit-yellow { color: var(--hkit-yellow) !important; }
.text-hkit-accent { color: var(--hkit-accent) !important; }
.btn-hkit-yellow {
    background-color: var(--hkit-yellow);
    color: var(--hkit-navy);
    border: none;
}
.btn-hkit-yellow:hover { background-color: #eab308; color: var(--hkit-navy); }

/* ---- 固定頂欄 ---- */
.top-utility-bar   { height: 42px; font-size: .8rem; z-index: 1030; }
.main-fixed-navbar { top: 42px; height: 76px; z-index: 1020; }
.hkit-main { padding-top: 0; }
.mt-112 { margin-top: 118px; } /* fixed header 補償（42+76） */

/* ---- 語言切換 繁/EN ---- */
/* 頂欄：舊 badge 樣式放大 */
.hkit-lang-badge-top {
    font-size: 1rem !important;
    font-weight: 800;
    padding: .4rem .75rem !important;
    line-height: 1.2;
    letter-spacing: .02em;
}
.hkit-lang-badge-top a { font-size: 1rem; }

.hkit-lang-switch {
    display: inline-flex;
    align-items: stretch;
    border-radius: .5rem;
    overflow: hidden;
    border: 1px solid rgba(250, 204, 21, .45);
    background: rgba(11, 37, 69, .35);
}
.hkit-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: .35rem .7rem;
    font-weight: 800;
    font-size: .95rem;
    line-height: 1.2;
    text-decoration: none !important;
    color: #fff;
    background: transparent;
}
.hkit-lang-btn + .hkit-lang-btn {
    border-left: 1px solid rgba(250, 204, 21, .35);
}
.hkit-lang-btn.is-active {
    background: var(--hkit-yellow);
    color: var(--hkit-navy);
}
.hkit-lang-btn:not(.is-active):hover {
    background: rgba(250, 204, 21, .18);
    color: #fff;
}
.hkit-lang-switch--nav {
    background: #fff;
    border-color: rgba(11, 37, 69, .25);
}
.hkit-lang-switch--nav .hkit-lang-btn {
    color: var(--hkit-navy);
    font-size: 1rem;
    min-width: 2.75rem;
    padding: .45rem .85rem;
}
.hkit-lang-switch--nav .hkit-lang-btn + .hkit-lang-btn {
    border-left-color: rgba(11, 37, 69, .2);
}
.hkit-lang-switch--nav .hkit-lang-btn.is-active {
    background: var(--hkit-navy);
    color: #fff;
}
.hkit-lang-switch--nav .hkit-lang-btn:not(.is-active):hover {
    background: rgba(11, 37, 69, .08);
    color: var(--hkit-navy);
}
.hkit-lang-switch--mobile {
    display: flex;
    width: 100%;
    background: #fff;
    border-color: rgba(11, 37, 69, .2);
}
.hkit-lang-switch--mobile .hkit-lang-btn {
    flex: 1;
    color: var(--hkit-navy);
    font-size: 1.15rem;
    min-height: 3rem;
    padding: .75rem 1rem;
}
.hkit-lang-switch--mobile .hkit-lang-btn + .hkit-lang-btn {
    border-left-color: rgba(11, 37, 69, .15);
}
.hkit-lang-switch--mobile .hkit-lang-btn.is-active {
    background: var(--hkit-navy);
    color: #fff;
}
.hkit-lang-switch--mobile .hkit-lang-btn:not(.is-active):hover {
    background: rgba(11, 37, 69, .08);
    color: var(--hkit-navy);
}

.site-brand-sub { font-size: 9px; letter-spacing: .5px; }
.main-nav-list  { font-size: 1rem; }

/* 桌面 hover 下拉 */
@media (min-width: 992px) {
    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
    /* 第三層子菜單 */
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
        position: absolute;
        top: 0;
        left: 100%;
    }
}

/* ---- 內頁 banner ---- */
.page-banner {
    background: linear-gradient(90deg, var(--hkit-navy) 0%, var(--hkit-blue) 100%);
}

/* ---- 課程卡（對照 mockup 嘅 cat-card）---- */
.cat-card {
    height: 190px;
    border-radius: .75rem;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease;
}
.cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0,0,0,.25);
}
.cat-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.cat-card:hover img { transform: scale(1.08); }
.cat-card-overlay {
    background: linear-gradient(to top, rgba(11,37,69,.92) 0%, rgba(19,64,116,.5) 60%, rgba(0,0,0,.15) 100%);
}

/* ---- 手機 sticky 底欄 ---- */
.mobile-sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    z-index: 1035;
    box-shadow: 0 -2px 10px rgba(0,0,0,.15);
}
.mobile-sticky-btn {
    flex: 1;
    text-align: center;
    padding: .8rem 0;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
}
.m-btn-query { background-color: var(--hkit-accent); }
.m-btn-apply { background-color: var(--hkit-yellow); color: var(--hkit-navy); }

body { padding-bottom: 0; }
@media (max-width: 991.98px) {
    body { padding-bottom: 56px; } /* 俾 sticky 底欄佔位 */
}

/* ---- 頁腳 ---- */
.footer-heading {
    font-weight: 800;
    color: var(--hkit-navy);
    border-bottom: 2px solid var(--hkit-yellow);
    padding-bottom: .35rem;
    margin-bottom: 1rem;
    display: inline-block;
}
.footer-links a { color: var(--hkit-blue); text-decoration: none; }
.footer-links a:hover { color: var(--hkit-accent); }

/* ---- 其他 ---- */
.news-date-box {
    min-width: 75px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: var(--hkit-accent); border-radius: 4px; }

/* =====================================================
   首頁 hero 輪播 + 內容區塊（配合 lib/layout/blocks.php）
   ===================================================== */

/* ---- 首頁輪播 ---- */
.hkit-hero { position: relative; }
/* 【有相 banner】一張普通 <img>：唔用 bg cover、唔裁切；
   width:100% + height:auto = 自然比例，手機 / 平板自動縮放 */
.hkit-banner-img {
    width: 100%;
    height: auto;
    display: block;
}
.hkit-banner-link { display: block; text-decoration: none; }
.hkit-banner-link:hover .hkit-banner-img { opacity: .92; }

/* 無相後備：漸變底色 + 標題 + 內文 */
.hkit-banner-fallback {
    background: linear-gradient(135deg, var(--hkit-navy) 0%, var(--hkit-blue) 55%, var(--hkit-accent) 100%);
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- 卡片 grid（新聞 / 活動 / 分享）---- */
.hkit-card-hover { transition: transform .18s ease, box-shadow .18s ease; }
.hkit-card-hover:hover { transform: translateY(-4px); box-shadow: 0 .75rem 1.5rem rgba(11,37,69,.15) !important; }
.hkit-card-img-link { display: block; text-decoration: none; }
.hkit-card-img {
    height: 190px;
    width: 100%;
    object-fit: cover;
}
.hkit-card-noimg {
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

/* ---- 學生成就列表 ---- */
.hkit-achv-img {
    width: 100%;
    height: 100%;
    min-height: 130px;
    object-fit: cover;
    display: block;
}

/* ---- DB 內文（trusted HTML）排版 ---- */
.hkit-rich-text { line-height: 1.8; }
.hkit-rich-text img { max-width: 100%; height: auto; }
.hkit-rich-text p:last-child { margin-bottom: 0; }

/* ---- footer（取代 inline style）---- */
.footer-about-text { font-size: .95rem; line-height: 1.7; }
.footer-contact-list { font-size: .95rem; }

/* ---- 課程頁 quick facts / 註冊表 ---- */
.hkit-fact-card { border-left: 4px solid var(--hkit-yellow); }
.hkit-prog-table th { background: #f1f5f9; }
@media (max-width: 576px) {
    .hkit-banner-fallback { min-height: 240px; }
}

/* =====================================================
   課程詳情 Accordion（course_sections.php）
   ===================================================== */
.hkit-course-acc .accordion-item {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 0.25rem 0.75rem rgba(11, 37, 69, 0.08);
    margin-bottom: 0.85rem;
    overflow: hidden;
}
.hkit-course-acc .accordion-button {
    font-weight: 700;
    color: var(--hkit-navy);
    background-color: #fff;
    padding: 1rem 1.25rem;
}
.hkit-course-acc .accordion-button:not(.collapsed) {
    color: #fff;
    background-color: var(--hkit-navy);
    box-shadow: none;
}
.hkit-course-acc .accordion-button:not(.collapsed)::after {
    filter: invert(1) brightness(2);
}
.hkit-course-acc .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 119, 182, 0.25);
}
.hkit-course-acc .accordion-body {
    background-color: #fff;
}
.btn-hkit-navy {
    background-color: var(--hkit-navy);
    color: #fff;
    border: 1px solid var(--hkit-navy);
}
.btn-hkit-navy:hover,
.btn-hkit-navy:focus {
    background-color: var(--hkit-blue);
    color: #fff;
}