/*
==========================================================
FantasyFanzone Header
Version: 4.3
==========================================================
*/

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

.ffz-header{
    position:sticky;

    top:0;
    left:0;

    width:100%;

    z-index:var(--ffz-z-sticky);

    background:
        rgba(11,16,32,.82);

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    transition:
        background-color var(--ffz-transition-normal),
        border-color var(--ffz-transition-normal),
        box-shadow var(--ffz-transition-normal);
}

/*========================================================
SCROLLED HEADER
========================================================*/

.ffz-header.is-scrolled{
    background:
        rgba(11,16,32,.96);

    border-bottom-color:
        rgba(255,255,255,.08);

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.25);
}

/*========================================================
INNER
========================================================*/

.ffz-header__inner{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:48px;

    min-height:
        var(--ffz-header-height);
}

/*========================================================
BRAND
========================================================*/

.ffz-header__brand{
    display:flex;

    align-items:center;

    flex:0 0 auto;
}

/*========================================================
LOGO
========================================================*/

.ffz-header__logo{
    display:inline-flex;

    align-items:center;

    min-width:0;

    color:#fff;

    font-size:30px;
    font-weight:800;

    line-height:1;

    letter-spacing:-1px;

    text-decoration:none;

    transition:
        color var(--ffz-transition-normal),
        transform var(--ffz-transition-normal);
}

.ffz-header__logo span{
    color:
        var(--ffz-primary);
}

.ffz-header__logo:hover{
    transform:
        translateY(-2px);
}

/*========================================================
CUSTOM LOGO
========================================================*/

.ffz-logo{
    display:flex;

    align-items:center;

    flex:0 0 auto;

    min-width:0;
    max-width:100%;
}

.ffz-logo__custom{
    display:flex;

    align-items:center;

    min-width:0;
    max-width:100%;
}

.ffz-logo__custom .custom-logo-link{
    display:flex;

    align-items:center;

    max-width:100%;

    line-height:0;

    text-decoration:none;
}

.ffz-logo__custom .custom-logo{
    display:block;

    width:auto;
    height:auto;

    max-width:220px;
    max-height:64px;

    object-fit:contain;

    transition:
        max-width var(--ffz-transition-normal),
        max-height var(--ffz-transition-normal),
        transform var(--ffz-transition-normal);
}

.ffz-logo__custom .custom-logo-link:hover
.custom-logo{
    transform:translateY(-2px);
}

/*========================================================
TEXT LOGO FALLBACK
========================================================*/

.ffz-logo__link{
    display:inline-flex;

    align-items:center;

    color:#fff;

    text-decoration:none;
}

.ffz-logo__text{
    font-size:30px;
    font-weight:800;

    line-height:1;

    letter-spacing:-1px;
}

.ffz-logo__text span{
    color:var(--ffz-primary);
}

/*========================================================
NAVIGATION WRAPPER
========================================================*/

.ffz-header__navigation{
    display:flex;

    flex:1 1 auto;

    align-items:center;
    justify-content:center;

    min-width:0;
}

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

.ffz-navigation{
    width:100%;
}

/*========================================================
PRIMARY MENU
========================================================*/

.ffz-menu{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:34px;

    width:100%;

    margin:0;
    padding:0;

    list-style:none;
}

.ffz-menu li{
    position:relative;

    margin:0;
    padding:0;
}

.ffz-menu > li{
    flex:0 0 auto;
}

/*========================================================
PRIMARY MENU LINKS
========================================================*/

.ffz-menu > li > a{
    position:relative;

    display:flex;

    align-items:center;

    height:
        var(--ffz-header-height);

    color:
        rgba(255,255,255,.78);

    font-size:15px;
    font-weight:600;

    white-space:nowrap;

    text-decoration:none;

    transition:
        color var(--ffz-transition-normal);
}

.ffz-menu > li > a:hover,
.ffz-menu > li > a:focus-visible{
    color:#fff;
}

/*========================================================
PRIMARY MENU UNDERLINE
========================================================*/

