/* Printable CV (/cv.html). Standalone page — only /styles/global.css (design tokens) is loaded before this,
   not main.css. Two-column "sheet" laid out like an A4 page, with a screen-only toolbar that disappears in
   print. Colours come from the shared --color-* tokens. Property order: layout → box model → background →
   border → typography → effects → interaction. */

body {
    margin: 0;
    padding: 0 0 3rem;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

/* ========== screen-only toolbar ========== */

.cv-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    max-width: 820px;
    margin: 0 auto;
    padding: 1rem;
}

.cv-tool {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    min-width: 155px;
    min-height: var(--pill-height);
    padding: 0 16px;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: var(--font-size-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Back link: soft outline pill (secondary action). */
.cv-tool-back {
    background-color: white;
    border: 1px solid var(--color-primary);
    color: var(--color-primary-dark);
}

.cv-tool-back:hover {
    background-color: var(--color-primary-soft);
}

/* Download: filled primary pill (the main action on this page). */
.cv-tool-print {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: white;
}

.cv-tool-print:hover {
    background-color: var(--color-primary-dark);
}

/* IT/EN toggle — same two-pill recipe as the /about lang toggle. */
.cv-lang {
    display: flex;
    gap: 0.4rem;
}

.cv-lang-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    min-width: 46px;
    min-height: var(--pill-height);
    padding: 0 10px;
    background-color: white;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    text-align: center;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.cv-lang-btn:hover {
    background-color: var(--color-primary-soft);
}

.cv-lang-btn.is-active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Bottom bar (screen only): the "back to About" pill, left-aligned with the sheet edge. The 1rem top margin
   mirrors the toolbar's 1rem bottom padding, so the gap below the sheet matches the gap above it. */
.cv-bottom-bar {
    display: flex;
    justify-content: flex-start;
    max-width: 820px;
    margin: 1rem auto 0;
    padding: 0 1rem;
}

/* ========== the sheet ========== */

/* On screen the sheet mimics a sheet of paper centred on the page background; in print it fills the @page. */
.cv-sheet {
    max-width: 820px;
    margin: 0 auto;
    padding: 2.4rem 2.6rem;
    background-color: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
}

/* header — photo (top-left) + identity block side by side */
.cv-header {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-primary-soft);
}

/* Photo sits at the left of the header, beside the name / role / contacts identity block. */
.cv-photo {
    flex-shrink: 0;
    width: 104px;
    height: 104px;
    object-fit: cover;
    border: 3px solid var(--color-primary-soft);
    border-radius: var(--radius-circle);
    box-shadow: 0 2px 8px rgba(30, 136, 229, 0.15);
}

.cv-id {
    flex: 1;
    min-width: 0;
}

.cv-name {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: 2.1rem;
    line-height: 1.1;
}

.cv-role {
    margin: 0.25rem 0 0.7rem;
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

/* Role main + sub read as one line joined by " · " on desktop; the mobile block drops the sub onto its own
   line and removes this separator. */
.cv-role-sub::before {
    content: ' · ';
}

.cv-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
}

/* Each contact is a soft outlined pill in the blue palette (no leading dot/icon — keeps the page
   dependency-free). */
.cv-contacts a {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    background-color: var(--color-primary-softer);
    border: 1px solid var(--color-primary-soft);
    border-radius: var(--radius-pill);
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.cv-contacts a:hover {
    background-color: var(--color-primary-soft);
}

/* two-column body */
/* Full-width Profile sits between the header and the two-column body. */
.cv-profile {
    margin-top: 1.3rem;
}

.cv-body {
    display: grid;
    grid-template-columns: 1fr 0.55fr;
    gap: 2rem;
    margin-top: 0;
}

.cv-section {
    margin-bottom: 1.4rem;
}

.cv-section:last-child {
    margin-bottom: 0;
}

.cv-section-title {
    margin: 0 0 0.7rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-primary-dark);
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cv-blurb {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    text-align: justify;
}

/* experience / projects items */
.cv-item {
    margin-bottom: 0.9rem;
}

.cv-item:last-child {
    margin-bottom: 0;
}

.cv-item-date {
    display: block;
    margin-bottom: 1px;
    color: var(--color-text-soft);
    font-size: var(--font-size-xxs);
}

.cv-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
}

/* Job role: black, bold, 15.2px (= --font-size-sm). */
.cv-item-role {
    color: var(--color-text-strong);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

/* Company sits right after the role, same 15.2px, in primary-dark, joined by a " · " separator. */
.cv-item-company {
    color: var(--color-primary-dark);
    font-size: var(--font-size-sm);
}

/* Space the separator with margins (a leading/trailing space in content gets trimmed at the flex-item edge,
   which left the dot glued to the role). */
.cv-item-company::before {
    content: '·';
    margin: 0 0.4em;
    color: var(--color-text-soft);
    font-weight: normal;
}

/* Project title: bold sub-heading at the same 15.2px (it heads a paragraph of description). */
.cv-proj-title {
    color: var(--color-text-strong);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

/* Project company/date — pushed to the right edge of the row (right-justified). */
.cv-item-meta {
    margin-left: auto;
    color: var(--color-text-soft);
    font-size: var(--font-size-xxs);
}

.cv-item-desc {
    margin: 0.25rem 0 0;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    text-align: justify;
}

/* aside: skills */
.cv-skills {
    margin: 0;
}

.cv-skills dt {
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.cv-skills dt.is-extra {
    color: var(--color-primary);
    font-weight: normal;
    font-style: italic;
}

.cv-skills dd {
    margin: 0 0 0.6rem;
    color: var(--color-text);
    font-size: var(--font-size-xs);
}

.cv-skills dd.is-extra {
    color: var(--color-text-soft);
    font-style: italic;
}

/* aside: education */
.cv-edu {
    margin-bottom: 0.7rem;
}

.cv-edu-title {
    display: block;
    color: var(--color-text-strong);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.cv-edu-detail {
    display: block;
    color: var(--color-text-soft);
    font-size: var(--font-size-xxs);
}

/* aside: details (languages / mobility / location) */
.cv-details {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cv-details li {
    margin-bottom: 0.35rem;
    color: var(--color-text);
    font-size: var(--font-size-xs);
}

.cv-details li:last-child {
    margin-bottom: 0;
}

.cv-footer {
    margin: 1.6rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-soft);
    font-size: var(--font-size-xxs);
    text-align: center;
}

/* ========== mobile (screen) ========== */
/* `screen and` is load-bearing: a bare `(max-width: 600px)` matches print too, and iOS Safari renders
   the PDF at the phone's narrow viewport width — so the print output would pick up this stacked mobile
   layout instead of the A4 two-column one. Scoping to screen keeps the saved PDF identical to desktop. */
@media screen and (max-width: 600px) {
    .cv-sheet {
        padding: 1.4rem 1.2rem;
        border-radius: 0;
    }

    /* Header stacks into a centered column: photo on top, then name, role, role-sub, and the contact pills
       below — instead of the desktop photo-beside-identity row. */
    .cv-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Drop "Java & Spring Reactive" onto its own line under the role (and drop the " · " separator) so the
       role no longer wraps mid-phrase on the narrow centered column. */
    .cv-role-sub {
        display: block;
    }

    .cv-role-sub::before {
        content: none;
    }

    /* Contacts centered. The email label is long, so it takes its own full-width row (flex-basis: 100%);
       LinkedIn / GitLab / javapills.com then sit inline on the row below. */
    .cv-contacts {
        justify-content: center;
    }

    .cv-contacts li:first-child {
        flex-basis: 100%;
        text-align: center;
    }

    /* Experience: the date already sits on its own line; drop the company below the role (and drop the " · "
       separator) so each entry reads date / role / company stacked instead of wrapping mid-line. The head is a
       flex row, so flex-basis: 100% (not display: block) is what forces the company onto its own line. */
    .cv-item-company {
        flex-basis: 100%;
    }

    .cv-item-company::before {
        content: none;
    }

    .cv-body {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
}

/* ========== print ========== */
@media print {
    /* A4 with comfortable margins; the sheet itself drops its on-screen paper styling. */
    @page {
        size: A4;
        margin: 14mm;
    }

    /* global.css shrinks the root font to 90% under (max-width: 600px) with no `screen` guard, so a phone
       print would scale all the rem-based type down 10%. Pin it back to 100% so the PDF matches desktop.
       `-webkit-text-size-adjust: 100%` is the fix for "Safari needs 90%": iOS lays the page out at the narrow
       device-width viewport even when printing, then auto-inflates the text (its column-fitting heuristic),
       which pushes the two-column content past the page edge so the print preview overflows the sheet. Pinning
       text-size-adjust to 100% disables that boost, so the content fits the A4 width at the default 100% scale. */
    html {
        font-size: 100%;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        width: 100%;
        padding: 0;
        background-color: white;
    }

    /* iOS keeps the narrow device-width viewport during print, so the `@media screen and (max-width: 600px)`
       block above can still be in force while the page is printed/saved (Safari). Force the full desktop
       layout back here so the printed PDF is always the two-column A4 sheet, never the stacked phone layout —
       `@media print` wins because it comes later in the cascade at equal specificity. (On phones the download
       button serves the pre-generated /cv/*.pdf instead, but this keeps the live print path correct too.) */
    .cv-header {
        flex-direction: row;
        align-items: center;
        text-align: left;
    }

    .cv-role-sub {
        display: inline;
    }

    .cv-role-sub::before {
        content: ' · ';
    }

    .cv-contacts {
        justify-content: flex-start;
    }

    .cv-contacts li:first-child {
        flex-basis: auto;
        text-align: left;
    }

    .cv-item-company {
        flex-basis: auto;
    }

    .cv-item-company::before {
        content: '·';
    }

    .cv-body {
        grid-template-columns: 1fr 0.55fr;
        gap: 2rem;
    }

    .cv-toolbar,
    .cv-bottom-bar {
        display: none;
    }

    .cv-sheet {
        max-width: none;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* Keep the blue accents in the printed/saved PDF instead of letting the browser strip backgrounds. */
    .cv-name,
    .cv-role,
    .cv-section-title,
    .cv-item-role,
    .cv-item-company,
    .cv-skills dt,
    .cv-edu-title,
    .cv-contacts a {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Avoid splitting an experience / project / education entry across a page break. */
    .cv-item,
    .cv-edu,
    .cv-section-title {
        break-inside: avoid;
    }

    /* Keep Education + Details together: when they don't both fit on page 1, the whole group moves to the next
       page rather than leaving the "Informazioni" heading orphaned at the bottom of page 1. */
    .cv-aside-tail {
        break-inside: avoid;
    }
}