/* ==========================================================
   Project : Compro Doodle
   Module  : Layout
   File    : header.css
   Version : 2.0.0
   Author  : Doodle Engineering
========================================================== */

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

.header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

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

    isolation:isolate;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:72px;

    background:
        url("/static/img/background_topbar.png")
        repeat top left;

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

    backdrop-filter:blur(14px);

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

}

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

.header::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:-36px;

    height:36px;

    pointer-events:none;

    background:

        linear-gradient(

            to bottom,

            rgba(255,255,255,.45),

            rgba(255,255,255,0)

        );

}

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

.header-inner{

    width:100%;

    max-width:1440px;

    min-height:72px;

    margin:0 auto;

    padding-inline:40px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

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

.header-brand{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    flex:0 0 auto;

}

.logo-link{

    display:flex;

    align-items:center;

    text-decoration:none;

}

.logo{

    display:block;

    width:122px;

    height:auto;

    margin:0;

}

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

.nav{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:28px;

}

.desktop-nav{

    display:flex;

    align-items:center;

}

.desktop-nav-wrapper{

    display:flex;

    align-items:center;

    gap:28px;

}

.nav a{

    position:relative;

    display:flex;

    align-items:center;

    height:72px;

    text-decoration:none;

    white-space:nowrap;

    color:#b18d34;

    font-size:14px;

    font-weight:600;

    letter-spacing:.02em;

    transition:

        color var(--transition-normal);

}

.nav a:hover{

    color:var(--color-primary);

}

.nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:18px;

    width:0;

    height:2px;

    border-radius:999px;

    background:var(--color-primary);

    transition:

        width var(--transition-normal);

}

.nav a:hover::after{

    width:100%;

}

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

.header-action{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    flex:0 0 auto;

}

/* ==========================================================
   USER MENU
========================================================== */

.user-dropdown{

    position:relative;

    display:flex;

    align-items:center;

    margin-left:var(--space-16);

}

.desktop-user{

    padding-left:var(--space-12);

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

}

.user-btn{

    display:flex;

    align-items:center;

    gap:var(--space-12);

    padding:8px 12px;

    background:transparent;

    border:none;

    border-radius:999px;

    cursor:pointer;

    transition:
        background-color var(--transition-normal),
        transform var(--transition-fast);

}

.user-btn:hover{

    background:rgba(230,67,135,.06);

}

.user-btn:active{

    transform:scale(.98);

}

.user-avatar{

    width:40px;

    height:40px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #ffffff;

    box-shadow:
        0 2px 10px rgba(0,0,0,.08);

    flex-shrink:0;

}

.user-name{

    color:var(--color-text);

    font-size:14px;

    font-weight:700;

    line-height:1;

}

.user-arrow{

    color:#b08b2e;

    font-size:11px;

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

}

.user-dropdown:hover .user-arrow{

    transform:rotate(180deg);

}

/* ==========================================================
   DROPDOWN
========================================================== */

.dropdown-content{

    display:none;

    position:absolute;

    top:calc(100% + 14px);

    right:0;

    min-width:320px;

    overflow:hidden;

    background:#ffffff;

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

    border-radius:20px;

    box-shadow:

        0 18px 40px rgba(0,0,0,.10),

        0 4px 12px rgba(0,0,0,.05);

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

    animation:headerDropdown .22s ease;

}

.user-dropdown:hover .dropdown-content{

    display:block;

}

