:root {
    /* Z-INDEXES */
    --vef-z-index-header-compact: 99;
    --vef-z-index-logo: 110;

    --vef-z-index-nav: 101;
    --vef-z-index-nav-toggle: 99999;
    --vef-z-index-nav-mobile-visible: 99999;


    /* LOGO */
    --vef-logo-width-mobile: 60px;
    --vef-logo-width-compact: 84px;
    --vef-logo-width-desktop: 120px;

    /* FONT-SIZES */
    --vef-header-sitename-font-size: 18px;
    --vef-header-sitename-span-font-size: 1.75em;
    --vef-header-sitedesc-font-size: 1em;
}

@media (min-width:800px) {
    :root {
        --vef-header-sitename-font-size: 42px;
        --vef-header-sitename-span-font-size: 1em;
        --vef-header-sitedesc-font-size: 13px;
        --vef-header-socials-font-size: 1.14em;
    }
}


#header {
    position: relative;
    background-color: var(--vef-color-dark-grey);
    top: 0;
    opacity: 1;
    max-width: unset !important;

}

#header h1 {
    font-family: inherit;
}

#header .wrapper {
    display: flex;
    align-items: center;
    margin-inline: auto;
    padding: 10px 5px;
    gap: 10px;
}

#header #logo > * {
    width: var(--vef-logo-width-mobile);
    display: block;
    aspect-ratio: 1/1;
    background: var(--vef-header-logo-url) no-repeat bottom center;
    background-size: cover;
}

#header #caption {
    color: white;
}


#header #caption .sitename {
    font-size: var(--vef-header-sitename-font-size) !important;
}

#header #caption .sitename span {
    font-size: var(--vef-header-sitename-span-font-size);
}

#header #caption .sitename,
#header #caption .sitename span {
    text-transform: uppercase;
    font-weight: bold;
    color: inherit;
    line-height: 1em;
}

#header #caption .sitename + p {
    font-size: var(--vef-header-sitedesc-font-size);
    font-style: italic;
    line-height: 1em;
    margin-top: 2px;
}



@media (min-width:800px) {

    #header .wrapper {
        padding: 8px 5px;
        gap: 20px;
        max-width: var(--vef-max-width);
    }

    #header #logo > * {
        width: var(--vef-logo-width-desktop);
    }


    #header #caption .sitename,
    #header #caption .sitename span {
        line-height: 1em;
        font-weight: bold;
        text-transform: uppercase;
        color: white;
    }



    #header #caption br {
        display: none;
    }

    #header #caption .sitename + p {
        display: block;
    }

    #header #caption .sitename span {
        margin-left: 0.25em;
    }

    #header.offscreen {

        top: -200px;
        left: 0;
    }

    #header.compact {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        transition: top 1s ease 0s;
        z-index: var(--vef-z-index-header-compact);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.25)
    }

    .desktop #header.compact ~ .layout,
    .desktop #header.compact ~ * .layout {
        margin-top: 0;
        padding-top: 0;
    }

    .desktop #header.compact ~ .corps,
    .desktop #header.compact ~ * .corps {
        padding-top: var(--vef-scroll-padding, 150px);
        margin-top: 0;
    }

    .admin-bar #header.compact {
        top: 32px;
    }


    #header.compact #logo {
        align-self: flex-start;
        z-index: var(--vef-z-index-logo);
        margin-top: -3px;
    }

    #header.compact #logo > * {
        width: var(--vef-logo-width-compact);
    }

    #header.compact .wrapper {
        max-height: 56px;
        max-width: var(--vef-max-width);
        gap: 10px;
    }

    #header.compact #caption .sitename {
        font-size: 1.71em !important;
    }



    #sidebar .floating {
        top: 100px !important;
    }

    .admin-bar #sidebar .floating {
        top: 130px !important;
    }
}