@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/Figtree-Light.woff2") format("woff2"),
		url("../fonts/Figtree-Light.woff") format("woff");
}

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/Figtree-Regular.woff2") format("woff2"),
		url("../fonts/Figtree-Regular.woff") format("woff");
}

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/Figtree-Medium.woff2") format("woff2"),
		url("../fonts/Figtree-Medium.woff") format("woff");
}

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/Figtree-SemiBold.woff2") format("woff2"),
		url("../fonts/Figtree-SemiBold.woff") format("woff");
}

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/Figtree-Bold.woff2") format("woff2"),
		url("../fonts/Figtree-Bold.woff") format("woff");
}

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/Figtree-ExtraBold.woff2") format("woff2"),
		url("../fonts/Figtree-ExtraBold.woff") format("woff");
}

@font-face {
	font-family: "Pliant";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/pliant-regular.woff2") format("woff2"),
		url("../fonts/pliant-regular.woff") format("woff");
}

@font-face {
	font-family: "Pliant";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/pliant-medium.woff2") format("woff2"),
		url("../fonts/pliant-medium.woff") format("woff");
}

@font-face {
	font-family: "Pliant";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/pliant-semibold.woff2") format("woff2"),
		url("../fonts/pliant-semibold.woff") format("woff");
}

@font-face {
	font-family: "Pliant";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/pliant-bold.woff2") format("woff2"),
		url("../fonts/pliant-bold.woff") format("woff");
}

.klc-document-body {
	--klc-doc-ink: #1b1a19;
	--klc-doc-copper: #c7642a;
	--klc-doc-copper-dark: #9c4a1d;
	--klc-doc-line: rgba(27, 26, 25, 0.12);
	background: #efe7de;
	color: var(--klc-doc-ink);
	font-family: "Figtree", "Pliant", system-ui, sans-serif;
	margin: 0;
}

.klc-document-toolbar {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	padding: 1.25rem 1.25rem 0;
}

.klc-document-shell {
	padding: 1rem 1.25rem 2rem;
}

.klc-document-page {
	background: #fff;
	box-shadow: 0 24px 70px rgba(31, 24, 18, 0.15);
	margin: 0 auto;
	max-width: 210mm;
	min-height: 297mm;
	padding: 30mm 18mm 28mm;
	position: relative;
}

.klc-document-page--template {
	padding: 0;
}

.klc-document-page--template::before,
.klc-document-page--template::after {
	display: none;
}

.klc-document-template-page {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 297mm;
	position: relative;
	width: 210mm;
}

.klc-document-template-field {
	color: #111;
	left: 0;
	line-height: 1.25;
	position: absolute;
	top: 0;
	white-space: pre-line;
	word-break: break-word;
}

.klc-document-page::before {
	background:
		linear-gradient(90deg, #1b1a19 0%, #3e2c22 38%, #c7642a 100%);
	content: "";
	height: 22mm;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.klc-document-page::after {
	background:
		linear-gradient(90deg, #c7642a 0%, #3e2c22 62%, #1b1a19 100%);
	bottom: 0;
	content: "";
	height: 14mm;
	left: 0;
	position: absolute;
	right: 0;
}

.klc-document-header {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2rem;
	padding-top: 2mm;
}

.klc-document-header__brand {
	align-items: center;
	display: flex;
	gap: 1rem;
}

.klc-document-header__logo {
	align-items: center;
	background: linear-gradient(135deg, #1b1a19 0%, #c7642a 100%);
	border-radius: 1rem;
	color: #fff;
	display: inline-flex;
	font-size: 1.05rem;
	font-weight: 800;
	height: 3.2rem;
	justify-content: center;
	letter-spacing: 0.08em;
	width: 3.2rem;
}

.klc-document-header__title {
	font-size: 1.3rem;
	font-weight: 800;
}

.klc-document-header__subtitle {
	color: var(--klc-doc-copper-dark);
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.klc-document-header__meta {
	display: grid;
	gap: 0.8rem;
	min-width: 12rem;
}

.klc-document-header__meta span,
.klc-document-grid span,
.klc-document-textblock span {
	color: rgba(27, 26, 25, 0.55);
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 0.22rem;
	text-transform: uppercase;
}

.klc-document-header__meta strong,
.klc-document-grid strong {
	display: block;
	font-size: 0.96rem;
	font-weight: 700;
}

.klc-document-section {
	margin-bottom: 1.55rem;
	page-break-inside: avoid;
}

.klc-document-section h2 {
	border-bottom: 1px solid var(--klc-doc-line);
	font-size: 1.02rem;
	font-weight: 800;
	margin: 0 0 0.9rem;
	padding-bottom: 0.45rem;
}

.klc-document-grid {
	display: grid;
	gap: 0.7rem;
}

.klc-document-grid--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.klc-document-grid--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.klc-document-grid div,
.klc-document-textblock {
	background: rgba(244, 239, 232, 0.54);
	border: 1px solid var(--klc-doc-line);
	border-radius: 0.9rem;
	padding: 0.85rem 0.95rem;
}

.klc-document-textblock p {
	line-height: 1.58;
	margin: 0;
}

.klc-document-uploads {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding-left: 1.1rem;
}

.klc-document-uploads a {
	color: var(--klc-doc-copper-dark);
	font-weight: 700;
	text-decoration: none;
}

.klc-document-footer {
	bottom: 4mm;
	color: #fff;
	display: flex;
	font-size: 0.76rem;
	font-weight: 600;
	justify-content: space-between;
	left: 18mm;
	position: absolute;
	right: 18mm;
	z-index: 1;
}

.klc-document-message {
	padding: 3rem 1rem;
	text-align: center;
}

@page {
	margin: 0;
	size: A4;
}

@media print {
	html,
	body {
		background: #fff;
		margin: 0;
		padding: 0;
	}

	body.klc-document-body {
		background: #fff !important;
	}

	.klc-document-toolbar {
		display: none !important;
	}

	.klc-document-shell {
		padding: 0;
	}

	.klc-document-page {
		box-shadow: none;
		margin: 0;
		max-width: 210mm;
		min-height: 297mm;
		width: 210mm;
	}

	.klc-document-template-page {
		height: 297mm;
		width: 210mm;
	}

	.klc-document-header {
		display: flex !important;
		gap: 1.5rem;
		justify-content: space-between;
	}

	.klc-document-footer {
		display: flex !important;
		gap: 1rem;
		justify-content: space-between;
	}

	.klc-document-grid--two {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.klc-document-grid--three {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.klc-document-section {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.klc-document-page,
	.klc-document-page::before,
	.klc-document-page::after {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

@media screen and (max-width: 900px) {
	.klc-document-header,
	.klc-document-footer {
		display: grid;
		gap: 0.8rem;
	}

	.klc-document-grid--two,
	.klc-document-grid--three {
		grid-template-columns: 1fr;
	}
}
