/* =============================================================================
   user.css — Visual polish & QoL improvements for kerianfiter.github.io
   Loaded automatically by the Hugo Monochrome theme when this file exists.
   All colour references use the theme's CSS custom properties so both
   light and dark modes are supported automatically.
   ============================================================================= */

/* ── 1. TYPOGRAPHY ─────────────────────────────────────────────────────────── */

html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
                 Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

body {
    /* Slightly looser line-height for improved readability */
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
    line-height: 1.25;
}

/* ── 2. SMOOTH THEME TRANSITIONS ────────────────────────────────────────────── */

/*
 * Apply a short transition when switching between light and dark themes.
 * We use the [data-theme] approach the Monochrome theme already uses —
 * transitions only fire on attribute change, not on initial page load.
 */
html {
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* ── 3. SCROLL-AWARE HEADER ────────────────────────────────────────────────── */

header {
    position: static;
    background-color: var(--color-background);
    transition: background-color 0.25s ease, color 0.25s ease;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ── 4. NAVBAR ─────────────────────────────────────────────────────────────── */

#navbar .navbar-item > a.pure-menu-link {
    transition: color 0.18s ease;
    font-weight: 500;
    letter-spacing: 0.01em;
}

#navbar .navbar-item {
    transition: border-bottom-color 0.18s ease;
}

/* ── 5. PROFILE PICTURE ────────────────────────────────────────────────────── */

/* The profile picture is an <img> inside a float-left div on the index page */
#content img[alt="Profile picture of Kérian Fiter"],
img[alt="Profile picture of Kérian Fiter"] {
    border-radius: 12px;
    box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

img[alt="Profile picture of Kérian Fiter"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.22);
}

/* ── 6. SOCIAL ICON LINKS ──────────────────────────────────────────────────── */

/* The social icon row sits in a flex div just below the profile picture */
div[style*="justify-content: center"] > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background-color: var(--color-background);
    transition: background-color 0.18s ease,
                border-color 0.18s ease,
                transform 0.18s ease,
                box-shadow 0.18s ease;
}

div[style*="justify-content: center"] > a:hover {
    background-color: var(--color-background-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.12);
}

div[style*="justify-content: center"] > a svg {
    transition: color 0.18s ease;
}

/* ── 7. LINK HOVER EFFECT ──────────────────────────────────────────────────── */

#content a:not(.pure-menu-link):not([class]) {
    position: relative;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size 0.22s ease, color 0.15s ease;
}

#content a:not(.pure-menu-link):not([class]):hover {
    background-size: 100% 1px;
}

/* ── 8. NEWS LIST TIMELINE ─────────────────────────────────────────────────── */

/* Style the news section bullet list */
#content h2#news + ul {
    list-style: none !important;
    padding-left: 0 !important;
}

#content h2#news + ul > li {
    list-style-type: none !important;
    margin-bottom: 0.9rem;
    position: relative;
    padding-left: 6.7rem;
    min-height: 1rem;
}

#content h2#news + ul > li::before {
    display: none !important;
}

/* Date Tag / Pill for the item */
#content h2#news + ul > li strong:first-child {
    position: absolute;
    left: 0;
    top: 0.0rem;
    display: inline-block;
    background-color: var(--color-background);
    color: var(--color-text);
    padding: 0.15rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

/* ── 9. COLLAPSIBLE PANELS ─────────────────────────────────────────────────── */

.collapsible-panel {
    border: 1px solid var(--color-border) !important;
    border-left: 3px solid var(--color-border) !important;
    border-radius: 8px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.collapsible-panel:hover {
    border-left-color: var(--color-link) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.12);
}

.collapsible-button {
    border-radius: 8px !important;
    transition: background-color 0.18s ease !important;
}

.collapsible-content {
    border-top: 1px solid var(--color-border);
}

.collapsible-title {
    font-weight: 500 !important;
    font-size: 0.95rem !important;
}

/* ── 10. CONTENT IMAGES — HOVER ─────────────────────────────────────────────── */

/* General content images get a subtle hover lift (exclude the profile pic which has its own) */
#content img:not([alt="Profile picture of Kérian Fiter"]) {
    border-radius: 8px;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

#content img:not([alt="Profile picture of Kérian Fiter"]):hover {
    transform: scale(1.015) translateY(-2px);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.20);
}

/* ── 11. CODE BLOCKS ───────────────────────────────────────────────────────── */

pre {
    border-radius: 8px !important;
    border-left: 3px solid var(--color-border);
}

code:not(pre > code) {
    border-radius: 4px;
    padding: 0.1em 0.35em;
    font-size: 0.88em;
}

/* ── 12. SELECTION HIGHLIGHT ───────────────────────────────────────────────── */

::selection {
    background-color: var(--color-link);
    color: #fff;
}

