/*
|--------------------------------------------------------------------------
| RealDeen Global Header V5
|--------------------------------------------------------------------------
| Premium global navigation system.
|
| DESKTOP STAGE A1
| - Deliberately isolated from legacy header CSS.
| - Uses existing rdg-* markup.
| - Keeps logged-in / logged-out geometry stable.
| - Mobile is intentionally untouched until desktop approval.
|--------------------------------------------------------------------------
*/


@media (min-width: 1025px) {

    /* =========================================================
       HEADER DESIGN TOKENS
       ========================================================= */

    #rdgGlobalHeader {
        --rdgh-height: 76px;

        --rdgh-bg:
            linear-gradient(
                180deg,
                rgba(21, 30, 36, .985) 0%,
                rgba(18, 27, 33, .985) 100%
            );

        --rdgh-surface:
            rgba(255, 255, 255, .042);

        --rdgh-surface-hover:
            rgba(255, 255, 255, .075);

        --rdgh-line:
            rgba(125, 201, 206, .13);

        --rdgh-line-strong:
            rgba(112, 208, 214, .24);

        --rdgh-text:
            #edf6f6;

        --rdgh-muted:
            #a8babb;

        --rdgh-accent:
            #67cbd1;

        --rdgh-accent-strong:
            #80dce1;

        --rdgh-shadow:
            0 13px 35px rgba(0, 0, 0, .17);

        position: sticky;
        top: 0;
        z-index: 450;

        width: 100%;
        min-height: var(--rdgh-height);

        color: var(--rdgh-text);

        background:
            radial-gradient(
                circle at 13% -180%,
                rgba(76, 192, 199, .16),
                transparent 37%
            ),
            radial-gradient(
                circle at 87% -190%,
                rgba(55, 121, 135, .11),
                transparent 34%
            ),
            var(--rdgh-bg);

        border-bottom:
            1px solid var(--rdgh-line);

        box-shadow:
            0 1px 0 rgba(255, 255, 255, .018),
            var(--rdgh-shadow);

        isolation: isolate;
    }


    #rdgGlobalHeader::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;

        opacity: .30;

        background-image:
            linear-gradient(
                115deg,
                transparent 0,
                rgba(255,255,255,.016) 34%,
                transparent 60%
            ),
            repeating-linear-gradient(
                135deg,
                rgba(255,255,255,.010) 0,
                rgba(255,255,255,.010) 1px,
                transparent 1px,
                transparent 42px
            );
    }


    #rdgGlobalHeader::after {
        content: "";
        position: absolute;

        left: 18%;
        right: 18%;
        bottom: -1px;

        height: 1px;

        pointer-events: none;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(103, 203, 209, .28),
                transparent
            );
    }


    /* =========================================================
       LIGHT THEME
       ========================================================= */

    body[data-theme="light"] #rdgGlobalHeader {
        --rdgh-bg:
            linear-gradient(
                180deg,
                rgba(255,255,255,.985),
                rgba(247,251,251,.985)
            );

        --rdgh-surface:
            rgba(23, 72, 78, .045);

        --rdgh-surface-hover:
            rgba(19, 112, 122, .075);

        --rdgh-line:
            rgba(30, 112, 120, .12);

        --rdgh-line-strong:
            rgba(24, 135, 145, .22);

        --rdgh-text:
            #183138;

        --rdgh-muted:
            #687c81;

        --rdgh-accent:
            #187f89;

        --rdgh-accent-strong:
            #116c75;

        --rdgh-shadow:
            0 11px 28px rgba(26, 53, 58, .08);

        background:
            radial-gradient(
                circle at 13% -170%,
                rgba(43, 170, 179, .11),
                transparent 39%
            ),
            radial-gradient(
                circle at 87% -180%,
                rgba(77, 134, 145, .075),
                transparent 35%
            ),
            var(--rdgh-bg);
    }


    body[data-theme="light"] #rdgGlobalHeader::before {
        opacity: .18;
    }


    /* =========================================================
       THREE-ZONE DESKTOP GEOMETRY
       LEFT | CENTER | RIGHT
       ========================================================= */

    #rdgGlobalHeader .rdg-header-inner {
        width: calc(100% - 48px);
        max-width: 1560px;
        min-height: var(--rdgh-height);

        margin-inline: auto;

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

        align-items: center;

        column-gap: 28px;
    }


    #rdgGlobalHeader .rdg-header-left {
        min-width: 0;

        display: flex;
        align-items: center;

        gap: 13px;

        justify-self: start;
    }


    #rdgGlobalHeader .rdg-main-nav {
        justify-self: center;
    }


    #rdgGlobalHeader .rdg-header-right {
        min-width: 0;

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

        gap: 10px;

        justify-self: end;
    }


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

    #rdgGlobalHeader .rdg-menu-button {
        width: 42px;
        height: 42px;
        min-width: 42px;

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

        margin: 0;
        padding: 0;

        color: var(--rdgh-muted);

        background:
            var(--rdgh-surface);

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

        border-radius: 12px;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025);

        transition:
            color .18s ease,
            background .18s ease,
            border-color .18s ease,
            transform .18s ease,
            box-shadow .18s ease;
    }


    #rdgGlobalHeader .rdg-menu-button svg {
        width: 19px;
        height: 19px;
    }


    #rdgGlobalHeader .rdg-menu-button:hover {
        color: var(--rdgh-text);

        background:
            var(--rdgh-surface-hover);

        border-color:
            var(--rdgh-line-strong);

        transform:
            translateY(-1px);

        box-shadow:
            0 7px 17px rgba(0,0,0,.10);
    }


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

    #rdgGlobalHeader .rdg-brand {
        position: relative;

        min-height: 42px;

        display: grid;
        grid-template-columns:
            auto
            6px;

        grid-template-rows:
            auto
            auto;

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

        column-gap: 7px;
        row-gap: 3px;

        padding: 0;

        color: var(--rdgh-text) !important;

        text-decoration: none !important;

        white-space: nowrap;
    }


    #rdgGlobalHeader .rdg-brand-name {
        grid-column: 1;
        grid-row: 1;

        display: block;

        margin: 0;
        padding: 0;

        font-family:
            ProximaVara,
            "Helvetica Neue",
            Helvetica,
            Arial,
            sans-serif;

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

        font-weight: 780;

        letter-spacing: -.035em;

        text-transform: uppercase;

        color: var(--rdgh-text);

        text-shadow:
            0 1px 15px rgba(97,205,211,.08);
    }


    #rdgGlobalHeader .rdg-brand-dot {
        grid-column: 2;
        grid-row: 1;

        align-self: start;

        width: 6px;
        height: 6px;

        margin: 1px 0 0 0;

        border-radius: 50%;

        background:
            var(--rdgh-accent);

        box-shadow:
            0 0 15px rgba(103,203,209,.35);
    }


    #rdgGlobalHeader .rdg-brand::after {
        content: "READ • UNDERSTAND • REFLECT";

        position: static;

        grid-column:
            1 / -1;

        grid-row:
            2;

        display: block;

        margin: 0;
        padding: 0;

        color:
            var(--rdgh-muted);

        font-size: 7px;
        line-height: 8px;

        font-weight: 750;

        letter-spacing: .12em;

        text-transform: uppercase;

        opacity: .72;
    }


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

    #rdgGlobalHeader .rdg-main-nav {
        display: inline-flex;
        align-items: center;

        gap: 3px;

        padding: 5px;

        background:
            rgba(255,255,255,.025);

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

        border-radius: 14px;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.016);
    }


    body[data-theme="light"]
    #rdgGlobalHeader
    .rdg-main-nav {
        background:
            rgba(20,82,88,.025);
    }


    #rdgGlobalHeader .rdg-main-nav a {
        position: relative;

        min-height: 38px;

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

        padding:
            0 17px;

        color:
            var(--rdgh-muted) !important;

        border-radius: 10px;

        font-size: 14px;
        line-height: 1;

        font-weight: 650;

        letter-spacing: -.008em;

        text-decoration:
            none !important;

        transition:
            color .18s ease,
            background .18s ease,
            transform .18s ease;
    }


    #rdgGlobalHeader .rdg-main-nav a:hover {
        color:
            var(--rdgh-text) !important;

        background:
            var(--rdgh-surface-hover);

        transform:
            translateY(-1px);
    }


    #rdgGlobalHeader .rdg-main-nav a.active {
        color:
            var(--rdgh-text) !important;

        background:
            rgba(83, 190, 197, .105);

        box-shadow:
            inset 0 0 0 1px rgba(98, 202, 208, .10);
    }


    #rdgGlobalHeader .rdg-main-nav a.active::after {
        content: "";

        position: absolute;

        left: 19px;
        right: 19px;
        bottom: 4px;

        height: 1px;

        border-radius: 20px;

        background:
            var(--rdgh-accent);
    }


    /* =========================================================
       THEME SWITCHER
       ========================================================= */

    #rdgGlobalHeader .rdg-theme {
        display: inline-flex;
        align-items: center;

        gap: 2px;

        padding: 4px;

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

        border-radius: 12px;

        background:
            rgba(255,255,255,.024);
    }


    #rdgGlobalHeader .rdg-theme-button {
        min-width: 41px;
        height: 34px;

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

        gap: 6px;

        padding:
            0 9px;

        color:
            var(--rdgh-muted);

        background:
            transparent;

        border: 0;

        border-radius: 8px;

        font-size: 11px;
        font-weight: 650;

        transition:
            color .18s ease,
            background .18s ease,
            box-shadow .18s ease;
    }


    #rdgGlobalHeader .rdg-theme-button svg {
        width: 16px;
        height: 16px;
    }


    #rdgGlobalHeader .rdg-theme-button span {
        display: none;
    }


    #rdgGlobalHeader .rdg-theme-button:hover {
        color:
            var(--rdgh-text);

        background:
            var(--rdgh-surface-hover);
    }


    #rdgGlobalHeader .rdg-theme-button.active {
        color:
            var(--rdgh-text);

        background:
            rgba(83, 190, 197, .115);

        box-shadow:
            inset 0 0 0 1px rgba(92, 194, 201, .12);
    }


    /* =========================================================
       LOGGED-IN ICON ACTIONS
       ========================================================= */

    #rdgGlobalHeader .rdg-icon-button {
        position: relative;

        width: 42px;
        height: 42px;

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

        flex: 0 0 42px;

        color:
            var(--rdgh-muted) !important;

        background:
            var(--rdgh-surface);

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

        border-radius: 12px;

        text-decoration:
            none !important;

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


    #rdgGlobalHeader .rdg-icon-button svg {
        width: 18px;
        height: 18px;
    }


    #rdgGlobalHeader .rdg-icon-button:hover {
        color:
            var(--rdgh-text) !important;

        background:
            var(--rdgh-surface-hover);

        border-color:
            var(--rdgh-line-strong);

        transform:
            translateY(-1px);
    }


    #rdgGlobalHeader .rdg-counter {
        position: absolute;

        top: -5px;
        right: -5px;

        min-width: 19px;
        height: 19px;

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

        padding:
            0 5px;

        color:
            #062d31;

        background:
            var(--rdgh-accent-strong);

        border:
            2px solid #172127;

        border-radius: 20px;

        font-size: 9px;
        font-weight: 850;

        box-shadow:
            0 3px 9px rgba(0,0,0,.17);
    }


    body[data-theme="light"]
    #rdgGlobalHeader
    .rdg-counter {
        border-color:
            #ffffff;
    }


    /* =========================================================
       PROFILE CONTROL
       ========================================================= */

    #rdgGlobalHeader .rdg-profile-wrap {
        position: relative;
    }


    #rdgGlobalHeader .rdg-profile-button {
        min-height: 44px;

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

        gap: 9px;

        padding:
            4px 11px 4px 5px;

        color:
            var(--rdgh-text);

        background:
            var(--rdgh-surface);

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

        border-radius: 13px;

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


    #rdgGlobalHeader .rdg-profile-button:hover {
        background:
            var(--rdgh-surface-hover);

        border-color:
            var(--rdgh-line-strong);

        transform:
            translateY(-1px);
    }


    #rdgGlobalHeader .rdg-profile-avatar {
        width: 34px;
        height: 34px;

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

        flex: 0 0 34px;

        color:
            #07373c;

        background:
            linear-gradient(
                145deg,
                #80dce1,
                #55b9c0
            );

        border-radius: 10px;

        font-size: 12px;
        font-weight: 850;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.35);
    }


    #rdgGlobalHeader .rdg-profile-avatar.large {
        width: 42px;
        height: 42px;

        flex-basis: 42px;

        border-radius: 12px;

        font-size: 14px;
    }


    #rdgGlobalHeader .rdg-profile-name {
        max-width: 122px;

        overflow: hidden;
        text-overflow: ellipsis;

        white-space: nowrap;

        font-size: 12px;
        font-weight: 700;
    }


    #rdgGlobalHeader .rdg-profile-chevron {
        width: 14px;
        height: 14px;

        color:
            var(--rdgh-muted);
    }


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

    #rdgGlobalHeader .rdg-profile-menu {
        position: absolute;

        top: calc(100% + 12px);
        right: 0;

        width: 270px;

        padding: 10px;

        color:
            var(--rdgh-text);

        background:
            rgba(21, 31, 37, .985);

        border:
            1px solid rgba(112, 198, 204, .16);

        border-radius: 16px;

        box-shadow:
            0 20px 50px rgba(0,0,0,.28);

        backdrop-filter:
            blur(18px);

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


    body[data-theme="light"]
    #rdgGlobalHeader
    .rdg-profile-menu {
        color:
            #183138;

        background:
            rgba(255,255,255,.985);

        border-color:
            rgba(30,112,120,.13);

        box-shadow:
            0 20px 45px rgba(29,59,64,.14);
    }


    #rdgGlobalHeader .rdg-profile-menu-head {
        display: grid;

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

        align-items: center;

        gap: 11px;

        padding:
            7px 7px 12px;

        border-bottom:
            1px solid var(--rdgh-line);
    }


    #rdgGlobalHeader .rdg-profile-menu-head > div {
        min-width: 0;

        display: flex;
        flex-direction: column;

        gap: 3px;
    }


    #rdgGlobalHeader .rdg-profile-menu-head strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: 13px;
        font-weight: 750;
    }


    #rdgGlobalHeader .rdg-profile-menu-head small {
        color:
            var(--rdgh-muted);

        font-size: 10px;
    }


    #rdgGlobalHeader .rdg-profile-menu-links {
        display: grid;

        gap: 2px;

        padding:
            8px 0;
    }


    #rdgGlobalHeader .rdg-profile-menu-links a,
    #rdgGlobalHeader .rdg-logout-link {
        min-height: 38px;

        display: flex;
        align-items: center;

        padding:
            0 10px;

        color:
            var(--rdgh-muted) !important;

        border-radius: 9px;

        font-size: 12px;
        font-weight: 620;

        text-decoration:
            none !important;
    }


    #rdgGlobalHeader .rdg-profile-menu-links a:hover,
    #rdgGlobalHeader .rdg-logout-link:hover {
        color:
            var(--rdgh-text) !important;

        background:
            var(--rdgh-surface-hover);
    }


    #rdgGlobalHeader .rdg-logout-link {
        border-top:
            1px solid var(--rdgh-line);

        border-radius:
            0 0 9px 9px;

        color:
            #e9a5a5 !important;
    }


    /* =========================================================
       GUEST AUTH
       Keeps the same right-zone geometry.
       ========================================================= */

    #rdgGlobalHeader .rdg-guest-auth {
        display: flex;
        align-items: center;

        gap: 8px;
    }


    #rdgGlobalHeader .rdg-login-button,
    #rdgGlobalHeader .rdg-create-button {
        min-height: 42px;

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

        gap: 7px;

        padding:
            0 14px;

        border-radius: 11px;

        font-size: 12px;
        font-weight: 700;

        text-decoration:
            none !important;

        white-space: nowrap;

        transition:
            transform .18s ease,
            border-color .18s ease,
            background .18s ease,
            box-shadow .18s ease;
    }


    #rdgGlobalHeader .rdg-login-button {
        color:
            var(--rdgh-text) !important;

        background:
            var(--rdgh-surface);

        border:
            1px solid var(--rdgh-line);
    }


    #rdgGlobalHeader .rdg-create-button {
        color:
            #062f33 !important;

        background:
            linear-gradient(
                135deg,
                #7ad7dc,
                #58bcc3
            );

        border:
            1px solid rgba(151,231,235,.48);

        box-shadow:
            0 7px 17px rgba(49,160,168,.12);
    }


    #rdgGlobalHeader .rdg-login-button svg,
    #rdgGlobalHeader .rdg-create-button svg {
        width: 16px;
        height: 16px;
    }


    #rdgGlobalHeader .rdg-login-button:hover,
    #rdgGlobalHeader .rdg-create-button:hover {
        transform:
            translateY(-1px);
    }


    #rdgGlobalHeader .rdg-login-button:hover {
        border-color:
            var(--rdgh-line-strong);

        background:
            var(--rdgh-surface-hover);
    }


    #rdgGlobalHeader .rdg-create-button:hover {
        box-shadow:
            0 10px 22px rgba(49,160,168,.20);

        filter:
            brightness(1.035);
    }


    /* =========================================================
       LARGE-DESKTOP FIT PROTECTION

       Still desktop; this is not the mobile redesign.
       ========================================================= */

    @media (max-width: 1320px) {

        #rdgGlobalHeader .rdg-header-inner {
            width:
                calc(100% - 32px);

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

            column-gap:
                18px;
        }


        #rdgGlobalHeader .rdg-main-nav a {
            padding:
                0 12px;

            font-size:
                13px;
        }


        #rdgGlobalHeader .rdg-profile-name {
            display:
                none;
        }
    }


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

    #rdgGlobalHeader button:focus-visible,
    #rdgGlobalHeader a:focus-visible {
        outline:
            2px solid var(--rdgh-accent);

        outline-offset:
            3px;
    }


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

        #rdgGlobalHeader *,
        #rdgGlobalHeader *::before,
        #rdgGlobalHeader *::after {
            transition:
                none !important;
        }
    }
}


/* =========================================================
   rdg-brand-tagline-white-v1
   Desktop RealDeen tagline clarity refinement
   ========================================================= */

@media (min-width: 1025px) {

    #rdgGlobalHeader .rdg-brand::after {

        color:
            #ffffff !important;

        font-size:
            8.25px !important;

        line-height:
            9.5px !important;

        font-weight:
            700 !important;
    }

}