/**
 * Urban Jump Bar
 *
 * @package   urban-jumpbar
 *
 * Shared sticky in-page navigation. Collection landing pages introduced it
 * (Urban-HTML-2025/collections/urban-collections.css); it moved here so any
 * page can carry one. Behaviour lives in urban-jumpbar.js and is
 * selector-driven, so a page without .urban_jumpbar costs nothing.
 *
 * Two things are deliberately NOT breakpoints. The chevron + horizontal
 * scroll layout is switched on by the script when the row actually
 * overflows (.is_scrollable), so editing a button label never invalidates
 * a hand-measured media query. And the bar has no fixed height: padding
 * sizes it, the script measures whatever that comes to, and publishes it
 * as --urban-jumpbar-offset for the jump targets to clear.
 *
 * Until the copy in urban-collections.css is deleted, collection pages load
 * both. This sheet prints later, so it wins every tie: edit the rules here,
 * not there.
 */

.urban_jumpbar_wrapper {
    position: relative;
    margin-top: 0;
    z-index: 10100;
    width: 100%;
    max-width: var(--page-width, 1774px);
}

.urban_jumpbar {
    position: absolute;
    /* Shrink-wrap. left/right:0 plus auto margins centre the bar in BOTH the
       absolute and the fixed state without a translateX - the reveal and
       auto-hide animations own `transform`, so anything parked there would be
       overwritten by the script. */
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
    max-width: min(100%, var(--page-width, 1774px));
    transform: translateY(-100%);
    z-index: 10110;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.6vw, 28px);
    padding: 10px clamp(14px, 1.4vw, 22px);
    /* Frosted panel rather than a solid slab: translucent in both themes, the
       blur keeping the labels legible over whatever scrolls underneath. */
    background: light-dark( rgba(255, 255, 255, 0.72), rgba(24, 24, 26, 0.68) );
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    border: 1px solid light-dark( rgba(31, 31, 31, 0.10), rgba(241, 241, 241, 0.16) );
    border-radius: var(--border-radius-large);
    opacity: 0;
    pointer-events: all;
}

.urban_jumpbar.is_fixed {
    position: fixed;
    /* Pre-script fallback only: the scroll handler sets top inline to the real
       measured nav bottom (admin bar plus whichever nav is visible). */
    top: 87px;
    /* box-shadow, not filter: drop-shadow - a `filter` on the same element
       would take the backdrop-filter down with it. */
    box-shadow: 0 6px 24px light-dark( rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.45) );
    opacity: 1;
    transition: opacity .3s ease, transform .3s ease, top .3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .urban_jumpbar.is_fixed { transition: none; }
}

/* --- Idle state: the bar slides up out of the way ---------------------- */
/* It parks with its bottom edge level with the nav, so the only thing left
   on screen is the peek tab hanging below it. The bar itself stops taking
   pointer events so it cannot swallow clicks meant for the page, but the tab
   keeps them - it is the whole way back. */
.urban_jumpbar.is_idle {
    pointer-events: none;
    box-shadow: none;
}

.urban_jumpbar_peek {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 132px;
    height: 44px;
    padding: 0;
    display: none;
    cursor: pointer;
    pointer-events: auto;
    color: var(--urban-black);
    background: light-dark( rgba(255, 255, 255, 0.82), rgba(24, 24, 26, 0.78) );
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    border: 1px solid light-dark( rgba(31, 31, 31, 0.10), rgba(241, 241, 241, 0.16) );
    border-top: none;
    border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
    box-shadow: 0 4px 14px light-dark( rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.4) );
}

.urban_jumpbar.is_idle .urban_jumpbar_peek { display: block; }

/* Same masked-chevron trick as the scroll arrows, so it follows the theme. */
.urban_jumpbar_peek::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"%3E%3Cpath d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/%3E%3C/svg%3E') center / 30px 30px no-repeat;
    mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"%3E%3Cpath d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/%3E%3C/svg%3E') center / 30px 30px no-repeat;
}

.urban_jumpbar_peek:focus-visible {
    outline: 2px solid var(--urban-teal);
    outline-offset: 2px;
}

.urban_jumpbar_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    gap: 6px;
}

/* nowrap plus overflow at every width: the row never breaks to a second line,
   it scrolls instead, and the script reveals the chevrons when it has to.

   Two-class selectors on the list and its items are deliberate. Divi ships
   `.et-l--body ul { padding: 0 0 23px 1em; line-height: 26px }` at (0,1,1),
   which outranks a single-class rule on a <ul> - it was adding 23px of dead
   space under the pills and indenting them by 1em. */
