/* ============================================
   ANNOUNCEMENT BAR (ARKAN-205)
   ============================================
   The moving trust bar from the "Qtrshoe Announcement Bar" design, as the
   top row of the header (inc/admin/admin-sale-campaign.php). It is rendered
   inside the headers themselves, so it sticks with the header, slides away
   when the header hides and comes back down with it:

     .qs-announcement--header        every page's site header
     .qs-announcement--hero-desktop  homepage transparent header
     .qs-announcement--hero-mobile   homepage phone hero header

   All three are the same black bar, so it keeps its look while the homepage
   scrolls from its hero header to the site header.

   One message, "Fast delivery & easy returns • Your safest shopping", sits
   sixteen times in one track, a small grey dot after each copy. The track
   slides by one design group per loop, at the design's speed: desktop three
   copies in 40s, phones two copies in 22s. Only transform moves, so the
   browser animates it on the GPU. */

:root {
    --qs-announcement-height: 28px;   /* design: 6px padding + 16px line + 6px */
    --qs-announcement-offset: 0px;
}

@media (max-width: 1023px) {
    :root {
        --qs-announcement-height: 32px;   /* design: 9px padding + 14px line + 9px */
    }
}

/* The site header is taller by the bar; page content that sticks a set
   distance below the header moves down with it. */
:root:has(.qs-announcement--header:not([hidden])) {
    --qs-announcement-offset: var(--qs-announcement-height);
}

.qs-announcement[hidden] {
    display: none;
}

/* Shift = copies per loop ÷ QATARSHOES_ANNOUNCEMENT_COPIES (16).
   Speed = the design's, in px per second (its English group per loop time):
   js/announcement-bar.js sets each loop's time from it, so every language
   moves at the same speed. The durations here apply without the script. */
.qs-announcement {
    --qs-ab-gap: 56px;
    --qs-ab-shift: -18.75%;           /* three of the sixteen copies */
    --qs-ab-speed: 41.71406;          /* 1668.5625px per 40s */
    --qs-ab-duration: 40s;
}

@media (max-width: 1023px) {
    .qs-announcement {
        --qs-ab-gap: 28px;
        --qs-ab-shift: -12.5%;            /* two of the sixteen copies */
        --qs-ab-speed: 39.31534;          /* 864.9375px per 22s */
        --qs-ab-duration: 22s;
    }
}

/* Every placement: the design's black bar with white text */
.qs-announcement-bar {
    display: flex;
    align-items: center;
    height: var(--qs-announcement-height);
    overflow: hidden;
    box-sizing: border-box;
    background: #111111;
    color: #ffffff;
}

.qs-announcement-track {
    display: flex;
    flex: none;
    width: max-content;
    animation: qs-announcement-scroll var(--qs-ab-duration) linear infinite;
}

/* One copy: the message, a gap, the dot, a gap */
.qs-announcement-set {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--qs-ab-gap);
    padding-inline-end: var(--qs-ab-gap);
}

.qs-announcement-item {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.qs-announcement-dot {
    flex: none;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #6e6e6e;
}

@media (max-width: 1023px) {
    .qs-announcement-item {
        font-size: 11px;
    }
}

/* Arabic (the design shows English only): the site's Arabic typeface
   (rtl-overrides.css); no capitals and no Latin tracking, so a size up */
html[dir="rtl"] .qs-announcement-item {
    font-family: 'IBM Plex Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    letter-spacing: 0;
}

@keyframes qs-announcement-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--qs-ab-shift)); }
}

/* Right to left: the messages enter from the left */
@keyframes qs-announcement-scroll-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * var(--qs-ab-shift))); }
}

html[dir="rtl"] .qs-announcement-track {
    animation-name: qs-announcement-scroll-rtl;
}

/* Stops while the mouse is over it, as in the design. Only for a real
   pointer: on touch screens a tap would leave it stuck in the hover state. */
@media (hover: hover) {
    .qs-announcement-bar:hover .qs-announcement-track {
        animation-play-state: paused;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qs-announcement-track {
        animation: none;
    }
}

/* The phone hero header is positioned at the top of its box; it starts
   below the bar instead. Desktop uses the transparent header's own bar. */
.qs-announcement--hero-mobile:not([hidden]) ~ .mobile-top-header {
    top: var(--qs-announcement-height);
}

@media (min-width: 1024px) {
    .qs-announcement--hero-mobile {
        display: none;
    }
}

/* --- Homepage, desktop: one bar that never moves -------------------------
   Past the hero, the homepage fades out its transparent header and slides the
   site header (#homepage-sticky-header, template-home.php) down from above the
   screen — and back on the way up. Each header had its own copy of the bar,
   so for that 0.3s the bar slid off and came back: a visible jump.

   Instead the transparent header's bar stays at the top the whole time (only
   its other rows fade), the site header's own copy is left out, and the site
   header — like the Explore tabs clone — slides in below the bar and passes
   under it. */
@media (min-width: 1024px) {
    .homepage-desktop-header:has(> .qs-announcement) {
        z-index: 1001;   /* above #homepage-sticky-header (1000) and the tabs clone (201) */
    }

    .homepage-desktop-header.hidden:has(> .qs-announcement) {
        opacity: 1;
        visibility: visible;
        pointer-events: none;
    }

    .homepage-desktop-header:has(> .qs-announcement) > :not(.qs-announcement) {
        transition: opacity var(--transition-normal, 0.3s ease),
                    visibility var(--transition-normal, 0.3s ease);
    }

    .homepage-desktop-header.hidden:has(> .qs-announcement) > :not(.qs-announcement) {
        opacity: 0;
        visibility: hidden;
    }

    .homepage-desktop-header.hidden > .qs-announcement {
        pointer-events: auto;
    }

    body:has(.homepage-desktop-header > .qs-announcement) #homepage-sticky-header {
        top: var(--qs-announcement-height) !important;   /* the ready-to-ship template pins it with top: 0 !important */
    }

    body:has(.homepage-desktop-header > .qs-announcement) #homepage-sticky-header .qs-announcement {
        display: none;
    }

    body:has(.homepage-desktop-header > .qs-announcement) .category-explore-sticky-clone {
        top: var(--qs-announcement-height);
    }
}

/* --- Sticky page content: keep the same gap below the taller header --- */
html .pp-sidebar-nav {
    top: calc(120px + var(--qs-announcement-offset));
}

html #cart-summary {
    top: calc(100px + var(--qs-announcement-offset));
}

@media (max-width: 767px) {
    html .faq-header {
        top: calc(54px + var(--qs-announcement-offset));
    }
}