/* RGAB CV Builder: the six CV designs and their print styles (page /resume-builder/, drawn by assets/js/cv-templates.js).

   The CV sheet is an A4 page (210 mm wide). It is drawn at full size and the page scales it down to fit the screen; when the visitor presses
   "Download PDF" the browser's print dialog prints the sheet alone (see the print block at the end of this file and the .cv-np class on the page).

   Designs
     ATS-friendly   classic, modernline, compact   one column, plain headings, no graphics, no tables
     Designer       sidebar, executive, creative   people read them nicely; some applicant-tracking systems read them badly

   Colours: the RGAB palette only. The accent (--cv-accent) is chosen by the visitor from navy, charcoal, gold, bronze or midnight; --cv-ink is the
   shade of the accent that is dark enough for text on white, --cv-on is the text colour that reads on the accent. Fonts: the two the site already
   loads (Playfair Display and Manrope) with system fallbacks; nothing is fetched from anywhere else. No inline style: the page sets the custom
   properties through the CSS object model. */

.cv-sheet {
  --cv-fz: 1;
  --cv-sp: 1;
  --cv-accent: #1B2A4A;
  --cv-ink: #1B2A4A;
  --cv-on: #FFFFFF;
  --cv-text: #1B2A4A;
  --cv-muted: #545454;
  --cv-rule: rgba(27, 42, 74, 0.2);
  --cv-tint: #F7F5F0;
  --cv-gold: #D7B85D;
  --cv-body: 'Manrope', 'Segoe UI', Arial, sans-serif;
  --cv-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  position: relative;
  box-sizing: border-box;
  width: 210mm;
  min-height: 297mm;
  padding: 12mm;
  background: #FFFFFF;
  color: var(--cv-text);
  font-family: var(--cv-body);
  font-size: calc(10pt * var(--cv-fz));
  line-height: 1.45;
  text-align: left;
  overflow-wrap: anywhere;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.cv-sheet *, .cv-sheet *::before, .cv-sheet *::after { box-sizing: border-box; }
.cv-sheet p, .cv-sheet ul { margin: 0; padding: 0; }
.cv-sheet section { padding: 0; }
.cv-sheet ul { list-style: none; }
.cv-fs-s { --cv-fz: 0.9; }
.cv-fs-l { --cv-fz: 1.1; }
.cv-sp-tight { --cv-sp: 0.7; }
.cv-sp-airy { --cv-sp: 1.35; }

.cv-name { font-weight: 800; line-height: 1.1; color: var(--cv-text); }
.cv-headline { color: var(--cv-muted); font-weight: 600; margin-top: 2pt; }
.cv-contact li { color: var(--cv-muted); }
.cv-sec { margin-top: calc(var(--cv-sp) * 12pt); }
.cv-h { font-weight: 800; color: var(--cv-ink); margin-bottom: calc(var(--cv-sp) * 5pt); }
.cv-item { margin-top: calc(var(--cv-sp) * 7pt); }
.cv-item:first-of-type { margin-top: 0; }
.cv-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10pt; }
.cv-item-main { min-width: 0; }
.cv-item-title { display: block; font-weight: 700; color: var(--cv-text); }
.cv-item-sub { display: block; color: var(--cv-muted); }
.cv-item-dates { flex: 0 0 auto; color: var(--cv-muted); font-size: 0.92em; white-space: nowrap; }
.cv-bullets { margin-top: calc(var(--cv-sp) * 2pt); }
/* real list markers, and no positioned text anywhere: a browser paints positioned boxes after the others, which would put their words out of
   reading order in the PDF text (what an applicant-tracking system reads). */
.cv-sheet ul.cv-bullets { list-style: disc; padding-left: 15pt; }
.cv-bullets li { margin-top: calc(var(--cv-sp) * 1.5pt); padding-left: 1pt; }
.cv-bullets li::marker { color: var(--cv-ink); }
.cv-summary { color: var(--cv-text); }
.cv-plain li { margin-top: calc(var(--cv-sp) * 1.5pt); }
.cv-dots { display: none; }
.cv-lang-level { color: var(--cv-muted); }
.cv-empty { margin-top: 20mm; text-align: center; color: var(--cv-muted); font-style: italic; }

