/**
 * BW Section Nav — sticky in-page navigation.
 *
 * Scoped under .elementor-widget-bw-section-nav so the rules outrank the
 * theme's link styling, and kept at parity with the weight Elementor generates
 * from the controls so nothing is locked out.
 */

.elementor-widget-bw-section-nav {
    --bw-blue: #005eb8;
    --bw-orange: #f28120;
    --bw-ink: #101720;
    --bw-mute: #8a95a1;
    --bw-line: #e2e6ea;
}

.elementor-widget-bw-section-nav * {
    box-sizing: border-box;
}

.elementor-widget-bw-section-nav .bw-nav {
    position: relative;   /* containing block for the edge fades */
    background: #fff;
    border-top: 1px solid var(--bw-line);
    border-bottom: 1px solid var(--bw-line);
    width: 100%;
}

/* ----------------------------------------------------------- pinning --- *
 * Two methods, because CSS sticky cannot work in every layout.
 *
 * CSS sticky travels only inside its parent's box. This nav sits in an
 * .elementor-widget-container exactly as tall as itself, so a sticky rule on
 * .bw-nav has nowhere to go. Sticky mode therefore puts the rule on the
 * WIDGET WRAPPER, whose parent is the Elementor container — taller, so there
 * is room. It still fails if any ancestor has overflow hidden, which is why
 * the pinned method exists.                                                */
.elementor-widget-bw-section-nav.bw-nav-host {
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Pinned: JS switches this on past the resting position, and a spacer of
   equal height holds the gap so the page does not jump. */
.elementor-widget-bw-section-nav .bw-nav.is-pinned {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 50;
    box-shadow: 0 2px 10px rgba(16, 23, 32, .08);
}

.elementor-widget-bw-section-nav .bw-nav-spacer {
    display: block;
}

.elementor-widget-bw-section-nav .bw-nav-spacer[hidden] {
    display: none;
}

/* ------------------------------------------------------- edge fades --- *
 * A scrollable strip has to look scrollable. The scrollbar below is 3px on
 * desktop and absent on iOS, so the links simply run off the right edge with
 * nothing to suggest there is more. These fade in and out with the scroll
 * position, so the affordance disappears once you reach the end.          */
.elementor-widget-bw-section-nav .bw-nav::before,
.elementor-widget-bw-section-nav .bw-nav::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 46px;
    pointer-events: none;   /* never intercept a tap meant for a link */
    opacity: 0;
    transition: opacity .18s ease;
    z-index: 2;
}

.elementor-widget-bw-section-nav .bw-nav::before {
    left: 0;
    background: linear-gradient(to right, #fff 12%, rgba(255, 255, 255, 0));
}

.elementor-widget-bw-section-nav .bw-nav::after {
    right: 0;
    background: linear-gradient(to left, #fff 12%, rgba(255, 255, 255, 0));
}

.elementor-widget-bw-section-nav .bw-nav.has-start::before,
.elementor-widget-bw-section-nav .bw-nav.has-end::after {
    opacity: 1;
}

.elementor-widget-bw-section-nav .bw-nav-inner {
    display: flex;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

/* the horizontal scrollbar is noise on desktop; the list is still swipeable,
   and the edge fades above are what actually advertise that */
.elementor-widget-bw-section-nav .bw-nav-inner::-webkit-scrollbar {
    height: 3px;
}

.elementor-widget-bw-section-nav .bw-nav-inner::-webkit-scrollbar-thumb {
    background: var(--bw-line);
}

@media (max-width: 767px) {
    /* On a phone the fade carries the message on its own, and a visible
       scrollbar under a pinned bar just looks like a rendering artefact. */
    .elementor-widget-bw-section-nav .bw-nav-inner {
        scrollbar-width: none;
    }

    .elementor-widget-bw-section-nav .bw-nav-inner::-webkit-scrollbar {
        height: 0;
    }

    .elementor-widget-bw-section-nav .bw-nav-inner a {
        padding: 15px 16px;
    }

    /* room for the fade so the last link is never half-buried under it */
    .elementor-widget-bw-section-nav .bw-nav-inner::after {
        content: "";
        flex: 0 0 18px;
    }
}

.elementor-widget-bw-section-nav .bw-nav-inner a {
    display: flex;
    align-items: center;
    padding: 17px 20px;
    font: 800 11.5px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--bw-mute);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.elementor-widget-bw-section-nav .bw-nav-inner a:hover {
    color: var(--bw-blue);
    border-bottom-color: var(--bw-orange);
}

.elementor-widget-bw-section-nav .bw-nav-inner a.is-on {
    color: var(--bw-blue);
    border-bottom-color: var(--bw-orange);
}

.elementor-widget-bw-section-nav .bw-nav-inner a:focus-visible {
    outline: 2px solid var(--bw-blue);
    outline-offset: -3px;
}

/* [hidden] loses to display:flex on its own — the attribute is how the script
   drops links whose section the theme has hidden, so it has to win */
.elementor-widget-bw-section-nav .bw-nav-inner a[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .elementor-widget-bw-section-nav .bw-nav-inner a {
        padding: 14px 15px;
        font-size: 11px;
        letter-spacing: 1px;
    }
}