/*
 * WrsTrend Mobile Header Layout (Unified & Robust)
 * Uses high-specificity flexbox resets to completely neutralize parent theme positioning / negative margins.
 * Ordered media queries: 992px -> 480px -> 360px.
 */

@media (max-width: 992px) {
    html body #meanmenu.rt-header-menu {
        position: relative !important;
        z-index: 1000 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    html body #meanmenu .mean-bar,
    html body #meanmenu .mean-bar * {
        box-sizing: border-box !important;
    }

    html body #meanmenu .mean-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
        height: 56px !important;
        min-height: 56px !important;
        background: #fff !important;
        border-bottom: 2px solid #0b57ff !important;
        position: relative !important;
        overflow: visible !important;
    }

    html body #meanmenu .mean-logo-area {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        max-width: 110px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html body #meanmenu .mean-logo-area .logo-small,
    html body #meanmenu .mean-bar .mean-logo-area img.logo-small,
    html body #meanmenu .mean-bar img.logo-small {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 28px !important;
        padding: 0 !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    html body #meanmenu .header-mobile-icons {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        flex: 1 1 auto !important;
        height: 34px !important;
        padding: 0 !important;
        margin: 0 6px 0 auto !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        float: none !important;
        clear: both !important;
        overflow: visible !important;
    }

    html body #meanmenu .header-mobile-icons > a,
    html body #meanmenu .header-mobile-icons > div,
    html body #meanmenu .header-mobile-icons > span {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    html body #meanmenu .header-mobile-icons a.header-btn {
        width: auto !important;
        min-width: 74px !important;
        max-width: 80px !important;
        height: 34px !important;
        padding: 0 8px !important;
        gap: 4px !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, #0b57ff, #0f72ff) !important;
        color: #fff !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }

    html body #meanmenu .header-mobile-icons a.header-btn span {
        display: inline !important;
    }

    html body #meanmenu .header-mobile-icons a.header-btn i {
        font-size: 12px !important;
    }

    html body #meanmenu .header-mobile-icons a.header-chat-icon,
    html body #meanmenu .header-mobile-icons a.header-login-icon {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        background: #f3f7ff !important;
        color: #0b57ff !important;
        font-size: 16px !important;
        line-height: 1 !important;
        text-decoration: none !important;
        vertical-align: middle !important;
    }

    html body #meanmenu .header-mobile-icons a.header-chat-icon i,
    html body #meanmenu .header-mobile-icons a.header-login-icon i {
        position: absolute !important;
        top: calc(50% + 1px) !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        line-height: 1 !important;
    }

    html body #meanmenu .header-mobile-icons a.header-chat-icon .rtcl-unread-badge {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        z-index: 3 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 16px !important;
        width: auto !important;
        height: 16px !important;
        padding: 0 4px !important;
        border-radius: 999px !important;
        background: #ef4444 !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-align: center !important;
        transform: none !important;
    }

    html body #meanmenu .header-mobile-icons .header-wrs-pill {
        gap: 4px !important;
        min-width: 60px !important;
        max-width: 68px !important;
        height: 34px !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, #64748b, #334155) !important;
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }

    html body #meanmenu .header-mobile-icons .header-wrs-pill .wrs-pill-icon {
        width: 12px !important;
        height: 12px !important;
        flex: 0 0 auto !important;
    }

    html body #meanmenu .header-mobile-icons .header-wrs-pill .wrs-pill-value {
        min-width: 0 !important;
        max-width: 4.8ch !important;
        overflow: hidden !important;
        color: inherit !important;
        line-height: 1 !important;
        font-variant-numeric: tabular-nums !important;
    }

    html body #meanmenu .sidebarBtn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background: #f3f7ff !important;
        cursor: pointer !important;
    }

    html body #meanmenu .sidebarBtn span {
        width: 16px !important;
        background-color: #334155 !important;
    }

    html body #meanmenu .sidebarBtn span::before,
    html body #meanmenu .sidebarBtn span::after {
        background-color: #334155 !important;
    }

    html body #meanmenu .rt-slide-nav {
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: calc(100dvh - 56px) !important;
        overflow-y: auto !important;
        background: #0f172a !important;
        border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
        box-shadow: 0 18px 36px rgba(2, 6, 23, 0.28) !important;
    }

    html body #meanmenu .offscreen-navigation li {
        border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
    }

    html body #meanmenu .offscreen-navigation li > a {
        color: #e5e7eb !important;
        font-size: 15px !important;
        line-height: 22px !important;
    }
}

/* Container cap: prevents fixed menu from expanding over content when closed */
@media (max-width: 992px) {
    html body #meanmenu.mean-container {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        min-height: 56px !important;
        height: 56px !important;
        max-height: 56px !important;
        overflow: hidden !important;
    }

    html body.slidemenuon #meanmenu.mean-container {
        max-height: 100dvh !important;
        overflow: visible !important;
    }
}

