/* OAB Announcement Bar — frontend */

#oab-announcement-bar,
#oab-announcement-bar * {
    box-sizing: border-box;
}

#oab-announcement-bar {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 9990;
    width: 100%;
    height: var(--oab-announcement-h, 44px);
    overflow: hidden;
    background: var(--oab-ab-bg, #f4f4f2);
    direction: rtl;
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition:
        transform 480ms cubic-bezier(.22, 1, .36, 1),
        opacity 320ms ease;
    contain: paint;
}

body.admin-bar #oab-announcement-bar {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar #oab-announcement-bar {
        top: 46px;
    }
}

#oab-announcement-bar.is-hidden-by-scroll {
    transform: translate3d(0, -105%, 0);
    opacity: 0;
    pointer-events: none;
}

#oab-announcement-bar.is-dismissed {
    transform: translate3d(0, -105%, 0);
    opacity: 0;
    pointer-events: none;
}

.oab-ab__dismiss {
    appearance: none;
    position: absolute;
    top: 50%;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max(36px, calc(var(--oab-ab-dismiss-size, 18px) + 16px));
    height: max(36px, calc(var(--oab-ab-dismiss-size, 18px) + 16px));
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--oab-ab-dismiss-color, #fff);
    opacity: .82;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 160ms ease, transform 180ms cubic-bezier(.22,1,.36,1), background-color 160ms ease;
    -webkit-tap-highlight-color: transparent;
}

.oab-ab__dismiss--left {
    left: max(8px, env(safe-area-inset-left));
}

.oab-ab__dismiss--right {
    right: max(8px, env(safe-area-inset-right));
}

.oab-ab__dismiss:hover,
.oab-ab__dismiss:focus-visible {
    opacity: 1;
    transform: translateY(-50%) scale(1.06);
    background: rgba(255,255,255,.10);
}

.oab-ab__dismiss:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

.oab-ab__dismiss svg {
    display: block;
    width: var(--oab-ab-dismiss-size, 18px);
    height: var(--oab-ab-dismiss-size, 18px);
    fill: currentColor;
    pointer-events: none;
}

.oab-ab__inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 1180px);
    height: 100%;
    margin-inline: auto;
    padding-inline: calc(18px + var(--oab-ab-dismiss-space, 0px));
    gap: var(--oab-ab-icon-gap, 10px);
    color: inherit;
    text-decoration: none !important;
}

a.oab-ab__inner {
    cursor: pointer;
}

