/* Grid area mappings */
.readings { grid-area: readings; } /* all courses */
.topics { grid-area: topics; } /* all courses */
.due { grid-area: due; } /* all courses */
.optional { grid-area: optional; } /* supplemental cs330 */
.prep { grid-area: prep; } /* cs343 preps */

.cs-sidebar { nav > ul > li { margin-bottom: 1.5rem; } nav ul { padding-left: 0; padding-right: 0.25rem; }
	nav li li { padding: .25rem 1rem 0; margin-left: 1rem; font-size: .9rem; } }

div#logos { display: flex; justify-content: start; height: 15vh; img { padding: 0 1.5rem; } }
footer { width: 100vw; margin: 0; padding: 0; img { display: block; width: 50vw; margin: 2rem auto; } div#copyright-bar { padding: 0.5rem 1.5rem; } }

	/*
	border-radius: var(--bs-border-radius) !important;
	border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
	dt { display: inline; }
  dd { display: inline; }
	dt::after { content: ":"; margin-right: 0.4em; }
  dt:not(:first-child)::before { content: "\A"; display: block; height: 0.5rem; }
	div.topic { padding: 0.5rem 0.5rem;
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color); }
	div.topic:last-child { border-bottom: 0; }
*/
.topics-list {
	div.topic { padding: 0.5rem 0.5rem; }
	div.mon::before { content: "Monday:"; margin-right: 0.4em; font-weight: 600; }
	div.wed::before { content: "Wednesday:"; margin-right: 0.4em; font-weight: 600; }
	div.fri::before { content: "Friday:"; margin-right: 0.4em; font-weight: 600; }
}
.topics-table { display: grid; grid-template-columns: repeat(3, 1fr); div { padding: 0.5rem; } }
.week330, .week343, .week361 { .cs-list-item { padding: 0 1rem; } .cs-list { padding: 0; } .mquiz, .prep, .lab { padding: 0.25rem 1rem; } }

.cs-code { padding: .25rem .5rem; margin: 1rem 0; pre { margin: 0; } }

.cs-layout-single {
	width: 100vw;
}
/*
 * TODO: How many of these can be set here as default?
	.cs-title { padding: 1rem !important; width: 100%; h1 { grid-area: name; }
		display: grid; grid-template-areas: "name name" "data pic"; grid-template-columns: 2fr 2fr;
		div#personal { font-family: var(--cs-serif); grid-area: data; display: flex; flex-direction: column; span, a { font-size: 1em; } }
	div#headshot { grid-area: pic; padding-left: 1.5rem; } }
	section { padding: 1rem 1rem !important; }
}
*/

/* Laptop width and larger */
@media (min-width: 992px) {
	/* Layout with no sidebar, just main */
	.cs-layout-single {
		.cs-title { padding: 1rem 2.5rem !important; width: 100%; }
		section { padding: 1rem 2.5rem !important; }
		/* Special case for the home page title section */
		.cs-title.cs-home {
		 	padding: 1rem 2.5rem !important; width: 100%; h1 { grid-area: name; }
		  display: grid; grid-template-areas: "name pic" "data pic"; grid-template-columns: 2fr 2fr;
			div#personal { font-family: var(--cs-serif); grid-area: data; span, a { font-size: 1em; }
				display: grid; grid-template-rows: repeat(4, 2em); grid-auto-flow: column; }
			div#headshot { grid-area: pic; padding-left: 2.5rem; }
		}
	}

	/* Course layout with an in-course sidebar */
	.cs-layout {
	  display: grid; grid-template-areas: "sidebar main"; grid-template-columns: 1fr 5fr;
		.cs-title { padding: 1rem 1.5rem; h1 { font-size: 2.25rem; } h2 { font-size: 2rem; } a.prof { font-size: 1.5rem; } :last-child { margin-bottom: 0; } }
    article:not(.cs-week-list) {
			/* Leading margin on all sections but the title */
      section:not(.cs-title) { margin-top: 1rem; padding: 0 1.5rem; h2, h3 { padding: 0 } ul, ol, dl { padding: 0 3rem; } }
    }
		/* Spacing and layout for schedule weeks on laptops and larger */
    article.cs-week-list {
      section:not(.milestone) { h2 { padding: 1rem 1.5rem; } h3 { padding: 0rem 2.5rem } }
      section.milestone { h2 { padding: 1rem 1.5rem 0; } h3 { padding: 0rem 1.5rem 1rem; } }
			.week361 > div { padding: 0 2rem 2rem 4rem !important; display: grid;
				grid-template-columns: 2fr 2fr; grid-column-gap: 1vw; grid-row-gap: 1rem;
				grid-template-areas: "readings due" "topics topics"; }
			.week343 > div { padding: 0 2rem 2rem 4rem !important; display: grid;
				grid-template-columns: 2fr 2fr; grid-column-gap: 1vw; grid-row-gap: 1rem;
				grid-template-areas: "readings prep" "readings due" "topics topics"; }
			.week330 { width: 100%;
				.left { display: inline flex; width: 60%; flex-direction: column; row-gap: 1rem; padding: 0 1rem 2rem 4rem; }
				.right { display: inline flex; width: calc(40% - 1rem); flex-direction: column; row-gap: 0.5rem; padding: 0 0 2rem 1rem; } }
    }
		/* Make sure last section has height that can be jumped to with anchor */
    article > section:last-child { min-height: 50vh; }
	}

	/* Layout with sidebar shown and main (main may have internal second column) */
  .cs-sidebar {
	  padding-top: 1.5rem !important; z-index: 0; grid-area: sidebar; height: calc(100vh - 5rem); overflow-y: auto;
		strong { padding-left: 0.5rem; }
	  .btn.side-toggle { padding-top: .1rem !important; padding-bottom: .1rem !important; }
    li ul li { margin-left: 0; margin-right: 0.5rem; padding-left: 2.5rem; }
	}

  /* Optional table of contents with in-page nav */
	.cs-main-toc { height: calc(100vh - 3rem); display: grid;
		grid-template-areas: "main-content toc";
		grid-template-rows: auto 1fr; grid-template-columns: 4fr 1fr; }
  .cs-toc { grid-area: toc; padding-top: 1.5rem !important; }
  article { grid-area: main-content; height: 100%; overflow-y: auto; overflow-x: hidden; }
}

