/**
 * Toursure Navigation Menu with Tooltip
 * Version: 1.0.0
 * Description: Custom navigation menu with dropdown tooltip support for Elementor templates
 */

/* ========================================
   Base Navigation Wrapper
   ======================================== */
.nav-menu-tooltip-wrapper {
  position: relative;
  width: 100%;
  z-index: 1000;
}

/* ========================================
   Mobile Hamburger Toggle Button
   ======================================== */
.nav-mobile-toggle {
  display: none;
  /* Hidden on desktop */
  position: relative;
  z-index: 10001;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.hamburger-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 24px;
  height: 18px;
}

.hamburger-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #333;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Light text mode - white hamburger */
.nav-menu-tooltip-wrapper.light-text .hamburger-icon span {
  background-color: #ffffff;
}

/* Dark text mode - dark hamburger */
.nav-menu-tooltip-wrapper.dark-text .hamburger-icon span {
  background-color: #333;
}

/* Hamburger animation when menu is open */
.nav-mobile-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-mobile-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(2) {
  opacity: 0;
}

.nav-mobile-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ========================================
   Mobile Menu Container (Fullscreen)
   ======================================== */
.nav-mobile-menu-container {
  /* Desktop: normal display - no background */
  position: relative;
  width: 100%;
  background: transparent;
}

.nav-mobile-close {
  display: none;
  /* Hidden on desktop */
}

/* ========================================
   Menu List Styles
   ======================================== */
.nav-tooltip-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

/* Horizontal Orientation */
.orientation-horizontal .nav-tooltip-menu {
  flex-direction: row;
}

/* Vertical Orientation */
.orientation-vertical .nav-tooltip-menu {
  flex-direction: column;
}

/* ========================================
   Alignment
   ======================================== */
.align-left .nav-tooltip-menu {
  justify-content: flex-start;
}

.align-center .nav-tooltip-menu {
  justify-content: center;
}

.align-right .nav-tooltip-menu {
  justify-content: flex-end;
}

/* ========================================
   Menu Items
   ======================================== */
.nav-tooltip-menu>li {
  position: relative;
  margin: 0;
  padding: 0;
}

.orientation-horizontal .nav-tooltip-menu>li {
  margin-right: 2rem;
}

.orientation-horizontal .nav-tooltip-menu>li:last-child {
  margin-right: 0;
}

.orientation-vertical .nav-tooltip-menu>li {
  margin-bottom: 1rem;
  width: 100%;
}

.orientation-vertical .nav-tooltip-menu>li:last-child {
  margin-bottom: 0;
}

/* ========================================
   Menu Links
   ======================================== */
.nav-tooltip-menu > li > a {
  display: block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  white-space: nowrap;
}

.nav-tooltip-menu > li > a:hover {
  color: #C62828;
}

/* Active/Current Menu Item */
.nav-tooltip-menu > li.current-menu-item > a,
.nav-tooltip-menu > li.current_page_item > a {
  color: #C62828;
  font-weight: 600;
}

/* ========================================
   Automatic Color Detection Classes
   ======================================== */

