/* ==========================================================
   HYPERFIER V2
   Header Styles
   File: /css/header.css
   Mobile First
   ========================================================== */


/* ==========================================================
   Header Wrapper
   ========================================================== */

.site-header{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    z-index:1200;

    background:rgba(8,8,10,0.88);

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

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

    transition:
        background .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        transform .35s ease;
}

.site-header.scrolled{

    background:rgba(6,6,8,0.96);

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

    box-shadow:
        0 12px 40px rgba(0,0,0,.35);
}

.site-header.hide{
    transform:translateY(-100%);
}


/* ==========================================================
   Container
   ========================================================== */

.header-container{

    width:100%;
    max-width:var(--container-width);

    margin:0 auto;

    padding:
        0
        var(--container-padding);

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:72px;

    position:relative;
}


/* ==========================================================
   Logo
   ========================================================== */

.header-logo{

    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;

    text-decoration:none;
}

.header-logo img{

    width:auto;

    height:42px;

    display:block;

    transition:
        transform .35s ease,
        opacity .35s ease;
}

.header-logo:hover img{

    transform:scale(1.04);
}

.header-logo span{

    color:var(--text-primary);

    font-size:1rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;
}


/* ==========================================================
   Desktop Navigation
   ========================================================== */

.main-navigation{

    display:none;
}

.main-navigation ul{

    display:flex;

    align-items:center;

    gap:28px;

    list-style:none;

    margin:0;

    padding:0;
}

.main-navigation li{

    position:relative;
}

.main-navigation a{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--text-secondary);

    font-size:.95rem;

    font-weight:600;

    text-decoration:none;

    transition:
        color .3s ease;
}

.main-navigation a:hover{

    color:var(--text-primary);
}

.main-navigation a.active{

    color:var(--accent-color);
}

.main-navigation a::after{

    content:"";

    position:absolute;

    bottom:-10px;

    left:50%;

    width:0;

    height:2px;

    border-radius:999px;

    background:var(--accent-color);

    transform:translateX(-50%);

    transition:width .35s ease;
}

.main-navigation a:hover::after,
.main-navigation a.active::after{

    width:100%;
}


/* ==========================================================
   Header Actions
   ========================================================== */

.header-actions{

    display:flex;

    align-items:center;

    gap:12px;

    margin-left:auto;
}


/* ==========================================================
   Search Button
   ========================================================== */

.header-search{

    width:44px;

    height:44px;

    border:none;

    outline:none;

    cursor:pointer;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--text-primary);

    transition:
        background .3s ease,
        transform .3s ease;
}

.header-search:hover{

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

    transform:translateY(-2px);
}

.header-search svg{

    width:20px;

    height:20px;
}


/* ==========================================================
   Dealer Button
   ========================================================== */

.header-dealer{

    display:none;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    min-width:150px;

    height:48px;

    padding:0 22px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        var(--accent-color),
        var(--accent-hover)
    );

    color:#fff;

    font-size:.92rem;

    font-weight:700;

    letter-spacing:.02em;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.header-dealer:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 35px rgba(255,90,31,.28);
}


/* ==========================================================
   Hamburger
   ========================================================== */

.mobile-toggle{

    position:relative;

    width:46px;

    height:46px;

    border:none;

    outline:none;

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

    border-radius:14px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:
        background .3s ease;
}

