/*
 * site-nav.css — 頁首「投資者專區」兩層下拉，首頁與內頁共用。
 *
 * 為什麼是獨立檔：public/styles/style.{locale}.css 是編譯產物，SCSS 只有 partial
 * 沒有進入點，重編不了（見 CLAUDE.md），所以新樣式一律寫在這裡，不動那兩個檔。
 *
 * 配色沿用 _common.scss 的色票（--main-orange #FC671A / --main-blue #182F8F /
 * --main-color #222），字型跟首頁一致。
 *
 * 首頁與內頁都會載入 style.{locale}.css，header / .menu / .lang / .menu-toggle
 * 的版面規則兩邊共用，這支只補「下拉面板」以及內頁那七個 <a> 的外觀。
 * 內頁頁首的底色與文字顏色覆蓋在 public/styles/investors.css，這裡不重複。
 */

.site-nav {
    --sn-text: #222;
    --sn-orange: #FC671A;
    --sn-blue: #182F8F;
    --sn-border: #E2E2E2;
    --sn-hover-bg: #F5F5F5;
    --sn-active-bg: #EAF0FA;
}

/*
 * 先把首頁 style.{locale}.css 對 header .menu 底下 ul / li 的規則擋掉。
 * 那份編譯樣式把 .menu 裡所有的 ul 都設成 display:flex、li 設成 margin-left:36px，
 * 面板的 ul 一併中彈（第一層會被排成橫的一列，第二層的 left:100% 因此算錯位置）。
 * 選擇器刻意寫成 header .menu ... 才蓋得過原本的權重。
 */
header .menu .site-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

header .menu .site-nav li {
    margin-left: 0;
}

/*
 * 顯示／隱藏也必須用同樣長度的選擇器寫，否則上面那條 header .menu .site-nav ul
 * 的權重會壓過後面短選擇器的 display，第二層會變成永遠展開。
 */
header .menu .site-nav .site-nav__l1 {
    display: block;
}

header .menu .site-nav .site-nav__l2 {
    display: none;
}

header .menu .site-nav .site-nav__l1-item.is-open > .site-nav__l2 {
    display: block;
}

/* ============================================================
   桌機（>=1200px）：懸浮下拉面板
   ============================================================ */
@media (min-width: 1200px) {
    header .menu ul li.has-site-nav {
        position: relative;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 10;
        display: none;
        padding-top: 10px;
        /* 白底面板在首頁白字模式（body.in-0）底下也必須是白底深字 */
        text-align: left;
        font-size: 15px;
        line-height: 1.5;
        letter-spacing: 0.5px;
    }

    header .menu ul li.has-site-nav.is-open .site-nav {
        display: block;
    }

    .site-nav__l1 {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 200px;
        background: #fff;
        border: 1px solid var(--sn-border);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    }

    .site-nav__l1-item {
        position: relative;
        margin-left: 0;
    }

    .site-nav__l1-item + .site-nav__l1-item {
        border-top: 1px solid var(--sn-border);
    }

    .site-nav__l1-link,
    .site-nav__l2-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 13px 16px;
        color: var(--sn-text);
        text-decoration: none;
        text-shadow: none;
        transition: background-color .2s, color .2s;
    }

    .site-nav__l1-link:hover,
    .site-nav__l1-link:focus-visible,
    .site-nav__l2-link:hover,
    .site-nav__l2-link:focus-visible {
        background: var(--sn-hover-bg);
        color: var(--sn-orange);
    }

    .site-nav__l1-item.is-open > .site-nav__l1-link {
        background: var(--sn-active-bg);
        color: var(--sn-blue);
        font-weight: 600;
    }

    /* 第一層的「›」箭頭：只有真的有第二層時才會被輸出 */
    .site-nav__caret {
        flex: none;
        width: 8px;
        height: 8px;
        border-top: 1.5px solid currentColor;
        border-right: 1.5px solid currentColor;
        transform: rotate(45deg);
        opacity: .55;
    }

    .site-nav__l2 {
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        top: -1px;
        left: 100%;
        min-width: 220px;
        background: #fff;
        border: 1px solid var(--sn-border);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    }

    .site-nav__l2 li + li .site-nav__l2-link {
        border-top: 1px solid var(--sn-border);
    }

    .site-nav__l2-link {
        white-space: nowrap;
    }

    /*
     * 1680px 以下，頁首右側留給第二層的空間（.menu 的 margin-right 大約
     * 5.47vw + 130px）已經不夠 220px 的面板，往右飛會被視窗切掉。
     * 這個寬度改成往左展開，寧可跟參考圖的方向相反，也不要有內容看不到。
     */
    @media (max-width: 1679px) {
        .site-nav__l2 {
            left: auto;
            right: 100%;
        }
    }
}

/* ============================================================
   手機／平板（<1200px）：抽屜裡的手風琴，不做 hover
   ============================================================ */
