/*
	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;
	transition: opacity 0.2s ease-in-out;
}

ul.icons li .icon:hover svg {
	opacity: 0.65;
}

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

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

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

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

.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;
}