@keyframes headerDropdown{

    from{

        opacity:0;

        transform:
            translateY(10px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}

.dropdown-header{

    display:flex;

    align-items:center;

    gap:16px;

    padding:22px;

    background:
        linear-gradient(
            180deg,
            rgba(230,67,135,.06),
            transparent
        );

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

}

.dropdown-avatar{

    width:58px;

    height:58px;

    border-radius:50%;

    object-fit:cover;

    flex-shrink:0;

}

.dropdown-name{

    font-size:15px;

    font-weight:700;

    color:var(--color-text);

}

.dropdown-email{

    margin-top:4px;

    color:var(--color-text-secondary);

    font-size:13px;

    word-break:break-word;

}

.dropdown-content hr{

    border:none;

    border-top:1px solid rgba(0,0,0,.05);

}

.dropdown-content a{

    display:flex;

    align-items:center;

    min-height:50px;

    padding:0 22px;

    color:var(--color-text);

    font-size:14px;

    font-weight:600;

    text-decoration:none;

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

}

.dropdown-content a:hover{

    background:rgba(230,67,135,.05);

    color:var(--color-primary);

}

.dropdown-item-form{

    display:block;

    width:100%;

    margin:0;

    padding:0;

}

.dropdown-logout-button{

    width:100%;

    min-height:50px;

    margin:0;

    padding:0 22px;

    border:none;

    background:transparent;

    color:var(--color-text);

    font-family:inherit;

    font-size:14px;

    font-weight:600;

    line-height:normal;

    text-align:left;

    cursor:pointer;

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

}

.dropdown-logout-button:hover{

    background:rgba(230,67,135,.05);

    color:var(--color-primary);

}

.dropdown-logout-button:focus-visible{

    outline:none;

    background:rgba(230,67,135,.05);

    color:var(--color-primary);

}

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

.menu-toggle{

    display:none;

    width:44px;

    height:44px;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:transparent;

    color:var(--color-text);

    font-size:24px;

    cursor:pointer;

    transition:
        background-color var(--transition-normal),
        transform var(--transition-fast);

}

.menu-toggle:hover{

    background:rgba(230,67,135,.08);

}

.menu-toggle:active{

    transform:scale(.96);

}

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

.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:360px;

    max-width:100%;

    height:100dvh;

    background:#ffffff;

    display:flex;

    flex-direction:column;

    overflow-y:auto;

    box-shadow:

        -20px 0 50px rgba(0,0,0,.12);

    transition:right .35s ease;

    z-index:var(--z-modal);

}

.mobile-menu.active{

    right:0;

}

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

.mobile-menu-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:72px;

    padding:0 24px;

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

}

.mobile-menu-brand{

    display:flex;

    align-items:center;

}

.mobile-menu-logo{

    width:120px;

    height:auto;

    display:block;

}

.mobile-menu-close{

    width:40px;

    height:40px;

    border:none;

    background:transparent;

    border-radius:50%;

    cursor:pointer;

    font-size:22px;

    color:var(--color-text);

    transition:
        background-color var(--transition-normal),
        transform var(--transition-fast);

}

.mobile-menu-close:hover{

    background:rgba(230,67,135,.08);

}

.mobile-menu-close:active{

    transform:scale(.96);

}

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

.mobile-profile{

    display:flex;

    align-items:center;

    gap:16px;

    padding:24px;

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

}

.mobile-profile-wrapper{

    display:flex;

    align-items:center;

    gap:16px;

    width:100%;

}

.mobile-profile-avatar{

    width:56px;

    height:56px;

    border-radius:50%;

    object-fit:cover;

    flex-shrink:0;

}

.mobile-profile-name{

    color:var(--color-text);

    font-size:15px;

    font-weight:700;

}

.mobile-profile-email{

    margin-top:4px;

    color:var(--color-text-secondary);

    font-size:13px;

    word-break:break-word;

}

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

.mobile-nav{

    display:flex;

    flex-direction:column;

    padding:20px;

}

.mobile-nav-group{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.mobile-nav a{

    display:flex;

    align-items:center;

    min-height:52px;

    padding:0 18px;

    border-radius:14px;

    text-decoration:none;

    color:var(--color-text);

    font-size:15px;

    font-weight:600;

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

}

.mobile-nav a:hover{

    background:rgba(230,67,135,.06);

    color:var(--color-primary);

}

.mobile-logout-form{

    display:block;

    width:100%;

    margin:0;

    padding:0;

}

.mobile-logout-button{

    width:100%;

    min-height:52px;

    padding:0 18px;

    border:none;

    border-radius:14px;

    background:transparent;

    color:var(--color-text);

    font-family:inherit;

    font-size:15px;

    font-weight:600;

    line-height:normal;

    text-align:left;

    cursor:pointer;

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

}

.mobile-logout-button:hover{

    background:rgba(230,67,135,.06);

    color:var(--color-primary);

}

.mobile-logout-button:focus-visible{

    outline:none;

    background:rgba(230,67,135,.06);

    color:var(--color-primary);

}

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

.overlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(5px);

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

    opacity:0;

    visibility:hidden;

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal);

    z-index:calc(var(--z-modal) - 1);

}

