/* ============================================================
   BLOODMOON GRID
   Header stylesheet
============================================================

   Version : 2026-09-08 07:50
*/


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

.site-header {

    position:
        relative;

    z-index:
        1000;

    height:
        58px;

    border-bottom:

        1px solid
        rgba(20,30,40,0.07);

    background:
        rgba(255,255,255,0.98);

    box-shadow:

        0 2px 13px
        rgba(30,40,55,0.05);

}


.header-inner {

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

    height:
        58px;

    margin:
        0
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

}


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

.brand {

    display:
        inline-flex;

    flex-shrink:
        0;

    align-items:
        center;

    gap:
        9px;

    text-decoration:
        none;

}


.brand-logo {

    width:
        34px;

    height:
        34px;

    display:
        block;

    flex-shrink:
        0;

    object-fit:
        contain;

}


.brand-name {

    display:
        flex;

    align-items:
        baseline;

    gap:
        4px;

    white-space:
        nowrap;

}


.brand-name strong {

    color:
        #20242a;

    font-size:
        1rem;

    letter-spacing:
        -0.025em;

}


.brand-name span {

    color:
        var(--bloodmoon);

    font-size:
        0.95rem;

    font-weight:
        650;

}


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

.main-navigation {

    display:
        flex;

    flex:
        1;

    min-width:
        0;

    align-items:
        center;

    justify-content:
        center;

    gap:
        1px;

}


/* ============================================================
   DIRECT LINKS + DROPDOWN BUTTONS
============================================================ */

.nav-direct-link,
.nav-dropdown-toggle {

    min-height:
        30px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        3px;

    padding:

        0
        6px;

    border:
        0;

    border-radius:
        6px;

    background:
        transparent;

    color:
        #424952;

    text-decoration:
        none;

    font-family:
        inherit;

    font-size:
        0.64rem;

    font-weight:
        700;

    line-height:
        1;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:

        background 0.15s ease,
        color 0.15s ease;

}


.nav-direct-link:hover,
.nav-direct-link:focus,
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus,
.nav-dropdown.dropdown-open > .nav-dropdown-toggle {

    background:
        #f2f4f6;

    color:
        var(--bloodmoon);

    outline:
        none;

}


.nav-chevron {

    position:
        relative;

    top:
        0;

    width:
        18px;

    height:
        18px;

    display:
        inline-flex;

    flex-shrink:
        0;

    align-items:
        center;

    justify-content:
        center;

    margin-left:
        2px;

    border:
        1px solid
        rgba(196,18,37,0.14);

    border-radius:
        50%;

    background:
        #fff8f8;

    color:
        var(--bloodmoon);

    font-size:
        0.66rem;

    font-weight:
        800;

    line-height:
        1;

    opacity:
        1;

    transition:
        transform 0.16s ease,
        background 0.15s ease,
        border-color 0.15s ease;

}


.nav-dropdown.dropdown-open
.nav-chevron {

    transform:
        rotate(180deg);

    border-color:
        rgba(196,18,37,0.28);

    background:
        #ffffff;

}


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

.nav-dropdown {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

}


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

.nav-dropdown-menu {

    position:
        absolute;

    z-index:
        1100;

    top:
        calc(100% + 7px);

    left:
        50%;

    min-width:
        190px;

    padding:
        6px;

    display:
        none;

    transform:
        translateX(-50%);

    border:

        1px solid
        rgba(25,35,45,0.08);

    border-radius:
        10px;

    background:
        rgba(255,255,255,0.995);

    box-shadow:

        0 12px 30px
        rgba(25,35,45,0.13);

}


.nav-dropdown-menu::before {

    content:
        "";

    position:
        absolute;

    top:
        -8px;

    left:
        0;

    width:
        100%;

    height:
        8px;

}


.nav-dropdown.dropdown-open
> .nav-dropdown-menu {

    display:
        block;

}


/*
 * Desktop mouse support:
 * dropdowns also open naturally on hover.
 */

@media (min-width: 1181px) {

    .nav-dropdown:hover
    > .nav-dropdown-menu,

    .nav-dropdown:focus-within
    > .nav-dropdown-menu {

        display:
            block;

    }


    .nav-dropdown:hover
    > .nav-dropdown-toggle,

    .nav-dropdown:focus-within
    > .nav-dropdown-toggle {

        background:
            #f2f4f6;

        color:
            var(--bloodmoon);

    }

}


.nav-dropdown-menu a {

    min-height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:

        0
        10px;

    border-radius:
        7px;

    color:
        #424952;

    text-decoration:
        none;

    font-size:
        0.72rem;

    font-weight:
        650;

    white-space:
        nowrap;

}


.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus {

    background:
        #f5f6f8;

    color:
        var(--bloodmoon);

    outline:
        none;

}


.external-mark {

    color:
        #8d949d;

    font-size:
        0.68rem;

}


/* ============================================================
   ADMINISTRATION
============================================================ */

.admin-toggle {

    color:
        var(--bloodmoon);

}


.admin-dropdown-menu {

    min-width:
        205px;

}


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

