/* CMU ECE 18-740 -- shared stylesheet for all pages. */

:root {
  --cmu-red: #C41230;        /* Carnegie Red */
  --cmu-red-dark: #941120;
  --rule: #ddd;
  --hover: #f5f5f5;
  --muted: #6b6b6b;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 auto;
  max-width: none;
  padding: 0 1.5rem 3rem;
  line-height: 1.5;
}

/* Long lines of prose are hard to read on a wide screen, so constrain the
   text blocks even though the schedule table below spans the full width. */
main > p,
main > ul,
main > h3 + ul,
.note {
  max-width: 60rem;
}

main {
  margin-top: 1.5rem;
}

/* ---- links ---- */

a {
  text-decoration: none;
}

a:link,
a:visited {
  color: black;
  border-bottom: 1px dotted black;
}

a:hover {
  color: #000;
  border-bottom: 2px solid black;
}

/* ---- top navigation ---- */

.topnav {
  background-color: var(--cmu-red);
  overflow: hidden;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: none;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
  border-bottom: none;
}

.topnav a.active {
  background-color: var(--cmu-red-dark);
  color: white;
}

/* ---- tables ---- */

.table-wrap {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* Fixed layout so the column proportions in <colgroup> are actually honoured
   rather than being re-derived from content length.

   min-width is load-bearing: with table-layout:fixed the Week and Date cells
   are pinned to a PERCENTAGE of the table, so on a narrow window they shrink
   below the width of "Week 10" / "Aug 25 (Tue)" and the nowrap text spills out
   of the cell instead of widening it. The floor keeps every column legible and
   lets .table-wrap scroll horizontally instead. */
table.schedule {
  table-layout: fixed;
  min-width: 70rem;
}

/* Tune the schedule's column balance here -- these five must sum to 100%. */
table.schedule col.c-week       { width: 7%; }
table.schedule col.c-date       { width: 10%; }
table.schedule col.c-activity   { width: 41%; }
table.schedule col.c-readings   { width: 24%; }
table.schedule col.c-assign     { width: 18%; }

table.schedule td {
  overflow-wrap: break-word;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

tbody tr:hover {
  background-color: var(--hover);
}

/* The meetings table on Course Info is narrow content, unlike the schedule --
   cap it at the prose width instead of letting it span a wide viewport. */
table.meetings {
  max-width: 60rem;
}

/* ---- schedule rows ---- */

.lab-banner td {
  background-color: #f0f0f0;
  font-weight: bold;
}

tr:hover .lab-banner td,
.lab-banner:hover td {
  background-color: #e8e8e8;
}

td.week {
  white-space: nowrap;
  color: var(--muted);
}

/* ---- readings & assignments cells ---- */

td.readings,
td.assignments {
  font-size: 0.9em;
}

td.readings ul,
td.assignments ul {
  margin: 0;
  padding-left: 1.1em;
}

td.readings li,
td.assignments li {
  margin-bottom: 0.35em;
}

td.readings li:last-child,
td.assignments li:last-child {
  margin-bottom: 0;
}

/* Deliberately NOT nowrap: a long assignment name (e.g. "Lab 5 Team Project
   Submission Deadline") would otherwise force this column wide and squeeze the
   Readings column. Only the short date chip resists wrapping. */
td.assignments {
  overflow-wrap: break-word;
}

.optional {
  color: var(--muted);
}

.status {
  text-transform: uppercase;
  font-size: 0.78em;
  letter-spacing: 0.03em;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  vertical-align: 0.05em;
}

.status-released {
  background-color: #eee;
  color: #444;
}

.status-due {
  background-color: var(--cmu-red);
  color: #fff;
}

.status-date {
  color: var(--muted);
  white-space: nowrap;
}

td.date {
  white-space: nowrap;
}

.holiday {
  color: var(--muted);
  font-style: italic;
}

.exam {
  font-weight: bold;
}

.tba {
  color: var(--muted);
}

.lecturer {
  color: var(--muted);
}

/* ---- misc ---- */

.note {
  background-color: #fdf6f7;
  border-left: 4px solid var(--cmu-red);
  padding: 0.75rem 1rem;
  margin: 1.5rem 0;
}

.grading-total td {
  font-weight: bold;
  border-top: 2px solid var(--rule);
}

.staff-role {
  color: var(--muted);
}

@media (max-width: 640px) {
  .topnav a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* ---- course links ---- */

ul.course-links {
  padding-left: 1.2em;
}

ul.course-links li {
  margin-bottom: 0.4em;
}

/* ---- break banner ---- */

.break-banner td {
  background-color: #f7f7f7;
  font-weight: bold;
  color: #555;
  text-align: center;
}

.break-date {
  color: var(--muted);
  font-weight: normal;
  margin-right: 0.5em;
}

.event-note {
  color: var(--muted);
  font-size: 0.9em;
}

/* ---- calendar embed ---- */

/* The Google Calendar iframe has no intrinsic size, so the wrapper supplies one.
   60rem matches the prose column cap at the top of this file -- that rule only
   selects `main > p` / `main > ul`, so a bare <div> child of main needs its own.
   aspect-ratio keeps the box from collapsing while letting it shrink on a narrow
   window instead of overflowing at a fixed pixel width. */
.calendar-embed {
  max-width: 60rem;
  aspect-ratio: 4 / 3;
  margin: 1.5rem 0;
}

.calendar-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Below the nav's breakpoint the 4:3 box is too short to read, and Google swaps
   the embed to its agenda view at these widths, which wants vertical room. */
@media (max-width: 640px) {
  .calendar-embed {
    aspect-ratio: 3 / 4;
    min-height: 28rem;
  }
}