/*
	Syllabus page style
	Presents the page as a single clean A4-proportioned sheet,
	on top of a neutral backdrop, instead of the site's default
	green header banner + wide layout.
*/

	body.syllabus-page {
		background-color: #dde1e4;
		letter-spacing: normal;
		font-size: 10pt;
	}

	/* Remove the green top banner entirely */
	.syllabus-page #header-wrapper {
		display: none;
	}

	.syllabus-page #main {
		background: transparent;
		padding: 3em 20px 4em 20px;
	}

	/* The "paper" itself */
	.syllabus-page .container {
		width: 100%;
		max-width: 210mm;
		background-color: #fff;
		padding: 18mm 16mm;
		border-radius: 2px;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 12px 30px rgba(0, 0, 0, 0.16);
	}

	.syllabus-page #copyright {
		text-align: center;
		color: #a3a89a;
		border-top: 1px solid #e1e4da;
		margin-top: 2.5em;
		padding-top: 0.75em;
		font-size: 0.7em;
	}

	.print-button {
		position: fixed;
		top: 18px;
		right: 18px;
		z-index: 100;
		border: none;
		border-radius: 6px;
		background-color: #00462a;
		color: #fff;
		font-family: inherit;
		font-size: 0.95em;
		letter-spacing: normal;
		padding: 0.6em 1.1em;
		cursor: pointer;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	}

	.print-button:hover {
		background-color: #00692f;
	}

	/* Document title vs. section headings. Uses a class (not :first-of-type) because
	   some sections are injected via JS (see syllabus-common.js) and end up nested
	   one level deeper than the static ones. */
	.syllabus-page section h2.doc-title {
		text-align: center;
		font-size: 1.7em;
		margin-bottom: 0.6em;
	}

	.syllabus-page section h2:not(.doc-title) {
		font-size: 1.2em;
		margin-top: 1.6em;
		border-bottom: 2px solid #00462a;
		padding-bottom: 0.25em;
	}

	/* Sub-heading inside a section (e.g. AI Use Policy's "Use of Generative
	   AI in Assignments"). Deliberately smaller and un-bordered so it reads
	   as one tier below h2, not a near-duplicate of it. */
	.syllabus-page section h3 {
		font-size: 1.05em;
		color: #00462a;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		margin-top: 1.4em;
		margin-bottom: 0.5em;
		padding-left: 0.5em;
		border-left: 3px solid #00462a;
	}

	.syllabus-page section hr {
		display: none;
	}

	/* Course info / content tables */
	.syllabus-page table.course {
		width: 100%;
		margin-bottom: 1.25em;
		font-size: 0.92em;
	}

	.syllabus-page table.course th,
	.syllabus-page table.course td {
		border: 1px solid #d4d7cf;
		padding: 0.5em 0.7em;
		text-align: left;
		vertical-align: top;
	}

	.syllabus-page table.course th {
		background-color: #eef1e9;
		font-weight: bold;
		color: #283121;
		white-space: nowrap;
	}

	/* Course Format / Evaluation System percentage tables */
	.syllabus-page table.course.table-center th,
	.syllabus-page table.course.table-center td {
		text-align: center;
	}

	/* Course info table: label + value rows, some rows split into two pairs */
	.syllabus-page table.course-info {
		table-layout: fixed;
	}

	.syllabus-page table.course-info th {
		text-align: center;
		vertical-align: middle;
		white-space: normal;
	}

	.syllabus-page table.course-info td {
		vertical-align: middle;
		text-align: center;
	}

	.syllabus-page table.course-info td.center {
		text-align: center;
	}

	/* Double rule above the TA row(s) so they read as a separate block
	   from the rest of Course Information, not just another field. */
	.syllabus-page table.course-info tr.ta-row th,
	.syllabus-page table.course-info tr.ta-row td {
		border-top: 4px double #00462a;
	}

	/* Intro sentence right before a list (e.g. "...introduced to:") sits
	   too far from the list below it otherwise, since paragraphs carry
	   the site-wide 1.25em bottom margin meant for body text spacing. */
	.syllabus-page section p:has(+ ol),
	.syllabus-page section p:has(+ ul) {
		margin-bottom: 0.3em;
	}

	/* Same line-height everywhere in the body copy — p was inheriting the
	   site-wide 1.8em (feels loose), ol/li was inheriting the browser
	   default (~1.2, feels tight next to it). Split the difference. */
	.syllabus-page section p,
	.syllabus-page section li {
		line-height: 1.5;
	}

	/* Lists get their own consistent bottom margin, replacing the ad-hoc
	   <br> spacers previously used between a list and whatever follows it.
	   A slightly deeper indent than the site default reads more clearly as
	   "nested under the sentence above" than flush with the margin. */
	/* Numbered via a counter + ::before instead of native list-style-type:
	   the latter's marker box doesn't reliably render once a list is
	   nested inside an overflow:hidden float-container (as in the
	   Course Description photo layout), so this is the robust option. */
	.syllabus-page section ol,
	.syllabus-page section ul:not(.big-image-list) {
		margin-bottom: 0.8em;
		margin-left: 1.6em;
		list-style: none;
		padding-left: 0;
		counter-reset: syllabus-list;
	}

	.syllabus-page section ol > li,
	.syllabus-page section ul:not(.big-image-list) > li {
		position: relative;
		padding-left: 1.4em;
		margin-bottom: 0.3em;
		counter-increment: syllabus-list;
	}

	.syllabus-page section ol > li::before,
	.syllabus-page section ul:not(.big-image-list) > li::before {
		content: counter(syllabus-list) ".";
		position: absolute;
		left: 0;
		color: #445047;
		font-weight: bold;
	}

	.syllabus-page ul.big-image-list li img {
		border: 1px solid #e1e4da;
	}

	/* Course Description's "Other Important Information" list: a smaller
	   photo so the notice list clears below it instead of wrapping beside it. */
	.syllabus-page ul.big-image-list li img.small {
		width: 130px;
	}

	/* Always start on its own line below a floated photo, regardless of
	   how much paragraph text precedes it. */
	.syllabus-page .important-info-heading {
		clear: left;
	}

	/* Restore the plain section sub-head look for "Other Important
	   Information" even though it lives inside .big-image-list, which
	   otherwise styles h3 as a book title (see rule below). */
	.syllabus-page ul.big-image-list h3.important-info-heading {
		font-size: 0.95em;
		color: #445047;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		margin-top: 1.2em;
		margin-bottom: 0.4em;
	}

	/* Required Materials' book title is a title, not a section sub-head:
	   keep it out of the generic h3 sub-head styling above. */
	.syllabus-page ul.big-image-list h3 {
		font-size: 1.05em;
		color: #283121;
		font-weight: bold;
		text-transform: none;
		letter-spacing: normal;
		margin-top: 0;
		margin-bottom: 0.3em;
	}

	/* Course contents table: Week, Date and Etc. shrink to their content;
	   Topics & Materials absorbs whatever space is left. */
	.syllabus-page table.course-contents th:nth-child(1),
	.syllabus-page table.course-contents td:nth-child(1),
	.syllabus-page table.course-contents th + td,
	.syllabus-page table.course-contents th:last-child,
	.syllabus-page table.course-contents td:last-child {
		width: 1%;
		white-space: nowrap;
		text-align: center;
	}

	/* Header row labels, always centered */
	.syllabus-page table.course-contents tr:first-child th {
		text-align: center;
	}

	/* Vertically center every cell */
	.syllabus-page table.course-contents th,
	.syllabus-page table.course-contents td {
		vertical-align: middle;
	}

	/* Topics & Materials (CH #.. / Lecture #..) horizontally centered too */
	.syllabus-page table.course-contents td {
		text-align: center;
	}

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

		.syllabus-page .container {
			padding: 8vw 6vw;
		}

	}

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

		.syllabus-page #main {
			padding: 2em 10px 3em 10px;
		}

		.syllabus-page .container {
			padding: 7vw 5vw;
		}

		.syllabus-page table.course {
			font-size: 0.82em;
		}

		.syllabus-page table.course th,
		.syllabus-page table.course td {
			padding: 0.4em 0.45em;
		}

	}

	@media print {

		@page {
			size: A4;
			margin: 16mm;
		}

		body.syllabus-page {
			background: #fff;
		}

		.print-button {
			display: none;
		}

		.syllabus-page #main {
			padding: 0;
		}

		.syllabus-page .container {
			max-width: none;
			width: 100%;
			padding: 0;
			box-shadow: none;
			border-radius: 0;
		}

	}