/*
 * PBNA Announcement Bar 1.1.1
 * Mobile Safari animation + horizontal overflow fixes.
 */

/*
 * Prevent the page itself from being dragged sideways when a max-content
 * marquee is rendered inside an Elementor flex/grid wrapper.
 * "hidden" is the broad fallback; modern browsers then use "clip".
 */
html.pbna-announcement-bar-active,
body.pbna-announcement-bar-active {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

@supports (overflow: clip) {
    html.pbna-announcement-bar-active,
    body.pbna-announcement-bar-active {
        overflow-x: clip !important;
    }
}

/* Applied by the plugin to the shortcode/Elementor wrappers around the bar. */
.pbna-announcement-bar-host {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.pbna-announcement-bar {
    --pbna-ab-bg: #0E8264;
    --pbna-ab-text: #FFFFFF;
    --pbna-ab-accent: #F2C94C;
    --pbna-ab-distance: 900px;
    --pbna-ab-duration: 20s;
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    background: var(--pbna-ab-bg);
    color: var(--pbna-ab-text);
    border: 0;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.015em;
    line-height: 1.35;
    position: relative;
    z-index: 20;
    isolation: isolate;
    contain: layout paint;
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

.pbna-announcement-bar,
.pbna-announcement-bar * {
    box-sizing: border-box;
}

.pbna-announcement-bar__viewport {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 34px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    contain: paint;
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

.pbna-announcement-bar__track {
    width: max-content;
    min-width: max-content;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    animation: pbna-ab-scroll var(--pbna-ab-duration) linear infinite;
    -webkit-animation: pbna-ab-scroll var(--pbna-ab-duration) linear infinite;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/*
 * Only pause for hover on devices that truly have a mouse/trackpad.
 * iOS Safari can leave :hover stuck after a touch, which froze the marquee.
 */
@media (hover: hover) and (pointer: fine) {
    .pbna-announcement-bar:hover .pbna-announcement-bar__track {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }
}

.pbna-announcement-bar:focus-within .pbna-announcement-bar__track,
.pbna-announcement-bar.is-paused .pbna-announcement-bar__track {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

.pbna-announcement-bar__group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    min-width: max-content;
}

.pbna-announcement-bar__item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    min-height: 34px;
    padding-left: 28px;
}

.pbna-announcement-bar__item a,
.pbna-announcement-bar__item > span:first-child {
    color: inherit;
    text-decoration: none;
}

.pbna-announcement-bar__item a {
    border-bottom: 1px solid transparent;
    transition: border-color 160ms ease, opacity 160ms ease;
}

.pbna-announcement-bar__item a:hover,
.pbna-announcement-bar__item a:focus-visible {
    color: inherit;
    border-bottom-color: var(--pbna-ab-accent);
    outline: none;
}

.pbna-announcement-bar__separator {
    flex: 0 0 auto;
    margin-left: 28px;
    color: var(--pbna-ab-accent) !important;
    font-size: 7px;
    line-height: 1;
    opacity: 0.95;
}

@keyframes pbna-ab-scroll {
    from {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(calc(-1 * var(--pbna-ab-distance)), 0, 0);
        -webkit-transform: translate3d(calc(-1 * var(--pbna-ab-distance)), 0, 0);
    }
}

@-webkit-keyframes pbna-ab-scroll {
    from {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(calc(-1 * var(--pbna-ab-distance)), 0, 0);
        -webkit-transform: translate3d(calc(-1 * var(--pbna-ab-distance)), 0, 0);
    }
}

@media (max-width: 767px) {
    .pbna-announcement-bar {
        font-size: 11.5px;
    }

    .pbna-announcement-bar__viewport,
    .pbna-announcement-bar__item {
        min-height: 34px;
    }

    .pbna-announcement-bar__item {
        padding-left: 22px;
    }

    .pbna-announcement-bar__separator {
        margin-left: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pbna-announcement-bar__track {
        animation: none;
        -webkit-animation: none;
        transform: none;
        -webkit-transform: none;
    }
}