:root {
    /* Stessa altezza del logo nella navbar della homepage, su ogni vista. */
    --vx-logo-height: 40px;
    --vx-logo-height-mobile: 40px;
    --vx-nav-height: 64px;
}

a.vx-brand-logo {
    display: inline-flex;
    align-items: center;
    align-self: center;
    flex: 0 0 auto;
    line-height: 0;
    padding: 0;
    margin: 0;
    text-decoration: none;
}

a.vx-brand-logo > img {
    display: block;
    height: var(--vx-logo-height);
    width: auto;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: left center;
}

.sb-topnav > a.vx-brand-logo {
    margin-left: 1rem;
    margin-right: 0.5rem;
}

.vx-brand-logo.vex-footer-logo > img {
    height: var(--vx-logo-height);
}

/* Topbar admin scura: logo teal senza sfondo.
   Il tema admin fissa .navbar-brand a 225px: il link segue la larghezza del logo. */
.sb-topnav > a.vx-brand-logo--on-dark {
    width: auto;
    max-width: none;
}

.sb-topnav > a.vx-brand-logo--on-dark > img {
    width: min(180px, calc(42vw - 20px));
    height: auto;
}