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

body,
html {
    height: 100%;
    /* These fonts have a slightly traditional, academic feel */
    font-family: 'Georgia', 'Times New Roman', Times, serif;
    line-height: 1.6;
    color: #333;
    /* Dark gray for better readability than pure black */
}

/* --- 2. The Background Image (The Tulip) --- */
body {
    /* This tells the browser to use your tulip image and 
       position it to cover the entire background. 
    */
    background-image: url('tulipeng.jpg');
    background-size: cover;
    /* Scale the image to fill the screen */
    background-position: top center;
    /* Keep the image at the top */
    background-repeat: no-repeat;
    /* Do not tile the image */
    background-attachment: scroll;
    /* Image scrolls with content for parallax effect */
}

/* --- 3. Content Container (Desktop: Left Side) --- */
.content-container {
    /* Create a column of text that only takes up 50% width, 
       leaving the right side (where the tulip is) completely empty. */
    min-height: 80vh;

    /* Center the text within this left container */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    background-color: rgba(255, 255, 255, 0.1);
    /* White overlay to fade the tulip */
}

/* Early sections - constrain to 60% width on left */
header,
.links,
.bio-section {
    width: 60%;
    padding-right: 8%;
}

.bio-section {
    padding-top: 4%;
    padding-bottom: 8%;
}

/* Detail section - full width dark background */
.detail-part {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 2rem calc(50vw - 50%);
    background-color: #2c2c2c;
    /* Dark background for detail section */
}

.header-part {
    /* Make the container take at least full screen height */
    padding: 10% 10% 0 10%;
}

.highlight-part {
    padding: 2rem 10% 0 10%;

    /* padding-top: 1rem; */
    background-color: rgba(255, 255, 255, 0.95);
}

.detail-part {
    padding: 2rem 10% 0 10%;
}


/* Later sections - expand to full width with proper styling */
.experience-section,
.education-section,
.selected-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 0.5rem calc(50vw - 50%);
    background-color: rgba(255, 255, 255, 0.95);
}

.publications-section,
.conference-section,
.projects-section,
.awards-section {
    width: 100%;
    margin-left: 0;
    padding: 2rem 0;
    background-color: transparent;
    color: #f0f0f0;
}

/* Add bottom padding to last section */
.awards-section {
    padding-bottom: 3rem;
}

/* Better spacing for section items */
.experience-item,
.education-item,
.publication,
.conference,
.project,
.award {
    margin-bottom: 2rem;
    padding-bottom: 0rem;
    border-bottom: 1px solid #ecf0f1;
}

.experience-item:last-child,
.education-item:last-child,
.publication:last-child,
.conference:last-child,
.project:last-child,
.award:last-child {
    border-bottom: none;
}

linetop {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
    color: #2c3e50;
}

linemid {
    display: block;
    margin-bottom: 0.3rem;
    color: #7f8c8d;
    font-size: 0.95rem;
}

linebot {
    display: block;
    color: #7f8c8d;
    font-size: 0.85rem;
}

linedet {
    display: block;
    color: #7f8c8d;
    font-size: 0.95rem;
    padding-top: 0.75rem;
}

/* Light text colors for detail section */
.detail-part linetop {
    color: #f0f0f0;
}

.detail-part linemid {
    color: #d0d0d0;
}

.detail-part linebot {
    color: #b0b0b0;
}

.detail-part h2 {
    color: #f0f0f0;
}

.detail-part a {
    color: #f0a0a0;
}

/* Apply spacing and borders to div containers with publication tags */
div>linetop {
    display: block;
}

div:has(> linetop) {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ecf0f1;
}

div:has(> linetop):last-child {
    border-bottom: none;
}

/* --- 4. Typography Styling --- */
h1 {
    font-size: 2.5rem;
    margin-bottom: 0.2rem;
    color: #2c3e50;
    /* A soft academic blue-gray */
}

.subtitle {
    font-size: 1.1rem;
    font-style: italic;
    color: #7f8c8d;
    margin: 0.5rem 0 0.75rem 0;
}

.subtitle a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.subtitle a:hover {
    text-decoration: underline;
}

h2,
h3 {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    color: #34495e;
}

p {
    margin-bottom: 1.2rem;
    font-size: 1.05rem;
}

/* --- 5. Button Styling --- */
.links {
    margin-top: 2rem;
    display: flex;
    gap: 15px;
    /* Spacing between buttons */
}

.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #a94442;
    /* A soft reddish tone from the tulip */
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #8a3533;
}

.button-secondary {
    background-color: transparent;
    border: 1px solid #a94442;
    color: #a94442;
}

.button-secondary:hover {
    background-color: rgba(169, 68, 66, 0.1);
}

/* --- 6. Responsive Rules (Mobile: Overlap and Fade) --- */

/* This rule applies ONLY when the screen is 800px wide or narrower. */
@media screen and (max-width: 800px) {

    body {
        background-position: 60% top;
    }

    .content-container {
        /* Text should now use the full width (or nearly full). */
        width: 100%;
        padding: 15% 5% 10% 5%;
        /* Adjust padding for smaller screen */

        /* On mobile, fade background image into white for readability.
           Use a semi-transparent white overlay to dissolve the tulip.
        */
        background-color: rgba(255, 255, 255, 0.5);
        /* White overlay to fade the tulip */
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
        /* For Safari */

        /* Ensure the content aligns well on smaller screens */
        justify-content: center;
        text-align: left;
    }

    /* Mobile - all sections full width */
    header,
    .links,
    .bio-section,
    .experience-section,
    .education-section,
    .selected-section,
    .publications-section,
    .conference-section,
    .projects-section,
    .awards-section {
        width: 100%;
        margin-left: 0;
        padding: 1.5rem 0;
    }

    .detail-part {
        width: 100%;
        margin-left: 0;
        padding: 1.5rem 5%;
        background-color: #2c2c2c;
    }

    .links {
        flex-direction: column;
        /* Stack buttons vertically on very narrow screens */
        align-items: flex-start;
    }

    .subtitle span {
        display: block;
    }

    h1 {
        font-size: 2rem;
    }
}