/* ===========================================================================
   OhMyKajo - announcement bar above the header. Layer 2EJ.

   The bar loops by translating a track made of identical groups leftwards by
   exactly the width of one group, so the moment the first group leaves the
   viewport the second is sitting precisely where it started. Two groups are
   rendered server side; the script adds more when the viewport is wider than
   two of them, and sets the distance and duration it measured.

   Everything degrades: without the script the CSS fallbacks below still give a
   seamless loop, and with reduced motion the bar stops moving entirely.
   ======================================================================== */

/* The bar's height is declared rather than left to the content, because three
   other things are positioned from it: the header below it, the page wrapper
   below that, and the admin bar above. A height that depended on the font
   would move all three the moment a web font swapped in. */
:root {
    --kajo-topbar-h: 36px;
    /* Raised by the admin bar, when there is one. */
    --kajo-topbar-top: 0px;
    /* How far the header moves down: the bar's height, exactly. The header's
       top edge then meets the bar's bottom edge with nothing between them.

       An earlier version added four pixels here, to stop the logo being
       clipped - both logos are taller than the row that holds them and are
       centred, so each overhangs the top of its header by 2-3px. That worked
       and looked wrong: it left a visible light strip under the bar on every
       page. The overhang is solved by stacking order instead - see
       `--kajo-topbar-z` below - so the measurement stays exact. */
    --kajo-topbar-offset: var(--kajo-topbar-h);
}

body.admin-bar {
    --kajo-topbar-top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        /* WordPress's own breakpoint, where the admin bar grows to 46px. */
        --kajo-topbar-top: 46px;
    }
}

/* Header z-index per breakpoint, mirrored one level BELOW. The boundaries are
   the theme's own: 1025px for the desktop header, 768px for the mobile one. */
@media (max-width: 1024px) {
    :root {
        /* Theme header: 1002. */
        --kajo-topbar-z: 1001;
    }
}

@media (max-width: 767px) {
    :root {
        --kajo-topbar-h: 32px;
        /* Theme header: 1007. */
        --kajo-topbar-z: 1006;
    }
}

/* Woodmart's header is `position: fixed` at every scroll position - not sticky
   on scroll, fixed from the first paint, with z-index 390. An in-flow bar is
   therefore painted over no matter where it sits in the document: measured,
   `elementFromPoint` at the centre of the bar returned the theme's nav link.

   So the bar is fixed too, directly above the header, and the header is pushed
   down by exactly the bar's height. Both are then permanently visible, which
   is consistent with how this theme already treats its header, and there is no
   scroll position at which the two can overlap. */