/* ------------------------------------------------------------------ classic (ATS-friendly) */
.cv-t-classic .cv-head { text-align: center; padding-bottom: 8pt; border-bottom: 1.5pt solid var(--cv-ink); }
.cv-t-classic .cv-name { font-family: var(--cv-head); font-size: 2.2em; font-weight: 700; }
.cv-t-classic .cv-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.8em; margin-top: 5pt; }
.cv-t-classic .cv-contact li + li::before { content: '\00b7'; margin-right: 0.8em; }
.cv-t-classic .cv-h { font-size: 0.95em; text-transform: uppercase; border-bottom: 0.75pt solid var(--cv-rule); padding-bottom: 2pt; }
.cv-t-classic .cv-skills, .cv-t-classic .cv-langs { display: flex; flex-wrap: wrap; gap: 0 0.9em; }
.cv-t-classic .cv-skills li + li::before { content: '\00b7'; margin-right: 0.9em; }
.cv-t-classic .cv-langs li + li::before { content: '\00b7'; margin-right: 0.9em; }
.cv-t-classic .cv-lang-level::before { content: ' \2013 '; }

/* ------------------------------------------------------------------ modern line (ATS-friendly) */
.cv-t-modernline .cv-head { padding-left: 10pt; border-left: 4pt solid var(--cv-accent); }
.cv-t-modernline .cv-name { font-size: 2.4em; }
.cv-t-modernline .cv-headline { color: var(--cv-ink); font-size: 1.1em; }
.cv-t-modernline .cv-contact { display: flex; flex-wrap: wrap; gap: 0 1.1em; margin-top: 4pt; }
.cv-t-modernline .cv-h { font-size: 1.05em; text-transform: uppercase; margin-bottom: calc(var(--cv-sp) * 7pt); }
.cv-t-modernline .cv-h::after { content: ''; display: block; width: 26pt; height: 2.5pt; margin-top: 3pt; background: var(--cv-accent); }
.cv-t-modernline .cv-item-title { font-size: 1.04em; }
.cv-t-modernline .cv-skills, .cv-t-modernline .cv-langs { display: flex; flex-wrap: wrap; gap: 3pt 0.9em; }
.cv-t-modernline .cv-skills li { padding-right: 0.9em; border-right: 0.75pt solid var(--cv-rule); }
.cv-t-modernline .cv-skills li:last-child { border-right: 0; }
.cv-t-modernline .cv-lang-level::before { content: ' \2013 '; }

/* ------------------------------------------------------------------ compact (ATS-friendly) */
.cv-t-compact { font-size: calc(9pt * var(--cv-fz)); line-height: 1.35; padding: 10mm 12mm; }
.cv-t-compact .cv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 3pt 14pt; padding-bottom: 5pt; border-bottom: 1pt solid var(--cv-ink); }
.cv-t-compact .cv-name { font-size: 2em; }
.cv-t-compact .cv-headline { margin-top: 0; }
.cv-t-compact .cv-contact { text-align: right; }
.cv-t-compact .cv-sec { margin-top: calc(var(--cv-sp) * 8pt); }
.cv-t-compact .cv-h { font-size: 0.92em; text-transform: uppercase; margin-bottom: calc(var(--cv-sp) * 3pt); }
.cv-t-compact .cv-item { margin-top: calc(var(--cv-sp) * 4pt); }
.cv-t-compact .cv-item-main { display: flex; flex-wrap: wrap; gap: 0 6pt; align-items: baseline; }
.cv-t-compact .cv-item-title, .cv-t-compact .cv-item-sub { display: inline; }
.cv-t-compact .cv-item-sub::before { content: '\2013\00a0'; }
.cv-t-compact .cv-bullets li { margin-top: 0.5pt; }
.cv-t-compact .cv-skills, .cv-t-compact .cv-langs { display: flex; flex-wrap: wrap; gap: 0 0.8em; }
.cv-t-compact .cv-skills li + li::before, .cv-t-compact .cv-langs li + li::before { content: '\00b7'; margin-right: 0.8em; }
.cv-t-compact .cv-lang-level::before { content: ' \2013 '; }

