/* ============================================================================
   RESUME CONTENT STYLES
   ============================================================================
   Styles for the printable resume itself (.resume-page and everything inside
   it). These rules apply on screen AND in print — see print.css for the few
   rules that differ only for the printed page, and app.css for the
   surrounding control-panel chrome (never printed).

   Density modes (comfortable / compact / extra-compact) only change the CSS
   custom properties below — the layout rules never change between modes.
   ============================================================================ */

.resume-page {
  --color-text: #1a1f27;
  --color-heading: #14213d;
  --color-accent: #1f4e79;
  --color-muted: #5a6472;
  --color-divider: #d7dbe0;
  --color-summary-bg: #eef2f7;
  --color-chip-bg: #eef0f3;
  --color-chip-border: #dde1e6;

  /* Comfortable density (default) */
  --font-size-base: 10pt;
  --font-size-small: 8.75pt;
  --font-size-heading: 8.75pt;
  --font-size-name: 19pt;
  --font-size-headline: 10pt;
  --line-height-base: 1.26;
  --page-padding-y: 0.38in;
  --page-padding-x: 0.5in;
  --section-gap: 0.12in;
  --item-gap: 0.07in;
  --bullet-gap: 0.02in;
  --header-gap: 0.1in;
  --date-col-width: 0.78in;
  --date-col-gap: 0.15in;
  --chip-padding: 2px 7px;
  --chip-gap: 3px 5px;
  --list-indent: 0.14in;
  --summary-padding: 0.13in 0.18in;

  box-sizing: border-box;
  width: 8.5in;
  min-height: 11in;
  padding: var(--page-padding-y) var(--page-padding-x);
  background: #ffffff;
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  position: relative;
}

.resume-page.density-compact {
  --font-size-base: 9.6pt;
  --font-size-small: 8.4pt;
  --font-size-heading: 8.4pt;
  --font-size-name: 18pt;
  --font-size-headline: 9.6pt;
  --line-height-base: 1.18;
  --page-padding-y: 0.28in;
  --page-padding-x: 0.45in;
  --section-gap: 0.08in;
  --item-gap: 0.05in;
  --bullet-gap: 0.012in;
  --header-gap: 0.07in;
  --date-col-width: 0.72in;
  --date-col-gap: 0.13in;
  --chip-padding: 1.5px 6px;
  --chip-gap: 3px 4px;
  --list-indent: 0.13in;
  --summary-padding: 0.1in 0.15in;
}

.resume-page.density-extra-compact {
  --font-size-base: 9.5pt; /* floor — do not go lower */
  --font-size-small: 8.25pt;
  --font-size-heading: 8.25pt;
  --font-size-name: 17.5pt;
  --font-size-headline: 9.5pt;
  --line-height-base: 1.14;
  --page-padding-y: 0.2in;
  --page-padding-x: 0.4in;
  --section-gap: 0.05in;
  --item-gap: 0.04in;
  --bullet-gap: 0.008in;
  --header-gap: 0.05in;
  --date-col-width: 0.68in;
  --date-col-gap: 0.12in;
  --chip-padding: 1px 6px;
  --chip-gap: 2px 4px;
  --list-indent: 0.12in;
  --summary-padding: 0.08in 0.13in;
}

.resume-page * {
  box-sizing: border-box;
}

.resume-page h1,
.resume-page h2,
.resume-page h3,
.resume-page p,
.resume-page ul,
.resume-page dl,
.resume-page dt,
.resume-page dd {
  margin: 0;
}

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

.resume-header {
  margin-bottom: var(--header-gap);
}

.resume-header h1 {
  font-size: var(--font-size-name);
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: 0.01em;
}

.resume-header .headline {
  font-size: var(--font-size-headline);
  font-weight: 600;
  color: var(--color-accent);
  margin-top: 2px;
}

.contact-line {
  margin-top: 6px;
  font-size: var(--font-size-small);
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  padding-bottom: var(--header-gap);
  border-bottom: 1px solid var(--color-divider);
}

.contact-line a {
  color: var(--color-muted);
  text-decoration: none;
}

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

.contact-line .dot {
  color: var(--color-divider);
}

/* ---------- Sections (shared) ---------- */

.resume-section {
  margin-top: var(--section-gap);
  break-inside: avoid;
  page-break-inside: avoid;
}