.ffz-menu > li > a::after{
    content:"";

    position:absolute;

    left:0;
    bottom:22px;

    width:100%;
    height:2px;

    border-radius:999px;

    background:
        var(--ffz-gradient-primary);

    transform:
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform
        var(--ffz-transition-normal);
}

.ffz-menu > li > a:hover::after,
.ffz-menu > li > a:focus-visible::after{
    transform:
        scaleX(1);
}

/*========================================================
CURRENT MENU ITEM
========================================================*/

.ffz-menu
.current-menu-item > a,
.ffz-menu
.current_page_item > a,
.ffz-menu
.current-menu-ancestor > a,
.ffz-menu
.current_page_ancestor > a{
    color:#fff;
}

.ffz-menu
.current-menu-item > a::after,
.ffz-menu
.current_page_item > a::after,
.ffz-menu
.current-menu-ancestor > a::after,
.ffz-menu
.current_page_ancestor > a::after{
    transform:
        scaleX(1);
}

/*========================================================
SUB MENU
========================================================*/

.ffz-menu .sub-menu{
    position:absolute;

    top:
        calc(100% - 10px);

    left:50%;

    z-index:
        var(--ffz-z-dropdown);

    display:flex;

    flex-direction:column;

    gap:4px;

    min-width:220px;

    margin:0;
    padding:10px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:16px;

    background:
        rgba(15,21,38,.98);

    box-shadow:
        var(--ffz-shadow-lg);

    list-style:none;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translate(-50%,-8px);

    transition:
        opacity var(--ffz-transition-normal),
        transform var(--ffz-transition-normal),
        visibility var(--ffz-transition-normal);
}

.ffz-menu .sub-menu li{
    width:100%;
}

.ffz-menu .sub-menu a{
    display:flex;

    align-items:center;

    width:100%;
    min-height:42px;

    padding:
        9px
        12px;

    border-radius:10px;

    color:
        rgba(255,255,255,.76);

    font-size:14px;
    font-weight:600;

    text-decoration:none;

    transition:
        color var(--ffz-transition-fast),
        background-color var(--ffz-transition-fast);
}

.ffz-menu .sub-menu a:hover,
.ffz-menu .sub-menu a:focus-visible{
    background:
        rgba(124,58,237,.12);

    color:#fff;
}

/*========================================================
OPEN SUB MENU
========================================================*/

.ffz-menu li:hover > .sub-menu,
.ffz-menu li:focus-within > .sub-menu{
    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
        translate(-50%,0);
}

/*========================================================
ACTIONS
========================================================*/

.ffz-header__actions{
    display:flex;

    align-items:center;

    gap:14px;

    flex:0 0 auto;
}

/*========================================================
SEARCH
========================================================*/

.ffz-header__search{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    min-height:44px;

    padding:
        0
        18px;

    border:0;

    border-radius:999px;

    background:
        rgba(255,255,255,.06);

    color:#fff;

    font-size:14px;
    font-weight:600;

    cursor:pointer;

    transition:
        background-color var(--ffz-transition-normal),
        transform var(--ffz-transition-normal),
        box-shadow var(--ffz-transition-normal);
}

.ffz-header__search:hover,
.ffz-header__search:focus-visible{
    background:
        var(--ffz-primary);

    transform:
        translateY(-2px);

    box-shadow:
        var(--ffz-shadow-md);
}

.ffz-header__search-icon{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    font-size:15px;

    line-height:1;
}

/*========================================================
LOGIN / ACCOUNT
========================================================*/

.ffz-header__login{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:44px;

    padding:
        0
        14px;

    border-radius:999px;

    color:
        rgba(255,255,255,.82);

    font-size:14px;
    font-weight:600;

    text-decoration:none;

    white-space:nowrap;

    transition:
        color var(--ffz-transition-normal),
        background-color var(--ffz-transition-normal);
}

.ffz-header__login:hover,
.ffz-header__login:focus-visible{
    color:#fff;

    background:
        rgba(255,255,255,.06);
}

.ffz-header__login-text{
    display:inline-block;
}

/*========================================================
PREMIUM
========================================================*/

