/*
 * TF-1041 簡中站 Header 專屬覆寫（layout_version = 2）
 *
 * 載入順序：header-v2-base.css → header-v2-next.css → 本檔（見 layouts/head.blade.php）。
 * 放在獨立檔而非直接改 header-v2-next.css，是為了日後從繁中重新同步
 * header-v3-next.css 時不會蓋掉簡中的調整。
 *
 * 內容：簡中與繁中結構性差異的修正（手機選單面板高度、logo 切換、微信入口）。
 */

/* ---------------------------------------------------------------
   手機版選單面板高度

   面板本身靠 header-v2-next.css 的 position:fixed + inset:0 撐滿，
   但開合是由 public/js/script.js 的 $.fn.expandItem()／collapseItem() 控制，
   它會在元素上寫 inline style 的 height 做滑動動畫：

       $(t).css("height", 0).animate({ height: h }, 300, ...)

   而選單內容放在 .tf-hd2-nav-scroll（position:absolute，不佔流），
   量到的內容高度幾乎為 0，動畫結束後面板只剩選單頂部那一條，
   結果就是「展開後有東西但元素太短看不到」。

   CSS 的 !important 優先於 inline style，於是在此強制滿版，
   不動 script.js（那是全站共用的，改了會影響舊版）。
   --------------------------------------------------------------- */
@media (max-width: 991px) {

    /* 用 100vh 而非 100%：100% 需要 containing block 有確定高度，
       一旦 position:fixed 因任何原因沒套上就會塌成 0。
       同時在此重新宣告定位，不依賴 header-v2-next.css 是否被其他規則蓋過。 */
    .tf-hd2 .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        opacity: 1 !important;
        overflow: hidden !important;
        background: #fff;
        z-index: 1050;
    }

    /* 內容捲動區：扣掉頂部 56px 的選單標題列 */
    .tf-hd2 .tf-hd2-nav-scroll {
        position: absolute !important;
        top: 56px;
        right: 0;
        bottom: 0;
        left: 0;
        height: auto !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

}

@media (max-width: 992px) {

    /* 桌機用 logo 在手機版隱藏 */
    .tf-hd2 .site-header-top .header_mobile-display-none {
        display: none !important;
    }

    .tf-hd2 .header_logo-mobile {
        height: 24px;
        width: auto;
        max-width: 160px;
        display: block;
    }

    /* 手機選單頂部的 logo
       header-v2-next.css 給的是 width:37px（繁中用方形小圖 TF-logo-mobile.png），
       套在簡中含「集邦咨询」的橫式 logo 上會縮成一小坨，改以高度為準 */
    .tf-hd2 .tf-hd2-menu-header-logo img {
        width: auto;
        height: 24px;
        max-width: 160px;
    }

    /* 首頁 Hero 上方 header 為透明深底，改顯示白色版
       （繁中只在 ≥993px 做這個切換，因為它手機版用的是方形圖標；
         簡中手機版用的是含黑色文字的橫式 logo，不換會看不見）

       注意：header-v2-next.css 第 1206 行有
           .tf-hd2-logo-white { display: none !important; }
       這是全域的隱藏規則，所以顯示白色版時必須同樣帶 !important，
       否則兩顆 logo 會一起消失。 */
    body[data-tf-page="home"] .tf-hd2:not(.scroll-css) .header_logo-mobile.logo-default {
        display: none !important;
    }

    body[data-tf-page="home"] .tf-hd2:not(.scroll-css) .header_logo-mobile.tf-hd2-logo-white {
        display: block !important;
    }
}

@media (min-width: 993px) {

    /* 桌機版：手機 logo 隱藏（skin.css 的 .pc-display-none 已處理，此處確保於 header 內生效） */
    .tf-hd2 .site-header-top .pc-display-none {
        display: none !important;
    }

    .tf-hd2 .header_mobile-display-none img {
        display: flex;
    }
}

/* ---------------------------------------------------------------
   微信公众号入口

   外觀借用 v3 既有的 .tf-hd2-news-link（inline-flex、粗體、含首頁透明
   header 的白字規則），這裡只調整顏色與尺寸，讓它與同排 icon 一致。
   --------------------------------------------------------------- */
.tf-hd2 .header_icon-group .tf-hd2-wechat-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--tf-hd2-text);
    cursor: pointer;
}

.tf-hd2 .header_icon-group .tf-hd2-wechat-link i {
    font-size: 18px;
    line-height: 1;
    color: inherit;
    transition: color .2s ease;
}

@media (min-width: 992px) {
    .tf-hd2 .header_icon-group .tf-hd2-wechat-link:hover {
        color: var(--tf-hd2-green);
    }
}

/* 首頁 Hero 上方 header 為透明，圖示需轉白。
   header-v2-next.css 的白字清單已含 .tf-hd2-news-link i，
   此處再指定一次，避免上面的 color 宣告把它蓋掉。 */
body[data-tf-page="home"] .tf-hd2:not(.scroll-css) .header_icon-group .tf-hd2-wechat-link,
body[data-tf-page="home"] .tf-hd2:not(.scroll-css) .header_icon-group .tf-hd2-wechat-link i {
    color: #fff !important;
}

