:root {
    --bg-color: #1f1f1f;
    --text-color: #ffffff;
    --text-muted: #a0a0a0;
    --accent-color: #ffffff;
    /* Using white for active state as requested */
    --hover-bg: #333333;
    --indicator-color: #888888;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    height: 100vh;
    overflow: hidden;
    /* Prevent body scroll, handle inside containers */
}

/* LAYOUT */
/* LAYOUT */
.main-container {
    display: flex;
    /* Sidebar is fixed, so flow logic changes; main container mainly wraps content now */
    height: 100vh;
}

/* SIDEBAR */
.sidebar {
    position: fixed;
    top: 0;
    left: 40px;
    /* Shifted right for breathing room */
    width: 320px;
    height: 100vh;
    /* Transparent background to match body uniform color */
    background-color: transparent;
    display: flex;
    flex-direction: column;
    /* Increased left padding to 80px to shift content right */
    padding: 0 40px 0 80px;
    z-index: 10;
}

.profile-section {
    width: 100%;
    margin-top: 80px;
}

/* Profile Image - Left Aligned */
.profile-img {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #333;
    /* Left align: no auto margins */
    margin: 0 0 24px 0;
}

/* Text & Alignment Left */
.name {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
    text-align: left;
    line-height: 1.2;
}

.subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #aaaaaa;
    margin-bottom: 20px;
    /* Tighter gap to icons */
    text-align: left;
}

.social-icons {
    display: flex;
    gap: 16px;
    margin-bottom: 48px;
    justify-content: flex-start;
    /* Left align */
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cccccc;
    transition: color 0.2s ease;
    background: none;
    /* No background squares */
    padding: 0;
    width: auto;
    height: auto;
}

.social-icon:hover {
    color: #ffffff;
    background: none;
    transform: none;
}

/* NAV */
.nav-menu {
    width: 100%;
}

.nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
    margin: 0;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    cursor: pointer;
}

.nav-item a {
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #888888;
    transition: color 0.2s ease;
    display: block;
    /* Ensure text element is what lines up with names */
}

/* Active State */
.nav-item.active a {
    color: #ffffff;
}

.nav-item:hover a {
    color: #ffffff;
}

/* Indicator Logic */
/* Needs to be 16px LEFT of the text. */
/* Text is at the 0px line of the flex container (or left-aligned). */
/* So indicator goes absolute left negative. */
.indicator {
    position: absolute;
    left: -19px;
    /* 16px gap + 3px width */
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    /* Hidden by default */
    background-color: #cccccc;
    opacity: 0;
    transition: height 0.2s ease, opacity 0.2s ease;
}

/* Show indicator for active item */
.nav-item.active .indicator {
    height: 20px;
    opacity: 1;
}

/* Indicator appears on hover too (handled by JS state toggling mostly, but can force with CSS if desired) */
/* The user requested: "On hover... rectangle appears... smooth transition" */
/* Our JS handles adding the visual state, so these CSS classes support it. */

/* Also show for hover if we handle via JS, but good to have CSS fallback logic or base styles */
/* The requirement is: "Hovering Projects/Contact temporarily shows indicator for the hovered item." */
/* We will handle the "temporarily shows" more precisely with JS effectively by toggling classes or styles, 
   but CSS hover can do most of the work if we remove the 'active' class on parents or manage state carefully. 
   However, user asked for JS behavior: "When mouse leaves nav, indicator returns to Blog."
   So we'll use a specific class for the "hovered" visual state or manage it purely via JS updates to class names.
   Let's stick to using classes: .active (persistent) and we can momentarily move it or instantiate a separate hover effect.
   Actually, the prompt says: "The active nav item... should have a small grey rectangle... The inactive nav items... On hover, they should brighten and show the SAME grey rectangle... but only while hovering."
*/

/* CONTENT FEED */
.content-feed {
    flex: 1;
    margin-left: 360px;
    /* 320px width + 40px layout shift */
    padding: 80px 40px 80px 60px;
    /* Top padding matches sidebar visual start pattern */
    height: 100vh;
    overflow-y: auto;

    /* Hide scrollbar for cleaner look but keep functionality */
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}

.content-feed::-webkit-scrollbar {
    width: 6px;
}

.content-feed::-webkit-scrollbar-track {
    background: transparent;
}

.content-feed::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 3px;
}

.post-card {
    display: block;
    text-decoration: none;
    margin-bottom: 60px;
    max-width: 600px;
    transition: transform 0.2s ease;
}

.post-card:hover {
    transform: translateY(-2px);
}

.post-card:hover .post-title {
    color: #ffffff;
    /* Brighten/Ensure pure white */
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    text-underline-offset: 4px;
}

.post-title {
    font-size: 28px;
    font-weight: 700;
    color: #eeeeee;
    /* Slightly off-white normally */
    margin-bottom: 12px;
    line-height: 1.3;
}

