/**
 * Nav Item Hover Effects
 *
 * Applied via .oi-nav--hover-{effect} on the core/navigation wrapper.
 * All effects target only top-level items (.wp-block-navigation__container > li).
 *
 * Hover-text fallback: when no `--oi-nav-hover-text` is set on the wrapper
 * (i.e. the editor didn't pick a Hover Color), every effect falls back to
 * `--wp--preset--color--palette-1` so the hover is always visibly distinct.
 * Override per-instance by setting Hover Color in the Nav Item Hover panel.
 */

/* ── Text Color (simplest — just animates the link color on hover) ───── */
.oi-nav--hover-text-color .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    transition: color 0.2s ease;
}
.oi-nav--hover-text-color .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    color: var( --oi-nav-hover-text, var( --wp--preset--color--palette-1 ) );
}

/* ── Shared: position context for pseudo-element effects ─────────────── */
.oi-nav--hover-underline-swipe .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.oi-nav--hover-underline-center .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    position: relative;
}

.oi-nav--hover-underline-swipe .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after,
.oi-nav--hover-underline-center .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 2px;
    background: var( --oi-nav-hover-bg, var( --wp--preset--color--palette-1 ) );
    transition: width 0.3s ease, left 0.3s ease;
}

/* ── Underline Swipe (left → right) ─────────────────────────────────── */
.oi-nav--hover-underline-swipe .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    transition: color 0.3s ease;
}
.oi-nav--hover-underline-swipe .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    left: 0;
    width: 0;
}

.oi-nav--hover-underline-swipe .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    color: var( --oi-nav-hover-text, var( --wp--preset--color--palette-1 ) );
}
.oi-nav--hover-underline-swipe .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after {
    width: 100%;
}

/* ── Underline Center (expands from center) ──────────────────────────── */
.oi-nav--hover-underline-center .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    transition: color 0.3s ease;
}
.oi-nav--hover-underline-center .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    left: 50%;
    width: 0;
}

.oi-nav--hover-underline-center .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    color: var( --oi-nav-hover-text, var( --wp--preset--color--palette-1 ) );
}
.oi-nav--hover-underline-center .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after {
    left: 0;
    width: 100%;
}

/* ── Background Fill ─────────────────────────────────────────────────── */
.oi-nav--hover-bg-fill .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.oi-nav--hover-bg-fill .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    background-color: var( --oi-nav-hover-bg, var( --wp--preset--color--palette-1 ) );
    color: var( --oi-nav-hover-text, var( --wp--preset--color--palette-13 ) );
    text-decoration: none;
}

/* ── Text Lift ───────────────────────────────────────────────────────── */
.oi-nav--hover-text-lift .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    transition: transform 0.2s ease, color 0.2s ease;
}

.oi-nav--hover-text-lift .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    transform: translateY( -3px );
    color: var( --oi-nav-hover-text, var( --wp--preset--color--palette-1 ) );
    text-decoration: none;
}

/* ── Text Scroll (requires data-label set by nav-hover-effects.js) ───── */
.oi-nav--hover-text-scroll .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    overflow: hidden;
    position: relative;
}

.oi-nav--hover-text-scroll .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
    display: inline-block;
    transition: transform 0.3s ease;
}

.oi-nav--hover-text-scroll .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    content: attr( data-label );
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    color: var( --oi-nav-hover-bg, var( --wp--preset--color--palette-1 ) );
    transition: transform 0.3s ease;
    text-align: center;
}

.oi-nav--hover-text-scroll .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content .wp-block-navigation-item__label,
.oi-nav--hover-text-scroll .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after {
    transform: translateY( -100% );
}