/* Universalis Announcements — floating action button (FAB) + modal.
   The FAB matches the scroll-to-top button (square, brand-filled, white
   icon) and is anchored bottom-right; the left edge is reserved for the
   asw accessibility widget. Colour is a curated accent palette. */

/* ── FAB ─────────────────────────────────────────────────────────
   When an announcement is active the body gets .has-corner-announcement
   and the scroll-to-top button is lifted above this FAB so they stack. */

.universalis-announcements__fab {
    position: fixed;
    z-index: 98;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    padding: 0;
    border: 1px solid var(--fab-bg, var(--c-brand));
    border-radius: 0;
    background: var(--fab-bg, var(--c-brand));
    color: var(--c-surface, #fff);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
@media (hover: hover) {
    .universalis-announcements__fab:hover {
        background: var(--fab-bg-hover, var(--c-brand-dark));
        border-color: var(--fab-bg-hover, var(--c-brand-dark));
    }
}
.universalis-announcements__fab:focus-visible {
    outline: none;
    background: var(--fab-bg-hover, var(--c-brand-dark));
    border-color: var(--fab-bg-hover, var(--c-brand-dark));
}
.universalis-announcements__fab svg {
    width: 24px;
    height: 24px;
}

/* Curated accent palette: brand + complementary tones (second value = hover). */
.universalis-announcements__fab--color-brand   { --fab-bg: var(--c-brand, #325390); --fab-bg-hover: var(--c-brand-dark, #092655); }
.universalis-announcements__fab--color-teal    { --fab-bg: #1f7a82; --fab-bg-hover: #155a60; }
.universalis-announcements__fab--color-amber   { --fab-bg: #c0852b; --fab-bg-hover: #9a6a22; }
.universalis-announcements__fab--color-green   { --fab-bg: #3f7d4f; --fab-bg-hover: #2f5f3c; }
.universalis-announcements__fab--color-crimson { --fab-bg: #b23a48; --fab-bg-hover: #8c2c38; }
.universalis-announcements__fab--color-violet  { --fab-bg: #6b4ea6; --fab-bg-hover: #523c80; }

/* ── Attention cues (per-announcement, optional) ─────────────────
   'ring' animates a pseudo-element so the button stays put; 'pulse' and
   'wiggle' animate the button itself (admin opt-in). 'badge' is a static
   corner indicator. All motion is disabled under prefers-reduced-motion. */
.universalis-announcements__fab--attn-ring::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--fab-bg, var(--c-brand));
    pointer-events: none;
    animation: ann-ping 1.8s ease-out infinite;
}
.universalis-announcements__fab--attn-pulse {
    animation: ann-pulse 2.4s ease-in-out infinite;
}
.universalis-announcements__fab--attn-wiggle {
    animation: ann-wiggle 4s ease-in-out infinite;
}
.universalis-announcements__fab--attn-bounce {
    animation: ann-bounce 2s infinite;
}
.universalis-announcements__fab--badge::before {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: var(--c-danger, #dc3545);
    box-shadow: 0 0 0 2px var(--c-surface, #fff);
    pointer-events: none;
}

/* Pause the attention motion on hover/focus so the button is easy to click. */
.universalis-announcements__fab--attn-pulse:hover,
.universalis-announcements__fab--attn-pulse:focus-visible,
.universalis-announcements__fab--attn-wiggle:hover,
.universalis-announcements__fab--attn-wiggle:focus-visible,
.universalis-announcements__fab--attn-bounce:hover,
.universalis-announcements__fab--attn-bounce:focus-visible {
    animation-play-state: paused;
}
.universalis-announcements__fab--attn-ring:hover::after,
.universalis-announcements__fab--attn-ring:focus-visible::after {
    animation-play-state: paused;
}

@keyframes ann-ping {
    0%   { transform: scale(1);   opacity: 0.55; }
    100% { transform: scale(1.6); opacity: 0; }
}
@keyframes ann-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
@keyframes ann-wiggle {
    0%, 88%, 100% { transform: translateX(0); }
    91% { transform: translateX(-2px); }
    94% { transform: translateX(2px); }
    97% { transform: translateX(-1px); }
}
/* Ball bounce: launch up (decelerate), fall (accelerate), then two smaller
   decaying bounces and a short rest before repeating. */
@keyframes ann-bounce {
    0%        { transform: translateY(0);     animation-timing-function: ease-out; }
    18%       { transform: translateY(-16px); animation-timing-function: ease-in; }
    34%       { transform: translateY(0);     animation-timing-function: ease-out; }
    46%       { transform: translateY(-8px);  animation-timing-function: ease-in; }
    58%       { transform: translateY(0);     animation-timing-function: ease-out; }
    67%       { transform: translateY(-3px);  animation-timing-function: ease-in; }
    74%, 100% { transform: translateY(0); }
}

/* Lift the scroll-to-top button above the announcement FAB so they stack.
   The offset has to clear the FAB's full vertical excursion under the
   bounce attention animation (peak −16px) plus a small visual gap; the
   plain FAB top edge sits at 20 + 48 = 68px from the viewport bottom,
   so 96px leaves room for the keyframe peak without overlap. */
body.has-corner-announcement .scroll-to-top {
    bottom: 88px;
}

@media (max-width: 767px) {
    .universalis-announcements__fab {
        width: 44px;
        height: 44px;
        right: 15px;
        bottom: 15px;
    }
    .universalis-announcements__fab svg {
        width: 22px;
        height: 22px;
    }
    body.has-corner-announcement .scroll-to-top {
        bottom: 77px;
    }
}

@media (max-width: 360px) {
    .universalis-announcements__fab {
        width: 40px;
        height: 40px;
    }
    .universalis-announcements__fab svg {
        width: 20px;
        height: 20px;
    }
}

/* ── Modal ───────────────────────────────────────────────────── */

.universalis-announcements__overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(9, 38, 85, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.universalis-announcements__overlay.is-open {
    display: flex;
    opacity: 1;
}

.universalis-announcements__dialog {
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--c-surface, #fff);
    color: var(--c-text, #474747);
    border-radius: 0;
    box-shadow: 0 24px 60px -12px rgba(9, 38, 85, 0.45);
}
.universalis-announcements__dialog:focus {
    outline: none;
}

.universalis-announcements__close {
    position: absolute;
    top: 12px;
    right: 12px;
    /* Above the slides/slider so it stays visible and clickable. */
    z-index: 10;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.85);
    color: var(--c-text, #474747);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.universalis-announcements__close:hover,
.universalis-announcements__close:focus-visible {
    background: var(--c-surface-tint, #eef2f9);
    color: var(--c-brand, #325390);
    outline: none;
}
.universalis-announcements__close svg {
    width: 20px;
    height: 20px;
}

.universalis-announcements__media img {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: cover;
}

.universalis-announcements__content {
    padding: 28px;
}

.universalis-announcements__title {
    margin: 0 0 12px;
    /* Keep the heading clear of the corner close button. */
    padding-right: 36px;
    font-family: Montserrat, sans-serif;
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-brand-dark, #092655);
}

.universalis-announcements__body {
    font-family: "Avenir Next Cyr", sans-serif;
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--c-text, #474747);
}
.universalis-announcements__body p:first-child { margin-top: 0; }
.universalis-announcements__body p:last-child  { margin-bottom: 0; }
.universalis-announcements__body a {
    color: var(--c-brand, #325390);
    text-decoration: underline;
}

.universalis-announcements__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
/* CTA buttons reuse .btn / .btn-submit; this only handles wrapping. */
.universalis-announcements__btn {
    flex: 0 1 auto;
}

/* ── Slider (multiple announcements) ─────────────────────────────
   Scoped to .universalis-announcements__slider so Swiper overrides here
   never leak to other (future) slider blocks. Square language: no
   border-radius, hover = colour change only (no lift). */

.universalis-announcements__slider {
    position: relative;
    /* Room for the controls row (38px) + a 28px bottom gap matching the
       content's side/top padding. */
    padding-bottom: 66px;
}

/* Each slide owns the existing media/content markup; keep them aligned. */
.universalis-announcements__slider .swiper-slide {
    height: auto;
}

/* Nav arrows: square, brand-filled, white icon; hover → brand-dark. */
.universalis-announcements__nav {
    position: absolute;
    bottom: 28px;
    left: 28px;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}
.universalis-announcements__prev,
.universalis-announcements__next {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    padding: 0;
    border: 1px solid var(--c-brand, #325390);
    border-radius: 0;
    background: var(--c-brand, #325390);
    color: var(--c-surface, #fff);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
    .universalis-announcements__prev:hover,
    .universalis-announcements__next:hover {
        background: var(--c-brand-dark, #092655);
        border-color: var(--c-brand-dark, #092655);
    }
}
.universalis-announcements__prev:focus-visible,
.universalis-announcements__next:focus-visible {
    outline: none;
    background: var(--c-brand-dark, #092655);
    border-color: var(--c-brand-dark, #092655);
}
.universalis-announcements__prev svg,
.universalis-announcements__next svg {
    width: 20px;
    height: 20px;
}
/* Swiper marks the unreachable arrow disabled (loop:false). */
.universalis-announcements__slider .swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* Pagination: SQUARE bullets, muted at rest, brand when active. */
.universalis-announcements__slider .swiper-pagination {
    position: absolute;
    bottom: 28px;
    left: auto;
    right: 28px;
    width: auto;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}
.universalis-announcements__slider .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0;
    border-radius: 0;
    background: var(--c-surface-tint, #d8dfeb);
    opacity: 1;
    transition: background-color 0.2s ease;
}
.universalis-announcements__slider .swiper-pagination-bullet-active {
    background: var(--c-brand, #325390);
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 600px) {
    .universalis-announcements__overlay {
        padding: 0;
        align-items: flex-end;
    }
    .universalis-announcements__dialog {
        max-width: none;
        max-height: 92vh;
    }
    .universalis-announcements__content {
        padding: 22px 20px;
    }
    .universalis-announcements__actions .universalis-announcements__btn {
        flex: 1 1 100%;
    }
    .universalis-announcements__nav {
        left: 20px;
    }
    .universalis-announcements__slider .swiper-pagination {
        right: 20px;
    }
}

/* ── Reduced motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .universalis-announcements__fab,
    .universalis-announcements__overlay,
    .universalis-announcements__close,
    .universalis-announcements__prev,
    .universalis-announcements__next,
    .universalis-announcements__slider .swiper-pagination-bullet {
        transition: none;
    }
    .universalis-announcements__fab--attn-ring::after,
    .universalis-announcements__fab--attn-pulse,
    .universalis-announcements__fab--attn-wiggle,
    .universalis-announcements__fab--attn-bounce {
        animation: none;
    }
}