.kajo-topbar {
    position: fixed;
    top: var(--kajo-topbar-top, 0px);
    left: 0;
    right: 0;
    height: var(--kajo-topbar-h);
    /* Exactly one BELOW the header, at every breakpoint.

       Woodmart gives its header three different z-indexes - measured, not
       assumed: 390 above 1025px, 1002 from 768 to 1024, and 1007 below that.
       The bar tracks whichever applies, one level under it.

       Under, not over, for two reasons that only showed up in use. The header
       is offset by exactly the bar's height, so the two boxes meet and never
       overlap - the only thing that reaches across the join is the logo, which
       overhangs its own row by 2-3px. Painted over the bar it looks
       deliberate; painted under it, the badge is sliced flat.

       And the basket and menu drawers are meant to cover everything. They sit
       above the header, so sitting below the header puts the bar below them
       too, and a drawer opens full screen again. */
    z-index: var(--kajo-topbar-z, 389);
    background: var(--kajo-topbar-bg, #132a1c);
    color: var(--kajo-topbar-fg, #fff);
    /* `contain` keeps the long track from being counted as page width - the
       track is deliberately wider than the screen and without this it would
       create a horizontal scrollbar on the document. */
    contain: content;
}

/* The header and the page below it both move down by the bar's height.

   `margin-top` rather than `top`: the theme computes its own `top` from the
   admin bar, and overwriting that would mean reproducing the calculation and
   fighting it with `!important`. On a fixed box, margin shifts the border edge
   while leaving `top` alone, so the theme keeps owning the admin-bar offset and
   this only adds the bar's height to it. */
/* Above 1025px the header is a single fixed element with no margin of its own,
   so margin is the lightest lever: it leaves the theme's `top` - and the
   admin-bar arithmetic inside it - untouched. */
@media (min-width: 1025px) {
    body.kajo-has-topbar .whb-header {
        margin-top: var(--kajo-topbar-offset);
    }

    body.kajo-has-topbar .wd-page-wrapper {
        padding-top: var(--kajo-topbar-offset);
    }

    /* Once Woodmart's sticky mode engages it adds `whb-sticked` and promotes
       `.whb-main-header` from `relative` to `fixed; top: 0.001px`. Being fixed
       it positions from the viewport, so it leaves the header's margin behind
       and lands straight on top of the bar - measured at 32..108 against a bar
       at 32..68. It needs the same shift its parent has. */
    body.kajo-has-topbar .whb-sticked .whb-main-header,
    body.kajo-has-topbar .whb-header.whb-sticked .whb-main-header {
        margin-top: var(--kajo-topbar-offset);
    }
}

/* Below 1025px an earlier layer (ohmykajo-navbar-final.css) owns mobile header
   placement and pins every part of it with `!important`, all driven from one
   custom property. The bar's height is added to that property, so the header,
   the inner `.whb-main-header` and the `.whb-general-header` row all move
   together.

   Moving them individually was tried and does not work: the row is `fixed` on
   most pages but `relative` on the home page, where the header is an overlay.
   A `top` that corrects the fixed case shifts the relative one by the same
   amount again, so the home header dropped while the rest were right. The
   property is the only lever that gets all three, on both kinds of page.

   `!important` is not habit. Verified in the live page: an identical
   declaration with HIGHER specificity, injected as the very last stylesheet,
   had no effect - a plain `82px` on `body.admin-bar.home.kajo-has-topbar` lost
   to `body.admin-bar.home` in the earlier file. Marking it important is the
   only form that applies. The cascade reason was not established; which form
   works was. */
@media (max-width: 1024px) {
    body.kajo-has-topbar,
    body.home.kajo-has-topbar {
        --kajo-admin-bar-offset: var(--kajo-topbar-offset) !important;
    }

    body.admin-bar.kajo-has-topbar,
    body.admin-bar.home.kajo-has-topbar {
        --kajo-admin-bar-offset: calc(46px + var(--kajo-topbar-offset)) !important;
    }

    /* The drawers consume the same property, and they must NOT be offset by
       it: a basket or menu drawer is meant to cover the screen, and taking the
       bar's height off the top left a strip of page showing above it. They are
       pinned back to the full viewport here.

       This is why the property could not simply be left alone instead - it is
       the only thing that positions all three header layers, and the only
       thing that positions the drawers. The header needs the shift; the
       drawers need to ignore it. */
    body.kajo-has-topbar .mobile-nav.wd-side-hidden,
    body.kajo-has-topbar.home .mobile-nav.wd-side-hidden,
    body.kajo-has-topbar .cart-widget-side,
    body.kajo-has-topbar .wd-side-hidden.wd-left,
    body.kajo-has-topbar .wd-side-hidden.wd-right {
        top: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
}

@media (min-width: 783px) and (max-width: 1024px) {
    body.admin-bar.kajo-has-topbar,
    body.admin-bar.home.kajo-has-topbar {
        --kajo-admin-bar-offset: calc(32px + var(--kajo-topbar-offset)) !important;
    }
}

/* The admin bar is `position: fixed` on a wide screen but `position: absolute`
   below 783px, so on a phone it scrolls away with the page. A bar anchored
   beneath it would hang in mid-air, and the header - which returns to the top
   as soon as the admin bar is gone - would run into it.

   Once the page has scrolled there is no admin bar left to clear, so the bar
   returns to the very top and the header clears only the bar.

   Logged-in administrators only; a customer never has an admin bar. */
@media screen and (max-width: 782px) {
    body.admin-bar.kajo-has-topbar.kajo-glass-nav-scrolled {
        --kajo-topbar-top: 0px;
        --kajo-admin-bar-offset: var(--kajo-topbar-offset) !important;
    }
}

/* Below 1025px Woodmart makes two INNER header layers `position: fixed` as
   well - measured: `.whb-main-header` and `.whb-row.whb-general-header` both
   sit at `top: 0` regardless of where their parent is. Being fixed, they
   position from the viewport and simply ignore the shift applied to the
   header around them, which is why the mobile logo was being clipped by the
   bar while the header itself had moved correctly out of the way.

   Each therefore needs the same shift. Above 1025px these two are `relative`
   and already travel with the header, so shifting them there would move them
   twice - hence the query. */

.kajo-topbar__viewport {
    display: block;
    overflow: hidden;
    padding: 0;
    color: inherit;
    text-decoration: none;
    /* Edge to edge: a hairline of page background either side of a full-bleed
       bar reads as a rendering fault. */
    width: 100%;
    height: 100%;
}

a.kajo-topbar__viewport:hover .kajo-topbar__item,
a.kajo-topbar__viewport:focus-visible .kajo-topbar__item {
    text-decoration: underline;
}

.kajo-topbar__viewport:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.kajo-topbar__track {
    display: flex;
    height: 100%;
    align-items: center;
    /* Without this the flex line shrinks to the container and the groups
       squash instead of running off the edge. */
    width: max-content;
    will-change: transform;
    animation: kajo-topbar-run var(--kajo-topbar-duration, 24s) linear infinite;
}

.kajo-topbar__viewport:hover .kajo-topbar__track,
.kajo-topbar__viewport:focus-within .kajo-topbar__track {
    /* Pause so a message can actually be read, and so a linked bar can be
       clicked without chasing it. */
    animation-play-state: paused;
}

.kajo-topbar__group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 100%;
}

.kajo-topbar__item {
    display: block;
    padding: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: var(--kajo-topbar-h);
    letter-spacing: .01em;
    /* A running bar must never wrap - a second line would change the bar's
       height mid-animation and shift the whole page. */
    white-space: nowrap;
}

.kajo-topbar__sep {
    display: block;
    flex: 0 0 auto;
    /* The dot is drawn rather than typed, so it cannot be picked up by a
       translation pass or read out as a character. */
    width: 4px;
    height: 4px;
    margin: 0 22px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}

/* The default travel is one of two groups: exactly half the track. The script
   replaces this with the measured width of a single group once it knows how
   many groups it ended up with. */
@keyframes kajo-topbar-run {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-1 * var(--kajo-topbar-shift, 50%)), 0, 0); }
}

