/*  Brand lockup in the navbar.

    Kept out of style.css because that is the purchased theme's file. Everything
    here is additive, and the two rules that reach into theme selectors are
    scoped under .la-brand so nothing else on the page shifts.

    The navbar is transparent over the dark hero and switches to white on
    .affix, so the brand ships as two images and only one is ever displayed. */

.la-brand {
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

.la-logo {
    height: 34px;
    width: auto;
    display: block;
}

/*  Over the hero: reversed artwork. After scroll: ink artwork. */
.la-logo-onwhite { display: none; }
.navbar-default.affix .la-brand .la-logo-onhero  { display: none; }
.navbar-default.affix .la-brand .la-logo-onwhite { display: block; }

/*  The theme shortens .navbar-brand from 70px to 60px on affix, so the lockup
    comes down with it rather than crowding the shorter bar. */
.navbar-default.affix .la-logo { height: 28px; }

@media (max-width: 767px) {
    .la-logo { height: 26px; }
    .navbar-default.affix .la-logo { height: 24px; }
}