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