/* ========================================
   StemiTV Mobile Responsive Fixes
   專門處理手機版版面問題
   ======================================== */

/* ===== 基礎手機版修正 ===== */

/* 防止水平溢出 */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* ===== 頂部欄全局修正 - 防止高度過大 ===== */
.topbar-inner {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    height: auto !important;
}

.topbar-actions {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    height: auto !important;
}

.topbar-search,
.navbar-form.topbar-search {
    width: auto !important;
    max-width: 280px !important;
    height: auto !important;
    flex: 0 0 auto !important;
}

.topbar-search .input-group,
.navbar-form .input-group,
.input-group-append {
    height: auto !important;
}

.topbar-search input,
.navbar-form input[name="searchTerm"] {
    height: 38px !important;
    width: 180px !important;
}

.topbar-search button,
.navbar-form button {
    height: 38px !important;
}

.topbar-lang,
#languageSelector {
    height: 38px !important;
    width: 80px !important;
}

/* ===== 導航選單基礎樣式 ===== */
nav.navbar {
    padding: 8px 10px !important;
}

nav.navbar .navbar-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
}

/* 覆蓋固定寬度 115px - 適用於所有螢幕 */
nav.navbar .navbar-nav .nav-item,
nav.navbar .navbar-nav .nav-link,
.navbar-nav .nav-link,
.cd-slider-nav a,
nav .navbar-nav a,
.navbar-nav a.nav-link,
.navbar-nav a.nav-item {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    height: auto !important;
}

/* ===== 平板及以下的響應式修正 (768px 及以下) ===== */
@media (max-width: 768px) {

    /* 導航欄 */
    nav.navbar {
        padding: 5px !important;
        margin: 0 !important;
    }

    nav.navbar .navbar-nav {
        gap: 3px !important;
    }

    /* 導航項目 - 覆蓋固定寬度 115px */
    nav.navbar .navbar-nav .nav-item,
    nav.navbar .navbar-nav .nav-link,
    .navbar-nav a.nav-link,
    .navbar-nav .nav-link,
    .cd-slider-nav a,
    nav .navbar-nav a {
        padding: 8px 12px !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        height: auto !important;
        display: inline-block !important;
        border-radius: 4px !important;
        background-color: rgba(0, 0, 0, 0.03) !important;
        margin: 2px !important;
    }

    nav.navbar .navbar-nav .nav-link:hover,
    .navbar-nav a.nav-link:hover {
        background-color: rgba(59, 130, 246, 0.1) !important;
    }

    /* 隱藏 sr-only 文字 */
    .sr-only {
        display: none !important;
    }
}

/* ===== 頂部欄手機版修正 ===== */
@media (max-width: 768px) {

    /* 修正 topbar 高度問題 */
    .topbar-inner {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .topbar-actions {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        width: auto !important;
    }

    .topbar-search,
    .navbar-form.topbar-search {
        width: auto !important;
        max-width: 250px !important;
        flex: 0 0 auto !important;
        height: auto !important;
    }

    .topbar-search .input-group,
    .navbar-form .input-group {
        height: auto !important;
        flex-wrap: nowrap !important;
    }

    .topbar-search input,
    .navbar-form input[name="searchTerm"] {
        height: 38px !important;
        width: 150px !important;
    }

    .topbar-search button,
    .navbar-form button,
    .input-group-append {
        height: 38px !important;
        flex: 0 0 auto !important;
    }

    .topbar-lang,
    #languageSelector {
        width: auto !important;
        max-width: 80px !important;
        height: 38px !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width: 576px) {

    /* Menu wrapper */
    #menu-wrapper {
        padding: 8px 0 !important;
    }

    #menu {
        padding: 0 10px !important;
    }

    /* 更小螢幕導航項目字體更小 */
    nav.navbar .navbar-nav .nav-item,
    nav.navbar .navbar-nav .nav-link,
    .navbar-nav a.nav-link,
    .navbar-nav .nav-link,
    nav .navbar-nav a {
        padding: 5px 8px !important;
    }

    /* topbar 更緊湊 */
    .topbar-search input,
    .navbar-form input[name="searchTerm"] {
        width: 120px !important;
        height: 34px !important;
        font-size: 13px !important;
    }

    .topbar-search button,
    .navbar-form button,
    .input-group-append {
        height: 34px !important;
    }

    .topbar-lang,
    #languageSelector {
        max-width: 70px !important;
        height: 34px !important;
        font-size: 12px !important;
    }

    .topbar-logo img {
        max-width: 100px !important;
    }

    /* Logo 區域 */
    #menu-wrapper .container .row,
    #menu .container .row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    #menu-wrapper .col-xs-6,
    #menu-wrapper .col-md-4,
    #menu-wrapper .col-md-8,
    #menu .col-xs-6,
    #menu .col-md-4,
    #menu .col-md-8 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
        padding: 0 5px !important;
    }

    /* Logo 大小 */
    #menu-wrapper img[alt="回首頁"],
    #menu img[alt="回首頁"],
    .topbar-logo img {
        max-width: 120px !important;
        height: auto !important;
    }

    /* 搜尋區域 */
    #menu-wrapper .navbar-form,
    #menu .navbar-form,
    .topbar-search {
        width: 100% !important;
        justify-content: center !important;
    }

    #menu-wrapper .form-group,
    #menu .form-group {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* 搜尋輸入框 */
    #menu-wrapper input[name="searchTerm"],
    #menu input[name="searchTerm"],
    .topbar-search input {
        width: calc(100% - 100px) !important;
        max-width: 180px !important;
        min-width: 100px !important;
        font-size: 14px !important;
        height: 36px !important;
        padding: 6px 10px !important;
    }

    /* 語言選擇器 */
    #languageSelector {
        width: 70px !important;
        max-width: 70px !important;
        font-size: 12px !important;
        height: 36px !important;
        padding: 6px 8px !important;
    }

    /* 搜尋按鈕 */
    #menu-wrapper .btn,
    #menu .btn,
    .topbar-search .btn {
        height: 36px !important;
        padding: 6px 12px !important;
    }
}

