// Set if the Logo + Title + Description are laying out horizontally (eg. Vasco) or vertically (eg. Julia)
$branding-horizontal: false !default;

.c-branding {
    display: flex;
    flex-direction: column;

    @if $branding-horizontal {

        // Horizontal Branding Layout
        @include above(lap) {
            .site-description {
                flex: 1 1 80px; // Fixed Header Height
            }
        }

    } @else {

        // Vertical Branding Layout
        > [rel="home"] {
            flex: 0 0 100%;
        }

    }

    @include below(lap) {
        flex-direction: column;
    }

    a,
    img {
        display: block;
    }

    img {
        width: auto;
        height: auto;
        transition:
            filter $transition--macro ease-in-out,
            opacity $transition--micro ease-out;
    }
}

@include above(lap) {

    .c-navbar__zone--branding + .c-navbar__zone--middle {
        max-width: 60%;
    }

    .c-navbar__zone--branding.c-navbar__zone--middle {
        max-width: 30%;
    }
}

.c-navbar__zone--left {

    .c-branding {
        text-align: left;
        align-items: flex-start;

        img {
            margin-right: auto;
        }
    }
}

.c-navbar__zone--middle {

    .c-branding {
        text-align: center;
        align-items: center;

        img {
            margin-left: auto;
            margin-right: auto;
        }
    }
}

.c-navbar__zone--right {

    .c-branding {
        text-align: right;
        align-items: flex-end;

        img {
            margin-left: auto;
        }
    }
}

.site-title,
.site-description {
    font: inherit;
    color: inherit;
}

.site-description:empty {
    display: none !important;
}