/**
 * Promoted Charity Jobs Core — NGO CV Builder (Career Tools Phase 2).
 *
 * Loaded after the shared career-tools.css. Three parts:
 * 1. Layout: editor + live preview side by side on wide screens; an
 *    Edit / Preview switch on small screens.
 * 2. The CV document itself: a single-column, print-first layout that
 *    reads well on paper, as a PDF, and in applicant tracking systems.
 *    Its styles don't depend on .pcj-tool, so the same markup prints
 *    correctly from the shared print root the script adds to <body>.
 * 3. Print: CV-specific print tweaks (see career-tools.css for the
 *    shared "print only this document" rules).
 */

/* ---------------------------------------------------------------------
 * 1. Layout
 * ------------------------------------------------------------------- */

.pcj-tool-cv .pcj-tool-cv-layout {
	display: block;
	margin-top: 20px;
}

.pcj-tool-cv .pcj-tool-editor-end {
	margin: 4px 0 0;
}

.pcj-tool-cv .pcj-tool-cv-preview {
	padding: 16px;
	border-radius: var(--pcj-tool-radius);
	background: #e7efea;
}

/* Without JavaScript: editor only (the preview and actions need JS). */
.pcj-tool-cv:not(.pcj-tool-js) .pcj-tool-toolbar,
.pcj-tool-cv:not(.pcj-tool-js) .pcj-tool-hint,
.pcj-tool-cv:not(.pcj-tool-js) .pcj-tool-cv-preview,
.pcj-tool-cv:not(.pcj-tool-js) .pcj-tool-editor-end,
.pcj-tool-cv:not(.pcj-tool-js) .pcj-tool-repeater-controls,
.pcj-tool-cv:not(.pcj-tool-js) .pcj-tool-add-button {
	display: none;
}

/* Small screens: one pane at a time. */
.pcj-tool-cv.pcj-tool-js[data-view="edit"] .pcj-tool-cv-preview,
.pcj-tool-cv.pcj-tool-js[data-view="preview"] .pcj-tool-cv-editor {
	display: none;
}

@media (min-width: 1024px) {
	.pcj-tool-cv .pcj-tool-view-switch,
	.pcj-tool-cv .pcj-tool-editor-end {
		display: none;
	}

	.pcj-tool-cv .pcj-tool-toolbar {
		justify-content: flex-end;
	}

	.pcj-tool-cv.pcj-tool-js .pcj-tool-cv-layout {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: 24px;
		align-items: start;
	}

	/* Both panes always visible side by side. */
	.pcj-tool-cv.pcj-tool-js[data-view] .pcj-tool-cv-preview,
	.pcj-tool-cv.pcj-tool-js[data-view] .pcj-tool-cv-editor {
		display: block;
	}

	.pcj-tool-cv .pcj-tool-cv-preview {
		position: sticky;
		top: calc(var(--pcj-header-offset, 0px) + 24px);
		max-height: calc(100vh - var(--pcj-header-offset, 0px) - 48px);
		overflow: auto;
		padding: 20px;
	}
}

/* ---------------------------------------------------------------------
 * 2. The CV document
 * ------------------------------------------------------------------- */

.pcj-tool-cv-paper {
	max-width: 820px;
	margin: 0 auto;
	border: 1px solid #d3ddd7;
	border-radius: 4px;
	background: #fff;
}

