/* polish.css
 * Safe visual refinements on top of your existing CSS.
 * - No layout changes
 * - Does not override your body background gradient
 * - Only polishes cards, images, text spacing, and interactions
 */

/* ============================= */
/* 1. Design tokens / base values */
/* ============================= */

:root {
    --color-primary: #2575fc;   /* existing accent blue */
    --color-secondary: #6a11cb; /* existing accent purple */
    --border-soft: #e5e7eb;
    --radius-card: 12px;
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* IMPORTANT: we do NOT touch body{} here, so your gradient stays */

/* ============================= */
/* 2. Typography & spacing (soft) */
/* ============================= */

/* Basic paragraph spacing */
p {
    margin: 0 0 1rem;
}

/* Headings: subtle letterspacing and consistent vertical rhythm */
.page-title {
    letter-spacing: 0.02em;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.section-header {
    letter-spacing: 0.01em;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* Publications: breathing room between year and entries */
.publication-year {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

.publication {
    margin-bottom: 1.25rem;
}

/* ============================= */
/* 3. Card / container unification */
/* ============================= */

.div-1,
.div-nav,
.div-4,
.contact-link,
.column-4 {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
}

/* Light, consistent borders on white cards */
.div-nav,
.div-4,
.contact-link {
    border: 1px solid var(--border-soft);
}

/* Keep .div-1 special: use your existing gradient colors via tokens */
.div-1 {
    background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
    color: #ffffff;
}

/* ============================= */
/* 4. Image framing polish        */
/* ============================= */

.portrait-img,
.other-img {
    border-radius: 1rem;
    border: 3px solid var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    max-width: 100%;
    height: auto;
}

/* On larger screens, add a bit more space between image and text */
@media (min-width: 769px) {
    .portrait-img,
    .other-img {
        margin: 1.5rem 0 1.5rem 1.5rem;
    }
}

/* ============================= */
/* 5. Links, buttons, interactions */
/* ============================= */

nav a,
.contact-link,
.contact-button {
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.1s ease;
}

/* Nav: subtle underline on hover */
nav a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* Active nav: slightly emphasized */
nav a.active {
    font-weight: 600;
    border-bottom: 2px solid currentColor;
}

/* Contact cards: softer hover */
.contact-link:hover {
    background-color: #f9fafb;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Buttons: focus-visible for keyboard users */
.contact-button:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* ============================= */
/* 6. Column spacing (non-structural) */
/* ============================= */

.column-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}