/* QRCode tooltip 圖片尺寸（沿用 v1 的 .tooltip-img，確保不被壓縮） */
.tooltip-inner img.tooltip-img {
    max-width: 160px;
    max-height: 160px;
}


/* ---------------------------------------------------------------
   中和舊版（v1）手機選單樣式

   簡中 skin.css 針對舊版手機選單，在 ≤992 / ≤768 / ≤580 三個斷點
   對 .navbar-collapse .nav > li.dropdown > a 下了：
       background: #effce3;  text-align: center;  margin: 2px;
       padding: 15px 6px;（≤768）/ 10px 6px;（≤580）
   以及 ≤580 的 .navbar-nav a { font-size: 14px !important }。

   新版選單的 <li> 同樣帶 .dropdown（bootstrap 下拉需要），
   因此整組被吃到，畫面變成淺綠底、列高被壓縮、文字置中，
   與繁中的白底左對齊清單不同。

   繁中不受影響是因為它的 header 另有一層樣式覆蓋；簡中缺那一層，
   故在此於 .tf-hd2 作用域內還原成繁中的外觀。
   --------------------------------------------------------------- */
@media (max-width: 992px) {

    .tf-hd2 .navbar-collapse .nav > li.dropdown > a {
        background: transparent;
        margin: 0;
        text-align: left;
    }

    /* 列高與左右內距比照繁中（header-v2-next.css 的 padding: 15px 15px） */
    .tf-hd2 .navbar-collapse .nav > li.dropdown > a.header_navbar-link-text {
        padding: 15px 15px;
        font-size: 15px !important;
    }

    /* 二級面板內的連結也還原為左對齊 */
    .tf-hd2 .navbar-default .navbar-nav .dropdown-menu > li > a {
        text-align: left;
        font-size: 14px;
        color: var(--tf-hd2-text) !important;
    }
}

/* 選單底部 CTA：確保左右內距與繁中一致（舊版的負邊距／padding 規則可能抵銷掉） */
@media (max-width: 991px) {

    .tf-hd2 .header_navbar > .tf-hd2-menu-signin-item,
    .tf-hd2 .header_navbar > .tf-hd2-menu-getsupport-item {
        padding-left: 15px;
        padding-right: 15px;
        margin: 0;
    }

    .tf-hd2 .header_navbar {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ---------------------------------------------------------------
   手機選單底部「获取专人服务」下方的綠色分隔線

   繁中畫面上有這條線，但我方複製的 header-v3-next.css 版本裡
   .tf-hd2-menu-getsupport-item 明確寫了 border-bottom: none，
   推測繁中線上版本較新。依需求直接於簡中補上。

   線畫在 <a> 而非 <li>：<li> 有左右 15px 內距，border 會延伸到內距外緣貼齊螢幕邊；
   畫在 <a>（display:block）則與上方「会员登录」按鈕同寬、左右對齊。
   --------------------------------------------------------------- */
@media (max-width: 991px) {

    .tf-hd2 .header_navbar > .tf-hd2-menu-getsupport-item .tf-hd2-menu-getsupport {
        padding-bottom: 14px;
        border-bottom: 1px solid var(--tf-hd2-green);
    }
}

/* ---------------------------------------------------------------
   導航列左緣對齊 logo

   bootstrap.css 的 .navbar-collapse 有 padding-left/right: 15px，
   header-v2-next.css 只在 @media (max-width: 991px) 重設，桌機沒處理，
   導致 992px 以上（尤其 992-1799px 導航換到第二列時）整排往右偏 15px，
   與上方 logo 的左緣對不齊。
   --------------------------------------------------------------- */
@media (min-width: 992px) {

    .tf-hd2 .site-header-top > .navbar-main.site-navbar .navbar-collapse {
        padding-left: 0;
        padding-right: 0;
        border-top: 0;
        box-shadow: none;
    }
}

/* 992-1799px 時導航換到第二列，header-v2-next.css 給每個選單項
   padding-left: 8px（項目間距用），第一項因此比 logo 多縮 8px。
   只把第一項的左內距歸零，讓文字左緣切齊 logo，項目間距不受影響。 */
@media (min-width: 992px) and (max-width: 1799px) {

    .tf-hd2 .header_navbar > li:first-child > a.header_navbar-link-text {
        padding-left: 0;
    }
}

/* ---------------------------------------------------------------
   首頁 Hero 透明 header 上的「登入後」會員圖示

   繁中登入態用 <img src="icon-account.svg">，靠
       .header_account-container img { filter: brightness(0) invert(1) }
   轉白；簡中改用 Font Awesome 的 <i class="fa fa-user">（避免再多一個圖檔），
   filter 對字型圖示無效，需直接指定顏色。
   --------------------------------------------------------------- */
body[data-tf-page="home"] .tf-hd2:not(.scroll-css) .header_icon-group .header_account-container .social-icon,
body[data-tf-page="home"] .tf-hd2:not(.scroll-css) .header_icon-group .header_account-container .social-icon i {
    color: #fff !important;
}

/* 下拉面板本身是白底深字，不隨 header 轉白 */
body[data-tf-page="home"] .tf-hd2:not(.scroll-css) .header_icon-group .header_account-content a {
    color: #212529 !important;
}