/* BHS shared site chrome: ticker, and the layout contract the cart bridge reads.
 *
 * Deliberately a separate file from cart.css. The Shopify storefront needs the
 * ticker but must NOT load the cart drawer (Shopify has its own), so the shared
 * chrome and the cart bridge stay independently loadable.
 *
 * Prefix is bhs-ui-*. The cart bridge keeps bhs-scb-*.
 */

/* ------- Shared layout contract -------
 * Anything pinned to the top of the viewport reads --bhs-top-offset instead of
 * hardcoding a value. The ticker sets it when present. The WP admin bar adds to
 * it. Without this the ticker and the cart icons occupy the same space.
 */

:root {
    /* Total space consumed at the top of the viewport: admin bar plus ticker.
     * Read this for anything that should sit BELOW the ticker (the cart icons). */
    --bhs-top-offset: 0px;

    /* Admin bar only. Read this for modal surfaces that should cover the ticker
     * but must not be sliced by the WP admin bar (the cart drawer). */
    --bhs-admin-offset: 0px;

    --bhs-ticker-height: 40px;

    /* One z-index scale, defined once, so the ticker, drawer, and future search
     * and popup surfaces cannot fight. WP admin bar sits at 99999 and is left
     * above everything deliberately: it is an editor tool, not site chrome. */
    --bhs-z-ticker: 9990;
    --bhs-z-icons: 9999;
    --bhs-z-backdrop: 10000;
    --bhs-z-drawer: 10001;
    --bhs-z-popup: 10500;
}

body.admin-bar {
    --bhs-top-offset: 32px;
    --bhs-admin-offset: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        --bhs-top-offset: 46px;
        --bhs-admin-offset: 46px;
    }
}

/* ------- Ticker ------- */

/* The container is rendered server side (wp_body_open) so its height is reserved
 * before JS runs. Injecting it client side would shift the whole page on every
 * load. It stays height-reserved but invisible until hydrated, so there is no
 * flash of unstyled text and no shift either way.
 */

.bhs-ui-ticker {
    position: relative;
    z-index: var(--bhs-z-ticker);
    height: var(--bhs-ticker-height);
    box-sizing: border-box;
    background: #111111;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 48px;
    visibility: hidden;
}

.bhs-ui-ticker.is-ready {
    visibility: visible;
}

/* Dismissed: collapse the reserved space and release the offset. */
.bhs-ui-ticker.is-dismissed {
    display: none;
}

.bhs-ui-ticker__viewport {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Messages are stacked in the same spot, so the fade must be sequential, not a
 * crossfade. A symmetric crossfade puts both strings at ~50% opacity on top of
 * each other at the midpoint, which for centered text reads as garbled overlap.
 * The outgoing one clears first, then the incoming one starts. */
.bhs-ui-ticker__message {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.bhs-ui-ticker__message.is-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease 0.22s, transform 0.3s ease 0.22s;
    pointer-events: auto;
}

.bhs-ui-ticker__message a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bhs-ui-ticker__message a:hover {
    opacity: 0.75;
}

.bhs-ui-ticker__close {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    opacity: 0.7;
}

.bhs-ui-ticker__close:hover,
.bhs-ui-ticker__close:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
}

.bhs-ui-ticker__close svg {
    width: 12px;
    height: 12px;
}

@media (max-width: 600px) {
    .bhs-ui-ticker {
        font-size: 12px;
        padding: 0 40px 0 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bhs-ui-ticker__message {
        transition: none;
        transform: none;
    }

    /* Also clears the staggered delay above, so the swap is instant rather than
     * leaving a gap where no message is visible. */
    .bhs-ui-ticker__message.is-active {
        transition: none;
        transform: none;
    }
}