/* ==========================================================
   PAHADI POKHAREL — SHARED PUBLIC HEADER
   ========================================================== */


/* ----------------------------------------------------------
   Brand links
---------------------------------------------------------- */

.public-brand-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.public-brand-link:hover,
.public-brand-link:focus,
.public-brand-link:visited {
    color: inherit;
    text-decoration: none;
}

.public-brand-link:focus-visible {
    outline: 3px solid rgba(242, 179, 33, .45);
    outline-offset: 4px;
    border-radius: 8px;
}


/* ----------------------------------------------------------
   Account area
---------------------------------------------------------- */

.public-user-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.public-user-name {
    color: #ffffff;
    font-weight: 800;
}

.public-user-role {
    color: rgba(255, 255, 255, .82);
}

.public-register-button {
    white-space: nowrap;
}

.public-logout-button {
    background: #b42323;
    color: #ffffff;
}

.public-logout-button:hover {
    background: #8f1c1c;
}


/* ----------------------------------------------------------
   Mobile toggle hidden on Desktop
---------------------------------------------------------- */

.public-mobile-menu-toggle {
    display: none;
}


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

@media (max-width: 768px) {

    .public-shared-header {
        position: relative;
    }


    /*
    ----------------------------------------------------------
    Header layout
    ----------------------------------------------------------
    */

    .public-shared-header .header-container {
        position: relative;

        width: 100%;
        max-width: none;

        display: grid;

        grid-template-columns:
            auto minmax(0, 1fr);

        align-items: center;

        column-gap: 10px;
        row-gap: 10px;

        min-height: 0;

        margin: 0;

        padding:
            12px
            58px
            12px
            14px;

        box-sizing: border-box;
    }


    /*
    ----------------------------------------------------------
    Logo
    ----------------------------------------------------------
    */

    .public-shared-header .logo-area {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .public-shared-header .site-logo {
        display: block;

        width: 58px;
        height: 58px;

        object-fit: contain;
    }


    /*
    ----------------------------------------------------------
    Title
    ----------------------------------------------------------
    */

    .public-shared-header .title-area {
        min-width: 0;
        text-align: left;
    }

    .public-shared-header .title-area h1 {
        margin: 0;

        font-size: 20px;
        line-height: 1.3;
    }

    .public-shared-header .title-area p {
        margin: 3px 0 0;

        font-size: 10px;
        line-height: 1.4;
    }


    /*
    ----------------------------------------------------------
    Login / Dashboard
    ----------------------------------------------------------
    */

    .public-shared-header .header-button-area {
        grid-column: 1 / -1;

        width: 100%;

        display: flex;
        justify-content: center;

        margin: 0;
    }

    .public-shared-header .public-user-actions {
        width: 100%;

        justify-content: center;

        gap: 7px;
    }

    .public-shared-header
    .public-user-actions
    .member-button {

        min-width: 0;

        height: 39px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        padding: 0 12px;

        font-size: 12px;

        white-space: nowrap;
    }

    .public-user-name,
    .public-user-role {
        width: 100%;
        text-align: center;
    }

    .public-user-name {
        font-size: 13px;
    }

    .public-user-role {
        font-size: 11px;
    }


    /*
    ----------------------------------------------------------
    Hamburger
    ----------------------------------------------------------
    */

    .public-mobile-menu-toggle {
        position: absolute;

        top: 20px;
        right: 12px;

        z-index: 1003;

        display: flex;

        width: 40px;
        height: 40px;

        align-items: center;
        justify-content: center;

        margin: 0;
        padding: 0;

        border: 0;
        border-radius: 8px;

        background: #f2b321;
        color: #0b365b;

        font-size: 22px;
        font-weight: 800;

        cursor: pointer;
    }


    /*
    ----------------------------------------------------------
    Navigation
    ----------------------------------------------------------
    */

    .public-shared-header .main-menu {
        position: relative;
    }

    .public-shared-header .menu-container {
        display: none;

        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0;

        background: #0b365b;
    }

    .public-shared-header
    .menu-container.mobile-menu-open {

        display: flex;

        flex-direction: column;
        align-items: stretch;
    }

    .public-shared-header
    .menu-container a {

        display: block;

        width: 100%;

        box-sizing: border-box;

        padding: 13px 18px;

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

        text-align: left;
    }

    .public-shared-header
    .menu-container a:last-child {

        border-bottom: 0;
    }

}


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

@media (max-width: 430px) {

    .public-shared-header .header-container {
        padding:
            10px
            53px
            10px
            10px;
    }

    .public-shared-header .site-logo {
        width: 50px;
        height: 50px;
    }

    .public-shared-header .title-area h1 {
        font-size: 17px;
    }

    .public-shared-header .title-area p {
        font-size: 9px;
    }

    .public-mobile-menu-toggle {
        top: 15px;
        right: 9px;

        width: 38px;
        height: 38px;

        font-size: 20px;
    }

}