/* Optional authenticated title-bar photograph. The normal theme remains the
   complete fallback until the image has loaded and decoded successfully. */
body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg.ff-banner-photo-active,
html body.ff-app.ff-banner-toolbar-photo-active .ff-page > #page-title.ff-page-header {
    background-color: var(--ff-base-a, var(--topbar-bg, #2f73d9)) !important;
    background-image:
        var(--ff-banner-photo-fade),
        linear-gradient(var(--ff-banner-photo-tint), var(--ff-banner-photo-tint)),
        linear-gradient(var(--ff-banner-photo-wash), var(--ff-banner-photo-wash)),
        var(--ff-banner-photo) !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
    background-attachment: fixed, fixed, fixed, fixed !important;
    background-size:
        var(--ff-banner-canvas-size, 100vw 140px),
        var(--ff-banner-canvas-size, 100vw 140px),
        var(--ff-banner-canvas-size, 100vw 140px),
        var(--ff-banner-photo-size, 100vw auto) !important;
    background-position:
        0 0,
        0 0,
        0 0,
        var(--ff-banner-photo-fixed-position, 50% 0) !important;
}

body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg.ff-banner-photo-active::before,
body.ff-app .ff-shell .navbar-collapse.ff-topnav-bg.ff-banner-photo-active::after {
    content: none !important;
}

/* A photographed title bar reads as one heading. Keep the legacy subtitle
   split for theme-only pages, but do not mute half of a title over a photo. */
html body.ff-app.ff-banner-toolbar-photo-active
    .ff-page > #page-title.ff-page-header .ff-page-title .ff-page-subtitle {
    color: inherit !important;
    opacity: 1 !important;
}