.pcj-tool-cv-document {
	padding: 28px 24px;
	color: #1a2420;
	font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 13.5px;
	line-height: 1.5;
	text-align: left;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

@media (min-width: 600px) {
	.pcj-tool-cv-document {
		padding: 44px 48px;
	}
}

.pcj-tool-cv-document h1,
.pcj-tool-cv-document h2,
.pcj-tool-cv-document h3,
.pcj-tool-cv-document p,
.pcj-tool-cv-document ul,
.pcj-tool-cv-document li {
	margin: 0;
	padding: 0;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.pcj-tool-cv-document .pcj-tool-cv-doc-header {
	padding-bottom: 14px;
	border-bottom: 2px solid #07883f;
}

.pcj-tool-cv-document .pcj-tool-cv-doc-name {
	color: #032d24;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
}

.pcj-tool-cv-document .pcj-tool-cv-doc-name.is-placeholder {
	color: #9aaaa3;
}

.pcj-tool-cv-document .pcj-tool-cv-doc-title {
	margin-top: 4px;
	color: #07883f;
	font-size: 15px;
	font-weight: 600;
}

.pcj-tool-cv-document .pcj-tool-cv-doc-contact {
	display: flex;
	flex-wrap: wrap;
	margin-top: 8px;
	color: #52635c;
	font-size: 13px;
	list-style: none;
}

.pcj-tool-cv-document .pcj-tool-cv-doc-contact li + li::before {
	content: "|";
	margin: 0 8px;
	color: #b9cdc1;
}

.pcj-tool-cv-document .pcj-tool-cv-doc-empty {
	margin-top: 20px;
	color: #52635c;
	font-size: 14px;
}

.pcj-tool-cv-document .pcj-tool-cv-doc-section {
	margin-top: 18px;
}

.pcj-tool-cv-document .pcj-tool-cv-doc-heading {
	margin-bottom: 8px;
	padding-bottom: 3px;
	border-bottom: 1px solid #d5e6da;
	color: #032d24;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.pcj-tool-cv-document .pcj-tool-cv-summary-text + .pcj-tool-cv-summary-text {
	margin-top: 8px;
}

.pcj-tool-cv-document .pcj-tool-cv-entry + .pcj-tool-cv-entry {
	margin-top: 12px;
}

.pcj-tool-cv-document .pcj-tool-cv-entry-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 16px;
}

.pcj-tool-cv-document .pcj-tool-cv-entry-title {
	color: #1a2420;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.pcj-tool-cv-document .pcj-tool-cv-entry-dates {
	color: #52635c;
	font-size: 13px;
	white-space: nowrap;
}

.pcj-tool-cv-document .pcj-tool-cv-entry-sub {
	color: #52635c;
	font-size: 13px;
}

.pcj-tool-cv-document .pcj-tool-cv-bullets {
	margin-top: 4px;
	padding-left: 18px;
	list-style: disc;
}

.pcj-tool-cv-document .pcj-tool-cv-bullets li {
	margin: 2px 0 0;
	padding: 0;
}

.pcj-tool-cv-document .pcj-tool-cv-bullets li::marker {
	color: #07883f;
}

.pcj-tool-cv-document .pcj-tool-cv-skills {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 0;
	list-style: none;
}

.pcj-tool-cv-document .pcj-tool-cv-skills li:not(:last-child)::after {
	content: "•";
	margin: 0 8px;
	color: #07883f;
}

.pcj-tool-cv-document .pcj-tool-cv-plain-list {
	list-style: none;
}

.pcj-tool-cv-document .pcj-tool-cv-plain-list li + li {
	margin-top: 3px;
}

/* ---------------------------------------------------------------------
 * 3. Print — only the CV (the shared print root and "hide everything
 *    else" rules live in career-tools.css; these are CV-specific tweaks)
 * ------------------------------------------------------------------- */

@media print {
	.pcj-tool-print-root .pcj-tool-cv-document {
		padding: 0;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.pcj-tool-cv-document .pcj-tool-cv-doc-empty {
		display: none;
	}

	.pcj-tool-cv-document .pcj-tool-cv-entry,
	.pcj-tool-cv-document .pcj-tool-cv-doc-header {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.pcj-tool-cv-document .pcj-tool-cv-doc-heading {
		break-after: avoid;
		page-break-after: avoid;
	}
}

@media (min-width: 1024px) {
	.pcj-tool-cv .pcj-tool-hint {
		text-align: right;
	}
}