/*
	Teaching in a Digital Age (V2) -- extensions to the Paradigm Shift template.
	Paradigm Shift by HTML5 UP (html5up.net | @ajlkn), CCA 3.0.
	Palette recoloured to a deep purple accent (#502380); everything here layers on
	top of main.css, nothing in main.css is edited beyond the accent colour swap.
*/

/* Header text sits on the purple accent rail (desktop) / accent block (mobile) --- */

	#wrapper > section.intro > header,
	#wrapper > section.intro > header h1,
	#wrapper > section.intro > header p,
	#wrapper > section.intro > header a,
	#wrapper > section > header,
	#wrapper > section > header h1,
	#wrapper > section > header h2,
	#wrapper > section > header p,
	#wrapper > section > header a {
		color: #ffffff;
	}

	#wrapper > section > header .v2-eyebrow { color: rgba(255, 255, 255, 0.7); }

	/* On narrow viewports the header column becomes full-width and a long single
	   word (e.g. a chapter title like "Fundamental") can be wider than the screen
	   at the template's large h1 size; let it break there rather than clip off
	   the edge. Desktop keeps the template's normal word-wrapping, where the
	   header column is narrow by design (titles stack one or two words per
	   line) and a hard break-word would needlessly split ordinary words mid-
	   syllable ("implications" -> "implicati" / "ons"). */
	@media screen and (max-width: 736px) {
		#wrapper > section.intro > header h1,
		#wrapper > section > header h1 {
			overflow-wrap: break-word;
			word-wrap: break-word;
			hyphens: auto;
		}
	}

	@media screen and (max-width: 480px) {
		#wrapper > section.intro > header h1,
		#wrapper > section > header h1 {
			font-size: 2.75rem;
			line-height: 1.15;
		}
	}

/* Pages with no figure to use as the intro hero image (e.g. Appendix 2,
   Bibliography) should not reserve a full viewport of blank space. --------- */

	#wrapper > section.intro.no-hero > .content {
		height: 0;
		min-height: 0;
	}

	#wrapper > section > header ul.actions a.button:not(.primary) {
		border-color: rgba(255, 255, 255, 0.55);
		color: #ffffff !important;
	}

	#wrapper > section > header ul.actions a.button:not(.primary):hover {
		background-color: rgba(255, 255, 255, 0.12);
	}

/* Chapter eyebrow / kicker ------------------------------------------------------ */

	.v2-eyebrow {
		display: block;
		font-family: "Raleway", Helvetica, sans-serif;
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.3em;
		text-transform: uppercase;
		opacity: 0.75;
		margin: 0 0 0.75rem 0;
	}

/* Purpose / "what's covered" box on the intro (sits over the purple rail) ------- */

	.v2-purpose {
		margin-top: 1.5rem;
		padding-top: 1.5rem;
		border-top: solid 1px rgba(255, 255, 255, 0.3);
		text-align: right;
	}

	.v2-purpose h4 {
		font-size: 0.75rem;
		letter-spacing: 0.2em;
		margin-bottom: 0.85rem;
		color: #ffffff;
	}

	.v2-purpose ul { list-style: none; margin: 0; padding: 0; }
	.v2-purpose li {
		font-size: 0.8rem;
		line-height: 1.6;
		margin: 0 0 0.5rem 0;
		color: rgba(255, 255, 255, 0.85);
	}

/* Long-form content (right column, white background) ---------------------------- */

	#wrapper > section > .content { line-height: 1.75; }
	#wrapper > section > .content p { margin-bottom: 1.35rem; }
	#wrapper > section > .content a { word-wrap: break-word; }

	#wrapper > section > .content h3,
	#wrapper > section > .content h4,
	#wrapper > section > .content h5 {
		text-transform: none;
		letter-spacing: 0.04em;
		font-weight: 600;
	}

	#wrapper > section > .content h3 {
		font-size: 1.05rem;
		margin: 2.5rem 0 1rem 0;
		padding-bottom: 0.5rem;
		border-bottom: solid 2px #502380;
	}

	#wrapper > section > .content h4 { font-size: 0.92rem; margin: 2rem 0 0.75rem 0; color: #502380; }
	#wrapper > section > .content h5 { font-size: 0.85rem; margin: 1.5rem 0 0.5rem 0; }

	#wrapper > section > .content h3.v2-refs {
		font-size: 0.85rem;
		text-transform: uppercase;
		letter-spacing: 0.15em;
		opacity: 0.7;
		border-top: solid 1px rgba(0, 0, 0, 0.15);
		border-bottom: 0;
		padding-top: 1.25rem;
		margin-top: 3rem;
	}

	.v2-pagenum {
		text-align: right;
		font-size: 0.65rem;
		letter-spacing: 0.25rem;
		opacity: 0.3;
		border-top: solid 1px rgba(0, 0, 0, 0.1);
		margin: 2.5rem 0 -1.25rem 0;
		padding-top: 0.4rem;
	}

/* Figures ------------------------------------------------------------------------ */

	.v2-figure { margin: 2rem 0; text-align: center; }
	.v2-figure a { border-bottom: 0; display: inline-block; max-width: 100%; }

	.v2-figure img,
	.content img.v2-inline {
		max-width: 100%;
		height: auto;
		border-radius: 0.35rem;
		vertical-align: middle;
	}

	.v2-figure figcaption {
		font-size: 0.8rem;
		line-height: 1.55;
		color: rgba(0, 0, 0, 0.6);
		margin-top: 0.75rem;
		text-align: left;
	}

	.content img.v2-inline { float: right; margin: 0 0 1rem 1.5rem; max-width: 40%; }
	@media screen and (max-width: 736px) {
		.content img.v2-inline { float: none; margin: 0 0 1rem 0; max-width: 100%; }
	}

