/* Color variables for light mode */
:root {
    --bg: #fdf6f0; /* Brighter background for light mode */
    --text: #222;
    --section-bg: #fff;
    --section-title: #2c3e50;
    --card-bg: #fff;
    --card-shadow: rgba(0,0,0,0.05);
    --link: #0077b6;
    --button-bg: #e0e0e0;
    --button-text: #222;

    --light-sage: #DDE3D0;
    --sage-green: #B2C2A1;
    --dark-sage: #536856;
    --muted-rose: #C7A8A1;
    --slate-blue-gray: #50727B;
    --charcoal-indigo: #35374B;
    --sage-green-mist: #78A083;
    --steel-teal: #344955;
    --light-gray: #F0F0F0;
    --ivory: #F8F5EC;
    --stone-gray: #A8A9AD;
    --dusty-blue: #A1B5C2;
    --black: #000;
}



/* Dark mode overrides */
[data-theme="dark"] {
    --bg: #181a1b;
    --text: #e0e0e0;
    --section-bg: #23272f;
    --section-title: #e0e0e0;
    --card-bg: #23272f;
    --card-shadow: rgba(0,0,0,0.3);
    --link: #90caf9;
    --button-bg: #23272f;
    --button-text: #e0e0e0;
    /* Override darker accent variables so they remain visible on dark backgrounds */
    --steel-teal: #86c0d8; /* lighter teal for accents/links */
    --dark-sage: #9fbf9a; /* lighter sage for markers and subtle text */
    --charcoal-indigo: #e0e0e0; /* headings/icon accents */
    --sage-green-mist: #a7d0a8; /* hover/secondary accents */
}

/* removed duplicate short body rule; full `body` rule appears later and uses --section-bg */

/* Centered main container for profile layout */
.profile-container {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    max-width: 90%;
    width: 100%;
    padding: 20px;
    margin: 0 auto;
    text-align: left;
    flex-direction: row;
    background: var(--card-bg);
    box-shadow: 0 2px 8px var(--card-shadow);
    border-radius: 12px;
    transition: background 0.3s, box-shadow 0.3s;
}

.profile-text {
    flex: 70%;
    padding: 10px;
}

.profile-container a, .teaching-role a {
    color: var(--steel-teal);
}

.profile-container a:hover, .teaching-role a:hover {
    margin-top: 5px;
    color: var(--sage-green-mist)
}

.profile-text a:visited, .teaching-role a:visited {
    color: var(--slate-blue-gray)
}

.default-text {
    color: var(--black);
    font-size: 1.2rem;
    line-height: 1.5;
}


/* Inline links styling with icons */
/* Inline links styling with icons */
.profile-links {
    padding: 10px;
    text-align: center;
}

