/* === a#logo_odd h1：SEO 用隱藏標題，改用 sr-only 讓掃描工具不計算對比值 === */
a#logo_odd h1 {
    position  : absolute;
    width     : 1px;
    height    : 1px;
    overflow  : hidden;
    clip      : rect(0, 0, 0, 0);
    white-space: nowrap;
    color     : inherit !important;
}

/* === ul#menu 內 <button> 的瀏覽器預設樣式 reset === */
/* 把 menu 內的 button 視覺繼承自父層，讓它看起來與原本的 <a> 一致 */
ul#menu button {
    background      : none;
    border          : none;
    font            : inherit;
    line-height     : inherit;
    color           : inherit;
    cursor          : pointer;
    text-align      : inherit;
    box-sizing      : content-box;
    margin          : 0;
    appearance      : none;
    -webkit-appearance: none;
}

/* 桌機尺寸時，fromLess 的 mobile rule 把 width: calc(100% - 30px) 漏到 desktop，
   只有第一層 button 才有這個問題（li 是 inline-block，全寬沒意義）。
   第二層以下的 button 要保留原本的 calc 寬，讓反白跟 <a> 一樣填滿。 */
@media only screen and (min-width: 1000px) {
    ul#menu > li > button {
        width: auto;
    }

    /* 第一層項目是 inline-block，預設 baseline 對齊會讓 line box 多出字型 strut 的下方空隙
       （項目比選單列矮一截、hover 反白填不滿到列底）。改 vertical-align:top 讓 line box 收成
       項目高度＝選單列高度，hover 反白即填滿整列。全板適用（本檔最後載、覆蓋各板 per-board）。 */
    ul#menu > li {
        vertical-align: top;
    }

    /* submenu 緊貼選單列底：top:100% 已落在列底，毋需額外 margin。客製板自帶的 margin-top
       是舊 strut 時代的 hack，會造成可見白縫、且游標從項目移到 submenu 會經過無 hover 空隙
       導致 submenu 收起。本檔最後載、覆蓋各板 per-board 的第一層 submenu margin。 */
    ul#menu > li > ul {
        margin-top: 0;
    }

    /* 第一層項目：清掉各板殘留的 margin hack（如 hcshnew 的 margin-bottom:-5px，舊 strut 時代用的），
       上下內距改沿用各板 per-board 的對稱值（標準板 5/5、客製板各自 10/10…），項目即上下置中、
       bar 高度＝項目高。submenu 定位已由上方 vertical-align:top + submenu margin-top:0 接管，
       故移除原本強制 padding-bottom:calc(5px+var) 的舊規則（會與客製板的 padding-top 打架成上下不對稱）。 */
    ul#menu > li > a,
    ul#menu > li > button {
        margin-bottom: 0;
    }
}

/* ===== 選單無限層支援（共用） =====
   per-template menu.css 只寫到第 3 層；第 4 層(含)以上沒有任何 per-template 規則，
   故由此通用規則接管。實際顯示深度由 JS 的 menuLayers（系統校正→主選單）決定。
   第 4 層以上一律沿用第 3 層「往右飛出」的行為。
   飛出選單背景色用 --menu-sub-bg，淺色系模板可在自家 main.css 的 ul#menu 覆蓋此變數。 */

/* 手機/窄螢幕：第 4 層以上預設收合，由 frontStageMenu.js 的 button→slideToggle 展開 */
@media only screen and (min-width: 0) {
    ul#menu li ul ul ul {
        display: none;
    }
}

@media only screen and (min-width: 1000px) {
    /* 深層項目自己當定位基準，子選單才會貼著它飛出（不依賴各模板有設）。
       background-color:inherit 讓項目帶著「所屬子選單的底色」往下傳，
       深層飛出才能自動沿用該模板自己的子選單色（見下方 L4 規則的 inherit fallback）。 */
    ul#menu li ul li {
        position        : relative;
        background-color: inherit;
    }

    /* 第 4 層以上：往右飛出定位、自給自足的寬度與底色。
       width:auto 用來覆蓋某些模板對 `ul#menu li ul` 設的相對寬(如 hlhs2 的 calc(100% - 2em))，
       否則深層會被綁成父項寬度而過窄、文字溢出。配合 nowrap 依內容撐開。
       底色預設 inherit → 自動沿用該模板自己的子選單色；模板若要指定特定色，
       在自家 main.css 的 ul#menu 設 --menu-sub-bg 即可覆蓋。 */
    ul#menu li ul ul ul {
        display         : none;
        position        : absolute;
        top             : 0;
        left            : 100%;
        width           : auto;
        min-width       : 100%;
        padding-left    : 0;
        background-color: var(--menu-sub-bg, inherit);
        text-align      : left;
    }

    /* 深層項目不換行（避免容器被內容擠到折行重疊） */
    ul#menu li ul ul ul a,
    ul#menu li ul ul ul button {
        white-space: nowrap;
    }

    /* 任一層項目 hover/focus 時展開其子選單（涵蓋第 4 層以上） */
    ul#menu li ul li:hover > ul,
    ul#menu li ul li > a:hover + ul,
    ul#menu li ul li > a:focus + ul,
    ul#menu li ul li > button:hover + ul,
    ul#menu li ul li > button:focus + ul {
        display: inline-block;
    }

    /* 第 4 層以上的項目佔滿整列。
       不可用 float（容器只有浮動子元素會塌成 0 高度 → 看不到底色、文字溢出），
       改用 block 垂直堆疊，容器才有高度、底色才蓋得住。 */
    ul#menu li ul ul ul li {
        float  : none;
        display: block;
        width  : 100%;
    }

    /* 靠右緣時往左飛出（otherSide 由 doc.ready.front.js 加上）。
       並讓「已往左飛出」的選單，其更深層子選單一律繼續往左，避免折返重疊。
       用 left:auto + right:100%（不要同時設 left/right，否則會綁死寬度、使 width:auto 失效）。 */
    ul#menu li ul ul ul.otherSide,
    ul#menu .otherSide ul {
        left : auto !important;
        right: 100% !important;
    }

    /* 子選單超出視窗底時限高改自身捲動（class 與高度由 doc.ready.front.js 量測加掛），
       避免下拉把文件捲動區撐長、footer 之下露出白底。 */
    ul#menu li ul.Oddi_MenuDropdownScroll {
        max-height: var(--oddi-menu-dropdown-max-height, 70vh);
        overflow-y: auto;
    }
}

/* 前台規則：只有「選單容器」項目不可點→一般箭頭；其餘一律 pointer（都是真連結） */
/* 容器項目＝生成器只對選單型節點掛 role="heading"（選單=button、網站導覽=span） */
#menu_odd button[role="heading"],
#menu_odd span[role="heading"],
#WebGuide span[role="heading"],
div.guideTemp_odd span[role="heading"] {
    cursor: default;
}

#menu_odd a:not([href]),
#WebGuide a:not([href]),
div.guideTemp_odd a:not([href]) {
    cursor: pointer;
}