/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}







/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* Dark Mode */
body.dark {
    background-color: #0f172a; /* Dark background */
    color: #bac0c8; /* Light text color */
}

body.dark .profile-picture img {
    filter: brightness(92%); /* Reduce brightness and slightly lower contrast */
    opacity: 0.9; /*Add subtle transparency*/
    /* transition: filter 0.1s ease, opacity 0.1s ease; Smooth transition effect */
}

body.dark .profile-picture img:hover {
    filter: brightness(100%); /* Restore some brightness on hover for emphasis */
    opacity: 1; /* Remove transparency on hover */
    transition: filter 0.2s ease, opacity 0.2s ease; /* Smooth transition effect */
}

body.dark a {
    color: #508dd7; /* Links in dark mode */
}

body.dark a:hover {
    color: #6399da; /* Hover color for links in dark mode */
}

body.dark header {
    background-color: #1e293b; /* Header background */
}

body.dark .venue-block {
    background-color: #334155; /* Venue block background */
    color: #bac0c8; /* Text color for venue block in dark mode */
}

body.dark .profile-picture img {
    border-color: #334155; /* Dark border for profile picture */
}

body.dark .email-link .tooltip {
    background-color: #1e293b; /* Tooltip dark background */
    color: #bac0c8; /* Tooltip text color */
}

body.dark nav a {
    color: #508dd7; /* Navigation links in dark mode */
}

body.dark nav a:hover {
    color: #5da0f2; /* Navigation hover color */
}


body.dark .publication .authors {
    color: #bac0c8; /* Authors text color */
}

body.dark .publication .tldr {
    font-size: 0.9em;
    color: #bac0c8;
}

body.dark .go-to-top {
    background-color: #334155; /* Button background */
    color: #bac0c8; /* Button text */
}

body.dark .go-to-top:hover {
    background-color: #3d6db8; /* Button hover background */
}





/* Default icon styling for light mode */
svg.icon path {
    /* stroke: var(--cool-a); Default text color */
    fill: var(--cool-a);
    transition: stroke 0.5s ease; /* Smooth transition effect */
}

/* Icon styling for dark mode */
body.dark svg.icon path {
    fill: #508dd7; /* Bright color for dark mode */
    transition: stroke 0.5s ease; /* Smooth transition effect */
}









/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* General Reset */
body, h1, h2, h3, p, a, nav, section, aside {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: 'Arial', sans-serif;
    background-color: #edf7f9; /* Cool light background */
    color: #1a2930; /* Deep bluish text color */
    line-height: 1.5;
    transition: background-color 0.5s ease, color 0.5s ease;
}






/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* Hyperlink Styling */

/* General Hyperlink Styling */
a {
    color: #336b87; /* Cool accent color for hyperlinks */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.5s ease;
    /* transition: color 0.2s ease, background-color 0.2s ease; */
    /* background-color: rgba(51, 107, 135, 0.3); Subtle background highlight */
    /* padding: 0 0.1em; Slight padding for better visibility */
    /* border-radius: 3px; Rounded edges for subtle distinction */
}

/* Hover Effect */
a:hover {
    color: #264d59; /* Darker accent color for hover state */
    text-decoration: underline; /* Underline effect on hover */
    /* background-color: rgba(51, 107, 135, 0.6); More prominent background highlight */
}

/* Visited Links */
a:visited {
    color: #336b87; /* Keep visited links consistent with unvisited links */
    /* opacity: 0.85; Slightly subdued opacity for visited links */
}




/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* Header Navigation */
header {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: right;
    align-items: center;
    background-color: #b0dfe6; /* Cool soft blue background */
    padding: 1em 2em;
    transition: background-color 0.5s ease;
    z-index: 500;
}

nav {
    display: flex;
    gap: 4em;
    /* margin-right: 8em; */
}

nav a {
    text-decoration: none;
    color: #336b87;
    font-weight: bold;
}

nav a:hover {
    color: #264d59;
}


