/* =========================================================
   MAYOBA LEARNER HEADER
   File: header.css
   ========================================================= */


/* =========================================================
   BOX SIZING
   ========================================================= */

.topbar,
.topbar *,
.topbar *::before,
.topbar *::after {
    box-sizing: border-box;
}


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

.topbar {
    position: fixed;

    left: 250px;
    right: 0;
    top: 0;

    height: clamp(64px, 4.8vw, 74px);

    display: flex;
    align-items: center;

    padding-inline:
        clamp(12px, 1.6vw, 24px);

    gap:
        clamp(8px, 1vw, 18px);

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

    border-bottom: 1px solid #e4ebf8;

    z-index: 100;

    /*
     * Never clip the notification badge or profile controls.
     */
    overflow: visible;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}


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

.topnav {
    display: flex;
    align-items: center;

    /*
     * Navigation consumes all available space.
     */
    flex: 1 1 auto;

    min-width: 0;

    gap:
        clamp(3px, 0.55vw, 12px);

    overflow-x: auto;
    overflow-y: hidden;

    white-space: nowrap;

    scrollbar-width: none;

    overscroll-behavior-x: contain;
}

.topnav::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   NAVIGATION LINKS
   ========================================================= */

.topnav a {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height:
        clamp(40px, 3vw, 46px);

    padding-inline:
        clamp(7px, 0.75vw, 17px);

    border-radius:
        clamp(8px, 0.65vw, 11px);

    /*
     * Fully responsive typography.
     *
     * The font continuously scales with viewport width.
     * It never becomes microscopic or excessively large.
     */
    font-size:
        clamp(
            0.78rem,
            0.82vw + 0.15rem,
            1.06rem
        );

    font-weight: 700;

    line-height: 1.2;

    color: #0e2061;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}


/* =========================================================
   NAVIGATION HOVER
   ========================================================= */

.topnav a:hover {
    background: #f1f5ff;

    color: #174fc5;
}


/* =========================================================
   ACTIVE NAVIGATION
   ========================================================= */

.topnav a.active {
    background: #eef4ff;

    color: #0e2b83;

    padding-inline:
        clamp(8px, 0.85vw, 18px);
}


/* =========================================================
   HOME ICON
   ========================================================= */

.topnav a.active .icon {
    width:
        clamp(18px, 1.35vw, 23px);

    height:
        clamp(18px, 1.35vw, 23px);

    margin-right:
        clamp(4px, 0.45vw, 8px);

    display: block;

    flex: 0 0 auto;
}


/* =========================================================
   SEARCH BUTTON
   ========================================================= */

.top-search-button {
    width:
        clamp(40px, 3vw, 46px);

    height:
        clamp(40px, 3vw, 46px);

    flex:
        0 0 clamp(40px, 3vw, 46px);

    padding: 0;

    display: grid;
    place-items: center;

    border:
        1px solid #d9e4f6;

    border-radius:
        clamp(9px, 0.75vw, 12px);

    background: #f5f8ff;

    color: #173781;

    cursor: pointer;

    appearance: none;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}


.top-search-button:hover {
    background: #eaf1ff;

    border-color: #cbdaf3;

    color: #0e2b83;
}


.top-search-button:active {
    transform: scale(0.96);
}


.top-search-button:focus-visible {
    outline:
        3px solid rgba(23, 79, 197, 0.18);

    outline-offset: 2px;
}


.top-search-button .icon {
    width:
        clamp(20px, 1.5vw, 23px);

    height:
        clamp(20px, 1.5vw, 23px);
}


/* =========================================================
   RIGHT SIDE ACTIONS
   ========================================================= */

.top-actions {
    display: flex;
    align-items: center;

    flex:
        0 0 auto;

    min-width: max-content;

    gap:
        clamp(5px, 0.65vw, 14px);

    height: 100%;
}


/* =========================================================
   NOTIFICATION BELL
   ========================================================= */

.bell {
    position: relative;

    width:
        clamp(38px, 2.9vw, 44px);

    height:
        clamp(38px, 2.9vw, 44px);

    flex:
        0 0 clamp(38px, 2.9vw, 44px);

    padding: 0;

    display: grid;
    place-items: center;

    color: #173781;

    text-decoration: none;

    border-radius:
        clamp(8px, 0.65vw, 11px);

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}


.bell:hover {
    background: #f1f5ff;

    color: #0e2b83;
}


.bell:focus-visible {
    outline:
        3px solid rgba(23, 79, 197, 0.18);

    outline-offset: 2px;
}


.bell .icon {
    width:
        clamp(21px, 1.55vw, 24px);

    height:
        clamp(21px, 1.55vw, 24px);
}


/* =========================================================
   NOTIFICATION BADGE
   ========================================================= */

.notif {
    position: absolute;

    top:
        clamp(-2px, -0.1vw, 0px);

    right:
        clamp(-2px, -0.1vw, 0px);

    min-width:
        clamp(17px, 1.35vw, 20px);

    height:
        clamp(17px, 1.35vw, 20px);

    padding-inline:
        clamp(3px, 0.35vw, 5px);

    display: none;

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

    border:
        clamp(1px, 0.12vw, 2px)
        solid #ffffff;

    border-radius: 999px;

    background: #e42a42;

    color: #ffffff;

    font-size:
        clamp(
            0.55rem,
            0.55vw,
            0.68rem
        );

    font-weight: 800;

    line-height: 1;

    text-align: center;

    white-space: nowrap;

    box-shadow:
        0 1px 4px rgba(228, 42, 66, 0.22);

    pointer-events: none;
}


/* =========================================================
   USER PROFILE LINK
   ========================================================= */

.user-profile-link {
    display: flex;
    align-items: center;

    flex:
        0 1 auto;

    min-width: 0;

    max-width:
        clamp(150px, 14vw, 220px);

    gap:
        clamp(6px, 0.65vw, 11px);

    padding:
        clamp(2px, 0.3vw, 5px);

    color: inherit;

    text-decoration: none;

    border-radius:
        clamp(8px, 0.7vw, 12px);

    transition:
        background-color 0.18s ease;
}


.user-profile-link:hover {
    background: #f5f8ff;

    text-decoration: none;
}


.user-profile-link:focus-visible {
    outline:
        3px solid rgba(23, 79, 197, 0.18);

    outline-offset: 2px;
}


/* =========================================================
   AVATAR
   ========================================================= */

.avatar {
    position: relative;

    width:
        clamp(36px, 3vw, 44px);

    height:
        clamp(36px, 3vw, 44px);

    min-width:
        clamp(36px, 3vw, 44px);

    min-height:
        clamp(36px, 3vw, 44px);

    flex:
        0 0 clamp(36px, 3vw, 44px);

    overflow: hidden;

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

    border:
        clamp(1px, 0.1vw, 2px)
        solid #d8e3f5;

    border-radius: 50%;

    background: #eef4ff;

    color: #173781;

    font-size:
        clamp(
            0.7rem,
            0.75vw,
            0.95rem
        );

    font-weight: 800;

    line-height: 1;

    user-select: none;
}


/* =========================================================
   PROFILE IMAGE
   ========================================================= */

.avatar-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    border-radius: 50%;
}


