/* Nav Panel Background - Black */
#navPanel {
    background-color: #000000 !important;
}

/* Fix for navigation panel submenu overlap */
#navPanel .link {
    position: relative !important;
    overflow: visible !important;
    height: auto !important;
    line-height: 1.5em !important;
    padding: 0.5em 0 !important;
    font-size: calc(0.85em + 2px) !important; /* Increased font size by 2px */
}

#navPanel .indent-1 {
    display: block !important;
    padding-left: 1.5em !important;
}

#navPanel .indent-2 {
    display: block !important;
    padding-left: 3em !important;
}

/* Ensure proper spacing between menu items in mobile view */
#navPanel nav ul li {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    margin-bottom: 0.5em !important;
}

/* Ensure submenu items display properly in mobile view */
#navPanel nav ul ul {
    position: static !important;
    display: block !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Fix for dropdown menu items in mobile view */
#navPanel .link.depth-1 {
    padding-left: 1em !important;
    font-size: calc(0.85em + 2px) !important; /* Increased font size by 2px */
}

#navPanel .link.depth-2 {
    padding-left: 2em !important;
    font-size: calc(0.85em + 2px) !important; /* Increased font size by 2px */
}

/* Ensure no overlap in mobile navigation */
#navPanel nav ul {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Additional font size adjustments for all navigation elements */
#navPanel a, 
#navPanel .link a, 
#navPanel nav ul li a {
    font-size: calc(0.85em + 2px) !important; /* Increased font size by 2px */
}

/* Colors for navpanel: main menu white, submenu grey */
#navPanel .link.depth-0 { color: #ffffff !important; }
#navPanel .link.depth-1,
#navPanel .link.depth-2,
#navPanel .link.depth-3 { color: #bfbfbf !important; }
/* Hover/active states */
#navPanel .link:hover { opacity: 0.95; }

/* Requested hover colors for mobile panel */
#navPanel .link.depth-0:hover { color: #009b3a !important; } /* Top-level */
#navPanel .link.depth-1:hover,
#navPanel .link.depth-2:hover,
#navPanel .link.depth-3:hover { color: #ffee00 !important; } /* Submenus */

/* Desktop nav border fit to content (centered within header) */
#nav {
    position: absolute !important;           /* Position within header */
    top: 2.5em !important;                  /* Match theme spacing */
    left: 50% !important;                   /* Center horizontally */
    transform: translateX(-50%) !important; /* Center correction */
    width: fit-content !important;          /* Fit border to nav width */
    height: fit-content !important;         /* Fit border to nav height */
    display: flex !important;               /* Use flex for better control */
    justify-content: center !important;     /* Perfect horizontal centering */
    align-items: center !important;         /* Perfect vertical centering */
    background-color: #000000 !important;   /* Black background */
    border: 2px solid #000000 !important;   /* Black border */
    border-radius: 10px !important;         /* Optional rounding */
    padding: 0 !important;                  /* Remove container padding to avoid offset */
    box-sizing: border-box !important;      /* Include border/padding in size */
    line-height: 1 !important;              /* Prevent extra height */
    z-index: 1000 !important;              /* Ensure dropdowns appear above other content */
}

#nav > ul {
    display: flex !important;                /* Align items horizontally */
    align-items: center !important;          /* Center list items vertically */
    gap: 0 !important;                       /* No inter-item gaps */
    margin: 0 !important;                    /* Remove default ul margin */
    padding: 0 !important;                   /* Remove default padding */
    list-style: none !important;             /* Remove list bullets */
}

#nav > ul > li {                            
    padding: 0 !important;                   /* Tighten around links */
    position: relative !important;           /* For dropdown positioning */
}

#nav > ul > li > a, 
#nav > ul > li > span {
    display: flex !important;               /* Use flex for text centering */
    align-items: center !important;         /* Center text vertically within link */
    justify-content: center !important;     /* Center text horizontally within link */
    padding: 0.75em 1.25em !important;      /* Equal top/bottom padding */
    white-space: nowrap !important;         /* Prevent text wrapping */
    color: #ffffff !important;              /* White text color */
    text-decoration: none !important;       
    font-size: 0.85em !important;           /* Match theme nav font size */
    letter-spacing: 0.15em !important;      /* Match theme letter spacing */
    text-transform: uppercase !important;   /* Match theme text transform */
    border-radius: 8px !important;          /* Slight rounding for hover */
    transition: background-color 0.2s ease, color 0.2s ease !important;
    line-height: 1 !important;              /* Tight line height for perfect centering */
    text-align: center !important;          /* Backup text centering */
}

#nav > ul > li > a:hover,
#nav > ul > li > span:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #009b3a !important;              /* Green on hover */
}

/* Dropdown menu styles - matching theme design */
#nav ul ul {
    display: none !important;               /* Hide by default */
    position: absolute !important;          /* Position relative to parent */
    top: 100% !important;                  /* Position below parent */
    left: 0 !important;                    /* Align with parent */
    min-width: 200px !important;           /* Minimum width for dropdown */
    background: #000000 !important;        /* Black background */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;  /* Subtle border */
    border-radius: 8px !important;         /* Rounded corners */
    padding: 0.5em 0 !important;           /* Vertical padding */
    z-index: 1001 !important;              /* Above nav container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important; /* Subtle shadow */
}

/* Show dropdown on hover */
#nav ul li:hover > ul {
    display: block !important;
}

/* Dropdown menu items */
#nav ul ul li {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: solid 1px rgba(255, 255, 255, 0.05) !important; /* Match theme separator */
}

#nav ul ul li:first-child {
    border-top: 0 !important;
}

#nav ul ul a,
#nav ul ul span {
    display: block !important;
    padding: 0.75em 1.25em !important;
    white-space: nowrap !important;
    color: #ffffff !important;              /* White text for dropdown items */
    text-decoration: none !important;
    font-size: 0.85em !important;           /* Match theme font size */
    letter-spacing: 0.15em !important;      /* Match theme letter spacing */
    text-transform: uppercase !important;   /* Match theme text transform */
    transition: color 0.2s ease, background-color 0.2s ease !important;
}

#nav ul ul a:hover,
#nav ul ul span:hover {
    color: #ffee00 !important;              /* Yellow on hover for dropdown */
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Hide desktop nav on mobile */
@media screen and (max-width: 980px) {
  #nav {
    display: none !important;
  }
}