/* =========================================================
   MAAL HOME FINAL HEADER FIX - 2026-06-13
   Purpose: make the navigation header stick reliably on every front page.
   This file is loaded after the main theme/mobile CSS to override older rules.
   ========================================================= */

@media (min-width: 992px) {
  html body #stickymenu.desktop-navbar,
  html body .navbar-area.desktop-navbar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 2147483000 !important;
    background: #ffffff !important;
    transform: none !important;
    will-change: auto !important;
  }

  html body #stickymenu.desktop-navbar.mh-js-fixed,
  html body .navbar-area.desktop-navbar.mh-js-fixed,
  html body #stickymenu.desktop-navbar.mh-force-fixed,
  html body .navbar-area.desktop-navbar.mh-force-fixed,
  html body #stickymenu.desktop-navbar.sticky,
  html body .navbar-area.desktop-navbar.sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 2147483000 !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(2, 32, 86, .18) !important;
    border-bottom: 1px solid #e8edf4 !important;
    transform: translate3d(0, 0, 0) !important;
    animation: none !important;
  }

  html body #stickymenu.desktop-navbar.mh-js-fixed .main-nav,
  html body #stickymenu.desktop-navbar.mh-js-fixed .navbar,
  html body #stickymenu.desktop-navbar.mh-force-fixed .main-nav,
  html body #stickymenu.desktop-navbar.mh-force-fixed .navbar,
  html body #stickymenu.desktop-navbar.sticky .main-nav,
  html body #stickymenu.desktop-navbar.sticky .navbar {
    background: #ffffff !important;
  }

  .mh-sticky-anchor,
  .mh-sticky-spacer,
  .mh-final-sticky-spacer {
    display: block !important;
    width: 100% !important;
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 991.98px) {
  html body .mobile-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 2147483001 !important;
  }

  html body .top,
  html body #stickymenu.desktop-navbar,
  html body .desktop-navbar,
  html body .navbar-area.desktop-navbar {
    display: none !important;
  }
}

@keyframes mhFinalHeaderFixedIn {
  from { transform: translate3d(0, -8px, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html body #stickymenu.desktop-navbar.mh-js-fixed,
  html body .navbar-area.desktop-navbar.mh-js-fixed,
  html body #stickymenu.desktop-navbar.mh-force-fixed,
  html body .navbar-area.desktop-navbar.mh-force-fixed,
  html body #stickymenu.desktop-navbar.sticky,
  html body .navbar-area.desktop-navbar.sticky {
    animation: none !important;
  }
}

/* ===== 2026-07-18: clearer responsive brand logo ===== */
@media (min-width: 992px) {
  html body .desktop-navbar .navbar {
    min-height: 82px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  html body .desktop-navbar .navbar-brand {
    width: 106px !important;
    min-width: 106px !important;
    height: 68px !important;
    padding: 3px !important;
    margin-right: 20px !important;
    overflow: hidden !important;
    border-radius: 17px !important;
    background: #ffffff !important;
    border: 1px solid #dfe8f2 !important;
    box-shadow: 0 8px 22px rgba(2, 32, 86, .08) !important;
  }

  html body .desktop-navbar .navbar-brand img,
  html body .desktop-navbar .main-nav .navbar-brand img {
    width: 76px !important;
    max-width: 76px !important;
    height: 60px !important;
    max-height: 60px !important;
    object-fit: contain !important;
    transform: scale(1.18) !important;
    transform-origin: center !important;
  }
}

@media (max-width: 991.98px) {
  html body .mobile-header__bar {
    height: 80px !important;
  }

  html body .mobile-header__brand {
    flex: 0 0 70px !important;
    width: 70px !important;
    height: 62px !important;
    padding: 2px !important;
    overflow: hidden !important;
    border-radius: 17px !important;
    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid rgba(255, 255, 255, .92) !important;
  }

  html body .mobile-header__brand img {
    width: 58px !important;
    max-width: 58px !important;
    height: 56px !important;
    max-height: 56px !important;
    object-fit: contain !important;
    transform: scale(1.22) !important;
    transform-origin: center !important;
  }

  html body .mobile-drawer__logo {
    width: 72px !important;
    height: 66px !important;
    padding: 2px !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  html body .mobile-drawer__logo img {
    width: 60px !important;
    max-width: 60px !important;
    height: 58px !important;
    max-height: 58px !important;
    object-fit: contain !important;
    transform: scale(1.20) !important;
    transform-origin: center !important;
  }
}



/* ===== 2026-07-18: transparent logo presentation (no white card or shadow) ===== */
@media (min-width: 992px) {
  html body .desktop-navbar .navbar-brand,
  html body .desktop-navbar .main-nav .navbar-brand {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body .desktop-navbar .navbar-brand img,
  html body .desktop-navbar .main-nav .navbar-brand img {
    width: 84px !important;
    max-width: 84px !important;
    height: 68px !important;
    max-height: 68px !important;
    object-fit: contain !important;
    transform: none !important;
    filter: none !important;
  }
}

@media (max-width: 991.98px) {
  html body .mobile-header__brand,
  html body .mobile-drawer__logo {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body .mobile-header__brand img {
    width: 64px !important;
    max-width: 64px !important;
    height: 62px !important;
    max-height: 62px !important;
    object-fit: contain !important;
    transform: none !important;
    filter: brightness(1.12) saturate(1.05) !important;
  }

  html body .mobile-drawer__logo img {
    width: 66px !important;
    max-width: 66px !important;
    height: 62px !important;
    max-height: 62px !important;
    object-fit: contain !important;
    transform: none !important;
    filter: brightness(1.12) saturate(1.05) !important;
  }
}

/* ===== 2026-07-18: remove mobile white gap and divider ===== */
@media (max-width: 991.98px) {
  html,
  html body {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  html body .mobile-header,
  html body .mobile-header.mh-force-fixed {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 2147483001 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: 0 8px 20px rgba(2, 32, 86, .16) !important;
    transform: none !important;
    animation: none !important;
  }

  html body .mh-sticky-anchor,
  html body .mh-sticky-spacer,
  html body .mh-final-sticky-spacer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
}