/*
 * Navigation Hover Effects – Combinable System
 * 
 * These effects are INDEPENDENT of block styles (Mega Menu, Netlify, etc.)
 * and can be combined freely via the Gutenberg "Hover Effekte" panel.
 *
 * Available classes:
 *   .has-hover-underline-rise   → Line fades in from bottom to top
 *   .has-hover-underline-slide  → Line slides left→right, reverses on leave
 *   .has-hover-underline-fade   → Line fades in/out in place
 *
 * Desktop only: Uses @media (hover: hover) to exclude touch devices.
 * Only targets top-level nav items (not submenu/dropdown items).
 *
 * SPECIFICITY: Uses `nav.wp-block-navigation` prefix + `!important`
 * on all critical properties to guarantee override over competing
 * block style selectors (e.g. `.is-style-new-effect ::after`).
 */

@media (hover: hover) and (min-width: 782px) {

    /* ========================================
       SHARED BASE – Positioning Context
       ======================================== */

    nav.wp-block-navigation[class*="has-hover-underline-"] .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content {
        position: relative;
    }

    /* ========================================
       SHARED BASE – Pseudo-Element Reset
       Overrides ALL block style ::after rules.
       ======================================== */

    nav.wp-block-navigation[class*="has-hover-underline-"] .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content::after {
        content: '' !important;
        position: absolute !important;
        bottom: -4px !important;
        left: 0 !important;
        width: 100% !important;
        height: 2px !important;
        background-color: var(--wp--preset--color--primary, currentColor) !important;
        pointer-events: none !important;
        will-change: transform, opacity;
    }


    /* ========================================
       EFFECT 1: UNDERLINE RISE (Bottom → Top Fade)
       
       Strich startet unsichtbar 4px unterhalb und
       gleitet beim Hover sanft an seine Position.
       ======================================== */

    nav.wp-block-navigation.has-hover-underline-rise .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content::after {
        opacity: 0 !important;
        transform: translateY(4px) !important;
        transform-origin: center !important;
        transition:
            opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }

    nav.wp-block-navigation.has-hover-underline-rise .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content:hover::after,
    nav.wp-block-navigation.has-hover-underline-rise .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content:focus-visible::after {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }


    /* ========================================
       EFFECT 2: UNDERLINE SLIDE (Left → Right / Reverse)
       
       Strich baut sich von links nach rechts auf.
       Beim Verlassen bewegt er sich in die
       entgegengesetzte Richtung zurück (rechts→links).
       Nutzt transform-origin Wechsel für Richtungsumkehr.
       ======================================== */

    nav.wp-block-navigation.has-hover-underline-slide .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content::after {
        opacity: 1 !important;
        transform: scaleX(0) !important;
        transform-origin: left center !important;
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }

    nav.wp-block-navigation.has-hover-underline-slide .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content:hover::after,
    nav.wp-block-navigation.has-hover-underline-slide .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content:focus-visible::after {
        transform: scaleX(1) !important;
        transform-origin: left center !important;
    }

    /* Reverse direction on mouse leave: origin flips to right */
    nav.wp-block-navigation.has-hover-underline-slide .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content:not(:hover):not(:focus-visible)::after {
        transform-origin: right center !important;
    }


    /* ========================================
       EFFECT 3: UNDERLINE FADE (In Place)
       
       Strich blendet sanft ein (opacity),
       keine Bewegung. Blendet beim Verlassen
       ebenso sanft wieder aus.
       ======================================== */

    nav.wp-block-navigation.has-hover-underline-fade .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content::after {
        opacity: 0 !important;
        transform: none !important;
        transition: opacity 0.3s ease !important;
    }

    nav.wp-block-navigation.has-hover-underline-fade .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content:hover::after,
    nav.wp-block-navigation.has-hover-underline-fade .wp-block-navigation__container>.wp-block-navigation-item>.wp-block-navigation-item__content:focus-visible::after {
        opacity: 1 !important;
    }

}