/* =========================================================================
   Resume templates
   All four templates share the exact same HTML structure (see
   views/resume/builder.ejs / public/js/resume-builder.js — the
   `renderResume()` function). Switching templates is just swapping the
   `data-template` attribute on .resume-doc; nothing needs to be re-rendered
   structurally. This file also doubles as the print stylesheet — see the
   @media print block at the bottom, which is what powers the "Download
   PDF" button (it triggers the browser's native print-to-PDF).
   ========================================================================= */

.resume-doc {
  --r-accent: #2f6feb;
  --r-ink: #17203a;
  --r-ink-soft: #5a6180;
  --r-rule: #d7dcec;
  --r-font-heading: var(--font-display);
  --r-font-body: var(--font-body);

  background: #fff;
  color: var(--r-ink);
  font-family: var(--r-font-body);
  width: 100%;
  max-width: 816px; /* US Letter @ 96dpi */
  margin: 0 auto;
  padding: 48px 56px;
  box-shadow: 0 1px 3px rgba(20, 25, 50, 0.08), 0 12px 32px rgba(20, 25, 50, 0.08);
  font-size: 13.5px;
  line-height: 1.5;
}

.resume-doc .r-name { font-family: var(--r-font-heading); font-size: 2rem; line-height: 1.1; margin: 0 0 6px; color: var(--r-ink); }
.resume-doc .r-contact { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--r-ink-soft); font-size: 0.92em; margin-bottom: 4px; }
.resume-doc .r-contact span:not(:last-child)::after { content: '\2022'; margin-left: 10px; color: var(--r-rule); }

.resume-doc .r-section { margin-top: 22px; }
.resume-doc .r-section-title {
  font-family: var(--r-font-heading);
  font-size: 1.08rem;
  margin: 0 0 10px;
  color: var(--r-ink);
}
.resume-doc .r-summary-text { margin: 0; color: var(--r-ink); }

.resume-doc .r-entry { margin-bottom: 16px; }
.resume-doc .r-entry:last-child { margin-bottom: 0; }
.resume-doc .r-entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.resume-doc .r-entry-title { font-weight: 700; font-size: 1.02em; }
.resume-doc .r-entry-sub { color: var(--r-ink-soft); font-size: 0.94em; }
.resume-doc .r-entry-date { color: var(--r-ink-soft); font-size: 0.9em; white-space: nowrap; }
.resume-doc .r-bullets { margin: 6px 0 0; padding-left: 1.1em; }
.resume-doc .r-bullets li { margin-bottom: 3px; }

.resume-doc .r-skills-text, .resume-doc .r-cert-text { margin: 0; }
.resume-doc .r-skills-text b, .resume-doc .r-cert-text b { font-weight: 600; }

.resume-doc .r-empty-hint {
  color: var(--r-ink-soft);
  font-style: italic;
  font-size: 0.92em;
}

/* -------------------------------------------------------------------------
   1. Classic — plain sans-serif, ruled section headers. Inspired by the
      simple single-column style with a horizontal rule under each heading.
   ------------------------------------------------------------------------- */
.resume-doc[data-template="classic"] {
  --r-font-heading: var(--font-body);
}
.resume-doc[data-template="classic"] .r-name { font-weight: 600; }
.resume-doc[data-template="classic"] .r-contact { padding-bottom: 14px; border-bottom: 1px solid var(--r-rule); margin-bottom: 4px; }
.resume-doc[data-template="classic"] .r-section-title {
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--r-rule);
}
.resume-doc[data-template="classic"] .r-entry-head { flex-direction: column; align-items: flex-start; gap: 0; }
.resume-doc[data-template="classic"] .r-entry-sub { order: -1; font-weight: 500; color: var(--r-ink); }
.resume-doc[data-template="classic"] .r-entry-title { font-weight: 400; }
.resume-doc[data-template="classic"] .r-entry-title::after { content: ' | '; font-weight: 400; color: var(--r-ink-soft); }
.resume-doc[data-template="classic"] .r-entry-date::before { content: ''; }