/* =========================================================
   AVATAR INITIALS FALLBACK
   ========================================================= */

.avatar-initials {
    width: 100%;
    height: 100%;

    display: none;

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

    border-radius: 50%;

    background: #0b2270;

    color: #ffffff;

    font-size:
        clamp(
            0.7rem,
            0.75vw,
            0.95rem
        );

    font-weight: 800;

    line-height: 1;
}


/* =========================================================
   USER INFORMATION
   ========================================================= */

.user-copy {
    flex:
        1 1 auto;

    min-width: 0;

    max-width:
        clamp(90px, 10vw, 160px);

    overflow: hidden;

    line-height: 1.15;

    white-space: nowrap;
}


/* =========================================================
   USER NAME
   ========================================================= */

.user-copy b {
    display: block;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size:
        clamp(
            0.78rem,
            0.78vw + 0.15rem,
            1rem
        );

    font-weight: 800;

    line-height: 1.2;

    color: #12205c;
}


/* =========================================================
   USER ROLE
   ========================================================= */

.user-copy span {
    display: block;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    margin-top:
        clamp(1px, 0.2vw, 3px);

    font-size:
        clamp(
            0.65rem,
            0.58vw + 0.1rem,
            0.82rem
        );

    font-weight: 500;

    line-height: 1.2;

    color: #7886a8;
}


