/**
 * De accountknop in de header en in het mobiele menu.
 *
 * Apart bestand en niet style.css: dat is een gebouwd bestand en de buildpipeline van dit
 * theme werkt niet meer. Deze regels staan daarom los en worden ná style.css geladen.
 */

.navbar__account {
    align-items: center;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 5px;
    color: #fff;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 600;
    gap: .5rem;

    /* Iets kleiner dan .navbar__cta ernaast: die verkoopt iets, deze is een hulpmiddel.
       De minimumhoogte houdt het op telefoon een fatsoenlijk aanraakvlak. */
    line-height: 1;
    min-height: 44px;
    padding: .45rem .85rem;
    text-decoration: none;
    transition: border-color .25s ease-in, transform .25s ease-in;
    white-space: nowrap;
}

.navbar__account:active,
.navbar__account:focus,
.navbar__account:hover {
    border-color: #fff;
    color: #fff;
    transform: scale(.95);
}

/* De focusring van het theme verdwijnt op donkergroen; deze is wel te zien. */
.navbar__account:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.navbar__account-icon {
    font-size: 1.05rem;
}

/* Het mobiele menu: zelfde icoon, maar als gewone menuregel tussen de andere. */
.navbar__nav-mobile .navbar__account-link {
    align-items: center;
    display: inline-flex;
    gap: .6rem;
}

.navbar__nav-mobile .navbar__account-icon {
    font-size: 1.2rem;
}

/* De knop neemt ruimte in de rechterkolom in. Zonder deze twee regels perst de CTA
   ernaast zijn tekst over vier regels zodra het krap wordt — hij had geen nowrap omdat er
   vroeger niets naast stond. De iets kleinere tussenruimte geeft precies genoeg lucht om
   alles op één regel te houden, ook op 1400px waar de CTA voor het eerst verschijnt. */
.navbar__cta {
    white-space: nowrap;
}

.navbar__info {
    gap: 1.25rem;
}

/* Wie ook de Dashboard-knop krijgt, heeft drie knoppen naast elkaar in de balk staan.
   Dat past onder 1600px niet meer naast het menu, de CTA en de socials. Voor die groep —
   en alleen voor die groep — wordt de accountknop het icoon alleen en wijken de socials;
   die staan ook in de footer. Een gewone bezoeker ziet de balk precies zoals voorheen,
   met de accountknop met label erbij. */
@media (max-width: 1599.98px) {
    body.has-dashboard-link .navbar__account {
        gap: 0;
        justify-content: center;
        min-width: 44px;
        padding: .45rem;
    }

    body.has-dashboard-link .navbar__account-label {
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    body.has-dashboard-link .social {
        display: none;
    }
}

/* Op een telefoon telt elke pixel naast logo en hamburger. Het label verdwijnt, het
   aanraakvlak niet: de knop blijft 44px hoog en breed genoeg, en de aria-label op de link
   houdt de betekenis overeind. In het mobiele menu staat het woord sowieso voluit. */
@media (max-width: 575.98px) {
    .navbar__info {
        gap: .9rem;
    }

    .navbar__account {
        gap: 0;
        justify-content: center;
        min-width: 44px;
        padding: .45rem;
    }

    .navbar__account-label {
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .navbar__account-icon {
        font-size: 1.15rem;
    }
}