.container {
  max-width: 100% !important; /* Override Bootstrap's container width */
  width: 100%;
  padding: 0 1rem; /* Optional: Adjust padding for readability */
}

.navbar {
  background-color: #84182b;
}

.navbar .navbar-brand, .nav-link {
  color: #FFFFFF;
}

table, th, td {
  border: 2px solid;
  border-color: #FFFFFF;
}

table > thead > tr:first-child > th,
table > tbody > tr.table-header > td {
  --bs-table-bg: #84182b;
  --bs-table-color: #FFFFFF;
  color: #FFFFFF !important;
  background-color: #84182b !important;
  box-shadow: none !important;
  font-weight: bold;
}

table > tbody > tr:nth-child(even):not(.section-header) > td {
  background-color: #f2d6d9;
}

table td, table th {
  padding-left: 10px; /* Adjust the value as needed for desired spacing */
}

h1 {
  text-align: center;
}

.section-header {
  background-color: #b24b5a!important;
  text-align: center;
  font-weight: bold;
  color: white !important;
}

.row {
  display: flex;
  flex-wrap: wrap; /* Ensures responsiveness */
  gap: 20px; /* Adds space between columns */
}

.col {
  /* Basis of 300px keeps two columns side by side on wide screens and wraps
     them to one per line on narrow ones; min-width: 0 lets a wrapped column
     shrink to the viewport instead of forcing the page wider than the screen. */
  flex: 1 1 300px;
  min-width: 0;
  box-sizing: border-box; /* Includes padding in width */
}

/* The schedule table has five columns, so its minimum content width is wider
   than a phone screen. Without this it overflows the body, which makes the
   page wider than the viewport and leaves every paragraph looking narrow
   next to it. Scrolling the table inside its own box keeps the table and the
   surrounding text exactly the same width. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.grade-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.grade-table table {
  min-width: 680px;
}

/* On phones, make the table *fit* rather than scroll. Its minimum width is
   set by the longest unbreakable words ("Decompositions", "Assignments"),
   which together need more room than a phone screen. Allowing those to wrap
   removes that floor, and the smaller type and tighter padding mean a word
   rarely has to break at all. The .table-scroll wrapper above stays as a
   fallback for anything narrower than this can handle. */
@media (max-width: 768px) {
  /* table-layout: fixed sizes columns from the percentages below instead of
     from content, so the table always fits the screen. Do NOT use
     `overflow-wrap: anywhere` here: it drops each column's min-content width
     to one character, which makes the layout squeeze the columns until short
     headings like "Slides" stack vertically one letter per line. */
  .table-scroll table {
    font-size: 0.75rem;
    table-layout: fixed;
    width: 100%;
  }

  .table-scroll td {
    padding-left: 4px;
    padding-right: 2px;
    overflow-wrap: break-word; /* break a word only if it cannot fit */
  }

  /* Widths are sized so the longest word each column must hold still fits on
     one line on a 360px screen: "Assignments" (66px), "Decompositions" (84px),
     and "Slides" (36px) at this font size. Section headers are excluded
     because they are a single colspan="5" cell. */
  .table-scroll tr:not(.section-header) > td:nth-child(1) { width: 13%; }
  .table-scroll tr:not(.section-header) > td:nth-child(2) { width: 28%; }
  .table-scroll tr:not(.section-header) > td:nth-child(3) { width: 22%; }
  .table-scroll tr:not(.section-header) > td:nth-child(4) { width: 14%; }
  .table-scroll tr:not(.section-header) > td:nth-child(5) { width: 23%; }
}

/* Images resize responsively */

.responsive-img {
  display: block;
  margin: 1em auto;
  max-width: 100%;
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .responsive-img {
    width: 700px;
  }
}

/* Math for long equations */
/* Scrollable block math on small screens */
mjx-container[jax="SVG"] {
  overflow-x: auto;
  overflow-y: hidden;
  display: block;
  max-width: 100%;
}

/* Optional: prevent SVGs from exceeding container */
mjx-container[jax="SVG"] > svg {
  max-width: 100%;
  height: auto;
}

/* Collapsible proof block */
.proof-block details {
  margin: 1em 0;
  padding: 0.5em 1em;
  border-left: 4px solid #009090; /* course teal accent */
  background: #f8f9fa;
  border-radius: 6px;
}

.proof-block summary {
  font-weight: bold;
  cursor: pointer;
  list-style: none;
}

.proof-block summary::-webkit-details-marker {
  display: none; /* hide default marker */
}

.proof-block summary::before {
  content: "▶ ";
  transition: transform 0.2s ease;
}

.proof-block[open] summary::before,
.proof-block details[open] summary::before {
  transform: rotate(90deg);
  display: inline-block;
}