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

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

    border-radius: 999px;

    text-decoration: none;

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

/* ==========================================================
   HEADER NAVIGATION
========================================================== */

.site-header .wp-block-navigation-item__content {
    position: relative;

    min-height: 44px;

    display: flex;
    align-items: center;

    padding: .45rem .85rem;

    background: transparent;

    font-size: 1.15rem;
    font-weight: 800;
    text-transform: lowercase;
    letter-spacing: .01em;
}

/* ==========================================================
   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: 3px solid var(--nav-focus-outline);
    outline-offset: 4px;

    box-shadow:
        0 0 0 6px color-mix(
            in srgb,
            var(--nav-focus-outline) 22%,
            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;
}