/* Medium screens (iPads) */
@media (max-width: 991px) {
	div#logos { height: 10vh; }

	/* Layout with no sidebar, just main */
	.cs-layout-single { width: 100vw;
		.cs-title { padding: 1rem !important; width: 100%; h1 { grid-area: name; }
		  display: grid; grid-template-areas: "name name" "data pic"; grid-template-columns: 2fr 2fr;
			div#personal { font-family: var(--cs-serif); grid-area: data; display: flex; flex-direction: column; span, a { font-size: 1em; } }
			div#headshot { grid-area: pic; padding-left: 1.5rem; } }
		section { padding: 1rem 1rem !important; }
	}
	.cs-layout {
		.cs-main-toc { width: 100vw; }
		.cs-sidebar { height: 0 !important; }
		.cs-toc { display: none; }
		.cs-title { padding: 1rem; h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } a.prof { font-size: 1.5rem; } :last-child { margin-bottom: 0; } }

    article:not(.cs-week-list) {
      .cs-title ~ section { margin-top: 1rem; }
      section:not(.cs-title) { p { padding: 0 1rem; } h3 { padding: 0 1rem; } h2 { padding: 0 1rem; } ul, ol, dl { padding: 0 2.5rem; }
				.alert { padding: 1rem; margin: 1rem; }
				.cs-code { padding: .25rem .5rem; margin: 1rem;}
			}
    }
    article.cs-week-list {
      section:not(.milestone) { h2 { padding: 1rem; } h3 { padding: 0rem 1rem } }
      section.milestone { h2 { padding: 1rem 1rem 0; } h3 { padding: 0rem 1rem 1rem; } }
			.week330 > div { padding: 0 1.5rem 1.5rem 2rem !important; }
			.week343 > div { padding: 0 1.5rem 1.5rem 2rem !important; }
			.week361 > div { padding: 0 1.5rem 1.5rem 2rem !important; }
    }
    article > section:last-child { min-height: 50vh; }
		.side-toggle { display: none; }
		.cs-nav-collapse.collapse { display: block !important; }
	}

  .week330 > div {
    display: grid; grid-template-columns: 3fr 4fr; grid-column-gap: 0.5vw; grid-row-gap: 1vh;
		grid-template-areas: "readings topics" "optional due";
	}
  .week361 > div {
    display: grid; grid-template-columns: 2fr 2fr; grid-column-gap: 1vw; grid-row-gap: 1rem;
		grid-template-areas: "readings due" "topics topics";
	}
  .week343 > div {
    display: grid; grid-template-columns: 2fr 2fr; grid-column-gap: 1vw; grid-row-gap: 1rem;
		grid-template-areas: "readings prep" "readings due" "topics topics";
	}
}

