/* Modern Hamburger Menu Styles */

/* Hamburger menu button */
.hamburger-menu {
 display: none;
 position: absolute;
 top: 50%;
 right: 15px;
 transform: translateY(calc(-50% + 10px)); /* Moved 10px down from center */
 z-index: 1000;
 background-color: #009aca;
 border: none;
 padding: 10px 15px;
 cursor: pointer;
 border-radius: 5px;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
 transition: background-color 0.3s ease;
 /* Ensure the button itself captures all clicks */
 pointer-events: auto;
 -webkit-tap-highlight-color: transparent;
 user-select: none;
 -webkit-user-select: none;
}

/* Make header position relative so hamburger is positioned relative to it */
#jsn-header {
 position: relative;
}

/* Prevent clearbreak from blocking the hamburger button */
#jsn-header .clearbreak {
 pointer-events: none;
}

/* Ensure header children don't block hamburger on mobile */
@media only screen and (max-width: 767px) {
 #jsn-header > * {
  position: relative;
  z-index: 1;
 }

 .hamburger-menu {
  z-index: 1001 !important; /* Above other header elements */
 }
}

.hamburger-menu:hover {
 background-color: #007ea8;
}

.hamburger-menu:active {
 transform: translateY(calc(-50% + 10px)) scale(0.95); /* Maintain the 10px offset when clicked */
}

/* Hamburger icon bars */
.hamburger-icon {
 display: block;
 width: 25px;
 height: 18px; /* Total height to contain all 3 bars */
 position: relative;
 pointer-events: none; /* Allow clicks to pass through to the button */
}

/* Ensure all children and pseudo-elements don't block clicks */
.hamburger-icon,
.hamburger-icon *,
.hamburger-icon::before,
.hamburger-icon::after {
 pointer-events: none !important;
}

/* Top bar */
.hamburger-icon::before {
 content: "";
 display: block;
 width: 25px;
 height: 2px;
 background-color: #fff;
 position: absolute;
 top: 0;
 left: 0;
 transition: all 0.3s ease;
}

/* Middle bar */
.hamburger-icon::after {
 content: "";
 display: block;
 width: 25px;
 height: 2px;
 background-color: #fff;
 position: absolute;
 top: 50%;
 left: 0;
 transform: translateY(-50%);
 transition: all 0.3s ease;
}

/* Bottom bar - created with background on a pseudo-span */
.hamburger-icon span {
 display: block;
 width: 25px;
 height: 2px;
 background-color: #fff;
 position: absolute;
 bottom: 0;
 left: 0;
 transition: all 0.3s ease;
}

/* Animated hamburger to X transformation */
.hamburger-menu.active .hamburger-icon::before {
 top: 50%;
 transform: translateY(-50%) rotate(45deg);
}

.hamburger-menu.active .hamburger-icon::after {
 opacity: 0; /* Hide middle bar */
}

.hamburger-menu.active .hamburger-icon span {
 bottom: 50%;
 transform: translateY(50%) rotate(-45deg);
}

/* Mobile menu overlay */
.mobile-menu-overlay {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.5);
 z-index: 998;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
 display: block;
 opacity: 1;
}

/* Desktop - hide hamburger and show normal menu */
@media only screen and (min-width: 768px) {
 .hamburger-menu {
  display: none !important;
 }

 .mobile-menu-overlay {
  display: none !important;
 }
}

/* Tablet and Mobile - show hamburger menu */
@media only screen and (max-width: 767px) {
 .hamburger-menu {
  display: block;
 }

 /* Hide the sidebar by default on mobile */
 #jsn-leftsidecontent {
  position: fixed;
  top: 0;
  left: -100%;
  width: 80%;
  max-width: 300px;
  height: 100%;
  background-color: #fff;
  z-index: 999;
  overflow-y: auto;
  transition: left 0.3s ease;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
 }

 /* Show sidebar when menu is active */
 #jsn-leftsidecontent.menu-open {
  left: 0;
 }

 /* Adjust content when on mobile */
 #jsn-maincontent {
  width: 100% !important;
  margin-left: 0 !important;
 }

 /* Style the menu items for mobile */
 #jsn-leftsidecontent ul.menu-treemenu {
  margin-top: 60px;
 }

 #jsn-leftsidecontent ul.menu-treemenu li a {
  padding: 12px 15px;
  font-size: 16px;
  border-bottom: 1px solid #e9e9e9;
 }

 #jsn-leftsidecontent ul.menu-treemenu li a:hover {
  background-color: #f5f5f5;
 }

 /* Close button in sidebar */
 .menu-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 30px;
  color: #666;
  cursor: pointer;
  background: none;
  border: none;
  padding: 5px 10px;
  line-height: 1;
  z-index: 1001;
 }

 .menu-close-btn:hover {
  color: #009aca;
 }
}

/* Extra small devices (phones) */
@media only screen and (max-width: 480px) {
 #jsn-leftsidecontent {
  width: 85%;
 }

 .hamburger-menu {
  padding: 8px 12px;
  right: 10px;
 }

 .hamburger-icon,
 .hamburger-icon::before,
 .hamburger-icon::after {
  width: 20px;
 }
}

/* Improve logo visibility on mobile when hamburger is present */
@media only screen and (max-width: 767px) {
 #jsn-logo {
  max-width: calc(100% - 70px);
 }

 /* Ensure header has enough height for the hamburger button */
 #jsn-header {
  min-height: 60px;
  display: flex;
  align-items: center;
 }
}

/* Accessibility improvements */
.hamburger-menu:focus {
 outline: 2px solid #009aca;
 outline-offset: 2px;
}

/* Prevent body scroll when menu is open */
body.menu-open {
 overflow: hidden;
}

/* Animation for smooth appearance */
@keyframes slideInFromLeft {
 from {
  transform: translateX(-100%);
 }
 to {
  transform: translateX(0);
 }
}

#jsn-leftsidecontent.menu-open {
 animation: slideInFromLeft 0.3s ease;
}