.post-date {
    font-size: 13px;
    color: #666;
    margin-bottom: 16px;
    font-family: inherit;
    font-weight: 500;
}

.post-excerpt {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 850px) {
    .main-container {
        flex-direction: column;
        padding: 0 20px;
        overflow-y: scroll;
        /* Allow body scroll on mobile */
        height: auto;
    }

    body {
        overflow-y: auto;
        height: auto;
    }

    .sidebar {
        position: relative;
        left: 0;
        /* Reset layout shift */
        width: 100%;
        height: auto;
        min-height: 0;
        /* Ensure no min-height forcing */
        padding: 6px 20px 10px 20px;
        /* Reduced top padding substantially to 6px */
        border-bottom: 1px solid #333;
        /* Optional separation on mobile */
        margin-bottom: 20px;
        align-items: center;
        /* Center flex items */
        justify-content: flex-start;
        /* Align to top */
    }

    .profile-section {
        margin-bottom: 0;
        /* Reset margin, handle via internal elements */
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .profile-img {
        width: 80px;
        /* 80px as requested */
        height: 80px;
        margin: 0 auto 12px auto;
        /* 12px margin to name */
    }

    .name {
        text-align: center;
        margin-bottom: 6px;
        /* 6px margin to subtitle */
        font-size: 24px;
    }

    .subtitle {
        text-align: center;
        margin-bottom: 14px;
        /* 14px margin to socials */
    }

    .social-icons {
        justify-content: center;
        width: 100%;
        margin-bottom: 8px;
        /* Reduced to 8px to pull nav up */
    }

    .content-feed {
        margin-left: 0;
        /* Reset offset */
        padding: 0 20px 60px 20px;
        overflow: visible;
        /* Let the body scroll handle it */
    }

    .nav-list {
        flex-direction: row;
        gap: 28px;
        /* 28px gap */
        justify-content: center;
        padding-top: 0;
        padding-bottom: 0;
    }

    .nav-item {
        padding: 4px 0;
    }

    .nav-item a {
        margin-left: 0;
    }

    /* Hide the side indicator on mobile as it might look weird in row layout, 
       or adjust it to be bottom. Let's hide it to keep it simple or make it bottom. */
    .indicator {
        display: none;
    }

    .nav-item.active a {
        color: #fff;
        border-bottom: 2px solid var(--indicator-color);
    }
}

/* SUB-PAGE STYLES */
.page-header {
    margin-bottom: 40px;
}

.page-title {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    color: var(--text-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 32px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.back-btn:hover {
    opacity: 1;
}

.back-btn svg {
    margin-right: 8px;
}

/* BLOG POST CONTENT */
.blog-content p {
    font-size: 18px;
    line-height: 1.8;
    color: #cccccc;
    margin-bottom: 24px;
    max-width: 700px;
}

.blog-content ul,
.blog-content ol {
    margin-bottom: 24px;
    padding-left: 24px;
    max-width: 700px;
}

.blog-content li {
    font-size: 18px;
    line-height: 1.8;
    color: #cccccc;
    margin-bottom: 8px;
}

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 32px;
    margin-top: 8px;
    display: block;
}

/* CONTACT FORM */
.contact-form {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.form-input,
.form-textarea {
    background-color: #2a2a2a;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 12px;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-textarea:focus {
    border-color: #555;
}

.form-textarea {
    min-height: 150px;
    resize: vertical;
}

.submit-btn {
    background-color: #fff;
    color: #000;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    align-self: flex-start;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.submit-btn:hover {
    background-color: #e0e0e0;
}

.submit-btn:active {
    transform: scale(0.98);
}

/* HOMEPAGE POST PREVIEW IMAGES */
.post-preview-images {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 16px;
    overflow-x: auto;
    /* Handle overflow if images are too wide */
}

.post-preview-images img {
    height: 120px;
    /* Fixed height for uniformity */
    width: auto;
    border-radius: 6px;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.post-card:hover .post-preview-images img {
    opacity: 0.9;
    /* Slight effect on hover */
}

/* Side-by-side images in blog content */
.blog-image-row {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}

.blog-image-row img {
    width: calc(50% - 8px);
    /* Half width minus half gap */
    height: auto;
    margin-bottom: 0;
    /* Reset margin since row handles it */
    margin-top: 0;
    object-fit: cover;
    border-radius: 8px;
}

@media (max-width: 600px) {
    .blog-image-row {
        flex-direction: column;
        gap: 16px;
    }

    .blog-image-row img {
        width: 100%;
    }
}

/* Custom Inline Code Styling */
codeinline {
    background-color: #2a2a2a;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: #e0e0e0;
    display: inline-block;
    /* Behave like text but respect padding/margins */
}

/* Utility Classes */
.text-link {
    color: #4da6ff;
    /* Legible blue for dark mode */
    text-decoration: none;
    transition: color 0.2s ease;
}

.text-link:hover {
    color: #80c4ff;
    text-decoration: underline;
}