/* Smaller screens (phones on landscape) */
@media (max-width: 767px) {
	div#logos {
		height: 100%;
	 	img { width: 20vw; }
	}
}

/* Smallest screens (phones horizontal) */
@media (max-width: 575px) {
	div#logos {
		width: 90vw;
		img { width: 100%; }
	}

	/* Layout with no sidebar, just main */
	.cs-layout-single { width: 100vw;
		.cs-title {
		 	padding: 1rem !important; width: 100%;
			display: flex; flex-direction: column;
			div#headshot { padding-left: 0; margin-top: 1.5vh; }
		}
	}

	.cs-layout {
		.cs-title { padding: 1rem 0.75rem; h1 { font-size: 1.4rem; } h2 { font-size: 1.2rem; } a { font-size: 1rem; } :last-child { margin-bottom: 0; } }
    article.cs-week-list {
      section:not(.milestone) { h2 { padding: 1rem 0.75rem; } h3 { padding: 0rem 0.75rem } }
      section.milestone { h2 { padding: 1rem 0.75rem 0; } h3 { padding: 0rem 0.75rem 1rem; } }
			.week330 > div { padding: 0 0.75rem 1rem 1.25rem !important;
        display: grid; grid-template-areas: "topics" "readings" "optional" "due"; grid-template-columns: 1fr; grid-row-gap: 1vh;
		    h4 { font-size: 1.1rem; }
			}
			.week343 > div { padding: 0 0.75rem 1rem 1.25rem !important;
        display: grid; grid-template-areas: "readings" "prep" "due" "topics"; grid-template-columns: 1fr; grid-row-gap: 1vh;
		    h4 { font-size: 1.1rem; }
			}
			.week361 > div { padding: 0 0.75rem 1rem 1.25rem !important;
        display: grid; grid-template-areas: "readings" "due" "topics"; grid-template-columns: 1fr; grid-row-gap: 1vh;
		    h4 { font-size: 1.1rem; }
			}
    }
	}

  footer {
	  img { width: 75vw; }
	  div#copyright-bar { padding: 0.5rem 1rem; }
  }

}


/* Weekly topics table - each item is 1/3 of the width with wrap
 *   - first item of each row does not have a redundant left border */
/*
.topics-table {
  width: 100%; display: flex; flex-direction: column; flex-wrap: wrap;
  border-collapse: separate; border-spacing: 0; border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius) !important;
  .topics-col {
    display: flex; align-items: start; padding: .5rem; flex: 0 0 calc(100% / 3); 
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .topics-col:nth-child(3n + 1) { border-left: 0 !important; }
  .topics-head {
    display: flex; font-weight: 600; background: var(--bs-tertiary-bg);
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    .topics-col { justify-content: center; }
  }
  .topics-body { display: flex; flex-grow: 1; }
}
*/