.mobile-toggle:hover{

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

.mobile-toggle span{

    position:absolute;

    width:22px;

    height:2px;

    border-radius:999px;

    background:#ffffff;

    transition:
        transform .35s ease,
        opacity .35s ease;
}

.mobile-toggle span:nth-child(1){

    transform:translateY(-7px);
}

.mobile-toggle span:nth-child(2){

    transform:translateY(0);
}

.mobile-toggle span:nth-child(3){

    transform:translateY(7px);
}


/* ==========================================================
   Active Hamburger
   ========================================================== */

.mobile-toggle.active span:nth-child(1){

    transform:rotate(45deg);
}

.mobile-toggle.active span:nth-child(2){

    opacity:0;
}

.mobile-toggle.active span:nth-child(3){

    transform:rotate(-45deg);
}


/* ==========================================================
   Mobile Drawer
   ========================================================== */

.mobile-navigation{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    max-width:90vw;

    height:100vh;

    overflow-y:auto;

    background:#0b0b0d;

    z-index:1400;

    transition:right .4s ease;

    padding:
        95px
        30px
        50px;
}

.mobile-navigation.active{

    right:0;
}


/* ==========================================================
   Drawer Logo
   ========================================================== */

.mobile-logo{

    margin-bottom:35px;

    display:flex;

    align-items:center;
}

.mobile-logo img{

    height:40px;

    width:auto;
}


/* ==========================================================
   Drawer Navigation
   ========================================================== */

.mobile-navigation ul{

    list-style:none;

    margin:0;

    padding:0;
}

.mobile-navigation li{

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

.mobile-navigation li:last-child{

    border-bottom:none;
}

.mobile-navigation a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 0;

    text-decoration:none;

    color:var(--text-primary);

    font-size:1rem;

    font-weight:600;

    transition:
        color .3s ease,
        padding-left .3s ease;
}

.mobile-navigation a:hover{

    color:var(--accent-color);

    padding-left:10px;
}

/* ==========================================================
   CONTINUATION
   DO NOT CREATE A NEW FILE
   ========================================================== */


/* ==========================================================
   Mobile Overlay
   ========================================================== */

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.68);

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

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    z-index:1350;
}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;
}


/* ==========================================================
   Drawer Close Button
   ========================================================== */

.drawer-close{

    position:absolute;

    top:22px;

    right:22px;

    width:46px;

    height:46px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--text-primary);

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

    transition:
        background .30s ease,
        transform .30s ease;
}

.drawer-close:hover{

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

    transform:rotate(90deg);
}

.drawer-close svg{

    width:22px;

    height:22px;
}


/* ==========================================================
   Mobile CTA
   ========================================================== */

.mobile-cta{

    margin-top:40px;

    display:flex;

    flex-direction:column;

    gap:14px;
}

.mobile-cta .primary-btn,
.mobile-cta .secondary-btn{

    width:100%;
}


/* ==========================================================
   Contact Box
   ========================================================== */

.mobile-contact{

    margin-top:40px;

    padding:22px;

    border-radius:20px;

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

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

.mobile-contact h4{

    color:var(--text-primary);

    margin-bottom:16px;

    font-size:1rem;

    font-weight:700;
}

.mobile-contact a{

    display:block;

    text-decoration:none;

    color:var(--text-secondary);

    margin-bottom:12px;

    transition:color .30s ease;
}

.mobile-contact a:hover{

    color:var(--accent-color);
}


/* ==========================================================
   Social Icons
   ========================================================== */

.mobile-social{

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:22px;
}

.mobile-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:var(--text-primary);

    transition:
        transform .30s ease,
        background .30s ease;
}

