/* Colours and sizes come from the design tokens (public/css/tokens.css), which every layout loading this file loads too */

.nf-strip {
    background: var(--primary);
    color: var(--emphasis);
    box-shadow: var(--elevation-2);
}

.nf-strip__inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: var(--space-3) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.nf-strip__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.nf-strip__icon svg {
    width: var(--icon-size);
    height: var(--icon-size);
}

.nf-strip__text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    line-height: var(--leading-tight);
}

.nf-strip__title {
    font-weight: 600;
}

.nf-strip__detail {
    font-size: var(--text-sm);
}

@media (max-width: 767px) {
    .nf-strip__inner {
        padding: var(--space-2) var(--space-4);
        align-items: flex-start;
    }

    .nf-strip__text {
        flex-direction: column;
        gap: var(--space-1);
    }
}

/* Service notice banner: the e-mail carries the whole message, the strip its first lines */
.nf-notice-strip__body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: pre-line;
}

.nf-notice-strip__link {
    color: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: underline;
}