/* Navigation refinements for YOOtheme 5. */

/*
 * YOOtheme 5 adds a separate flex gap while the established hh-Solution
 * navigation already obtains its spacing from the 15px link padding.
 */
.tm-header .uk-navbar-nav {
    gap: 0;
}

/*
 * The menu shortcode is wrapped in .el-content and a div with negative side
 * margins. Legacy builder data can render an incomplete nav style class
 * instead of uk-nav-default, so these rules target the stable base class.
 */
:is(#tm-main, .tm-main) .uk-card-small:has(> .el-content .uk-nav) {
    color: var(--hhs-content-text, #2e2e2e) !important;
    background-color: #fff !important;
    border: 4px solid var(--hhs-brand, #7b0e20);
}

:is(#tm-main, .tm-main) .uk-card-small:has(> .el-content .uk-nav) > .el-title {
    color: var(--hhs-menu-text, #777) !important;
}

:is(#tm-main, .tm-main) .uk-card-small .el-content .uk-nav > li,
:is(#tm-main, .tm-main) .uk-card-small .el-content .uk-nav .uk-nav-sub > li {
    background-color: #fff !important;
}

:is(#tm-main, .tm-main) .uk-card-small .el-content .uk-nav > li > a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 7px 20px !important;
    color: var(--hhs-menu-text, #777) !important;
    font-weight: 400;
    line-height: 1.45;
    white-space: normal;
    text-decoration: none;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

:is(#tm-main, .tm-main) .uk-card-small .el-content .uk-nav .uk-nav-sub > li > a {
    padding: 7px 20px 7px 35px !important;
    color: var(--hhs-menu-text, #777) !important;
}

/* Hover and keyboard focus cover the complete, possibly multiline link. */
:is(#tm-main, .tm-main) .uk-card-small .el-content .uk-nav li:not(.uk-active):not(.current-menu-item) > a:hover,
:is(#tm-main, .tm-main) .uk-card-small .el-content .uk-nav li:not(.uk-active):not(.current-menu-item) > a:focus-visible {
    color: var(--hhs-brand, #7b0e20) !important;
    background-color: #f3e7e9 !important;
    box-shadow: inset 4px 0 0 var(--hhs-brand, #7b0e20);
    text-decoration: none;
}

:is(#tm-main, .tm-main) .uk-card-small .el-content .uk-nav li:not(.uk-active):not(.current-menu-item) > a:focus-visible {
    outline: 2px solid var(--hhs-brand, #7b0e20);
    outline-offset: -2px;
}

/* Support both YOOtheme's and WordPress's active-item classes. */
:is(#tm-main, .tm-main) .uk-card-small .el-content .uk-nav li.uk-active,
:is(#tm-main, .tm-main) .uk-card-small .el-content .uk-nav li.current-menu-item,
:is(#tm-main, .tm-main) .uk-card-small .el-content .uk-nav li.uk-active > a,
:is(#tm-main, .tm-main) .uk-card-small .el-content .uk-nav li.current-menu-item > a {
    color: #fff !important;
    background-color: var(--hhs-brand, #7b0e20) !important;
}

:is(#tm-main, .tm-main) .uk-card-small .el-content .uk-nav li.uk-active > a,
:is(#tm-main, .tm-main) .uk-card-small .el-content .uk-nav li.current-menu-item > a {
    box-shadow: none;
}

/*
 * WooCommerce Product Search renders the StoneShop filters as primary cards,
 * not as a normal UIkit navigation. YOOtheme 5 makes primary cards dark by
 * default. Restore the established StoneShop treatment without changing
 * primary cards elsewhere on the website.
 */
body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms.uk-card-primary.uk-card-body {
    --uk-inverse: initial;
    --hhs-shop-filter-inline: 12px;
    box-sizing: border-box;
    padding: 16px var(--hhs-shop-filter-inline);
    color: var(--hhs-menu-text, #777) !important;
    background-color: #fff !important;
    border: 4px solid var(--hhs-brand, #7b0e20);
}

body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms.uk-card-primary .uk-card-title {
    color: var(--hhs-menu-text, #777) !important;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms.uk-card-primary .uk-heading-divider {
    padding-bottom: calc(5px + 0.1em);
    border-bottom-color: var(--hhs-footer, #404042);
    border-bottom-width: calc(1px + 0.1em);
}

body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms.uk-card-primary a {
    color: var(--hhs-brand, #7b0e20) !important;
    text-decoration: none !important;
}

body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms.uk-card-primary a:hover,
body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms.uk-card-primary a:focus-visible {
    color: #b8253d !important;
}

/*
 * List filters reach exactly from one inner border edge to the other. The
 * equal negative margin and inner padding keep the text position stable.
 */
body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items.style-list > li {
    display: flex;
    gap: 0.35em;
    align-items: flex-start;
    margin: 0 calc(-1 * var(--hhs-shop-filter-inline));
    padding: 0 var(--hhs-shop-filter-inline);
    color: var(--hhs-menu-text, #777);
    background-color: #fff;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

/*
 * StoneShop can be embedded on a normal WordPress page. In that case the body
 * has none of WooCommerce's archive classes used above. These selectors keep
 * the filter navigation consistent on both the page and archive variants and
 * override the generated #template-... .term-name color safely.
 */
:is(#tm-main, .tm-main) .product-search-filter-terms {
    --hhs-shop-filter-inline: 12px;
}

:is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items.style-list > li {
    padding-block: 0 !important;
}

:is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items > li > a,
:is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items > li .term-name {
    color: var(--hhs-brand, #7b0e20) !important;
}

:is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items > li:hover,
:is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items > li:focus-within {
    background-color: #f3e7e9;
    box-shadow: inset 4px 0 0 var(--hhs-brand, #7b0e20);
}

:is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items > li:is(
        .current-cat,
        .current-attribute,
        .current-term,
        .current-product_brand,
        .selected,
        .chosen,
        .active
    ),
:is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items > li:is(
        .current-cat,
        .current-attribute,
        .current-term,
        .current-product_brand,
        .selected,
        .chosen,
        .active
    ) > :is(a, .count, .term-expander),
:is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items > li:is(
        .current-cat,
        .current-attribute,
        .current-term,
        .current-product_brand,
        .selected,
        .chosen,
        .active
    ) .term-name {
    color: #fff !important;
    background-color: var(--hhs-brand, #7b0e20) !important;
    box-shadow: none !important;
}

body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items.style-list > li > a {
    flex: 1 1 auto;
    min-width: 0;
}

body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items.style-list > li > .count,
body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items.style-list > li > .term-expander {
    flex: 0 0 auto;
}

/* Inline filters stay compact and do not overlap neighbouring values. */
body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items.style-inline > li {
    margin: 2px 4px 2px 0;
    padding: 3px 5px;
    color: var(--hhs-menu-text, #777);
    background-color: #fff;
    transition:
        color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items > li:hover,
body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items > li:focus-within {
    color: var(--hhs-brand, #7b0e20);
    background-color: #f3e7e9;
    box-shadow: inset 4px 0 0 var(--hhs-brand, #7b0e20);
}

/* Product Search uses these classes for the currently selected filters. */
body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items > li:is(
        .current-cat,
        .current-attribute,
        .current-term,
        .current-product_brand,
        .selected,
        .chosen,
        .active
    ) {
    color: #fff !important;
    background-color: var(--hhs-brand, #7b0e20) !important;
    box-shadow: none !important;
}

body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items > li:is(
        .current-cat,
        .current-attribute,
        .current-term,
        .current-product_brand,
        .selected,
        .chosen,
        .active
    ) > :is(a, .count, .term-expander),
body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items > li:is(
        .current-cat,
        .current-attribute,
        .current-term,
        .current-product_brand,
        .selected,
        .chosen,
        .active
    ) > a:is(:hover, :focus-visible),
body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
    :is(#tm-main, .tm-main)
    .product-search-filter-terms .product-search-filter-items > li:is(
        .current-cat,
        .current-attribute,
        .current-term,
        .current-product_brand,
        .selected,
        .chosen,
        .active
    ) .term-name {
    color: #fff !important;
}

@media (min-width: 1200px) {
    body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
        :is(#tm-main, .tm-main)
        .product-search-filter-terms.uk-card-primary.uk-card-body {
        --hhs-shop-filter-inline: 16px;
        padding: 18px var(--hhs-shop-filter-inline);
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(#tm-main, .tm-main) .uk-card-small .el-content .uk-nav > li > a {
        transition: none;
    }

    body:is(.woocommerce-shop, .post-type-archive-product, .tax-product_cat)
        :is(#tm-main, .tm-main)
        .product-search-filter-terms .product-search-filter-items > li {
        transition: none;
    }
}