/* 
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 */
}

/* Medium screen adjustments to prevent text clipping */
@media (max-width: 1200px) and (min-width: 769px) {
    .content {
        padding: 2rem 0 2rem 2rem;
    }
}

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

/* 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) {
    .page-wrapper {
        display: flex;
        flex-direction: column;
    }
    
    /* Show mobile profile box and hide desktop one */
    .mobile-profile-box {
        display: block;
        order: 1;
    }
    
    .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;
    }
    
    .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 */
    }
    
    .sidebar {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 1rem;
        border-right: none;
        border-bottom: none;
        order: 2;
        padding-top: 1rem;
        position: relative; /* Reset fixed position on mobile */
        top: auto;
        left: auto;
    }
    
    .nav-menu, .social-icons {
        margin-top: 1rem;
    }
    
    /* 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 */
    }
    
    /* Mobile section styles */
    .section-container {
        padding: 0 1rem;
        min-height: 70vh;
    }
    
    .section-title {
        font-size: 2.5rem;
        margin-bottom: 2rem;
    }
}