/* -------------------------------------------------------------------------
   2. Elegant Serif — serif body copy, bold sans headings, a solid accent
      bar beside the name. Inspired by the vertical-rule header treatment.
   ------------------------------------------------------------------------- */
.resume-doc[data-template="elegant"] {
  --r-font-heading: var(--font-body);
  --r-font-body: Georgia, 'Times New Roman', Times, serif;
}
.resume-doc[data-template="elegant"] .r-header { position: relative; padding-left: 22px; }
.resume-doc[data-template="elegant"] .r-header::before {
  content: '';
  position: absolute; left: 0; top: 2px; bottom: 6px;
  width: 7px; border-radius: 3px;
  background: var(--r-accent);
}
.resume-doc[data-template="elegant"] .r-name { font-weight: 800; }
.resume-doc[data-template="elegant"] .r-section-title { font-weight: 700; }
.resume-doc[data-template="elegant"] .r-section:not(:first-of-type) { padding-top: 18px; border-top: 1px solid var(--r-rule); }
.resume-doc[data-template="elegant"] .r-entry-head { flex-direction: column; align-items: flex-start; gap: 0; }
.resume-doc[data-template="elegant"] .r-entry-title { font-family: var(--r-font-heading); }

/* -------------------------------------------------------------------------
   3. Modern Bold — geometric sans display font, thick top accent bar,
      dates right-aligned inline with the company line. Inspired by the
      bold-header, two-column-date layout.
   ------------------------------------------------------------------------- */
.resume-doc[data-template="modern"] {
  --r-font-heading: 'Poppins', var(--font-display);
}
.resume-doc[data-template="modern"] .r-header { border-top: 8px solid var(--r-accent); padding-top: 22px; margin-top: -48px; }
.resume-doc[data-template="modern"] .r-name { font-weight: 800; letter-spacing: -0.01em; }
.resume-doc[data-template="modern"] .r-section-title { font-weight: 700; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.04em; }
.resume-doc[data-template="modern"] .r-section:not(:first-of-type) { padding-top: 16px; border-top: 1px solid var(--r-rule); }
.resume-doc[data-template="modern"] .r-entry-sub { text-transform: uppercase; font-size: 0.82em; letter-spacing: 0.02em; }

/* -------------------------------------------------------------------------
   4. Warm Accent — coral accent colour on section labels with a left
      border, softer rounded sans, tinted header block.
   ------------------------------------------------------------------------- */
.resume-doc[data-template="warm"] {
  --r-accent: #fe7a66;
}
.resume-doc[data-template="warm"] .r-header {
  background: linear-gradient(135deg, #fff3ef 0%, #fff 100%);
  margin: -48px -56px 0; padding: 40px 56px 20px;
  border-bottom: 3px solid var(--r-accent);
}
.resume-doc[data-template="warm"] .r-name { font-weight: 700; color: #b8462f; }
.resume-doc[data-template="warm"] .r-section-title {
  color: var(--r-accent);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-left: 4px solid var(--r-accent);
  padding-left: 10px;
}
.resume-doc[data-template="warm"] .r-entry-title { color: var(--r-ink); }
.resume-doc[data-template="warm"] .r-entry-date { color: var(--r-accent); font-weight: 600; }

/* =========================================================================
   Print (the actual PDF export mechanism — window.print() with these
   rules active produces a clean, one-column US-Letter PDF via the
   browser's "Save as PDF" print destination).
   ========================================================================= */
@media print {
  @page { size: Letter; margin: 0.5in; }
  html, body { background: #fff !important; }
  body * { visibility: hidden; }
  #resumePreviewWrap, #resumePreviewWrap * { visibility: visible; }
  #resumePreviewWrap { position: absolute; inset: 0; margin: 0; padding: 0; }
  .resume-doc { box-shadow: none; max-width: none; width: 100%; padding: 0; margin: 0; }
  .resume-doc .r-empty-hint { display: none; }
}