/* ============================================================
   publiek/menu.css - de menubalk bovenaan.
   Hoort bij templates/public/delen/_menu.html.
   ============================================================ */

.menubalk {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(6, 8, 26, .92);
    border-bottom: 1px solid rgba(91, 63, 214, .45);
    backdrop-filter: blur(10px);
}

.menubalk-binnen {
    max-width: var(--breedte);
    margin: 0 auto;
    padding: 0 var(--rand-ruimte);
    min-height: 54px;
    display: flex;
    align-items: stretch;
    gap: 18px;
}

/* het logo linksboven; de balk blijft even hoog */
.merk {
    flex: none;
    display: flex;
    align-items: center;
    /* de tekst zie je alleen als het plaatje niet laadt */
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .2px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.merk img { display: block; width: auto; height: 46px; }

.menu {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.menu a,
.menu .straks {
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: var(--tekst);
    border-radius: 0 0 10px 10px;
    transition: background .15s, color .15s;
}
.menu a:hover { background: rgba(124, 58, 237, .18); }
.menu a.nu {
    background: linear-gradient(180deg, #4c1fd1 0%, #6d28d9 100%);
    box-shadow: 0 6px 22px rgba(124, 58, 237, .55);
    color: #fff;
}
/* de pagina bestaat nog niet */
.menu .straks { color: var(--tekst-dof); cursor: default; }

/* uitklapmenu onder een punt (bv. Walkthroughs) */
.menu-klap { position: relative; display: flex; }
.menu-klap .pijl {
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .7;
}
.menu-onder {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    padding: 6px;
    background: rgba(10, 12, 34, .98);
    border: 1px solid rgba(91, 63, 214, .45);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
    z-index: 60;
}
.menu-klap:hover .menu-onder,
.menu-klap:focus-within .menu-onder { display: block; }
.menu .menu-onder a,
.menu .menu-onder .straks {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
}
.menu .menu-onder a.nu { box-shadow: none; }

.menu-zoek {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 264px;
    padding: 0 12px;
    height: 34px;
    border: 1px solid var(--rand);
    border-radius: var(--rond-klein);
    background: var(--vlak-diep);
    color: var(--tekst-zacht);
}
.menu-zoek:focus-within { border-color: var(--paars-licht); }
.menu-zoek input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--tekst);
    font: inherit;
    font-size: 13.5px;
}
.menu-zoek input::placeholder { color: var(--tekst-zacht); }

/* het poppetje: naar inloggen, of naar je profiel */
.menu-account {
    flex: none;
    align-self: center;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #fff;
    color: var(--nacht);
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    transition: box-shadow .15s;
}
.menu-account:hover { box-shadow: 0 0 0 3px rgba(167, 139, 250, .55); }
/* ingelogd: de eerste letter van je naam, in kleur */
.menu-account.ingelogd { background: linear-gradient(135deg, var(--paars), var(--cyaan)); color: #fff; }

/* De balk staat uit (MENU_AAN in spellenplaza/public/menu.py): het
   zoekvak en het poppetje staan er wel, maar dof, en doen niets. */
.menu-zoek.uit,
.menu-account.uit { opacity: .4; cursor: default; }
.menu-zoek.uit input { cursor: default; }
.menu-zoek.uit:focus-within { border-color: var(--rand); }
.menu-account.uit:hover { box-shadow: none; }

/* smaller scherm: merk en zoeken boven, het menu eronder en schuifbaar */
@media (max-width: 1400px) {
    .menu a, .menu .straks { padding: 0 12px; }
    .menu-zoek { width: 200px; }
}
@media (max-width: 1180px) {
    .menubalk-binnen { flex-wrap: wrap; gap: 0 12px; }
    .merk { min-height: 50px; }
    .menu-zoek { margin-left: auto; flex: 0 1 240px; }
    .menu {
        order: 5;
        flex: 0 0 100%;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 calc(var(--rand-ruimte) * -1);
        padding: 0 var(--rand-ruimte);
        border-top: 1px solid rgba(91, 63, 214, .25);
    }
    .menu::-webkit-scrollbar { display: none; }
    .menu a, .menu .straks { min-height: 40px; border-radius: 0; }
    /* het menu schuift hier; het uitklapmenu hangt dan onder de hele balk */
    .menu-klap { position: static; }
    .menu-onder {
        position: fixed;
        top: 100%;
        left: 0;
        right: 0;
        border-radius: 0;
    }
    .menu .menu-onder a, .menu .menu-onder .straks { min-height: 0; }
}
@media (max-width: 520px) {
    .merk { font-size: 17px; }
    .merk img { height: 40px; }
    /* het zoekvak krimpt, zodat het poppetje ernaast blijft passen */
    .menu-zoek { flex: 1 1 110px; width: auto; min-width: 0; }
}