@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
	/* Base palette */
	--background: #2a2a2e;
	--dark: #283649;
	--light: #9c7843;
	--white: #ffffff;
	--black: #000000;

	/* Panel backgrounds */
	--panel-dark: var(--dark);
	--panel-light: var(--white);

	/* Component colors — dark and light variants, all fall back to base palette */
	--text-dark:        var(--white);
	--text-light:       var(--black);
	--link-dark:        var(--white);
	--link-light:       var(--black);
	--header-border-dark:  var(--white);
	--header-border-light: var(--black);
	--name-dark:        var(--white);
	--name-light:       var(--dark);
	--position-dark:    var(--light);
	--position-light:   var(--light);
	--header-dark:      var(--light);
	--header-light:     var(--black);
	--border-dark:      var(--light);
	--border-light:     var(--light);
	--icon-dark:        var(--light);
	--icon-light:       var(--light);
	--timeline-dark:    var(--light);
	--timeline-light:   var(--light);
	--badge-dark:       var(--light);
	--badge-light:      var(--light);
	--badge-text-dark:  var(--white);
	--badge-text-light: var(--white);
	--button-dark:           var(--light);
	--button-light:          var(--light);
	--button-text-dark:      var(--black);
	--button-text-light:     var(--black);

	--normal-font: "Roboto", sans-serif;
	--condensed-font: "Roboto Condensed", sans-serif;
	--mono-font: "Roboto Mono", sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: var(--background);
	font-family: var(--normal-font);
	font-weight: 300;
	print-color-adjust: exact;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

code {
	font-family: var(--mono-font);
}

main {
	max-width: 60rem;
	display: grid;
	grid-template-columns: 1fr;
	text-align: justify;
	hyphens: auto;

	> * {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
		background-color: var(--bg);
		color: var(--text);

		a {
			color: var(--link);
		}

		.section-header {
			color: var(--header);
			border-bottom-color: var(--header-border);
		}
	}

	> :nth-child(-n + 2) {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}

	:focus {
		outline: var(--border) solid;
	}
}

.photo img,
.photo svg {
	width: 100%;
	border-radius: 50%;
}

.contact-list {
	div {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-right: 0;
	}

	span {
		flex: 1;
		padding: 5px 0;
		border-bottom: 1px solid var(--border);
	}

	div:last-child span {
		border-bottom: none;
	}

	svg {
		flex-shrink: 0;
		width: 14px;
		height: 14px;
		color: var(--icon);
	}
}

section {
	margin-bottom: 20px;
}

.section-header {
	font-family: var(--condensed-font);
	font-size: 1.17em;
	text-transform: uppercase;
	border-bottom: 1px solid;
	margin: 0 0 20px 0;
}

.main-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;

	> :first-child {
		flex: 1 1 auto;
	}

	.contact-list {
		flex: 0 0 max-content;
	}
}

.title, h1 {
	font-family: var(--condensed-font);
	font-weight: bold;
	color: var(--name);
	font-size: 2.5em;
}

h1 {
	text-transform: uppercase;
}

.position {
	font-family: var(--condensed-font);
	font-weight: bold;
	text-transform: uppercase;
	color: var(--position);
	font-size: 1.5em;
}

.additional-info {
	display: flex;
	flex-direction: column;
}

