/**
 * Pro Switcher v15 CSS
 * Smart responsive navigation with natural button sizing
 */

/* ===== CONTAINER ===== */
.ps-switcher {
    position: relative;
    /* Prevent the element from overflowing its flex/grid parent in YOOtheme Pro
       layout cells. Without this, min-width defaults to 'auto' (= content width)
       and the nav can push past the cell boundary instead of scrolling. */
    min-width: 0;
    /* Explicitly prevent any theme or reset CSS from clipping the nav overflow.
       The scrollable nav needs overflow-x: auto on itself; if an ancestor adds
       overflow: hidden we can't escape it, but we can at least ensure this
       wrapper never contributes to the clipping chain. */
    overflow: visible;
}

/* ===== CUSTOM NAVIGATION - BASE ===== */
.ps-nav-custom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--ps-nav-row-gap, 12px) var(--ps-nav-col-gap, 12px);
}

.ps-nav-custom > li {
    margin: 0;
    padding: 0;
}

.ps-nav-custom > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--ps-nav-py, 14px) var(--ps-nav-px, 28px);
    background: var(--ps-nav-bg, transparent);
    color: var(--ps-nav-color, inherit);
    border: 1px solid var(--ps-nav-border, transparent);
    border-radius: var(--ps-nav-radius, 50px);
    font-size: var(--ps-nav-font-size, 14px);
    font-weight: var(--ps-nav-font-weight, 600);
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.ps-nav-custom > li > a:hover {
    background: var(--ps-nav-hover-bg, var(--ps-nav-bg));
    color: var(--ps-nav-hover-color, var(--ps-nav-color));
}

