/* BTA33KAR — bta-mobile-header-1.1.css (UX-04 Option B: compact mobile header)
   Immutable path. Supersedes the retired 1.0 (rolled back 2026-10-03, never reuse).
   A correction ships as bta-mobile-header-1.2.css.

   SCOPE. Phones only. Every rule is inside max-width:575.98px or 767.98px;
   at 768px and wider nothing here applies.

   WHY 1.0 FAILED. On Arabic pages header.topmenu is #header-waypoint (theme
   option enable_sticky_header=yes) and app.js attaches a jQuery Waypoint to it.
   1.0 removed the 51px topbar, so the trigger sat at y=0 when the Waypoint was
   created and it fired "down" during page load (fixed header, slideInDown,
   .is-sticky{padding-top:66px} -> 62->66 content shift).

   1.1 TRIGGER CONTRACT (<=575.98). The topbar is still not rendered, but the
   trigger element keeps its production position: header.topmenu starts at
   y=51 (margin-top:51px) and is only 11px tall, so its box covers 51-62 and
   reserves exactly the 62px compact header. The visible header (.main-header)
   is painted at 0-62 by absolute positioning inside header.topmenu (no
   transform, so the fixed drawer inside is unaffected). Production activates
   at scrollY 51 / releases at 50; 1.1 keeps both values.
   When app.js adds .header-sticky, .main-header becomes position:fixed (theme
   rule) and the :not(.header-sticky) rule below stops applying. header.topmenu
   still reserves 62px, so the sticky padding is 0 here: no content jump.

   576-767.98: topbar kept (its controls are not duplicated in the drawer in
   this band); trigger unchanged (y=72). The header leaves the flow when
   sticky, so the theme's 66px compensation is replaced by the real 62px.

   SPECIFICITY. Each rule outranks the measured source rule without !important:
   .main-header .navbar-light .navbar-brand (0,3,0)     -> 0,4,1 below
   fixes.css img { height:auto } (0,0,1)                -> 0,3,2 below
   bootstrap .navbar-toggler (0,1,0) / .topmenu .navbar-toggler (0,2,0)
   style.css .main-header .main-menu-content .menu--mobile>li>a (0,3,2)
   bta-tokens button.toggle-main-menu-offcanvas (0,1,1)
   style.css .btn-primary (0,1,0) / .btn-primary:hover (0,2,0)
   style.css .is-sticky{padding-top:66px} (0,1,0)      -> body.is-sticky (0,1,1)
   style.css .topmenu .header-sticky (0,2,0) is left in charge when sticky.

   LOGO. aspect-ratio 400/156 is the intrinsic size of the live -400xauto
   derivative. With an explicit height and aspect-ratio the used box is 118x46
   before and after decode.

   DRAWER vs UX-03 BAR. The drawer (z 9999) lives inside header.topmenu's own
   stacking context (z 100), so the UX-03 bar (z 1030) painted over it. While
   app.js's body.hidden-scroll-main-menu is present the header context is
   lifted to 1035: above the bar, below the modal backdrop (1040) and the
   cookie banner (99999). */

@media (max-width: 575.98px) {
    div.bravo_topbar {
        display: none;
    }

    header.topmenu {
        margin-top: 51px;
        height: 11px;
    }

    header.topmenu .main-header:not(.header-sticky) {
        position: absolute;
        top: -51px;
        left: 0;
        right: 0;
        background-color: #f4f5f9;
    }

    body.is-sticky {
        padding-top: 0;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    body.is-sticky {
        padding-top: 62px;
    }
}

@media (max-width: 767.98px) {
    header.topmenu .main-header .navbar-light .navbar-brand {
        padding-block: 8px;
    }

    header.topmenu .navbar-brand img.logo {
        block-size: 46px;
        inline-size: auto;
        aspect-ratio: 400 / 156;
    }

    header.topmenu .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-inline-size: 44px;
        min-block-size: 44px;
    }

    header.topmenu .main-menu-content button.toggle-main-menu-offcanvas {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-inline-size: 44px;
        min-block-size: 44px;
    }

    header.topmenu .main-header .main-menu-content .menu--mobile > li > a {
        padding-block: 12px;
    }

    header.topmenu .main-menu-content a.add-property.btn-primary {
        background: transparent;
        color: var(--primary-color);
        border: 1px solid var(--primary-color);
    }

    header.topmenu .main-menu-content a.add-property.btn-primary:hover,
    header.topmenu .main-menu-content a.add-property.btn-primary:focus-visible {
        background: rgba(8, 81, 155, .08);
        color: var(--primary-color);
    }

    body.hidden-scroll-main-menu header.topmenu {
        z-index: 1035;
    }
}