/* ========================================================================
   SUN EXPERT UI
   PREMIUM GLASS HEADER
   PART 1 - FOUNDATION
   Version 1.0
======================================================================== */

/* ========================================================================
   VARIABLES
======================================================================== */

:root{

    --header-height:92px;
    --header-height-scroll:74px;

    --container-width:1280px;

    --header-radius:22px;

    --glass-bg:rgba(255,255,255,.08);

    --glass-border:rgba(255,255,255,.18);

    --glass-shadow:
        0 10px 40px rgba(15,23,42,.08);

    --glass-blur:30px;

    --transition-fast:.25s;

    --transition-normal:.45s;

    --transition-slow:.75s;

    --brand:#2F9DB2;

    --text:#122033;

    --text-light:#5A6677;

    --white:#ffffff;

}


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

.site-header{

    position:fixed;

    inset:0 0 auto 0;

    width:100%;

    z-index:9999;

    display:flex;

    justify-content:center;

    pointer-events:none;

}


/* ========================================================================
   CONTAINER
======================================================================== */

.header-container{

    position:relative;

    width:min(
        calc(100% - 32px),
        var(--container-width)
    );

    margin-top:18px;

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

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 32px;

    transition:

        min-height var(--transition-normal),

        padding var(--transition-normal),

        transform var(--transition-normal);

    pointer-events:auto;

}


/* ========================================================================
   GLASS LAYER
======================================================================== */

.header-glass{

    position:absolute;

    inset:0;

    border-radius:var(--header-radius);

    background:transparent;

    transition:

        background var(--transition-normal),

        backdrop-filter var(--transition-normal),

        box-shadow var(--transition-normal),

        border-color var(--transition-normal);

}


/* ========================================================================
   SCROLL STATE
======================================================================== */

.site-header.scrolled .header-container{

    min-height:var(--header-height-scroll);

}


.site-header.scrolled .header-glass{

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,.08)
        );

    backdrop-filter:

        blur(var(--glass-blur))
        saturate(190%)
        brightness(1.05);

    -webkit-backdrop-filter:

        blur(var(--glass-blur))
        saturate(190%)
        brightness(1.05);

    border:1px solid var(--glass-border);

    box-shadow:var(--glass-shadow);

}


/* ========================================================================
   GLASS HIGHLIGHT
======================================================================== */

.header-glass::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.35),

            rgba(255,255,255,.08),

            rgba(255,255,255,0)

        );

    opacity:.9;

    pointer-events:none;

}


/* ========================================================================
   GLASS NOISE
======================================================================== */

.header-glass::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    opacity:.035;

    mix-blend-mode:overlay;

    background-image:

        radial-gradient(
            rgba(255,255,255,.9) .4px,
            transparent .6px
        );

    background-size:8px 8px;

    pointer-events:none;

}


/* ========================================================================
   CONTENT
======================================================================== */

.header-logo,

.header-nav,

.header-actions{

    position:relative;

    z-index:5;

}


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

.header-logo{

    display:flex;

    align-items:center;

    gap:14px;

    color:var(--text);

    text-decoration:none;

    flex-shrink:0;

}


.logo-icon{

    width:38px;

    height:38px;

    color:var(--brand);

    transition:transform .35s ease;

}


.logo-text{

    font-family:"Syne",sans-serif;

    font-size:1.18rem;

    font-weight:700;

    letter-spacing:.08em;

}


.header-logo:hover .logo-icon{

    transform:rotate(8deg) scale(1.05);

}


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

.header-actions{

    display:flex;

    align-items:center;

    gap:18px;

}

/* ========================================================================
   SUN EXPERT UI
   PREMIUM GLASS HEADER
   PART 2 - NAVIGATION
======================================================================== */


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

.header-nav{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:clamp(18px,2vw,38px);

    flex:1;

    margin:0 clamp(20px,3vw,60px);

}


/* ========================================================================
   NAV LINKS
======================================================================== */

.header-nav a{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    height:44px;

    padding:0 6px;

    text-decoration:none;

    color:var(--text-light);

    font-family:"Plus Jakarta Sans",sans-serif;

    font-size:clamp(.92rem,.85rem + .2vw,1rem);

    font-weight:500;

    letter-spacing:.02em;

    white-space:nowrap;

    transition:
        color .25s ease,
        transform .25s ease;

}


/* underline */

.header-nav a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:6px;

    width:0;

    height:2px;

    border-radius:999px;

    background:var(--brand);

    transform:translateX(-50%);

    transition:
        width .30s ease;

}


/* glass hover */

.header-nav a::before{

    content:"";

    position:absolute;

    inset:4px;

    border-radius:999px;

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

    opacity:0;

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

    transform:scale(.85);

    z-index:-1;

}


/* hover */

.header-nav a:hover{

    color:var(--text);

    transform:translateY(-1px);

}


.header-nav a:hover::before{

    opacity:1;

    transform:scale(1);

}


.header-nav a:hover::after{

    width:70%;

}


/* active */

.header-nav a.active{

    color:var(--brand);

    font-weight:600;

}


.header-nav a.active::after{

    width:70%;

}



/* ========================================================================
   CTA BUTTON
======================================================================== */

.header-button{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:210px;

    height:52px;

    padding:0 26px;

    border-radius:999px;

    text-decoration:none;

    background:linear-gradient(
        135deg,
        #2F9DB2,
        #2B7E92
    );

    color:white;

    font-family:"Plus Jakarta Sans",sans-serif;

    font-size:.94rem;

    font-weight:600;

    letter-spacing:.03em;

    overflow:hidden;

    transition:
        transform .30s ease,
        box-shadow .30s ease;

}


