/* ============================================= */
/* 1. Root Variables & Global Setup
/* ============================================= */

:root {
    /* Fonts */
    --font-serif: 'Lora', serif;
    --font-sans: 'Open Sans', sans-serif;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 48px;
    --spacing-xxl: 96px;

    /* Sizing */
    --nav-height: 70px;
    --max-width: 1100px;
    --border-radius: 8px;

    /* Light Mode Palette */
    --color-bg: #f8f9fa; /* Off-white/Light Gray */
    --color-bg-alt: #ffffff; /* White */
    --color-text: #212529; /* Deep Navy/Black */
    --color-text-secondary: #495057;
    --color-border: #dee2e6;
    --color-accent: #005f73; /* Muted Teal */
    --color-accent-hover: #004c5c;
    --color-shadow: rgba(0, 0, 0, 0.05);

    /* Dark Mode Palette (Example: --color-accent: #b8860b; for Muted Gold) */
}

/* Dark Mode Theme */
body.dark-mode {
    --color-bg: #0a192f; /* Deep Navy */
    --color-bg-alt: #112240; /* Lighter Navy */
    --color-text: #e9ecef; /* Light Gray */
    --color-text-secondary: #adb5bd;
    --color-border: #343a40;
    --color-accent: #64ffda; /* Muted Teal (Bright for contrast) */
    --color-accent-hover: #52d1b8;
    --color-shadow: rgba(0, 0, 0, 0.2);
}

/* Global Reset & Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
    font-size: 100%; /* 16px */
}

body {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.7;
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
}

h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; } /* 32px */
h3 { font-size: 1.5rem; } /* 24px */
h4 { font-size: 1.25rem; } /* 20px */

p {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-secondary);
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

ul {
    list-style-position: inside;
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-sm);
}

ul li {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-secondary);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.content-section {
    padding: var(--spacing-xxl) 0;
}

.alt-bg {
    background-color: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* ============================================= */
/* 2. Header & Navigation
/* ============================================= */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background-color: var(--color-bg-alt);
    box-shadow: 0 2px 10px var(--color-shadow);
    z-index: 1000;
    border-bottom: 1px solid var(--color-border);
}

.main-header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.nav-logo {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
}

.nav-logo:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--spacing-lg);
    padding: 0;
    margin: 0;
}

.nav-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: var(--spacing-sm) 0;
    position: relative;
}

/* *** UPDATED ***: Underline animation */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width 0.3s;
}

/* *** UPDATED ***: Change color on hover */
.nav-link:hover {
    color: var(--color-text);
    text-decoration: none;
}

/* *** UPDATED ***: Underline only on active link */
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    color: var(--color-text);
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.theme-toggle-btn {
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 1.25rem;
    cursor: pointer;
    padding: var(--spacing-sm);
}
.theme-toggle-btn .fa-sun { display: none; }
.theme-toggle-btn .fa-moon { display: block; }
body.dark-mode .theme-toggle-btn .fa-sun { display: block; }
body.dark-mode .theme-toggle-btn .fa-moon { display: none; }

.hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 1.75rem;
    cursor: pointer;
    z-index: 1100;
}

/* ============================================= */
/* 3. Hero Section (#home)
/* ============================================= */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: var(--nav-height);
    background-color: var(--color-bg-alt);
}

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    gap: var(--spacing-xxl);
}

.hero-image-wrapper {
    width: 100%;
    max-width: 350px;
    justify-self: center;
}

.hero-photo {
    border-radius: 50%;
    border: 8px solid var(--color-bg);
    box-shadow: 0 10px 30px var(--color-shadow);
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: var(--spacing-sm);
}

