/* ============================================================
   CS329Z — styles adapted from the CS329X template.
   Self-hosted font, no framework, no external requests.
   ============================================================ */

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url(../fonts/source-sans-pro-300.woff2) format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/source-sans-pro-700.woff2) format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
  margin: 0;
  padding-top: 50px;
}

a { color: #8c1515; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
p { text-align: justify; }

.container { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 15px; }
.row::after { content: ""; display: table; clear: both; }
.col-md-10 { width: 100%; }

h1 { font-size: 24px; font-weight: 300; text-align: center; }
h2 { font-size: 21px; font-weight: bold; color: #8c1515; }
h3 { font-size: 16px; font-weight: bold; }

#header { margin-top: 20px; margin-bottom: 1px; }

/* Logos & staff */
.logo-left  { height: 60px; float: left;  margin-left: 50px; }
.logo-right { height: 60px; float: right; margin-right: 50px; }
.instructorphoto img {
  width: 120px; height: 120px; object-fit: cover;
  border-radius: 100px; margin-bottom: 10px;
}
.instructor {
  display: inline-block; width: 140px; text-align: center;
  margin-right: 20px; margin-bottom: 0; font-size: 14px; vertical-align: top;
}

/* Sections */
.sec { margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px; }
/* Offset anchor jumps so section headers clear the fixed navbar */
.sec[id] { scroll-margin-top: 62px; }
.sechighlight { background-color: #f7f6f1; }
.bold { font-weight: bold; }
.red { color: #b00020; }

/* Tables */
.table { width: 100%; max-width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.table th, .table td { padding: 8px; vertical-align: top; text-align: left; border-top: 1px solid #ddd; }
.table thead th { vertical-align: bottom; border-bottom: 2px solid #ddd; border-top: 0; }
.table thead tr.active th { background-color: #f5f5f5; }
.table tbody tr.alt td { background-color: #f5f5f5; }
.table ul { margin: 4px 0 0; padding-left: 18px; }
.table li { text-align: left; margin-bottom: 4px; }
.theme-tag { display: block; margin-bottom: 4px; font-size: 12px; color: #8c1515; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }

/* Lecture title + description in the Theme column */
.lec-title { display: block; font-weight: 700; }
.lec-desc  { display: block; font-weight: 300; margin-top: 2px; }

/* Additional-readings dropdown: bottom-left of the Course Material cell */
.material { text-align: left; }
.more-readings { margin-top: 8px; text-align: left; }
.more-readings > summary {
  cursor: pointer; display: inline-block;
  color: #8c1515; font-weight: 700; font-size: 13px;
}
.more-readings > summary:hover { text-decoration: underline; }
.more-readings > summary::marker { color: #8c1515; }
.more-readings ul { margin-top: 4px; }

/* Navbar */
.navbar { position: relative; min-height: 50px; }
.navbar-fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; }
.navbar-default { background-color: #8c1515; border-bottom: 1px solid #c0392b; }
.navbar .container { display: flex; align-items: center; flex-wrap: wrap; }
.navbar-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; }
.navbar-brand { color: #ecf0f1; font-weight: bold; font-size: 18px; line-height: 50px; padding: 0 15px 0 0; }
.navbar-brand:hover, .navbar-brand:focus { color: #fbcbcc; text-decoration: none; }
.navbar-collapse { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.navbar-nav { display: flex; list-style: none; margin: 0; padding: 0; }
.navbar-nav > li > a { color: #ecf0f1; display: block; padding: 15px 12px; line-height: 20px; }
.navbar-nav > li > a:hover, .navbar-nav > li > a:focus { color: #fbcbcc; text-decoration: none; }
.navbar-toggle { display: none; background: transparent; border: 1px solid #c0392b; border-radius: 4px; padding: 9px 10px; cursor: pointer; }
.navbar-toggle:hover, .navbar-toggle:focus { background-color: #c0392b; }
.navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; background-color: #ecf0f1; }
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }

/* Mobile */
@media (max-width: 767px) {
  .navbar-header { flex: 1 1 100%; justify-content: space-between; }
  .navbar-toggle { display: block; }
  .navbar-collapse { flex: 1 1 100%; display: none; justify-content: flex-start; }
  .navbar-collapse.in { display: block; }
  .navbar-nav { flex-direction: column; width: 100%; }
  .navbar-nav > li > a { padding: 10px 0; }

  #header { display: flex; flex-direction: column; align-items: center; }
  .logo-left, .logo-right { float: none; margin: 6px; }

  .table, .table thead, .table tbody, .table th, .table td, .table tr { display: block; }
  .table thead tr { position: absolute; top: -9999px; left: -9999px; }
  .table tr { margin-bottom: 16px; border: 1px solid #ccc; border-bottom: 2px solid #ddd; }
  .table td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 42%; }
  .table td:empty { display: none; }
  .table td:before {
    position: absolute; top: 6px; left: 8px; width: 38%;
    padding-right: 10px; white-space: nowrap; font-weight: 300; color: #666;
  }
  #schedule td:nth-of-type(1):before { content: "Week"; }
  #schedule td:nth-of-type(2):before { content: "Date"; }
  #schedule td:nth-of-type(3):before { content: "Lecture"; }
  #schedule td:nth-of-type(4):before { content: "Material"; }
  #deadlines td:nth-of-type(1):before { content: "Week"; }
  #deadlines td:nth-of-type(2):before { content: "Deadline"; }
  #deadlines td:nth-of-type(3):before { content: "Date"; }
  #deadlines td:nth-of-type(4):before { content: "Time"; }
}

/* Holiday / no-class rows in the schedule */
.table tbody tr.holiday td { color: #999; }
.table tbody tr.holiday .lec-title { font-weight: 400; font-style: italic; }