/* SLTIET responsive rules (ONLY mobile hamburger/menu visibility + minimal header padding fixes)
   Root MyWeb style.css provides the actual desktop/mobile breakpoints.
*/

/* =====================
   MOBILE MENU TOGGLE
   ===================== */
.mobile-menu-toggle {
  display: none !important;
  background: #e36e0f;
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 5px;
  margin-right: 10px;
  float: none;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1001 !important;
}

.mobile-menu-toggle:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}

.mobile-menu-toggle:active {
  background: #c55a0d;
}

/* Default: desktop nav visible */
#navContainer {
  display: none !important;
}



@media (max-width: 991px) {
  /* Mobile-only: hamburger visible, nav moved below sticky header */
  .mobile-menu-toggle {
    display: block !important;
  }

  #navContainer {
    display: none !important;
    position: fixed !important;
    left: 0;
    right: 0;
    margin: 0 !important;
    width: 100%;
    background: #f8f9fa;
    border-bottom: 2px solid #e36e0f;
    flex-wrap: nowrap !important;
    flex-direction: column !important;
    padding: 10px 0 !important;
    z-index: 999;
    margin-top: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }



  #navContainer.mobile-open {
    display: flex !important;
  }

  /* When menu is toggled via live site, ensure it sits outside sticky header */
  /* When opened, place the menu directly under the header/hamburger area */
  #navContainer.mobile-outside-sticky {
    position: fixed !important;
    left: 0;
    right: 0;
    margin: 0 !important;
    z-index: 1002 !important;

    /* Use the fixed header height (header container in newwebsite/include/header.php) */
    top: 180px !important;

    /* Expand menu area to avoid cutting content */
    height: calc(100vh - 180px) !important;
    max-height: calc(100vh - 180px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    /* Prevent horizontal wrapping artifacts */
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }





  .nav-link {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #ddd;
    padding: 15px 18px !important;
    font-size: 18px !important;
    border-radius: 0 !important;
  }

  /* Mobile submenu indicators (safe no-op unless those classes exist) */
  .menu-submenu .submenu-link {
    padding: 14px 18px !important;
    font-size: 17px !important;
  }

  .menu-sub-submenu .submenu-link {
    padding: 12px 16px !important;
    font-size: 16px !important;
  }

  .menu-submenu {
    display: none !important;
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav-item > .menu-submenu.show-submenu {
    display: block !important;
  }

  .menu-sub-submenu {
    display: none !important;
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .submenu-item > .menu-sub-submenu.show-submenu {
    display: block !important;
  }

  /* Make nav properly positioned */
  .ajax-nav {
    position: relative !important;
  }
}

@media (min-width: 992px) {
  .mobile-menu-toggle {
    display: none !important;
  }

  #navContainer {
    display: flex !important;
  }
}

/* =====================
   BODY TOP PADDING FIX
   (only if the page uses a fixed/sticky header)
   ===================== */
/* Responsive overrides intentionally disabled to match root MyWeb responsiveness (root style.css now drives @media breakpoints) */