.connect {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;

	a {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	svg {
		flex-shrink: 0;
		width: 14px;
		height: 14px;
	}
}

.timeline {
	display: grid;
	grid-template-columns: 1fr 2fr;

	> * {
		padding-bottom: 20px;
	}

	> :nth-child(2n) {
		padding-left: 20px;
	}

	> :nth-child(2n + 1) {
		padding-right: 20px;
		border-right: 1px solid var(--timeline);
		text-align: right;
		position: relative;

		strong {
			text-transform: uppercase;
		}

		&::after {
			content: "";
			position: absolute;
			top: 7px;
			right: -0.5px;
			width: 14px;
			height: 14px;
			background-color: var(--timeline);
			border-radius: 50%;
			transform: translate(50%, -50%);
		}
	}

	.badge-list {
		margin-top: 8px;
		justify-content: end;
	}
}

.badge-list {
	gap: 4px;
	display: flex;
	flex-wrap: wrap;
}

.badge-list > * {
	background-color: var(--badge);
	color: var(--badge-text);
	border-radius: 0.5em;
	text-align: center;
	padding: 3px 5px;
	font-size: small;
}

.cv-gen {
	display: none;
	margin-top: auto;

	form {
		display: flex;
		gap: 10px;

		input {
			flex-grow: 1;
			padding: 6px 10px;
			border-radius: 0.5em;
			border: none;
		}

		button {
			padding: 6px 10px;
			border-radius: 0.5em;
			border: none;
			color: var(--button-text);
			background-color: var(--button);
			cursor: pointer;
		}

		button:hover {
			outline: var(--button) solid;
		}
	}
}

.cv-gen-error {
	margin-top: 8px;
	color: #e07070;
}

.placeholder {
	opacity: 0.35;
	font-style: italic;
}

/* Default: dark */
main > * {
	--bg:            var(--panel-dark);
	--text:          var(--text-dark);
	--link:          var(--link-dark);
	--name:          var(--name-dark);
	--position:      var(--position-dark);
	--header:        var(--header-dark);
	--header-border: var(--header-border-dark);
	--border:        var(--border-dark);
	--icon:          var(--icon-dark);
	--timeline:      var(--timeline-dark);
	--badge:         var(--badge-dark);
	--badge-text:    var(--badge-text-dark);
	--button:        var(--button-dark);
	--button-text:   var(--button-text-dark);
}

/* Light preference override */
@media (prefers-color-scheme: light) {
	main > * {
		--bg:            var(--panel-light);
		--text:          var(--text-light);
		--link:          var(--link-light);
		--name:          var(--name-light);
		--position:      var(--position-light);
		--header:        var(--header-light);
		--header-border: var(--header-border-light);
		--border:        var(--border-light);
		--icon:          var(--icon-light);
		--timeline:      var(--timeline-light);
		--badge:         var(--badge-light);
		--badge-text:    var(--badge-text-light);
		--button:        var(--button-light);
		--button-text:   var(--button-text-light);
	}
}

/* === Desktop / print === */

@media (min-width: 80rem) {
	.cv-gen {
		display: block;
	}
}

@media (min-width: 80rem), print {
	main {
		grid-template-columns: 1fr 2fr;
	}

	main > :nth-child(2n + 1) {
		--bg:            var(--panel-dark);
		--text:          var(--text-dark);
		--link:          var(--link-dark);
		--name:          var(--name-dark);
		--position:      var(--position-dark);
		--header:        var(--header-dark);
		--header-border: var(--header-border-dark);
		--border:        var(--border-dark);
		--icon:          var(--icon-dark);
		--timeline:      var(--timeline-dark);
		--badge:         var(--badge-dark);
		--badge-text:    var(--badge-text-dark);
		--button:        var(--button-dark);
		--button-text:   var(--button-text-dark);
	}

	main > :nth-child(2n) {
		--bg:            var(--panel-light);
		--text:          var(--text-light);
		--link:          var(--link-light);
		--name:          var(--name-light);
		--position:      var(--position-light);
		--header:        var(--header-light);
		--header-border: var(--header-border-light);
		--border:        var(--border-light);
		--icon:          var(--icon-light);
		--timeline:      var(--timeline-light);
		--badge:         var(--badge-light);
		--badge-text:    var(--badge-text-light);
		--button:        var(--button-light);
		--button-text:   var(--button-text-light);
	}

	.main-info {
		flex-wrap: nowrap;
		gap: 0;

		> :first-child {
			flex: 1 1 0;
		}
	}

	.contact-list {
		div {
			margin-right: -2.5rem;
		}

		span {
			padding-right: 2.5rem;
		}
	}

	.section-header {
		margin-right: -2.5rem;
	}
}

@media print {
	html, body {
		height: 100%;
	}

	main {
		max-width: none;
		min-height: 100%;
		grid-template-rows: auto 1fr;
	}

	.cv-gen {
		display: none !important;
	}
}