/* ============================================================================
   bs5-compat.css  —  Bootstrap 5.3.8 相容層
   目的:讓「照 Bootstrap 3 基準寫的自訂模板(main.css)」在換上 BS5 後
        版面(容器寬度 / 網格間距 / 按鈕比例 / 導覽列)維持原樣。
   載入順序務必為「最後」:bootstrap.min.css → main.css → 本檔
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1) Container 寬度 —— 還原 BS3 斷點(BS5 預設 540/720/960/1140/1320 會位移)
   --------------------------------------------------------------------------- */
@media (min-width: 768px)  { .container { max-width: 750px; } }
@media (min-width: 992px)  { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }

/* ---------------------------------------------------------------------------
   2) Row 間距 —— 還原 BS3 的 30px gutter(BS5 預設 1.5rem=24px)
   --------------------------------------------------------------------------- */
.row { --bs-gutter-x: 30px; }

/* 欄位 position:relative —— BS3 的欄位都有,BS5 移除了。
   還原它,否則欄位內「絕對定位」的元素(例如登入卡片上的透明覆蓋連結
   .tuan / .tuanb / .tuanc)會逃出卡片、以整頁為基準鋪滿並蓋過導覽列,
   導致點「登入」卻觸發到企業徵才等錯誤連結。 */
.row > [class^="col-"],
.row > [class*=" col-"] { position: relative; }

/* ---------------------------------------------------------------------------
   3) 按鈕比例 —— 還原 BS3 的 padding / font-size / line-height
      (自訂 .btn 只設了 border/border-radius,尺寸原本吃 BS3 預設)
   --------------------------------------------------------------------------- */
.btn      { padding: 6px 12px;  font-size: 14px; line-height: 1.42857143; border-radius: 0; }
.btn-lg   { padding: 10px 16px; font-size: 18px; line-height: 1.3333333;  border-radius: 0; }
.btn-sm   { padding: 5px 10px;  font-size: 12px; line-height: 1.5;         border-radius: 0; }
.btn-group-lg > .btn { padding: 10px 16px; font-size: 18px; }

/* ---------------------------------------------------------------------------
   4) 導覽列 —— 還原 BS3 的 float 水平版面
      (BS5 把 .navbar-nav 改成 flex-column、.navbar-collapse 需 .navbar-expand-*
       才會在桌機顯示;這裡不改 markup,直接用 CSS 補回 BS3 行為)
   --------------------------------------------------------------------------- */

/* 切換鈕的三條 icon-bar(BS5 移除了 .icon-bar 尺寸,補回才看得到) */
.page-menu .navbar-toggle {
    padding: 9px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
}
.page-menu .navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}
.page-menu .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }

/* 關鍵:BS3 的 .nav > li > a 是 display:block,BS5 移除了。
   沒有它,連結上的 padding(39px)對 inline 元素不生效,導覽列會擠到頂端對不齊。 */
.page-menu .navbar-nav > li > a { display: block; }

/* 桌機(≥768px):水平選單 + 右側對齊,隱藏漢堡鈕 */
@media (min-width: 768px) {
    .page-menu .navbar-collapse {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        padding-left: 0;
        padding-right: 0;
    }
    .page-menu .navbar-toggle { display: none !important; }
    .page-menu .navbar-header  { float: left; }
    .page-menu .navbar-right   { float: right !important; }
    .page-menu .navbar-nav {
        display: block;
        float: left;
        margin: 0;
        padding-left: 0;
        flex-direction: row;   /* 抵銷 BS5 的 flex-column */
    }
    .page-menu .navbar-nav > li {
        float: left;
        display: block;
        position: relative;
        list-style: none;
    }
}

/* 手機(<768px):漢堡鈕展開後垂直堆疊 */
@media (max-width: 767px) {
    .page-menu .navbar-collapse.collapse:not(.show) { display: none !important; }
    .page-menu .navbar-collapse.collapse.show       { display: block !important; }
    .page-menu .navbar-toggle { display: block; float: right; }
    .page-menu .navbar-nav          { float: none; display: block; }
    .page-menu .navbar-nav > li     { float: none; }
}

/* ---------------------------------------------------------------------------
   5) 其他小相容
   --------------------------------------------------------------------------- */
/* BS5 的 .nav 會變 flex,導覽列的 <ul class="nav navbar-nav"> 交還給上面規則控制 */
.page-menu .nav { display: block; flex-wrap: nowrap; }