/* Page banner — title and breadcrumb readable on any background image */
.page-banner .banner-content {
    position: relative;
    z-index: 2;
}

.page-banner .banner-content > h2,
.page-banner .banner-content h2.display-4,
.page-banner .banner-content h2.text-white {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.5),
        0 1px 3px rgba(0, 0, 0, 0.35);
}

.page-banner .banner-crumbs {
    margin-top: 1.125rem;
    padding: 0.5rem 1.125rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

.page-banner .banner-crumbs a,
.page-banner .banner-crumbs a span,
.page-banner .banner-crumbs .crumb-mid,
.page-banner .banner-crumbs .crumb-mid span {
    color: rgba(255, 255, 255, 0.9) !important;
}

.page-banner .banner-crumbs a svg {
    color: rgba(255, 255, 255, 0.9) !important;
    stroke: currentColor;
}

.page-banner .banner-crumbs a:hover,
.page-banner .banner-crumbs a:hover span {
    color: #ffffff !important;
}

.page-banner .banner-crumbs .current,
.page-banner .banner-crumbs .current[data-edit] {
    color: #ffffff !important;
}

.page-banner .banner-crumbs .sep {
    background: #e30613;
}