/* =========================================================
   USER CHEVRON
   ========================================================= */

.user-chevron {
    width:
        clamp(18px, 1.65vw, 24px);

    height:
        clamp(18px, 1.65vw, 24px);

    flex:
        0 0 clamp(18px, 1.65vw, 24px);

    display: grid;
    place-items: center;

    color: #0d2473;

    pointer-events: none;
}


.user-chevron .icon {
    width:
        clamp(15px, 1.3vw, 19px);

    height:
        clamp(15px, 1.3vw, 19px);
}


/* =========================================================
   DESKTOP SPACE MANAGEMENT
   ========================================================= */

/*
 * At narrower desktop widths, the navigation remains
 * horizontally scrollable instead of shrinking its text
 * into unreadable sizes or allowing links to overlap.
 */

@media (max-width: 1150px) {

    .topbar {
        left: 250px;
    }

    .user-copy {
        max-width:
            clamp(80px, 8vw, 125px);
    }

}


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

@media (max-width: 1000px) {

    .topbar {
        left: 0;

        width: 100%;
    }

    .topnav a {
        font-size:
            clamp(
                0.75rem,
                1.15vw,
                0.95rem
            );
    }

}


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

@media (max-width: 900px) {

    .topbar {
        position: relative;

        left: 0;
        right: auto;
        top: auto;

        width: 100%;

        height: auto;

        min-height:
            clamp(58px, 10vw, 66px);

        padding-block:
            clamp(8px, 1.8vw, 12px);

        padding-inline:
            clamp(10px, 2vw, 16px);
    }


    /*
     * Desktop navigation disappears on mobile.
     */

    .topnav {
        display: none;
    }


    /*
     * Search moves toward the right.
     */

    .top-search-button {
        margin-left: auto;
    }


    .top-actions {
        gap:
            clamp(4px, 1vw, 8px);

        height: auto;
    }


    /*
     * Keep the avatar visible.
     */

    .user-profile-link {
        max-width: none;

        padding: 2px;
    }


    .user-copy {
        display: none;
    }


    .user-chevron {
        display: none;
    }

}


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

@media (max-width: 480px) {

    .topbar {
        padding-inline:
            clamp(8px, 2.5vw, 12px);
    }


    .top-search-button {
        width:
            clamp(36px, 10vw, 40px);

        height:
            clamp(36px, 10vw, 40px);

        flex-basis:
            clamp(36px, 10vw, 40px);
    }


    .bell {
        width:
            clamp(34px, 9.5vw, 38px);

        height:
            clamp(34px, 9.5vw, 38px);

        flex-basis:
            clamp(34px, 9.5vw, 38px);
    }


    .avatar {
        width:
            clamp(34px, 9.5vw, 38px);

        height:
            clamp(34px, 9.5vw, 38px);

        min-width:
            clamp(34px, 9.5vw, 38px);

        min-height:
            clamp(34px, 9.5vw, 38px);

        flex-basis:
            clamp(34px, 9.5vw, 38px);
    }


    .user-chevron {
        display: none;
    }

}












/* ============================================================
   MAYOBA SEARCH MODAL
   ============================================================ */

.search-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding:
        clamp(1rem, 4vw, 4rem)
        clamp(0.75rem, 3vw, 2rem);

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transition:
        opacity 180ms ease,
        visibility 180ms ease;
}


/* ============================================================
   OPEN STATE
   ============================================================ */

.search-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}


/* ============================================================
   BACKDROP
   ============================================================ */

.search-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgb(15 23 42 / 58%);

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


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

.search-modal-dialog {
    position: relative;
    z-index: 1;

    width: min(
        100%,
        clamp(30rem, 68vw, 52rem)
    );

    margin-top:
        clamp(
            0.5rem,
            3vh,
            2.5rem
        );

    padding:
        clamp(
            1rem,
            2.5vw,
            2rem
        );

    background: #ffffff;

    border:
        1px solid
        rgb(226 232 240 / 90%);

    border-radius:
        clamp(
            0.75rem,
            1.2vw,
            1.25rem
        );

    box-shadow:
        0
        clamp(1rem, 3vw, 2.5rem)
        clamp(2rem, 7vw, 5rem)
        rgb(15 23 42 / 24%);

    transform: translateY(
        clamp(
            -1rem,
            -2vw,
            -0.25rem
        )
    );

    transition:
        transform 180ms ease;
}


