/* ==========================================================
   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);

}

/* ==========================================================
   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);

}

/* ==========================================================
   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:112px;

    }

    .nav{

        gap:16px;

    }

    .desktop-nav-wrapper{

        gap:16px;

    }

    .user-name{

        display:none;

    }

}

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

@media (max-width:768px){

    .header{

        min-height:64px;

    }

    .header::after{

        display:none;

    }

    .header-inner{

        min-height:64px;

        padding-inline:16px;

        gap:16px;

    }

    .header-brand{

        flex:1;

    }

    .logo{

        width:104px;

    }

    .desktop-nav{

        display:none;

    }

    .desktop-user{

        display:none;

    }

    .header-action{

        margin-left:auto;

    }

    .menu-toggle{

        display:flex;

    }

}

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

@media (max-width:480px){

    .header-inner{

        padding-inline:12px;

    }

    .logo{

        width:96px;

    }

    .mobile-menu{

        width:100%;

    }

    .mobile-menu-header{

        padding-inline:18px;

    }

    .mobile-profile{

        padding:20px 18px;

    }

    .mobile-nav{

        padding:16px;

    }

}

/* ==========================================================
   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;

    }

}