/* ------------------------------------------------------------------
   Site wide alert banner (managed from /dwconsole/alertbars).

   Colours are set inline from the admin's chosen values - see
   Views/Home/AlertBar.cshtml. Everything else belongs here.
   ------------------------------------------------------------------ */

.alert-bar {
    position: relative;
    z-index: 5;
    width: 100%;
    padding: 13px 0;
    font-size: 2rem;
    line-height: 1.45;
    text-align: center;
}

.alert-bar-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.alert-bar-text {
    margin: 0;
    padding: 0;
}

/* Small gap after the title so it reads as a heading rather than running
   straight into the message. */
.alert-bar-text strong {
    font-weight: 700;
    margin-right: 6px;
}

/* inline-flex with line-height 1 centres the label vertically inside the pill
   regardless of the font's ascender/descender metrics - dongle-regular sits
   noticeably high in its line box, which an inline-block would inherit. */
.alert-bar-link {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: 18px;
    padding: 8px 22px;
    border: 2px solid currentColor;
    border-radius: 50px;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    -webkit-transition: opacity 0.15s ease;
    transition: opacity 0.15s ease;
}

.alert-bar-link:hover,
.alert-bar-link:focus {
    text-decoration: none;
    opacity: 0.75;
}

@media (max-width: 767px) {

    /* font-size deliberately not reduced here - the bar stays at 2rem on all
       breakpoints. Add a step-down here if it proves too large on phones.

       The line-height is tightened though: at 2rem the message wraps to two or
       three lines on a phone, and dongle's tall line box makes 1.45 read as
       double spaced once it does. */
    .alert-bar {
        padding: 11px 0;
        line-height: 1.1;
    }

    .alert-bar-inner {
        display: block;
    }

    .alert-bar-link {
        margin: 8px 0 2px;
    }
}