/*  Brand lockup in the header.

    Kept out of style.css because that is the purchased theme's file. Every rule
    here is additive and scoped under .dp-logo, so nothing else moves.

    The theme flips .pxp-logo between #fff and #333 across four states, and an
    <img> cannot follow a color property. So both artworks ship and exactly one
    is displayed, switched on the same selectors the theme already uses. The
    light file is white artwork for a dark ground; the dark file is black
    artwork for a light one. */

.pxp-logo-img {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.dp-logo {
    height: 30px;
    width: auto;
    display: block;
}

/*  Default is over the hero: white artwork. */
.dp-logo-dark { display: none; }

/*  The states where the theme turns the wordmark #333. */
.pxp-is-sticky .dp-logo-light,
.pxp-mobile .dp-logo-light,
.pxp-header.pxp-full .dp-logo-light,
.pxp-header.pxp-no-bg .dp-logo-light { display: none; }

.pxp-is-sticky .dp-logo-dark,
.pxp-mobile .dp-logo-dark,
.pxp-header.pxp-full .dp-logo-dark,
.pxp-header.pxp-no-bg .dp-logo-dark { display: block; }

/*  Dark mode puts those same states back to white. */
.pxp-dark-mode .pxp-is-sticky .dp-logo-dark,
.pxp-dark-mode .pxp-mobile .dp-logo-dark,
.pxp-dark-mode .pxp-header.pxp-full .dp-logo-dark,
.pxp-dark-mode .pxp-header.pxp-no-bg .dp-logo-dark { display: none; }

.pxp-dark-mode .pxp-is-sticky .dp-logo-light,
.pxp-dark-mode .pxp-mobile .dp-logo-light,
.pxp-dark-mode .pxp-header.pxp-full .dp-logo-light,
.pxp-dark-mode .pxp-header.pxp-no-bg .dp-logo-light { display: block; }

@media (max-width: 767.98px) {
    .dp-logo { height: 24px; }
}