/* Light text for dark/transparent backgrounds */
.nav-menu-tooltip-wrapper.light-text .nav-tooltip-menu > li > a {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.nav-menu-tooltip-wrapper.light-text .nav-tooltip-menu > li > a:hover {
  color: #FF6B8A !important;
}

.nav-menu-tooltip-wrapper.light-text .nav-tooltip-menu > li.current-menu-item > a,
.nav-menu-tooltip-wrapper.light-text .nav-tooltip-menu > li.current_page_item > a {
  color: #FF6B8A !important;
  font-weight: 600;
}

/* Dark text for light backgrounds */
.nav-menu-tooltip-wrapper.dark-text .nav-tooltip-menu > li > a {
  color: #333 !important;
  text-shadow: none;
}

.nav-menu-tooltip-wrapper.dark-text .nav-tooltip-menu > li > a:hover {
  color: #C62828 !important;
}

.nav-menu-tooltip-wrapper.dark-text .nav-tooltip-menu > li.current-menu-item > a,
.nav-menu-tooltip-wrapper.dark-text .nav-tooltip-menu > li.current_page_item > a {
  color: #C62828 !important;
  font-weight: 600;
}

/* Adjust background indicator for light text mode */
.nav-menu-tooltip-wrapper.light-text .menu-background-indicator {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
}

.nav-menu-tooltip-wrapper.light-text .menu-background-indicator.active {
  opacity: 0.3;
}

.nav-menu-tooltip-wrapper.light-text .menu-background-indicator.current-active {
  opacity: 0.35;
}

/* Adjust dropdown arrow for light text */
.nav-menu-tooltip-wrapper.light-text .nav-tooltip-menu > li.has-dropdown > a::after {
  color: rgba(255, 255, 255, 0.8);
}

.nav-menu-tooltip-wrapper.light-text .nav-tooltip-menu > li.has-dropdown:hover > a::after,
.nav-menu-tooltip-wrapper.light-text .nav-tooltip-menu > li.has-dropdown.active > a::after {
  color: #FF6B8A;
}

/* Light text mode for mobile menu */
.nav-menu-tooltip-wrapper.light-text .nav-mobile-menu-container {
  background: rgba(0, 0, 0, 0.95);
}

.nav-menu-tooltip-wrapper.light-text .nav-mobile-menu-container .nav-tooltip-menu > li > a {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.nav-menu-tooltip-wrapper.light-text .nav-mobile-close {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.nav-menu-tooltip-wrapper.light-text .nav-mobile-close:hover,
.nav-menu-tooltip-wrapper.light-text .nav-mobile-close:focus {
  background: rgba(255, 255, 255, 0.2);
}

/* Dark text mode for mobile menu */
.nav-menu-tooltip-wrapper.dark-text .nav-mobile-menu-container {
  background: #ffffff;
}

.nav-menu-tooltip-wrapper.dark-text .nav-mobile-menu-container .nav-tooltip-menu > li > a {
  color: #333;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* ========================================
   Sliding Background Indicator
   ======================================== */
.menu-background-indicator {
  position: absolute;
  background: linear-gradient(135deg, #FF6B8A 0%, #FF4D6A 100%);
  border-radius: 24px;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: left, top, width, height, opacity;
}

/* Horizontal menu background */
.orientation-horizontal .menu-background-indicator {
  height: 42px;
  top: 50%;
  transform: translateY(-50%);
}

/* Vertical menu background */
.orientation-vertical .menu-background-indicator {
  width: 100%;
  left: 0;
}

/* Active state - controlled by JavaScript */
.menu-background-indicator.active {
  opacity: 0.12;
}

/* Current menu item - always show background */
.menu-background-indicator.current-active {
  opacity: 0.15;
}

/* Ensure menu links are above background */
.nav-tooltip-menu>li {
  z-index: 1;
}

/* ========================================
   Dropdown Tooltip Container
   ======================================== */
.nav-tooltip-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  visibility: hidden;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 0;
  margin-top: 1rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  z-index: 9999;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0.25s;
}

/* Triangle Arrow pointing to menu */
.nav-tooltip-dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ffffff;
  filter: drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.08));
  z-index: 10000;
  transition: opacity 0.2s ease;
}

/* Show dropdown on hover (Desktop) */
.nav-tooltip-menu .has-dropdown:hover>.nav-tooltip-dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

/* Active dropdown (for mobile click) */
.nav-tooltip-menu .has-dropdown.active>.nav-tooltip-dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

/* ========================================
   Dropdown Arrow/Indicator
   ======================================== */
.nav-tooltip-menu > li.has-dropdown > a::after {
  content: '\25BC';
  font-size: 0.65rem;
  margin-left: 0.5rem;
  opacity: 0.6;
  display: inline-block;
  transition: transform 0.2s ease;
}

.nav-tooltip-menu > li.has-dropdown:hover > a::after,
.nav-tooltip-menu > li.has-dropdown.active > a::after {
  opacity: 1;
  transform: rotate(180deg);
}

/* ========================================
   Vertical Orientation Dropdown
   ======================================== */
.orientation-vertical .nav-tooltip-dropdown {
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  margin-left: 1rem;
  margin-top: 0;
}

/* Vertical dropdown active state */
.orientation-vertical .has-dropdown:hover>.nav-tooltip-dropdown,
.orientation-vertical .has-dropdown.active>.nav-tooltip-dropdown {
  transform: translateY(-50%) translateX(0);
}

/* Arrow for vertical orientation (pointing left) */
.orientation-vertical .nav-tooltip-dropdown::before {
  top: 50%;
  left: -8px;
  transform: translateY(-50%);
  border-left: none;
  border-right: 8px solid #ffffff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  filter: drop-shadow(-1px 0 2px rgba(0, 0, 0, 0.08));
}

/* ========================================
   Elementor Content Inside Dropdown
   ======================================== */
.nav-tooltip-dropdown .elementor {
  width: 100%;
}

.nav-tooltip-dropdown .elementor-widget-wrap {
  width: 100%;
}

/* ========================================
   Close Button (Hidden on Desktop)
   ======================================== */
.nav-tooltip-close {
  display: none;
}

/* ========================================
   Responsive Styles
   ======================================== */

/* Mobile devices - Show hamburger menu */
@media screen and (max-width: 1024px) {

  /* Show hamburger button */
  .nav-mobile-toggle {
    display: flex;
  }

  /* Hide mobile menu container by default */
  .nav-mobile-menu-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #ffffff;
    z-index: 10000;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 80px 2rem 2rem;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
  }

  /* Show menu when active */
  .nav-menu-tooltip-wrapper.mobile-menu-active .nav-mobile-menu-container {
    transform: translateX(0);
    visibility: visible;
  }

  /* Mobile menu layout - vertical stack */
  .nav-mobile-menu-container .nav-tooltip-menu {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  .nav-mobile-menu-container .nav-tooltip-menu>li {
    margin: 0 0 0.5rem 0;
    width: 100%;
  }

  .nav-mobile-menu-container .nav-tooltip-menu > li > a {
    padding: 1rem;
    font-size: 1.1rem;
    color: #333;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  /* Close button for fullscreen menu - HIDDEN (use hamburger X button instead) */
  .nav-mobile-close {
    display: none !important;
  }

  /* Backdrop overlay */
  .nav-menu-tooltip-wrapper.mobile-menu-active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    backdrop-filter: blur(2px);
    animation: fadeInBackdrop 0.3s ease forwards;
  }

  @keyframes fadeInBackdrop {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

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

  /* Dropdown tooltips inside mobile menu */
  .nav-mobile-menu-container .nav-tooltip-dropdown {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    max-width: 100%;
    width: 100%;
    margin-top: 0.5rem;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    display: none;
  }

  /* Show dropdown when parent has active class */
  .nav-mobile-menu-container .has-dropdown.active>.nav-tooltip-dropdown {
    display: block;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  /* Hide dropdown arrow (triangle) in mobile fullscreen */
  .nav-mobile-menu-container .nav-tooltip-dropdown::before {
    display: none;
  }

  /* Disable hover on mobile */
  .nav-mobile-menu-container .has-dropdown:hover>.nav-tooltip-dropdown {
    display: none;
  }

  /* Hide dropdown close button in mobile fullscreen */
  .nav-mobile-menu-container .nav-tooltip-close {
    display: none;
  }

  /* Background indicator hidden on mobile */
  .nav-mobile-menu-container .menu-background-indicator {
    display: none;
  }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
  .nav-tooltip-dropdown {
    display: none !important;
  }
}

/* ========================================
   Accessibility
   ======================================== */
.nav-tooltip-menu > li > a:focus {
  outline: 2px solid #0073aa;
  outline-offset: 2px;
}

.nav-tooltip-dropdown:focus-within {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

/* ========================================
   Error State
   ======================================== */
.nav-menu-error {
  padding: 1rem;
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* ========================================
   Loading State (optional)
   ======================================== */
.nav-tooltip-dropdown.loading {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-tooltip-dropdown.loading::before {
  content: 'Loading...';
  color: #999;
  font-size: 0.9rem;
}

/* ========================================
   Custom Theme Styles
   ======================================== */

/* Link - Default white color for menu items */
/* COMMENTED OUT: This was preventing automatic color detection from working
#menu-mainmenu .menu-item a {
  color: #ffffff !important;
}
*/

/* Nav mobile menu container - Transparent background */
.elementor-location-header .elementor-element .nav-mobile-menu-container {
  background-color: transparent;
}

/* ========================================
   Small Mobile Devices (374px and smaller)
   ======================================== */
@media (max-width: 374px) {

  /* Link - Dark text for small screens */
  /* COMMENTED OUT: This was preventing automatic color detection from working
  #menu-mainmenu .menu-item a {
    color: #3d3d3d !important;
  }
  */

  /* Nav mobile menu container - White semi-transparent background */
  .elementor-location-header .elementor-element .nav-mobile-menu-container {
    background-color: rgba(255, 255, 255, 0.87);
  }

  /* Hamburger icon - White color */
  .nav-menu-tooltip-wrapper .hamburger-icon {
    color: #ffffff;
  }

  /* Hamburger icon spans - White background */
  .nav-menu-tooltip-wrapper .hamburger-icon span {
    background-color: #ffffff !important;
  }

  /* Nav mobile toggle - Dark background with rounded corners */
  .elementor-location-header .elementor-element .nav-mobile-toggle {
    background-color: rgba(0, 0, 0, 0.68);
    border-radius: 100px;
  }

}

/* ========================================
   Theme Switching Styles
   ======================================== */

/* --- Light Theme (White UI - for dark backgrounds) --- */
.nav-menu-tooltip-wrapper.light-text .nav-tooltip-menu > li > a {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.nav-menu-tooltip-wrapper.light-text .nav-tooltip-menu > li > a:hover,
.nav-menu-tooltip-wrapper.light-text .nav-tooltip-menu > li > a:focus {
  color: var(--pmn-accent-color, #FF6B8A);
}

.nav-menu-tooltip-wrapper.light-text .nav-tooltip-menu > li.current-menu-item > a,
.nav-menu-tooltip-wrapper.light-text .nav-tooltip-menu > li.current_page_item > a {
  color: var(--pmn-accent-color, #FF6B8A);
}

.nav-menu-tooltip-wrapper.light-text .hamburger-icon span {
  background-color: #ffffff;
}

.nav-menu-tooltip-wrapper.light-text .menu-background-indicator {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
}

/* --- Dark Theme (Dark UI - for light backgrounds) --- */
.nav-menu-tooltip-wrapper.dark-text .nav-tooltip-menu > li > a {
  color: #333333;
}

.nav-menu-tooltip-wrapper.dark-text .nav-tooltip-menu > li > a:hover,
.nav-menu-tooltip-wrapper.dark-text .nav-tooltip-menu > li > a:focus {
  color: var(--pmn-accent-color, #C62828);
}

.nav-menu-tooltip-wrapper.dark-text .nav-tooltip-menu > li.current-menu-item > a,
.nav-menu-tooltip-wrapper.dark-text .nav-tooltip-menu > li.current_page_item > a {
  color: var(--pmn-accent-color, #C62828);
}

.nav-menu-tooltip-wrapper.dark-text .hamburger-icon span {
  background-color: #333333;
}

.nav-menu-tooltip-wrapper.dark-text .menu-background-indicator {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.04) 100%);
}

/* ========================================
   Mobile Menu Background Styles
   ======================================== */

@media screen and (max-width: 1024px) {

  /* --- Theme-based Background (Default) --- */
  .nav-menu-tooltip-wrapper.mobile-bg-theme.dark-text .nav-mobile-menu-container {
    background: #ffffff;
  }

  .nav-menu-tooltip-wrapper.mobile-bg-theme.dark-text .nav-mobile-menu-container .nav-tooltip-menu > li > a {
    color: #333333;
    border-bottom-color: rgba(0, 0, 0, 0.1);
  }

  .nav-menu-tooltip-wrapper.mobile-bg-theme.dark-text .nav-mobile-close {
    color: #333333;
    background: rgba(0, 0, 0, 0.05);
  }

  .nav-menu-tooltip-wrapper.mobile-bg-theme.dark-text .nav-mobile-close:hover {
    background: rgba(0, 0, 0, 0.1);
  }

  .nav-menu-tooltip-wrapper.mobile-bg-theme.light-text .nav-mobile-menu-container {
    background: rgba(0, 0, 0, 0.95);
  }

  .nav-menu-tooltip-wrapper.mobile-bg-theme.light-text .nav-mobile-menu-container .nav-tooltip-menu > li > a {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .nav-menu-tooltip-wrapper.mobile-bg-theme.light-text .nav-mobile-close {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
  }

  .nav-menu-tooltip-wrapper.mobile-bg-theme.light-text .nav-mobile-close:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  /* --- Blur Effect Background --- */
  .nav-menu-tooltip-wrapper.mobile-bg-blur .nav-mobile-menu-container {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .nav-menu-tooltip-wrapper.mobile-bg-blur.light-text .nav-mobile-menu-container {
    background: rgba(0, 0, 0, 0.75);
  }

  .nav-menu-tooltip-wrapper.mobile-bg-blur .nav-mobile-menu-container .nav-tooltip-menu > li > a {
    color: #333333;
    border-bottom-color: rgba(0, 0, 0, 0.1);
  }

  .nav-menu-tooltip-wrapper.mobile-bg-blur.light-text .nav-mobile-menu-container .nav-tooltip-menu > li > a {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .nav-menu-tooltip-wrapper.mobile-bg-blur .nav-mobile-close {
    color: #333333;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
  }

  .nav-menu-tooltip-wrapper.mobile-bg-blur.light-text .nav-mobile-close {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
  }

  /* --- Inverted Background (opposite to text) --- */
  .nav-menu-tooltip-wrapper.mobile-bg-inverted.light-text .nav-mobile-menu-container {
    background: #ffffff;
  }

  .nav-menu-tooltip-wrapper.mobile-bg-inverted.light-text .nav-mobile-menu-container .nav-tooltip-menu > li > a {
    color: #333333;
    border-bottom-color: rgba(0, 0, 0, 0.1);
  }

  .nav-menu-tooltip-wrapper.mobile-bg-inverted.light-text .nav-mobile-close {
    color: #333333;
    background: rgba(0, 0, 0, 0.05);
  }

  .nav-menu-tooltip-wrapper.mobile-bg-inverted.dark-text .nav-mobile-menu-container {
    background: rgba(0, 0, 0, 0.95);
  }

  .nav-menu-tooltip-wrapper.mobile-bg-inverted.dark-text .nav-mobile-menu-container .nav-tooltip-menu > li > a {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .nav-menu-tooltip-wrapper.mobile-bg-inverted.dark-text .nav-mobile-close {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
  }
}

/* ========================================
   Modern Mobile Menu Improvements
   ======================================== */

@media screen and (max-width: 1024px) {

  /* Enhanced Mobile Menu Container */
  .nav-mobile-menu-container {
    padding: 100px 1.5rem 2rem;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.35s ease;
  }

  /* Modern Menu Items Styling */
  .nav-mobile-menu-container .nav-tooltip-menu {
    gap: 0;
  }

  .nav-mobile-menu-container .nav-tooltip-menu > li {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    transition: background-color 0.2s ease;
  }

  .nav-mobile-menu-container .nav-tooltip-menu > li:hover {
    background-color: rgba(0, 0, 0, 0.03);
  }

  .nav-menu-tooltip-wrapper.light-text .nav-mobile-menu-container .nav-tooltip-menu > li:hover,
  .nav-menu-tooltip-wrapper.mobile-bg-theme.light-text .nav-mobile-menu-container .nav-tooltip-menu > li:hover,
  .nav-menu-tooltip-wrapper.mobile-bg-blur.light-text .nav-mobile-menu-container .nav-tooltip-menu > li:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }

  /* Touch-friendly Menu Links */
  .nav-mobile-menu-container .nav-tooltip-menu > li > a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    position: relative;
  }

  .nav-mobile-menu-container .nav-tooltip-menu > li:last-child > a {
    border-bottom: none;
  }

  /* Hover/Active States */
  .nav-mobile-menu-container .nav-tooltip-menu > li > a:hover,
  .nav-mobile-menu-container .nav-tooltip-menu > li > a:focus {
    color: var(--pmn-accent-color, #C62828);
    padding-left: 1.5rem;
  }

  .nav-mobile-menu-container .nav-tooltip-menu > li.current-menu-item > a,
  .nav-mobile-menu-container .nav-tooltip-menu > li.current_page_item > a {
    color: var(--pmn-accent-color, #C62828);
    font-weight: 600;
  }

  /* Active indicator bar */
  .nav-mobile-menu-container .nav-tooltip-menu > li.current-menu-item > a::before,
  .nav-mobile-menu-container .nav-tooltip-menu > li.current_page_item > a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background: var(--pmn-accent-color, #C62828);
    border-radius: 0 4px 4px 0;
  }

  /* Submenu Dropdown Arrow Indicator - Hidden (no sub-menu on mobile) */
  .nav-mobile-menu-container .nav-tooltip-menu > li.has-dropdown > a::after {
    display: none;
  }

  /* Enhanced Close Button */
  .nav-mobile-close {
    width: 48px;
    height: 48px;
    font-size: 1.75rem;
    border-radius: 12px;
    top: 1.5rem;
    right: 1.5rem;
    transition: all 0.2s ease;
  }

  .nav-mobile-close:hover {
    transform: scale(1.05);
  }

  .nav-mobile-close:active {
    transform: scale(0.95);
  }

  /* Enhanced Hamburger Button */
  .nav-mobile-toggle {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    transition: all 0.2s ease;
  }

  .nav-mobile-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .nav-menu-tooltip-wrapper.light-text .nav-mobile-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .hamburger-icon {
    width: 22px;
    height: 16px;
    gap: 4px;
  }

  .hamburger-icon span {
    height: 2.5px;
    border-radius: 2px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Smoother Hamburger to X animation */
  .nav-mobile-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .nav-mobile-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* Mobile Dropdown - Hidden (no sub-menu on mobile, navigate directly) */
  .nav-mobile-menu-container .nav-tooltip-dropdown {
    display: none !important;
  }

  /* Better backdrop */
  .nav-menu-tooltip-wrapper.mobile-menu-active::before {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

/* Extra small screens adjustments */
@media screen and (max-width: 480px) {
  .nav-mobile-menu-container {
    padding: 90px 1rem 1.5rem;
  }

  .nav-mobile-menu-container .nav-tooltip-menu > li > a {
    font-size: 1.0625rem;
    min-height: 52px;
    padding: 0.875rem 1rem;
  }

  .nav-mobile-close {
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
  }
}