/*
	Site additions on top of assets/css/main.css (HTML5 UP "Strata").
	Kept in a separate file so the template stylesheet stays untouched.
*/

/* Social icons -------------------------------------------------------------
   Inline SVG instead of the Font Awesome webfont: three icons, no 3 MB of
   fonts to ship and nothing that can break when a font file 404s. */

ul.icons li .icon svg {
	width: 1.5em;
	height: 1.5em;
	fill: currentColor;
	vertical-align: middle;
}

/* No opacity transition on hover. Animating opacity promotes the icon to its
   own compositing layer and it gets re-rasterised at a different subpixel
   offset, which reads as a 1px jump — worst on glyphs that do not fill their
   box. The colour change inherited from main.css is the hover effect, and it
   is what every other link on the site does anyway. */

/* Buttons with a leading icon ---------------------------------------------- */

.button .btn-icon {
	width: 1em;
	height: 1em;
	margin-right: 0.6em;
	vertical-align: -0.1em;
}

/* Conflicts of interest page ----------------------------------------------- */

/* Secondary half of a bilingual heading, e.g. Imprint (Impressum) */

.subtle {
	color: #999;
	font-weight: 300;
}

.coi-meta {
	font-size: 0.9em;
	color: #777;
}

/* The manuscript-ready paragraph. Styled as a distinct block because its job
   is to be read once and copied into a disclosure section. */

blockquote.coi-statement {
	border-left: solid 4px #dfdfdf;
	background: #fafafa;
	font-style: normal;
	padding: 1.25em 1.5em;
	margin: 0 0 1em 0;
	line-height: 1.8;
}

.coi-note {
	font-size: 0.85em;
	color: #777;
	margin-top: -0.75em;
}

.coi-hint {
	font-size: 0.85em;
	color: #888;
}

.coi-none {
	color: #777;
}

.coi-na {
	color: #777;
	font-style: italic;
}

.coi-table td {
	vertical-align: top;
}

@media screen and (min-width: 737px) {

	.coi-table th.coi-num,
	.coi-table tbody tr td:first-child {
		width: 2.5em;
		text-align: right;
		color: #999;
		white-space: nowrap;
	}

	.coi-table tbody tr td:last-child {
		width: 40%;
	}

}

ul.coi-entries {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.coi-entries li {
	padding: 0 0 0.5em 0;
}

ul.coi-entries li:last-child {
	padding-bottom: 0;
}

@media screen and (max-width: 736px) {

	/* A 3-column table cannot stay readable at this width, so each row becomes
	   a small labelled block: "1. Consulting fees" with the answer beneath. */

	/* The selectors below are deliberately specific: main.css styles
	   `table.alt tbody tr td` and would otherwise keep the cell borders. */

	table.coi-table,
	table.coi-table tbody {
		display: block;
		width: auto;
	}

	table.coi-table thead {
		display: none;
	}

	table.alt.coi-table tbody tr {
		display: flex;
		flex-wrap: wrap;
		width: auto;
		border-bottom: solid 2px #efefef;
		padding: 1.25em 0;
	}

	table.alt.coi-table tbody tr:last-child {
		border-bottom: 0;
	}

	table.alt.coi-table tbody tr td {
		display: block;
		border: 0;
		padding: 0;
		background: none;
		text-align: left;
	}

	table.alt.coi-table tbody tr td:first-child {
		flex: 0 0 auto;
		width: auto;
		margin-right: 0.4em;
		font-weight: 600;
		color: #777;
		white-space: nowrap;
	}

	table.alt.coi-table tbody tr td:first-child:after {
		content: '.';
	}

	table.alt.coi-table tbody tr td:nth-child(2) {
		flex: 1 1 0;
		min-width: 0;
	}

	table.alt.coi-table tbody tr td:last-child {
		flex: 0 0 100%;
		width: auto;
		padding-top: 0.6em;
	}

}

/* Draft banner — only rendered while coi-data.json is unverified ----------- */

.draft-banner {
	background: #fff8e1;
	border: solid 2px #f0c36d;
	border-radius: 0.35em;
	padding: 1em 1.25em;
	margin: 0 0 2em 0;
	font-size: 0.9em;
	line-height: 1.6;
}

.draft-banner code {
	font-size: 0.9em;
}