.ps-nav-custom > li.uk-active > a {
    background: var(--ps-nav-active-bg, #fff);
    color: var(--ps-nav-active-color, #000);
    border-color: var(--ps-nav-active-border, var(--ps-nav-active-bg));
}

.ps-nav-uppercase > li > a {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Alignment overrides */
.ps-nav-custom.uk-flex-center { justify-content: center; }
.ps-nav-custom.uk-flex-right { justify-content: flex-end; }
.ps-nav-custom.uk-child-width-expand > li { flex: 1; }
.ps-nav-custom.uk-child-width-expand > li > a { width: 100%; }

/* ===== NAV MAX WIDTH CONSTRAINT ===== */
.ps-nav-constrained {
    max-width: var(--ps-nav-max-width, none);
}

.ps-nav-constrained.ps-nav-align-center {
    margin-left: auto;
    margin-right: auto;
}

.ps-nav-constrained.ps-nav-align-left {
    margin-right: auto;
}

.ps-nav-constrained.ps-nav-align-right {
    margin-left: auto;
}

/* ===== TABLET SHRINK (≤960px) ===== */
@media (max-width: 959px) {
    .ps-nav-shrink-tablet > li > a {
        padding: var(--ps-nav-py-t, var(--ps-nav-py)) var(--ps-nav-px-t, var(--ps-nav-px));
    }

    /* Apply --ps-nav-col-gap-t whenever it is set (shrink checkbox or explicit tablet
       col-gap field). Falls back to --ps-nav-col-gap so unstyled elements are unchanged. */
    .ps-nav-custom {
        gap: var(--ps-nav-row-gap, 12px) var(--ps-nav-col-gap-t, var(--ps-nav-col-gap, 12px));
    }
}

/* ===== DESKTOP WRAP MODES ===== */

/* Force scrollable on desktop (no wrap) */
.ps-wrap-scrollable {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 5px;
}

.ps-wrap-scrollable::-webkit-scrollbar {
    height: 4px;
}

.ps-wrap-scrollable::-webkit-scrollbar-track {
    background: rgba(128,128,128,0.1);
    border-radius: 2px;
}

.ps-wrap-scrollable::-webkit-scrollbar-thumb {
    background: rgba(128,128,128,0.3);
    border-radius: 2px;
}

/* Balanced 2/3 rows — max-width constrains the nav so flex-wrap creates equal-ish rows.
   --ps-balanced-max-w is set from PHP as a heuristic (2*paddingX + 70px per button),
   then refined by JS to the exact nat/rows measurement. The CSS var prevents FOUC. */
.ps-wrap-balanced-2,
.ps-wrap-balanced-3 {
    max-width: var(--ps-balanced-max-w, 60%);
    margin-left: auto;
    margin-right: auto;
}

.ps-wrap-balanced-2 > li,
.ps-wrap-balanced-3 > li {
    flex: 0 0 auto;
}


/* ===== TABLET MODES (≤960px) ===== */
@media (max-width: 959px) {
    /* Tablet: Scrollable */
    .ps-tablet-scrollable {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start;
        padding-bottom: 5px;
        /* Space after the last button so it isn't flush against the scroll edge */
        padding-inline-end: var(--ps-nav-col-gap, 12px);
    }

    .ps-tablet-scrollable::-webkit-scrollbar {
        display: none;
    }

    .ps-tablet-scrollable > li {
        flex-shrink: 0;
    }

    /* Specificity fix: .ps-nav-custom.uk-flex-center has 2-class specificity (0,2,0).
       .ps-tablet-scrollable alone has only 1-class (0,1,0) and loses.
       The compound selector below matches 0,2,0 and wins by source order. */
    .ps-nav-custom.ps-tablet-scrollable {
        justify-content: flex-start;
    }
    
    /* Tablet: Stacked (full width) */
    .ps-tablet-stacked {
        flex-direction: column;
        align-items: stretch;
    }

    .ps-tablet-stacked > li > a {
        width: 100%;
        justify-content: center;
    }

    /* Default tablet wrap mode: override alignment class (uk-flex-center etc.) with
       flex-start so buttons wrap from the left edge. Without this, justify-content:center
       on a narrow container causes buttons to overflow symmetrically on both sides.
       Specificity 0,3,0 beats uk-flex-center (0,2,0). Scrollable and stacked modes
       are excluded — they manage their own justify-content independently. */
    .ps-nav-custom:not(.ps-tablet-scrollable):not(.ps-tablet-stacked) {
        justify-content: flex-start;
    }

}

/* Hide main nav only on genuine tablet range (640–959px), not on mobile.
   When only the tablet mode is set to dropdown, the dropdown hides itself
   below 640px (uk-visible@s), so the main nav must remain visible on mobile
   or there is no navigation at all on small screens. */
@media (min-width: 640px) and (max-width: 959px) {
    .ps-hide-tablet-only {
        display: none;
    }
}

@media (min-width: 960px) {
    .ps-hide-tablet-only {
        display: flex;
    }
}


/* ===== MOBILE MODES (≤640px) ===== */
@media (max-width: 639px) {
    /* Reduce padding on mobile */
    .ps-nav-custom > li > a {
        padding: var(--ps-nav-py-m, 10px) var(--ps-nav-px-m, 18px);
        font-size: var(--ps-nav-font-size-m, 12px);
    }

    /* Apply explicit mobile gap vars when set. Falls back to desktop values so
       elements without mobile overrides are unchanged. */
    .ps-nav-custom {
        gap: var(--ps-nav-row-gap-m, var(--ps-nav-row-gap, 12px)) var(--ps-nav-col-gap-m, var(--ps-nav-col-gap, 12px));
    }
    
    /* Mobile: Scrollable - this is the KEY one for clean mobile UX */
    .ps-mobile-scrollable {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start;
        padding-bottom: 8px;
        margin-bottom: -8px;
        /* Space after the last button so it is fully reachable when scrolled */
        padding-inline-end: var(--ps-nav-col-gap, 12px);
    }

    .ps-mobile-scrollable::-webkit-scrollbar {
        display: none;
    }

    .ps-mobile-scrollable > li {
        flex-shrink: 0;
    }

    /* Specificity fix: same pattern as tablet above — compound selector wins
       over .ps-nav-custom.uk-flex-center (both 0,2,0, this one comes later). */
    .ps-nav-custom.ps-mobile-scrollable {
        justify-content: flex-start;
    }
    
    /* Mobile: Stacked (full width buttons) */
    .ps-mobile-stacked {
        flex-direction: column;
        align-items: stretch;
    }

    .ps-mobile-stacked > li > a {
        width: 100%;
        justify-content: center;
    }

    /* Justify alignment fallback: reset flex:1 so tabs take their natural
       content width. Without this, uk-child-width-expand distributes tabs
       as equal fractions of the viewport — producing unusably narrow buttons
       and also breaking the scrollable mode (items share the viewport width
       evenly instead of overflowing it). */
    .ps-nav-custom.uk-child-width-expand > li {
        flex: 0 0 auto;
    }
    .ps-nav-custom.uk-child-width-expand > li > a {
        width: auto;
    }

    /* Default mobile wrap mode: same reasoning as the tablet rule above.
       Specificity 0,3,0 beats uk-flex-center (0,2,0). */
    .ps-nav-custom:not(.ps-mobile-scrollable):not(.ps-mobile-stacked) {
        justify-content: flex-start;
    }
}


/* ===== DYNAMIC SCROLL FADES (JS-driven) ===== */
/* Applied by JS to .ps-nav-custom when the nav actually overflows at the
   current breakpoint. Three states: right-only, left-only, both.
   Not applied at all when all buttons fit — no misleading clip. */
.ps-scroll-faded-right {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
}

.ps-scroll-faded-left {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black 100%);
    mask-image: linear-gradient(to right, transparent 0, black 40px, black 100%);
}

/* Both edges faded — compound selector wins over each single-class rule above */
.ps-scroll-faded-left.ps-scroll-faded-right {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 48px), transparent 100%);
}