.icon {
    font-size: 1.5rem;
    color: var(--steel-teal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin-right: 5px; /* Adds spacing between each link */
} 

.profile-links a:last-child {
    margin-right: 0; /* Remove the margin after the last link */
}

.profile-links a, .profile-links a img {
    width: 100%;
    height: 15px;
    margin-right: 5px; /* Adds spacing between icon and text */
    vertical-align: middle;
    color: var(--steel-teal);
}

.icon:hover {
    color: var(--sage-green-mist);
    text-decoration: none;
}

.icon:visited {
    color: var(--slate-blue-gray);
}

/* Profile image styling */
.profile-image-container {
    display: flex;
    padding: 10px;
    flex-direction: column;
    flex: 25%;
    max-width: 230px;
}

.profile-photo {
    width: 100%;
    height: auto;
    border-radius: 8%;
    object-fit: cover;
}

/* Research section styling */
.research-section {
    max-width: 900px;
    /* width: 100%; */
    margin: 20px auto;
    padding: 0 20px;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}

.research-section h2 {
    font-size: 1.8em;
    color: var(--section-title);
    margin-bottom: 10px;
}

.research-section p {
    font-size: 1em;
    line-height: 1.6;
    color: var(--text);
}

/* General body styling */
body {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    /* Use the same background as sections so the page and sections match */
    color: var(--text);
    background: var(--section-bg);
    transition: background 0.3s, color 0.3s;
}


/* Strong element styling */
.service-list strong, .experience-list strong {
    display: block;
    font-weight: bold;
    color: var(--text);
}
.service-list span {
    color: var(--steel-teal); /* Dark sage color for titles */
}
/* General alignment for each section */
.section {
    max-width: 800px; /* Align width with Publications section */
    margin: 20px auto; /* Center the section on the page */
    text-align: left; /* Left-align all text */
    padding: 0; /* Remove extra padding */
    width: 100%;
    background: var(--section-bg);
    box-shadow: 0 2px 8px var(--card-shadow);
    border-radius: 12px;
}

/* Section title styling */
.section-title {
    font-size: 1.8em;
    color: var(--section-title);
    margin-bottom: 10px;
    font-weight: bold;
}

/* Styling for Academic Services and Volunteer Experience lists */
.service-list, .experience-list {
    list-style-type: disc; /* Default bullet points */
    padding-left: 20px; /* Add consistent padding for the bullets */
    margin: 0;
}

/* Styling for each item in Academic Services and Volunteer Experience */
.service-list li, .experience-list li {
    font-size: 1em;
    line-height: 1.6; /* Ensure consistent spacing between lines */
    margin-bottom: 8px; /* Space between each list item */
    color: var(--text);
}

/* Inline link styling for conference title */
.service-list a, .experience-list a {
    color: var(--steel-teal);
    text-decoration: none;
}

.service-list a:hover, .experience-list a:hover {
    text-decoration: underline;
    color: var(--sage-green-mist)
}

.service-list a:visited, .experience-list a:visited {
    color: var(--slate-blue-gray);
}


/* Bold styling for titles within list items */
.service-list strong, .experience-list strong {
    font-weight: bold;
    margin-right: 5px; /* Space between title and conference name */
}

/* Fix bullet alignment */
.service-list li::marker, .experience-list li::marker {
    color: var(--dark-sage); /* Dark sage for bullet color */
    font-size: 1em; /* Match bullet size to text */
    vertical-align: middle; /* Align bullet with text */
}

/* Teaching experience list styling */
.teaching-list {
    list-style-type: disc; /* Default bullet points */
    padding-left: 20px;
    margin: 0;
}

.teaching-list span {
    font-weight: 1em; /* Make the teaching item title bold */
    color: var(--steel-teal); /* Dark sage color for titles */
}

/* Individual teaching item */
.teaching-list li {
    font-size: 1em;
    line-height: 1.8;
    color: var(--text); /* Neutral text color */
    margin-bottom: 15px;
}

/* Styling for dates */
.teaching-dates {
    color: var(--dark-sage); /* Dark sage */
    font-weight: bold;
}

/* Styling for role */
.teaching-role {
    color: var(--text); /* Neutral gray */
    font-weight: bold;
}

/* Styling for description */
.teaching-description {
    color: var(--dark-sage); /* Dark sage for subtlety */
    font-style: italic; /* Add differentiation for descriptions */
}

.teaching-sublist {
    color: var(--dark-sage);
    list-style-type: circle; /* Use circle bullets for sub-items */
    padding-left: 20px; /* Indent sub-items */
    margin: 0; /* Remove default margin */
}


/* =================================== */



/* Publication card container */
.publication-card {
    display: flex;
    align-items: center;
    background-color: var(--card-bg); /* Theme-aware card background */
    border-radius: 8px;
    padding: 0.7rem;
    margin-bottom: 0.6rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease-in-out, background 0.3s;
}

.welcome-text {
    font-size: 1.2rem;
    color: var(--text);
    margin-bottom: 10px;
}
/* Hover effect for cards */
.publication-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Image container */
.publication-image-container {
    flex: 25%;
    flex-shrink: 0; /* Prevent shrinking of the image container */
    display: flex; /* Center the image within the container */
    justify-content: center;
    align-items: center;
    width: 130px; /* Fixed width for the container */
    height: auto;
    margin-right: 15px; /* Space between image and content */
}

/* Image styling */
.publication-image {
    max-width: 100%; /* Scale image to fit the container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 4px;
}

/* Content container */
.publication-content {
    display: flex;
    flex-direction: column;
    flex: 1; /* Take up remaining space */
    line-height: 0.2;
    flex: 75%;
}

/* Title */
.publication-title {
    font-size: 1em;
    color: var(--steel-teal); /* Dark sage color for title */
    margin-bottom: 5px;
    font-weight: bold;
    line-height: 1.3; /* Reduced line height */
}

/* Authors */
.publication-authors {
    font-size: 0.9em;
    color: var(--text); /* Neutral text color */
    margin-bottom: 3px;
    line-height: 1.3; /* Reduced line height */
}

/* Conference details */
.publication-conference {
    font-size: 0.9em;
    color: var(--text); /* Default link color */
    line-height: 1.3; /* Reduced line height */
}

.publication-content a {
    text-decoration: none;
    color: var(--steel-teal)
}

/* Link hover effect */
.publication-content a:hover {
    text-decoration: underline;
    color: var(--sage-green-mist); 
}

/* Visited link styling */
.publication-content a:visited {
    color: var(--slate-blue-gray); 
}


/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .profile-container {
        flex-direction: column;
    }
    .publication-card {
        font-size: 1.2rem;
        flex-wrap: wrap;
        flex-direction: column; /* Stack content vertically */
        align-items: center; /* Center-align content */
        text-align: center; /* Center-align text */
    }

    .publication-image-container {
        flex: 100%;
        margin-right: 0; /* Remove right margin for stacked layout */
        margin-bottom: 10px; /* Add space below image */
        width: 100%; /* Make the image container span full width */
    }

    .publication-image {
        max-width: 150px; /* Resize image for smaller screens */
        height: auto;
    }

    .publication-content {
        flex: 100%;
        text-align: center; /* Center-align text */
    }

    .profile-container {
       flex-direction: column;
    }

    .profile-links a {
        font-size: 2rem;
    }
}