.resume-section h2 {
  font-size: var(--font-size-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  padding-bottom: 4px;
  margin-bottom: calc(var(--item-gap) * 0.75);
  border-bottom: 1px solid var(--color-divider);
}

.bullet-list {
  list-style: disc;
  padding-left: var(--list-indent);
  margin-top: 3px;
}

.bullet-list li {
  margin-bottom: var(--bullet-gap);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.bullet-list li::marker {
  color: var(--color-muted);
}

/* ---------- Summary ---------- */

.summary-section {
  background: var(--color-summary-bg);
  border-radius: 4px;
  padding: var(--summary-padding);
}

.summary-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* ---------- Experience ---------- */

.experience-list {
  display: flex;
  flex-direction: column;
  gap: var(--item-gap);
}

.experience-item {
  display: grid;
  grid-template-columns: var(--date-col-width) 1fr;
  column-gap: var(--date-col-gap);
  break-inside: avoid;
  page-break-inside: avoid;
}

.experience-dates .dates {
  font-size: var(--font-size-small);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-muted);
  letter-spacing: 0.02em;
}

.experience-dates .location {
  font-size: var(--font-size-small);
  color: var(--color-muted);
  margin-top: 2px;
}

.experience-content h3 {
  font-size: calc(var(--font-size-base) + 0.5pt);
  font-weight: 700;
  color: var(--color-heading);
}

.experience-content .company {
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin-top: 1px;
}

.experience-content .focus {
  font-size: var(--font-size-small);
  color: var(--color-muted);
  font-style: italic;
  margin-top: 1px;
}

/* ---------- Projects ---------- */

.project-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--bullet-gap) * 2);
}

.project-item {
  break-inside: avoid;
  page-break-inside: avoid;
}

.project-item dt {
  display: inline;
  font-weight: 700;
  color: var(--color-heading);
  font-size: var(--font-size-base);
}

.project-item dd {
  display: inline;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.project-item dd::before {
  content: " — ";
  color: var(--color-muted);
}

/* ---------- Skills ---------- */

.skills-grid {
  display: flex;
  flex-direction: column;
  gap: calc(var(--bullet-gap) * 2);
}

.skills-group {
  display: grid;
  grid-template-columns: 1.35in 1fr;
  column-gap: 0.2in;
  align-items: start;
  break-inside: avoid;
  page-break-inside: avoid;
}

.skills-group h3 {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
}

.skill-tags {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--chip-gap);
}

.skill-tags li {
  background: var(--color-chip-bg);
  border: 1px solid var(--color-chip-border);
  border-radius: 3px;
  padding: var(--chip-padding);
  font-size: var(--font-size-small);
  color: var(--color-text);
  white-space: nowrap;
}

/* ---------- Education & Certifications ---------- */

.education-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  column-gap: 0.3in;
}

.education-item {
  break-inside: avoid;
  page-break-inside: avoid;
}

.education-item h3 {
  font-size: calc(var(--font-size-base) + 0.5pt);
  font-weight: 700;
  color: var(--color-heading);
}

.education-item .credential {
  font-size: var(--font-size-base);
  margin-top: 2px;
}

.education-item .meta-line {
  font-size: var(--font-size-small);
  color: var(--color-muted);
  margin-top: 1px;
}

.certifications-col h3 {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.cert-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--chip-gap);
  align-content: flex-start;
}

.cert-list li {
  background: var(--color-chip-bg);
  border: 1px solid var(--color-chip-border);
  border-radius: 3px;
  padding: var(--chip-padding);
  font-size: var(--font-size-small);
  color: var(--color-text);
}

.cert-list li.featured {
  background: var(--color-heading);
  border-color: var(--color-heading);
  color: #ffffff;
  font-weight: 700;
}

/* ---------- Placeholder content (unreadable source data) ---------- */

.resume-page .placeholder {
  color: #b5423c;
  font-style: italic;
}

/* ============================================================================
   TEMPLATE DIRECTIONS
   ============================================================================
   All templates style the same semantic DOM. This keeps content selectable,
   print-accurate, and in one ATS-friendly reading order while giving users a
   meaningful visual choice.
   ============================================================================ */

/* Modern: balanced, familiar hierarchy for the broadest range of roles. */

.resume-page.template-modern {
  --color-text: #1a1f27;
  --color-heading: #14213d;
  --color-accent: #1f4e79;
  --color-muted: #5a6472;
  --color-divider: #d7dbe0;
  --color-summary-bg: #eef2f7;
  --color-chip-bg: #eef0f3;
  --color-chip-border: #dde1e6;
}

