/*
🎯 PROFESSIONAL HEADER FIX 2025 - ADDRESSING REAL CRAMPED LAYOUT
================================================================

Based on user screenshot showing unprofessional cramped header.
This fixes the ACTUAL spacing and typography issues.
*/

/* EXPANDED HEADER SPACING */
#main-header {
    backdrop-filter: blur(20px) !important;
    background: rgba(5,5,5,0.8) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}

.nav {
    padding: 20px 0 !important; /* INCREASED from 14px */
    min-height: 72px !important; /* TALLER header */
    gap: 40px !important; /* MORE breathing room */
}

.container {
    max-width: 1400px !important; /* WIDER container */
    padding: 0 36px !important; /* MORE padding */
}

/* BRAND IMPROVEMENTS */
.brand {
    gap: 18px !important; /* MORE spacing */
    min-width: 320px !important; /* WIDER brand section */
}

.brand img {
    width: 34px !important; /* LARGER logo */
    height: 34px !important;
}

.brand b {
    font-size: 1.5rem !important; /* BIGGER OCM text */
    margin-right: 16px !important; /* MORE margin */
}

/* TAGLINE PROFESSIONAL STYLING */
.tagline {
    gap: 12px !important; /* BETTER spacing */
    font-weight: 500 !important; /* LESS bold */
    font-size: 0.95rem !important; /* LARGER text */
    color: #d5f5d5 !important; /* SOFTER green */
    letter-spacing: 0.8px !important;
    opacity: 0.85 !important;
}

.tagline .dot {
    width: 8px !important; /* LARGER dots */
    height: 8px !important;
    margin: 0 2px !important;
}

/* NAVIGATION MASSIVE SPACING IMPROVEMENT */
.nav-links {
    gap: 40px !important; /* HUGE increase from 28px */
    justify-content: center !important;
}

.nav-links a {
    padding: 10px 18px !important; /* BETTER click areas */
    font-size: 1rem !important; /* LARGER text */
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

.nav-links a:hover {
    background: rgba(0,255,127,0.12) !important;
    color: var(--lime) !important;
    transform: translateY(-1px) !important;
}

/* HEADER ACTIONS PROFESSIONAL SPACING */
.header-actions {
    gap: 24px !important; /* MUCH better spacing */
    min-width: 300px !important;
}

/* WALLET BUTTON PROFESSIONAL */
.wallet-connect, #walletConnectBtn {
    padding: 14px 22px !important; /* BIGGER padding */
    font-size: 0.95rem !important;
    border-radius: 14px !important;
    background: rgba(98, 59, 234, 0.95) !important;
    box-shadow: 0 3px 12px rgba(98, 59, 234, 0.4) !important;
}

.wallet-connect img {
    width: 20px !important;
    height: 20px !important;
}

/* BUY BUTTON INVESTMENT GRADE */
.cta {
    padding: 14px 28px !important; /* BIGGER button */
    font-size: 0.95rem !important;
    border-radius: 14px !important;
    box-shadow: 0 3px 12px rgba(247,216,0,0.4) !important;
}

/* RESPONSIVE IMPROVEMENTS */
@media (max-width: 1200px) {
    .nav-links { gap: 32px !important; }
    .container { padding: 0 28px !important; }
}

@media (max-width: 1024px) {
    .nav { padding: 18px 0 !important; }
    .brand { min-width: auto !important; }
    .tagline { font-size: 0.85rem !important; }
}

@media (max-width: 768px) {
    .nav { padding: 16px 0 !important; gap: 24px !important; }
    .brand b { font-size: 1.3rem !important; }
    .header-actions { gap: 16px !important; }
    .container { padding: 0 24px !important; }
}

@media (max-width: 480px) {
    .tagline { display: none !important; }
    .header-actions { gap: 12px !important; }
}