/* === 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;
}

/* 桌機尺寸時，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;
    }

    /* 第一層 button / a 補額外 padding-bottom，把 hover 區域延伸到 menu bar 底部。
       這樣同時解決兩個問題：
       1. submenu 用 top: 100% 接 li 底時不會卡進 menu bar（button 變高 → li 變高 → submenu 自然下移）
       2. cursor 從 button 滑到 submenu 不會經過「無 hover」空洞，submenu 才不會中途消失
       每個模板在 main.css 設 --menu-toplevel-extra-bottom 對應該模板 menu bar 底部到 button 底部的距離。 */
    ul#menu > li > a,
    ul#menu > li > button {
        padding-bottom: calc(5px + var(--menu-toplevel-extra-bottom, 0px));
    }
}

/* ===== 選單無限層支援（共用） =====
   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;
    }
}