.hero-content h2 {
    font-size: 1.75rem;
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.hero-content .tagline {
    font-size: 1.25rem;
    color: var(--color-text);
    margin-bottom: var(--spacing-xl);
}

/* ============================================= */
/* 4. Buttons
/* ============================================= */
.btn {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
}

.btn i {
    margin-right: var(--spacing-sm);
}

.btn-primary {
    background-color: var(--color-accent);
    color: #ffffff;
    border-color: var(--color-accent);
}
body.dark-mode .btn-primary {
    color: var(--color-bg);
}

.btn-primary:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
}
body.dark-mode .btn-primary:hover {
    color: var(--color-bg);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-secondary:hover {
    background-color: var(--color-accent);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
}
body.dark-mode .btn-secondary:hover {
    color: var(--color-bg);
}

.text-link {
    font-weight: 600;
    text-decoration: none;
}
.text-link:hover {
    text-decoration: underline;
}

/* ============================================= */
/* 5. About Section (#about)
/* ============================================= */
.qualifications-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.timeline-list {
    list-style: none;
    padding-left: 0;
    position: relative;
}

.timeline-list::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background-color: var(--color-border);
}

.timeline-list li {
    position: relative;
    padding-left: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.timeline-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-accent);
    border: 2px solid var(--color-bg-alt);
}

.timeline-list li strong {
    color: var(--color-text);
    display: block;
    font-size: 1.1rem;
}

.timeline-list li em {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* ============================================= */
/* 6. Research Section (#research)
/* ============================================= */
.research-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.research-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    box-shadow: 0 4px 15px var(--color-shadow);
    transition: transform 0.3s, box-shadow 0.3s;
}

.research-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--color-shadow);
}

.research-card h3 {
    color: var(--color-accent);
}

/* ============================================= */
/* 7. Publications Section (*** UPDATED ***)
/* ============================================= */
.publication-list {
    list-style: none;
    padding-left: 0;
}

.publication-list li {
    /* *** UPDATED ***: Removed border and padding */
    margin-bottom: var(--spacing-lg);
    line-height: 1.8;
}

.publication-list li em {
    font-weight: 600;
    color: var(--color-text);
}

/* *** NEW ***: Wrapper for citation text */
.pub-citation {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-secondary);
}

.pub-link {
    font-weight: 600;
    font-size: 0.9rem;
    margin-left: var(--spacing-md);
    text-transform: uppercase;
    white-space: nowrap; /* Prevents link from breaking */
}

/* *** NEW ***: Block-level Google Scholar link */
.scholar-link-block {
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text-secondary);
}
        
.scholar-link-block i {
    margin-right: var(--spacing-sm);
    color: var(--color-accent);
}

.scholar-link-block:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* ============================================= */
/* 8. Teaching Section (#teaching)
/* ============================================= */
.course-list {
    list-style: none;
    padding-left: 0;
    column-count: 2;
    column-gap: var(--spacing-xl);
}

.course-list li {
    position: relative;
    padding-left: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
    color: var(--color-text);
}

.course-list li::before {
    content: '\f19d'; /* Font Awesome book icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--color-accent);
}

#teaching p {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

/* ============================================= */
/* 9. Lab Section (#lab)
/* ============================================= */
.lab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.lab-member-card {
    text-align: center;
}

.lab-member-photo {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto var(--spacing-md);
    border: 4px solid var(--color-border);
    box-shadow: 0 4px 15px var(--color-shadow);
}

.lab-member-card h4 {
    margin-bottom: var(--spacing-xs);
    font-size: 1.25rem;
}

.lab-member-card p {
    font-size: 1rem;
    color: var(--color-accent);
    font-weight: 600;
    margin-bottom: 0;
}

/* ============================================= */
/* 10. Contact Section (#contact)
/* ============================================= */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.contact-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    box-shadow: 0 4px 15px var(--color-shadow);
}

.contact-card h3 {
    color: var(--color-text);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: var(--spacing-sm);
    display: inline-block;
    margin-bottom: var(--spacing-lg);
}

.contact-card h3 i {
    margin-right: var(--spacing-sm);
}

.contact-card p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
}

.contact-card p strong {
    color: var(--color-text);
}

