/**
 * Notice bar: a low full-width strip in the highlight color for one short
 * announcement with an icon and a link, e.g. an open application round under
 * the hero. Not a color-section: it has its own low padding and leaves the
 * next section's top padding alone.
 *
 * globalClass: notice-bar   (the full-width strip)
 *
 * Structure:
 *   .notice-bar.gb-container.alignfull
 *     .notice-bar-inner.gb-container               GB: useGlobalMaxWidth, margin auto
 *       figure > img                               small icon (GB width/height ~26px)
 *       p.notice-bar-text                          the announcement, <b> for the key fact
 *       p.notice-bar-link > a                      the call to action
 *
 * Colors: --highlight-clr background, --on-highlight-clr text and links
 * (colors.css).
 *
 * Tuning: --notice-bar-padding-y (22px)
 *
 * Hers Klub, 11/2026. Candidate for the base theme.
 */

:root {
    --notice-bar-padding-y: 22px;
}

.gb-container.notice-bar {
    padding-top: var(--notice-bar-padding-y);
    padding-bottom: var(--notice-bar-padding-y);
    background-color: var(--highlight-clr);
    color: var(--on-highlight-clr);
    --heading-clr: var(--on-highlight-clr);
    --link-clr: var(--on-highlight-clr);
    --link-hover-clr: var(--on-highlight-clr);
}

.notice-bar-inner,
.notice-bar-inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 32px;
    text-align: center;
}

.notice-bar-inner > *,
.notice-bar-inner figure {
    margin: 0;
}

.notice-bar-text {
    font-weight: 500;
}

.notice-bar-link {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.notice-bar-link a:hover {
    text-decoration: none;
}