/* =========================================================
   BS5 v8 page-specific minimal patch
   Target: Mobile hamburger + mobile logo position only
   Base: index_bs5_v7_b2hover.html
   Reason:
   1) Bootstrap 5 no longer applies legacy .sr-only, so the text 「選單切換」
      may appear inside the hamburger button.
   2) Mobile hamburger must be vertically centered and positioned at right 20px.
   3) Mobile logo must be vertically centered and positioned at left 80px.
   Frozen: BS5 desktop navbar/footer, BS5 mobile fixed-top/menu/footer, Bootstrap
           5.3.8 local assets, B1-HERO, B2-APP DOM/images/links/hover scale,
           B2 hover clipping, B3-CTA, footer, homepage text/images/links/main DOM.
   ========================================================= */
@media (max-width: 991.98px) {
    .navbar.navbar-default.navbar-fixed-top .navbar-header {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 60px !important;
        height: 60px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .navbar.navbar-default.navbar-fixed-top .navbar-logo.hidden-lg {
        position: absolute !important;
        top: 50% !important;
        left: 80px !important;
        right: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-transform: translateY(-50%) !important;
            -ms-transform: translateY(-50%) !important;
                transform: translateY(-50%) !important;
        z-index: 1031 !important;
    }

    .navbar.navbar-default.navbar-fixed-top .navbar-logo.hidden-lg img {
        display: block !important;
        height: auto !important;
        margin: 0 !important;
        max-width: calc(100vw - 150px) !important;
    }

    .navbar.navbar-default.navbar-fixed-top .navbar-toggle.navbar-toggler {
        position: absolute !important;
        top: 50% !important;
        right: 20px !important;
        left: auto !important;
        float: none !important;
        display: block !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        margin: 0 !important;
        padding: 6px 10px !important;
        border: 1px solid rgba(255,255,255,.65) !important;
        border-radius: 4px !important;
        background-color: transparent !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        overflow: hidden !important;
        text-indent: 0 !important;
        -webkit-transform: translateY(-50%) !important;
            -ms-transform: translateY(-50%) !important;
                transform: translateY(-50%) !important;
        z-index: 1032 !important;
    }

    .navbar.navbar-default.navbar-fixed-top .navbar-toggle.navbar-toggler .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }

    .navbar.navbar-default.navbar-fixed-top .navbar-toggle.navbar-toggler .icon-bar {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        margin: 4px 0 !important;
        border-radius: 1px !important;
        background-color: #ffffff !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}