/**
 * Promoted Charity Jobs Core — Cover Letter Builder (Career Tools Phase 3).
 *
 * Loaded after the shared career-tools.css (fields, buttons, error
 * states and the shared print rules live there). This file covers the
 * form-and-letter layout, the editable letter "paper", and how the
 * letter looks when printed or saved as a PDF.
 */

/* ---------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------- */

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

.pcj-tool-cl .pcj-tool-cl-generate {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 24px;
}

.pcj-tool-cl .pcj-tool-cl-generate .pcj-tool-button {
	width: auto;
}

.pcj-tool-cl .pcj-tool-cl-output {
	padding: 16px;
	border-radius: var(--pcj-tool-radius);
	background: #e7efea;
	scroll-margin-top: calc(var(--pcj-header-offset, 0px) + 16px);
}

.pcj-tool-cl .pcj-tool-cl-output-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 12px;
	margin-bottom: 12px;
}

.pcj-tool-cl .pcj-tool-cl-output-title {
	margin: 0;
	color: var(--pcj-tool-ink);
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.pcj-tool-cl .pcj-tool-cl-output .pcj-tool-button {
	width: auto;
}

.pcj-tool-cl .pcj-tool-cl-status {
	min-height: 0;
	margin: 0;
	color: var(--pcj-tool-green-dark);
	font-size: 0.875rem;
	font-weight: 600;
}

.pcj-tool-cl .pcj-tool-cl-status:not(:empty) {
	margin: 0 0 10px;
	padding: 10px 12px;
	border-radius: var(--pcj-tool-radius-sm);
	background: var(--pcj-tool-white);
}

.pcj-tool-cl .pcj-tool-cl-status.is-error {
	color: #a4271d;
}

.pcj-tool-cl .pcj-tool-cl-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 10px 0 0;
	color: var(--pcj-tool-muted);
	font-size: 0.8125rem;
}

.pcj-tool-cl .pcj-tool-cl-count {
	font-weight: 600;
}

/* Without JavaScript the builder can't create a letter. */
.pcj-tool-cl:not(.pcj-tool-js) .pcj-tool-cl-output,
.pcj-tool-cl:not(.pcj-tool-js) .pcj-tool-cl-generate {
	display: none;
}

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

	.pcj-tool-cl .pcj-tool-cl-output {
		position: sticky;
		top: calc(var(--pcj-header-offset, 0px) + 24px);
		padding: 20px;
	}

	.pcj-tool-cl .pcj-tool-cl-generate {
		margin-bottom: 0;
	}
}

/* ---------------------------------------------------------------------
 * The editable letter
 * ------------------------------------------------------------------- */

.pcj-tool-cl .pcj-tool-cl-paper {
	border: 1px solid #d3ddd7;
	border-radius: 4px;
	background: #fff;
}

.pcj-tool-cl .pcj-tool-cl-letter {
	display: block;
	width: 100%;
	min-height: 420px;
	margin: 0;
	padding: 28px 24px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #1a2420;
	font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
	font-size: 16px;
	line-height: 1.65;
	resize: vertical;
	box-shadow: none;
}

.pcj-tool-cl .pcj-tool-cl-letter::placeholder {
	color: #7d8d86;
	font-family: inherit;
	opacity: 1;
}

.pcj-tool-cl .pcj-tool-cl-letter:focus {
	outline: 3px solid rgba(7, 136, 63, 0.35);
	outline-offset: 0;
}

@media (min-width: 600px) {
	.pcj-tool-cl .pcj-tool-cl-letter {
		padding: 40px 44px;
	}
}

@media (min-width: 1024px) {
	.pcj-tool-cl .pcj-tool-cl-letter {
		min-height: 0;
		height: calc(100vh - var(--pcj-header-offset, 0px) - 260px);
		max-height: 820px;
	}
}

/* ---------------------------------------------------------------------
 * The printed / PDF letter (built by the script into the print root)
 * ------------------------------------------------------------------- */

.pcj-tool-cl-document {
	color: #1a2420;
	font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
	font-size: 12pt;
	line-height: 1.55;
	text-align: left;
}

.pcj-tool-cl-document p {
	margin: 0 0 12pt;
	padding: 0;
	font-family: inherit;
	orphans: 3;
	widows: 3;
}

@media print {
	@page {
		margin: 22mm 22mm;
	}

	.pcj-tool-cl-document p:last-child {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}