.ffz-header__premium{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    min-height:44px;

    padding:
        0
        22px;

    border-radius:999px;

    background:
        var(--ffz-gradient-primary);

    color:#fff;

    font-size:14px;
    font-weight:700;

    text-decoration:none;

    box-shadow:
        var(--ffz-shadow-md);

    transition:
        transform var(--ffz-transition-normal),
        box-shadow var(--ffz-transition-normal);
}

.ffz-header__premium:hover,
.ffz-header__premium:focus-visible{
    transform:
        translateY(-2px);

    box-shadow:
        var(--ffz-shadow-lg);
}

/*========================================================
MOBILE TOGGLE
========================================================*/

.ffz-mobile-toggle{
    position:relative;

    display:none;

    align-items:center;
    justify-content:center;

    flex-direction:column;

    flex:0 0 48px;

    width:48px;
    height:48px;

    padding:0;

    border:0;

    border-radius:12px;

    background:
        transparent;

    color:#fff;

    cursor:pointer;

    transition:
        background-color
        var(--ffz-transition-normal);
}

.ffz-mobile-toggle:hover,
.ffz-mobile-toggle:focus-visible{
    background:
        rgba(255,255,255,.06);
}

/*
 * Important:
 * Target only the three visual hamburger lines.
 * Do NOT target every span because the button now also
 * contains a .screen-reader-text element.
 */

.ffz-mobile-toggle__line{
    display:block;

    width:24px;
    height:2px;

    margin:3px auto;

    border-radius:999px;

    background:
        currentColor;

    transform-origin:center;

    transition:
        transform var(--ffz-transition-normal),
        opacity var(--ffz-transition-normal);
}

/*========================================================
ACTIVE MOBILE TOGGLE
========================================================*/

.ffz-mobile-toggle.is-active
.ffz-mobile-toggle__line:nth-of-type(1){
    transform:
        translateY(8px)
        rotate(45deg);
}

.ffz-mobile-toggle.is-active
.ffz-mobile-toggle__line:nth-of-type(2){
    opacity:0;
}

.ffz-mobile-toggle.is-active
.ffz-mobile-toggle__line:nth-of-type(3){
    transform:
        translateY(-8px)
        rotate(-45deg);
}

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

.ffz-header__logo:focus-visible,
.ffz-menu a:focus-visible,
.ffz-header__search:focus-visible,
.ffz-header__login:focus-visible,
.ffz-header__premium:focus-visible,
.ffz-mobile-toggle:focus-visible{
    outline:
        2px solid
        var(--ffz-primary);

    outline-offset:4px;
}

/*========================================================
MOBILE NAVIGATION
========================================================*/

