/* ======================= */
/* Modern Cyber Blue Theme */
/* ======================= */
:root {
    --cyber-blue: #00a3e1;
    --neon-cyan: #00f3ff;
    --deep-space: #0a0f1a;
    --hologram-white: rgba(224, 244, 255, 0.95);
    --void-black: #06090f;
    --menu-glow: radial-gradient(circle at 0% 0%, rgba(0,163,225,0.4) 0%, transparent 70%);
}
/* Remove default list markers for side menu */
.side-menu-nav,
.side-menu-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Header Styles */
.cyber-header {
    position: static;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px 0;
    background: rgba(10, 15, 26, 0.1);
    backdrop-filter: blur(15px) saturate(160%);
    -webkit-backdrop-filter: blur(15px) saturate(160%);
    z-index: 9990;
    border-bottom: 1px solid rgba(0, 163, 225, 0.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12) inset;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================= */
/* Side Menu Styles */
/* ================= */
.side-menu-container {
    position: fixed;
    left: -400px;
    top: 0;
    height: 100vh;
    width: 400px;
    background: rgba(10, 15, 26, 0.2);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    z-index: 9999;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    border-right: 1px solid rgba(0, 163, 225, 0.15);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.4);
}

.side-menu-container.open {
    left: 0;
}

.side-menu-container.open {
  width: 400px;
}

@media (max-width: 480px) {
    .side-menu-container {
        left: -320px;
        width: 320px;
    }

    .side-menu-container.open {
        width: 320px;
    }
}

/* Menu Trigger Button */
.menu-trigger {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

.menu-trigger:active {
    transform: translateY(-50%);
    transition: none;
}

.menu-trigger:hover {
    transform: translateY(-50%);
    transition: none;
}

.menu-trigger svg {
    width: 32px;
    height: 32px;
    fill: var(--hologram-white);
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(0, 163, 225, 0.3));
}

.menu-trigger:hover svg {
    fill: var(--cyber-blue);
    transform: scale(1.1);
    filter: drop-shadow(0 0 12px rgba(0, 163, 225, 0.5));
}

/* ====================== */
/* Navigation Menu Items */
/* ====================== */
.side-menu-nav {
    margin-top: 80px;
}

/* Menu Links */
.side-menu-nav a {
    display: flex;
    align-items: center;
    padding: 18px 35px;
    margin: 2px 4px;
    color: var(--hologram-white);
    text-decoration: none;
    font-size: 1.1em;
    letter-spacing: 0.8px;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modern Gamer Menu Items with Fixed-Size PNG Icons */
.side-menu-nav a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}



.side-menu-nav li.menu-item-home > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/home_icon.png');
}

.side-menu-nav li.menu-item-emoji > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/emo.png');
}


.side-menu-nav li.menu-item-geo > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/map.webp');
}


.side-menu-nav li.menu-item-rank > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/guess-rank-menu.png');

}


.side-menu-nav li.menu-item-skin > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/skin-menu.webp');
}


.side-menu-nav li.menu-item-region > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/piltover.webp');
}

.side-menu-nav li.menu-item-react > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/react-menu.png');
}

.side-menu-nav li.menu-item-ab-sound > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/Guess-ch-by-sound.png');
}

.side-menu-nav li.menu-item-ab-icon > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/ability-icon-min.png');
}


.side-menu-nav li.menu-item-teemo > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/whack-teemo-icon.png');
}



.side-menu-nav li.menu-quote > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/quote-menu.png');
}

.side-menu-nav li.menu-role > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/role.png');
}


.side-menu-nav li.menu-base_ad > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/ad.png');
}


.side-menu-nav li.menu-base_hp > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/hp-menu.png');
}

.side-menu-nav li.menu-release-date > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/release-date-menu.png');
}


.side-menu-nav li.menu-lol-wordle > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/wordle-lol.png');
}


.side-menu-nav li.menu-item-leaguess > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/leaguess-menu.png');
}

.side-menu-nav li.menu-item-trainer > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/trainer.png');
}

.side-menu-nav li.menu-item-leagueiq > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/leagueiq.png');
}

.side-menu-nav li.menu-item-fun > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/fun-games.png');
}

.side-menu-nav li.menu-item-versus > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/versus.png');
}

.side-menu-nav li.menu-item-map-aware > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/map-aware.png');
}

.side-menu-nav li.menu-item-esport > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/esport.png');
}

.side-menu-nav li.menu-item-donate > a::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/wp-content/themes/astra-child/images/menu/donate.png');
}





/* Hover Effects for Menu Items */
.side-menu-nav a:hover {
    background: linear-gradient(145deg, 
        rgba(0, 163, 225, 0.15) 0%,
        rgba(10, 15, 26, 0.4) 100%);
    transform: translateX(14px);
    border-color: rgba(0, 163, 225, 0.3);
    box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.4),
               -4px -4px 12px rgba(255, 255, 255, 0.08),
               0 0 20px rgba(0, 163, 225, 0.2);
}



.side-menu-nav a:hover::before {
    transform: scale(1.1);
}

