/*----------------------
  Resume Stylesheet (resume.css)
  A4 format resume layout
-----------------------*/

/* Import Nunito Sans from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&display=swap');

/* Reset and base styles */
* {
  box-sizing: border-box;
}

body.resume-body {
  margin: 0;
  padding: 20px;
  background: #f5f5f5;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 9pt;
  line-height: 1.4;
  color: #000;
}

/* A4 page container */
.resume-container {
  max-width: 210mm;
  margin: 0 auto;
}

.resume-page {
  width: 210mm;
  height: 297mm;
  background: white;
  box-shadow: 0 0 20px rgba(0,0,0,0.15);
  display: flex;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}


/* Two-column layout */
.resume-sidebar {
  width: 32%;
  background: #fafafa;
  padding: 14mm 8mm 24mm 10mm;
  position: relative;
}

.resume-main {
  width: 68%;
  padding: 14mm 15mm 24mm 12mm;
}

/* Name styling */
.resume-name {
  font-size: 26pt;
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 5px 0;
  color: #000;
}

.resume-name-first {
  display: block;
}

.resume-name-last {
  display: block;
}

/* Hidden clone of the candidate's name as a SINGLE-LINE text run, placed
   at the top-left of the page (visual y=0) so ATS parsers — which extract
   text in visual top-to-bottom order — see "Erik Ziegenbalg" as a clean
   First-Last pair BEFORE the visually-stacked name renders. Otherwise
   parsers see "Erik" alone followed by "Ziegenbalg" alone on separate
   lines, fail to reconnect them as one name, and fall through to extract
   names from the references section (Workday's known failure mode).
   Rendered at 0.5pt in white so it's in the PDF text stream but invisible
   on the printed page. */
.resume-name-ats {
  position: absolute;
  top: 1pt;
  left: 1pt;
  font-size: 0.5pt;
  color: #ffffff;
  margin: 0;
  padding: 0;
  line-height: 0.5pt;
  white-space: nowrap;
  z-index: -1;
}

.resume-subtitle {
  font-size: 9pt;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #666;
  margin: 8px 0 30px 0;
  font-weight: 400;
}

/* Section headers */
.resume-section-header {
  font-size: 10pt;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 20px 0 8px 0;
  padding-bottom: 5px;
  position: relative;
}

.resume-section-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: #d4a574;
}

.resume-main .resume-section-header::after {
  width: 40px;
}

/* Contact section */
.contact-item {
  display: flex;
  align-items: flex-start;
  margin: 8px 0;
  font-size: 8pt;
  color: #333;
}

.contact-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  flex-shrink: 0;
  opacity: 0.6;
}

.contact-text {
  word-break: break-word;
}

.contact-text a {
  color: #333;
  text-decoration: none;
}

/* Education section */
.education-degree {
  font-size: 9pt;
  font-weight: 700;
  margin: 0;
  color: #000;
}

.education-school {
  font-size: 8pt;
  color: #333;
  margin: 2px 0;
}

.education-year {
  font-size: 8pt;
  color: #666;
}

/* Skills section */
.skills-category {
  font-size: 8pt;
  font-weight: 700;
  color: #626363;
  margin: 12px 0 4px 0;
}

.skills-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.skills-list li {
  font-size: 7.5pt;
  color: #626363;
  margin: 2px 0;
  padding-left: 8px;
  position: relative;
}

.skills-list li::before {
  content: '-';
  position: absolute;
  left: 0;
}

/* Profile section */
.profile-text {
  font-size: 9pt;
  line-height: 1.5;
  color: #333;
  text-align: justify;
}

/* Work experience */
.job-title {
  font-size: 9pt;
  font-weight: 800;
  margin: 15px 0 0 0;
  color: #000;
}

.job-company {
  font-size: 9pt;
  font-style: italic;
  color: #666;
  margin: 2px 0 8px 0;
}

.job-company-name {
  font-style: italic;
}

.job-date {
  font-style: normal;
  color: #666;
}

.job-description {
  margin: 0;
  padding: 0 0 0 15px;
  list-style: disc;
}

.job-description li {
  font-size: 8pt;
  color: #333;
  margin: 4px 0;
  line-height: 1.4;
  text-align: justify;
}

.job-description li strong {
  font-weight: 700;
}

/* Project subsection (for private version) */
.project-title {
  font-size: 8.5pt;
  font-weight: 700;
  margin: 10px 0 2px 0;
  color: #000;
}

.project-subtitle {
  font-size: 7.5pt;
  color: #666;
  font-style: italic;
  margin: 0 0 5px 0;
}

/* Open source section */
.opensource-title {
  font-size: 9pt;
  font-weight: 800;
  margin: 12px 0 4px 0;
}

.opensource-description {
  font-size: 8pt;
  color: #333;
  margin: 0 0 5px 0;
  line-height: 1.4;
}

.opensource-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.opensource-links li {
  font-size: 7pt;
  color: #626363;
  margin: 2px 0;
  word-break: break-all;
}

.opensource-links li::before {
  content: '- ';
}

