/* font */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif&display=swap");

/* https://css-tricks.com/box-sizing/#aa-universal-box-sizing-with-inheritance */
html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

/* defaults */
:root {
	--font-family: "IBM Plex Serif", serif;
	--size: 1.5rem;
	--size-container: 40rem;
	--size-font: 19px;
	--size-font--h1: 1.9rem;
	--size-font--s1: 0.7rem;
}
@media (prefers-color-scheme: dark) {
	:root {
		--c-bg: black;
		--c-fg: whitesmoke;
		--c-link: chartreuse;
		--c-link--active: var(--c-purple);
		--c-accent: aqua;
	}
}
@media (prefers-color-scheme: light) {
	:root {
		--c-bg: snow;
		--c-fg: black;
		--c-link: blue;
		--c-link--active: darkgreen;
		--c-accent: purple;
	}
}

html {
	font-size: var(--size-font);
	font-family: var(--font-family);
	color: var(--c-fg);
	background-color: var(--c-bg);
	transition: background-color 333ms ease-in-out;
}
a,
a:visited,
a:focus {
	color: var(--c-link);
}
a:hover {
	color: var(--c-link--active);
}
h1,
h2,
h3 {
	margin: 0;
}
h1 {
	font-size: var(--size-font--h1);
}

/* layout */
html,
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
body {
	margin: 0;
	align-items: center;
}
body-header,
body-main {
	max-width: var(--size-container);
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: calc(var(--size) / 2);
}
body-header {
	align-items: center;
	text-align: center;
}
body-header a {
	text-decoration: none;
}
body-header h1::before,
body-header h1::after {
	content: "";
}
body-header h1::before {
	content: "<";
}
body-header h1::after {
	content: "/>";
}
body-main {
	flex-grow: 1;
}
summary {
	cursor: pointer;
}
menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
}
menu li {
	display: flex;
}
menu a {
	padding: calc(var(--size) / 3);
}

code {
	background-color: var(--c-link);
	color: var(--c-bg);
	padding: 0.1rem;
}

/* the job-boards "builder" component */
joblist-boards {
	margin-top: var(--size);
	display: flex;
	flex-direction: column;
}
joblist-boards form {
	display: flex;
	position: sticky;
	top: 0;
	padding: calc(var(--size) / 3);
	background-color: var(--c-bg);
}
joblist-boards input,
joblist-boards select {
	padding: calc(var(--size) / 3);
}

joblist-boards input {
	flex-grow: 1;
	width: 100%;
	background-color: transparent;
	color: var(--c-fg);
}
joblist-boards details {
	margin-top: calc(var(--size) / 2);
	display: flex;
	flex-direction: column;
}
/* the copy paste input */
joblist-boards textarea {
	min-height: 5rem;
	white-space: pre-wrap;
	word-break: break-all;
	padding: var(--size);
	color: var(--c-accent);
	background-color: transparent;
	border: 1px solid var(--c-accent);
	margin-bottom: 0;
	margin-top: calc(var(--size) / 2);
	cursor: copy;
}

joblist-boards::before {
	display: block;
	text-align: right;
	margin-top: var(--size);
	font-style: italic;
	font-size: var(--size-font--s1);
	color: var(--c-fg);
}
joblist-boards[provider-hostname][provider-name]::before {
	content: "Copy this HTML code, into the HTML code of any webpage";
}
joblist-boards:not([provider-hostname]):not([provider-name])::before {
	content: "Snippet will be displayed below (fill in a provider name and hostname)";
}
joblist-boards:not([provider-name])::before {
	content: "Select a provider-name";
}
joblist-boards:not([provider-hostname])::before {
	content: "Enter a provider-hostname (can be found in the URL to the hosted job-board, from the provider hosted site)";
}

/* the job-list */
joblist-boards article {
	margin-top: var(--size);
}