/* ================== */
/* Close Button Style */
/* ================== */
.menu-close-btn {
    position: absolute;
    right: 25px;
    top: 25px;
    background: transparent;
    border: none;
    color: var(--cyber-blue);
    font-size: 32px;
    cursor: pointer;
    transition: all 0.3s ease;

}

.menu-close-btn:hover {
    color: var(--hologram-white);
    transform: rotate(90deg);
}

/* ============ */
/* Menu Overlay */
/* ============ */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(6, 9, 15, 0.8);
    backdrop-filter: blur(5px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ================== */
/* Astra Adjustments  */
/* ================== */
.modern-menu-mode .site-header {
    background: rgba(10, 15, 26, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 163, 225, 0.15);
}

.modern-menu-mode .ast-header-wrap {
    padding: 15px 0;
}

.modern-menu-mode .site-identity {
    padding-left: 80px;
}

/* ================== */
/* Responsive Styling */
/* ================== */
@media (max-width: 768px) {
    .menu-trigger {
        left: 20px;
    }
    
    .side-menu-container {
        width: 70vw;
        left: -70vw;
    }
    
    .side-menu-container.open {
        left: 0;
    }
    
    .side-menu-container {
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }
    
    .side-menu-nav a {
        padding: 15px 25px;
        margin: 10px 15px;
    }
}

/* ===================== */
/* Custom Scrollbar Styles */
/* ===================== */
.side-menu-nav {
    overflow-y: auto;
    overflow-x: hidden;

    height: calc(100vh - 80px); /* Account for header space */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: var(--cyber-blue) var(--deep-space); /* For Firefox */
}

/* WebKit (Chrome, Safari) Scrollbar */
.side-menu-nav::-webkit-scrollbar {
    width: 6px;
    background-color: var(--deep-space);
}

.side-menu-nav::-webkit-scrollbar-thumb {
    background-color: rgba(0, 163, 225, 0.4);
    border-radius: 4px;
    border: 1px solid rgba(0, 163, 225, 0.2);
}

.side-menu-nav::-webkit-scrollbar-thumb:hover {
    background-color: var(--cyber-blue);
    opacity: 0.8;
}

.side-menu-nav::-webkit-scrollbar-track {
    background: rgba(10, 15, 26, 0.2);
    border-radius: 4px;
}

/* Smooth scroll behavior */
.side-menu-nav {
    scroll-behavior: smooth;
}

/* Optional: Add scroll animation on menu open */
.side-menu-container.open .side-menu-nav {
    animation: smoothScroll 0.6s ease;
}

@keyframes smoothScroll {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* 1. Hide WP sub‐menus by default */
.side-menu-nav .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  margin-left: 20px;             /* indent children */
  border-left: 1px solid rgba(0,163,225,0.2);
}

/* 2. When a parent is “open” expand it */
.side-menu-nav .menu-item-has-children.open > .sub-menu {
  max-height: 700px;             /* large enough for your deepest sub‑menu */
}

/* 3. Style & position the toggle arrow */
.side-menu-nav .menu-item-has-children {
  position: relative;
}

.side-menu-nav .menu-item-has-children > a {
    position: relative; /* Essential for stable positioning */
    padding-right: 4em !important; /* Ensure consistent spacing */
}

.side-menu-nav .menu-item-has-children > a::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid var(--hologram-white);
    border-left-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    right: 1.8em;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.side-menu-nav .menu-item-has-children.open > a::after {
    transform: translateY(-50%) rotate(135deg);
    border-color: var(--cyber-blue);
    border-left-color: transparent;
    border-bottom-color: transparent;
}

/* Submenu Visual Hierarchy Enhancement */
.side-menu-nav .sub-menu {
    background: linear-gradient(
        90deg,
        rgba(10, 15, 26, 0.25) 0%,
        rgba(0, 163, 225, 0.08) 100%
    );
    margin-left: 30px;
    border-left: 2px solid;
    border-image: linear-gradient(
        to bottom,
        transparent 10%,
        rgba(0, 163, 225, 0.3) 50%,
        transparent 90%
    );
    border-image-slice: 1;
    backdrop-filter: blur(5px);
    border-radius: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.side-menu-nav .sub-menu a {
    background: transparent !important;
    margin: 2px 8px;
    padding: 14px 30px;
    transform: translateX(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.side-menu-nav .sub-menu a:hover {
    background: linear-gradient(
        90deg,
        rgba(0, 163, 225, 0.1) 0%,
        rgba(10, 15, 26, 0.2) 100%
    ) !important;
    transform: translateX(8px);
    box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.3),
               -1px -1px 6px rgba(255, 255, 255, 0.05);
}

.side-menu-nav .sub-menu a::before {
    transform: scale(0.9);
    opacity: 0.8;
}

.side-menu-nav .sub-menu a:hover::before {
    transform: scale(1);
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(0, 163, 225, 0.3));
}

/* Nested Submenu Indication */
.side-menu-nav .sub-menu .sub-menu {
    background: linear-gradient(
        90deg,
        rgba(10, 15, 26, 0.3) 0%,
        rgba(0, 163, 225, 0.1) 100%
    );
    border-left-width: 1px;
    margin-left: 25px;
}