/* ---------------------------------------------------------------------------
   The CV.

   This file deliberately shares NOTHING with the rest of the site. No
   tokens.css, no base.css, no neo-brutalist blocks, no dark mode. The page
   mirrors the PDF, and the PDF is the source of truth for layout and type as
   well as for words.

   The reason is not consistency for its own sake. A CV that looks like a
   website reads as a website — the reader stops assessing the candidate and
   starts assessing the page. The hub next door is allowed to be loud because
   its job is to be interesting. This document's job is to disappear.

   Consequence to remember when editing the hub: changing tokens.css cannot
   affect this page, and that is on purpose. If the CV needs a colour, it is
   declared here.
--------------------------------------------------------------------------- */

/* ---- Reset (local, because base.css is not loaded) ---------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --cv-ink: #111111;
  --cv-muted: #444444;
  --cv-rule: #111111;
  --cv-page: #ffffff;
  --cv-shell: #e9e9ea;
}

html {
  /* The area around the sheet. Light grey so the white page reads as paper,
     the way a PDF viewer frames a document. */
  background: var(--cv-shell);
}

body {
  background: var(--cv-shell);
  color: var(--cv-ink);
  font-family: 'Segoe UI', 'Lato', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  padding: 24px 16px 48px;
}

/* ---- Screen-only chrome -------------------------------------------------
   The back link and the print button are not part of the document. Kept plain
   on purpose: a yellow neo-brutalist button here would be the first thing the
   eye lands on, which is exactly the confusion this file exists to avoid. */

.cv-bar {
  max-width: 210mm;
  margin: 0 auto 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.cv-bar-link {
  color: var(--cv-muted);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.cv-bar-link:hover {
  color: var(--cv-ink);
}

.cv-print {
  font: inherit;
  color: var(--cv-ink);
  background: #ffffff;
  border: 1px solid #b9b9bb;
  border-radius: 3px;
  padding: 7px 14px;
  cursor: pointer;
}

.cv-print:hover {
  border-color: var(--cv-ink);
}

/* ---- The sheet ----------------------------------------------------------
   Sized in millimetres so what you see on screen is the page you get out of
   the printer, minus the margins. */

.cv {
  width: 100%;
  max-width: 210mm;
  margin: 0 auto;
  background: var(--cv-page);
  padding: 18mm 16mm;
  box-shadow: 0 1px 4px rgb(0 0 0 / 18%);
}

/* ---- Header -------------------------------------------------------------- */

.cv-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 20px;
  align-items: start;
}

.cv-name {
  grid-column: 1;
  font-size: 33px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.cv-contact {
  grid-column: 1;
  list-style: none;
  margin-top: 7px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cv-ink);
}

/* Phone and email share a line in the PDF; the profile links sit under them.
   The separator is drawn BEFORE an inline item that follows another inline
   item, not after every item — otherwise the last one on the line trails a
   dangling "·" into the line break. */
.cv-contact li {
  display: inline;
}

.cv-contact li:not(.cv-contact-break) + li:not(.cv-contact-break)::before {
  content: ' · ';
}

.cv-contact li.cv-contact-break {
  display: block;
}

.cv-contact a {
  color: inherit;
  text-decoration: none;
}

.cv-contact a:hover {
  text-decoration: underline;
}

/* The headline under the contact block — the one line that says what you are. */
.cv-role {
  grid-column: 1;
  margin: 12px 0 0;
  font-size: 19px;
  font-weight: 700;
}

.cv-portfolio {
  grid-column: 1;
  margin: 5px 0 6px;
  font-size: 14.5px;
}

.cv-portfolio a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.cv-photo {
  grid-column: 2;
  grid-row: 1 / span 4;
  width: 33mm;
  height: 33mm;
  border-radius: 50%;
  object-fit: cover;
  align-self: start;
}

/* ---- Sections -----------------------------------------------------------
   The PDF's section marker: a rule across the page with a filled dot sitting
   on its left end, then the heading below it. Drawn with pseudo-elements
   rather than an image so it prints crisply at any size. */

.cv-section {
  position: relative;
  margin-top: 24px;
}

/* The rule. It is the first thing in the section's box, so its top edge is
   y = 0 for anything positioned against the section. */
.cv-section::before {
  content: '';
  display: block;
  height: 1.5px;
  background: var(--cv-rule);
  margin-bottom: 14px;
}

/* The dot that sits on the left end of that rule. Centred on it, not above it:
   a 9px dot on a 1.5px rule needs (1.5 - 9) / 2 = -3.75px. */
.cv-section::after {
  content: '';
  position: absolute;
  left: 0;
  top: -3.75px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cv-rule);
}

.cv-section-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.cv-section p,
.cv-section li {
  font-size: 14.5px;
  line-height: 1.5;
  text-align: justify;
  hyphens: auto;
}