/* Toggle Button */
.dark-switch {
    /* position: fixed; */
    /* margin-right: 1em; */
    /* top: 0.5em; */
    padding-left: 3em;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #5da0f2;
    outline: none;
    transition: color 0.5s ease;
}

.dark-switch:hover {
    color: #3d6db8;
}








/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* Layout */
.container {
    display: flex;
    flex-direction: row;
    gap: 2em;
    padding: 2em;
    max-width: 1200px;
    margin: 0 auto;
}

aside {
    flex: 1;
    max-width: 250px;
    margin-left: 2em;
    margin-right: 2em;
}


main {
    flex: 3;

    display: flex;
    flex-direction: column;
    gap: 2em;
    max-width: 750px; /* Limit line width for better readability */
    margin-right: auto; /* Add margin to the right */
    margin-left: auto; /* Center the content for balance */
    padding: 0 1em; /* Add some padding on the left and right for spacing */
}







/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* Sidebar */

/* .profile-picture img {
    width: 100%;
    border-radius: 8px;
    border: 2px solid #edf7f9;
} */

.profile-picture img {
    width: 100%;
    max-width: 200px; /* Ensure the photo doesn't get too large */
    aspect-ratio: 1 / 1; /* Force a square aspect ratio */
    border-radius: 50%;
    /* border-radius: 10%; */
    border: 4px solid #cbeaf1; /* Optional: Add a border for aesthetics */
    box-shadow: 0 4px 6px #1a293030; /* Optional: Add a subtle shadow */
    transition: filter 0.5s ease, opacity 0.5s ease, border-color 0.5s ease; /* Smooth transition effect */
}

.external-links {
    margin-left: 0.5em;
    margin-top: 1em;
    transition: filter 0.5s ease;
}

.external-links a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #336b87;
    margin-bottom: 0.5em;
    transition: color 0.5s ease;
}

.external-links img {
    width: 20px;
    height: 20px;
    margin-right: 0.5em;
}

.external-links a:hover {
    color: #264d59;
    text-decoration: underline;
}








/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* Email Link Tooltip */
.email-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: inherit;
    font-weight: bold;
    cursor: pointer;
}

.email-link .tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%; /* Position the tooltip below the link */
    left: 50%; /* Center align the tooltip */
    transform: translateX(-50%);
    background-color: #b0dfe6; /* Cool tooltip background */
    color: #1a2930; /* Tooltip text color */
    padding: 0.5em;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 0.9em;
    box-shadow: 0 4px 6px #1a293030;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10; /* Ensure it appears above other content */
}

.email-link:hover .tooltip {
    visibility: visible;
    opacity: 1;
}







/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* Main Content */
section {
    padding: 1em 0;
    border-bottom: 1px solid #d3e5ea;
    scroll-margin-top: 56px; /* Adjust this value to match the height of your sticky navbar */
}

section:last-child {
    border-bottom: none;
}







/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* Publications Section */
#publications .publication {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5em;
    /* transition: color 0.5s ease; */
}

.venue-and-title {
    display: flex; /* Display the venue block and title side by side */
    align-items: center; /* Vertically align the venue block and title */
    gap: 0.5em; /* Add some space between the venue block and the title */
    /* transition: color 0.5s ease; */
}

.venue-block {
    background-color: #b0dfe6; /* Cool venue block background */
    color: #1a2930;
    font-size: 0.7em;
    padding: 0.2em 0.6em;
    border-radius: 4px;
    font-weight: bold;
    flex-shrink: 0; /* Prevents the block from resizing */
    transition: background-color 0.5s ease, color 0.5s ease;
}

.publication h3 {
    font-size: 1.0em;
    font-weight: bold;
    margin: 0;
    /* line-height: 1.3; */
}


.publication .authors {
    font-size: 0.9em;
    color: #1a2930;
    margin-top: 0.2em;
    transition: color 0.5s ease;
}

.publication a {
    font-size: 0.9em;
    color: #336b87;
    text-decoration: none;
    font-weight: bold;
    /* margin-right: 0.5em; */
    transition: color 0.5s ease;
}

.publication a:hover {
    color: #264d59;
    text-decoration: underline;
}