/* Callout boxes -------------------------------------------------------------------- */

	.v2-box {
		border: solid 1px rgba(80, 35, 128, 0.25);
		border-left-width: 4px;
		border-radius: 0.35rem;
		padding: 1.5rem 1.75rem 0.5rem 1.75rem;
		margin: 2.25rem 0;
		background: rgba(80, 35, 128, 0.045);
	}

	.v2-box > :last-child { margin-bottom: 1.25rem; }

	.v2-box .v2-box__title {
		margin: 0 0 1rem 0 !important;
		font-size: 0.8rem;
		letter-spacing: 0.2em;
		border-bottom: 0 !important;
		padding-bottom: 0 !important;
	}

	.v2-box .v2-box__title:before {
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		display: inline-block;
		margin-right: 0.85rem;
		letter-spacing: 0;
	}

	.v2-box--purpose { border-left-color: #3d7fd6; }
	.v2-box--purpose .v2-box__title:before { content: '\f140'; color: #3d7fd6; }

	.v2-box--activity { border-left-color: #a16e18; }
	.v2-box--activity .v2-box__title:before { content: '\f0eb'; color: #a16e18; }

	.v2-box--takeaways { border-left-color: #2e9e5b; }
	.v2-box--takeaways .v2-box__title:before { content: '\f058'; color: #2e9e5b; }

	.v2-box--note { border-left-color: #502380; }
	.v2-box--note .v2-box__title:before { content: '\f02e'; color: #502380; }

/* Audio --------------------------------------------------------------------------- */

	.v2-audio {
		margin: 1.5rem 0 2rem 0;
		padding: 1rem 1.25rem;
		border: solid 1px rgba(0, 0, 0, 0.15);
		border-radius: 0.35rem;
		background: rgba(0, 0, 0, 0.025);
	}

	.v2-audio audio { display: block; width: 100%; }

	.v2-audio .v2-audio__link {
		display: inline-block;
		margin-top: 0.6rem;
		font-size: 0.7rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: #502380;
	}

/* In-page contents ----------------------------------------------------------------- */

	.v2-toc {
		margin: 0 0 2.5rem 0;
		border: solid 1px rgba(80, 35, 128, 0.3);
		border-radius: 0.35rem;
	}

	.v2-toc summary {
		cursor: pointer;
		padding: 0.9rem 1.25rem;
		font-size: 0.78rem;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		list-style: none;
		outline: 0;
		color: #502380;
	}

	.v2-toc summary::-webkit-details-marker { display: none; }
	.v2-toc summary:before {
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		content: '\f0ca';
		margin-right: 0.85rem;
	}
	.v2-toc summary:hover { background: rgba(80, 35, 128, 0.06); }

	.v2-toc ol {
		list-style: none;
		margin: 0;
		padding: 0.25rem 1.25rem 1rem 1.25rem;
		max-height: 22rem;
		overflow-y: auto;
	}

	.v2-toc li { padding: 0; border-top: dotted 1px rgba(0, 0, 0, 0.12); }
	.v2-toc li:first-child { border-top: 0; }
	.v2-toc li a {
		display: block; padding: 0.45rem 0; border-bottom: 0;
		font-size: 0.85rem; line-height: 1.45; color: #000000;
	}
	.v2-toc li a:hover { color: #502380; }

/* Home-page index lists -------------------------------------------------------------- */

	.v2-index { list-style: none; margin: 0 0 2rem 0; padding: 0; }
	.v2-index li { padding: 0; border-top: solid 1px rgba(80, 35, 128, 0.2); }
	.v2-index li:last-child { border-bottom: solid 1px rgba(80, 35, 128, 0.2); }

	.v2-index a {
		display: flex;
		align-items: baseline;
		gap: 1.25rem;
		padding: 0.95rem 0.5rem;
		border-bottom: 0;
		transition: background-color 0.2s ease-in-out;
	}

	.v2-index a:hover { background-color: rgba(80, 35, 128, 0.05); }

	.v2-index__num {
		flex: 0 0 6.5rem;
		font-size: 0.7rem;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: #502380;
	}

	.v2-index__title { flex: 1 1 auto; line-height: 1.4; color: #000000; }

	@media screen and (max-width: 480px) {
		.v2-index a { flex-direction: column; gap: 0.25rem; }
		.v2-index__num { flex-basis: auto; }
	}

/* Previous / next -------------------------------------------------------------------- */

	.v2-pager {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		justify-content: space-between;
		align-items: center;
		margin: 3.5rem 0 1rem 0;
		padding-top: 1.75rem;
		border-top: solid 1px rgba(0, 0, 0, 0.12);
	}

	.v2-pager .button { margin: 0; }

	.v2-licence {
		font-size: 0.75rem;
		line-height: 1.7;
		color: rgba(0, 0, 0, 0.55);
		margin: 0 0 1.5rem 0;
	}

	.v2-credits { font-size: 0.9rem; }
	.v2-credits li { padding-left: 0.25rem; margin-bottom: 0.5rem; }

/* Copyright bar: photo credit and template credit as two lines ----------------------- */

	#wrapper .copyright { text-align: right; line-height: 1.9; }
	#wrapper .copyright .v2-photos,
	#wrapper .copyright .v2-design { display: block; }

/* Tables ------------------------------------------------------------------------------ */

	.content .table-wrapper table { font-size: 0.88rem; }
	.content .table-wrapper th { background: rgba(80, 35, 128, 0.08); }

/* Print --------------------------------------------------------------------------------- */

	@media print {
		#wrapper:before, .v2-pager { display: none !important; }
	}