/* ==========================================================================
   Template variants
   Each template only changes accent color / font — the underlying resume
   structure stays identical (single column, semantic headings) so every
   template stays ATS-parseable.
   ========================================================================== */
.template-default,
.template-operator,
.template-highlight {
  --accent: #4f46e5;
  --doc-font: var(--font-sans);
}

.template-operator {
  --accent: #0f766e;
  --doc-font: var(--font-mono);
}

/* ==========================================================================
   Resume document (used both in the live editor preview and for print)
   ========================================================================== */
.resume-doc {
  font-family: var(--doc-font);
  color: #111827;
  font-size: 13px;
  line-height: 1.5;
}

/* Spacing hierarchy (biggest gap = biggest structural break), so the eye
   can tell "new section" from "another entry in the same section" without
   reading the labels — bullets (.28em) < label-to-content (.5em) <
   entry-to-entry (1em) < section-to-section (1.6em). Previously sections
   and entries were nearly the same gap (1.1em / .85em), which flattened
   that hierarchy. */
.resume-doc__header {
  margin-bottom: 1.6em;
  padding-bottom: .9em;
  border-bottom: 1px solid #e5e7eb;
}

.resume-doc__header--with-photo {
  display: flex;
  align-items: center;
  gap: 1.3em;
}

.resume-doc__header--photo-right {
  flex-direction: row-reverse;
}

.resume-doc__photo {
  width: 7em;
  height: 7em;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e5e7eb;
}

.resume-doc__header-text {
  flex: 1 1 auto;
  min-width: 0;
}

.resume-doc__name {
  font-size: 1.9em;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 .2em;
  color: #0f172a;
}

.template-highlight .resume-doc__name { color: var(--accent); }

.resume-doc__headline {
  display: inline-block;
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .55em;
}

.template-highlight .resume-doc__headline:not(.is-placeholder) {
  color: #fff;
  background: var(--accent);
  padding: .18em .7em;
  border-radius: 999px;
}

.resume-doc__contact {
  font-size: .85em;
  color: #475569;
  margin: 0;
}

.resume-doc__contact span:not(:last-child)::after {
  content: "\00a0|\00a0";
  color: #cbd5e1;
}

.resume-doc__section { margin-bottom: 1.6em; }
.resume-doc__section:last-child { margin-bottom: 0; }

.resume-doc__label {
  font-size: .74em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .5em;
}

/* Decorative only — kept out of the label's real text content so ATS
   heading-matching and screen readers see a clean "Experience", not
   "— Experience". */
.resume-doc__label::before {
  content: "\2014\00a0";
}

.resume-doc__summary {
  margin: 0;
  color: #1f2937;
}

.resume-doc__entry { margin-bottom: 1em; }
.resume-doc__entry:last-child { margin-bottom: 0; }

.resume-doc__entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
}

.resume-doc__entry-title {
  font-weight: 600;
  color: #111827;
}

.resume-doc__entry-title strong { font-weight: 700; }

.resume-doc__entry-date {
  flex-shrink: 0;
  font-size: .85em;
  color: #64748b;
  white-space: nowrap;
}

.resume-doc__bullets {
  margin: .5em 0 0;
  padding-left: 1.1em;
}

.resume-doc__bullets li { margin-bottom: .28em; }
.resume-doc__bullets li:last-child { margin-bottom: 0; }

.resume-doc__skills {
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
}

.skill-pill {
  display: inline-block;
  font-size: .82em;
  border: 1px solid #d1d5db;
  color: #1f2937;
  border-radius: 999px;
  padding: .18em .75em;
}

.template-operator .skill-pill {
  border-color: var(--accent);
  color: var(--accent);
  background: #f0fdfa;
  border-radius: 4px;
}

/* ==========================================================================
   Per-template differentiation
   Same semantic single-column structure everywhere (still fully ATS-safe) —
   only typography, color intensity, and small decorative touches change per
   template, so each one has an actual reason to be picked beyond the name.
   ========================================================================== */

/* Default: the safe, neutral option — keep the headline monochrome so the
   only color left is the light section-label accent. */
.template-default .resume-doc__headline {
  color: var(--ink-soft);
}

/* Operator: technical/terminal feel — dashed rule under the header and
   chevron bullets instead of round ones (squared skill tags are set above). */
.template-operator .resume-doc__header {
  border-bottom-style: dashed;
  border-bottom-color: var(--accent);
}

.template-operator .resume-doc__bullets {
  list-style: none;
}

.template-operator .resume-doc__bullets li {
  position: relative;
}

.template-operator .resume-doc__bullets li::before {
  content: '\203A';
  position: absolute;
  left: -1.1em;
  font-weight: 700;
  color: var(--accent);
}

/* Highlight: the boldest option — a thicker accent rule, tinted skill chips,
   and colored bullet markers on top of the pill headline/name it already had. */
.template-highlight .resume-doc__header {
  border-bottom-width: 2px;
  border-bottom-color: var(--accent);
}

.template-highlight .resume-doc__bullets li::marker {
  color: var(--accent);
}

.template-highlight .skill-pill {
  background: #eef2ff;
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* ==========================================================================
   Template-card mock previews on the landing page
   ========================================================================== */
.template-card__preview .tcp-name {
  font-family: var(--doc-font);
  font-weight: 800;
  font-size: 1.05rem;
  color: #0f172a;
}

.template-card__preview.template-highlight .tcp-name { color: var(--accent); }

.template-card__preview .tcp-role {
  font-family: var(--doc-font);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  margin-bottom: .5rem;
}

.template-highlight .tcp-role {
  color: #fff;
  background: var(--accent);
  display: inline-block;
  padding: .15em .6em;
  border-radius: 999px;
  width: fit-content;
}

.template-card__preview .tcp-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--accent);
  margin-top: .5rem;
}

.template-card__preview .tcp-line {
  display: block;
  height: 6px;
  border-radius: 4px;
  background: #e5e7eb;
}

.tcp-line--w80 { width: 80%; }
.tcp-line--w70 { width: 70%; }
.tcp-line--w60 { width: 60%; }

/* ==========================================================================
   Placeholder (sample) text
   A fixed, verified-AA color rather than opacity: opacity blends toward the
   white page background and washes dark text out to ~2:1 contrast, well
   under the 4.5:1 WCAG AA minimum. #4b5563 on white is ~7.5:1. Declared
   last so it wins the specificity ties against the accent-color rules above.
   ========================================================================== */
.resume-doc .is-placeholder {
  color: #4b5563;
}