/* ============================================================
   Wiring between tokens.css and the 2020 theme, plus the two
   components the theme did not have (highlights, skill tags).

   Load order matters: styles.min.css, then tokens.css, then this file.
   Nothing here needs editing to restyle the site: change tokens.css.
   ============================================================ */

/* ---------- Self-hosted Roboto ----------
   The theme pulls Roboto from fonts.gstatic.com, which sends every visitor's
   IP address to Google. These rules redeclare the same eight faces from /fonts
   and, being later in the cascade with identical family/weight/style/range,
   win over the theme's. The Google URLs stay in styles.min.css but are never
   requested. Italic faces are not redeclared: the theme declares eight of them
   and uses none. Verified: zero requests leave the origin. */

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/roboto-400-ext.woff2") format("woff2");
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/roboto-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/roboto-500-ext.woff2") format("woff2");
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/roboto-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/roboto-700-ext.woff2") format("woff2");
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/roboto-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/fonts/roboto-900-ext.woff2") format("woff2");
    unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: roboto;
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("/fonts/roboto-900-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Theme overrides: every hardcoded value, now tokenised ---------- */

body {
    color: var(--text);
    background: var(--page-bg);
    font-family: var(--font-body);
    font-size: var(--body-size);
    line-height: var(--line-height);
    padding: var(--body-padding);
}

.page {
    max-width: var(--page-max-width);
}

.page main {
    background: var(--sheet-bg);
    padding: var(--main-padding);
    width: var(--main-width);
}

.page main section {
    margin-bottom: var(--section-gap);
    text-align: var(--body-align);
}

/* The theme aligns paragraphs twice: once on the section, and again with a
   bare `p { text-align: justify }`. The second rule targets the element
   itself, so it beats the value inherited from the section and has to be
   overridden separately. */
p {
    text-align: var(--body-align);
}

.page main section .title {
    color: var(--title-color);
    font-size: var(--title-size);
}

/* The circled icon next to each section title. */
.page main section .title .fa {
    background: var(--icon-bg);
}

.page main section .experience .header .job {
    color: var(--heading);
    font-size: var(--job-size);
}

.page main section .experience .header .time,
.page main section .experience .company {
    color: var(--muted);
}

/* The sidebar is split into two <aside> blocks (identity, details) wrapped in
   .sidebar. On desktop the wrapper is the coloured column and the two blocks
   simply stack inside it. On mobile the wrapper dissolves so the two halves
   can sit on opposite sides of the main content: see the media query below. */
.sidebar {
    display: flex;
    flex-direction: column;
    background: var(--accent);
    color: #fff;
    width: var(--aside-width);
    min-width: var(--aside-min-width);
}

.page aside {
    background: transparent;
    width: 100%;
    min-width: 0;
}

/* The theme gives the last section bottom padding. With two blocks that fired
   at the end of the first one too, so it is re-anchored to the real last one. */
.page aside section:last-child {
    padding-bottom: 0;
}

.sidebar aside:last-child section:last-child {
    padding-bottom: var(--aside-padding);
}

.page aside section {
    padding: var(--aside-padding) var(--aside-padding) 0;
}

.page aside section .title {
    font-size: var(--aside-title-size);
}

a {
    color: var(--link-color);
}

/* Sidebar links stay white against the accent background. */
.page aside a {
    color: #fff;
}

/* ---------- Portrait ---------- */

.profile figure img {
    filter: var(--photo-filter);
}

/* ---------- Highlights: the three numbers worth remembering ---------- */

.highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 24px;
    text-align: left;
}

.highlights .highlight {
    border-top: 3px solid var(--accent-bright);
    padding-top: 12px;
}

.highlights .highlight .figure {
    display: block;
    font-size: var(--figure-size);
    font-weight: 700;
    line-height: 1.1;
    color: var(--title-color);
}

.highlights .highlight .caption {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
}

/* ---------- Skills as grouped tags, with no invented percentages ---------- */

.skill-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 24px 32px;
    text-align: left;
}

.skill-group h3 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--heading);
    margin: 0 0 10px;
}

.tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tags li {
    font-size: 13px;
    line-height: 1.5;
    color: var(--tag-text);
    background: var(--tag-bg);
    border: 1px solid var(--tag-border);
    border-radius: var(--tag-radius);
    padding: 3px 9px;
}

/* ---------- Mobile ----------
   The theme collapses the two columns at 770px. Those same rules are
   restated here with tokens, because this file loads last and would
   otherwise win over the theme's media query at every width.
   The 770px literal must match --mobile-breakpoint in tokens.css. */

