/* ===================================================================
   TEMPLATES.CSS — The printed resume page + template variants
   Each template is a modifier class on .resume-page: tmpl-<id>
=================================================================== */

.resume-page {
  background: #ffffff;
  color: #1c1c1c;
  box-shadow: var(--shadow-page);
  position: relative;
  overflow: hidden;
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --rp-accent: #1f7a5c;
  --rp-text: #1c1c1c;
  --rp-muted: #5c5f6b;
  --rp-heading-font: 'Fraunces', Georgia, serif;
  --rp-body-font: 'Source Serif 4', Georgia, serif;
  transform-origin: top center;
  display: flex;
  flex-direction: column;
  /* .preview-panel__stage is a column flexbox; without this, flex's default
     min-height:auto (which collapses to 0 the moment an item sets its own
     overflow, as this element does) lets the page shrink to fit whatever
     space is left instead of keeping its full content height. On mobile,
     where the stage has little room, that silently clipped the resume
     instead of letting the stage scroll to show the rest of it. */
  flex-shrink: 0;
}
.resume-page[data-size="A4"] { width: 794px; min-height: 1123px; }
.resume-page[data-size="Letter"] { width: 816px; min-height: 1056px; }
.resume-page[data-size="Legal"] { width: 816px; min-height: 1344px; }

.rp-inner { flex: 1 1 auto; display: flex; flex-direction: column; padding: 46px 52px; font-family: var(--rp-body-font); font-size: 13.2px; line-height: 1.5; color: var(--rp-text); }
.rp-inner.rp-flush { padding: 0; }
.rp-inner.no-photo .rp-photo { display: none; }
.rp-inner :is(h1,h2,h3) { font-family: var(--rp-heading-font); color: var(--rp-text); }

.rp-header { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }
.rp-photo { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid var(--rp-accent); }
.rp-name { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.rp-title { font-size: 13px; color: var(--rp-accent); font-weight: 600; margin-top: 3px; letter-spacing: .02em; }
.rp-contacts { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 11px; color: var(--rp-muted); margin-top: 8px; }
.rp-contacts span, .rp-contacts a { display: inline-flex; align-items: center; gap: 4px; }
.rp-contacts a { color: inherit; text-decoration: none; cursor: pointer; }
.rp-contacts a:hover, .rp-contacts a:focus-visible { text-decoration: underline; color: var(--rp-accent, inherit); }
.rp-contacts svg { width: 11px; height: 11px; }

.rp-section { margin-bottom: 16px; }
.rp-section-title {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--rp-accent); border-bottom: 1.4px solid var(--rp-accent); padding-bottom: 4px; margin-bottom: 9px;
}
.rp-entry { margin-bottom: 10px; }
.rp-entry-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.rp-entry-title { font-weight: 700; font-size: 13.2px; }
.rp-entry-sub { font-size: 12px; color: var(--rp-muted); font-style: italic; }
.rp-entry-date { font-size: 11px; color: var(--rp-muted); white-space: nowrap; }
.rp-entry ul { margin: 5px 0 0; padding-left: 16px; }
.rp-entry li { margin-bottom: 2px; }
.rp-summary { font-size: 12.6px; color: var(--rp-text); }
.rp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-tag { background: color-mix(in srgb, var(--rp-accent) 12%, white); color: var(--rp-accent); border-radius: 5px; padding: 3px 8px; font-size: 11px; font-weight: 600; }
.rp-skill-bar-wrap { margin-bottom: 6px; }
.rp-skill-bar-label { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 2px; }
.rp-skill-bar { height: 5px; background: color-mix(in srgb, var(--rp-accent) 15%, white); border-radius: 3px; overflow: hidden; }
.rp-skill-bar > span { display: block; height: 100%; background: var(--rp-accent); border-radius: 3px; }

