/*
    The ClientMessaging banners, wwwroot/js/messaging-banner.js: one per
    message, stacked in #messaging-banner.

    Same colours as the lender portals' login message (ClientMessaging's
    LoginMsgStyle: #FEF4DB with a #FFBB00 rule), with a thinner 1px rule above
    and below each banner and a 2px white gap between them.

    The stack is sticky, above the sticky header (template.css: header,
    z-index 11). The script sets --messaging-banner-height to the stack's
    height, and the header and the side menu stick that much lower so nothing
    hides under it. With no messages the height is 0 and both keep their old
    offsets.
*/

#main-header {
    top: var(--messaging-banner-height, 0px);
}

#main-menu-container {
    top: calc(60px + var(--messaging-banner-height, 0px));
}

.messaging-banner {
    position: sticky;
    top: 0;
    z-index: 12;
    box-sizing: border-box;
    width: 100%;
    /* Many or long messages must not take over a phone screen; they scroll. */
    max-height: 35vh;
    overflow-y: auto;
    /* Behind the gaps between banners, so page content scrolling under the
       sticky stack does not show through them. */
    background: #FFFFFF;
}

.messaging-banner[hidden] {
    display: none;
}

.messaging-banner-item {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    color: #1E2227;
    background: #FEF4DB;
    border-top: 1px solid #FFBB00;
    border-bottom: 1px solid #FFBB00;
    font-family: Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 22px;
    text-align: left;
}

.messaging-banner-item + .messaging-banner-item {
    margin-top: 2px;
}

.messaging-banner-icon {
    flex: 0 0 auto;
    margin-top: 3px;
    color: #9A6B00;
}

.messaging-banner-text {
    min-width: 0;
    max-width: 1100px;
    overflow-wrap: anywhere;
}

.messaging-banner-text p {
    margin: 0;
}

.messaging-banner-text p + p {
    margin-top: 6px;
}

.messaging-banner-text a {
    color: #7B1E28;
    font-weight: 600;
    text-decoration: underline;
}