.mobile-social a:hover{

    transform:translateY(-3px);

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

.mobile-social svg{

    width:18px;

    height:18px;
}


/* ==========================================================
   Dropdown
   ========================================================== */

.has-dropdown{

    position:relative;
}

.dropdown-menu{

    display:none;
}

.dropdown-toggle{

    display:flex;

    align-items:center;

    gap:8px;
}

.dropdown-icon{

    width:14px;

    height:14px;

    transition:transform .30s ease;
}

.has-dropdown:hover .dropdown-icon{

    transform:rotate(180deg);
}


/* ==========================================================
   Desktop Dropdown
   ========================================================== */

@media (min-width:992px){

    .dropdown-menu{

        position:absolute;

        top:calc(100% + 24px);

        left:0;

        min-width:250px;

        background:#111214;

        border-radius:18px;

        padding:14px 0;

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

        box-shadow:
            0 30px 60px rgba(0,0,0,.40);

        display:block;

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transform:translateY(20px);

        transition:
            opacity .30s ease,
            transform .30s ease,
            visibility .30s ease;
    }

    .has-dropdown:hover>.dropdown-menu{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:translateY(0);
    }

    .dropdown-menu li{

        width:100%;
    }

    .dropdown-menu a{

        width:100%;

        padding:14px 22px;

        color:var(--text-secondary);

        justify-content:flex-start;
    }

    .dropdown-menu a::after{

        display:none;
    }

    .dropdown-menu a:hover{

        color:var(--text-primary);

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

        padding-left:30px;
    }

}


/* ==========================================================
   Mega Menu
   ========================================================== */

.mega-menu{

    display:none;
}

@media(min-width:1200px){

    .mega-parent{

        position:static;
    }

    .mega-menu{

        position:absolute;

        left:50%;

        transform:translateX(-50%) translateY(24px);

        top:100%;

        width:min(1280px,96vw);

        display:grid;

        grid-template-columns:
            repeat(4,1fr);

        gap:34px;

        padding:36px;

        border-radius:28px;

        background:#0e1012;

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

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:
            opacity .35s ease,
            transform .35s ease;
    }

    .mega-parent:hover .mega-menu{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:
            translateX(-50%)
            translateY(0);
    }

    .mega-column h4{

        color:var(--text-primary);

        margin-bottom:18px;

        font-size:1rem;
    }

    .mega-column ul{

        display:flex;

        flex-direction:column;

        gap:14px;
    }

    .mega-column li{

        width:100%;
    }

    .mega-column a{

        color:var(--text-secondary);

        justify-content:flex-start;
    }

    .mega-column a::after{

        display:none;
    }

    .mega-column a:hover{

        color:var(--accent-color);

        padding-left:8px;
    }

}


/* ==========================================================
   Notification Badge
   ========================================================== */

.menu-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:20px;

    height:20px;

    padding:0 6px;

    border-radius:999px;

    font-size:.70rem;

    font-weight:700;

    color:#fff;

    background:var(--accent-color);
}


/* ==========================================================
   Header Divider
   ========================================================== */

.header-divider{

    width:1px;

    height:30px;

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


/* ==========================================================
   Tablet
   ========================================================== */

@media(min-width:768px){

    .site-header{

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

    .header-container{

        min-height:82px;
    }

    .header-logo img{

        height:46px;
    }

    .mobile-navigation{

        width:380px;
    }

}


/* ==========================================================
   Desktop
   ========================================================== */

@media(min-width:992px){

    .mobile-toggle{

        display:none;
    }

    .mobile-navigation{

        display:none;
    }

    .mobile-overlay{

        display:none;
    }

    .main-navigation{

        display:flex;

        margin-left:60px;
    }

    .header-actions{

        margin-left:40px;
    }

    .header-dealer{

        display:flex;
    }

}


/* ==========================================================
   Large Desktop
   ========================================================== */

@media(min-width:1200px){

    .header-container{

        min-height:88px;
    }

    .main-navigation ul{

        gap:36px;
    }

    .header-logo img{

        height:52px;
    }

}


/* ==========================================================
   Ultra Wide
   ========================================================== */

@media(min-width:1440px){

    .main-navigation ul{

        gap:42px;
    }

    .header-container{

        max-width:1380px;
    }

}


/* ==========================================================
   Focus States
   ========================================================== */

.header-logo:focus-visible,
.main-navigation a:focus-visible,
.mobile-navigation a:focus-visible,
.header-search:focus-visible,
.mobile-toggle:focus-visible,
.drawer-close:focus-visible,
.header-dealer:focus-visible{

    outline:2px solid var(--accent-color);

    outline-offset:4px;
}


/* ==========================================================
   Reduced Motion
   ========================================================== */

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

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;
    }

}


/* ==========================================================
   Header States
   ========================================================== */

body.menu-open{

    overflow:hidden;

    touch-action:none;
}

.site-header.transparent{

    background:transparent;

    border-bottom-color:transparent;

    box-shadow:none;
}

.site-header.inverse{

    background:#ffffff;

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

.site-header.inverse .main-navigation a,
.site-header.inverse .header-logo span,
.site-header.inverse .header-search,
.site-header.inverse .mobile-toggle{

    color:#111111;
}

.site-header.inverse .mobile-toggle span{

    background:#111111;
}


/* ==========================================================
   End Of File
   ========================================================== */