/* The community Today header lives inside the hero. Its panels must extend
   beyond that hero; keep decorative media clipped in their own layer. */
.portal-hero-banner:has(.WOLHeaderPopup:not(.hide), .NotificationList.TransientPopupSurface:not(.hide), #NotificationsBox.TransientPopupSurface:not(.hide)) {
    overflow: visible !important;
}

.portal-hero-banner:has(.WOLHeaderPopup:not(.hide), .NotificationList.TransientPopupSurface:not(.hide), #NotificationsBox.TransientPopupSurface:not(.hide)) > .portal-image-container {
    overflow: hidden;
    border-radius: inherit;
}

@media (min-width: 601px) {
    .HeaderPopupAnchor {
        position: relative !important;
        overflow: visible !important;
    }

    .HeaderPopupAnchor > .HeaderAnchoredPopup.TransientPopupSurface,
    .HeaderPopupAnchor > #NotificationsBox.HeaderAnchoredPopup.TransientPopupSurface {
        position: absolute !important;
        top: calc(100% + .5rem) !important;
        right: 0 !important;
        left: auto !important;
        width: 26rem !important;
        min-width: 0;
        max-width: calc(100vw - 1rem) !important;
        max-height: var(--header-popup-max-height);
        margin: 0;
        transform: none !important;
        overflow: visible !important;
        z-index: 10002 !important;
    }

    .HeaderPopupAnchor > .HeaderAnchoredPopup::before {
        content: "";
        position: absolute;
        right: .375rem;
        bottom: 100%;
        border-right: .5rem solid transparent;
        border-bottom: .5rem solid #fff;
        border-left: .5rem solid transparent;
        pointer-events: none;
    }

    .HeaderPopupAnchor > .HeaderAnchoredPopup > .arrow {
        display: none;
    }
}