/* shine */

.header-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:70%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transform:skewX(-24deg);

    transition:left .8s ease;

}


/* hover */

.header-button:hover{

    transform:translateY(-2px);

    box-shadow:

        0 12px 32px rgba(47,157,178,.35);

}


.header-button:hover::before{

    left:180%;

}


/* click */

.header-button:active{

    transform:scale(.98);

}


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

.logo-text{

    font-size:clamp(1rem,.95rem + .4vw,1.2rem);

}


.logo-icon{

    width:clamp(32px,2vw,38px);

    height:clamp(32px,2vw,38px);

}


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

.site-header.scrolled .logo-icon{

    width:32px;

    height:32px;

}


.site-header.scrolled .logo-text{

    font-size:1rem;

}


.site-header.scrolled .header-button{

    height:46px;

    min-width:190px;

    font-size:.88rem;

}


/* ========================================================================
   LARGE DESKTOP
======================================================================== */

@media (min-width:1600px){

    .header-container{

        max-width:1480px;

    }

}


/* ========================================================================
   LAPTOP
======================================================================== */

@media (max-width:1200px){

    .header-container{

        padding-inline:26px;

    }

    .header-button{

        min-width:190px;

    }

}


/* ========================================================================
   TABLET
======================================================================== */

@media (max-width:1024px){

    .header-nav{

        gap:18px;

        margin:0 20px;

    }

    .header-nav a{

        font-size:.92rem;

    }

    .header-button{

        min-width:175px;

        font-size:.88rem;

    }

}


/* ========================================================================
   SMALL TABLET
======================================================================== */

@media (max-width:900px){

    .header-nav{

        display:none;

    }

    .header-button{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

}


/* ========================================================================
   VERY LARGE SCREENS
======================================================================== */

@media (min-width:2200px){

    .header-container{

        max-width:1700px;

    }

}
/* ==========================================================================
   SUN EXPERT UI
   PREMIUM GLASS HEADER
   PART 3 - MOBILE MENU
========================================================================== */


.menu-toggle{

    width:52px;

    height:52px;

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

    outline:none;

    cursor:pointer;

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

    backdrop-filter:blur(20px);

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

    border-radius:16px;

    display:none;

    align-items:center;

    justify-content:center;

    position:relative;

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

    z-index:10002;

}

.menu-toggle:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px rgba(15,23,42,.15);

}

.menu-toggle span{

    position:absolute;

    width:24px;

    height:2px;

    border-radius:999px;

    background:var(--text);

    transition:all .35s cubic-bezier(.4,0,.2,1);

}

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

    transform:translateY(-7px);

}

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

    transform:translateY(0);

}

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

    transform:translateY(7px);

}


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

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

    transform:rotate(45deg);

}

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

    opacity:0;

}

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

    transform:rotate(-45deg);

}


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

.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:min(92vw,380px);

    height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    gap:10px;

    padding:120px 32px 40px;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,.10)
        );

    backdrop-filter:
        blur(34px)
        saturate(180%);

    -webkit-backdrop-filter:
        blur(34px)
        saturate(180%);

    border-left:

        1px solid rgba(255,255,255,.18);

    box-shadow:

        -20px 0 50px rgba(15,23,42,.15);

    transition:right .45s cubic-bezier(.22,1,.36,1);

    z-index:10001;

}

.mobile-menu.open{

    right:0;

}


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

.mobile-menu a{

    display:flex;

    align-items:center;

    width:100%;

    min-height:56px;

    padding:0 18px;

    border-radius:16px;

    text-decoration:none;

    color:var(--text);

    font-size:1rem;

    font-weight:500;

    transition:
        background .25s ease,
        transform .25s ease,
        color .25s ease;

}

.mobile-menu a:hover{

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

    color:var(--brand);

    transform:translateX(6px);

}


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

.mobile-button{

    margin-top:18px;

    justify-content:center;

    background:linear-gradient(
        135deg,
        #2F9DB2,
        #28798C
    );

    color:#fff !important;

    font-weight:600;

}

.mobile-button:hover{

    background:linear-gradient(
        135deg,
        #35A8BE,
        #2F9DB2
    );

}


/* ==========================================================================
   OVERLAY
========================================================================== */

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(8,15,25,.22);

    backdrop-filter:blur(8px);

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

    opacity:0;

    visibility:hidden;

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

    z-index:10000;

}

.mobile-overlay.show{

    opacity:1;

    visibility:visible;

}


/* ==========================================================================
   BODY LOCK
========================================================================== */

body.menu-open{

    overflow:hidden;

}


/* ==========================================================================
   RESPONSIVE
========================================================================== */

@media (max-width:900px) and (hover:none) and (pointer:coarse){

    .header-nav{
        display:none;
    }

    .header-button{
        display:none;
    }

    .menu-toggle{
        display:flex;
    }

}
@media (min-width:901px){

    .mobile-menu,
    .mobile-overlay,
    .menu-toggle{

        display:none !important;

    }

}
@media (max-width:768px){

    .header-container{

        padding-inline:20px;

        width:calc(100% - 20px);

        margin-top:10px;

    }

    .logo-icon{

        width:32px;

        height:32px;

    }

}

@media (max-width:480px){

    .header-container{

        padding-inline:16px;

    }

    .mobile-menu{

        width:100%;

        border-left:none;

    }

    .menu-toggle{

        width:48px;

        height:48px;

    }

}

@media (max-width:360px){

    .logo-text{

        font-size:.92rem;

    }

}

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

.header-button:focus-visible,
.menu-toggle:focus-visible,
.mobile-menu a:focus-visible,
.header-nav a:focus-visible {

    outline:none;

}