/* Classic: conservative serif typography and right-aligned dates communicate
   trust and formality without adding visual noise. */

.resume-page.template-classic {
  --color-text: #191919;
  --color-heading: #111111;
  --color-accent: #242424;
  --color-muted: #4e4e4e;
  --color-divider: #a8a8a8;
  --color-summary-bg: transparent;
  --color-chip-bg: transparent;
  --color-chip-border: transparent;
  font-family: Georgia, "Times New Roman", serif;
}

.resume-page.template-classic .resume-header {
  text-align: center;
}

.resume-page.template-classic .resume-header h1 {
  font-size: calc(var(--font-size-name) + 2pt);
  font-weight: 600;
  letter-spacing: 0.035em;
}

.resume-page.template-classic .resume-header .headline {
  margin-top: 3px;
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.resume-page.template-classic .contact-line {
  justify-content: center;
  border-bottom-width: 1.5px;
}

.resume-page.template-classic .resume-section h2 {
  border-bottom-color: #777;
  color: var(--color-heading);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
}

.resume-page.template-classic .summary-section {
  border-radius: 0;
  padding: 0;
}

.resume-page.template-classic .experience-item {
  grid-template-columns: minmax(0, 1fr) var(--date-col-width);
}

.resume-page.template-classic .experience-dates {
  grid-row: 1;
  grid-column: 2;
  text-align: right;
}

.resume-page.template-classic .experience-content {
  grid-row: 1;
  grid-column: 1;
}

.resume-page.template-classic .experience-content h3,
.resume-page.template-classic .education-item h3,
.resume-page.template-classic .project-item dt {
  font-weight: 700;
}

.resume-page.template-classic .skill-tags li,
.resume-page.template-classic .cert-list li {
  border: 0;
  border-bottom: 1px solid #bdbdbd;
  border-radius: 0;
  padding: 0 0 1px;
  background: transparent;
}

.resume-page.template-classic .cert-list li.featured {
  border-color: #777;
  background: transparent;
  color: var(--color-text);
  font-weight: 700;
}

/* Impact: a memorable header and section rail add personality while the DOM
   remains a simple, linear document for ATS and assistive technology. */

.resume-page.template-impact {
  --color-text: #202a2f;
  --color-heading: #102d3d;
  --color-accent: #8b5b17;
  --color-muted: #596970;
  --color-divider: #cad3d4;
  --color-summary-bg: #f7f0e4;
  --color-chip-bg: #edf2f2;
  --color-chip-border: #d7dfdf;
  font-family: Arial, "Helvetica Neue", sans-serif;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.resume-page.template-impact .resume-header {
  margin: calc(var(--page-padding-y) * -1) calc(var(--page-padding-x) * -1) var(--header-gap);
  border-bottom: 0.055in solid #d1a35e;
  padding: 0.18in 0.24in 0.15in;
  background: #153444;
}

.resume-page.template-impact .resume-header h1 {
  color: #ffffff;
  font-size: calc(var(--font-size-name) + 2pt);
  letter-spacing: 0.015em;
}

.resume-page.template-impact .resume-header .headline {
  margin-top: 3px;
  color: #f1cb8b;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.resume-page.template-impact .contact-line {
  margin-top: 7px;
  border-bottom: 0;
  padding-bottom: 0;
  color: #dbe5e8;
}

.resume-page.template-impact .contact-line a {
  color: #dbe5e8;
}

.resume-page.template-impact .contact-line .dot {
  color: #76909c;
}

.resume-page.template-impact .summary-section {
  border-left: 3px solid #d1a35e;
  border-radius: 0;
}

.resume-page.template-impact .resume-section:not(.summary-section) {
  display: grid;
  grid-template-columns: 0.92in minmax(0, 1fr);
  column-gap: 0.18in;
}

.resume-page.template-impact .resume-section:not(.summary-section) > h2 {
  grid-column: 1;
  align-self: start;
  border: 0;
  padding: 2px 0 0;
  color: var(--color-accent);
  line-height: 1.15;
}

.resume-page.template-impact .resume-section:not(.summary-section) > :not(h2) {
  grid-column: 2;
  min-width: 0;
}

.resume-page.template-impact .skills-group {
  grid-template-columns: 1.05in minmax(0, 1fr);
  column-gap: 0.14in;
}

.resume-page.template-impact .skill-tags li,
.resume-page.template-impact .cert-list li {
  border-radius: 999px;
}

.resume-page.template-impact .cert-list li.featured {
  border-color: #153444;
  background: #153444;
}