/* --- CSS Variables --- */
:root {
    --primary-color: #64B7C6;  /* Teal/Cyan */
    --bg-color: #FFFCEB;       /* Cream/Off-white */
    --text-color: #767270;     /* Dark Gray/Taupe */
    --white: #ffffff;
    --border-radius: 8px;
    --font-main: 'Inter', sans-serif;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    line-height: 1.6;
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}

/* --- Main Layout Container (The "Paper") --- */
.resume-container {
    background-color: var(--white);
    width: 100%;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 300px 1fr; /* Sidebar fixed width, Main takes rest */
    box-shadow: 0 10px 30px rgba(118, 114, 112, 0.1); /* Soft shadow using text color */
    min-height: 1100px; /* Ensures it looks like a full page */
    position: relative;
    overflow: hidden; /* Keeps styling contained */
}

/* --- Decorative Top Border (Like the inspiration) --- */
.resume-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background-color: var(--primary-color);
    z-index: 10;
}

/* --- Sidebar (Left Column) --- */
.sidebar {
    background-color: #fcfcfc; /* Very subtle grey contrast or keep white */
    padding: 40px 30px;
    border-right: 1px solid #eee;
    text-align: right; /* Aligns content toward the center seam */
}

.profile-photo {
    margin-bottom: 30px;
    display: flex;
    justify-content: flex-end; /* Align right to match text */
}

.profile-photo img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 3px solid var(--primary-color); /* The box around the photo */
    padding: 4px; /* Space between photo and border */
    background-color: var(--white);
}

.sidebar-section {
    margin-bottom: 40px;
}

.sidebar-section h3 {
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: var(--text-color);
    font-weight: 700;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
}

.sidebar-section p, .sidebar-section a {
    font-size: 0.9rem;
    color: var(--text-color);
    text-decoration: none;
    margin-bottom: 8px;
    display: block;
}

.skill-list {
    list-style: none;
}

.skill-list li {
    font-size: 0.95rem;
    margin-bottom: 8px;
    font-weight: 500;
}

.project-item {
    margin-bottom: 20px;
}

.project-item h4 {
    font-size: 1rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.project-item p {
    font-size: 0.85rem;
    font-style: italic;
}

/* --- Main Content (Right Column) --- */
.main-content {
    padding: 60px 50px;
    background-color: var(--white);
}

/* --- Header Logo Alignment --- */
.header {
    display: flex; /* Enables Flexbox layout */
    align-items: center; /* Vertically centers the logo and text */
    gap: 25px; /* Adds space between the logo and the text block */
    margin-bottom: 50px;
}

.header-logo img {
    /* Set specific size for your logo. Adjust as needed. */
    width: 60px; 
    height: 60px;
    object-fit: contain; /* Ensures the logo fits without cropping */
}

.header-text {
    /* Ensures the text block takes up the necessary space */
    flex-grow: 1; 
}

/* Re-align the divider to start directly under the text */
.divider {
    margin-left: 0; 
}

/* Adjust responsiveness for the header on smaller screens */
@media (max-width: 768px) {
    .header {
        flex-direction: column; /* Stacks logo above text on mobile */
        text-align: center;
        gap: 15px;
    }

    .header-logo {
        /* Ensures logo is centered when stacked */
        width: 100%; 
    }
    
    .divider {
        /* Centers the divider when text is centered */
        margin: 20px auto 0 auto; 
    }
}

.header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333; /* Slightly darker than standard text for emphasis */
    margin-bottom: 5px;
}

.header h2 {
    font-size: 1.2rem;
    color: var(--primary-color);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.divider {
    border: 0;
    height: 1px;
    background: #eee;
    margin-top: 20px;
    width: 100px; /* Short stylistic underline */
}

.section {
    margin-bottom: 40px;
}

.section h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--text-color);
}

/* Timeline / Work History Styling */
.timeline-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.timeline-date {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-color);
    text-align: right;
    padding-top: 4px; /* Align with title */
}

.timeline-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2px;
}

.timeline-content .company {
    font-size: 0.9rem;
    font-style: italic;
    display: block;
    margin-bottom: 10px;
    color: #999;
}

/* --- Responsive Design (Mobile) --- */
@media (max-width: 768px) {
    .resume-container {
        grid-template-columns: 1fr; /* Stack into 1 column */
        height: auto;
    }

    .sidebar {
        text-align: left;
        border-right: none;
        border-bottom: 1px solid #eee;
        order: 2; /* Puts sidebar below header on mobile if desired, or keep 1 */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .profile-photo {
        justify-content: center;
    }

    .main-content {
        padding: 40px 20px;
        order: 1; /* Puts main content first */
    }

    .timeline-item {
        grid-template-columns: 1fr; /* Stack date and content */
        gap: 5px;
    }

    .timeline-date {
        text-align: left;
    }
}