/* ------------------------------------------------------------------ sidebar (designer) */
.cv-t-sidebar { padding: 0; }
.cv-t-sidebar .cv-body {
  display: grid;
  grid-template-columns: 62mm minmax(0, 1fr);
  grid-template-areas: 'side main';
  min-height: 297mm;
  background: linear-gradient(to right, var(--cv-accent) 0, var(--cv-accent) 62mm, #FFFFFF 62mm);
}
.cv-t-sidebar .cv-main { grid-area: main; padding: 14mm 12mm 12mm 10mm; }
.cv-t-sidebar .cv-side { grid-area: side; padding: 14mm 7mm 12mm 8mm; color: var(--cv-on); }
.cv-t-sidebar .cv-name { font-family: var(--cv-head); font-size: 2.3em; font-weight: 700; }
.cv-t-sidebar .cv-headline { color: var(--cv-ink); font-size: 1.1em; }
.cv-t-sidebar .cv-main .cv-h { font-size: 1.05em; text-transform: uppercase; border-bottom: 1.5pt solid var(--cv-accent); padding-bottom: 2pt; }
.cv-t-sidebar .cv-side .cv-sec:first-child { margin-top: 0; }
.cv-t-sidebar .cv-side .cv-h { color: var(--cv-on); font-size: 0.95em; text-transform: uppercase; border-bottom: 0.75pt solid var(--cv-on); padding-bottom: 2pt; }
.cv-t-sidebar .cv-side li, .cv-t-sidebar .cv-side .cv-lang-level, .cv-t-sidebar .cv-contact li { color: var(--cv-on); }
.cv-t-sidebar .cv-side li { margin-top: calc(var(--cv-sp) * 2.5pt); }
.cv-t-sidebar .cv-lang-name, .cv-t-sidebar .cv-lang-level { display: block; }
.cv-t-sidebar .cv-lang-level { font-size: 0.9em; opacity: 0.92; }

/* ------------------------------------------------------------------ executive (designer) */
.cv-t-executive { padding: 0 0 12mm; }
.cv-t-executive .cv-band { padding: 14mm 14mm 9mm; background: var(--cv-accent); color: var(--cv-on); border-bottom: 3pt solid var(--cv-gold); }
.cv-t-executive[data-accent="gold"] .cv-band { border-bottom-color: #1B2A4A; }
.cv-t-executive .cv-name { font-family: var(--cv-head); font-size: 2.6em; font-weight: 600; color: var(--cv-on); }
.cv-t-executive .cv-headline { color: var(--cv-on); opacity: 0.92; font-size: 1.12em; text-transform: uppercase; }
.cv-t-executive .cv-contact { display: flex; flex-wrap: wrap; gap: 0 1.2em; margin-top: 7pt; }
.cv-t-executive .cv-contact li { color: var(--cv-on); }
.cv-t-executive .cv-main { padding: 2mm 14mm 0; }
.cv-t-executive .cv-h { font-size: 1.1em; text-transform: uppercase; padding-left: 9pt; border-left: 3.5pt solid var(--cv-accent); }
.cv-t-executive .cv-sec-summary .cv-summary { font-family: var(--cv-head); font-style: italic; font-size: 1.08em; padding-left: 9pt; border-left: 1.5pt solid var(--cv-gold); }
.cv-t-executive .cv-sec-experience .cv-item { padding-left: 14pt; border-left: 1.5pt solid var(--cv-rule); margin-left: 2pt; }
.cv-t-executive .cv-sec-experience .cv-item::before { content: ''; float: left; width: 7.5pt; height: 7.5pt; margin: 0.35em 0 0 -22.5pt; border-radius: 50%; background: var(--cv-accent); border: 1.5pt solid #FFFFFF; }
.cv-t-executive .cv-skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3pt 10pt; }
.cv-t-executive .cv-skills li { padding: 2pt 7pt; border: 0.75pt solid var(--cv-rule); border-radius: 3pt; }
.cv-t-executive .cv-langs { display: flex; flex-wrap: wrap; gap: 0 1.4em; }
.cv-t-executive .cv-lang-level::before { content: ' \2013 '; }

/* ------------------------------------------------------------------ creative (designer, optional photo) */
.cv-t-creative { padding: 0; }
.cv-t-creative .cv-top { display: flex; align-items: center; gap: 14pt; padding: 12mm 12mm 8mm; background: var(--cv-tint); border-bottom: 3pt solid var(--cv-accent); }
.cv-t-creative .cv-photo { flex: 0 0 auto; width: 26mm; height: 26mm; border-radius: 50%; overflow: hidden; border: 2.5pt solid var(--cv-accent); background: var(--cv-accent); }
.cv-t-creative .cv-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cv-t-creative .cv-photo-mono { display: flex; align-items: center; justify-content: center; color: var(--cv-on); font-family: var(--cv-head); font-size: 2em; font-weight: 700; }
.cv-t-creative .cv-id { min-width: 0; }
.cv-t-creative .cv-name { font-family: var(--cv-head); font-size: 2.5em; font-weight: 700; }
.cv-t-creative .cv-headline { color: var(--cv-ink); font-size: 1.1em; }
.cv-t-creative .cv-contact { display: flex; flex-wrap: wrap; gap: 3pt 5pt; margin-top: 6pt; }
.cv-t-creative .cv-contact li { padding: 1pt 8pt; border: 0.75pt solid var(--cv-accent); border-radius: 99pt; background: #FFFFFF; }
.cv-t-creative .cv-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58mm;
  min-height: 250mm;
  background: linear-gradient(to left, var(--cv-tint) 0, var(--cv-tint) 58mm, #FFFFFF 58mm);
}
.cv-t-creative .cv-main { padding: 8mm 10mm 12mm 12mm; }
.cv-t-creative .cv-side { padding: 8mm 8mm 12mm 7mm; }
.cv-t-creative .cv-h { font-size: 1.08em; text-transform: uppercase; display: flex; align-items: center; gap: 6pt; }
.cv-t-creative .cv-h::before { content: ''; flex: 0 0 auto; width: 7pt; height: 7pt; border-radius: 50%; background: var(--cv-accent); }
.cv-t-creative .cv-item { padding-left: 8pt; border-left: 2pt solid var(--cv-accent); }
.cv-t-creative .cv-side .cv-sec:first-child { margin-top: 0; }
.cv-t-creative .cv-skills { display: flex; flex-wrap: wrap; gap: 4pt; }
.cv-t-creative .cv-skills li { padding: 1.5pt 8pt; border: 0.75pt solid var(--cv-accent); border-radius: 99pt; background: #FFFFFF; }
.cv-t-creative .cv-langs li { margin-top: calc(var(--cv-sp) * 4pt); }
.cv-t-creative .cv-lang-name { font-weight: 700; }
.cv-t-creative .cv-lang-level { display: block; font-size: 0.9em; }
.cv-t-creative .cv-dots { display: flex; gap: 3pt; margin-top: 2pt; }
.cv-t-creative .cv-dots i { width: 7pt; height: 7pt; border-radius: 50%; border: 0.75pt solid var(--cv-accent); background: #FFFFFF; }
.cv-t-creative .cv-dots i.on { background: var(--cv-accent); }

/* ------------------------------------------------------------------ the RGAB watermark and footer line (every design, every page, drawn by render() in cv-templates.js and never by an option)
   The mark is the official logo (assets/img/rgab-cv-watermark.png, made from rgab-logo-full.png by scripts/make-cv-watermark.py) turned 30 degrees and centred on the
   content area of a page (186 x 273 mm), laid over the CV at 7 percent. On screen the tile repeats down the sheet, one per page; in print it is a fixed layer, which a
   browser repeats on every printed page. It is an image, so it adds no text to the PDF; it is above the text but so faint (a 7 percent tint, never darker than a light
   grey on white) that it does not reduce contrast (see scripts/check-cv-builder-site.js). */
.cv-wm {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0.07;
  background-image: url('../img/rgab-cv-watermark.png');
  background-repeat: repeat-y;
  background-size: 186mm 273mm;
  background-position: 12mm 12mm;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* the footer line: on screen it sits on the white bottom margin of the sheet */
.cv-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  margin: 0;
  padding: 1.6mm 12mm 0;
  height: 7mm;
  background: #FFFFFF;
  color: #545454;
  font-size: 7.5pt;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
}
.cv-gallery .cv-foot { display: none; }

/* ------------------------------------------------------------------ screen only: a thin line where the printed page breaks (A4 with 12 mm margins: 273 mm of content per page) */
@media screen {
  .cv-sheet::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(to bottom, transparent calc(100% - 1px), rgba(129, 110, 56, 0.55) calc(100% - 1px));
    background-size: 100% 273mm;
    background-position: 0 12mm;
    background-repeat: repeat-y;
  }
}

/* ------------------------------------------------------------------ print: A4, real text, nothing else on the page.
   The page hides everything that is not the CV (the .cv-np class and every site element outside <main>); each design then gets its own rules
   below. Backgrounds are printed on purpose (print-color-adjust) because the designer designs use them. */
/* The footer line of every page is page-margin text where the browser prints it (Chrome, Edge and other Chromium browsers; the page script sets class cv-mb on <html>
   for them); every other browser prints the .cv-foot line once, at the end of the CV. The words are the same as FOOTER_LINE in cv-templates.js. */
@page {
  size: A4;
  margin: 12mm;
  @bottom-center {
    content: 'Created with the Residency and Global Advisory Bureau CV Builder - rgabureau.com';
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 7.5pt;
    color: #545454;
  }
}

@media print {
  .cv-sheet {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: 0;
    transform: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cv-sheet::after { display: none; }
  /* the watermark is a fixed layer over the content area of every printed page */
  .cv-wm {
    position: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cv-foot { position: static; height: auto; margin: 3mm 0 0; padding: 0; background: transparent; break-before: avoid; page-break-before: avoid; }
  html.cv-mb .cv-foot { display: none; }
  html:not(.cv-mb) .cv-t-sidebar .cv-body { min-height: 262mm; }
  html:not(.cv-mb) .cv-t-creative .cv-body { min-height: 218mm; }
  .cv-sheet *, .cv-sheet *::before, .cv-sheet *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cv-item, .cv-sec-summary { break-inside: avoid; page-break-inside: avoid; }
  .cv-h { break-after: avoid; page-break-after: avoid; }
  .cv-name, .cv-head, .cv-band, .cv-top { break-after: avoid; page-break-after: avoid; }
  .cv-bullets li { break-inside: avoid; page-break-inside: avoid; }

  /* classic, modern line and compact: plain, one column, black on white where it matters for scanners */
  .cv-t-classic, .cv-t-modernline, .cv-t-compact { background: #FFFFFF; }
  .cv-t-compact { padding: 0; }

  /* sidebar: the coloured panel is a background of the whole body, so it repeats on every printed page */
  .cv-t-sidebar .cv-body { min-height: 273mm; }
  .cv-t-sidebar .cv-main { padding: 2mm 0 0 8mm; }
  .cv-t-sidebar .cv-side { padding: 4mm 6mm 4mm 6mm; }

  /* executive: the band sits at the top of the first page */
  .cv-t-executive { padding: 0; }
  .cv-t-executive .cv-band { padding: 9mm 10mm 6mm; }
  .cv-t-executive .cv-main { padding: 0 2mm; }

  /* creative: header block, then the main column and the tinted side panel */
  .cv-t-creative .cv-top { padding: 8mm 10mm 6mm; }
  .cv-t-creative .cv-body { min-height: 230mm; }
  .cv-t-creative .cv-main { padding: 4mm 8mm 0 6mm; }
  .cv-t-creative .cv-side { padding: 4mm 6mm 0 6mm; }
}
.cv-lang-level::before { white-space: pre; }