/* ===== DROPDOWN NAVIGATION ===== */
.ps-nav-dropdown-wrap {
    position: relative;
}

.ps-nav-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--ps-nav-py, 14px) var(--ps-nav-px, 20px);
    background: var(--ps-nav-bg, transparent);
    color: var(--ps-nav-color, inherit);
    border: 1px solid var(--ps-nav-border, rgba(128,128,128,0.3));
    border-radius: var(--ps-nav-radius, 8px);
    font-size: var(--ps-nav-font-size, 14px);
    font-weight: var(--ps-nav-font-weight, 600);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background 0.2s;
    font-family: inherit;
}

/* ps-nav-uppercase is applied to both the nav <ul> and the dropdown wrapper
   div by the template, so this descendant selector reliably reaches the
   button and the dropdown list items. */
.ps-nav-uppercase .ps-nav-dropdown-btn,
.ps-nav-uppercase .ps-nav-dropdown-list > li > a {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ps-nav-dropdown-btn:hover,
.ps-nav-dropdown-btn:focus-visible {
    border-color: var(--ps-nav-active-border, var(--ps-nav-border));
}

/* Suppress the outline only for pointer/touch focus, not keyboard focus. */
.ps-nav-dropdown-btn:focus:not(:focus-visible) {
    outline: none;
}

.ps-nav-dropdown-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ps-nav-dropdown-icon {
    flex-shrink: 0;
    margin-left: 12px;
    opacity: 0.6;
    display: flex;
    align-items: center;
}

.ps-nav-dropdown-menu {
    padding: 8px 0;
    min-width: 100%;
    background: var(--ps-nav-active-bg, #fff);
    border-radius: var(--ps-nav-radius, 8px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.ps-nav-dropdown-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ps-nav-dropdown-list > li > a {
    display: block;
    padding: 12px 20px;
    color: var(--ps-nav-active-color, inherit);
    text-decoration: none;
    font-size: var(--ps-nav-font-size, 14px);
    font-weight: var(--ps-nav-font-weight, 500);
    transition: background 0.15s;
}

.ps-nav-dropdown-list > li > a:hover {
    background: rgba(128,128,128,0.08);
}

.ps-nav-dropdown-list > li.uk-active > a {
    background: rgba(128,128,128,0.12);
    font-weight: var(--ps-nav-font-weight, 600);
}


/* ===== VERTICAL NAVIGATION ===== */
.ps-nav-vertical {
    flex-direction: column;
    align-items: flex-start;
}

/* ===== VERTICAL LAYOUT (Left/Right Nav) ===== */
.ps-wrapper {
    display: flex;
    gap: 30px;
}

.ps-wrapper.ps-nav-right {
    flex-direction: row-reverse;
}

.ps-nav-wrap {
    flex-shrink: 0;
}

@media (max-width: 959px) {
    .ps-wrapper {
        flex-direction: column;
    }
    .ps-wrapper.ps-nav-right {
        flex-direction: column;
    }
    /* Vertical nav collapses to a horizontal row on tablet/mobile. Make it
       scrollable rather than wrapping so buttons don't stack across many lines. */
    .ps-nav-vertical {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 5px;
    }
    .ps-nav-vertical::-webkit-scrollbar {
        display: none;
    }
    .ps-nav-vertical > li {
        flex-shrink: 0;
    }
}

/* ===== UITKIT NATIVE NAV STYLES: SCROLLABLE ON TABLET AND MOBILE ===== */
/* uk-tab / uk-subnav / uk-subnav-pill inside ps-switcher have no custom responsive
   mode options, so enforce scrollable-row behaviour on small screens to prevent
   buttons overflowing the container. Scoped to .ps-switcher so other UIkit navs
   on the page are unaffected. */
@media (max-width: 959px) {
    .ps-switcher .uk-tab,
    .ps-switcher .uk-subnav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start;
        padding-bottom: 5px;
    }
    .ps-switcher .uk-tab::-webkit-scrollbar,
    .ps-switcher .uk-subnav::-webkit-scrollbar {
        display: none;
    }
    .ps-switcher .uk-tab > li,
    .ps-switcher .uk-subnav > li {
        flex-shrink: 0;
    }
}


/* ===== ACCORDION ===== */
.ps-accordion {
    padding: 0;
    margin: 0;
    list-style: none;
}

.ps-accordion > li {
    border-bottom: 1px solid rgba(128,128,128,0.2);
}

.ps-accordion > li:first-child {
    border-top: 1px solid rgba(128,128,128,0.2);
}

.ps-acc-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    font-size: var(--ps-acc-font-size, 16px);
    font-weight: var(--ps-acc-font-weight, 600);
    color: var(--ps-acc-color, inherit);
    text-decoration: none;
    transition: color 0.2s;
}

/* UIkit's .uk-accordion-title { display: block } has the same specificity (0,1,0) as
   .ps-acc-title above. When a CSS optimiser (e.g. JCH Optimize) bundles theme.css into
   a cached file that is injected after this stylesheet, UIkit wins by source order and
   breaks flex layout — causing the title text to sit at the top and the ::after chevron
   to render as a thin | (inline border-right with no width).
   This 0,2,0 rule beats UIkit's 0,1,0 regardless of load order. */
.ps-accordion .ps-acc-title {
    display: flex;
    align-items: center;
    overflow: visible; /* UIkit sets overflow:hidden for float clearance; not needed in flex */
}

/* Suppress UIkit's built-in ::before +/− icon — we supply our own ::after chevron. */
.ps-acc-title::before {
    display: none;
}

.ps-acc-title::after {
    content: "";
    display: inline-block; /* Ensures width/height apply even if parent is not flex */
    width: 12px;
    height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s;
    flex-shrink: 0;
    margin-left: 15px;
}

.uk-open > .ps-acc-title::after {
    transform: rotate(-135deg);
}

.uk-open > .ps-acc-title {
    color: var(--ps-acc-active-color, inherit);
}

.ps-acc-uppercase .ps-acc-title {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ps-acc-content {
    padding-bottom: 20px;
}

/* ===== MOBILE ACCORDION MODE ===== */
/* ps-accordion-mobile-only: shown only on mobile (≤639px), hidden on tablet+ */
.ps-accordion-mobile-only {
    display: none;
}

@media (max-width: 639px) {
    .ps-accordion-mobile-only {
        display: block;
    }

    /* Hide the tab nav and tab content when mobile accordion mode is active */
    .ps-nav-hide-mobile,
    .ps-content-hide-mobile {
        display: none !important;
    }
}

/* When Mobile Display Mode 4 (accordion) is active at any breakpoint, suppress the
   nav_mobile_mode accordion so only one accordion is ever visible at a time.
   Without this, both can appear simultaneously if the mode-4 breakpoint covers ≤639px. */
.ps-mm-accordion.ps-mm-on .ps-accordion-mobile-only {
    display: none !important;
}

/* ===== AUTOPLAY PROGRESS BAR ===== */
@keyframes ps-progress-fill {
    from { width: 0; }
    to   { width: 100%; }
}

.ps-progress {
    height: 3px;
    background: rgba(128,128,128,0.2);
    margin: 15px 0;
    border-radius: 2px;
    overflow: hidden;
}

.ps-progress-bar {
    height: 100%;
    width: 0;
    background: currentColor;
    opacity: 0.6;
}

/* ===== MEDIA ===== */
.ps-media {
    position: relative;
    overflow: hidden;
    line-height: 0;
}

.ps-media img,
.ps-media video {
    transition: transform 0.3s ease;
}

/* Max Height Constraint */
.ps-media-constrained {
    max-height: var(--ps-media-max-h, none);
    overflow: hidden;
}

.ps-media-constrained img,
.ps-media-constrained video {
    max-height: var(--ps-media-max-h, none);
}

/* Mobile max height override */
@media (max-width: 639px) {
    .ps-media-constrained {
        max-height: var(--ps-media-max-h-m, var(--ps-media-max-h, none));
    }
    
    .ps-media-constrained img,
    .ps-media-constrained video {
        max-height: var(--ps-media-max-h-m, var(--ps-media-max-h, none));
    }
}

/* Match Height - Media fills available space */
.ps-media-fill {
    display: flex;
    flex-direction: column;
}

.ps-media-fill .ps-media-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ps-media-fill .ps-media {
    flex: 1;
    display: flex;
}

.ps-media-fill .ps-media img,
.ps-media-fill .ps-media video {
    flex: 1;
    object-fit: cover;
    min-height: 0;
}

/* ===== RESPONSIVE MEDIA VISIBILITY ===== */
/* Hide the .ps-media wrapper (and its panel) at the chosen breakpoint.
   !important overrides UIkit display utilities applied by the card/tile classes. */
@media (max-width: 639px) {
    .ps-media-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 640px) and (max-width: 959px) {
    .ps-media-hide-tablet {
        display: none !important;
    }
}

/* ===== PANELS ===== */
.ps-text-panel,
.ps-media-panel {
    position: relative;
}

/* ===== ITEM ===== */
.ps-item {
    position: relative;
}

/* Content area margin */
.ps-content-area {
    margin-top: 25px;
}


/* ==========================================================================
   MOBILE LAYOUT MODES
   JS adds .ps-mm-on to the wrapper when the viewport is at/below the
   configured breakpoint. All mode styles are scoped to that compound
   selector so they are completely inert on desktop.
   ========================================================================== */

/* ===== MODE 2: SCROLLING TABS ===== */
/*
 * Active tab appears to merge into the content box below — the classic
 * browser-tab pattern. Nav becomes a single horizontal scrollable strip;
 * inactive tabs have a 3-sided border (no bottom); the active tab gets a
 * matching background so its bottom edge visually "continues" into the
 * content area whose top border overlaps by 1.5 px (margin-top: -1.5px).
 *
 * Specificity of all rules here is ≥ 0,2,0, which beats every conflicting
 * rule in the earlier sections of this file. Rules also appear LAST so they
 * win any same-specificity tie by source order.
 */

/* --- Nav strip --- */
.ps-mm-scrolltabs.ps-mm-on .ps-nav-custom {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0;                         /* remove col/row gap — tabs share borders */
    justify-content: flex-start;
    align-items: stretch;
    position: relative;
    z-index: 2;
    padding-bottom: 0;
    padding-inline-end: 0;
    /* Cancel the generic tablet/mobile gap overrides from the Responsive section */
    margin-bottom: 0;
}

.ps-mm-scrolltabs.ps-mm-on .ps-nav-custom::-webkit-scrollbar {
    display: none;
}

.ps-mm-scrolltabs.ps-mm-on .ps-nav-custom > li {
    flex-shrink: 0;
    margin: 0;
    display: flex;
}

/* Inactive tab
   Uses --ps-mm-tab-color rather than --ps-nav-color because the pill nav
   colors are designed for dark backgrounds (white text on dark pill). Mode 2
   always has a light tab bg, so we need an independent dark-on-light default. */
.ps-mm-scrolltabs.ps-mm-on .ps-nav-custom > li > a {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    min-height: 44px;               /* Apple HIG touch target */
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1.5px solid var(--ps-mm-border, rgba(128,128,128,0.25));
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: var(--ps-mm-tab-bg, rgba(128,128,128,0.05));
    color: var(--ps-mm-tab-color, #555);
    margin-right: -1.5px;           /* collapse adjacent border into one line */
    position: relative;
    z-index: 1;
    transition: background 0.2s, color 0.2s;
    will-change: background, color;
    text-decoration: none;
}

.ps-mm-scrolltabs.ps-mm-on .ps-nav-custom > li > a:hover {
    background: var(--ps-mm-tab-hover-bg, rgba(128,128,128,0.1));
    color: var(--ps-mm-tab-hover-color, #1a1a1a);
}

/* Active tab — white bg + raised z-index covers the content-area top border.
   --ps-mm-tab-active-color defaults to near-black, independent of the pill
   nav's --ps-nav-active-color which may be white (white-on-white = invisible). */
.ps-mm-scrolltabs.ps-mm-on .ps-nav-custom > li.uk-active > a {
    background: var(--ps-mm-content-bg, #fff);
    color: var(--ps-mm-tab-active-color, #1a1a1a);
    border-color: var(--ps-mm-border, rgba(128,128,128,0.25));
    z-index: 3;
}

/* --- Content area --- */
.ps-mm-scrolltabs.ps-mm-on .ps-content-area {
    border: 1.5px solid var(--ps-mm-border, rgba(128,128,128,0.25));
    border-radius: 0 8px 8px 8px;  /* top-left square: merges with first tab */
    padding: 20px;
    margin-top: -1.5px;            /* overlap by 1.5 px so active tab covers top border */
    background: var(--ps-mm-content-bg, #fff);
    position: relative;
    z-index: 1;
    min-height: 100px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ps-mm-scrolltabs.ps-mm-on .ps-nav-custom > li > a {
        transition: none;
        will-change: auto;
    }
}


/* ===== MODE 1: ARROW CONNECTOR ===== */
/*
 * Pills keep their natural wrapped layout. The active pill sprouts a
 * downward-pointing CSS triangle that bridges it to the content box.
 *
 * When pills wrap to multiple rows the triangle on a first-row active
 * button would point into the second row of buttons, not the content.
 * JS marks last-row <li> elements with .ps-mm-last-row; the ::after is
 * only rendered on li.uk-active.ps-mm-last-row so the arrow always
 * points toward the content regardless of which row is active.
 */

/* Keep the natural wrap; just establish stacking context */
.ps-mm-arrow.ps-mm-on .ps-nav-custom {
    position: relative;
    z-index: 2;
    padding-bottom: 0;
}

/* position:relative on the anchor so ::after is positioned against it */
.ps-mm-arrow.ps-mm-on .ps-nav-custom > li > a {
    position: relative;
}

/* Arrow: hidden by default on every active button */
.ps-mm-arrow.ps-mm-on .ps-nav-custom > li.uk-active > a::after {
    display: none;
}

/* Arrow: visible only when the button is on the last row (.ps-mm-last-row) */
.ps-mm-arrow.ps-mm-on .ps-nav-custom > li.uk-active.ps-mm-last-row > a::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -10px;             /* sits just below the button's bottom edge */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 10px solid var(--ps-mm-arrow-color, var(--ps-nav-active-bg, #1a1a1a));
    pointer-events: none;
    z-index: 3;
}

/* --- Content area: lightly shaded bordered box --- */
.ps-mm-arrow.ps-mm-on .ps-content-area {
    background: var(--ps-mm-content-bg, rgba(128,128,128,0.04));
    border: 1.5px solid var(--ps-mm-border, rgba(128,128,128,0.2));
    border-radius: var(--ps-mm-content-radius, 12px);
    padding: 20px;
    margin-top: 12px;          /* 10px arrow + 2px gap above the box */
    min-height: 100px;
    position: relative;
    z-index: 1;
}

/* Reduced motion: no impact (no transitions in this mode) */


/* ===== MODE 3: ACCENT PILLS ===== */
/*
 * Pills keep their natural wrapped layout. A 2px horizontal divider separates
 * the button group from the content area; a small accent bar (coloured line)
 * sits centred on that divider. The active pill's background matches the accent
 * bar colour, creating a visual bridge from the selection down to the content.
 *
 * This mode is CSS-only — no extra JS or HTML is required.
 */

/* Nav: wrap layout with bottom-border divider.
   Override any scrollable/nowrap inherited from nav_tablet_mode / nav_mobile_mode. */
.ps-mm-pills.ps-mm-on .ps-nav-custom {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    position: relative;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--ps-mm-border, rgba(128,128,128,0.2));
    justify-content: flex-start;
    margin-bottom: 0;
}

/* Accent bar: centred on the divider line via ::after on the nav container.
   position:absolute takes it out of flex flow so it doesn't become a flex item. */
.ps-mm-pills.ps-mm-on .ps-nav-custom::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 60px;
    background: var(--ps-mm-accent, var(--ps-nav-active-bg, #1a1a1a));
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}

/* Inactive pills: neutral border on light background */
.ps-mm-pills.ps-mm-on .ps-nav-custom > li > a {
    border-color: var(--ps-mm-border, rgba(128,128,128,0.25));
    background: var(--ps-nav-bg, transparent);
    color: var(--ps-mm-tab-color, #555);
}

.ps-mm-pills.ps-mm-on .ps-nav-custom > li > a:hover {
    color: var(--ps-mm-tab-hover-color, #1a1a1a);
    background: var(--ps-mm-tab-hover-bg, rgba(128,128,128,0.08));
}

/* Active pill: accent colour — matches the bar below, creating the visual bridge */
.ps-mm-pills.ps-mm-on .ps-nav-custom > li.uk-active > a {
    background: var(--ps-mm-accent, var(--ps-nav-active-bg, #1a1a1a));
    color: var(--ps-mm-accent-text, var(--ps-nav-active-color, #fff));
    border-color: var(--ps-mm-accent, var(--ps-nav-active-bg, #1a1a1a));
}

/* Content area: sits below the divider with top spacing, no border */
.ps-mm-pills.ps-mm-on .ps-content-area {
    margin-top: 0;
    padding-top: 20px;
    min-height: 100px;
}

/* Reduced motion: no transitions in this mode */


/* ===== MODE 4: ACCORDION (mobile display mode) ===== */
/*
 * The regular nav strip and content area are hidden. A separately-rendered
 * accordion (<ul class="ps-mm-acc-wrap">) replaces them with boxed
 * expand/collapse panels — one per item, first item open by default.
 *
 * UIkit's uk-accordion component handles expand/collapse animation.
 * Aria sync is handled by the existing accordion MutationObserver in the JS
 * (updated to observe all .ps-accordion elements in the wrapper).
 */

/* Default: hidden — only shown when ps-mm-on is active.
   Scoped to .ps-switcher so other page elements are unaffected. */
.ps-switcher .ps-mm-acc-wrap {
    display: none;
}

/* Show accordion and hide regular nav, content area, dropdown, progress bar */
.ps-mm-accordion.ps-mm-on .ps-mm-acc-wrap {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ps-mm-accordion.ps-mm-on > [role="tablist"],
.ps-mm-accordion.ps-mm-on > .ps-content-area,
.ps-mm-accordion.ps-mm-on > .ps-nav-dropdown-wrap,
.ps-mm-accordion.ps-mm-on > .ps-progress {
    display: none !important;
}

/* Reset UIkit's default accordion margin-top on subsequent items
   — spacing is handled by the flex gap on the wrapper instead. */
.ps-mm-accordion.ps-mm-on .ps-mm-acc-wrap > li + li {
    margin-top: 0;
}

/* Boxed item: border + radius + overflow clip for rounded corners.
   Override the flat-line borders from .ps-accordion.
   Also reset UIkit's .uk-accordion > :nth-child(n+2) { padding-top:25px; margin-top:25px }
   which would otherwise create extra blank space inside and between items 2+. */
.ps-mm-accordion.ps-mm-on .ps-mm-acc-wrap > li,
.ps-mm-accordion.ps-mm-on .ps-mm-acc-wrap > li:first-child {
    border: 1.5px solid var(--ps-mm-border, rgba(128,128,128,0.25));
    border-radius: var(--ps-mm-content-radius, 10px);
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
    padding-top: 0;
    margin-top: 0;
}

/* Active item: stronger border + subtle shadow */
.ps-mm-accordion.ps-mm-on .ps-mm-acc-wrap > li.uk-open {
    border-color: var(--ps-mm-acc-active-border, rgba(0,0,0,0.7));
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* Header: touch-target height, horizontal layout */
.ps-mm-accordion.ps-mm-on .ps-mm-acc-wrap .ps-acc-title {
    padding: 14px 18px;
    min-height: 44px;
    background: transparent;
    color: var(--ps-mm-tab-hover-color, #1a1a1a);
}

.ps-mm-accordion.ps-mm-on .ps-mm-acc-wrap .ps-acc-title:hover {
    background: rgba(128,128,128,0.04);
}

/* Open header: filled background — hardcoded dark defaults so the open header
   is always visually distinct regardless of the user's nav button colour. */
.ps-mm-accordion.ps-mm-on .ps-mm-acc-wrap > li.uk-open > .ps-acc-title {
    background: var(--ps-mm-acc-active-bg, #1a1a1a);
    color: var(--ps-mm-acc-active-text, #fff);
}

/* Body: light background, vertical padding for comfortable reading.
   Reset UIkit's .uk-accordion-content { margin-top: 20px } which would add
   space between the title and content inside each panel. */
.ps-mm-accordion.ps-mm-on .ps-mm-acc-wrap .ps-acc-content {
    background: var(--ps-mm-content-bg, rgba(128,128,128,0.02));
    padding: 16px 18px;
    margin-top: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ps-mm-accordion.ps-mm-on .ps-mm-acc-wrap > li {
        transition: none;
    }
}