.search-modal.is-open
.search-modal-dialog {
    transform: translateY(0);
}


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

.search-modal-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap:
        clamp(
            0.75rem,
            2vw,
            1.5rem
        );

    margin-bottom:
        clamp(
            1rem,
            2vw,
            1.5rem
        );
}


/* ============================================================
   MODAL HEADING
   ============================================================ */

.search-modal-heading {
    display: flex;

    align-items: center;

    min-width: 0;

    gap:
        clamp(
            0.6rem,
            1.2vw,
            1rem
        );
}


.search-modal-icon {
    display: inline-flex;

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

    width:
        clamp(
            2.25rem,
            4vw,
            3.25rem
        );

    height:
        clamp(
            2.25rem,
            4vw,
            3.25rem
        );

    flex: 0 0 auto;

    border-radius: 50%;

    background: #f1f5f9;

    color: #0f172a;
}


.search-modal-icon .icon {
    width:
        clamp(
            1rem,
            1.7vw,
            1.4rem
        );

    height:
        clamp(
            1rem,
            1.7vw,
            1.4rem
        );
}


/* ============================================================
   TITLE
   ============================================================ */

.search-modal-heading h2 {
    margin: 0;

    color: #0f172a;

    font-family: inherit;

    font-size:
        clamp(
            1rem,
            1vw + 0.55rem,
            1.5rem
        );

    font-weight: 700;

    line-height: 1.2;
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.search-modal-heading p {
    margin:
        clamp(
            0.2rem,
            0.4vw,
            0.35rem
        )
        0
        0;

    color: #64748b;

    font-family: inherit;

    font-size:
        clamp(
            0.68rem,
            0.45vw + 0.35rem,
            0.9rem
        );

    line-height: 1.4;
}


/* ============================================================
   CLOSE BUTTON
   ============================================================ */

.search-modal-close {
    display: inline-flex;

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

    width:
        clamp(
            2.1rem,
            3.5vw,
            2.8rem
        );

    height:
        clamp(
            2.1rem,
            3.5vw,
            2.8rem
        );

    flex: 0 0 auto;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #f1f5f9;

    color: #475569;

    cursor: pointer;

    transition:
        background 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}


.search-modal-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}


.search-modal-close:active {
    transform: scale(0.94);
}


.search-modal-close .icon {
    width:
        clamp(
            0.9rem,
            1.3vw,
            1.15rem
        );

    height:
        clamp(
            0.9rem,
            1.3vw,
            1.15rem
        );
}


/* ============================================================
   SEARCH FORM
   ============================================================ */

.dashboard-search-form {
    display: flex;

    align-items: stretch;

    width: 100%;

    gap:
        clamp(
            0.5rem,
            0.8vw,
            0.75rem
        );
}


/* ============================================================
   INPUT WRAPPER
   ============================================================ */

.dashboard-search-input-wrapper {
    position: relative;

    display: flex;

    align-items: center;

    min-width: 0;

    flex: 1 1 auto;
}


/* ============================================================
   SEARCH INPUT ICON
   ============================================================ */

.dashboard-search-input-icon {
    position: absolute;

    left:
        clamp(
            0.75rem,
            1.4vw,
            1.1rem
        );

    width:
        clamp(
            1rem,
            1.5vw,
            1.3rem
        );

    height:
        clamp(
            1rem,
            1.5vw,
            1.3rem
        );

    color: #64748b;

    pointer-events: none;
}


/* ============================================================
   SEARCH INPUT
   ============================================================ */

.dashboard-search-input-wrapper input {
    width: 100%;

    min-width: 0;

    box-sizing: border-box;

    padding:
        clamp(
            0.7rem,
            1.15vw,
            1rem
        )
        clamp(
            2.5rem,
            4vw,
            3.25rem
        )
        clamp(
            0.7rem,
            1.15vw,
            1rem
        )
        clamp(
            2.5rem,
            4vw,
            3.25rem
        );

    border:
        1px solid
        #dbe2ea;

    border-radius:
        clamp(
            0.5rem,
            0.8vw,
            0.75rem
        );

    outline: none;

    background: #f8fafc;

    color: #0f172a;

    font-family: inherit;

    font-size:
        clamp(
            0.78rem,
            0.5vw + 0.4rem,
            1rem
        );

    line-height: 1.4;

    transition:
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}


