/*
Theme Name: Caversia Theme
Theme URI: https://www.caversia.com/
Author: Caversia Team
Description: A native Classic Theme for the Caversia Minecraft Portal.
Version: 3.2.0
*/

/* --- BASE --- */
body {
    background-image: url("assets/images/backgrounds/bg-global-slice-01.jpg");
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: var(--bg-obsidian, #050505);
    color: #E0E0E0;
    font-family: "Inter", sans-serif;
    margin: 0; padding: 0;
}
a { text-decoration: none; color: inherit; transition: 0.2s; }
ul { list-style: none; padding: 0; margin: 0; }
* { box-sizing: border-box; }

.container { max-width: 1600px; margin: 0 auto; padding: 0 2rem; }

/* --- LAYOUT WRAPPERS --- */
.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; position: relative; }
.site-content { 
    flex: 1; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    /* Push content down: Header (var) + Network (32px) */
    padding-top: calc(var(--header-height, 80px) + 32px); 
}
.site-footer { 
    flex-shrink: 0; 
    background-color: #0F0F0F; 
    color: #9CA3AF; 
    padding: 2rem; 
    text-align: center; 
    border-top: 1px solid rgba(255,255,255,0.05); 
    margin-top: auto; 
    min-height: var(--footer-height, 120px);
    display: flex; align-items: center; justify-content: center;
}

/* --- NETWORK BAR --- */
.network-bar { position: fixed; top: 0; left: 0; width: 100%; height: 32px; background-color: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    z-index: 60;
    display: flex; justify-content: space-between; align-items: center; padding: 0 3rem;
    font-family: "Inter", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--net-text, #9CA3AF);
}

.network-left, .network-right { display: flex; align-items: center; gap: 12px; }
.network-label { opacity: 0.7; user-select: none; }

