/* Local colour tokens for the shared studio navigation. */
:root {
    --studio-header-height: 72px;
    --studio-nav-accent: #5eead4;
    --studio-toggle-border: rgba(94, 234, 212, .32);
    --studio-toggle-ink: #f7fffe;
    --studio-toggle-background: rgba(94, 234, 212, .08);
    --studio-toggle-active-background: rgba(94, 234, 212, .17);
    --studio-toggle-shadow: inset 0 1px rgba(255, 255, 255, .1);
    --studio-nav-background: #08121e;
    --studio-nav-line: rgba(94, 234, 212, .18);
    --studio-nav-ink: #f7fffe;
    --studio-nav-muted: rgba(223, 246, 255, .68);
    --studio-nav-cta-ink: #08121e;
}

@media (max-width: 900px) {
    #main-header {
        display: block !important;
        height: 72px;
        min-height: 72px;
        padding: 0 !important;
    }
    #main-nav {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        height: 72px;
        min-height: 72px;
        margin: 0;
        padding-inline: 16px;
        gap: 8px;
    }
    #main-nav .nav-links { display: none !important; }
    #main-nav .nav-logo {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
    }
    #main-nav .nav-logo-mark { width: 30px; min-width: 30px; height: 30px; }
    #main-nav .nav-logo-copy { overflow: hidden; text-overflow: ellipsis; }
    #main-nav .studio-local-nav-toggle {
        display: grid;
        order: 2;
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
    }
    #main-nav .bedrijf-apps { margin-left: auto; order: 3; }
    #main-nav .bedrijf-apps-toggle { width: 44px; height: 44px; }
}

@media (max-width: 300px) {
    #main-nav { padding-inline: 12px; gap: 6px; }
    #main-nav .nav-logo-mark { width: 28px; min-width: 28px; height: 28px; }
    #main-nav .nav-logo-domain,
    #main-nav .nav-logo-copy .logo-dot { display: none; }
    #main-nav .studio-local-nav-toggle,
    #main-nav .bedrijf-apps,
    #main-nav .bedrijf-apps-toggle { flex-basis: 40px; width: 40px; min-width: 40px; height: 40px; }
}

@media (max-width: 235px) {
    #main-nav .nav-logo-copy { display: none; }
}