.urban_jumpbar .urban_jumpbar_list {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    flex: 0 1 auto;
    min-width: 0;
    gap: clamp(6px, 0.6vw, 10px);
    /* The pills' hover shadow (global: 0 4px 10.2px 2px) paints outside the pill,
       and this is a scroll container - overflow-x: auto forces the other axis to
       a clipping value too - so the shadow was being cut off square. Padding
       gives it room INSIDE the scroll box and the matching negative margin hands
       the space straight back, so the bar keeps the size it had.

       The padding is MEASURED, not derived: a shadow's painted extent is not
       offset+spread+blur/2, which understates it. Rendering this pill on a plain
       background and reading off where it stops being darker than the page gives
       13px to each side, 17px below and 9px above. Hence 18 and 14, with a
       little to spare. Both axes matter - the side cut shows on whichever pill
       sits at the list's own edge. */
    margin: -18px -14px;
    padding: 18px 14px;
    line-height: 1;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.urban_jumpbar .urban_jumpbar_list::-webkit-scrollbar { display: none; }

.urban_jumpbar .urban_jumpbar_list li {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    line-height: 1;
    list-style: none;
}

/* Resting pill: outline only, so the frosted panel shows through it. The
   --urban-black / --urban-white pair already inverts per theme (dark on light,
   light on dark), so the whole widget flips with no second palette. */
.urban_jumpbar_list smallbutton a {
    color: var(--urban-black);
    border: 1px solid var(--urban-black);
    background-color: transparent;
    --fs-btn: var(--text-xs);
    font-size: var(--text-xs, 14px);
    padding: clamp(7px, 0.55vw, 9px) clamp(13px, 1.25vw, 20px) !important;
    white-space: nowrap;
    /* Override the global button `transition: all` - with fluid tokens that
       animates font-size and padding on every resize. Ease only the hover and
       active colour; size changes are instant. */
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.urban_jumpbar_list smallbutton a:hover {
    background-color: light-dark( rgba(31, 31, 31, 0.08), rgba(241, 241, 241, 0.12) );
}

/* aria-current is what the screen reader announces; this is the same state
   made visible, so the two can never drift apart. */
.urban_jumpbar_list smallbutton a[aria-current] {
    color: var(--urban-white);
    background-color: var(--urban-black);
    border: 1px solid var(--urban-black);
    pointer-events: none;
    cursor: default;
}

/* Arrow-only control. Two-class again so Divi cannot re-underline it. */
.urban_jumpbar .urban_jumpbar_top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--urban-black);
    background-color: transparent;
    border: 1px solid var(--urban-black);
    border-radius: var(--button-border-radius);
    font-size: var(--text-sm, 16px);
    line-height: 1;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease;
}

.urban_jumpbar .urban_jumpbar_top:hover {
    background-color: light-dark( rgba(31, 31, 31, 0.08), rgba(241, 241, 241, 0.12) );
}

.urban_jumpbar_list smallbutton a:focus-visible,
.urban_jumpbar_top:focus-visible {
    outline: 2px solid var(--urban-teal);
    outline-offset: 2px;
}

/* Jump targets clear the fixed nav AND the bar. The script publishes the real
   measured total; the fallback covers the pre-script and no-script cases. */
.urban_jumpbar_target {
    scroll-margin-top: var(--urban-jumpbar-offset, 200px);
}

/* The target gets tabindex="-1" so focus can follow the jump; it is not an
   interactive control, so it must not draw a focus ring. */
.urban_jumpbar_target:focus {
    outline: none;
}

/* --- Chevrons: shown only while the row actually overflows -------------- */
/* The arrow is a MASK filled with currentColor, not a background image: a
   black data-URI arrow would stay black in dark mode, and the SVG cannot read
   a CSS variable. Masking the pseudo-element rather than the button keeps the
   border paintable - a mask on the button clips its border away too. */
.urban_jumpbar_chevron { display: none; }

.urban_jumpbar.is_scrollable .urban_jumpbar_chevron {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    color: var(--urban-black);
    background-color: transparent;
    border: 1px solid light-dark( rgba(31, 31, 31, 0.25), rgba(241, 241, 241, 0.30) );
    border-radius: var(--button-border-radius);
    cursor: pointer;
    padding: 0;
}

.urban_jumpbar_chevron::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentColor;
}

.urban_jumpbar_chevron--left::before {
    -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"%3E%3Cpath d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/%3E%3C/svg%3E') center / 16px 16px no-repeat;
    mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"%3E%3Cpath d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/%3E%3C/svg%3E') center / 16px 16px no-repeat;
}

.urban_jumpbar_chevron--right::before {
    -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"%3E%3Cpath d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/%3E%3C/svg%3E') center / 16px 16px no-repeat;
    mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"%3E%3Cpath d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/%3E%3C/svg%3E') center / 16px 16px no-repeat;
}


/* =====================================================================
   ADDITIONS SINCE THE MOVE
====================================================================== */

/* Markup printed by jswj_urban_jumpbar_html() arrives with an inline
   height:0;overflow:hidden guard, because this sheet is enqueued from inside
   the page content and so prints at the foot of the page: until it lands, the
   guard keeps the bar from flashing up as a bare list of links. Undo it here.
   The margin in the same inline style stays - the wrapper is a zero-height
   positioning anchor, not a content section, so the global
   `.fener_page_wrapper > div` section margin must not apply to it. */
.urban_jumpbar_wrapper {
    overflow: visible !important;
}

/* Out of the fixed state the bar is transparent, but it still sat over the
   foot of the hero taking clicks and tab stops - an invisible row of links.
   visibility removes both, and switches back instantly on .is_fixed, so the
   fade-in still plays. */
.urban_jumpbar:not(.is_fixed) {
    visibility: hidden;
}

/* A pill whose section is filtered out of view (product grids) is hidden by
   the script with the hidden attribute. Two classes plus the element so no
   theme `li` display rule can bring it back. */
.urban_jumpbar .urban_jumpbar_list li[hidden] {
    display: none;
}