/* Links in body copy are black and underlined, as in the PDF. The browser
   default blue is the single loudest way a rendered CV announces that it is a
   web page rather than a document. */
.cv-section a {
  color: inherit;
  text-decoration: underline;
}

.cv-section-note {
  color: var(--cv-muted);
  font-size: 13.5px;
  margin-top: 10px;
  text-align: left;
}

/* ---- Entries ------------------------------------------------------------- */

.cv-entry + .cv-entry {
  margin-top: 15px;
}

.cv-entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  margin-bottom: 2px;
}

.cv-entry-title {
  font-size: 15.5px;
  font-weight: 700;
}

.cv-entry-when {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.cv-bullets {
  margin: 4px 0 0 20px;
}

.cv-bullets li {
  margin-bottom: 2px;
}

/* ---- Kompetencer --------------------------------------------------------
   Name on the left, five dots on the right. Rebuilt in CSS rather than
   screenshotted so it stays sharp in print; the rating itself lives in an
   aria-label, because a row of circles means nothing to a screen reader. */

.cv-skills {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 130mm;
}

.cv-skill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}

.cv-dots {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cv-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d0d0d2;
}

.cv-dots i.on {
  background: var(--cv-ink);
}

/* ---- Projects (links, which a PDF cannot have) --------------------------- */

.cv-project-list {
  list-style: none;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cv-project-list li {
  text-align: left;
}

.cv-project-list a {
  color: inherit;
}

.cv-tech {
  display: block;
  font-size: 12.5px;
  color: var(--cv-muted);
}

/* ---- Referencer ---------------------------------------------------------- */

.cv-refs {
  list-style: none;
}

.cv-refs li,
.cv-refs-note {
  text-align: left;
  font-size: 14.5px;
}

.cv-refs-note {
  color: var(--cv-ink);
}

/* ---- Foot ---------------------------------------------------------------- */

.cv-foot {
  display: none; /* the sheet ends where the content ends, as in the PDF */
}

/* ---- Narrow screens ------------------------------------------------------
   The sheet stops pretending to be A4 and becomes a normal mobile page.
   Justified text at phone width produces rivers of whitespace, so it goes. */

@media (max-width: 620px) {
  body {
    padding: 14px 10px 32px;
  }

  .cv {
    padding: 20px 16px;
  }

  .cv-name {
    font-size: 26px;
  }

  .cv-role {
    font-size: 17px;
  }

  .cv-head {
    grid-template-columns: 1fr;
  }

  .cv-photo {
    grid-column: 1;
    grid-row: auto;
    order: -1;
    width: 28mm;
    height: 28mm;
    margin-bottom: 10px;
  }

  .cv-section p,
  .cv-section li {
    text-align: left;
    hyphens: manual;
  }
}

/* ---- Print ---------------------------------------------------------------
   This IS the PDF. Ctrl+P → Save as PDF. There is no second document. */

@page {
  size: A4;
  margin: 14mm 15mm;
}

@media print {
  html,
  body {
    background: #ffffff;
    padding: 0;
  }

  /* Controls are not part of the document. */
  .cv-bar {
    display: none;
  }

  /* On paper the sheet IS the page, so its frame goes. */
  .cv {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }

  body {
    font-size: 10.5pt;
  }

  .cv-name {
    font-size: 25pt;
  }

  .cv-role {
    font-size: 13pt;
  }

  .cv-contact {
    font-size: 9.5pt;
  }

  .cv-section-title {
    font-size: 12pt;
  }

  .cv-section p,
  .cv-section li,
  .cv-skill {
    font-size: 10pt;
  }

  .cv-entry-title,
  .cv-entry-when {
    font-size: 10.5pt;
  }

  /* A heading stranded at the foot of a page, or one bullet carried onto the
     next, is the usual way an exported CV looks careless. */
  .cv-entry {
    break-inside: avoid;
  }

  .cv-section-title {
    break-after: avoid;
  }

  /* The dots are drawn with BORDERS on paper, not background colour.
     "Print background graphics" is off by default in every browser's print
     dialog, so a background-filled dot exports as an empty circle — which
     would silently turn every rating into 0 out of 5. A thick border fills the
     same circle and always prints.

     print-color-adjust is belt and braces for the browsers that honour it. */
  .cv-dots i {
    width: 9px;
    height: 9px;
    background: none;
    border: 1px solid #111111;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .cv-dots i.on {
    /* Half the box on every side, so the border meets in the middle. */
    border-width: 4.5px;
  }

  /* Paper has no click. The project links are the one thing here a PDF cannot
     carry, so print where they go — but only those, or every mailto: drags a
     URL behind it. */
  .cv-project-list a::after {
    content: ' (' attr(href) ')';
    font-size: 8.5pt;
    color: #444444;
  }
}