.header-actions {

    display:
        flex;

    flex-shrink:
        0;

    align-items:
        center;

    gap:
        5px;

}


.header-icon-button,
.mobile-menu-toggle {

    width:
        32px;

    height:
        32px;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    border:

        1px solid
        var(--border);

    border-radius:
        8px;

    background:
        #ffffff;

    color:
        #4f5863;

    cursor:
        pointer;

}


.header-icon-button {

    display:
        flex;

}


.header-icon-button:hover,
.mobile-menu-toggle:hover {

    border-color:
        rgba(196,18,37,0.28);

    background:
        #fff8f8;

}


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

.mobile-menu-toggle {

    display:
        none;

    flex-direction:
        column;

    gap:
        4px;

}


.hamburger-line {

    width:
        15px;

    height:
        2px;

    display:
        block;

    border-radius:
        2px;

    background:
        #424952;

    transition:

        transform 0.18s ease,
        opacity 0.18s ease;

}


/* Hamburger -> X */

.site-header.menu-open
.mobile-menu-toggle
.hamburger-line:nth-child(1) {

    transform:
        translateY(6px)
        rotate(45deg);

}


.site-header.menu-open
.mobile-menu-toggle
.hamburger-line:nth-child(2) {

    opacity:
        0;

}


.site-header.menu-open
.mobile-menu-toggle
.hamburger-line:nth-child(3) {

    transform:
        translateY(-6px)
        rotate(-45deg);

}


/* ============================================================
   CONNECTED USER / BALANCE
============================================================ */

.header-balance {

    min-height:
        32px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 10px;

    border:
        1px solid
        rgba(196,18,37,0.14);

    border-radius:
        7px;

    background:
        #fff8f8;

    color:
        var(--bloodmoon);

    font-size:
        0.68rem;

    font-weight:
        800;

    white-space:
        nowrap;

}


.header-user-menu {

    position:
        relative;

    flex-shrink:
        0;

}


.header-user-toggle {

    min-height:
        32px;

    max-width:
        150px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0 11px;

    border:
        0;

    border-radius:
        7px;

    background:
        var(--bloodmoon);

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        0.70rem;

    font-weight:
        750;

    cursor:
        pointer;

}


.header-user-toggle:hover,
.header-user-menu.user-menu-open
.header-user-toggle {

    background:
        var(--bloodmoon-dark);

}


.header-user-name {

    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.header-user-chevron {

    flex-shrink:
        0;

    font-size:
        0.62rem;

    transition:
        transform 0.16s ease;

}


.header-user-menu.user-menu-open
.header-user-chevron {

    transform:
        rotate(180deg);

}


.header-user-dropdown {

    position:
        absolute;

    z-index:
        1300;

    top:
        calc(100% + 8px);

    right:
        0;

    width:
        225px;

    display:
        none;

    padding:
        7px;

    border:
        1px solid
        rgba(25,35,45,0.09);

    border-radius:
        10px;

    background:
        rgba(255,255,255,0.995);

    box-shadow:
        0 14px 32px
        rgba(25,35,45,0.15);

}


.header-user-menu.user-menu-open
.header-user-dropdown {

    display:
        block;

}


.header-user-summary {

    padding:
        8px 9px;

}


.header-user-summary strong {

    display:
        block;

    overflow:
        hidden;

    color:
        #30363d;

    font-size:
        0.76rem;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.header-user-summary span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--bloodmoon);

    font-size:
        0.68rem;

    font-weight:
        750;

}


.header-user-divider {

    height:
        1px;

    margin:
        5px 4px;

    background:
        rgba(35,45,55,0.08);

}


.header-user-dropdown-item {

    width:
        100%;

    min-height:
        34px;

    display:
        flex;

    align-items:
        center;

    padding:
        0 10px;

    border:
        0;

    border-radius:
        7px;

    background:
        transparent;

    color:
        #424952;

    text-decoration:
        none;

    font-family:
        inherit;

    font-size:
        0.72rem;

    font-weight:
        650;

    text-align:
        left;

    cursor:
        pointer;

}


.header-user-dropdown-item:hover,
.header-user-dropdown-item:focus {

    background:
        #f5f6f8;

    color:
        var(--bloodmoon);

    outline:
        none;

}


.header-user-logout-form {

    margin:
        0;

}


.header-user-logout {

    color:
        #a31627;

}


/* ============================================================
   SIGN IN
============================================================ */

.signin-button {

    min-height:
        32px;

    max-width:
        145px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    padding:

        0
        12px;

    margin-left:
        2px;

    border-radius:
        7px;

    background:
        var(--bloodmoon);

    color:
        #ffffff;

    text-decoration:
        none;

    text-overflow:
        ellipsis;

    font-size:
        0.72rem;

    font-weight:
        700;

    white-space:
        nowrap;

}


.signin-button:hover {

    background:
        var(--bloodmoon-dark);

}


/* ============================================================
   RESPONSIVE - SMALL DESKTOP
============================================================ */

@media (max-width: 1280px) and (min-width: 1181px) {

    .header-inner {

        gap:
            10px;

    }


    .nav-direct-link,
    .nav-dropdown-toggle {

        padding:

            0
            4px;

        font-size:
            0.60rem;

    }

}


