/* ==========================================================================
   CV Maker Pro — CV Rendering Styles
   The DOM structure of .cvmp-cv-page is IDENTICAL for every template; only
   [data-layout] (structural family) and [data-template] (color/type skin)
   selectors change the look. Per-CV colors/fonts/spacing are applied as
   inline CSS custom properties by builder.js (--cv-primary, --cv-font …),
   so this file only needs to reference var(--cv-*) — it never hardcodes a
   single template's palette. That is what lets 15 templates share one
   stylesheet and one JS renderer (see requirement #23).
   ========================================================================== */

.cvmp-cv-page {
	--cv-primary: #2563eb;
	--cv-secondary: #1e40af;
	--cv-text: #1f2937;
	--cv-bg: #ffffff;
	--cv-sidebar: #1e293b;
	--cv-font: 'Inter', sans-serif;
	--cv-font-size: 14px;
	--cv-heading-size: 1.6em;
	--cv-section-spacing: 22px;
	--cv-line-spacing: 1.5;
	--cv-radius: 6px;

	font-family: var(--cv-font);
	font-size: var(--cv-font-size);
	line-height: var(--cv-line-spacing);
	color: var(--cv-text);
	background: var(--cv-bg);
	display: grid;
	grid-template-columns: 1fr;
}

.cvmp-cv-page a { color: var(--cv-primary); text-decoration: none; }

.cv-h1 { font-size: calc(var(--cv-heading-size) * 1.35); font-weight: 700; margin: 0 0 2px; line-height: 1.2; }
.cv-h2 { font-size: 1em; font-weight: 600; margin: 0 0 14px; opacity: .85; }
.cv-section-title {
	font-size: var(--cv-heading-size);
	font-weight: 700;
	color: var(--cv-primary);
	margin: 0 0 10px;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--cv-primary);
	text-transform: uppercase;
	letter-spacing: .03em;
}
.cv-section { margin-bottom: var(--cv-section-spacing); }
.cv-item { margin-bottom: 14px; }
.cv-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cv-item-title { font-weight: 700; }
.cv-item-sub { color: var(--cv-secondary); font-weight: 500; font-size: .95em; }
.cv-item-date { font-size: .85em; opacity: .7; white-space: nowrap; }
.cv-item-desc { margin-top: 4px; font-size: .95em; white-space: pre-line; }

.cv-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.3); }

/* Skills display modes */
.cv-skill-row { margin-bottom: 8px; }
.cv-skill-name { display: flex; justify-content: space-between; font-size: .92em; margin-bottom: 3px; }
.cv-skill-bar { height: 6px; background: rgba(0,0,0,.08); border-radius: 4px; overflow: hidden; }
.cv-skill-bar-fill { height: 100%; background: var(--cv-primary); border-radius: 4px; }
.cv-skill-dots { display: flex; gap: 4px; }
.cv-skill-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.12); }
.cv-skill-dot.filled { background: var(--cv-primary); }
.cv-skill-stars { letter-spacing: 2px; color: var(--cv-primary); }
.cv-skill-list { display: inline-block; margin: 0 10px 6px 0; padding: 3px 10px; background: rgba(0,0,0,.05); border-radius: 20px; font-size: .85em; }

.cv-pill { display: inline-block; margin: 0 6px 6px 0; padding: 4px 10px; background: rgba(0,0,0,.05); border-radius: 20px; font-size: .85em; }
.cv-contact-list { list-style: none; margin: 0; padding: 0; font-size: .9em; }
.cv-contact-list li { margin-bottom: 6px; word-break: break-word; }

/* ==========================================================================
   Layout family: SINGLE COLUMN (Minimal, ATS Friendly, Elegant, Classic, Harvard)
   ========================================================================== */
