/* ==========================================================
   NAVIGATION BASE
========================================================== */

.site-header .wp-block-navigation-item__content,
.site-footer .wp-block-navigation-item__content {
    color: var(--surface-text);

    border-radius: 999px;

    transition:
        background var(--transition-base),
        color var(--transition-base),
        box-shadow var(--transition-base),
        outline-color var(--transition-base);
}

/* ==========================================================
   HOVER
========================================================== */

.site-header .wp-block-navigation-item__content:hover,
.site-footer .wp-block-navigation-item__content:hover {
    background: var(--nav-hover-bg);
    color: var(--nav-hover-text) !important;
}

/* ==========================================================
   ACTIVE
========================================================== */

.site-header .current-menu-item>.wp-block-navigation-item__content,
.site-header .current_page_item>.wp-block-navigation-item__content,
.site-header .current-menu-ancestor>.wp-block-navigation-item__content,

.site-footer .current-menu-item>.wp-block-navigation-item__content,
.site-footer .current_page_item>.wp-block-navigation-item__content,
.site-footer .current-menu-ancestor>.wp-block-navigation-item__content {
    background: var(--nav-active-bg);
    color: var(--nav-active-text) !important;
}

/* ==========================================================
   ACTIVE + HOVER
   Aktive Navigation bleibt stabil beim Hover
========================================================== */

.site-header .current-menu-item>.wp-block-navigation-item__content:hover,
.site-header .current_page_item>.wp-block-navigation-item__content:hover,
.site-header .current-menu-ancestor>.wp-block-navigation-item__content:hover,

.site-footer .current-menu-item>.wp-block-navigation-item__content:hover,
.site-footer .current_page_item>.wp-block-navigation-item__content:hover,
.site-footer .current-menu-ancestor>.wp-block-navigation-item__content:hover {
    background: var(--nav-active-bg);
    color: var(--nav-active-text) !important;
}

/* ==========================================================
   FOCUS
========================================================== */

.site-header .wp-block-navigation-item__content:focus-visible,
.site-footer .wp-block-navigation-item__content:focus-visible {
    background: var(--nav-focus-bg);
    color: var(--nav-focus-text) !important;

    outline: 2px solid var(--nav-focus-outline);
    outline-offset: 3px;

    box-shadow:
        0 0 0 4px color-mix(in srgb,
            var(--nav-focus-outline) 18%,
            transparent);
}

/* ==========================================================
   ACTIVE + FOCUS
   Focus darf Active überschreiben
========================================================== */

.site-header .current-menu-item>.wp-block-navigation-item__content:focus-visible,
.site-header .current_page_item>.wp-block-navigation-item__content:focus-visible,
.site-header .current-menu-ancestor>.wp-block-navigation-item__content:focus-visible,

.site-footer .current-menu-item>.wp-block-navigation-item__content:focus-visible,
.site-footer .current_page_item>.wp-block-navigation-item__content:focus-visible,
.site-footer .current-menu-ancestor>.wp-block-navigation-item__content:focus-visible {
    background: var(--nav-focus-bg);
    color: var(--nav-focus-text) !important;
}