@media (max-width: 1199px) {
    .site-nav {
        display: block;
        padding: 0 0 6px;
    }

    .site-nav__l1,
    .site-nav__l2 {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .site-nav__l1-item {
        margin-left: 0;
    }

    /*
     * 抽屜在首頁與內頁都是橘底（style.{locale}.css 的 header .menu{background:#fc671a}），
     * 面板連結的白字要在這裡明寫。以前寫 color:inherit，首頁會繼承到 body 的 #222（橘底深字），
     * 內頁則是被 investors.css 的寬選擇器誤中才變白，兩頁顏色不一致而且靠的是副作用。
     */
    .site-nav__l1-link,
    .site-nav__l2-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 0;
        font-size: 14px;
        color: #fff;
        text-decoration: none;
        text-shadow: none;
    }

    .site-nav__l1-link {
        padding-left: 12px;
        opacity: .92;
    }

    .site-nav__caret {
        flex: none;
        width: 34px;
        height: 34px;
        margin: -8px 0;
        position: relative;
    }

    /* 手機的箭頭是「展開／收合」的實際點擊區（44px 級距的觸控目標），畫成 V 字 */
    .site-nav__caret::before {
        content: "";
        position: absolute;
        top: 12px;
        left: 12px;
        width: 8px;
        height: 8px;
        border-top: 1.5px solid currentColor;
        border-right: 1.5px solid currentColor;
        transform: rotate(135deg);
        transition: transform .2s;
    }

    .site-nav__l1-item.is-open > .site-nav__l1-link .site-nav__caret::before {
        transform: rotate(-45deg);
        top: 15px;
    }

    /* 要壓過 style.{locale}.css 的 `header .menu ul { padding-left: 0 }`（特異度較高），
       與同檔的 `header .menu .site-nav ul { padding: 0 }`，否則第二層不會縮排，看起來比第一層還靠左。 */
    header .menu .site-nav ul.site-nav__l2 {
        padding-left: 26px;
    }

    .site-nav__l2-link {
        font-size: 13px;
        opacity: .82;
    }
}
/* ============================================================
   頁首第一層的 <a>：補成跟原本 <button> 一樣的外觀。

   style.{locale}.css 只有 header .menu ul li button 的樣式，anchor 什麼都吃不到，
   會變成瀏覽器（Bootstrap）預設的藍色連結。頁首會出現第一層 <a> 的情況有兩種：
   - 內頁模式（header[data-nav-mode="inner"]）：七個項目全是 <a>
   - 首頁模式但 section-7 關閉（en 正式資料就是關的）：「投資者專區」那一顆是 <a>
   所以版面規則不綁模式前綴，兩種情況共用；只有「顏色」分開處理（見下）。

   內頁「有」載入 style.{locale}.css，固定列、抽屜、漢堡、語系切換那些版面規則都已
   存在，這裡不重刻。內頁頁首的底色與文字顏色覆蓋在 public/styles/investors.css。

   選擇器必須寫成 .menu > ul > li > a 只認第一層：寫成 .menu ul li > a 會連下拉面板
   裡的 <a> 一起吃到，面板會整個破版。
   ============================================================ */
header .menu > ul > li > a {
    display: inline-block;
    position: relative;
    padding: 7px 0;
    color: inherit;
    text-decoration: none;
    letter-spacing: 1px;
    transition: color .3s;
}

header .menu > ul > li > a::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: currentColor;
    width: 0;
    height: 1px;
    transition: width .3s;
}

/*
 * 首頁模式的顏色完全照 style.{locale}.css 對 button 的規則鏡射：
 * 預設白字（第一屏 body.in-0 是深色背景），切到其他區塊（body:not(.in-0,.in-999)）
 * 變成 --main-color 並在桌機加同一組 text-shadow。內頁模式維持 inherit，
 * 由 investors.css 決定。
 */
header:not([data-nav-mode="inner"]) .menu > ul > li > a {
    color: #fff;
}

body:not(.in-0, .in-999) header:not([data-nav-mode="inner"]) .menu > ul > li > a {
    color: var(--main-color, #222);
}

@media (min-width: 1200px) {
    body:not(.in-0, .in-999) header:not([data-nav-mode="inner"]) .menu > ul > li > a {
        text-shadow: 0 1px 5px #eee;
    }

    header .menu > ul > li > a:hover::after {
        width: 100%;
    }
}

@media (max-width: 1199px) {
    /* 抽屜裡的項目跟原本的 button 一樣是整列、靠左、不要底線動畫 */
    header .menu > ul > li > a {
        display: block;
        width: 100%;
        padding: 12px 0;
        font-size: 15px;
        text-align: left;
        text-shadow: none;
    }

    header .menu > ul > li > a::after {
        display: none;
    }
}

/* 鍵盤焦點一律看得見（WCAG 2.4.7），不靠 hover 的底色 */
.site-nav__l1-link:focus-visible,
.site-nav__l2-link:focus-visible,
header[data-nav-mode="inner"] a:focus-visible {
    outline: 2px solid var(--main-blue, #182F8F);
    outline-offset: -2px;
}

/*
 * 手機抽屜裡的語系切換鈕（首頁與內頁共用）。
 * style.{locale}.css 在 ≤1199px 給 .lang 一個 translateX(395px) 把它推到畫面外，
 * 但 header.open 底下的 .lang{} 是空的（見 _header.scss），抽屜打開後從未還原，
 * 所以舊站手機版根本看不到語系鈕。這裡補回來；首頁 HTML 不變，只是手機抽屜多看到語系鈕。
 */
@media (max-width: 1199px) {
    header.open .lang {
        transform: none;
        opacity: 1;
        pointer-events: all;
    }
}