.social-links {
    list-style: none;
    padding: 0;
    margin-top: var(--spacing-lg);
    display: flex;
    gap: var(--spacing-lg);
}

.social-links li {
    margin: 0;
}

.social-links a {
    font-size: 2rem;
    color: var(--color-text-secondary);
    text-decoration: none;
}

.social-links a:hover {
    color: var(--color-accent);
    transform: translateY(-3px);
    display: inline-block;
}

/* ============================================= */
/* 11. Footer (*** UPDATED ***)
/* ============================================= */
.main-footer {
    background-color: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.main-footer p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* *** NEW ***: Style for footer link */
.main-footer a {
    color: var(--color-text-secondary);
    font-weight: 600;
    text-decoration: none;
}

.main-footer a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* ============================================= */
/* 12. Responsive Design (Mobile-First approach)
/* ============================================= */

/* Tablet and smaller */
@media (max-width: 992px) {
    .hero-container {
        gap: var(--spacing-xl);
    }
    .hero-content h1 { font-size: 2.5rem; }
    .hero-content h2 { font-size: 1.5rem; }
    .hero-content .tagline { font-size: 1.15rem; }
    
    .qualifications-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .course-list { column-count: 1; }
}

/* Mobile */
@media (max-width: 768px) {
    /* Mobile Navigation */
    .nav-menu {
        position: fixed;
        top: var(--nav-height);
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: calc(100vh - var(--nav-height));
        flex-direction: column;
        background-color: var(--color-bg-alt);
        padding: var(--spacing-xl);
        gap: var(--spacing-xl);
        box-shadow: -5px 0 15px var(--color-shadow);
        transition: right 0.4s ease-in-out;
        border-left: 1px solid var(--color-border);
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-link {
        font-size: 1.25rem;
    }

    .hamburger {
        display: block;
    }

    /* Hero Section */
    .hero-section {
        min-height: auto;
        padding-top: calc(var(--nav-height) + var(--spacing-xl));
        padding-bottom: var(--spacing-xl);
        text-align: center;
    }
    .hero-container {
        grid-template-columns: 1fr;
        /* Reverse order: text first, then image */
        grid-template-areas: 
            "content"
            "image";
    }
    .hero-content {
        grid-area: content;
        margin-bottom: var(--spacing-xl);
    }
    .hero-image-wrapper {
        grid-area: image;
        max-width: 280px;
    }

    /* General Sections */
    .content-section {
        padding: var(--spacing-xl) 0;
    }
}

/* ============================================= */
/* 13. Print Styles
/* ============================================= */
@media print {
    :root {
        --color-bg: #ffffff;
        --color-bg-alt: #ffffff;
        --color-text: #000000;
        --color-text-secondary: #333333;
        --color-border: #cccccc;
        --color-accent: #000000;
    }

    body {
        font-family: 'Times New Roman', Times, serif;
        font-size: 12pt;
        color: #000000;
        background: #ffffff;
    }

    h1, h2, h3, h4 {
        font-family: 'Times New Roman', Times, serif;
        color: #000000;
        page-break-after: avoid;
    }

    .main-header,
    .hamburger,
    .theme-toggle-btn,
    .hero-image-wrapper,
    .btn,
    .text-link,
    .lab-grid,
    .contact-grid,
    .social-links,
    .main-footer,
    .scholar-link-block { /* Updated class */
        display: none !important;
    }

    .hero-section,
    .content-section {
        padding: 20px 0;
        box-shadow: none;
        border: none;
    }

    .hero-content {
        text-align: left;
    }
    .hero-content .tagline {
        font-size: 14pt;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }
    
    a {
        text-decoration: none;
        color: #000000;
    }

    .publication-list li {
        border-left: none;
        padding-left: 0;
    }

    /* Show DOI/links in print */
    .pub-link[href^="https://doi.org"]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
    }

    ul {
        padding-left: 20px;
    }

    section {
        page-break-inside: avoid;
    }
}