/* Minimal CSS for Jesse Campbell's personal site */

/* --- General Styling --- */

body {
    /* Background: Dark Slate Gray */
    background-color: #50586C;
    /* Text Color: Light Steel Blue */
    color: #DCE2F0;
    /* Minimal Sans-Serif Font (Roboto assumed to be loaded in HTML) */
    font-family: 'Roboto', sans-serif; 
    /* Base font size - all text will now be this size */
    font-size: 0.8em; 
    line-height: 1.4;
    margin: 0;
    padding: 0;
    display: block; 
}

main {
    /* Mobile: 90% width, centered (will be overridden on desktop) */
    width: 90%;
    /* Keep a max-width to prevent content from stretching too wide */
    max-width: 1370px; 
    padding: 20px;
    margin: 0 auto; /* Keep centering on all screens */
}

/* Desktop Alignment (Over 600px width) */
@media (min-width: 601px) {
    body {
        text-align: left;
    }
    
    main {
        /* Center the main content block */
        margin: 0 auto;    
        /* Width is already handled by max-width: 1370px */
        width: auto; 
    }
    
    header {
        /* Center the header with the main content */
        max-width: 1370px; /* Match main's max-width */
        margin: 0 auto;    
        /* Ensure 20px padding on the left and right interior of the content block */
        padding: 40px 20px 0px 20px !important; 
    }
    
    /* --- MULTI-COLUMN LAYOUT START --- */
    /* 1. Reset initial columns for screens > 600px */
    .pub-list {
        columns: initial; /* Ensure single column below 768px */
        column-gap: initial;
    }
}

/* 2 Columns for small desktops/laptops (e.g., 13-inch screen) */
@media (min-width: 768px) {
    .pub-list {
        columns: 2;
        column-gap: 40px; /* Space between columns */
    }
}

/* 3 Columns for larger laptop/desktop screens (e.g., 14-inch MBP and wider) */
@media (min-width: 1024px) {
    .pub-list {
        columns: 3;
    }
}


/* --- Header & Title --- */

header {
    text-align: left;
    /* Mobile default: 20px padding to match main content */
    padding: 40px 20px 0px 20px; 
    margin-bottom: 0px;
}

h1 {
    /* Set to 1em for uniformity with other text elements (relative to 0.8em body) */
    font-size: 1.2em; 
    font-weight: normal; 
    /* Ensure title color is consistent with body text */
    color: #DCE2F0; 
    margin: 0;
}

h2 {
    font-size: 1.3em;
    border-bottom: 1px solid rgb(248, 248, 248); 
    padding-bottom: 5px;
    margin-top: 40px;
    margin-bottom: 15px;
    font-weight: normal;
}

/* Ensure paragraph text is the base uniform size */
.about-me p {
    font-size: 1em; 
}

/* --- About Me Links (Minimal Signal: Bold Text) --- */
.about-me a {
    /* Minimal signal: bold text, standard color, no background or underline */
    color: #DCE2F0; 
    background-color: transparent; 
    font-weight: bold; 
    text-decoration: none;
    transition: color 0.2s, text-shadow 0.2s;
}

.about-me a:hover {
    /* Subtle hover: Brighter color and slight text shadow/glow */
    color: #FFF; /* Pure White on hover */
    text-shadow: 0 0 5px rgba(220, 226, 240, 0.5); 
    background-color: transparent; 
}


/* --- About Me Section --- */

.about-me {
    /* Restored margin and padding from original/standard structure */
    margin-bottom: 30px;
    border-bottom: 1px solid rgb(248, 248, 248); 
    padding-bottom: 20px;
}

/* --- Publications List --- */

.pub-list {
    list-style: none; 
    padding: 0;
    /* Essential: This prevents list items from breaking in half between columns */
    break-inside: avoid-column; 
}

.pub-list li {
    margin-bottom: 15px;
    display: block; 
    align-items: flex-start;
}

/* --- New Image Styling --- */
.publication-image {
    max-width: 100%; /* Ensures the image is fully responsive */
    height: auto;
    display: block; /* Makes the image take up its own line */
    margin-top: 10px; /* Adds space above the image */
    margin-bottom: 25px; /* Adds space before the next publication */
}   

.pub-list li:last-child {
    margin-bottom: 0;
}

.year {
    font-size: 0.9em; 
    color: #888; 
    flex-shrink: 0; 
    margin-right: 15px;
    padding-top: 3px;
    font-weight: bold;
}

/* --- Publications Links --- */

.pub-list a {
    /* Set to 1em for uniformity with other text elements */
    color: #DCE2F0; 
    text-decoration: none; 
    padding-bottom: 0; 
    border-bottom: none; 
    display: inline;
    font-size: 1em; 
    transition: color 0.2s, background-color 0.2s;
}

.pub-list a:hover {
    /* Inverse block hover effect */
    color: #FFF; /* Pure White on hover */
    text-shadow: 0 0 5px rgba(220, 226, 240, 0.5); 
    background-color: transparent; 
    text-decoration: none; 
}


/* Bold text inside the paragraph */
.about-me p strong {
    font-weight: bold;
    color: #DCE2F0; /* Ensure bold text is visible */
}