.dashboard-search-input-wrapper input::placeholder {
    color: #94a3b8;
}


.dashboard-search-input-wrapper input:hover {
    border-color: #cbd5e1;
}


.dashboard-search-input-wrapper input:focus {
    border-color: #94a3b8;

    background: #ffffff;

    box-shadow:
        0
        0
        0
        clamp(
            2px,
            0.3vw,
            4px
        )
        rgb(15 23 42 / 7%);
}


/* ============================================================
   REMOVE NATIVE SEARCH CLEAR
   ============================================================ */

.dashboard-search-input-wrapper input::-webkit-search-cancel-button {
    appearance: none;
    -webkit-appearance: none;
}


/* ============================================================
   CLEAR BUTTON
   ============================================================ */

.dashboard-search-clear {
    position: absolute;

    right:
        clamp(
            0.4rem,
            0.7vw,
            0.65rem
        );

    display: inline-flex;

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

    width:
        clamp(
            1.75rem,
            2.5vw,
            2.2rem
        );

    height:
        clamp(
            1.75rem,
            2.5vw,
            2.2rem
        );

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: #64748b;

    cursor: pointer;

    transition:
        background 150ms ease,
        color 150ms ease;
}


.dashboard-search-clear:hover {
    background: #e2e8f0;
    color: #0f172a;
}


.dashboard-search-clear .icon {
    width:
        clamp(
            0.8rem,
            1.1vw,
            1rem
        );

    height:
        clamp(
            0.8rem,
            1.1vw,
            1rem
        );
}


/* ============================================================
   SEARCH SUBMIT BUTTON
   ============================================================ */

.dashboard-search-submit {
    display: inline-flex;

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

    gap:
        clamp(
            0.3rem,
            0.6vw,
            0.55rem
        );

    flex: 0 0 auto;

    padding:
        clamp(
            0.7rem,
            1.15vw,
            1rem
        )
        clamp(
            0.9rem,
            1.7vw,
            1.5rem
        );

    border: 0;

    border-radius:
        clamp(
            0.5rem,
            0.8vw,
            0.75rem
        );

    background: #0f172a;

    color: #ffffff;

    font-family: inherit;

    font-size:
        clamp(
            0.75rem,
            0.45vw + 0.35rem,
            0.95rem
        );

    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background 150ms ease,
        transform 150ms ease;
}


.dashboard-search-submit:hover {
    background: #1e293b;
}


.dashboard-search-submit:active {
    transform: scale(0.97);
}


.dashboard-search-submit .icon {
    width:
        clamp(
            0.85rem,
            1.2vw,
            1.1rem
        );

    height:
        clamp(
            0.85rem,
            1.2vw,
            1.1rem
        );
}


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

body.search-modal-open {
    overflow: hidden;
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.search-modal button:focus-visible,
.search-modal input:focus-visible {
    outline:
        clamp(
            2px,
            0.2vw,
            3px
        )
        solid
        #64748b;

    outline-offset:
        clamp(
            2px,
            0.3vw,
            4px
        );
}


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

@media (max-width: 560px) {

    .search-modal {
        align-items: center;

        padding:
            clamp(
                0.65rem,
                3vw,
                1rem
            );
    }


    .search-modal-dialog {
        width: 100%;

        margin-top: 0;

        padding:
            clamp(
                0.9rem,
                4vw,
                1.4rem
            );
    }


    .search-modal-header {
        margin-bottom:
            clamp(
                0.8rem,
                3vw,
                1.2rem
            );
    }


    .search-modal-heading p {
        display: none;
    }


    .dashboard-search-form {
        flex-direction: column;
    }


    .dashboard-search-submit {
        width: 100%;

        min-height:
            clamp(
                2.6rem,
                10vw,
                3rem
            );
    }

}


/* ============================================================
   VERY SMALL SCREENS
   ============================================================ */

@media (max-width: 360px) {

    .search-modal-heading {
        gap: 0.5rem;
    }


    .search-modal-icon {
        display: none;
    }

}