/* Announcement banner - extended options.
 *
 * Loaded after Bootstrap so .alert-custom overrides Bootstrap's alert-*
 * variants when an admin selects "Use custom colours". Size presets are
 * additive on top of Bootstrap's default .alert padding.
 */

.announcement-carousel {
    position: relative;
}

.announcement-carousel .alert {
    margin-bottom: 0;
}

.announcement-line {
    display: block;
}

.alert-dismissible .btn-close {
    top: 50%;
    transform: translateY(-50%);
    padding-top: 0;
    padding-bottom: 0;
}

.announcement-inline,
.announcement-inline > * {
    display: inline;
    margin: 0;
}

.announcement-inline p,
.announcement-inline div,
.announcement-inline h1,
.announcement-inline h2,
.announcement-inline h3,
.announcement-inline h4,
.announcement-inline h5,
.announcement-inline h6,
.announcement-inline blockquote,
.announcement-inline figure,
.announcement-inline figcaption,
.announcement-inline ul,
.announcement-inline ol,
.announcement-inline li,
.announcement-inline pre {
    display: inline;
    margin: 0;
    padding: 0;
}

/* Size presets ---------------------------------------------------------- */
.ann-size-small {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.85rem;
}

.ann-size-medium {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1rem;
}

.ann-size-large {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.15rem;
}

.ann-size-large .announcement-title {
    font-size: 1.25em;
}

/* Theme-matching alert variant — inherits the site accent so the bar
 * always looks right regardless of which palette or light/dark mode is active. */
.alert-theme {
    --bs-alert-bg: var(--site-accent);
    --bs-alert-color: var(--site-on-accent);
    --bs-alert-border-color: var(--site-accent);
}

/* btn-close is a black SVG icon; invert it when the accent is dark (white text)
 * and leave it as-is when the accent is light (dark text). The --site-on-accent-filter
 * variable is exported by BrandingService::themeCssVariables() per theme/mode. */
.alert-theme .btn-close {
    filter: var(--site-on-accent-filter);
    opacity: 0.7;
}

/* Carousel arrows are font icons coloured via color: inherit from --site-on-accent;
 * no filter needed — only the opacity rule applies. */
.alert-theme .announcement-carousel__arrow {
    opacity: 0.7;
}

.alert-theme .announcement-carousel__arrow:hover,
.alert-theme .announcement-carousel__arrow:focus-visible {
    opacity: 1;
}

/* Custom-colour alert variant ------------------------------------------ */
.alert-custom {
    /* Background + text + border come from the inline style attribute set
     * by the partial after server-side hex validation. We provide a safe
     * neutral fallback so an undefined custom alert still reads. */
    background-color: #f8f9fa;
    color: #212529;
}

.alert-custom .btn-close {
    /* Inherit the alert's text colour for the close icon so it stays
     * visible against dark custom backgrounds. */
    filter: invert(1) grayscale(100%) brightness(2);
    opacity: 0.7;
}

/* Click action: link wrapper ------------------------------------------- */
.announcement-link-wrap {
    display: block;
    color: inherit;
    text-decoration: none;
}

.announcement-link-wrap:hover .alert,
.announcement-link-wrap:focus .alert {
    filter: brightness(0.96);
}

/* Click action: expand toggle ------------------------------------------ */
.announcement-expand-toggle {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.announcement-expand-toggle[aria-expanded="true"] .announcement-expand-icon {
    transform: rotate(180deg);
}

.announcement-expand-icon {
    transition: transform 0.15s ease-in-out;
}

/* Carousel - arrows embedded inside the banner -------------------------- */
.announcement-carousel--multi {
    /* The arrows are absolutely positioned against this container so they
     * stay vertically centered on whichever slide is currently visible. */
    position: relative;
    /* Enable horizontal swipe gestures without fighting the browser's
     * vertical scroll. */
    touch-action: pan-y;
}

/* Push the alert content inward so the arrows have room without
 * overlapping the message text or the dismiss button.
 * Extra bottom padding gives the dot indicators clear space below the text. */
.announcement-carousel--multi .alert {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 1.6rem;
}

/* Move the dismiss button further inward (toward the text) so the right
 * arrow can occupy the gutter on the far right edge. */
.announcement-carousel--multi .alert-dismissible .btn-close {
    right: 3rem;
}

.announcement-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    /* Comfortable tap target on mobile (>= 44px). */
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease, background-color 0.15s ease;
    font-size: 1.1rem;
}

.announcement-carousel__arrow--prev { left: 0; }
.announcement-carousel__arrow--next { right: 0; }

.announcement-carousel__arrow:hover,
.announcement-carousel__arrow:focus-visible {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.06);
}

/* Dots - small unobtrusive indicator strip at the bottom-center of the
 * carousel, overlaying the banner. */
.announcement-carousel__dots {
    position: absolute;
    bottom: 0.35rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    pointer-events: auto;
}

.announcement-carousel__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    border: 0;
    background-color: currentColor;
    opacity: 0.35;
    padding: 0;
    cursor: pointer;
}

.announcement-carousel__dot.is-active {
    opacity: 0.9;
}

/* Indicate the carousel is grab-/swipe-able on touch devices. */
.announcement-carousel--multi .alert {
    cursor: grab;
}

.announcement-carousel--multi.is-swiping .alert {
    cursor: grabbing;
}

@media (max-width: 575.98px) {
    /* On narrow screens, keep the arrows visible but slightly more compact
     * so they don't dominate the banner. */
    .announcement-carousel__arrow {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
    }
    .announcement-carousel--multi .alert {
        padding-left: 2.25rem;
        padding-right: 2.25rem;
    }
    .announcement-carousel--multi .alert-dismissible .btn-close {
        right: 2.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .announcement-expand-icon {
        transition: none;
    }
}