/* ===================================================================
   Resume document styles.
   .page is the printable sheet. .tpl-* classes are the template skins.
=================================================================== */

.page {
  background: #fff;
  width: 210mm;
  min-height: 297mm;
  padding: 18mm 16mm;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 12px 32px rgba(20,22,26,0.08);
  color: #1c1c1c;
}
.page[data-size="letter"] { width: 8.5in; min-height: 11in; padding: 0.75in 0.7in; }

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

/* Mobile preview — .page's 210mm/8.5in width (~794px/816px) is far
   wider than any phone screen, with no scaling before this fix. A
   transform: scale() approach was considered, but properly
   compensating for the layout space it leaves behind needs to know
   the element's exact rendered height, which varies with how long the
   actual resume content is — not something safely hardcoded. Since
   this is only the on-screen PREVIEW (the actual print/PDF export is
   governed entirely separately by print.css, which never references
   .page's width at all), it's safe to let this simply become a
   naturally responsive box on narrow screens instead — explicitly
   scoped to "screen" so this can never affect the printed output even
   if a print dialog happens to render at a similar viewport width. */
@media screen and (max-width: 600px) {
  .page, .page[data-size="letter"] {
    width: 100%;
    max-width: 480px;
    min-height: auto;
    padding: 20px 16px;
  }
  /* The sidebar template's 34%/66% split becomes unreadably narrow at
     this preview width (roughly 160px and 280px respectively) — stacks
     to a single column here instead, sidebar first, matching how the
     mobile builder's own Edit/Preview toggle already treats this whole
     page: one readable column, not a shrunk-down two-column layout. */
  .page.tpl-sidebar { padding: 0; }
  .tpl-sidebar .doc-body { flex-direction: column; }
  .tpl-sidebar .doc-sidebar, .page[data-size="letter"].tpl-sidebar .doc-sidebar { flex: none; padding: 20px 16px; }
  .tpl-sidebar .doc-main, .page[data-size="letter"].tpl-sidebar .doc-main { padding: 20px 16px; }
}

