:root {
	--nav-backcolor: hsl(215, 38%, 94%, 75%);
	--nav-linkcolor: hsl(209, 63%, 25%);
	--nav-highcolor: hsl(215, 38%, 94%);
	--footer-backcolor: hsl(86, 31%, 58%);
	--red-highlight: hsl(32, 40%, 59%);
}

/* make sizes sensible */
html {
	box-sizing: border-box;
}

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

/* general */
a,
a:link {
	color: var(--nav-linkcolor);
}

a:visited,
a:hover,
a:active {
	color: var(--red-highlight);
}

span.citation {
	font-size: 0.9em;
}

span.nobreak {
	white-space: nowrap;
}

.filename {
	margin-left: 0.5em;
	font-family: monospace;
}

.file-pdf::before {
	content: url("/public/20260127202246oe_/https://petalnet.org/img/icons/application/pdf.svg");

	display: inline-block;

	width: 1em;
	margin-right: 0.25em;

	text-decoration: none;
	vertical-align: middle;
}

/* body */
body {
	max-width: 90ch;
	margin-inline: auto;
	padding-inline: 1ch;
	line-height: 1.5;
}

body {
	display: grid;
	grid-auto-flow: row;
	grid-template-areas: "header header" "nav body" "footer footer";
	grid-template-columns: fit-content(20ch) 1fr;
	grid-template-rows: min-content fit-content fit-content;
	column-gap: 1rem;
}

@media only screen and (max-width: 60ch) {
	body {
		display: grid;
		grid-template-areas: "header" "body" "nav" "footer";
		grid-template-columns: 1fr;
		grid-template-rows: min-content fit-content fit-content fit-content;
	}
}

/* grid areas */
body>header {
	grid-area: header;
}

body>nav {
	grid-area: nav;
}

body>main {
	grid-area: body;
}

body>footer {
	grid-area: footer;
}

/* header */
header {
	position: relative;
	overflow: visible;
	padding-bottom: 20%;
}

header h1 {
	display: none;
}

header img {
	position: absolute;
	z-index: -1;
	max-width: 100%;
}

header a.header-link {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
}

/* nav */
nav {
	background-color: var(--nav-backcolor);
}

nav>ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

nav>ul>li {
	height: 2rem;
	padding: 0;
	border: 0;
}

nav>ul>li>a,
nav>ul>li>a:link,
nav>ul>li>a:visited {
	display: block;

	width: 100%;
	padding: 1ch;

	font-family: sans-serif;
	font-size: 0.9rem;
	color: var(--nav-linkcolor);
	text-decoration: none;
}

nav>ul>li.current>a {
	color: var(--nav-highcolor);
	background-color: var(--nav-linkcolor);
}

nav>ul>li>a:hover {
	color: var(--nav-highcolor);
	background-color: var(--nav-linkcolor);
}

/* main */
main {
	background: url("/public/20260127202246oe_/https://petalnet.org/img/dna.png") bottom left no-repeat;
}

@media only screen and (max-width: 60ch) {
	main {
		background-color: white;
	}
}

main h1,
main h2,
main h3 {
	margin-block: 0 1rem;
	margin-inline: -1ch;
	padding-inline: 1ch;

	color: white;

	background-color: var(--nav-linkcolor);
}

main p {
	margin-block: 0 1rem;
}

/* footer */
footer {
	padding: 1ch;
	color: white;
	background-color: var(--footer-backcolor);
}

footer>p {
	margin: 0;
}

/* Participating sites page */
ul.site-list {
	margin-block: 0 1rem;
	padding-left: 2rem;
	list-style: none;
}

/* Network studies page */
nav>ul.studies-studies {
	margin-top: 1rem;
}

nav>ul.studies-studies>li.heading {
	display: block;

	width: 100%;
	padding: 1ch;

	font-family: sans-serif;
	font-size: 0.9rem;

	background-color: var(--footer-backcolor);
}

section.study {
	margin-bottom: 3rem;
	margin-inline: -0.5rem;
	padding: 0.5rem;
	background: linear-gradient(to bottom right, gainsboro, white 40%);
}
section.study:last-of-type {
	background: linear-gradient(to bottom right, gainsboro, white 40%, rgba(255,255,255,0.1) 20%);
}

section.study:target {
	background: linear-gradient(to bottom right, var(--red-highlight), white 40%);
}

section.study h4 {
	margin-block: 0 0.5rem;
}

section.study p.study-dates {
	margin-block: 0 0.5rem;
	font-size: 0.9em;
}

section.study p.study-dates::before {
	content: '\1F4C5\2007';
}

section.study h4+p.study-dates {
	margin-top: -0.4rem;
}

section.study div.study-desc p {
	margin-block: 0 1rem;
}

section.study dl.study-links {
	display: grid;
	grid-template-columns: fit-content(15ch) 1fr;
	gap: 1rem;
	align-items: baseline;

	margin-left: 1rem;
	margin-block: 0 1rem;
}

section.study dl.study-links dt.item-title {
	font-size: 0.9em;
}

section.study dl.study-links dd.item-value {
	margin: 0;
	padding: 0;
}

section.study span.study-pub-title {
	display: block;
	font-style: italic;
}

section.study span.study-pub-citation {
	display: block;
}

h3.site-type {
	margin-block: 0 0.5rem;
}

h4.site-group {
	margin-block: 0 0.5rem;
}

/* Bibliography */
div.listjs-search-container {
	margin-right: -0.5rem;
	margin-bottom: 0.25rem;
	text-align: right;
}

div.listjs-search-container input {
	width: 50%;
}

ul#bibliolist {
	margin-top: 0;
	padding: 0;
	list-style: none;
}

ul#bibliolist li.yearseparator {
	margin-block: 0.5rem;
	margin-inline: -0.5rem;
	padding-inline: 0.5rem;

	font-weight: bold;
	line-height: 2rem;

	background-color: var(--footer-backcolor);
}

ul#bibliolist li.yearseparator:first-of-type {
	margin-top: 0;
}

li.nbib {
	margin-block: 0.5rem;
}

.nbib-aucn {
	font-size: 0.9em;
	color: #555;
}

.nbib-ti {
	font-weight: bold;
}

.nbib-so {
	color: #555;
}

.nbib-doi,
.nbib-pmid,
.nbib-pmc {
	white-space: nowrap;
}

p.listjs-attribution {
	font-size: 0.8em;
	font-style: italic;
	text-align: right;
}
