/* ==========================================================================
   MOBILE HAMBURGER MENU FIX
   --------------------------------------------------------------------------
   Problem:
   On screens <= 991px the mobile header row has 4 siblings inside
   ".cp_navi_main_wrapper > .container-fluid":
     1. .cp_logo_wrapper            (floated left, 19% width)
     2. header.mobail_menu          (contains the hamburger / .house_toggle)
     3. .top_header_right_wrapper.dashboard_right_Wrapper  (Login/Register
        or Logout button - this gets re-displayed and absolutely positioned
        at "top:16px; right:75px" by responsive.css on mobile)
     4. .cp_navigation_wrapper      (desktop nav, hidden on mobile)

   Because the hamburger wrapper (.cd-dropdown-wrapper) never gets a float,
   position, or flex treatment of its own, it just sits in normal flow next
   to the floated logo. The absolutely-positioned login/register/logout
   block then lands on top of it. Since that block is 2 buttons wide on
   logged-out pages (Home, About, Contact) it fully covers the hamburger,
   and is narrower (1 button) on logged-in/dashboard pages, so the hamburger
   peeks out but lower/shifted from where it should be. That's exactly the
   "kahin show nahi hota, kahin niche se show hota" bug.

   Fix:
   - Hide the duplicate Login/Register/Logout block on mobile (the exact
     same links already exist inside the slide-out .cd-dropdown menu).
   - Turn the header row into a flex row so the logo stays left and the
     hamburger is always pinned top-right, vertically centered, on every
     single page/template, with a z-index high enough to never be covered.

   This file must be loaded AFTER css/responsive.css.
   ========================================================================== */

@media (max-width: 991px) {

    /* 1) Remove the element that was covering the hamburger icon.
          Login/Register/Logout links already exist in the slide-out menu. */
    .cp_navi_main_wrapper .top_header_right_wrapper,
    .cp_navi_main_wrapper .dashboard_right_Wrapper {
        display: none !important;
    }

    /* 2) Make the header row a flex row: logo on the left, hamburger
          pinned to the right, both vertically centered - on every page. */
    .cp_navi_main_wrapper > .container-fluid {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        min-height: 64px;
    }

    .cp_navi_main_wrapper > .container-fluid > .cp_logo_wrapper {
        float: none !important;
        width: auto !important;
        max-width: 60%;
        margin: 0;
        flex: 0 1 auto;
    }

    /* Desktop nav wrapper should take no space on mobile (its inner
       .mainmenu is already display:none via Bootstrap "d-" classes, but
       the wrapper div itself was still an empty flex item). */
    .cp_navi_main_wrapper > .container-fluid > .cp_navigation_wrapper {
        display: none !important;
    }

    /* The hamburger header: always last, always pinned right, always
       above everything else in the bar. */
    .cp_navi_main_wrapper > .container-fluid > .mobail_menu {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        position: relative;
        z-index: 60; /* header bar itself is z-index:50, so this wins */
    }

    .mobail_menu .container-fluid,
    .mobail_menu .row,
    .mobail_menu [class*="col-"] {
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
    }

    .cd-dropdown-wrapper {
        padding-top: 0 !important;
        margin: 0 !important;
        display: flex;
        align-items: center;
    }

    .house_toggle {
        display: inline-flex;
        align-items: center;
        position: relative;
        z-index: 60;
    }
}