/* The course sites' stylesheet, shared by every index page. The colors match the slides. */

body {
  margin: 0;
  background-color: #064f6e;
  color: #f5ecc2;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

a {
  color: #f99d1b;
}

header,
main,
footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

header {
  border-bottom: 4px solid #f99d1b;
}

h1 {
  margin: 16px 0 0;
  font-size: 2.5em;
}

h2 {
  margin-top: 40px;
  border-bottom: 2px solid #38728b;
}

h3 {
  margin: 0;
}

code {
  background-color: #175b78;
  padding: 0 4px;
}

.subtitle,
.label,
footer {
  color: #a8c1cc;
}

nav a {
  margin-right: 16px;
  font-weight: bold;
}

/* Three chapters across, and one across on a phone. */
.chapters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 700px) {
  .chapters {
    grid-template-columns: 1fr;
  }
}

.chapter {
  background-color: #032837;
  padding: 16px;
}

.chapter p {
  margin: 8px 0 0;
}

/* Handouts and cheat sheets, built from Markdown by build.sh. A narrower column reads better
   than the index pages' full width. */
main.doc {
  max-width: 800px;
}

.doc h1 {
  border-bottom: 4px solid #f99d1b;
  padding-bottom: 8px;
}

.doc pre,
.doc div.sourceCode {
  background-color: #032837;
}

.doc pre {
  padding: 12px 16px;
  overflow-x: auto;
}

.doc pre code {
  background-color: transparent;
  padding: 0;
}

.doc img {
  max-width: 100%;
}

.doc table {
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.doc th,
.doc td {
  border: 1px solid #38728b;
  padding: 4px 8px;
  text-align: left;
}

/* The whole table is dark like the code boxes, with the row under the mouse lit up in orange.
   Only body rows light up, so the header row stays put. */
.doc th,
.doc tr {
  background-color: #032837;
}

/* The light text is unreadable on orange (1.8:1), so the lit row switches to the code boxes'
   dark blue (7.2:1). Links would be orange on orange, and the blue code chips would hold dark
   text, so both switch too. */
.doc tbody tr:hover {
  background-color: #f99d1b;
  color: #032837;
}

.doc tbody tr:hover a {
  color: #032837;
}

.doc tbody tr:hover code {
  background-color: rgba(3, 40, 55, 0.15);
}

/* The CS 213 schedule (cs213/schedule.html), a hand-written page. The table sits centered in
   the column, and still scrolls sideways on a phone. Each week's topics are a list, so every
   cell starts at the top of its row, and the dates stay on one line. */
.doc table.schedule {
  width: fit-content;
  max-width: 100%;
  margin: 24px auto;
}

.doc .schedule th,
.doc .schedule td {
  padding: 8px 12px;
  vertical-align: top;
}

.doc .schedule td:first-child {
  white-space: nowrap;
}

.doc .schedule ul {
  margin: 4px 0;
  padding-left: 20px;
}

/* The CS 230 schedule (cs230/schedule.md). Its tables fill the column. A table only stretches
   with display: table, which cannot scroll, so the div around it scrolls sideways on a phone. */
.doc .full-width {
  overflow-x: auto;
}

.doc .full-width table {
  display: table;
  width: 100%;
}

/* The data page (cs230/data/index.md). A large link at the top downloads every file as one
   zip. Below it, each file is a box that opens to show the file, with a download arrow beside
   its name. The file sits flush in the box, which is already dark. */
.doc .download-all {
  font-size: 1.25em;
  font-weight: bold;
}

.doc details {
  background-color: #032837;
  margin: 8px 0;
  padding: 8px 16px;
}

.doc summary {
  cursor: pointer;
}

.doc details pre {
  margin: 8px 0 0;
  padding: 0;
}

.doc .download svg {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.25em;
}

.doc summary .download {
  margin-left: 8px;
}