/***** WPZOOM — Mobile Nav Fix (no Elementor) *****/

/* ===== Variables / Adjust this if your header is taller/shorter on mobile ===== */
:root {
  --header-h: 64px;             /* mobile header height fallback */
  --panel-max-h: 80vh;          /* how tall the dropdown can scroll */
}

/* Keep header/nav above content and sticky to the top */
.site-header,
.navbar,
.nav-wrap {
  position: relative;
  z-index: 9000;
}
.site-header {
  position: sticky;
  top: 0;
  background: #fff;
}

/* If using Headroom states, keep them stacked above content */
.site-header.headroom,
.site-header.headroom--pinned,
.site-header.headroom--unpinned,
.site-header.headroom--not-top {
  position: sticky;
  top: 0;
  z-index: 9000;
}

/* Base color intent */
.site-header .navbar { background: #fff; }

/* --- MOBILE ONLY --- */
@media (max-width: 1024px) {

  /* Text/link + bars color on mobile */
  .navbar-nav li a { color: #000; }

  /* Hamburger: normalize sizing & animation */
  .navbar-toggle {
    border: 0;
    background: transparent;
    padding: 8px 10px;
    line-height: 1;
  }
  .navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px 0;
    background: #000;
    transition: transform .2s ease, opacity .2s ease;
  }

  /* Turn hamburger into X when expanded (Bootstrap/WPZOOM uses aria-expanded) */
  .navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(2) { opacity: 0; }
  .navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* MOBILE PANEL:
     Use fixed positioning so it never hides under the header.
     Offset by header height + iOS safe area if present. */
  .navbar-collapse {
    position: fixed !important;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 9500;                 /* above page, below modals if any */
    overflow: auto;
    max-height: var(--panel-max-h);
    -webkit-overflow-scrolling: touch;
  }

  /* Admin bar offset (only when logged in) */
  body.admin-bar .navbar-collapse {
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 46px); /* 32px on some devices; WP uses 46px on mobile */
  }

  /* Bootstrap 3 style collapse toggling (common in WPZOOM) */
  .navbar-collapse.collapse { display: none !important; height: auto !important; }
  .navbar-collapse.collapse.in { display: block !important; }

  /* Prevent clipping by parent wrappers */
  .nav-wrap,
  .site-header .container,
  .site-header .container-fluid {
    overflow: visible !important;
  }

  /* Menu link readability inside the panel */
  .navbar-collapse .navbar-nav > li > a {
    color: #000;
    padding: 12px 16px;
  }
  .navbar-collapse .navbar-nav > li > a:hover,
  .navbar-collapse .navbar-nav > li > a:focus {
    background: rgba(0,0,0,.05);
  }

  /* WPZOOM dropdowns inside the mobile panel */
  .navbar-collapse .dropdown-menu {
    position: static !important;
    float: none;
    display: block;
    width: 100%;
    margin: 0;
    background: #fff;
    box-shadow: none;
  }
}

/* Desktop submenu behavior */
@media (hover: hover) and (pointer: fine) {
  .site-header .menu li.menu-item-has-children { position: relative; }
  .site-header .menu li.menu-item-has-children > .sub-menu {
    position: absolute; top: 100%; left: 0; min-width: 220px;
    background: #fff; padding: 8px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    pointer-events: none;
  }
  .site-header .menu li.menu-item-has-children:hover > .sub-menu,
  .site-header .menu li.menu-item-has-children:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  }
  .site-header .menu .sub-menu li > a { display: block; padding: 10px 16px; }
}

/* Ensure main content is under header layer */
main, .site-content, .content-area { position: relative; z-index: 1; }