/* ============================================================
   RESPONSIVE - TABLET / SMALL DESKTOP
============================================================ */

@media (max-width: 1180px) {

    .header-inner {

        justify-content:
            space-between;

    }


    .mobile-menu-toggle {

        display:
            flex;

    }


    /*
     * The navigation becomes a dropdown panel under the header.
     */

    .main-navigation {

        position:
            absolute;

        top:
            58px;

        right:
            max(
                12px,
                calc((100vw - var(--container)) / 2 + 24px)
            );

        left:
            auto;

        width:
            min(
                390px,
                calc(100vw - 24px)
            );

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        justify-content:
            flex-start;

        gap:
            3px;

        max-height:
            calc(100vh - 70px);

        overflow-y:
            auto;

        padding:
            10px;

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

        border-radius:
            0
            0
            12px
            12px;

        background:
            rgba(255,255,255,0.995);

        box-shadow:
            0 12px 28px
            rgba(30,40,55,0.12);

    }


    .site-header.menu-open
    .main-navigation {

        display:
            flex;

    }


    .nav-direct-link,
    .nav-dropdown-toggle {

        width:
            100%;

        min-height:
            40px;

        justify-content:
            flex-start;

        padding:
            0 12px;

        font-size:
            0.78rem;

        border-radius:
            7px;

    }


    .nav-dropdown-toggle
    .nav-chevron {

        margin-left:
            8px;

    }


    /*
     * On small screens, dropdown entries must be immediately
     * distinguishable from normal links.
     */

    .nav-dropdown-toggle {

        border:
            1px solid
            rgba(196,18,37,0.10);

        background:
            #fffafa;

        color:
            #343a42;

    }


    .nav-dropdown-toggle:hover,
    .nav-dropdown-toggle:focus,
    .nav-dropdown.dropdown-open
    > .nav-dropdown-toggle {

        border-color:
            rgba(196,18,37,0.24);

        background:
            #fff4f5;

        color:
            var(--bloodmoon);

    }


    .nav-dropdown-toggle
    .nav-chevron {

        top:
            0;

        width:
            21px;

        height:
            21px;

        display:
            inline-flex;

        flex-shrink:
            0;

        align-items:
            center;

        justify-content:
            center;

        border:
            1px solid
            rgba(196,18,37,0.16);

        border-radius:
            50%;

        background:
            #ffffff;

        color:
            var(--bloodmoon);

        font-size:
            0.66rem;

        font-weight:
            800;

        opacity:
            1;

    }


    .nav-dropdown {

        width:
            100%;

        display:
            block;

    }


    .nav-dropdown-menu {

        position:
            static;

        width:
            calc(100% - 12px);

        min-width:
            0;

        margin:
            5px
            0
            7px
            12px;

        padding:
            5px;

        transform:
            none;

        border:
            1px solid
            rgba(35,45,55,0.07);

        border-radius:
            8px;

        background:
            #f8f9fb;

        box-shadow:
            none;

    }


    .nav-dropdown-menu::before {

        display:
            none;

    }


    .nav-dropdown-menu a {

        min-height:
            36px;

        padding:
            0 11px;

        border-left:
            3px solid
            rgba(196,18,37,0.16);

        border-radius:
            5px;

        background:
            transparent;

        font-size:
            0.75rem;

        font-weight:
            650;

    }


    .nav-dropdown-menu a:hover,
    .nav-dropdown-menu a:focus {

        border-left-color:
            var(--bloodmoon);

        background:
            #ffffff;

    }

}


/* ============================================================
   RESPONSIVE - MOBILE
============================================================ */

@media (max-width: 560px) {

    .header-inner {

        width:
            calc(100% - 20px);

        gap:
            10px;

    }


    .brand {

        gap:
            7px;

    }


    .brand-logo {

        width:
            31px;

        height:
            31px;

    }


    .brand-name strong {

        font-size:
            0.92rem;

    }


    .brand-name span {

        font-size:
            0.88rem;

    }


    .header-actions {

        gap:
            4px;

    }


    .header-icon-button,
    .mobile-menu-toggle {

        width:
            30px;

        height:
            30px;

    }


    .header-balance {

        display:
            none;

    }


    .header-user-toggle {

        min-height:
            30px;

        max-width:
            128px;

        padding:
            0 9px;

        font-size:
            0.67rem;

    }


    .header-user-dropdown {

        width:
            min(
                225px,
                calc(100vw - 20px)
            );

    }


    .signin-button {

        min-height:
            30px;

        padding:
            0 10px;

        font-size:
            0.68rem;

    }


    .main-navigation {

        right:
            10px;

        width:
            calc(100vw - 20px);

        padding:
            10px;

    }

}


/* ============================================================
   RESPONSIVE - VERY SMALL MOBILE
============================================================ */

@media (max-width: 430px) {

    .brand-name span {

        display:
            none;

    }


    .header-icon-button {

        display:
            none;

    }


    .signin-button {

        padding:
            0 9px;

    }

}