/*
* Navigation variables
* Override these in a child theme via theme.json or a CSS file.
* Scope to a container (e.g. .site-footer .wp-block-navigation) for context-specific styling.
*
* NOTE: the underline is always rendered — disable it by setting
* --nav-indicator-hover-color and --nav-indicator-active-color to transparent,
* never by using text-decoration: none (that would animate the thickness).
*/
:root {
    --nav-padding:                  0;
    --nav-border-radius:            0px;

    --nav-color:                    currentColor;
    --nav-bg:                       transparent;

    --nav-hover-color:              currentColor;
    --nav-hover-bg:                 transparent;

    --nav-active-color:             currentColor;
    --nav-active-bg:                transparent;

    --nav-indicator-thickness:      2px;
    --nav-indicator-offset:         7px;
    --nav-indicator-color:          transparent;
    --nav-indicator-hover-color:    currentColor;
    --nav-indicator-active-color:   currentColor;

    --nav-transition-in:            .3s;
    --nav-transition-out:           .1s;
}

/* Default state */
:root :where(.wp-block-navigation a:where(:not(.wp-element-button))){
    color: var(--nav-color);
    background-color: var(--nav-bg);
    padding: var(--nav-padding);
    border-radius: var(--nav-border-radius);
    text-decoration: underline;
    text-decoration-color: var(--nav-indicator-color);
    text-decoration-thickness: var(--nav-indicator-thickness);
    text-underline-offset: var(--nav-indicator-offset);
    transition:
        color var(--nav-transition-in),
        background-color var(--nav-transition-in),
        text-decoration-color var(--nav-transition-in);
}

/* Active item */
:root :where(.wp-block-navigation .current-menu-item a:where(:not(.wp-element-button))){
    color: var(--nav-active-color);
    background-color: var(--nav-active-bg);
    text-decoration-color: var(--nav-indicator-active-color);
}

/* Hover */
@media (hover: hover){
    :root :where(.wp-block-navigation a:where(:not(.wp-element-button)):hover){
        color: var(--nav-hover-color);
        background-color: var(--nav-hover-bg);
        text-decoration-color: var(--nav-indicator-hover-color);
        transition:
            color var(--nav-transition-out),
            background-color var(--nav-transition-out),
            text-decoration-color var(--nav-transition-out);
    }
}

/*
* Sticky navigation fix
* Makes parent element sticky, so no grouping in templates needed
*/
.wp-block-template-part:has(>.is-position-sticky) {
    --wp-admin--admin-bar--position-offset: var( --wp-admin--admin-bar--height, 0px );
    position: sticky;
    top: calc( 0px + var( --wp-admin--admin-bar--position-offset, 0px ) );
    z-index: 10;
}


/* ============================================================
   Block style variations
   ============================================================ */

/* Underline — explicit version of the default */
.wp-block-navigation.is-style-underline {
    /* inherits default variable values */
}

/* Highlight — background pill on hover/active */
.wp-block-navigation.is-style-highlight {
    --nav-padding:                  0.35em 0.75em;
    --nav-border-radius:            var(--wp--custom--border--radius--small);
    --nav-indicator-hover-color:    transparent;
    --nav-indicator-active-color:   transparent;
    --nav-hover-bg:                 color-mix(in srgb, currentColor 8%, transparent);
    --nav-active-bg:                color-mix(in srgb, currentColor 14%, transparent);
}

/* Minimal — color shift only, no indicator */
.wp-block-navigation.is-style-minimal {
    --nav-indicator-hover-color:    transparent;
    --nav-indicator-active-color:   transparent;
}