.doc-header h1 { margin: 0 0 2px; font-size: 1.7rem; line-height: 1.15; }
.doc-title { font-size: 0.98rem; color: #444; margin-bottom: 6px; }
.contact-line { font-size: 0.8rem; color: #555; }
.doc-header-center { text-align: center; }
.header-rule { border: none; border-top: 1px solid #ccc; margin: 10px 0 0; }

/* Photo + header-row layout, shared across Modern/Classic/Minimal —
   only rendered at all when a photo exists (see headerWithPhoto() in
   templates.js), so templates without one look completely unchanged. */
.doc-photo {
  flex-shrink: 0; overflow: hidden; background: #eee;
  width: 64px; height: 64px; border-radius: 50%;
}
.doc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc-photo-large { width: 96px; height: 96px; }
.doc-header-row { display: flex; align-items: center; gap: 16px; }
.doc-header-row .doc-header-text { flex: 1; min-width: 0; }
.doc-header-center .doc-header-row { justify-content: center; text-align: left; }

.doc-section { margin-top: 16px; }
.doc-section h2 {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.entry { margin-bottom: 12px; }
.entry-tight { margin-bottom: 6px; }
.entry-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.entry-title { font-weight: 600; }
.entry-org { font-weight: 400; }
.entry-sub { font-size: 0.85rem; color: #555; margin-top: 1px; }
.entry-details { font-size: 0.85rem; color: #444; margin-top: 3px; }
.dates { font-size: 0.78rem; color: #666; white-space: nowrap; font-variant-numeric: tabular-nums; }

.bullets { margin: 5px 0 0; padding-left: 18px; }
.bullets li { font-size: 0.87rem; line-height: 1.45; margin-bottom: 2px; }

.summary { font-size: 0.9rem; line-height: 1.55; margin: 0; }

.skill-row { display: flex; gap: 8px; font-size: 0.87rem; margin-bottom: 3px; }
.skill-row .skill-cat { font-weight: 600; flex-shrink: 0; }
.skill-row .skill-items { color: #333; }

/* ================= Modern ================= */
.tpl-modern { font-family: "Inter", system-ui, sans-serif; }
.tpl-modern .doc-header { border-bottom: 3px solid var(--accent, #3652ff); padding-bottom: 10px; }
.tpl-modern .doc-title { color: var(--accent, #3652ff); font-weight: 600; }
.tpl-modern .doc-section h2 {
  color: var(--accent, #3652ff);
  border-bottom: 1px solid #e4e2dc;
  padding-bottom: 4px;
}

/* ================= Classic ================= */
.tpl-classic { font-family: "Source Serif 4", Georgia, serif; }
.tpl-classic .doc-header h1 { font-size: 1.9rem; letter-spacing: 0.01em; }
.tpl-classic .doc-title { font-style: italic; }
.tpl-classic .doc-section h2 {
  text-align: center;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 3px 0;
  letter-spacing: 0.12em;
}
.tpl-classic .entry-head { flex-direction: row; }

/* ================= Minimal ================= */
.tpl-minimal { font-family: "Inter", system-ui, sans-serif; }
.tpl-minimal .doc-header h1 { font-weight: 500; }
.tpl-minimal .doc-title { color: #666; }
.tpl-minimal .doc-section h2 { color: #999; font-weight: 500; }
.tpl-minimal .entry-title { font-weight: 500; }

/* ================= ATS-Safe ================= */
/* Plain, single-column, standard fonts, no color, no rules/graphics —
   optimized for parsing rather than visual flourish. */
.tpl-ats-safe { font-family: Arial, Helvetica, sans-serif; }
.tpl-ats-safe .doc-header-plain h1 { font-size: 1.5rem; }
.tpl-ats-safe .doc-title { color: #000; }
.tpl-ats-safe .doc-section h2 {
  font-weight: 700;
  border: none;
  color: #000;
}
.tpl-ats-safe .dates, .tpl-ats-safe .entry-sub, .tpl-ats-safe .contact-line { color: #222; }

/* ================= LinkedIn ================= */
/* Colored banner header with the photo contained inside it (not a true
   full-bleed edge-to-edge banner) — a full-bleed version would need
   different negative-margin values for A4 vs Letter, since .page's own
   padding differs between them (18mm/16mm vs 0.75in/0.7in), and that's
   real added print-rendering risk for a visual flourish that isn't
   worth it. A rounded, contained block gets the same "colored banner"
   identity without depending on page-size-specific math. */
.tpl-linkedin { font-family: "Inter", system-ui, sans-serif; }
.tpl-linkedin .li-banner {
  background: var(--accent, #3652ff);
  color: #fff;
  text-align: center;
  padding: 24px 20px 20px;
  margin: 0 0 16px;
  border-radius: 10px;
}
.tpl-linkedin .li-banner .doc-photo {
  margin: 0 auto 10px;
  border: 3px solid #fff;
}
.tpl-linkedin .li-banner h1 {
  color: #fff; margin: 0 0 2px; font-size: 1.7rem; line-height: 1.15;
  /* .doc-header h1's sizing doesn't apply here — this h1 sits inside
     .li-banner, not .doc-header, since the banner is a standalone
     block rather than nested in the shared header wrapper (it needs
     its own background/padding/rounding that .doc-header doesn't
     have). Redeclared explicitly rather than relying on a selector
     that doesn't actually match. */
}
.tpl-linkedin .li-banner .doc-title { color: rgba(255,255,255,0.9); font-weight: 500; margin-bottom: 0; font-size: 0.98rem; }
.tpl-linkedin .li-contact-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.tpl-linkedin .li-contact-pill {
  background: rgba(255,255,255,0.15); color: #fff;
  font-size: 0.76rem; padding: 3px 10px; border-radius: 999px;
}
.tpl-linkedin .doc-section h2 {
  color: var(--accent, #3652ff);
  border-bottom: 2px solid #e4e2dc;
  padding-bottom: 4px;
}

/* ---- Sidebar: full-height dark left column + white main column ----
   Removing .page's own padding for this template specifically and
   reintroducing it separately inside .doc-sidebar/.doc-main is what
   lets the sidebar's color genuinely reach the page edge — higher
   specificity than the base .page rule (not just later source order)
   is what makes this override reliably win, the same class of CSS
   specificity trap already found and fixed once elsewhere in this
   project (relying on file order alone is fragile). */
.page.tpl-sidebar { padding: 0; }
.tpl-sidebar .doc-body { display: flex; align-items: stretch; min-height: 100%; }
.tpl-sidebar .doc-sidebar {
  flex: 0 0 34%;
  /* Matches the existing accent-color customization already used by
     the LinkedIn template's banner (state.meta.accentColor, applied
     via renderPreview()) rather than ignoring it with a fixed color —
     the dark slate fallback only applies until someone actually picks
     their own color. */
  background: var(--accent, #232b3d);
  color: #e8eaf0;
  padding: 18mm 8mm 18mm 12mm;
}
.page[data-size="letter"].tpl-sidebar .doc-sidebar { padding: 0.75in 0.35in 0.75in 0.55in; }
.tpl-sidebar .doc-main { flex: 1; min-width: 0; padding: 18mm 12mm 18mm 8mm; }
.page[data-size="letter"].tpl-sidebar .doc-main { padding: 0.75in 0.55in 0.75in 0.35in; }
.tpl-sidebar .doc-sidebar .doc-photo { margin: 0 auto 12px; width: 84px; height: 84px; border: 3px solid rgba(255,255,255,0.25); }
.tpl-sidebar .doc-sidebar h1 { color: #fff; font-size: 1.25rem; text-align: center; margin: 0 0 2px; line-height: 1.2; }
.tpl-sidebar .doc-sidebar .doc-title { color: rgba(255,255,255,0.75); text-align: center; font-size: 0.85rem; }
.tpl-sidebar .sb-contact { margin: 14px 0 4px; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 12px; }
.tpl-sidebar .sb-contact-item { font-size: 0.76rem; color: rgba(255,255,255,0.85); word-break: break-word; margin-bottom: 5px; }
.tpl-sidebar .doc-sidebar .doc-section h2 { color: rgba(255,255,255,0.55); border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 4px; }
/* Skill/language rows and entry text default to dark-on-white ink
   elsewhere in this file — every text-bearing element within the
   sidebar needs its own override here, since none of that inherits
   usably against this column's dark background. */
.tpl-sidebar .doc-sidebar .skill-cat, .tpl-sidebar .doc-sidebar .entry-title { color: #fff; }
.tpl-sidebar .doc-sidebar .skill-items, .tpl-sidebar .doc-sidebar .entry-org,
.tpl-sidebar .doc-sidebar .entry-sub, .tpl-sidebar .doc-sidebar .dates { color: rgba(255,255,255,0.7); }
.tpl-sidebar .doc-main .doc-section:first-child { margin-top: 0; }
.tpl-sidebar .doc-main .doc-section h2 { color: #232b3d; border-bottom: 2px solid #e4e2dc; padding-bottom: 4px; }