.network-menu { display: flex !important; gap: 1.5rem; align-items: center; }
.network-menu li a { color: #FFFFFF; display: flex; align-items: center; }



/* --- MAIN HEADER --- */
.site-header {
    position: fixed; top: 32px; left: 0; width: 100%; 
    height: var(--header-height, 80px);
    background-color: var(--nav-bg, rgba(5,5,5,0.7));
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 50;
    display: flex; align-items: center; justify-content: space-between; padding: 0 3rem;
}

/* Admin Bar Offsets */
body.admin-bar .network-bar { top: 32px; }
body.admin-bar .site-header { top: 64px; }
@media screen and (max-width: 782px) {
    body.admin-bar .network-bar { top: 46px; }
    body.admin-bar .site-header { top: 78px; }
    body.admin-bar .site-wrapper { min-height: calc(100vh - 46px); }
}
body.admin-bar .site-wrapper { min-height: calc(100vh - 32px); }

/* Header Components */
.header-col { display: flex; align-items: center; height: 100%; }
.site-logo-text { 
    font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.2em; 
    color: #fff; line-height: 1; 
}

/* Navigation */
.nav-col { flex-grow: 1; display: flex; align-items: center; padding-right: 2rem; }
.nav-menu { 
    display: flex; width: 100%; 
    justify-content: var(--nav-align, flex-start); 
    align-items: center; gap: 2rem; 
}
.nav-menu li a {
    font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--nav-link, #FFFFFF);
    display: block; line-height: 1;
}
.nav-menu li a:hover {
    color: var(--nav-hover, #FFC72C);
}

/* Dropdowns */
.nav-menu ul.sub-menu {
    position: absolute; top: 100%; left: -20px;
    background-color: #050505; border: 1px solid rgba(255,255,255,0.1);
    min-width: 200px; padding: 1rem; border-radius: 8px;
    display: none; flex-direction: column; gap: 0.5rem; z-index: 100;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5); margin-top: 10px;
}
.nav-menu li:hover > ul.sub-menu { display: flex; }
.nav-menu ul.sub-menu a { color: var(--nav-link, #FFFFFF); }
.nav-menu ul.sub-menu a:hover { color: var(--color-gold, #FFC72C); padding-left: 5px; }

/* Actions */
.actions-col { gap: 1.5rem; position: relative; padding-left: 2rem; }
.actions-col::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 24px; width: 1px; background-color: rgba(255,255,255,0.15); }

.nav-login, .nav-account { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; transition: color 0.2s; } .nav-login:hover, .nav-account:hover { color: var(--color-gold, #FFC72C); }
.btn-join { 
    color: #000 !important; background-color: var(--color-gold, #FFC72C); 
    padding: 12px 24px; border-radius: 4px; 
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; 
}

/* Mobile */
.desktop-only { display: none; } .mobile-only { display: flex; }
@media (min-width: 1024px) { .desktop-only { display: flex; } .mobile-only { display: none; } }




/* Unified Hover State */
.network-menu li a:hover { color: var(--color-gold, #FFC72C); text-shadow: 0 0 10px rgba(255, 199, 44, 0.4); }


/* --- FORCE NETWORK LABELS WHITE --- */
.network-label { color: #FFFFFF !important; opacity: 1 !important; font-weight: 800 !important; }



/* --- PAGE TEMPLATE STYLES --- */
.caversia-page-header {
    background-color: var(--net-bg, #0F0F0F);
    padding: 3rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 2rem;
}

.page-title {
    font-size: 2.5rem;
    color: #FFFFFF;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.content-box {
    background-color: rgba(15, 15, 15, 0.95); /* Semi-transparent dark bg */
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 4px;
    min-height: 400px;
}

/* Override form container to fit seamlessly */
.caversia-form-container {
    max-width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}


/* --- LAYOUT FIXES --- */

/* 1. Push content down so it starts below the fixed header */
.site-content {
    padding-top: 160px !important; /* 32px (Net) + 80px (Header) + 48px (Buffer) */
}

/* 2. Ensure Header stays on top of content */
.site-header {
    position: fixed;
    top: 32px; /* Sits below network bar */
    width: 100%;
    z-index: 1000; /* High z-index to stay on top */
}

/* 3. Ensure Network Bar stays on top of everything */
.network-bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1001; /* Higher than header */
}


/* --- SCROLL & STICKY HEADER FIXES --- */

/* 1. Force page content to start well below the fixed header */
.site-content {
    padding-top: 180px !important; 
    position: relative;
    z-index: 1; /* Lower than header */
}

/* 2. Header must sit ON TOP of scrolling content */
.site-header {
    position: fixed;
    top: 32px;
    width: 100%;
    z-index: 9999; /* Highest priority */
    background-color: rgba(5, 5, 5, 0.85); /* Increase opacity slightly for readability */
    backdrop-filter: blur(10px); /* Blurs content sliding underneath */
}

/* 3. Network bar on top of everything */
.network-bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
    background-color: #0F0F0F; /* Solid background to hide scroll */
}


/* --- FINAL LAYOUT FIXES --- */

/* 1. The Content Wrapper */
.site-content {
    /* Push content down so it starts below the 112px header (32+80) */
    padding-top: 140px !important; 
    position: relative;
    z-index: 1; /* Content sits below header */
}

/* 2. The Header (Sticky & On Top) */
.site-header {
    position: fixed;
    top: 32px;
    width: 100%;
    z-index: 1000; /* Stays on top of scrolling content */
    background-color: rgba(5, 5, 5, 0.95); /* Solid enough to hide content behind it */
    backdrop-filter: blur(10px);
}

/* 3. Default Page Width */
.default-page-container {
    max-width: 1200px; /* Standard readable width */
    margin: 0 auto;
}

/* 4. The Content Box itself */
.content-box {
    background-color: #0F0F0F;
    border: 1px solid rgba(255,255,255,0.05);
    padding: 60px;
    border-radius: 4px;
    margin-bottom: 40px;
}


/* --- 80% WIDTH & SCROLL FIXES --- */

.site-content {
    padding-top: 160px !important; /* Start content below header */
    position: relative;
    z-index: 1; /* Content is lowest layer */
}

.site-header {
    z-index: 1000; /* Header is middle layer */
    background-color: #0F0F0F; /* Solid background prevents see-through */
}

.network-bar {
    z-index: 1001; /* Network bar is top layer */
}

.default-page-container {
    width: 80%;       /* 80% of monitor width */
    max-width: 100%;  /* Allow full width on mobile if needed, or keep 80% */
    margin: 0 auto;   /* Center the 80% block */
}

.content-box {
    margin-top: 0; /* Remove extra top margin since padding handles it */
}


/* --- CONTAINER ALIGNMENT FIXES --- */

/* Ensure the global container respects the 80% rule */
.container {
    width: 80%;
    max-width: 1600px; /* Prevent it from getting too wide on 4k */
    margin: 0 auto;
    padding: 0; /* Remove padding since width handles it */
}

/* Reset Header Padding (Let the container handle it) */
.site-header, .network-bar {
    padding: 0; 
    display: block; /* Was flex, needs to be block to contain the div */
}

/* Restore Flexbox layout INSIDE the container */
.header-inner, .network-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}


/* --- FORM SPACING FIX --- */
.content-box {
    /* Reduce top padding to balance with the header text line-height */
    padding-top: 25px !important; 
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
}






/* --- FORM FOCUS STATES --- */
.mms-input:focus,
.mms-textarea:focus,
.mms-select:focus {
    outline: none !important;
    border-color: #333 !important;
    box-shadow: none !important;
}

/* --- WP EDITOR DARK MODE --- */
.wp-editor-wrap { border: 1px solid #333; }
.wp-editor-wrap .mce-container, 
.wp-editor-wrap .mce-container-body {
    background-color: #0F0F0F !important;
    border-color: #333 !important;
}
.wp-editor-wrap .mce-toolbar-grp {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #333 !important;
}
.wp-editor-wrap .mce-btn {
    background: transparent !important;
    color: #E0E0E0 !important;
}
.wp-editor-wrap .mce-btn button {
    color: #E0E0E0 !important;
}
.wp-editor-wrap .mce-btn:hover {
    background: #333 !important;
}
.wp-editor-wrap textarea.wp-editor-area {
    background-color: #050505 !important;
    color: #E0E0E0 !important;
    border-top: 1px solid #333 !important;
}


/* --- FIX EDITOR BORDERS --- */
.wp-editor-wrap .mce-tinymce {
    border: 1px solid #333 !important;
    box-shadow: none !important;
}
.wp-editor-wrap .mce-edit-area {
    border-color: #333 !important;
}


/* --- FORCE REMOVAL OF WHITE EDITOR BORDERS --- */
.wp-editor-wrap .mce-tinymce {
    border: 1px solid #333 !important;
    box-shadow: none !important;
}
.wp-editor-wrap .mce-panel {
    border-color: #333 !important;
    background-color: #0F0F0F !important;
}
.wp-editor-wrap .mce-top-part::before {
    box-shadow: none !important;
}
.wp-editor-wrap .mce-toolbar-grp {
    border-bottom: 1px solid #333 !important;
    background-color: #1a1a1a !important;
}
.wp-editor-wrap .mce-edit-area {
    border-top: 1px solid #333 !important;
}


/* --- FIX EDITOR BORDERS (WRAPPER METHOD) --- */
.wp-editor-wrap .mce-tinymce, 
.wp-editor-wrap .mce-edit-area, 
.wp-editor-wrap .mce-statusbar {
    border: none !important;
    box-shadow: none !important;
}

.wp-editor-wrap {
    border: 1px solid #333 !important;
    box-shadow: none !important;
    padding: 0 !important;
}


/* --- FIX EDITOR BORDERS (EXPLICIT SIDE OVERRIDE) --- */
.wp-editor-wrap .mce-tinymce {
    border-top: 1px solid #333 !important;
    border-right: 1px solid #333 !important;
    border-bottom: 1px solid #333 !important;
    border-left: 1px solid #333 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
.wp-editor-wrap {
    border: none !important;
}


/* --- FINAL EDITOR BORDER FIX --- */
html body .wp-editor-wrap .mce-tinymce {
    border: 1px solid #333 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
html body .wp-editor-wrap .mce-edit-area {
    border-top: 1px solid #333 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}
html body .wp-editor-wrap .mce-statusbar {
    border-top: 1px solid #333 !important;
    background-color: #1a1a1a !important;
}


/* --- GHOST BORDER FIX (Overlay Method) --- */
.wp-editor-wrap .mce-tinymce, 
.wp-editor-wrap .mce-edit-area, 
.wp-editor-wrap .mce-statusbar,
.wp-editor-wrap .mce-toolbar-grp {
    border: none !important;
    box-shadow: none !important;
}

.wp-editor-wrap .mce-tinymce {
    position: relative !important;
    box-sizing: border-box !important;
}

.wp-editor-wrap .mce-tinymce::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #333 !important;
    pointer-events: none;
    z-index: 1000;
    box-sizing: border-box;
}


/* --- EXTERNAL WRAPPER STRATEGY --- */
.mms-editor-wrapper {
    border: 1px solid #333;
    box-sizing: border-box;
}
.mms-editor-wrapper .wp-editor-wrap .mce-tinymce,
.mms-editor-wrapper .wp-editor-wrap .mce-edit-area,
.mms-editor-wrapper .wp-editor-wrap .mce-statusbar {
    border: none !important;
    box-shadow: none !important;
}


/* --- TINYMCE 4 NATIVE FIX --- */
/* 1. Turn the main WP wrapper into the border box */
.wp-editor-wrap {
    border: 1px solid #333 !important;
    box-sizing: border-box !important;
    background-color: #050505 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* 2. Strip ALL internal borders and shadows */
.wp-editor-wrap .mce-tinymce,
.wp-editor-wrap .mce-edit-area,
.wp-editor-wrap .mce-statusbar {
    border: none !important;
    box-shadow: none !important;
}

/* 3. Re-add the border ONLY between the toolbar and the text area */
.wp-editor-wrap .mce-toolbar-grp {
    background-color: #1a1a1a !important;
    border: none !important;
    border-bottom: 1px solid #333 !important;
}


/* --- QUILL EDITOR DARK THEME --- */
.ql-toolbar.ql-snow {
    background: #1a1a1a;
    border: 1px solid #333 !important;
    border-bottom: none !important;
}
.ql-container.ql-snow {
    background: #050505;
    border: 1px solid #333 !important;
    color: #E0E0E0;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
}
/* Toolbar Icons Color */
.ql-snow .ql-stroke { stroke: #E0E0E0 !important; }
.ql-snow .ql-fill { fill: #E0E0E0 !important; }
.ql-snow .ql-picker { color: #E0E0E0 !important; }
/* Hover States */
.ql-snow .ql-picker-label:hover { color: #FFC72C !important; }
.ql-snow .ql-picker-label:hover .ql-stroke { stroke: #FFC72C !important; }


/* --- DISABLE FOCUS BORDER CHANGE --- */
.mms-input:focus,
.mms-textarea:focus,
.mms-select:focus {
    border-color: #333 !important;
    box-shadow: none !important;
    outline: none !important;
}



/* --- FORCE RESET FOCUS STATES --- */
html body input.mms-input:focus,
html body select.mms-select:focus,
html body textarea.mms-textarea:focus,
html body input[type="text"]:focus,
html body input[type="number"]:focus,
html body input[type="url"]:focus {
    border: 1px solid #333 !important;
    box-shadow: none !important;
    outline: none !important;
}


/* --- HUD HEADER REFACTOR --- */
.hud-header {
    height: 90px;
    background: rgba(10, 10, 10, 0.95);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);
    padding: 0; /* Reset */
}
.center-col {
    flex-grow: 1;
    justify-content: center;
    gap: 40px;
}
.hud-search {
    position: relative;
    width: 300px;
}
.hud-search input {
    width: 100%;
    background: #151515;
    border: 1px solid #333;
    border-radius: 50px;
    padding: 10px 20px 10px 45px;
    color: #fff;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.hud-search input:focus {
    border-color: #FFC72C;
    box-shadow: 0 0 15px rgba(255, 199, 44, 0.1);
    background: #000;
}
.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
}
.hud-menu {
    display: flex;
    gap: 30px;
}
.hud-menu li a {
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
}
.hud-menu li a:hover {
    color: #fff;
}
.user-pill {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 6px 8px 6px 20px;
    background: #151515;
    border: 1px solid #333;
    border-radius: 50px;
    transition: 0.2s;
}
.user-pill:hover {
    border-color: #666;
    background: #222;
}
.user-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
}
.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #333;
}
.site-content {
    padding-top: 90px !important;
}
.network-bar { display: none !important; }


/* --- GAME CLIENT HEADER v2 --- */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 1rem;
}
.header-left {
    display: flex;
    align-items: center;
    gap: 25px;
}
.site-logo-text {
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    color: #fff;
    display: flex; align-items: center; gap: 10px;
}
/* Mock Logo Icon */
.site-logo-text::before {
    content: ""; display: block;
    width: 24px; height: 24px;
    background: #FFC72C;
    border-radius: 6px;
    transform: rotate(45deg);
}
.hud-search { width: 240px; position: relative; }
.hud-search input {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 100px;
    padding: 8px 15px 8px 40px;
    font-size: 0.85rem;
    color: #fff;
    transition: all 0.2s;
}
.hud-search input:focus { border-color: #FFC72C; background: #000; }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #666; }

.header-center { flex-grow: 1; display: flex; justify-content: center; }
.hud-menu { display: flex; gap: 30px; }
.hud-menu li a {
    color: #888; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; transition: 0.2s;
}
.hud-menu li a:hover { color: #fff; }

.header-right { display: flex; align-items: center; gap: 20px; }
.icon-btn {
    color: #888; position: relative; padding: 8px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); transition: 0.2s;
}
.icon-btn:hover { color: #fff; border-color: #fff; }
.icon-btn .badge {
    position: absolute; top: 0px; right: 0px;
    width: 8px; height: 8px; background: #FFC72C; border-radius: 50%;
}
.user-cluster { display: flex; align-items: center; gap: 12px; text-align: right; }
.user-info { display: flex; flex-direction: column; }
.user-name { font-weight: 700; font-size: 0.9rem; color: #fff; line-height: 1.2; }
.user-rank { font-size: 0.75rem; color: #666; text-transform: uppercase; }
.user-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #333; object-fit: cover; }


/* --- OVERSIZED HUD HEADER --- */
.site-header {
    top: 0 !important; /* Fix: Move to absolute top */
    height: 110px !important; /* Make it chunky */
}

/* Adjust Page Content to match new header height */
.site-content {
    padding-top: 110px !important;
}

/* Oversized Search Bar */
.hud-search input {
    padding: 14px 20px 14px 50px !important;
    font-size: 1rem !important;
    height: 52px !important; /* Taller input */
    border-radius: 12px !important; /* Slightly boxier rounding like GameCo */
}
.search-icon {
    left: 18px !important;
}
.search-icon svg { width: 22px; height: 22px; }

/* Oversized Navigation Text */
.hud-menu li a {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
}

/* Oversized User Cluster */
.user-pill {
    height: 52px !important;
    padding: 5px 8px 5px 25px !important;
    border-radius: 12px !important; /* Match search radius */
}
.user-name { font-size: 1rem !important; }
.user-avatar {
    width: 46px !important;
    height: 46px !important;
}
.icon-btn { padding: 12px !important; }
.icon-btn svg { width: 24px; height: 24px; }


/* --- HEADER ALIGNMENT & SIZE FIX --- */
.site-header.hud-header {
    height: 128px !important;
    top: 0 !important;
}

/* Adjust content padding for taller header */
.site-content {
    padding-top: 128px !important;
}

/* Force vertical centering on the main container */
.header-inner {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* Ensure all child clusters take full height to allow centering */
.header-left, 
.header-center, 
.header-right {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* Fix specific element alignments */
.site-logo-text {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    line-height: 1;
}

.hud-search {
    display: flex;
    align-items: center;
}

.hud-menu, .user-cluster, .icon-btn {
    display: flex;
    align-items: center;
}


/* --- FIX VERTICAL ALIGNMENT (AUTO-HEIGHT STRATEGY) --- */
/* 1. The Parent: Controls the 128px height and centers children */
.header-inner {
    display: flex !important;
    align-items: center !important; /* This centers the children vertically */
    justify-content: space-between !important;
    height: 100% !important;
}

/* 2. The Children: Stop forcing 100% height. Let them shrink and center. */
.header-left, 
.header-center, 
.header-right {
    display: flex !important;
    align-items: center !important;
    height: auto !important; /* CRITICAL FIX */
    align-self: center !important; /* Double-ensure centering */
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Reset specific elements to ensure they play nice */
.site-logo-text, .hud-search, .user-cluster {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* --- NUCLEAR VERTICAL ALIGNMENT FIX --- */

/* 1. Force the Header to be a fixed box */
.site-header.hud-header {
    height: 128px !important;
    display: flex !important;
    align-items: center !important; /* Center the container inside the header */
}

/* 2. Force the Inner Container to fill the height and use Flexbox */
.header-inner {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important; /* Center the clusters vertically */
    justify-content: space-between !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 3. Force the Clusters to be Flex containers (keeps items side-by-side and centered) */
.header-left, 
.header-center, 
.header-right {
    display: flex !important;
    align-items: center !important;
    height: 100% !important; /* Stretch to full height to ensure alignment logic applies */
}

/* 4. Fix WordPress Menu Margins (Common culprit) */
.hud-menu, .hud-menu ul, .hud-menu li {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}
.hud-menu li a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}


/* --- NUCLEAR ALIGNMENT FIX V2 --- */
/* Force Header to fixed height and top */
.site-header.hud-header {
    height: 128px !important;
    top: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important; /* Centers the inner content horizontally */
    background: #050505 !important;
    border-bottom: 1px solid #222 !important;
}

/* Manually rebuild the container behavior */
.header-inner {
    width: 80% !important;
    max-width: 1600px !important;
    height: 128px !important; /* Force specific pixel height matching header */
    display: flex !important;
    align-items: center !important; /* Vertical Center */
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force children to auto-height so they center properly */
.header-left, .header-center, .header-right {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}


/* --- FINAL HEADER STABILITY FIX --- */

/* 1. Handle the Wrapper (The Black Box) */
.site-header.hud-header {
    height: 128px !important;
    min-height: 128px !important; /* Prevent collapse */
    position: relative !important; /* Stop fighting absolute/fixed positioning */
    display: flex !important;
    align-items: center !important;
    z-index: 999;
}

/* 2. Handle the Inner Container (The Alignment Grid) */
.header-inner {
    height: 100% !important; /* Fill the 128px */
    width: 80% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important; /* This forces vertical middle */
    justify-content: space-between !important;
}

/* 3. Admin Bar Offset Fix (Prevents the jump) */
body.admin-bar .site-header.hud-header {
    top: 0 !important; /* Lock it so the admin bar pushes it down naturally */
}

/* 4. Force Children to behave */
.header-left, .header-center, .header-right {
    height: auto !important; /* Let them shrink to content size */
    display: flex !important;
    align-items: center !important;
    align-self: center !important; /* Individual centering override */
}


/* --- FINAL HEADER POSITIONING (FIXED HUD) --- */

/* 1. Default State (Guest / No Admin Bar) */
.site-header.hud-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 128px !important;
    z-index: 9999 !important;
    background: rgba(10, 10, 10, 0.98) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 0 !important;
}

/* 2. Admin Bar State (Logged In) */
/* WP Admin Bar is 32px. We must push the fixed header down by exactly 32px. */
body.admin-bar .site-header.hud-header {
    top: 32px !important;
    margin-top: 0 !important; /* Kill any legacy network bar margins */
}

/* 3. Content Spacer */
/* Since Header is fixed, content must be pushed down by Header Height (128px) */
.site-content {
    padding-top: 128px !important;
    margin-top: 0 !important;
}

/* 4. Vertical Alignment Enforcement */
.header-inner {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.header-left, .header-center, .header-right {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}


/* --- EPIC HEADER UPGRADE --- */

/* 1. The Glass Bar (Depth & Blur) */
.site-header.hud-header {
    background: rgba(5, 5, 5, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

/* 2. Navigation (High Contrast & Glow) */
.hud-menu li a {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #E0E0E0 !important; /* Brighter Text */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all 0.3s ease;
    padding: 8px 0;
    position: relative;
}
.hud-menu li a:hover {
    color: #FFC72C !important; /* Gold */
    text-shadow: 0 0 8px rgba(255, 199, 44, 0.5) !important; /* Epic Glow */
}
/* Animated Underline */
.hud-menu li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: #FFC72C;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px #FFC72C;
}
.hud-menu li a:hover::after {
    width: 100%;
}

/* 3. Search Bar (Dimensionality) */
.hud-search input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #FFF !important;
    font-weight: 500;
    transition: all 0.3s ease;
}
.hud-search input:focus {
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: #FFC72C !important;
    box-shadow: 0 0 15px rgba(255, 199, 44, 0.15) !important;
}
.search-icon { color: #888 !important; transition: 0.3s; }
.hud-search input:focus + .search-icon,
.hud-search:focus-within .search-icon { color: #FFC72C !important; }

/* 4. User Pill (Premium Button Feel) */
.user-pill {
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.user-pill:hover {
    border-color: #FFC72C !important;
    box-shadow: 0 0 10px rgba(255, 199, 44, 0.1) !important;
}
.user-name { color: #FFF !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.user-rank { color: #FFC72C !important; font-size: 0.7rem !important; font-weight: 800 !important; letter-spacing: 0.05em; }

/* 5. Icons */
.icon-btn {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
.icon-btn:hover {
    border-color: #FFF !important;
    background: rgba(255,255,255,0.1) !important;
    color: #FFF !important;
}


/* --- EPIC LOGO & SEARCH UPGRADE --- */

/* 1. The Logo (Glowing Gem + Bold Type) */
.site-logo-text {
    font-weight: 900 !important;
    font-size: 1.8rem !important;
    letter-spacing: 0.1em !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
/* The Icon (Gem Effect) */
.site-logo-text::before {
    width: 28px !important;
    height: 28px !important;
    background: linear-gradient(135deg, #FFC72C 0%, #E6A300 100%) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    box-shadow: 0 0 15px rgba(255, 199, 44, 0.6) !important;
    border-radius: 6px !important;
    margin-right: 18px !important;
}

/* 2. The Search Bar (Deep Space Input) */
.hud-search input {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    height: 56px !important;
    font-size: 1rem !important;
    padding-left: 55px !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5) !important; /* Inner Depth */
}
.hud-search input::placeholder {
    color: rgba(255,255,255,0.4) !important;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
}
.hud-search input:focus {
    background: rgba(0, 0, 0, 0.9) !important;
    border-color: #FFC72C !important;
    box-shadow: 0 0 25px rgba(255, 199, 44, 0.15), inset 0 0 0 1px rgba(255,199,44,0.1) !important;
}
/* Glowing Search Icon */
.search-icon {
    left: 22px !important;
    color: rgba(255,255,255,0.3) !important;
}
.hud-search input:focus + .search-icon svg,
.hud-search:focus-within .search-icon svg {
    filter: drop-shadow(0 0 5px #FFC72C);
    color: #FFC72C !important;
}

/* 3. Notification Bell (Tactile Button) */
.icon-btn {
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.icon-btn:hover {
    border-color: #FFC72C !important;
    box-shadow: 0 0 15px rgba(255, 199, 44, 0.3) !important;
    color: #FFC72C !important;
}


/* --- EPIC LOGO & SEARCH V2 --- */

/* 1. Logo Text Gradient (White to Gold Fade) */
.site-logo-text {
    background: linear-gradient(180deg, #FFFFFF 20%, #FFC72C 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 10px rgba(255, 199, 44, 0.2));
}

/* 2. Double-Wide Search Bar */
.hud-search {
    width: 600px !important;
    max-width: 50vw !important; /* Safety cap for smaller screens */
}


/* --- EPIC LOGO & SEARCH V3 (Horizontal Gradient) --- */

/* 1. Logo: Horizontal Gold-to-White Gradient (Better Visibility) */
.site-logo-text {
    background: linear-gradient(90deg, #FFC72C 0%, #FFFFFF 80%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-fill-color: transparent !important;
    /* Add a glow to pop it off the dark background */
    filter: drop-shadow(0 0 8px rgba(255, 199, 44, 0.3));
}

/* 2. Double-Wide Search Bar (Persisted) */
.hud-search {
    width: 600px !important;
    max-width: 50vw !important;
}


/* --- LOGO REVERT (Plain White) --- */
.site-logo-text {
    color: #FFFFFF !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
    font-weight: 900 !important;
    font-size: 1.8rem !important;
    letter-spacing: 0.1em !important;
}
/* Keep the icon graphic as it fits the theme */
.site-logo-text::before {
    content: ""; display: block;
    width: 28px; height: 28px;
    background: #FFC72C;
    border-radius: 6px;
    transform: rotate(45deg);
    margin-right: 15px;
    box-shadow: 0 0 10px rgba(255, 199, 44, 0.4);
}


/* --- HEADER LAYOUT: RIGHT-ALIGN MENU & DIVIDER --- */

/* 1. Center Column: Consumes all empty space and pushes Menu to the Right */
.header-center {
    flex-grow: 1 !important;
    justify-content: flex-end !important; /* Align menu items to the right */
    padding-right: 40px !important; /* Spacing before the divider line */
    height: 100% !important;
}

/* 2. Right Column: Add the Vertical Divider (Border) */
.header-right {
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important; /* The Vertical Spacer */
    padding-left: 40px !important; /* Spacing after the divider line */
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}


/* --- EPIC DIVIDER (GRADIENT FADE) --- */
/* 1. Remove the old solid border */
.header-right {
    border-left: none !important;
    position: relative !important;
}

/* 2. Create a gradient line that fades out at the top and bottom */
.header-right::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 1px;
    background: linear-gradient(to bottom, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.2) 50%, 
        rgba(255,255,255,0) 100%);
}


/* --- EXTEND HEADER DIVIDER HEIGHT --- */
.header-right::before {
    top: 15% !important;
    bottom: 15% !important;
}


/* --- MENU ICONS --- */
.hud-menu li a i {
    font-size: 1.2em; /* Slightly larger than text for balance */
    vertical-align: middle;
}


/* --- COLOR CODED MENU ICONS --- */

/* News: Cyan (Intel) */
.hud-menu li a i[title="News"] { color: #00E5FF !important; text-shadow: 0 0 10px rgba(0, 229, 255, 0.4); }

/* Servers: Neon Green (Online Status) */
.hud-menu li a i[title="Servers"] { color: #39FF14 !important; text-shadow: 0 0 10px rgba(57, 255, 20, 0.4); }

/* Guilds: Epic Purple (Royalty) */
.hud-menu li a i[title="Guilds"] { color: #D000FF !important; text-shadow: 0 0 10px rgba(208, 0, 255, 0.4); }

/* Packs: Legendary Orange (Loot) */
.hud-menu li a i[title="Packs"] { color: #FF9900 !important; text-shadow: 0 0 10px rgba(255, 153, 0, 0.4); }

/* Creators: Recording Red (Live) */
.hud-menu li a i[title="Creators"] { color: #FF0055 !important; text-shadow: 0 0 10px rgba(255, 0, 85, 0.4); }

/* Home: Gold (Base) */
.hud-menu li a i[title="Home"] { color: #FFC72C !important; }

/* Hover Effects: Make the text match the icon color on hover */
.hud-menu li a:hover:has(i[title="News"]) { color: #00E5FF !important; }
.hud-menu li a:hover:has(i[title="Servers"]) { color: #39FF14 !important; }
.hud-menu li a:hover:has(i[title="Guilds"]) { color: #D000FF !important; }
.hud-menu li a:hover:has(i[title="Packs"]) { color: #FF9900 !important; }
.hud-menu li a:hover:has(i[title="Creators"]) { color: #FF0055 !important; }


/* --- MONOCHROME FADE MENU ICONS --- */

/* Base: #282a2b (Charcoal) */
.hud-menu li a i[title="Home"] { color: #282a2b !important; text-shadow: none !important; }

/* Step 1: Darker */
.hud-menu li a i[title="News"] { color: #222425 !important; text-shadow: none !important; }

/* Step 2: Darker */
.hud-menu li a i[title="Servers"] { color: #1c1e1f !important; text-shadow: none !important; }

/* Step 3: Darker */
.hud-menu li a i[title="Guilds"] { color: #161819 !important; text-shadow: none !important; }

/* Step 4: Darker */
.hud-menu li a i[title="Packs"] { color: #101213 !important; text-shadow: none !important; }

/* Step 5: Almost Black */
.hud-menu li a i[title="Creators"] { color: #0a0b0c !important; text-shadow: none !important; }

/* Hover Effects: Restore brightness on hover so they are usable */
.hud-menu li a:hover i { color: #fff !important; text-shadow: 0 0 8px rgba(255,255,255,0.5) !important; }


/* --- MONOCHROME FADE (LIGHTER) & CLEANUP --- */

/* 1. Remove the Gold Underline Bar */
.hud-menu li a::after {
    display: none !important;
    content: none !important;
}

/* 2. Gradient Logic: Base #282a2b -> Lighter Steps */
.hud-menu li a i[title="Home"] { color: #282a2b !important; }
.hud-menu li a i[title="News"] { color: #4d5052 !important; }
.hud-menu li a i[title="Servers"] { color: #737779 !important; }
.hud-menu li a i[title="Guilds"] { color: #989da0 !important; }
.hud-menu li a i[title="Packs"] { color: #bdc4c7 !important; }
.hud-menu li a i[title="Creators"] { color: #e3eaed !important; }

/* 3. Hover Effect: Bright White Pop */
.hud-menu li a:hover i {
    color: #ffffff !important;
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
    transform: scale(1.1);
    transition: all 0.2s ease;
}


/* --- MONOCHROME FADE (SUBTLE) --- */
.hud-menu li a i[title="Home"] { color: #282a2b !important; }
.hud-menu li a i[title="News"] { color: #3e4142 !important; }
.hud-menu li a i[title="Servers"] { color: #55585a !important; }
.hud-menu li a i[title="Guilds"] { color: #6c6f71 !important; }
.hud-menu li a i[title="Packs"] { color: #838789 !important; }
.hud-menu li a i[title="Creators"] { color: #9a9ea0 !important; }


/* --- FINAL ICON COLOR STANDARD --- */
.hud-menu li a i[title],
.hud-menu li a i {
    color: #55585a !important; /* Base: Servers Color */
    text-shadow: none !important;
    filter: none !important;
}

.hud-menu li a:hover i[title],
.hud-menu li a:hover i {
    color: #6c6f71 !important; /* Hover: Guilds Color */
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
}


/* --- LOGO COLOR UPDATE --- */
.site-logo-text {
    color: #75797b !important; /* Lighter than icons (#55585a) */
    text-shadow: none !important;
    filter: none !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}
/* Flatten the icon to match the matte aesthetic */
.site-logo-text::before {
    box-shadow: none !important;
    filter: none !important;
}


/* --- C MONOGRAM LOGO --- */
.site-logo-text {
    font-family: "Inter", sans-serif !important;
    font-weight: 900 !important;
    font-size: 2.5rem !important; /* Larger "Icon" size */
    color: #75797b !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    /* Remove the old diamond icon */
    display: block !important;
}
.site-logo-text::before {
    display: none !important;
    content: none !important;
}


/* --- EPIC "APP ICON" LOGO --- */
.site-logo-text {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    /* Double Layer Background for Gradient Border Effect */
    background-image: linear-gradient(#151515, #151515), linear-gradient(135deg, #FFC72C, #947218);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 2px solid transparent;
    border-radius: 14px; /* Smooth app-like rounding */
    
    /* Text Styles */
    font-family: "Inter", sans-serif !important;
    font-weight: 900 !important;
    font-size: 2.2rem !important;
    line-height: 1 !important;
    color: #E0E0E0 !important; /* Bright Silver Text */
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    text-decoration: none !important;
    transition: all 0.2s ease;
}

/* Hover State: Lift and Glow */
.site-logo-text:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255, 199, 44, 0.15);
    color: #FFF !important;
    border-color: transparent;
}


/* --- COSMIC BLUE APP ICON LOGO --- */
.site-logo-text {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    /* Double Layer Background: Dark Center + Cosmic Blue Gradient Border */
    background-image: linear-gradient(#151515, #151515), linear-gradient(135deg, #00E5FF, #0066CC);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 2px solid transparent;
    border-radius: 14px;
    
    /* Text Styles */
    font-family: "Inter", sans-serif !important;
    font-weight: 900 !important;
    font-size: 2.2rem !important;
    line-height: 1 !important;
    color: #E0E0E0 !important;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    
    /* Persistent Ambient Blue Glow (The "Badge Thing") */
    box-shadow: 0 10px 25px rgba(0, 229, 255, 0.15);
    text-decoration: none !important;
    transition: all 0.2s ease;
}

/* Hover State: Lift and Brighten (Blue) */
.site-logo-text:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 229, 255, 0.3);
    color: #FFF !important;
    border-color: transparent;
}


/* --- SOLID COSMIC BADGE (NO GLOW) --- */
.site-logo-text {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    
    background: linear-gradient(135deg, #00C6FF 0%, #0072FF 100%) !important;
    
    border: none !important;
    border-radius: 14px;
    
    font-family: "Inter", sans-serif !important;
    font-weight: 900 !important;
    font-size: 2.2rem !important;
    line-height: 1 !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
    
    box-shadow: none !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.site-logo-text:hover {
    transform: translateY(-2px);
    color: #FFF !important;
    filter: brightness(1.1);
    box-shadow: none !important;
}


/* --- HEADER BACKGROUND COLOR UPDATE --- */
.site-header.hud-header {
    background: #1b2027 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}


/* --- MENU ICON COLOR UPDATE --- */
.hud-menu li a i[title],
.hud-menu li a i {
    color: #4a56a4 !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Keep white hover for contrast */
.hud-menu li a:hover i {
    color: #ffffff !important;
}


/* --- HEADER BACKGROUND UPDATE (030507) --- */
.site-header.hud-header {
    background: #030507 !important;
}


/* --- MENU ICON COLOR UPDATE --- */
.hud-menu li a i[title],
.hud-menu li a i {
    color: #191d27 !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Keep white hover for contrast */
.hud-menu li a:hover i {
    color: #ffffff !important;
}


/* --- MENU ICON COLOR UPDATE --- */
.hud-menu li a i[title],
.hud-menu li a i {
    color: #2b3941 !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Keep white hover for contrast */
.hud-menu li a:hover i {
    color: #ffffff !important;
}


/* --- MENU ICON HOVER COLOR --- */
.hud-menu li a:hover i {
    color: #923d3c !important;
    transition: color 0.2s ease;
}


/* --- FORCE HOVER COLOR (High Specificity) --- */
/* Safety close just in case */ } 

html body .hud-menu li a:hover,
html body .hud-menu li a:hover i,
html body .hud-menu li a:hover i[title] {
    color: #923d3c !important;
    transition: color 0.2s ease !important;
    filter: none !important; /* Remove any white drop-shadows from previous edits */
}

/* --- MENU ICON COLORS (CLEAN) --- */
/* Base State: Slate */
.hud-menu li a i,
.hud-menu li a i[title] {
    color: #2b3941 !important;
    transition: color 0.2s ease !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Hover State: Rust Red */
.hud-menu li a:hover i,
.hud-menu li a:hover i[title] {
    color: #923d3c !important;
    transform: none !important; /* Stop any scaling/movement */
    filter: none !important;
}


/* --- HEADER BACKGROUND UPDATE (030507) --- */
.site-header.hud-header {
    background: #141714 !important;
}


/* --- HEADER BACKGROUND UPDATE (030507) --- */
.site-header.hud-header {
    background: #070806 !important;
}


/* --- HEADER BACKGROUND UPDATE (030507) --- */
.site-header.hud-header {
    background: #090f11 !important;
}


/* --- MENU ICON COLOR UPDATE --- */
.hud-menu li a i[title],
.hud-menu li a i {
    color: #170f12 !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Keep white hover for contrast */
.hud-menu li a:hover i {
    color: #ffffff !important;
}


/* --- MENU ICON COLOR UPDATE --- */
.hud-menu li a i[title],
.hud-menu li a i {
    color: #38484f !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Keep white hover for contrast */
.hud-menu li a:hover i {
    color: #ffffff !important;
}


/* --- TEXT NAVIGATION (GAME CLIENT STYLE) --- */
.hud-menu li a {
    font-family: "Inter", sans-serif !important;
    font-weight: 900 !important; /* Extra Bold */
    font-size: 1.1rem !important; /* Oversized */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    
    /* Color Scheme */
    color: #2b3941 !important; /* Base Slate */
    transition: all 0.2s ease !important;
    
    /* Reset Icon Styles */
    padding: 0 15px !important;
}

.hud-menu li a:hover {
    color: #923d3c !important; /* Hover Rust Red */
    transform: translateY(-1px); /* Subtle Lift */
    text-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Remove any lingering icon specifics */
.hud-menu li a i { display: none !important; }


/* --- RIOT TECH NAVBAR (CUSTOM PALETTE) --- */

/* 1. The Container */
.riot-bar {
    position: fixed; top: 0; left: 0; width: 100%; height: 80px; z-index: 9999;
    background: #030507 !important; /* User Color: Deep Black */
    border-bottom: 1px solid #1a1a1c;
    font-family: "Oswald", sans-serif; /* The Gamer Font */
}
.header-inner {
    display: flex; justify-content: space-between; align-items: center;
    height: 100%; width: 100%; padding: 0 40px;
}

/* 2. Left Side (Brand + Nav) */
.header-primary { display: flex; align-items: center; gap: 50px; height: 100%; }

/* Logo */
.brand-logo { display: flex; align-items: center; gap: 15px; text-decoration: none; }
.logo-mark {
    width: 36px; height: 36px;
    background: #eb0029; /* Riot Red Accent */
    color: #fff; font-weight: 700; font-size: 1.4rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
}
.logo-text {
    color: #fff; font-weight: 700; font-size: 1.4rem;
    letter-spacing: 0.1em; text-transform: uppercase;
}

/* Navigation Links */
.riot-nav { display: flex; gap: 35px; height: 100%; }
.nav-link {
    display: flex; align-items: center;
    height: 100%;
    color: #2b3941 !important; /* User Color: Slate */
    font-weight: 700; font-size: 1rem;
    text-transform: uppercase; letter-spacing: 0.05em;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
}
.nav-link:hover {
    color: #923d3c !important; /* User Color: Rust Red */
    border-bottom-color: #923d3c;
}

/* 3. Right Side (Search + User) */
.header-secondary { display: flex; align-items: center; gap: 25px; }

/* Search Bar */
.global-search { position: relative; }
.global-search input {
    background: #111; border: 1px solid #222;
    border-radius: 50px; padding: 10px 20px 10px 45px;
    color: #fff; font-family: "Inter", sans-serif; font-weight: 600; font-size: 0.85rem;
    width: 250px; transition: 0.2s;
}
.global-search input:focus {
    background: #000; border-color: #923d3c;
    width: 300px; /* Expand on focus */
}
.search-icon {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    color: #444; pointer-events: none;
}

/* Buttons / Profile */
.btn-login {
    font-weight: 700; font-size: 0.8rem; color: #fff; 
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 10px 15px; border-radius: 8px; transition: 0.2s;
}
.btn-login:hover { background: #222; }

.btn-register {
    background: #eb0029; color: #fff;
    padding: 10px 24px; border-radius: 12px;
    font-weight: 700; font-size: 0.9rem; text-transform: uppercase;
    transition: 0.2s;
}
.btn-register:hover { background: #ff0a3b; }

.user-profile { display: flex; align-items: center; gap: 12px; }
.user-name { color: #fff; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; }
.user-avatar { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #222; }

/* Spacer Fix */
.site-content { padding-top: 80px !important; }