/* Module design – customisations layered on the HTML5 UP Photon template.
   Everything here is additive; main.css is the untouched template stylesheet. */

/* ---------- Banner (Photon's #header, with a photograph beneath the gradient) ----------
   --md-photo is set inline on each page; url()s inside a custom property resolve against this
   stylesheet, hence the ../../images/ paths. */
#header.md-banner {
	padding: 8em 0 6.5em 0;
	background-attachment: fixed, fixed, fixed, fixed;
	background-image: url("images/overlay2.png"), url("images/overlay3.svg"),
		linear-gradient(45deg, rgba(157, 198, 107, 0.86) 5%, rgba(79, 164, 154, 0.88) 30%, rgba(67, 97, 194, 0.92)),
		var(--md-photo);
	background-position: top left, center center, center center, center center;
	background-size: auto, cover, cover, cover;
}
#header.md-banner:not(.md-home) .inner { padding: 0 1.5em; }
#header.md-banner:not(.md-home) h1 {
	font-size: 2.3em;
	line-height: 1.25;
	margin: 0 auto;
	max-width: 22em;
}
#header.md-banner .md-eyebrow { color: rgba(255, 255, 255, 0.9); margin: 0 0 1em 0; }
#header.md-banner .md-meta { color: rgba(255, 255, 255, 0.85); font-size: 0.9em; margin: 1.25em 0 0 0; }
#header.md-home { padding: 9em 0 8.5em 0; }
#header .md-credit {
	bottom: 1em; right: 1.5em; position: absolute; z-index: 2;
	color: rgba(255, 255, 255, 0.85); font-size: 0.65em; letter-spacing: 0.02em;
}
#header .md-credit a { border-bottom: dotted 1px rgba(255, 255, 255, 0.6); color: inherit; }
#header .md-back {
	border: 0; color: #fff; font-size: 0.8em; left: 2em; letter-spacing: 0.1em; position: absolute;
	text-transform: uppercase; top: 1.75em; z-index: 3;
}
#header .md-back:hover { color: #fff; opacity: 0.8; }
#header .md-back .icon { margin-right: 0.5em; }
#header .md-back .icon:before { font-size: 0.9em; }

/* ---------- Small labels ---------- */
.md-eyebrow {
	color: #4fa49a; font-size: 0.75em; font-weight: 400; letter-spacing: 0.2em; margin: 0 0 0.75em 0;
	text-transform: uppercase;
}
.main.style2 .md-eyebrow { color: rgba(255, 255, 255, 0.85); }
.md-meta { color: #909090; font-size: 0.85em; margin: 0 0 1.25em 0; }
.main.style2 .md-meta { color: rgba(255, 255, 255, 0.8); }
.md-credit-under { color: #909090; font-size: 0.65em; margin: -1.5em 0 0 0; text-align: right; }

/* ---------- Article body ---------- */
#content .md-prose { max-width: 46em; }
#content h2 { margin: 1.75em 0 0.6em 0; }
#content h2:first-child { margin-top: 0; }
#content > .container > *:last-child { margin-bottom: 0; }
#content blockquote { font-size: 1.1em; }
#content blockquote p { margin: 0 0 0.75em 0; }
#content blockquote cite { color: #909090; display: block; font-size: 0.85em; font-style: normal; text-align: left; }
#content blockquote cite:before { content: '\2014\00a0'; }
#content ul.actions.special { margin: 2.5em 0 1em 0; }
#content .table-wrapper table td { vertical-align: top; }
.md-figure { margin: 0 0 2em 0; text-align: center; }
.md-figure img { border-radius: 4px; height: auto; max-width: 100%; }
.md-figure figcaption { color: #909090; font-size: 0.8em; font-style: italic; margin-top: 0.75em; }

/* ---------- Previous / next band ---------- */
.md-pager { padding: 4em 0 3em 0; }
.md-pager .container { max-width: 62em; }
.md-pager .button { height: auto; line-height: 1.5; padding: 0.9em 1.75em; white-space: normal; }
.md-pager ul.actions { flex-wrap: wrap; justify-content: center; margin-bottom: 0; }
.md-pager ul.actions li { padding-bottom: 0.75em; }

/* ---------- Contents tiles ---------- */
.md-tile h3 { margin-bottom: 0.4em; }
.md-tile h3 a { border-bottom: 0; color: inherit; }
.md-tile h3 a:hover { color: #4fa49a; }
.md-tile .image a { border-bottom: 0; display: block; }
.md-tile .image img { transition: transform 0.35s ease, opacity 0.35s ease; width: 100%; }
.md-tile .image { overflow: hidden; }
.md-tile .image a:hover img { opacity: 0.9; transform: scale(1.04); }
.md-tile .md-eyebrow { margin-top: 0.5em; }

/* ---------- Footer ---------- */
#footer .md-attribution { color: rgba(255, 255, 255, 0.85); font-size: 0.85em; margin: 1.75em auto 0 auto; max-width: 44em; }
#footer .md-cc { margin-bottom: 0; }
#footer .copyright li { line-height: 1.6em; }
#footer .copyright { line-height: 1.6; }
.md-cc-dark { margin: 1.5em 0 0 0; }
.md-cc-dark li .icon.alt { color: #4fa49a !important; }
.md-cc-dark li .icon.alt:before { color: #4fa49a; }
.md-cc-dark li .icon:hover:before { color: #4361c2; }

@media screen and (max-width: 980px) {
	#header.md-banner { padding: 7em 2em 6em 2em; background-attachment: scroll; }
	#header.md-home { padding: 7em 2em 6em 2em; }
	#header.md-banner:not(.md-home) h1 { font-size: 1.9em; }
	.md-credit-under { margin-top: 0.5em; text-align: center; }
	#footer .copyright li { display: block; border-left: 0; margin: 0.25em 0 0 0; padding: 0; }
}
@media screen and (max-width: 736px) {
	#header.md-banner:not(.md-home) h1 { font-size: 1.5em; }
	#header .md-back { left: 1.25em; top: 1.25em; }
	#header .md-credit { left: 1.25em; right: 1.25em; text-align: right; }
	.md-pager { padding: 3em 1.5em 2em 1.5em; }
}

/* ---------- Photo bands: darken the photograph so white text stays readable ---------- */
.main.style2 {
	background-attachment: fixed, fixed, fixed;
	background-image: linear-gradient(rgba(28, 34, 52, 0.55), rgba(28, 34, 52, 0.55)), url("images/overlay1.png"), url("../../images/header.jpg");
	background-size: cover, auto, cover;
}
@media screen and (max-width: 1140px) {
	.main.style2 { background-attachment: scroll; }
}

/* ---------- Licence badge (Font Awesome stand-in for the 88x31 Creative Commons button) ---------- */
#content .md-badge { margin: 0 0 2em 0; text-align: center; }
#content .md-badge a { border-bottom: 0; }
#content .md-badge .icon { color: #4fa49a; font-size: 2.4em; margin: 0 0.15em; }
#content .md-badge a:hover .icon { color: #4361c2; }

/* ---------- Wrapping buttons (higher specificity than the template's small-screen rules) ---------- */
#pager.md-pager ul.actions li .button {
	height: auto; line-height: 1.5; padding: 0.9em 1.75em; white-space: normal;
}