/* =========================================================
   INFO 290 — Spring 2026
   style.css (Bootstrap 3.x)
   Mobile-friendly + keeps your existing look
   ========================================================= */

/* ---------- Page layout ---------- */
body {
  padding-top: 70px;   /* required for .navbar-fixed-top */
  padding-bottom: 20px;
}

.navbar {
  margin-bottom: 20px;
}

/* Fix anchor jump offset under fixed navbar */
:target::before {
  content: "";
  display: block;
  height: 70px;
  margin-top: -70px;
}

/* ---------- Tables (general) ---------- */
td, th {
  padding: 6px 10px;
  vertical-align: top;
}

/* ---------- Schedule table ---------- */
table.plan {
  width: 100%;
  border-collapse: collapse;
}

.plan td {
  border-bottom: 1px solid #444;
}

/* Module banner row inside schedule table */
td.small-section-header,
.small-section-header {
  background-color: #f5f5f5;
  color: #333333;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}

/* Optional borders class you used previously */
td.side-borders {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

/* ---------- Typography helpers ---------- */
span.not-required {
  color: #B0B0B0;
  font-weight: 700;
}

span.paper-header {
  color: #2A70E8;
  font-weight: 700;
  font-size: 14pt;
}

span.section-header {
  color: #3f3f3f;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 20pt;
}

h1.TitleHeader {
  color: #FFFFFF;
  background-color: #000000;
  font-weight: 700;
  font-size: 30pt;
}

td.section-header {
  color: #FFFFFF;
  background-color: #3f3f3f;
  font-weight: 700;
  font-size: 20pt;
}

td.small-comment-header {
  background-color: rgba(0,0,0,0.5);
  color: #FFFFFF;
}

tr.exam {
  background-color: rgba(0,128,128,0.5);
  color: #FFFFFF;
}

tr.flipped {
  background-color: rgba(255,0,0,0.3);
}

tr.guest {
  background-color: rgba(0,255,0,0.3);
}

span.theory {
  color: #CF0000;
  font-weight: 700;
}

p.comment {
  color: #B0B0B0;
  font-style: italic;
  font-size: 10pt;
}

/* ---------- Links ---------- */
a.nav {
  color: #ffffff;
}

a.nav:hover {
  color: rgba(255,0,0,0.9);
}

a.lecturelink {
  color: rgb(255,0,0);
}

a.lecturelink:hover {
  color: rgb(0,0,255);
}

/* ---------- Instructional team photos/table ---------- */
.team-photo {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 6px;
  max-width: 100%;
}

/* Remove borders from instructional team table */
#instructional_team table,
#instructional_team th,
#instructional_team td {
  border: none !important;
}

/* ---------- Jumbotron ---------- */
.jumbotron {
  text-align: left;
  padding: 30px;
  margin-top: 0;
}

.jumbotron h1 {
  font-size: 52px;
  line-height: 1.2;
  word-break: break-word;
}

/* ---------- Mobile adjustments ---------- */
@media (max-width: 768px) {
  body {
    padding-top: 60px; /* slightly smaller on phones */
  }

  :target::before {
    height: 60px;
    margin-top: -60px;
  }

  .jumbotron {
    padding: 18px;
  }

  .jumbotron h1 {
    font-size: 30px;
    line-height: 1.15;
    margin-top: 0;
  }

  .jumbotron h3 {
    font-size: 16px;
    line-height: 1.35;
  }

  /* Photos should scale down nicely on small screens */
  .team-photo {
    width: 100%;
    height: auto;
  }

  /* Make the schedule table usable on phones:
     - allow horizontal scroll (requires wrapping in <div class="table-responsive"> in HTML)
     - reduce font + keep most columns unbroken
     - allow Topic column to wrap */
  table.plan {
    font-size: 12px;
  }

  table.plan th,
  table.plan td {
    padding: 6px 8px;
    white-space: nowrap;
  }

  /* Topic column wraps */
  table.plan td:nth-child(3) {
    white-space: normal;
    min-width: 220px;
  }
}