@media(max-width:1150px){

    .ffz-logo__custom .custom-logo{
        max-width:190px;
        max-height:56px;
    }

    .ffz-header__inner{
        gap:24px;
    }

    /*====================================================
    NAVIGATION PANEL
    ====================================================*/

    .ffz-header__navigation{
        position:absolute;

        top:100%;
        left:0;

        display:block;

        width:100%;

        max-height:0;

        overflow:hidden;

        border-bottom:
            1px solid
            rgba(255,255,255,.08);

        background:
            rgba(11,16,32,.98);

        box-shadow:
            0 18px 40px
            rgba(0,0,0,.28);

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transform:
            translateY(-8px);

        transition:
            max-height var(--ffz-transition-normal),
            opacity var(--ffz-transition-normal),
            transform var(--ffz-transition-normal),
            visibility var(--ffz-transition-normal);
    }

    .ffz-header__navigation.is-open{
        max-height:
            calc(100dvh - var(--ffz-header-height));

        overflow-y:auto;

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:
            translateY(0);

        overscroll-behavior:contain;
    }

    /*====================================================
    MOBILE NAVIGATION
    ====================================================*/

    .ffz-navigation{
        width:100%;
    }

    .ffz-menu{
        flex-direction:column;

        align-items:stretch;
        justify-content:flex-start;

        gap:0;

        width:100%;

        padding:
            16px
            20px
            24px;
    }

    .ffz-menu li{
        width:100%;
    }

    .ffz-menu > li > a{
        width:100%;

        height:auto;
        min-height:52px;

        padding:
            12px
            4px;

        border-bottom:
            1px solid
            rgba(255,255,255,.06);

        font-size:16px;
    }

    .ffz-menu > li:last-child > a{
        border-bottom:0;
    }

    .ffz-menu > li > a::after{
        left:0;
        bottom:7px;

        width:36px;
    }

    /*====================================================
    MOBILE SUB MENU
    ====================================================*/

    .ffz-menu .sub-menu{
        position:static;

        display:flex;

        min-width:0;
        width:100%;

        margin:0;

        padding:
            2px
            0
            8px
            14px;

        border:0;

        border-radius:0;

        background:none;

        box-shadow:none;

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:none;

        transition:none;
    }

    .ffz-menu .sub-menu a{
        min-height:42px;

        padding:
            8px
            12px;

        color:
            rgba(255,255,255,.65);

        font-size:14px;
    }

    /*====================================================
    ACTIONS
    ====================================================*/

    .ffz-header__actions{
        display:flex;

        margin-left:auto;
    }

    /*
     * Keep the account action visible on tablet/mobile.
     * Search and optional premium actions stay inside the desktop header
     * so the compact mobile header remains uncluttered.
     */
    .ffz-header__search,
    .ffz-header__premium{
        display:none;
    }

    .ffz-header__login{
        display:inline-flex;

        min-height:42px;

        padding:
            0
            14px;

        border:
            1px solid
            rgba(255,255,255,.10);

        background:
            rgba(255,255,255,.045);

        color:#fff;

        font-size:13px;
        font-weight:700;
    }

    .ffz-header__login:hover,
    .ffz-header__login:focus-visible{
        background:
            rgba(124,58,237,.14);

        border-color:
            rgba(124,58,237,.35);
    }

    .ffz-mobile-toggle{
        display:flex;
    }
}

/*========================================================
MOBILE
========================================================*/

@media(max-width:768px){

    .ffz-header__inner{
        min-height:72px;

        gap:20px;
    }

    .ffz-header__logo{
        font-size:26px;
    }

    .ffz-logo__custom .custom-logo{
        max-width:150px;
        max-height:46px;
    }

    .ffz-logo__text{
        font-size:26px;
    }

    .ffz-header__login{
        min-height:40px;

        padding:
            0
            12px;

        font-size:12px;
    }

    .ffz-header__navigation.is-open{
        max-height:
            calc(100dvh - 72px);
    }

    .ffz-menu{
        padding:
            12px
            18px
            20px;
    }
}

/*========================================================
SMALL MOBILE
========================================================*/

@media(max-width:480px){

    .ffz-header__inner{
        gap:12px;
    }

    .ffz-header__logo{
        font-size:23px;
    }

    .ffz-logo__custom .custom-logo{
        max-width:125px;
        max-height:40px;
    }

    .ffz-logo__text{
        font-size:23px;
    }

    .ffz-header__login{
        min-height:38px;

        max-width:92px;

        padding:
            0
            10px;

        overflow:hidden;

        font-size:11px;

        text-overflow:ellipsis;
    }

    .ffz-header__login-text{
        overflow:hidden;

        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .ffz-mobile-toggle{
        flex-basis:44px;

        width:44px;
        height:44px;
    }

    .ffz-mobile-toggle__line{
        width:22px;
    }

    .ffz-menu{
        padding:
            10px
            14px
            18px;
    }
}

/*========================================================
REDUCED MOTION
========================================================*/

@media(prefers-reduced-motion:reduce){

    .ffz-header,
    .ffz-header__logo,
    .ffz-menu a,
    .ffz-menu a::after,
    .ffz-menu .sub-menu,
    .ffz-header__search,
    .ffz-header__login,
    .ffz-header__premium,
    .ffz-mobile-toggle,
    .ffz-mobile-toggle__line,
    .ffz-header__navigation,
    .ffz-logo__custom .custom-logo{
        transition:none;
    }

    .ffz-header__logo:hover,
    .ffz-header__search:hover,
    .ffz-header__premium:hover,
    .ffz-logo__custom .custom-logo-link:hover .custom-logo{
        transform:none;
    }
}