.publication .tldr {
    font-size: 0.9em;
    color: #1a2930;
    /* margin-top: 0.5em; */
    /* line-height: 1.2; */
    transition: color 0.5s ease;
}

/* Ensure a clean look for all publication items */
.publication:last-child {
    margin-bottom: 0;
}











/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* Go to Top Button */
.go-to-top {
    position: fixed;
    bottom: 2em; /* Distance from the bottom of the page */
    right: 2em; /* Distance from the right side of the page */
    aspect-ratio: 1 / 1;
    background-color: var(--cool-a);
    color: var(--cool-bg);
    border: none;
    /* padding: 0.2em 0.2em; */
    border-radius: 50%; /* Circular button */
    font-size: 0.9em;
    box-shadow: 0 4px 6px #1a293030;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.5s ease, transform 0.5s ease, background-color 0.5s ease, color 0.5s ease;
    visibility: hidden; /* Hidden by default */
    z-index: 1000; /* Ensure it floats above all content */
}

.go-to-top:hover {
    opacity: 1; /* Fully visible when hovered */
    transform: scale(1.1); /* Slightly larger when hovered */
}

.go-to-top.show {
    visibility: visible; /* Show when scrolled down */
    opacity: 0.4; /* Reset opacity when shown */
}



/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* Copyright Footer */
.copyright-footer {
    margin-top: 2em;
    padding: 1em 0;
    text-align: center;
    font-size: 0.8em;
    color: #6c7a82; /* Subtle gray color */
    border-top: 1px solid #d3e5ea;
    transition: color 0.5s ease, border-color 0.5s ease;
}

.copyright-text {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.4;
}

.attribution-notice {
    display: block;
    margin-top: 0.3em;
    font-size: 0.9em;
    opacity: 0.8;
}

/* Dark mode adjustments for copyright footer */
body.dark .copyright-footer {
    color: #5a6978;
    border-top-color: #334155;
}








/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* Color Customization */
:root {
    --cool-a: #336b87; /* Accent color */
    --cool-bg: #edf7f9; /* Background color */
    --cool-text: #1a2930; /* Text color */
    --cool-hover: #264d59; /* Hover state color */
}

/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* Responsive Design - Tablets and Mobile */
/* Tablets (768px and below) */
@media (max-width: 768px) {
    /* Layout adjustments */
    .container {
        flex-direction: column;
        padding: 1.5em 1em;
    }
    
    aside {
        max-width: 100%;
        margin: 0 auto 2em auto;
        text-align: center;
    }
    
    .profile-picture img {
        max-width: 150px;
    }
    
    main {
        max-width: 100%;
        padding: 0;
    }
    
    /* Navigation */
    header {
        padding: 0.8em 1em;
    }
    
    nav {
        gap: 2em;
    }
    
    /* Publication/Projects adjustments */
    .venue-and-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3em;
    }
    
    /* External links */
    .external-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1em;
    }
    
    /* Go to top button */
    .go-to-top {
        bottom: 1em;
        right: 1em;
    }
}

/* Mobile Phones (480px and below) */
@media (max-width: 480px) {
    /* Layout */
    .container {
        padding: 1em 0.5em;
    }
    
    /* Typography */
    h1 {
        font-size: 1.5em;
    }
    
    h2 {
        font-size: 1.3em;
    }
    
    /* Navigation */
    header {
        justify-content: center;
    }
    
    nav {
        gap: 1em;
        font-size: 0.9em;
    }
    
    .dark-switch {
        padding-left: 1em;
    }
    
    /* Publications/Projects */
    .publication h3 {
        font-size: 0.95em;
    }
    
    .publication .authors,
    .publication .tldr,
    .publication a {
        font-size: 0.85em;
    }
    
    .venue-block {
        font-size: 0.65em;
    }
    
    /* Email tooltip */
    .email-link .tooltip {
        width: 90%;
        left: 0;
        transform: none;
        font-size: 0.8em;
    }
    
    /* Go to top button */
    .go-to-top {
        font-size: 0.8em;
    }
}