/* Arabic runs the other way. The track is laid out right to left by the
   document direction, so the travel has to be mirrored or the bar would scroll
   away from the reading direction. */
[dir="rtl"] .kajo-topbar__track ,
body.kajo-rtl .kajo-topbar__track{
    animation-name: kajo-topbar-run-rtl;
}

@keyframes kajo-topbar-run-rtl {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(var(--kajo-topbar-shift, 50%), 0, 0); }
}

@media (max-width: 767px) {
    .kajo-topbar__item {
        font-size: 11.5px;
    }

    .kajo-topbar__sep {
        margin: 0 16px;
    }
}

/* A bar that moves on its own is exactly what this setting is asking about.
   The animation stops and the duplicate groups are removed from the flow, so
   what remains is one static, centred line. */
@media (prefers-reduced-motion: reduce) {
    .kajo-topbar__track {
        animation: none;
        width: 100%;
        justify-content: center;
    }

    .kajo-topbar__group {
        /* Still readable, still centred - just not in motion. */
        justify-content: center;
        max-width: 100%;
    }

    .kajo-topbar__group ~ .kajo-topbar__group {
        display: none;
    }

    .kajo-topbar__item {
        /* Still one line: the bar has a declared height that the header and
           the page are positioned from, so wrapping here would push the two
           of them out of alignment rather than make the text bigger. A long
           sequence is ellipsised instead. */
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    .kajo-topbar__group > .kajo-topbar__sep:last-child {
        display: none;
    }
}