/**
 * Blog post banner — child theme.
 *
 * The header sits over the banner with white menu text, and a featured image
 * can be light at the top, so the menu was hard to read on some posts. This
 * darkens only the top of the banner, behind the header, and leaves the rest of
 * the photograph alone.
 */

.single-post .header_media .wpestate_header_image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 230px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    pointer-events: none;
}

/* On a phone the banner is taller than the screen and the theme's parallax
   leaves part of it unpainted, so it scrolls with the page at a size that
   suits the screen. The height is set inline by the theme, hence the override. */
@media (max-width: 767px) {
    .single-post .header_media {
        height: auto;
    }

    .single-post .header_media .wpestate_header_image {
        background-attachment: scroll;
        height: 320px !important;
    }

    .single-post .header_media .wpestate_header_image::before {
        height: 150px;
    }
}