/* ------------------------------------------------------------------
   nav-fix.css
   Navigation tweaks for the Business inMotion pages.

   Loaded LAST (after inmo-navbar.css) so these win without needing
   !important everywhere.
   ------------------------------------------------------------------ */

/* --- desktop: vertically centre the menu against the logo --------- */
@media only screen and (min-width: 1025px) {
    .desktop-nav .itemside {
        display: flex;
        flex-direction: row;           /* ← inmo-navbar.css 原為 column，
                                          令 align-items:center 變水平置中，
                                          navbtn 就會貼頂。改 row 先真正垂直置中 */
        align-items: center;
        justify-content: flex-start;   /* menu 靠左，貼住 logo */
        height: 100%;
    }
    .desktop-nav .navbtn {
        display: flex;
        align-items: center;
        justify-content: flex-start;   /* items 由左邊排起 */
    }
    .desktop-nav .navbtn li {
        padding-top: 0;
        padding-bottom: 0;
    }
    .desktop-nav .navbtn li a {
        display: inline-flex;
        align-items: center;
    }
    /* 4 個 menu item 靠左；Download Now + 語言掣推去最右 */
    .desktop-nav .navbtn li.has_dl {
        margin-left: auto;
    }

    /* --- logo 唔可以大過自己個 15% 欄 ----------------------------------
       markup 本身有 img-responsive（= max-width:100%），但 inmo-navbar.css
       嘅 .desktop-nav .logoside img{max-width:270px} specificity 更高，
       蓋走咗 100% 上限。結果 viewport 縮到 ~1150px 以下時，15% 欄窄過 logo
       本身 155px，圖片就衝出欄外壓住第一個 link（1050px 實測重疊 6.2px）。
       還原 img-responsive 嘅 max-width:100%：logo 跟欄等比縮細，永不重疊。

       ＋ 高都要封頂：新 logo（inmo-logo.png）係 512×320 嘅直式 lockup，
       只靠 max-width:100% 的話，1440px 欄闊 184px → 高 115px，
       穿爆 90px 高嘅 nav bar（客戶：太高了，超出div）。封 80px
       （客戶指定；90px bar 上下各留 5px，128×80）。 */
    .desktop-nav .logoside img {
        max-width: 100%;
        max-height: 80px;
        width: auto;
        height: auto;
    }

    /* --- label 變兩行時靠左 ---------------------------------------------
       inmo-navbar.css 嘅 .navbtn li{text-align:center} 令 wrap 咗嘅 label
       兩行都置中（"Business Account Opening" / "Application Demonstration"
       中軸對齊）。窄位時改成靠左，兩行齊頭。單行 item 冇影響（li 闊度＝
       文字闊度），亦唔郁 Download Now 掣同語言掣。 */
    .desktop-nav .navbtn li.threetwoone {
        text-align: left;
    }

    /* --- 4 粒 item 緊貼（個盒貼住自己隻字，中間冇空洞）-----------------
       flex item 預設 flex-shrink:1，位唔夠時會「按比例」分薄每一粒，令長
       label 個盒闊過佢實際行嘅字 → 望落就好似 4 粒中間有個洞
       （1050px 實測：Business… 個盒 294px 但最闊一行只 192px，空洞 102px）。
       改成 flex:0 0 auto（盒＝文字闊度）→ 4 粒由左邊一個貼一個排。
       位真係唔夠（≤1100px）就照 label 自己嘅   斷點分兩行
       （Business Account Opening / Application Demonstration），
       總闊 753px，1025px 都夠位，唔會爆格。 */
    .desktop-nav .navbtn li {
        flex: 0 0 auto;
    }
    @media (max-width: 1100px) {
        .desktop-nav .navbtn li.threetwoone > a {
            display: inline-block;
            max-width: 205px;
            word-break: keep-all;   /* 中文 label 唔好斷開（中文夠位，一行放得落）*/
        }
    }
}

/* --- logo box: flex, no top padding, centred ---------------------- */
.desktop-nav .logoside {
    display: flex;
    padding-top: 0;
    justify-content: center;
    height: 100%;
}

/* --- nav links: kill the focus ring on mouse click only -----------
   :focus fires on click too, so scope with :not(:focus-visible) to keep
   the ring for keyboard users (accessibility).                     */
.desktop-nav .navbtn li a:focus:not(:focus-visible),
.desktop-nav .navbtn li a:active,
.desktop-nav .menu-button:focus:not(:focus-visible),
.desktop-nav .menu-button:active,
.desktop-nav .subgrid a:focus:not(:focus-visible),
.desktop-nav .subgrid a:active,
.desktop-nav .logoside a:focus:not(:focus-visible),
.desktop-nav .logoside a:active {
    outline: none;
    outline-offset: 0;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

/* --- 全頁 links：mouse click 後嘅 focus 藍框，唔要 ---------------------
   Bootstrap 3 內置 `a:focus{ outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px }` —— 即係一 click 完條 link，個格仔就會畀個 5px
   藍色框圍住（實測 mouse click 後 outline: auto 5px rgb(0,95,204), fv=false）。
   客戶唔要。用 :not(:focus-visible) 分開處理：mouse click = 唔顯示（fv=false），
   鍵盤 Tab = 保留（fv=true）→ 保住無障礙。
   特異性 `a:focus:not(:focus-visible)`(0,2,1) > bootstrap `a:focus`(0,1,1) ✓ */
a:focus:not(:focus-visible),
a:active,
area:focus:not(:focus-visible) {
    outline: none;
    outline-offset: 0;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

/* --- language switch: keep 繁 | 简 on ONE line at every width -------
   The <li> holds "繁 | 简" as inline content, so when the nav gets narrow
   the pipe becomes a wrap point and the two languages stack. nowrap keeps
   the row intact; :has() scopes it to the language item only so long menu
   labels can still wrap normally.                                    */
.desktop-nav .navbtn li:has(> a.tc-lang),
.desktop-nav .navbtn li:has(> a.sc-lang),
.desktop-nav .navbtn li:has(> a.en-lang) {
    white-space: nowrap;
}
/* fallback for browsers without :has() */
.desktop-nav .navbtn li > a.tc-lang,
.desktop-nav .navbtn li > a.sc-lang,
.desktop-nav .navbtn li > a.en-lang {
    display: inline-block;
    white-space: nowrap;
}

/* --- "Download Now" button: never break onto two lines ------------- */
.desktop-nav .navbtn li:has(> a.downloadnow),
.desktop-nav .navbtn li.has_dl {
    white-space: nowrap;
}
.desktop-nav .navbtn li > a.downloadnow {
    display: inline-block;
    white-space: nowrap;
}

/* --- 手機 / 平板 nav（≤1024px）：logo 一樣封頂 --------------------------
   inmo-navbar.css 喺呢個 range 只限 max-width:122px（舊 logo 122×45）。
   新 logo 512×320 縮到 122 闊 = 76px 高，而 nav bar 只有 80px 高，
   差 4px 就頂爆。封 60px（= 96×60），上下各留 10px。 */
@media only screen and (max-width: 1024px) {
    .desktop-nav .logoside img {
        max-height: 60px;
        width: auto;
        height: auto;
    }
}