.rp-two-col { display: grid; grid-template-columns: 34% 1fr; flex: 1 1 auto; }
.rp-two-col .rp-side { background: var(--rp-accent); color: #fff; padding: 40px 26px; }
.rp-two-col .rp-side .rp-section-title { color: #fff; border-color: rgba(255,255,255,.5); }
.rp-two-col .rp-side .rp-summary, .rp-two-col .rp-side .rp-contacts, .rp-two-col .rp-side .rp-entry-sub { color: rgba(255,255,255,.85); }
.rp-two-col .rp-side .rp-tag { background: rgba(255,255,255,.16); color: #fff; }
.rp-two-col .rp-side .rp-skill-bar { background: rgba(255,255,255,.25); }
.rp-two-col .rp-side .rp-skill-bar > span { background: #fff; }
.rp-two-col .rp-main { padding: 40px 34px; }
.rp-two-col .rp-photo { border-color: #fff; margin: 0 auto 14px; display: block; }
.rp-two-col .rp-name, .rp-two-col .rp-title { text-align: center; }
.rp-two-col .rp-side .rp-name { color: #fff; font-size: 20px; }
.rp-two-col .rp-side .rp-title { color: var(--gold, #e9d18a); font-size: 11px; }

/* ============ 1. CLASSIC ============ */
.tmpl-classic .rp-inner { --rp-accent: #1f3a5f; --rp-heading-font: 'Fraunces', Georgia, serif; }
.tmpl-classic .rp-header { border-bottom: 2px solid var(--rp-accent); padding-bottom: 14px; }
.tmpl-classic .rp-name { text-transform: uppercase; letter-spacing: .04em; font-size: 22px; }

/* ============ 2. MODERN ============ */
.tmpl-modern .rp-inner { --rp-accent: #1f7a5c; --rp-body-font: 'Inter', Arial, sans-serif; --rp-heading-font: 'Fraunces', serif; }
.tmpl-modern .rp-header { background: linear-gradient(120deg, color-mix(in srgb, var(--rp-accent) 8%, white), white); margin: -46px -52px 18px; padding: 40px 52px 20px; }
.tmpl-modern .rp-section-title { border-bottom: none; background: color-mix(in srgb, var(--rp-accent) 10%, white); padding: 5px 10px; border-radius: 6px; display: inline-block; }

/* ============ 3. MINIMAL ============ */
.tmpl-minimal .rp-inner { --rp-accent: #111111; --rp-body-font: 'Inter', Arial, sans-serif; --rp-heading-font: 'Inter', Arial, sans-serif; }
.tmpl-minimal .rp-name { font-weight: 500; }
.tmpl-minimal .rp-section-title { border-bottom: none; font-weight: 700; color: #111; letter-spacing: 0.14em; }
.tmpl-minimal .rp-entry-title { font-weight: 600; }

/* ============ 4. CORPORATE ============ */
.tmpl-corporate .rp-inner { --rp-accent: #2c3e5c; --rp-body-font: 'Inter', Arial, sans-serif; }
.tmpl-corporate .rp-header { background: var(--rp-accent); color: #fff; margin: -46px -52px 18px; padding: 36px 52px; }
.tmpl-corporate .rp-header .rp-title, .tmpl-corporate .rp-header .rp-contacts { color: rgba(255,255,255,.85); }
.tmpl-corporate .rp-header .rp-name { color: #fff; }
.tmpl-corporate .rp-section-title { color: var(--rp-accent); }

/* ============ 5. EXECUTIVE ============ */
.tmpl-executive .rp-inner { --rp-accent: #7a5c1f; --rp-heading-font: 'Fraunces', Georgia, serif; }
.tmpl-executive .rp-name { font-size: 30px; }
.tmpl-executive .rp-header { border-bottom: 3px double var(--rp-accent); padding-bottom: 16px; justify-content: center; text-align: center; flex-direction: column; }
.tmpl-executive .rp-contacts { justify-content: center; }
.tmpl-executive .rp-section-title { text-align: center; border-bottom: none; }
.tmpl-executive .rp-section-title::after { content: ''; display: block; width: 40px; height: 2px; background: var(--rp-accent); margin: 5px auto 0; }

/* ============ 6. ACADEMIC ============ */
.tmpl-academic .rp-inner { --rp-accent: #4a2f6b; --rp-body-font: 'Source Serif 4', Georgia, serif; font-size: 12.6px; }
.tmpl-academic .rp-name { font-size: 21px; text-align: center; }
.tmpl-academic .rp-header { flex-direction: column; text-align: center; }
.tmpl-academic .rp-contacts { justify-content: center; }
.tmpl-academic .rp-section-title { font-size: 11.5px; }

/* ============ 7. ATS-OPTIMIZED (single column, no icons/tables) ============ */
.tmpl-ats .rp-inner { --rp-accent: #14532d; --rp-body-font: Arial, Helvetica, sans-serif; --rp-heading-font: Arial, Helvetica, sans-serif; font-size: 13px; }
.tmpl-ats .rp-name { font-size: 20px; font-weight: 700; }
.tmpl-ats .rp-contacts svg { display: none; }
.tmpl-ats .rp-section-title { border-bottom: 1px solid #000; color: #000; letter-spacing: 0.03em; }
.tmpl-ats .rp-photo { display: none !important; }
.tmpl-ats .rp-tag { background: none; border: 1px solid var(--rp-accent); padding: 2px 7px; }

/* ============ 8. SIDEBAR (two-column, dark side) — uses rp-two-col ============ */
.tmpl-sidebar .rp-inner { --rp-accent: #1f7a5c; --rp-heading-font: 'Fraunces', serif; }

@media (max-width: 900px) {
  .resume-page[data-size]:not(:has(.rp-two-col)) { width: 100% !important; min-height: 0 !important; }
  /* NOTE: .rp-two-col is intentionally NOT forced to a single column here.
     The preview is a WYSIWYG stand-in for the exported PDF, so a two-column
     template (e.g. Sidebar) must still render as two columns on mobile —
     CSS grid's percentage-based columns (34%/1fr) already scale correctly
     to the narrower page width above; collapsing them to one column made
     the mobile preview show a different layout than the actual document. */
}

/* ---------- Drag-and-drop section reordering (live preview only — never present in
   exported/printed HTML, since those are built without the .is-editable-preview class) ---------- */
.rp-inner.is-editable-preview .rp-section {
  position: relative;
  border-radius: 8px;
  transition: background-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.rp-inner.is-editable-preview .rp-section.rp-draggable {
  cursor: grab;
  padding: 4px 8px;
  margin: 0 -8px 16px;
}
.rp-inner.is-editable-preview .rp-section.rp-draggable:hover {
  background: rgba(31, 122, 92, 0.05);
  box-shadow: 0 0 0 1.5px var(--rp-accent, var(--accent));
}
.rp-inner.is-editable-preview .rp-section.rp-draggable:hover::before {
  content: '⠿ drag to reorder';
  position: absolute;
  top: -10px;
  right: 4px;
  background: var(--rp-accent, var(--accent));
  color: #fff;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 5px;
  pointer-events: none;
  z-index: 5;
}
.rp-inner.is-editable-preview .rp-section.is-dragging { opacity: 0.35; }
.rp-inner.is-editable-preview .rp-section.drag-over {
  box-shadow: 0 -3px 0 0 var(--gold, #c9a24b);
}
.rp-two-col .rp-side .rp-section.rp-draggable:hover { background: rgba(255, 255, 255, 0.1); }

/* Keyboard-operable equivalent of drag-and-drop reordering above: plain focusable buttons,
   since a mouse-only drag handle would leave keyboard users with no way to reorder sections. */
.rp-inner.is-editable-preview .rp-section .rp-reorder-controls {
  position: absolute;
  top: -10px;
  left: 4px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 6;
}
.rp-inner.is-editable-preview .rp-section:hover .rp-reorder-controls,
.rp-inner.is-editable-preview .rp-section:focus-within .rp-reorder-controls {
  opacity: 1;
}
.rp-reorder-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: #fff;
  color: #333;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.rp-reorder-btn svg { width: 11px; height: 11px; }
.rp-reorder-btn:hover:not(:disabled) { background: var(--rp-accent, #1f7a5c); color: #fff; border-color: transparent; }
.rp-reorder-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.rp-reorder-btn:focus-visible { outline: 2px solid var(--rp-accent, #1f7a5c); outline-offset: 1px; }