@media screen and (max-width: 770px) {
    .page main {
        padding: var(--main-padding-mobile);
        width: 100%;
    }

    .page main section {
        margin-bottom: var(--section-gap-mobile);
    }

    /* Content first. display:contents dissolves the wrapper so its two halves
       become direct children of .page and can be ordered around <main>:
       identity, then the CV itself, then the secondary detail. Without this
       a recruiter on a phone scrolled through education and languages before
       reaching the career profile. Each half repaints its own background,
       because the dissolved wrapper no longer paints one. */
    .sidebar {
        display: contents;
    }

    .identity {
        order: 0;
    }

    .page main {
        order: 1;
    }

    .details {
        order: 2;
    }

    /* Qualified with .page on purpose: the desktop rule above is `.page aside`
       (0,1,1) and a bare `.identity` (0,1,0) would lose to it, since a media
       query adds no specificity of its own. */
    .page .identity,
    .page .details {
        background: var(--accent);
        width: 100%;
    }

    /* Restore the bottom padding the desktop rule pinned to the last block. */
    .details section:last-child {
        padding-bottom: var(--aside-padding);
    }

    /* Compact identity header. The theme let the portrait grow to the
       full column width, which on a phone pushed the career profile
       and the experiences well below the fold. Portrait and name now
       sit side by side, costing roughly a sixth of the vertical space. */
    .profile figure {
        display: flex;
        align-items: center;
        gap: 18px;
        text-align: left;
    }

    .profile figure picture {
        flex-shrink: 0;
    }

    .profile figure img {
        width: var(--profile-size-mobile);
        margin-bottom: 0;
    }

    .profile figure figcaption .name {
        font-size: 26px;
        margin-bottom: 4px;
    }
}

/* ---------- Print ----------
   Keep it ink-cheap but still structured. The theme already handles
   the rest of the print layout. */

@media print {
    .tags li {
        background: transparent;
        border-color: #ccc;
        color: var(--heading);
    }

    .highlights .highlight {
        border-top-color: var(--accent-dark);
    }
}

/* ---------- A note on icons ----------
   The theme ships a SUBSET of FontAwesome 4.7: the font files under
   /fonts contain only the eleven glyphs this page already uses
   (map-signs, briefcase, wrench, envelope, phone, globe, twitter,
   linkedin-square, file-pdf-o, archive, gitlab). The stylesheet
   declares more classes than the font can draw, so switching an icon
   to one that is not in that list renders nothing at all.
   To add a new icon, either drop in an inline <svg>, or replace the
   five files in /fonts with the complete FontAwesome 4.7 release. */

/* ---------- Footer ----------
   Two lines with different audiences. The consent line belongs to the CV, so it
   prints. The note about the page itself is only meaningful in a browser, so it
   is dropped from the printed PDF. */

.page main footer {
    padding-top: 16px;
    border-top: 1px solid var(--tag-border);
    text-align: left;
}

.page main footer p {
    margin: 0;
    font-size: var(--footer-size);
    line-height: 1.5;
    color: var(--muted);
    text-align: left;
}

.page main footer .site-note {
    margin-top: 7px;
}

@media print {
    /* The theme leaves the paper size to the renderer, which defaults to US
       Letter: printed on A4 that either scales down or clips. Margins stay at
       zero, as the theme set them, because the inner padding already keeps the
       text off the paper edge and A4 at margin zero gives 297mm of height per
       page instead of 279mm, which is what makes the CV fit in two pages. */
    /* Vertical margins only, and they live in styles.min.css, not here: see
       the note in the README. With margins on all four sides the columns narrow
       by 24mm, the text reflows about 13% taller and the CV runs to three
       pages; with none at all the continuation on page two starts flush against
       the paper edge, inside the strip most printers cannot reach. Top and
       bottom only gives every page its breathing room and leaves the column
       widths, and therefore the pagination, untouched. The horizontal breathing
       room comes from the 30px inner padding. */
    @page {
        size: A4;
    }

    .page main footer .site-note {
        display: none;
    }

    /* Spacing is tightened on paper only. This buys roughly 40mm, which is what
       makes it affordable to forbid splitting an experience at all: the first
       attempt at that, without the tightening, pushed the CV onto a third page. */
    body .page main section {
        margin-bottom: 18px !important;
    }

    .page main section .experience {
        margin-bottom: 18px;
    }

    .page main section p {
        margin: 0 0 6px;
    }

    /* On screen the three figures are laid out with auto-fit, which adapts to
       any width. On A4 the column is 23px narrower than it was on Letter, just
       enough for auto-fit to drop to two columns and push the third figure onto
       a second row. On paper the width is known, so the count is fixed. */
    .highlights {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    /* No entry is sliced across the break any more: a role now sits whole on
       one page or moves to the next. The header rule is kept as a belt-and-
       braces measure for a role too tall to fit on a page by itself. */
    .experience {
        break-inside: avoid;
    }

    /* Same treatment for the sidebar: INTERESTS had its heading at the foot of
       page one and its items at the top of page two. */
    .page aside section {
        break-inside: avoid;
    }


    .experience .header {
        break-after: avoid;
    }

    .page main section p {
        orphans: 2;
        widows: 2;
    }

    /* Backgrounds paint only as tall as their content, so on the last page the
       white sheet and the coloured sidebar stopped partway down and the page
       background showed through underneath. 552mm sits just under the two A4 content
       boxes (2 x 277mm = 554mm once the vertical margins are taken off), forcing both columns to reach the bottom without spilling onto
       a third.
       NOTE: this assumes a two-page CV. If the content grows or shrinks a lot,
       re-measure. ./make-pdfs.sh prints the page count on every run. */
    .page {
        min-height: 552mm;
    }

    /* Protect only the small units. Adding .experience here as well was
       tried and reverted: the blocks are tall enough that refusing to split
       them pushed the CV from two pages to three, which is worse than a
       paragraph break in the middle of a role. */
    .skill-group,
    .highlights .highlight,
    .page main footer {
        break-inside: avoid;
    }
}