/* 
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 2rem 2rem 4rem; /* Added right padding for safety */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    margin-left: max(15vw, 200px); /* Use larger of 15vw or 200px */
    width: calc(100% - max(15vw, 200px)); /* 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: max(15vw, 200px); /* Use larger of 15vw or 200px */
    width: calc(100% - max(15vw, 200px)); /* Adjust width to account for sidebar */
    max-width: calc(100% - max(15vw, 200px));
    overflow-x: hidden;
}

/* 7. Responsive basics */

/* Intermediate screen sizes - prevent content clipping with sidebar */
@media (max-width: 1333px) and (min-width: 769px) {
    .sidebar {
        width: 200px; /* Fixed width instead of vw to prevent clipping */
        min-width: 200px;
    }
    
    .content {
        margin-left: 200px; /* Match fixed sidebar width */
        width: calc(100% - 200px);
        padding-left: 2rem; /* Add extra buffer */
    }
    
    .sections-container {
        margin-left: 200px; /* Match fixed sidebar width */
        width: calc(100% - 200px);
        max-width: calc(100% - 200px);
    }
    
    .section-container {
        padding: 0 1.5rem; /* Reduce padding on smaller screens */
    }
}

@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);
    }
}