.opensource-links a {
  color: #626363;
  text-decoration: none;
}

/* References section */
.reference-item {
  margin: 3px 0;
}

.reference-name {
  font-size: 8pt;
  font-weight: 700;
  margin: 0;
  color: #000;
}

.reference-title {
  font-size: 7pt;
  color: #333;
  margin: 0;
  line-height: 1.3;
}

.reference-company {
  font-size: 7pt;
  color: #333;
  margin: 0;
  line-height: 1.3;
}

.reference-email {
  font-size: 6.5pt;
  color: #626363;
  margin: 0;
}

.reference-email a {
  color: #626363;
  text-decoration: none;
}

/* References grid for page 2 */
.references-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 12px;
}

/* Zoom control - minimalist */
.zoom-control {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1000;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.zoom-control:hover {
  opacity: 1;
}

.zoom-slider {
  width: 80px;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  background: #999;
  border-radius: 2px;
  cursor: pointer;
}

.zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #666;
  border-radius: 50%;
  cursor: pointer;
}

.zoom-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #666;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.zoom-value {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 11px;
  color: #999;
  min-width: 32px;
}

.download-icon {
  width: 16px;
  height: 16px;
  cursor: pointer;
  stroke: #999;
  transition: stroke 0.2s;
}

.download-icon:hover {
  stroke: #333;
}

.download-link {
  display: flex;
  color: inherit;
}

.zoom-btn {
  display: none;
  width: 32px;
  height: 32px;
  border: none;
  background: #e0e0e0;
  border-radius: 6px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

/* Page 2 sidebar - name only */
.resume-sidebar-page2 {
  padding-top: 14mm;
}

.resume-sidebar-page2 .resume-name {
  margin-bottom: 25px;
}

/* Print and PDF styles */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ATS-extraction fix: kill letter-spacing in the PDF so section headers
     extract as "CONTACT" / "EDUCATION" instead of "C O N T A C T" / "E D U C A T I O N".
     The screen rendering keeps the original tracking. */
  .resume-subtitle,
  .resume-section-header {
    letter-spacing: normal !important;
  }

  body.resume-body {
    padding: 0;
    margin: 0;
    background: white;
  }

  .resume-container {
    max-width: none;
    width: 100%;
    transform: none !important;
  }

  .resume-page {
    width: 210mm;
    height: 297mm;
    box-shadow: none;
    margin: 0;
    page-break-after: always;
    page-break-inside: avoid;
  }

  .resume-page:last-child {
    page-break-after: auto;
  }

  .resume-sidebar {
    background: transparent !important;
  }

  /* Paint the grey sidebar strip on the .resume-page itself via
     linear-gradient so it covers the full page height regardless of
     the sidebar div's content. weasyprint's flex stretch doesn't
     reliably make the sidebar fill a fixed-height parent. */
  .resume-page {
    background: linear-gradient(to right, #fafafa 0%, #fafafa 32%, #ffffff 32%, #ffffff 100%) !important;
  }

  .zoom-control {
    display: none !important;
  }

  /* Position-clipping protection: keep each job position (title +
     company + full bullet list) together as one unit so a position
     never splits across pages. The break-* + page-break-* duplication
     is intentional — old + new spec for max engine compatibility. */
  .job-title,
  .project-title,
  .opensource-title {
    page-break-after: avoid;
    break-after: avoid;
  }
  .job-company,
  .project-subtitle,
  .opensource-description {
    page-break-before: avoid;
    page-break-after: avoid;
    break-before: avoid;
    break-after: avoid;
  }
  /* Keep the bullet list as an indivisible block — if it can't fit on
     the current page, push the whole position (title + company + bullets)
     to the next page rather than splitting mid-bullet-list. */
  .job-description,
  .opensource-links {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .job-description li,
  .opensource-links li {
    page-break-inside: avoid;
    break-inside: avoid;
    orphans: 2;
    widows: 2;
  }
  /* References should stay together as a card */
  .reference-item {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  @page {
    size: A4;
    margin: 0;
  }
}


/* Mobile: center the resume page */
@media screen and (max-width: 800px) {
  .zoom-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    bottom: 15px;
    right: 15px;
    left: 15px;
    background: rgba(255,255,255,0.98);
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.25);
    opacity: 1;
  }

  .zoom-slider {
    display: none;
  }

  .zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: 28px;
    background: #e8e8e8;
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
  }

  .zoom-btn:active {
    background: #d0d0d0;
  }

  .download-icon {
    width: 56px;
    height: 56px;
    padding: 14px;
    background: #e8e8e8;
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
  }

  .download-icon:active {
    background: #d0d0d0;
  }

  .zoom-value {
    font-size: 18px;
    font-weight: 600;
    min-width: 60px;
    text-align: center;
    color: #333;
  }

  body.resume-body {
    padding: 8px;
    padding-bottom: 100px;
    margin: 0;
    background: #f5f5f5;
    min-width: 210mm;
  }

  .resume-container {
    max-width: 210mm;
    margin: 0 auto;
  }

  .resume-page {
    margin-bottom: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
}