/* =========================================================
   Submenus in the navbar — pure CSS, no JavaScript.
   Uses the colours and font of styles.css; styles.css itself is unchanged.
   ========================================================= */

.submenu-toggle {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.navbar-nav .submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-nav .submenu > li {
    margin: 0;
    padding: 0;
    list-style: none; /* overrides the global "ul > li > ul > li { list-style-type: circle }" */
}

.submenu-item {
    display: block;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    transition: all 0.3s ease;
}

.submenu-item:hover,
.submenu-item:focus {
    text-decoration: none;
}

/* ---------- Desktop ---------- */
@media (min-width: 992px) {
    .navbar-nav .has-submenu {
        position: relative;
    }

    .submenu-caret {
        font-size: 0.6rem;
        margin-left: 4px;
        vertical-align: middle;
    }

    .submenu-btn {
        display: none;
    }

    /* Keep the parent item yellow while the submenu is open */
    .navbar-nav .has-submenu:hover > .nav-link,
    .navbar-nav .has-submenu:focus-within > .nav-link {
        background-color: var(--slhd-yellow) !important;
        color: var(--slhd-primary) !important;
    }

    .navbar-nav .submenu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 240px;
        background: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        padding: 10px 0;
        border-top: 3px solid var(--slhd-yellow);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }

    .has-submenu:hover > .submenu,
    .has-submenu:focus-within > .submenu {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .submenu-item {
        color: var(--slhd-primary);
        font-size: 0.875rem;
        padding: 8px 20px;
        white-space: nowrap;
    }

    .submenu-item:hover,
    .submenu-item:focus,
    .submenu-item.active {
        background-color: var(--slhd-yellow);
        color: var(--slhd-primary);
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 991px) {
    .submenu-caret {
        display: none;
    }

    /* The global "ul > li { padding-left: 0.3em }" would offset the highlighted row */
    .navbar-nav > .nav-item {
        padding-left: 0;
    }

    /* The link keeps its full width (text stays centred like the other items);
       the arrow sits on top of its right edge. */
    .navbar-nav .has-submenu {
        position: relative;
    }

    .submenu-btn {
        position: absolute;
        top: 0;
        right: 0;
        height: calc(0.9rem * 1.5 + 30px); /* same as a menu row: font-size × line-height + 2 × 15px padding */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        margin: 0;
        color: white;
        cursor: pointer;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    .submenu-btn i {
        transition: transform 0.3s ease;
    }

    .submenu-toggle:checked + .submenu-btn i {
        transform: rotate(180deg);
    }

    .submenu-toggle:focus-visible + .submenu-btn {
        outline: 2px solid var(--slhd-yellow);
        outline-offset: -4px;
    }

    .navbar-nav .submenu {
        display: none;
        flex-basis: 100%;
        background-color: rgba(0, 0, 0, 0.15);
        padding: 5px 0;
    }

    .submenu-toggle:checked ~ .submenu {
        display: block;
    }

    .submenu-item {
        color: white;
        font-size: 0.85rem;
        padding: 12px 20px 12px 40px;
    }

    .submenu-item:hover,
    .submenu-item:focus,
    .submenu-item.active {
        background-color: var(--slhd-yellow);
        color: var(--slhd-primary);
    }
}

/* Op de computer opent het submenu met muis of Tab; de verborgen knop is daar overbodig */
@media (min-width: 992px) {
    .submenu-toggle { display: none; }
}