.overlay.active{

    opacity:1;

    visibility:visible;

}

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

@media (max-width:1200px){

    .header-inner{

        max-width:100%;

        padding-inline:32px;

        gap:24px;

    }

    .nav{

        gap:20px;

    }

    .desktop-nav-wrapper{

        gap:20px;

    }

    .nav a{

        font-size:13px;

    }

}

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

@media (max-width:1024px){

    .header{

        min-height:68px;

    }

    .header-inner{

        min-height:68px;

        padding-inline:24px;

    }

    .logo{

        width:auto;

    }

    .nav{

        gap:16px;

    }

    .desktop-nav-wrapper{

        gap:16px;

    }

    .user-name{

        display:none;

    }

}

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

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

@media (max-width:768px){

    .header{

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

    }

    .header::after{

        display:none;

    }

    .header-inner{

        position:relative;

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

        padding-inline:
            var(--space-16);

        gap:
            var(--space-16);

    }

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

    .header-brand{

        position:absolute;

        top:50%;

        left:50%;

        z-index:
            var(--z-base);

        display:flex;

        align-items:center;

        justify-content:center;

        flex:0 0 auto;

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

    }

    .logo{

        display:block;

        width:
            var(--space-120);

        height:auto;

        max-height:
            var(--space-56);

        object-fit:contain;

        margin:0;

    }

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

    .desktop-nav{

        display:none;

    }

    .desktop-user{

        display:none;

    }

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

    .header-action{

        position:relative;

        z-index:
            var(--z-fixed);

        display:flex;

        align-items:center;

        justify-content:flex-end;

        gap:
            var(--space-4);

        margin-left:auto;

    }

    /* ======================================================
       CHAT
    ====================================================== */

    .header-chat{

        display:flex;

        align-items:center;

        justify-content:center;

        width:
            var(--button-height-sm);

        height:
            var(--button-height-sm);

        flex:0 0 auto;

        color:
            var(--color-primary);

        text-decoration:none;

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

        transition:
            background-color
                var(--duration-normal)
                var(--ease-standard),

            color
                var(--duration-normal)
                var(--ease-standard);

    }

    .header-chat:hover{

        background:
            var(--color-primary-light);

    }

    .header-chat:focus-visible{

        outline:
            var(--border-width-normal)
            solid
            var(--color-primary);

        outline-offset:
            var(--space-4);

    }

    .header-chat-icon{

        width:
            var(--icon-md);

        height:
            var(--icon-md);

        fill:none;

        stroke:
            currentColor;

        stroke-width:1.8;

        stroke-linecap:round;

        stroke-linejoin:round;

    }

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

    .menu-toggle{

        display:flex;

    }

}

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

@media (max-width:480px){

    .header-inner{

        padding-inline:
            var(--space-12);

    }

    .logo{

        width:
            var(--space-120);

        max-height:
            var(--space-56);

    }

    .header-action{

        gap:
            var(--space-0);

    }

    .mobile-menu{

        width:100%;

    }

    .mobile-menu-header{

        padding-inline:
            var(--space-16);

    }

    .mobile-profile{

        padding:
            var(--space-16);

    }

    .mobile-nav{

        padding:
            var(--space-16);

    }

}

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

@media (min-width:1600px){

    .header-inner{

        max-width:1560px;

    }

}

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

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

    .header::after,

    .menu-toggle,

    .user-btn,

    .dropdown-content,

    .mobile-menu,

    .overlay,

    .mobile-menu-close{

        transition:none !important;

        animation:none !important;

    }

}