/* The notice bar at the top of the header (parts/site-notice.php, inc/site-notice.php).
   The header is fixed, so the bar counts into its height: #vb-main and the scroll
   padding add --vb-site-notice-height to their fallbacks (page-headers.css, a11y.css). */

.vb-site-notice {
    background: var(--yelow-700);
    color: var(--on-brand);
    font-family: 'BTB-Regular', sans-serif;
    font-size: 1.4rem;
    line-height: 2rem;
}

.vb-site-notice-closed .vb-site-notice {
    display: none;
}

/* The icon, the first line of text and the close button share one 44px row, so
   the icon and the cross stay on the first line when the text wraps on a phone. */
.vb-site-notice__inner {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}

.vb-site-notice__icon {
    flex: none;
    margin-block: 1.2rem;
}

.vb-site-notice__text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding-block: 1.2rem;
}

.vb-site-notice__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
    white-space: nowrap;
}

.vb-site-notice__link:hover {
    text-decoration-thickness: 2px;
}

/* A 44px target whose cross lines up with the right edge of the grid, like the
   language switch underneath it. */
.vb-site-notice__close {
    flex: none;
    margin-right: -1.2rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

@media (min-width: 768px) {
    .vb-site-notice {
        font-size: 1.6rem;
        line-height: 2.4rem;
    }

    .vb-site-notice__text {
        padding-block: 1rem;
    }
}

@media print {
    .vb-site-notice {
        display: none;
    }
}