/* ============================================================
   Universal navbar component
   Colours & font come from CSS variables
   ============================================================ */

.navbar {
    background-color: var(--nav-bg);
    font-family: var(--nav-font);
    overflow: visible;
}

/* ------------------------------------------------------------
   Buttons (desktop + mobile)
   ------------------------------------------------------------ */

.navbar .w3-button,
.navbar .w3-bar-item.w3-button {
    color: var(--nav-fg);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Hover */
.navbar .w3-button:hover,
.navbar .w3-dropdown-hover:hover > .w3-button {
    background-color: var(--nav-hover-bg);
    color: var(--nav-fg);
}

/* ------------------------------------------------------------
   Dropdowns
   ------------------------------------------------------------ */

.navbar .w3-dropdown-hover {
    position: relative;
}

.navbar .w3-dropdown-content {
    background-color: var(--nav-dd-bg);
    color: var(--nav-dd-fg);
    min-width: 220px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    z-index: 1000;
}

.navbar .w3-dropdown-content .w3-button {
    color: var(--nav-dd-fg);
}

.navbar .w3-dropdown-content .w3-button:hover {
    background-color: var(--nav-hover-bg);
}

/* ------------------------------------------------------------
   Mobile layout helpers (no colours here)
   ------------------------------------------------------------ */

/* Mobile group headings – structural, not clickable */
.navbar-mobile-group {
    font-weight: 600;
    opacity: 0.85;
    cursor: default;
    border-top: 1px solid rgba(255,255,255,0.25);
}

/* Prevent hover state from looking like a menu option */
.navbar-mobile-group:hover {
    background-color: transparent;
}


/* Sub-items (override W3 padding) */
.navbar .navbar-mobile-subitem {
    padding-left: 40px !important;
    position: relative;
}


.navbar-mobile-subitem::before {
    content: "–";
    position: absolute;
    left: 22px;
    opacity: 0.5;
}


.navbar-home-icon i {
    font-size: 1.2em;
}

/* Do not apply hover styling to mobile group headings */
.navbar .navbar-mobile-group:hover {
    background-color: transparent !important;
    color: var(--nav-fg);
}

/* Prevent hover styling on mobile group headings */
.navbar .navbar-mobile-group:hover {
    background-color: transparent !important;
    color: var(--nav-fg) !important;
}

/* Mobile menu is closed by default */
#mobileMenu {
    display: none;
}


