@layer sarde.plugins {
.sarde-announcement-container {
    display: flex;
    flex-direction: column;
}

.sarde-announcement-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    transition: opacity 0.3s ease;
}

.sarde-announcement-banner.dismissed {
    display: none;
}

.sarde-announcement-info {
    background: var(--sd-blue-low, #dbeafe);
    color: var(--sd-gray-7, #1e293b);
    border-top: 2px solid var(--sd-blue, #3b82f6);
}

.sarde-announcement-warning {
    background: var(--sd-amber-low, #fef3c7);
    color: var(--sd-gray-7, #1e293b);
    border-top: 2px solid var(--sd-amber, #f59e0b);
}

.sarde-announcement-success {
    background: var(--sd-green-low, #dcfce7);
    color: var(--sd-gray-7, #1e293b);
    border-top: 2px solid var(--sd-green, #22c55e);
}

.sarde-announcement-danger {
    background: var(--sd-red-low, #fee2e2);
    color: var(--sd-gray-7, #1e293b);
    border-top: 2px solid var(--sd-red, #ef4444);
}

:root[data-theme="dark"] {
    .sarde-announcement-info {
        background: hsl(224, 50%, 18%);
        color: hsl(224, 80%, 90%);
    }
    .sarde-announcement-warning {
        background: hsl(38, 50%, 18%);
        color: hsl(38, 80%, 90%);
    }
    .sarde-announcement-success {
        background: hsl(150, 40%, 15%);
        color: hsl(150, 60%, 85%);
    }
    .sarde-announcement-danger {
        background: hsl(0, 45%, 18%);
        color: hsl(0, 70%, 88%);
    }
}

.sarde-announcement-content {
    flex: 1;
    text-align: center;
}

.sarde-announcement-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.25rem;
    opacity: 0.6;
    color: inherit;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.sarde-announcement-dismiss:hover {
    opacity: 1;
}

/* ── Rotate mode ── */

.sarde-announcement-container[data-display-mode="rotate"] .sarde-announcement-banner.dismissed {
    display: none;
}

/* ── Dot indicator ── */

.sarde-announcement-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
}

.sarde-announcement-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background: transparent;
    cursor: pointer;
    padding: 0;
    opacity: 0.4;
    color: inherit;
    transition: opacity 0.2s, transform 0.2s;
}

.sarde-announcement-dot.is-active {
    background: currentColor;
    opacity: 1;
    transform: scale(1.25);
}

.sarde-announcement-dot:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── Above the header ── */
/* The layout offsets content by --sd-banner-height, so the strip keeps that
   height: one line of text, rotate dots overlaid at the bottom. */

.sarde-masthead .sarde-announcement-container {
    position: relative;
}

.sarde-masthead .sarde-announcement-banner {
    box-sizing: border-box;
    height: var(--sd-banner-height, 3rem);
    padding-block: 0;
}

.sarde-masthead .sarde-announcement-content {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sarde-masthead .sarde-announcement-dots {
    position: absolute;
    inset-block-end: 0.125rem;
    inset-inline: 0;
    padding: 0;
    pointer-events: none;
}

.sarde-masthead .sarde-announcement-dot {
    pointer-events: auto;
}

/* Narrow screens: wrap onto a second line in the same height, with smaller
   text. Rotate dots move to a column at the start edge, clear of the text. */
@media (max-width: 50em) {
    .sarde-masthead .sarde-announcement-banner {
        gap: 0.5rem;
        padding-inline: 1rem 0.5rem;
    }

    .sarde-masthead .sarde-announcement-content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        white-space: normal;
        font-size: 0.8125rem;
        line-height: 1.3;
    }

    .sarde-masthead .sarde-announcement-container[data-display-mode="rotate"] .sarde-announcement-banner {
        padding-inline-start: 1.75rem;
    }

    .sarde-masthead .sarde-announcement-dots {
        flex-direction: column;
        gap: 0.25rem;
        inset-block: 0;
        inset-inline: 0.625rem auto;
    }
}

/* ── Accessibility ── */

@media (prefers-reduced-motion: reduce) {
    .sarde-announcement-container[data-display-mode="rotate"] .sarde-announcement-banner {
        transition: none;
    }
}

@media print {
    .sarde-announcement-container {
        display: none !important;
    }
}
}