/* ===== 導航選單手機版修正 ===== */
@media (max-width: 576px) {

    /* 導航容器 */
    .col-xs-12.text-left {
        width: 100% !important;
        padding: 10px 5px !important;
    }

    /* 導航選單容器 */
    .nav.navbar-nav,
    ul.navbar-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 導航項目 */
    .nav.navbar-nav>li,
    ul.navbar-nav>li {
        display: inline-block !important;
        width: auto !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 隱藏空白的分隔項目 */
    .nav.navbar-nav>li:empty,
    ul.navbar-nav>li:empty {
        display: none !important;
    }

    /* 導航連結 */
    .nav.navbar-nav>li>a,
    ul.navbar-nav>li>a,
    .navbar-nav a,
    .nav-link {
        display: inline-block !important;
        padding: 6px 10px !important;
        white-space: nowrap !important;
        border-radius: 4px !important;
        background-color: rgba(0, 0, 0, 0.05) !important;
        margin: 2px !important;
    }

    .nav.navbar-nav>li>a:hover,
    ul.navbar-nav>li>a:hover {
        background-color: rgba(59, 130, 246, 0.1) !important;
    }
}

/* ===== 內容區域手機版修正 ===== */
@media (max-width: 576px) {

    /* 主要內容區 */
    .body-content {
        padding: 10px !important;
    }

    /* 容器 */
    .container,
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* 首頁包裝器 */
    .home-wrapper {
        padding: 15px 10px !important;
    }

    /* 視頻容器 */
    .tm-bg-white-translucent,
    .tm-textbox,
    .tm-textbox-padding {
        padding: 10px !important;
        margin-bottom: 15px !important;
    }

    #container {
        min-height: 180px !important;
    }

    /* 卡片網格 */
    .tm-img-gallery-container,
    .tm-img-gallery-container-3 {
        padding: 0 5px !important;
    }

    .tm-img-gallery.gallery-two {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* 卡片 */
    .grid-item,
    .grid-item.card-3col {
        padding: 0 !important;
        margin-bottom: 12px !important;
    }

    .card-figure {
        border-radius: 8px !important;
    }

    .card-img {
        height: 180px !important;
    }

    .card-caption {
        padding: 10px !important;
    }

    .card-title {
        font-size: 14px !important;
    }
}

/* ===== 更小螢幕 (320px) ===== */
@media (max-width: 360px) {

    /* Logo 更小 */
    #menu-wrapper img[alt="回首頁"],
    #menu img[alt="回首頁"],
    .topbar-logo img {
        max-width: 100px !important;
    }

    /* 搜尋輸入框 */
    #menu-wrapper input[name="searchTerm"],
    #menu input[name="searchTerm"] {
        width: 100px !important;
        max-width: 100px !important;
        font-size: 12px !important;
    }

    /* 語言選擇器 */
    #languageSelector {
        width: 55px !important;
        font-size: 11px !important;
    }

    /* 導航連結 */
    .nav.navbar-nav>li>a,
    ul.navbar-nav>li>a {
        font-size: 11px !important;
        padding: 5px 8px !important;
    }

    /* 卡片 */
    .card-img {
        height: 150px !important;
    }

    .card-title {
        font-size: 13px !important;
    }
}