/* Phone pressure state (max-width: 480px) */
@media (max-width: 480px) {
    html body #meanmenu .mean-bar {
        padding: 8px 10px !important;
    }

    html body #meanmenu .mean-logo-area {
        max-width: 90px !important;
    }

    html body #meanmenu .mean-logo-area .logo-small,
    html body #meanmenu .mean-bar .mean-logo-area img.logo-small,
    html body #meanmenu .mean-bar img.logo-small {
        max-width: 80px !important;
        max-height: 24px !important;
    }

    html body #meanmenu .header-mobile-icons {
        gap: 5px !important;
        height: 32px !important;
        margin-right: 5px !important;
    }

    html body #meanmenu .header-mobile-icons > a,
    html body #meanmenu .header-mobile-icons > div,
    html body #meanmenu .header-mobile-icons > span {
        margin: 0 !important;
        padding: 0 !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
    }

    html body #meanmenu .header-mobile-icons a.header-btn {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        gap: 0 !important;
    }

    html body #meanmenu .header-mobile-icons a.header-btn span {
        display: none !important;
    }

    html body #meanmenu .header-mobile-icons a.header-btn i {
        position: absolute !important;
        top: calc(50% + 1px) !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        display: block !important;
        line-height: 1 !important;
    }

    html body #meanmenu .header-mobile-icons a.header-login-icon,
    html body #meanmenu .header-mobile-icons a.header-chat-icon,
    html body #meanmenu .sidebarBtn {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
    }

    html body #meanmenu .header-mobile-icons a.header-chat-icon i,
    html body #meanmenu .header-mobile-icons a.header-login-icon i {
        position: absolute !important;
        top: calc(50% + 1px) !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        line-height: 1 !important;
    }

    html body #meanmenu .header-mobile-icons .header-wrs-pill {
        min-width: 52px !important;
        max-width: 56px !important;
        height: 32px !important;
        padding: 0 4px !important;
        font-size: 9.5px !important;
        gap: 3px !important;
    }
}

/* Very narrow screens (max-width: 360px) { */
@media (max-width: 360px) {
    html body #meanmenu .mean-logo-area {
        max-width: 70px !important;
    }

    html body #meanmenu .mean-logo-area .logo-small,
    html body #meanmenu .mean-bar .mean-logo-area img.logo-small,
    html body #meanmenu .mean-bar img.logo-small {
        max-width: 64px !important;
        max-height: 20px !important;
    }

    html body #meanmenu .header-mobile-icons {
        gap: 4px !important;
        height: 28px !important;
    }

    html body #meanmenu .header-mobile-icons a.header-btn,
    html body #meanmenu .header-mobile-icons a.header-chat-icon,
    html body #meanmenu .header-mobile-icons a.header-login-icon,
    html body #meanmenu .sidebarBtn {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
    }

    html body #meanmenu .header-mobile-icons .header-wrs-pill {
        min-width: 44px !important;
        max-width: 48px !important;
        height: 28px !important;
        padding: 0 3px !important;
        font-size: 9px !important;
    }
}

/* ===================================================================
 * Merged 2026-07-05: wrs-earnings route-specific header-btn sizing.
 * Previously lived in a separate file (wrst-wrs-header-contract-v44.css)
 * that duplicated/fought this file's rules. Consolidated here so there
 * is exactly ONE source of truth for #meanmenu header geometry.
 * =================================================================== */
@media (max-width: 900px) {
    html body.wrst-wrs-economy-route #meanmenu .header-mobile-icons a.header-btn,
    html body.wrs-economy-account #meanmenu .header-mobile-icons a.header-btn {
        width: clamp(66px, 18vw, 78px) !important;
        min-width: clamp(66px, 18vw, 78px) !important;
        max-width: 78px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 8px !important;
        gap: 4px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    html body.wrst-wrs-economy-route #meanmenu .header-mobile-icons a.header-btn i,
    html body.wrs-economy-account #meanmenu .header-mobile-icons a.header-btn i {
        flex: 0 0 auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: clamp(10px, 2.8vw, 12px) !important;
        line-height: 1 !important;
    }

    html body.wrst-wrs-economy-route #meanmenu .header-mobile-icons a.header-btn span,
    html body.wrs-economy-account #meanmenu .header-mobile-icons a.header-btn span {
        display: inline-block !important;
        flex: 0 0 auto !important;
        min-width: max-content !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        white-space: nowrap !important;
        letter-spacing: 0 !important;
        line-height: 1 !important;
    }
}

@media (max-width: 380px) {
    html body.wrst-wrs-economy-route #meanmenu .header-mobile-icons a.header-btn,
    html body.wrs-economy-account #meanmenu .header-mobile-icons a.header-btn {
        width: 66px !important;
        min-width: 66px !important;
        max-width: 66px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 5px !important;
        font-size: 9.5px !important;
    }
}