html[data-theme="dark"] ::selection {
    background-color: var(--color-link);
    color: #1a1a2e;
}

/* ── 13. FOOTER ─────────────────────────────────────────────────────────────── */

footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
    color: var(--color-text-footer);
}

/* ── 14. SCROLL-TO-TOP BUTTON ──────────────────────────────────────────────── */

#scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background-color: var(--color-background);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.18);
    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.25s ease,
                transform 0.25s ease,
                background-color 0.18s ease,
                border-color 0.18s ease,
                box-shadow 0.18s ease;
    z-index: 200;
}

#scroll-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#scroll-to-top:hover {
    background-color: var(--color-background-hover);
    border-color: var(--color-link);
    box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.24);
    transform: translateY(-2px);
}

#scroll-to-top:active {
    transform: translateY(0);
}

/* ── 15. TOOLBOX BUTTON HOVER ──────────────────────────────────────────────── */

.toolbox-btn {
    border-radius: 6px;
    padding: 4px;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.toolbox-btn:hover {
    color: var(--color-text) !important;
    background-color: var(--color-background-hover);
}

/* ── 16. FOCUS STYLES — ACCESSIBILITY ──────────────────────────────────────── */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ── 17. TOPIC TAGS ────────────────────────────────────────────────────────── */

.topic-tags-container {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0;
}

.course-year {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
    margin-bottom: 0.15rem;
    margin-top: 1.25rem;
}

.course-year:first-child {
    margin-top: 0;
}

.topic-tags {
    display: block;
    line-height: 1.8;
}

.tag {
    display: inline;
    padding: 0;
    font-size: 0.95rem;
    color: var(--color-text);
    transition: color 0.2s ease;
    border: none;
    background: none;
    box-shadow: none;
}

.tag:hover {
    color: var(--color-link);
    background: none;
    border-color: transparent;
    transform: none;
    box-shadow: none;
}

.tag:not(:last-child)::after {
    content: " • ";
    color: var(--color-border);
    margin: 0 0.2rem;
    display: inline;
}

/* ── 18. PUBLICATIONS LAYOUT ────────────────────────────────────────────────── */

.publication-item {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.publication-item:last-child {
    border-bottom: none;
}

@media (min-width: 768px) {
    .publication-item {
        flex-direction: row;
        align-items: flex-start;
    }
}

.publication-thumbnail {
    flex-shrink: 0;
    width: 100%;
    max-width: 240px;
}

@media (min-width: 768px) {
    .publication-thumbnail {
        width: 220px;
        position: sticky;
        top: 6rem;
    }
}

.publication-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.10);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.publication-thumbnail img:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.15);
}

.publication-info {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.publication-title {
    margin: 0 !important;
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
}

.publication-title a {
    color: var(--color-text);
    text-decoration: none !important;
    background-image: none !important;
    transition: color 0.15s ease;
}

.publication-title a:hover {
    color: var(--color-link);
}

.publication-authors {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.publication-venue {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

.publication-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.pub-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    background-color: var(--color-background-hover);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none !important;
    background-image: none !important;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pub-btn:hover, .pub-btn.active {
    background-color: var(--color-background);
    border-color: var(--color-link);
    color: var(--color-link);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px -2px rgba(0,0,0,0.08);
}

.publication-abstract-content {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--color-background-hover);
    border-left: 3px solid var(--color-link);
    border-radius: 0 6px 6px 0;
    font-size: 0.9rem;
    line-height: 1.6;
    display: none;
    animation: fadeIn 0.3s ease;
}

.publication-abstract-content.active {
    display: block;
}

.publication-bibtex-content {
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--color-background-hover);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    display: none;
    animation: fadeIn 0.3s ease;
}

.publication-bibtex-content.active {
    display: block;
}

.publication-bibtex-content pre {
    margin: 0;
    padding: 0.85rem;
    width: 100%;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.publication-bibtex-content code {
    display: block;
    min-width: 100%;
    width: max-content;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
}

.publication-bibtex-code-wrap {
    position: relative;
}

.publication-bibtex-copy-btn {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    background-color: var(--color-background-hover);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none !important;
    background-image: none !important;
    transition: all 0.2s ease;
    z-index: 1;
    opacity: 0.92;
}

.publication-bibtex-copy-btn:hover {
    color: var(--color-link);
    border-color: var(--color-link);
    background-color: var(--color-background);
}

.publication-bibtex-copy-btn .icon-check {
    display: none;
}

.publication-bibtex-copy-btn.copied .icon-copy {
    display: none;
}

.publication-bibtex-copy-btn.copied .icon-check {
    display: inline-block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

html[data-theme="dark"] .publication-img-light { display: none; }
html[data-theme="light"] .publication-img-dark { display: none; }