/* =============================================================================
   assets/nav.css — dropdown behaviour for the top navigation bar
   =============================================================================
   Dash auto-loads every file in assets/. This file only handles show/hide of
   the "Sectoren" / "Energiebronnen" dropdowns (and their nested "Woningen" /
   "Diensten" flyouts) on hover/focus. Colours, fonts, and spacing stay as
   inline styles in app.py so config.py remains the single place to edit
   those.
   ============================================================================= */

.nav-item {
    position: relative;
}

.nav-item > .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    min-width: 220px;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu {
    display: flex;
}

.nav-subitem {
    position: relative;
}

.nav-subitem > .nav-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    min-width: 220px;
    z-index: 110;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.nav-subitem:hover > .nav-menu,
.nav-subitem:focus-within > .nav-menu {
    display: flex;
}

.nav-menu a,
.nav-menu .nav-group-label {
    white-space: nowrap;
}