.oab-ab__ticker {
    position: relative;
    flex: 0 1 auto;
    width: max-content;
    max-width: min(72vw, 760px);
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

/*
 * The real messages are absolutely positioned, so they cannot size the
 * ticker by themselves. This invisible grid contributes the width of the
 * widest message and keeps icon spacing true to --oab-ab-icon-gap.
 */
.oab-ab__ticker-measure {
    display: grid;
    align-items: center;
    width: max-content;
    max-width: 100%;
    height: 100%;
    visibility: hidden;
    pointer-events: none;
}

.oab-ab__measure-item {
    grid-area: 1 / 1;
    display: block;
    width: max-content;
    max-width: 100%;
    padding-inline: 6px;
    font-size: var(--oab-ab-message-size, 14px);
    font-weight: var(--oab-ab-message-weight, 700);
    line-height: 1.35;
    white-space: nowrap;
}

.oab-ab__ticker-track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.oab-ab__message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 6px;
    color: var(--oab-ab-message-color, #2e2a27);
    font-size: var(--oab-ab-message-size, 14px);
    font-weight: var(--oab-ab-message-weight, 700);
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    backface-visibility: hidden;
    animation-duration: var(--oab-ab-cycle, 8s);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
    will-change: transform, opacity, filter;
}

.oab-ab--single-message .oab-ab__message,
.oab-ab--anim-none .oab-ab__message:first-child {
    opacity: 1;
    animation: none !important;
    transform: none !important;
    filter: none !important;
}

.oab-ab--anim-none .oab-ab__message:not(:first-child) {
    display: none;
}

.oab-ab--anim-slide-up .oab-ab__message { animation-name: oab-ab-slide-up; }
@keyframes oab-ab-slide-up {
    0%   { opacity: 0; transform: translateY(105%); }
    7%   { opacity: 1; transform: translateY(0); }
    43%  { opacity: 1; transform: translateY(0); }
    50%  { opacity: 0; transform: translateY(-105%); }
    100% { opacity: 0; transform: translateY(-105%); }
}

.oab-ab--anim-slide-down .oab-ab__message { animation-name: oab-ab-slide-down; }
@keyframes oab-ab-slide-down {
    0%   { opacity: 0; transform: translateY(-105%); }
    7%   { opacity: 1; transform: translateY(0); }
    43%  { opacity: 1; transform: translateY(0); }
    50%  { opacity: 0; transform: translateY(105%); }
    100% { opacity: 0; transform: translateY(105%); }
}

.oab-ab--anim-fade .oab-ab__message {
    animation-name: oab-ab-fade;
    animation-timing-function: ease-in-out;
}
@keyframes oab-ab-fade {
    0%   { opacity: 0; transform: translateY(12%); }
    9%   { opacity: 1; transform: translateY(0); }
    41%  { opacity: 1; transform: translateY(0); }
    50%  { opacity: 0; transform: translateY(-12%); }
    100% { opacity: 0; transform: translateY(-12%); }
}

.oab-ab--anim-flip .oab-ab__ticker { perspective: 520px; }
.oab-ab--anim-flip .oab-ab__message { animation-name: oab-ab-flip; }
@keyframes oab-ab-flip {
    0%   { opacity: 0; transform: rotateX(-90deg); }
    8%   { opacity: 1; transform: rotateX(0); }
    42%  { opacity: 1; transform: rotateX(0); }
    50%  { opacity: 0; transform: rotateX(90deg); }
    100% { opacity: 0; transform: rotateX(90deg); }
}

.oab-ab--anim-zoom .oab-ab__message { animation-name: oab-ab-zoom; }
@keyframes oab-ab-zoom {
    0%   { opacity: 0; transform: scale(.84); }
    8%   { opacity: 1; transform: scale(1); }
    42%  { opacity: 1; transform: scale(1); }
    50%  { opacity: 0; transform: scale(1.08); }
    100% { opacity: 0; transform: scale(1.08); }
}

.oab-ab--anim-blur .oab-ab__message { animation-name: oab-ab-blur; }
@keyframes oab-ab-blur {
    0%   { opacity: 0; filter: blur(7px); transform: scale(.96); }
    10%  { opacity: 1; filter: blur(0); transform: scale(1); }
    40%  { opacity: 1; filter: blur(0); transform: scale(1); }
    50%  { opacity: 0; filter: blur(7px); transform: scale(1.02); }
    100% { opacity: 0; filter: blur(7px); transform: scale(1.02); }
}

.oab-ab--anim-bounce .oab-ab__message { animation-name: oab-ab-bounce; }
@keyframes oab-ab-bounce {
    0%   { opacity: 0; transform: translateY(70%) scale(.96); }
    8%   { opacity: 1; transform: translateY(-8%) scale(1.01); }
    13%  { transform: translateY(0) scale(1); }
    42%  { opacity: 1; transform: translateY(0) scale(1); }
    50%  { opacity: 0; transform: translateY(-70%) scale(.97); }
    100% { opacity: 0; transform: translateY(-70%) scale(.97); }
}

.oab-ab--anim-slide-left .oab-ab__message { animation-name: oab-ab-slide-left; }
@keyframes oab-ab-slide-left {
    0%   { opacity: 0; transform: translateX(40%); }
    8%   { opacity: 1; transform: translateX(0); }
    42%  { opacity: 1; transform: translateX(0); }
    50%  { opacity: 0; transform: translateX(-40%); }
    100% { opacity: 0; transform: translateX(-40%); }
}

.oab-ab--anim-slide-right .oab-ab__message { animation-name: oab-ab-slide-right; }
@keyframes oab-ab-slide-right {
    0%   { opacity: 0; transform: translateX(-40%); }
    8%   { opacity: 1; transform: translateX(0); }
    42%  { opacity: 1; transform: translateX(0); }
    50%  { opacity: 0; transform: translateX(40%); }
    100% { opacity: 0; transform: translateX(40%); }
}


/* -------------------------------------------------------------------------
   Three-message timing
   -------------------------------------------------------------------------
   The base keyframes reserve roughly half a cycle for each message and are
   ideal for two messages. With three messages, each item owns one third of
   the full cycle so animations do not overlap.
   ------------------------------------------------------------------------- */

.oab-ab--message-count-3.oab-ab--anim-slide-up .oab-ab__message {
    animation-name: oab-ab-slide-up-3;
}
@keyframes oab-ab-slide-up-3 {
    0%      { opacity: 0; transform: translateY(105%); }
    5%      { opacity: 1; transform: translateY(0); }
    28.5%   { opacity: 1; transform: translateY(0); }
    33.333% { opacity: 0; transform: translateY(-105%); }
    100%    { opacity: 0; transform: translateY(-105%); }
}

.oab-ab--message-count-3.oab-ab--anim-slide-down .oab-ab__message {
    animation-name: oab-ab-slide-down-3;
}
@keyframes oab-ab-slide-down-3 {
    0%      { opacity: 0; transform: translateY(-105%); }
    5%      { opacity: 1; transform: translateY(0); }
    28.5%   { opacity: 1; transform: translateY(0); }
    33.333% { opacity: 0; transform: translateY(105%); }
    100%    { opacity: 0; transform: translateY(105%); }
}

.oab-ab--message-count-3.oab-ab--anim-fade .oab-ab__message {
    animation-name: oab-ab-fade-3;
}
@keyframes oab-ab-fade-3 {
    0%      { opacity: 0; transform: translateY(12%); }
    5.5%    { opacity: 1; transform: translateY(0); }
    28%     { opacity: 1; transform: translateY(0); }
    33.333% { opacity: 0; transform: translateY(-12%); }
    100%    { opacity: 0; transform: translateY(-12%); }
}

.oab-ab--message-count-3.oab-ab--anim-flip .oab-ab__message {
    animation-name: oab-ab-flip-3;
}
@keyframes oab-ab-flip-3 {
    0%      { opacity: 0; transform: rotateX(-90deg); }
    5%      { opacity: 1; transform: rotateX(0); }
    28.5%   { opacity: 1; transform: rotateX(0); }
    33.333% { opacity: 0; transform: rotateX(90deg); }
    100%    { opacity: 0; transform: rotateX(90deg); }
}

.oab-ab--message-count-3.oab-ab--anim-zoom .oab-ab__message {
    animation-name: oab-ab-zoom-3;
}
@keyframes oab-ab-zoom-3 {
    0%      { opacity: 0; transform: scale(.84); }
    5%      { opacity: 1; transform: scale(1); }
    28.5%   { opacity: 1; transform: scale(1); }
    33.333% { opacity: 0; transform: scale(1.08); }
    100%    { opacity: 0; transform: scale(1.08); }
}

.oab-ab--message-count-3.oab-ab--anim-blur .oab-ab__message {
    animation-name: oab-ab-blur-3;
}
@keyframes oab-ab-blur-3 {
    0%      { opacity: 0; filter: blur(7px); transform: scale(.96); }
    6%      { opacity: 1; filter: blur(0); transform: scale(1); }
    27.5%   { opacity: 1; filter: blur(0); transform: scale(1); }
    33.333% { opacity: 0; filter: blur(7px); transform: scale(1.02); }
    100%    { opacity: 0; filter: blur(7px); transform: scale(1.02); }
}

.oab-ab--message-count-3.oab-ab--anim-bounce .oab-ab__message {
    animation-name: oab-ab-bounce-3;
}
@keyframes oab-ab-bounce-3 {
    0%      { opacity: 0; transform: translateY(70%) scale(.96); }
    5%      { opacity: 1; transform: translateY(-8%) scale(1.01); }
    9%      { opacity: 1; transform: translateY(0) scale(1); }
    28%     { opacity: 1; transform: translateY(0) scale(1); }
    33.333% { opacity: 0; transform: translateY(-70%) scale(.97); }
    100%    { opacity: 0; transform: translateY(-70%) scale(.97); }
}

.oab-ab--message-count-3.oab-ab--anim-slide-left .oab-ab__message {
    animation-name: oab-ab-slide-left-3;
}
@keyframes oab-ab-slide-left-3 {
    0%      { opacity: 0; transform: translateX(40%); }
    5%      { opacity: 1; transform: translateX(0); }
    28.5%   { opacity: 1; transform: translateX(0); }
    33.333% { opacity: 0; transform: translateX(-40%); }
    100%    { opacity: 0; transform: translateX(-40%); }
}

.oab-ab--message-count-3.oab-ab--anim-slide-right .oab-ab__message {
    animation-name: oab-ab-slide-right-3;
}
@keyframes oab-ab-slide-right-3 {
    0%      { opacity: 0; transform: translateX(-40%); }
    5%      { opacity: 1; transform: translateX(0); }
    28.5%   { opacity: 1; transform: translateX(0); }
    33.333% { opacity: 0; transform: translateX(40%); }
    100%    { opacity: 0; transform: translateX(40%); }
}

/* -------------------------------------------------------------------------
   Continuous marquee
   -------------------------------------------------------------------------
   The track contains two identical groups. JavaScript measures the exact
   pixel width of the first group and animates by precisely that distance.
   This avoids the old 50%-of-track approximation, which could create gaps,
   clipping, or a visible jump on wide screens and in the admin preview.
   ------------------------------------------------------------------------- */
.oab-ab--anim-marquee-left .oab-ab__ticker,
.oab-ab--anim-marquee-right .oab-ab__ticker {
    flex: 1 1 auto;
    width: min(82vw, 960px);
    max-width: min(82vw, 960px);
    min-width: 120px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.oab-ab--anim-marquee-left .oab-ab__ticker-track,
.oab-ab--anim-marquee-right .oab-ab__ticker-track {
    position: relative;
    inset: auto;
    display: flex;
    align-items: center;
    width: max-content;
    min-width: 0;
    height: 100%;
    gap: 0;
    direction: ltr;
    animation-duration: var(--oab-ab-cycle, 8s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
    will-change: transform;
}

.oab-ab--anim-marquee-left.is-marquee-ready .oab-ab__ticker-track,
.oab-ab--anim-marquee-right.is-marquee-ready .oab-ab__ticker-track,
.oab-ab-preview.oab-ab--anim-marquee-left.is-marquee-ready .oab-ab__ticker-track,
.oab-ab-preview.oab-ab--anim-marquee-right.is-marquee-ready .oab-ab__ticker-track {
    animation-play-state: running;
}

.oab-ab--anim-marquee-left .oab-ab__ticker-track { animation-name: oab-ab-marquee-left; }
.oab-ab--anim-marquee-right .oab-ab__ticker-track { animation-name: oab-ab-marquee-right; }

.oab-ab__marquee-group {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: max-content;
    min-width: max-content;
    height: 100%;
    gap: 44px;
    padding-inline: 22px;
    direction: ltr;
}

.oab-ab--anim-marquee-left .oab-ab__message,
.oab-ab--anim-marquee-right .oab-ab__message {
    position: relative;
    inset: auto;
    display: inline-flex;
    flex: 0 0 auto;
    width: max-content;
    height: 100%;
    min-width: max-content;
    opacity: 1;
    direction: rtl;
    unicode-bidi: plaintext;
    animation: none !important;
}

@keyframes oab-ab-marquee-left {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(var(--oab-ab-marquee-distance-negative, -300px), 0, 0); }
}

@keyframes oab-ab-marquee-right {
    from { transform: translate3d(var(--oab-ab-marquee-distance-negative, -300px), 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

.oab-ab__icon {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--oab-ab-icon-size, 20px);
    height: var(--oab-ab-icon-size, 20px);
    flex: 0 0 var(--oab-ab-icon-size, 20px);
    line-height: 0;
}

.oab-ab__icon--right,
.oab-ab__icon--left {
    margin: 0;
}

.oab-ab__icon img,
.oab-ab__icon svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
 * Uploaded inline SVGs are normalized server-side and have generic Illustrator
 * classes removed after their safe fill/stroke rules are inlined. This prevents
 * unrelated site-wide .st0/.st1 rules from recoloring announcement icons.
 */
.oab-ab__icon svg {
    overflow: visible;
}

/* =========================================================
   DECORATION LAYER
   ---------------------------------------------------------
   Decorations span the whole banner. JavaScript measures the
   actual ticker + icon envelope and keeps a configurable safe
   gap around it, so large monitors do not push all decoration
   to the far edges.
   ========================================================= */
.oab-ab__decor-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.oab-ab__particle {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: var(--oab-ab-deco-opacity, .42);
    user-select: none;
    transform-origin: center;
    will-change: transform, opacity;
}

.oab-ab__particle svg,
.oab-ab__particle img {
    display: block;
    width: 100%;
    height: 100%;
}

.oab-ab__particle img {
    object-fit: contain;
}

.oab-ab__particle--float {
    animation: oab-ab-deco-float var(--particle-duration, 8s) ease-in-out infinite alternate;
}

.oab-ab__particle--fall {
    animation: oab-ab-deco-fall var(--particle-duration, 7s) linear infinite;
}

.oab-ab__particle--twinkle {
    animation: oab-ab-deco-twinkle var(--particle-duration, 3.6s) ease-in-out infinite;
}

.oab-ab__particle--fish {
    animation: oab-ab-deco-fish var(--particle-duration, 8s) ease-in-out infinite alternate;
}

.oab-ab__particle--custom {
    filter: none;
}

@keyframes oab-ab-deco-float {
    from { transform: translate3d(-5px, 4px, 0) rotate(-7deg) scale(.96); }
    to   { transform: translate3d(9px, -4px, 0) rotate(8deg) scale(1.05); }
}

@keyframes oab-ab-deco-fall {
    0%   { transform: translate3d(0, -170%, 0) rotate(0); opacity: 0; }
    12%  { opacity: var(--oab-ab-deco-opacity, .42); }
    88%  { opacity: var(--oab-ab-deco-opacity, .42); }
    100% { transform: translate3d(var(--particle-drift, 16px), 220%, 0) rotate(220deg); opacity: 0; }
}

@keyframes oab-ab-deco-twinkle {
    0%, 100% { transform: scale(.72) rotate(0); opacity: .10; }
    50%      { transform: scale(1.08) rotate(20deg); opacity: var(--oab-ab-deco-opacity, .42); }
}

@keyframes oab-ab-deco-fish {
    from { transform: translate3d(-10px, 2px, 0) rotate(-3deg); }
    to   { transform: translate3d(17px, -2px, 0) rotate(3deg); }
}

/* Custom pattern mode fills the complete bar but masks a dynamic safe zone
   around the actual message/icon content. */
.oab-ab--decoration-custom .oab-ab__decor-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--oab-ab-custom-decoration, none);
    background-repeat: repeat;
    background-position: center;
    background-size: var(--oab-ab-deco-size, 84px) auto;
    opacity: var(--oab-ab-deco-opacity, .42);
    -webkit-mask-image: linear-gradient(
        to right,
        #000 0,
        #000 var(--oab-ab-safe-left, 38%),
        transparent var(--oab-ab-safe-left, 38%),
        transparent var(--oab-ab-safe-right, 62%),
        #000 var(--oab-ab-safe-right, 62%),
        #000 100%
    );
    mask-image: linear-gradient(
        to right,
        #000 0,
        #000 var(--oab-ab-safe-left, 38%),
        transparent var(--oab-ab-safe-left, 38%),
        transparent var(--oab-ab-safe-right, 62%),
        #000 var(--oab-ab-safe-right, 62%),
        #000 100%
    );
}

@media (max-width: 767px) {
    .oab-ab__inner { padding-inline: calc(10px + var(--oab-ab-dismiss-space, 0px)); }

    .oab-ab--anim-marquee-left .oab-ab__ticker,
    .oab-ab--anim-marquee-right .oab-ab__ticker {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        min-width: 80px;
    }

    .oab-ab__message {
        font-size: var(--oab-ab-message-size-mobile, 13px);
        padding-inline: 3px;
    }

    .oab-ab__measure-item {
        font-size: var(--oab-ab-message-size-mobile, 13px);
        padding-inline: 3px;
    }
    .oab-ab__icon { transform: scale(.92); }
}

@media (prefers-reduced-motion: reduce) {
    #oab-announcement-bar,
    .oab-ab__message,
    .oab-ab__ticker-track,
    .oab-ab__particle {
        animation: none !important;
        transition-duration: 1ms !important;
    }
    .oab-ab__message { display: none !important; }
    .oab-ab__message:first-child {
        display: flex !important;
        position: absolute !important;
        inset: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .oab-ab__particle { opacity: .12 !important; }
}

/* Responsive copy overrides. Desktop copy is the default; the optional mobile
   override is only exposed at the small-screen breakpoint. */
.oab-ab__copy {
    display: inline;
}

.oab-ab__copy--mobile {
    display: none;
}

@media (max-width: 767px) {
    .oab-ab__copy--desktop {
        display: none;
    }

    .oab-ab__copy--mobile {
        display: inline;
    }
}