/* cv.css — print + screen styles for Jeroen Derks' CV.
   Used by both the browser (via cv.html with SSI base href) and WeasyPrint
   (offline render via bin/render-cv.py). All references in HTML are document-
   relative so both modes resolve correctly.
*/

/* ===== Base typography ===== */

html {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
	font-size: 11pt;
	line-height: 1.4;
	color: #1a1a1a;
	background: #fff;
}

body {
	margin: 0;
	padding: 0;
}

a:link,
a:visited {
	color: #035;
	text-decoration: underline;
}

a:hover,
a:focus {
	text-decoration: none;
}

p {
	margin: 0 0 0.6em 0;
}

small {
	font-size: 0.9em;
	color: #555;
}

/* ===== Layout ===== */

main#cv-document {
	max-width: 800px;
	margin: 0 auto;
	padding: 1.5em;
}

/* ===== Headings ===== */

h1 {
	font-size: 1.8em;
	font-weight: bold;
	margin: 0 0 0.2em 0;
	line-height: 1.2;
}

h2 {
	font-size: 1.3em;
	font-weight: bold;
	margin: 1.4em 0 0.5em 0;
	padding-bottom: 0.15em;
	border-bottom: 1px solid #888;
}

h3 {
	font-size: 1.05em;
	font-weight: bold;
	margin: 0.8em 0 0.3em 0;
}

/* ===== Header ===== */

.cv-header {
	margin-bottom: 1em;
}

.cv-credentials {
	margin: 0 0 0.3em 0;
	font-weight: 600;
	color: #444;
}

.cv-contact {
	margin: 0 0 0.3em 0;
}

.cv-contact a {
	color: inherit;
}

.cv-download {
	margin: 0.5em 0 0 0;
}

/* ===== Skills ===== */

.skill-list {
	list-style: none;
	margin: 0 0 0.6em 0;
	padding: 0;
	/* Flow chips horizontally with wrap; `gap` controls inter-chip spacing
	   in both axes so we don't need per-item margin. */
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 0.35em;
}

.skill-list li {
	background: #eef2f5;
	border: 1px solid #d0d8df;
	border-radius: 3px;
	padding: 0.1em 0.5em;
	font-size: 0.92em;
}

/* ===== Experience ===== */

.job {
	margin: 0 0 1em 0;
	page-break-inside: avoid;
	break-inside: avoid;
}

.job-title {
	margin: 0;
}

.job-meta {
	margin: 0 0 0.3em 0;
	color: #555;
	font-size: 0.95em;
}

.job-company {
	font-weight: 600;
	color: #1a1a1a;
}

/* Visual separator between job-meta sub-items (company · location · period).
   Using ::before content rather than margin-left so the separator renders
   reliably across browsers and WeasyPrint regardless of inline-margin
   collapsing behavior. NBSP (\00A0) on both sides to prevent whitespace
   collapsing — regular spaces would collapse into the trailing text. */
.job-location::before,
.job-period::before {
	content: "\00A0\00B7\00A0";
	color: #999;
}

.job-role {
	margin: 0 0 0.3em 0;
	font-style: italic;
}

.job-description {
	margin: 0 0 0.4em 0;
}

.job-bullets {
	margin: 0.3em 0 0.4em 1.5em;
	padding: 0;
}

.job-bullets li {
	margin-bottom: 0.15em;
}

.job-tech {
	margin: 0 0 0.4em 0;
}

.job-tech small {
	color: #555;
}

/* Amazon affiliate tracking pixels — 1×1, invisible. Suppress any border
   or margin a UA stylesheet might apply. Targeting by attribute selector
   avoids needing a class on each pixel in cv_data.inc. */
img[width="1"][height="1"] {
	border: 0;
	margin: 0;
}

/* ===== Certifications ===== */

.cert-list {
	list-style: disc;
	margin: 0 0 0.6em 1.5em;
	padding: 0;
}

.cert-list li {
	margin-bottom: 0.2em;
	page-break-inside: avoid;
	break-inside: avoid;
}

.cert-name {
	font-weight: 600;
}

.cert-issuer {
	color: #444;
}

/* ===== Activities ===== */

.activities-list {
	list-style: disc;
	margin: 0 0 0.6em 1.5em;
	padding: 0;
}

.activities-list li {
	margin-bottom: 0.5em;
}

/* ===== Languages ===== */

dl.languages {
	margin: 0;
	padding: 0;
}

dl.languages dt {
	font-weight: 600;
	float: left;
	width: 8em;
	clear: left;
}

dl.languages dd {
	margin: 0 0 0.2em 8em;
}

/* ===== Education ===== */

#education article {
	margin-bottom: 0.6em;
}

/* ===== Mobile breakpoint ===== */

@media screen and (max-width: 600px) {
	html {
		font-size: 12pt;
	}
	main#cv-document {
		padding: 1em;
	}
	.skill-list li {
		display: block;
		margin-right: 0;
	}
	dl.languages dt {
		float: none;
		width: auto;
	}
	dl.languages dd {
		margin-left: 0;
	}
}

/* ===== Paged Media (WeasyPrint) ===== */

@page {
	size: A4;
	margin: 1.5cm;

	@bottom-left {
		content: "Jeroen Derks — Curriculum Vitae";
		font-size: 9pt;
		color: #666;
	}

	@bottom-right {
		content: "Page " counter(page) " of " counter(pages);
		font-size: 9pt;
		color: #666;
	}
}

@page :first {
	@bottom-left {
		content: "Jeroen Derks — Curriculum Vitae";
		font-size: 9pt;
		color: #666;
	}
}

@media print {
	html {
		font-size: 10pt;
	}
	body {
		color: #000;
	}
	main#cv-document {
		max-width: none;
		margin: 0;
		padding: 0;
	}
	a:link,
	a:visited {
		color: inherit;
		text-decoration: underline;
	}
	.noprint {
		display: none;
	}
	.job,
	.cert-list li,
	dl.languages {
		page-break-inside: avoid;
		break-inside: avoid;
	}
	h2 {
		page-break-after: avoid;
		break-after: avoid;
	}
	/* In print, drop the flex chip styling and render skills as
	   comma-separated inline text to save vertical space. Reset the
	   parent so children flow as inline text. */
	.skill-list {
		display: block;
		gap: 0;
	}
	.skill-list li {
		display: inline;
		background: none;
		border: none;
		padding: 0;
		margin: 0;
	}
	.skill-list li::after {
		content: ", ";
	}
	.skill-list li:last-child::after {
		content: "";
	}
}