/* ===== 中版型修正 (768px - 991px) ===== */
@media (min-width: 768px) and (max-width: 991px) {

    /* 防止水平溢出 */
    html,
    body {
        overflow-x: hidden !important;
    }

    /* 導航選單 - 關鍵修正 */
    nav.navbar {
        padding: 6px 10px !important;
    }

    nav.navbar .navbar-nav,
    .nav.navbar-nav,
    ul.navbar-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 100% !important;
    }

    nav.navbar .navbar-nav .nav-item,
    nav.navbar .navbar-nav .nav-link,
    .nav.navbar-nav>li,
    ul.navbar-nav>li,
    .navbar-nav a.nav-link,
    .navbar-nav .nav-link,
    nav .navbar-nav a {
        padding: 8px 10px !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        height: auto !important;
        flex: 0 0 auto !important;
        display: inline-block !important;
        border-radius: 4px !important;
        margin: 2px !important;
    }

    .nav.navbar-nav>li>a,
    ul.navbar-nav>li>a {
        padding: 8px 10px !important;
        white-space: nowrap !important;
    }

    /* 頂部欄優化 */
    .topbar-inner {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }

    .topbar-logo {
        flex: 0 0 auto !important;
        max-width: 160px !important;
    }

    .topbar-logo img {
        max-width: 150px !important;
    }

    .topbar-actions {
        flex: 1 1 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    .topbar-search,
    .navbar-form.topbar-search {
        width: auto !important;
        max-width: 200px !important;
        flex: 0 0 auto !important;
    }

    /* 關鍵修正：確保 input-group 不換行 */
    .topbar-search .input-group,
    .navbar-form .input-group {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .topbar-search .input-group .form-control,
    .navbar-form .input-group .form-control {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .topbar-search .input-group .input-group-append,
    .navbar-form .input-group .input-group-append {
        flex: 0 0 auto !important;
    }

    .topbar-search input,
    .navbar-form input[name="searchTerm"] {
        width: 130px !important;
        height: 36px !important;
        font-size: 13px !important;
    }

    .topbar-search button,
    .navbar-form button {
        height: 36px !important;
    }

    .topbar-lang,
    #languageSelector {
        width: auto !important;
        max-width: 75px !important;
        height: 36px !important;
        font-size: 12px !important;
    }

    /* 卡片網格 */
    .tm-img-gallery.gallery-two {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .card-img {
        height: 180px !important;
    }

    /* 主題切換按鈕 - 確保在視窗內 */
    .global-theme-toggle {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        left: auto !important;
        padding: 12px !important;
        border-radius: 50% !important;
    }

    .global-theme-toggle span {
        display: none !important;
    }
}

/* ===== 平板版修正 (577px - 768px) ===== */
@media (min-width: 577px) and (max-width: 768px) {

    /* 導航選單 */
    .nav.navbar-nav,
    ul.navbar-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    .nav.navbar-nav>li,
    ul.navbar-nav>li {
        display: inline-block !important;
        width: auto !important;
    }

    .nav.navbar-nav>li>a,
    ul.navbar-nav>li>a {
        padding: 8px 12px !important;
    }

    /* 卡片網格 */
    .tm-img-gallery.gallery-two {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .card-img {
        height: 200px !important;
    }
}

/* ===== Footer 手機版 ===== */
@media (max-width: 576px) {
    footer {
        padding: 20px 10px !important;
    }

    footer .row {
        flex-direction: column !important;
        text-align: center !important;
    }

    footer .col-md-6 {
        margin-bottom: 10px !important;
    }

    footer p {
        font-size: 12px !important;
    }

    footer a {
        font-size: 18px !important;
    }
}

/* ===== 深色模式手機版 ===== */
@media (max-width: 576px) {

    [data-theme="dark"] .nav.navbar-nav>li>a,
    [data-theme="dark"] ul.navbar-nav>li>a {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }

    [data-theme="dark"] .nav.navbar-nav>li>a:hover,
    [data-theme="dark"] ul.navbar-nav>li>a:hover {
        background-color: rgba(59, 130, 246, 0.2) !important;
    }
}