/* ===== BURGER MENU - MOBILE NAVIGATION ===== */
/* Created: October 26, 2025 */
/* Agent: BroJack Agent #8 - Mobile Landing Page Specialist */

/* ===== BURGER BUTTON (MOBILE ONLY) ===== */

/* Burger button only exists in mobile landing */
.mobile-landing .burger-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10002; /* Above overlay */
}

.mobile-landing .burger-menu-btn:focus {
    outline: none;
}

/* Burger lines */
.mobile-landing .burger-line {
    width: 24px;
    height: 2px;
    background: linear-gradient(152.22deg, #FDFDFD 13.66%, #A0A5FF 93.73%);
    border-radius: 100px;
    transition: all 0.3s ease;
    position: absolute;
}

/* Top line */
.mobile-landing .burger-line:nth-child(1) {
    top: 22px;
}

/* Middle line (50% width - SHORT!) */
.mobile-landing .burger-line:nth-child(2) {
    top: 33px;
    width: 12px; /* 50% of 24px */
    right: 31px; /* Filip's perfect spacing - ONLY this one has right! */
}

/* Bottom line */
.mobile-landing .burger-line:nth-child(3) {
    top: 44px;
}

/* ===== BURGER → X TRANSFORM ===== */

.mobile-landing .burger-menu-btn.active .burger-line:nth-child(1) {
    top: 33px; /* Center (matches middle line position) */
    transform: rotate(45deg);
    width: 24px; /* Full width for X */
}

.mobile-landing .burger-menu-btn.active .burger-line:nth-child(2) {
    opacity: 0; /* Hide middle line */
    width: 0;
}

.mobile-landing .burger-menu-btn.active .burger-line:nth-child(3) {
    top: 33px; /* Center (matches middle line position) */
    transform: rotate(-45deg);
    width: 24px; /* Full width for X */
}

/* ===== FULL-SCREEN MENU OVERLAY (MOBILE ONLY) ===== */

.mobile-landing .burger-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Keep 100% for layout */
    background: #00091E; /* Dark blue background */
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 80px 0px 60px 0px; /* 60px bottom padding */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Extend background below viewport to cover mobile browser bars */
.mobile-landing .burger-menu-overlay::before {
    content: '';
    position: fixed;
    bottom: -150px; /* Extend 150px below viewport */
    left: 0;
    width: 100%;
    height: 150px; /* Extra background coverage */
    background: #00091E; /* Same dark blue */
    z-index: -1; /* Behind overlay content */
    pointer-events: none;
}

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

/* ===== MENU CONTENT (MOBILE ONLY) ===== */

.mobile-landing .burger-menu-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 16px; /* Figma exact spacing */
    gap: 16px; /* Figma exact spacing */
    flex: 1;
}

/* Services Section */
.mobile-landing .burger-services-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px; /* Figma exact spacing - tighter! */
    align-self: stretch;
}

.mobile-landing .burger-services-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0px; /* Figma exact spacing */
    gap: 8px; /* Figma exact spacing */
    cursor: pointer;
    background: transparent;
    border: none;
    align-self: stretch; /* Figma spec */
}

.mobile-landing .burger-services-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-align: left;
    /* Figma gradient - starts more on the right! */
    background: linear-gradient(105.71deg, #FFFFFF 33.45%, #ADB1FF 109.8%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mobile-landing .burger-chevron {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.mobile-landing .burger-chevron.active {
    transform: rotate(180deg);
}

/* Services dropdown - DISPLAY NONE BY DEFAULT */
.mobile-landing .burger-services-dropdown {
    display: none; /* Hidden by default - NO gap! */
}

/* Visible but collapsed (JS adds this first) */
.mobile-landing .burger-services-dropdown.visible {
    display: grid; /* Make visible */
    grid-template-rows: 0fr; /* Start collapsed */
    transition: grid-template-rows 0.3s ease;
    overflow: hidden;
}

/* Inner wrapper for the actual content */
.mobile-landing .burger-services-dropdown > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px; /* Figma exact spacing */
    overflow: hidden;
    min-height: 0; /* Important for grid collapse */
}

/* Expanded state (after slight timeout) */
.mobile-landing .burger-services-dropdown.active {
    grid-template-rows: 1fr; /* Smooth expand */
}

.mobile-landing .burger-service-item {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; /* Figma says 500 not 400 */
    font-size: 16px;
    line-height: 24px;
    color: #536285; /* Figma exact color - greyish blue! */
    text-decoration: none;
    display: block;
    padding: 4px 0px; /* Figma exact spacing */
    transition: color 0.3s ease;
}

.mobile-landing .burger-service-item:hover {
    color: #FFFFFF;
}

/* Other menu items */
.mobile-landing .burger-menu-item {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-decoration: none;
    display: block;
    padding: 4px 0; /* Figma exact spacing */
    /* Figma gradient - starts more on the right! */
    background: linear-gradient(105.71deg, #FFFFFF 33.45%, #ADB1FF 109.8%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== MENU BOTTOM (BUTTON + SOCIALS) ===== */

.mobile-landing .burger-menu-bottom {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Gap between button and socials */
    align-items: center;
    margin-top: auto; /* Push to bottom */
    padding: 0px 16px; /* Match content horizontal padding */
}

/* Connect Wallet Button - Glossy Style */
.mobile-landing .burger-connect-wallet {
    width: 100%;
    max-width: 320px;
    height: 56px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    border-radius: 100px;
}

/* Glow effect */
.mobile-landing .burger-wallet-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(266.42deg, #000DFF -21.15%, rgba(85, 93, 255, 0) 88.34%);
    border: 2px solid #969CFF;
    filter: blur(10px);
    border-radius: 100px;
    pointer-events: none;
}

/* Button content - FULL GLOSSY EFFECT */
.mobile-landing .burger-wallet-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #FFFFFF;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    height: 100%;
    white-space: nowrap;
    
    /* Glossy effects */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4), 0 4px 12px rgba(0, 13, 255, 0.3);
}

.mobile-landing .burger-connect-wallet:hover .burger-wallet-content {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.02);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 6px 16px rgba(0, 13, 255, 0.4);
}

.mobile-landing .burger-wallet-content i,
.mobile-landing .burger-wallet-content .burger-arrow {
    width: 16px;
    height: 16px;
}

/* Social Icons */
.mobile-landing .burger-social-icons {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.mobile-landing .burger-social-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(236, 235, 232, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.mobile-landing .burger-social-icon:hover {
    background: rgba(236, 235, 232, 0.2);
    transform: scale(1.1);
}

.mobile-landing .burger-social-icon svg {
    width: 20px;
    height: 20px;
}

/* ===== MOBILE LANDING NAV OVERRIDES ===== */

/* Mobile landing nav - only show logo and burger */
.mobile-landing .nav-links {
    display: none !important;
}

.mobile-landing .btn-sign-in,
.mobile-landing .btn-web-app {
    display: none !important;
}

.mobile-landing .nav-buttons {
    display: flex;
    gap: 0;
}

.mobile-landing .nav-container {
    justify-content: space-between;
    gap: 0;
}

/* ===== PREVENT BODY SCROLL WHEN MENU OPEN ===== */

body.burger-menu-open {
    overflow: hidden;
}