.cvmp-cv-page[data-layout="single"] { padding: 44px 50px; }
.cvmp-cv-page[data-layout="single"] .cv-header { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.cvmp-cv-page[data-layout="single"] .cv-photo { border-color: var(--cv-primary); }
.cvmp-cv-page[data-layout="single"] .cv-contact-list { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.cvmp-cv-page[data-layout="single"] .cv-contact-list li { margin: 0; }
.cvmp-cv-page[data-layout="single"] .cv-body-grid { display: block; }

/* ==========================================================================
   Layout family: SIDEBAR LEFT (Modern, Corporate, Dark, Blue Sidebar, Green)
   ========================================================================== */
.cvmp-cv-page[data-layout="sidebar-left"] { grid-template-columns: 260px 1fr; }
.cvmp-cv-page[data-layout="sidebar-left"] .cv-sidebar {
	background: var(--cv-sidebar);
	color: #fff;
	padding: 36px 24px;
}
.cvmp-cv-page[data-layout="sidebar-left"] .cv-sidebar .cv-section-title { color: #fff; border-bottom-color: rgba(255,255,255,.35); }
.cvmp-cv-page[data-layout="sidebar-left"] .cv-sidebar .cv-contact-list,
.cvmp-cv-page[data-layout="sidebar-left"] .cv-sidebar .cv-item-desc { color: rgba(255,255,255,.85); }
.cvmp-cv-page[data-layout="sidebar-left"] .cv-sidebar a { color: #fff; }
.cvmp-cv-page[data-layout="sidebar-left"] .cv-sidebar .cv-photo { display: block; margin: 0 auto 20px; }
.cvmp-cv-page[data-layout="sidebar-left"] .cv-sidebar .cv-skill-bar { background: rgba(255,255,255,.2); }
.cvmp-cv-page[data-layout="sidebar-left"] .cv-sidebar .cv-skill-dot { background: rgba(255,255,255,.25); }
.cvmp-cv-page[data-layout="sidebar-left"] .cv-sidebar .cv-skill-dot.filled { background: #fff; }
.cvmp-cv-page[data-layout="sidebar-left"] .cv-main { padding: 36px 32px; }
.cvmp-cv-page[data-layout="sidebar-left"] .cv-main .cv-h1 { color: var(--cv-primary); }

/* ==========================================================================
   Layout family: SIDEBAR RIGHT (Creative, Professional)
   ========================================================================== */
.cvmp-cv-page[data-layout="sidebar-right"] { grid-template-columns: 1fr 250px; }
.cvmp-cv-page[data-layout="sidebar-right"] .cv-main { padding: 36px 32px; order: 1; }
.cvmp-cv-page[data-layout="sidebar-right"] .cv-sidebar {
	background: var(--cv-sidebar);
	padding: 36px 22px;
	order: 2;
}
.cvmp-cv-page[data-layout="sidebar-right"] .cv-sidebar .cv-photo { display: block; margin: 0 auto 18px; }
.cvmp-cv-page[data-layout="sidebar-right"] .cv-main .cv-h1 { color: var(--cv-primary); }

/* ==========================================================================
   Layout family: HEADER BAND (Executive, Designer, European)
   ========================================================================== */
.cvmp-cv-page[data-layout="header-band"] { grid-template-columns: 1fr; }
.cvmp-cv-page[data-layout="header-band"] .cv-header {
	background: var(--cv-sidebar);
	color: #fff;
	padding: 40px 50px;
	display: flex;
	align-items: center;
	gap: 24px;
}
.cvmp-cv-page[data-layout="header-band"] .cv-header .cv-h1,
.cvmp-cv-page[data-layout="header-band"] .cv-header .cv-h2 { color: #fff; }
.cvmp-cv-page[data-layout="header-band"] .cv-header .cv-contact-list { color: rgba(255,255,255,.85); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.cvmp-cv-page[data-layout="header-band"] .cv-header .cv-contact-list li { margin: 0; }
.cvmp-cv-page[data-layout="header-band"] .cv-body { padding: 34px 50px; }
.cvmp-cv-page[data-layout="header-band"] .cv-body-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 30px; }

/* ==========================================================================
   Individual template skins — mostly typographic accents on top of the
   layout families + inline CSS vars. Each block is intentionally small:
   the variety comes from the primary/secondary/sidebar colors and font
   chosen per template, set inline by JS from CVMP_Templates definitions.
   ========================================================================== */

.cvmp-cv-page[data-template="ats-friendly"] { --cv-radius: 0; }
.cvmp-cv-page[data-template="ats-friendly"] .cv-section-title { border-bottom: 1px solid #000; text-transform: none; letter-spacing: 0; }
.cvmp-cv-page[data-template="ats-friendly"] .cv-skill-bar,
.cvmp-cv-page[data-template="ats-friendly"] .cv-skill-dots,
.cvmp-cv-page[data-template="ats-friendly"] .cv-skill-stars { display: none; } /* ATS-safe: plain text list only */

.cvmp-cv-page[data-template="minimal"] .cv-section-title { border-bottom: none; font-weight: 600; letter-spacing: .08em; }
.cvmp-cv-page[data-template="minimal"] .cv-h1 { font-weight: 500; }

.cvmp-cv-page[data-template="elegant"] .cv-h1 { font-style: italic; }
.cvmp-cv-page[data-template="elegant"] .cv-section-title { border-bottom: 1px solid var(--cv-secondary); font-style: italic; text-transform: none; }

.cvmp-cv-page[data-template="dark"] .cv-main,
.cvmp-cv-page[data-template="dark"] { background: var(--cv-bg); }
.cvmp-cv-page[data-template="dark"] .cv-section-title { border-bottom-color: var(--cv-primary); }
.cvmp-cv-page[data-template="dark"] .cv-pill,
.cvmp-cv-page[data-template="dark"] .cv-skill-list { background: rgba(255,255,255,.08); }

.cvmp-cv-page[data-template="harvard"] .cv-h1 { text-align: center; }
.cvmp-cv-page[data-template="harvard"] .cv-header { flex-direction: column; text-align: center; }
.cvmp-cv-page[data-template="harvard"] .cv-contact-list { justify-content: center; }
.cvmp-cv-page[data-template="harvard"] .cv-section-title { text-align: center; border-bottom: none; border-top: 1px solid var(--cv-primary); border-bottom: 1px solid var(--cv-primary); padding: 4px 0; }

.cvmp-cv-page[data-template="classic"] .cv-section-title { text-transform: none; letter-spacing: 0; font-variant: small-caps; }

.cvmp-cv-page[data-template="corporate"] .cv-sidebar .cv-h1 { font-size: 1.5em; }

.cvmp-cv-page[data-template="creative"] .cv-section-title { border-bottom: none; background: rgba(0,0,0,.04); padding: 4px 10px; border-radius: 20px; display: inline-block; }

.cvmp-cv-page[data-template="designer"] .cv-header { position: relative; }
.cvmp-cv-page[data-template="designer"] .cv-header::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: var(--cv-primary); }

.cvmp-cv-page[data-template="european"] .cv-photo { border-radius: 4px; }
.cvmp-cv-page[data-template="european"] .cv-section-title { border-bottom: 3px solid var(--cv-secondary); }

.cvmp-cv-page[data-template="executive"] .cv-h1 { letter-spacing: .02em; }
.cvmp-cv-page[data-template="executive"] .cv-section-title { border-bottom: 1px solid var(--cv-secondary); }

/* Print / PDF page-break hygiene, shared across all templates */
.cv-section { break-inside: avoid; page-break-inside: avoid; }
.cv-item { break-inside: avoid; page-break-inside: avoid; }