/* 
BASE CSS RULES

1. Reset styles (remove default margins, set box-sizing: border-box)
2. Basic typography (set fonts, sizes for body, h1–h6, p, a)
3. Colors (set main text and background colors)
4. Reusable layout styles (.container, .section, etc.)
5. Common components (e.g., buttons, forms, nav)
6. Utility classes (optional helpers like .text-center, .hidden, .flex)
7. Responsive basics (small screen tweaks if needed)

*/

/* 1. Reset styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    scroll-behavior: smooth;
    height: 100%;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
}

/* 2. Basic typography */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

p {
    margin-bottom: 1rem;
}

a {
    color: inherit;
    transition: color 0.3s ease;
}

/* 3. Colors */
body {
    background-color: #333;
    color: #fff;
}

/* 4. Reusable layout styles */
.container {
    display: flex;
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden;
}

.section {
    padding: 2rem 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Section container for content */
.section-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

/* Section titles */
.section-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: #64ffda;
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 700;
    letter-spacing: 1px;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #64ffda, rgba(100, 255, 218, 0.3));
    border-radius: 2px;
}

/* 5. Common components */
.sidebar {
    width: 15vw;
    min-width: 12rem;
    height: 100vh;
    padding: 2rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #1a1a1a;
}

.content {
    flex: 1;
    padding: 2rem 0 2rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    margin-left: 15vw; /* Match the sidebar width */
    width: calc(100% - 15vw); /* Adjust width to account for sidebar */
}



/* Mobile-only profile box */
.mobile-profile-box {
    display: none;
    background-color: #000;
    padding: 1.5rem 0;
    text-align: center;
    width: 100%;
}

/* Mobile-only sticky navigation bar - DISABLED */
.mobile-nav-bar {
    display: none !important; /* Completely hidden - using hamburger menu instead */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #000;
    z-index: 1000;
    padding: 1.2rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.mobile-nav-container {
    position: relative;
    width: 100%;
}

.hamburger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
}

.hamburger-line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #ccc;
    margin: 5px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.mobile-nav-menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.2rem;
    margin: 0;
    padding: 0 0.75rem;
    list-style: none;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.mobile-nav-menu li {
    margin: 0;
}

.mobile-nav-menu a {
    color: #ccc;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.mobile-nav-menu a:hover,
.mobile-nav-menu a:focus {
    color: #64ffda;
    background-color: rgba(100, 255, 218, 0.1);
}

/* 6. Utility classes */
.text-center {
    text-align: center;
}

.hidden {
    display: none;
}

.flex {
    display: flex;
}

/* Page wrapper for better mobile control */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.hero-container {
    order: 1;
}

.sections-container {
    order: 2;
    margin-left: 15vw; /* Match the sidebar width */
    width: calc(100% - 15vw); /* Adjust width to account for sidebar */
    max-width: calc(100% - 15vw);
    overflow-x: hidden;
}

/* 7. Responsive basics */
@media (max-width: 768px) {
    /* Ensure no horizontal overflow on mobile */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    .page-wrapper {
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Hide mobile profile box */
    .mobile-profile-box {
        display: none;
        order: 1;
    }
    
    /* Hamburger menu handled in separate media query */
    
    /* Hide desktop sidebar on mobile */
    .sidebar {
        display: none;
    }
    
    .sidebar .profile-box {
        display: none;
    }
    
    /* Ensure hero container is always first on mobile */
    .hero-container {
        flex-direction: column;
        display: flex;
        order: 2;
        height: auto;
        min-height: auto;
        padding-top: 75px; /* Account for increased mobile nav bar height */
        margin-top: -75px; /* Pull content up to eliminate gap */
        position: relative;
        z-index: 1;
        background-color: #1a1a1a; /* Ensure background covers any gaps */
    }
    
    .content {
        padding: 1rem;
        align-items: center;
        text-align: center;
        min-height: 0;
        order: 3;
        margin-left: 0; /* Reset margin on mobile */
        width: 100%; /* Full width on mobile */
    }
    
    /* Make sure sections appear after the hero container */
    .sections-container {
        order: 3;
        margin-left: 0; /* Reset margin on mobile */
        width: 100%; /* Full width on mobile */
        max-width: 100%; /* Reset max-width on mobile */
    }
    
    /* Mobile section styles */
    .section-container {
        padding: 0 1rem;
        min-height: 70vh;

    }
    
    .section-title {
        font-size: 2.5rem;
        margin-bottom: 2rem;
    }
}

/* Mobile screens - hamburger menu */
@media (max-width: 768px) {
    /* Show mobile navigation container for hamburger menu */
    .mobile-nav-bar {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.95);
        padding: 1.2rem 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        z-index: 1000;
    }
    
    .mobile-nav-container {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        padding-right: 1rem;
    }
    
    .hamburger-menu {
        display: block;
    }
    
    .mobile-nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #000;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        padding: 0;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 1000;
        max-height: fit-content;
        overflow: hidden;
    }
    
    .mobile-nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .mobile-nav-menu li {
        width: 100%;
        border-bottom: 1px solid #333;
    }
    
    .mobile-nav-menu li:last-child {
        border-bottom: none;
    }
    
    .mobile-nav-menu a {
        display: block;
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
        text-align: left;
        border-radius: 0;
    }
    
    .mobile-nav-menu a:hover,
    .mobile-nav-menu a:focus {
        background-color: rgba(100, 255, 218, 0.1);
    }
}