/*
	Custom additions on top of Grayscale (startbootstrap.com/theme/grayscale) for the Robot Learning Course site.
*/

:root {
  --accent-blue: #2f5fdb;
  --accent-blue-dark: #21409a;
  --accent-green: #1fa97c;
}

/* Replace the flat black About section with a vibrant colorful gradient */
.about-section {
  background: linear-gradient(to bottom, #2f5fdb 0%, #2c4a8f 55%, #1c7a5a 100%) !important;
  padding-top: 4rem !important;
  padding-bottom: 2rem;
}

/* Teachers section had no padding at all, causing it to sit flush against About */
.people-section {
  padding: 6rem 0;
}

/* The template's 5rem paragraph margin assumed a big image below it; we don't have one */
.about-section p {
  margin-bottom: 1.5rem !important;
}

/* Humanoid robot photo, with a plain dark gradient (no color tint) for text legibility */
.masthead {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.8) 100%) center / cover no-repeat,
    url("../assets/img/bg-masthead.jpg") center 25% / cover no-repeat !important;
}

.masthead-credit {
  position: absolute;
  bottom: 0.6rem;
  right: 1rem;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.45);
  z-index: 2;
}

.masthead-credit a {
  color: rgba(255, 255, 255, 0.6);
}

/* Give the primary button an accent color instead of the template's muted teal */
.btn-primary {
  --bs-btn-bg: var(--accent-blue) !important;
  --bs-btn-border-color: var(--accent-blue) !important;
  --bs-btn-hover-bg: var(--accent-blue-dark) !important;
  --bs-btn-hover-border-color: var(--accent-blue-dark) !important;
  --bs-btn-active-bg: var(--accent-blue-dark) !important;
  --bs-btn-active-border-color: var(--accent-blue-dark) !important;
}

.btn-outline-light:hover {
  background-color: var(--accent-blue) !important;
  border-color: var(--accent-blue) !important;
}

#mainNav .navbar-brand i {
  color: var(--accent-blue);
  margin-right: 0.35rem;
}

.masthead-tagline {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.05rem;
}

/* Pills */

.pill-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0;
  padding: 0;
}

.pill-list li {
  font-size: 0.7rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  border: 1px solid rgba(95, 155, 255, 0.45);
  background: rgba(47, 95, 219, 0.18);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  color: #bcd2ff;
}

/* Feature row (About section) */

.feature-row {
  margin-top: 2rem;
}

.feature-row > div {
  margin-bottom: 1.5rem;
}

.feature-row i {
  font-size: 1.6rem;
  color: #5b9bff;
  margin-bottom: 0.6rem;
  display: block;
}

/* Teachers */

.teacher-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent-blue);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Colorful dark sections (recurring schedule + resources) instead of flat black */

.schedule-section,
.resources-section {
  padding: 6rem 0;
  background: linear-gradient(160deg, #24418f 0%, #2c5a8a 55%, #1c7a5a 100%);
}

.schedule-section .table > :not(caption) > * > * {
  background-color: transparent;
}

tr.table-lab td {
  color: #baffdf;
  font-weight: 700;
}

.schedule-section thead {
  --bs-table-bg: #1f3a75;
}

/* Modules / weekly-schedule sections */

.modules-section {
  padding: 6rem 0;
}

.module-hours {
  font-weight: 300;
  font-size: 0.75rem;
  color: #868e96;
}

.accordion-button:not(.collapsed) {
  color: var(--accent-blue-dark);
  background-color: #e6edff;
  box-shadow: inset 0 -1px 0 rgba(47, 95, 219, 0.2);
}

.accordion-button:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 0.2rem rgba(47, 95, 219, 0.25);
}

.accordion-button i {
  color: var(--accent-blue);
}

/* Weekly schedule: tint alternating weeks so each week is easy to tell apart */
#weekly-schedule tbody tr.week-1,
#weekly-schedule tbody tr.week-3,
#weekly-schedule tbody tr.week-5,
#weekly-schedule tbody tr.week-7,
#weekly-schedule tbody tr.week-9,
#weekly-schedule tbody tr.week-11,
#weekly-schedule tbody tr.week-13 {
  --bs-table-bg: #ffffff;
}

#weekly-schedule tbody tr.week-2,
#weekly-schedule tbody tr.week-4,
#weekly-schedule tbody tr.week-6,
#weekly-schedule tbody tr.week-8,
#weekly-schedule tbody tr.week-10,
#weekly-schedule tbody tr.week-12,
#weekly-schedule tbody tr.week-14 {
  --bs-table-bg: #e6edff;
}

/* Center the Week column. Rows that continue a rowspan have no Week cell,
   so only target the first cell of full 6-cell rows. */
#weekly-schedule thead th:first-child,
#weekly-schedule tbody td:first-child:nth-last-child(6) {
  text-align: center;
}

/* Resources */

.resource-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.25rem 1.5rem;
  background: rgba(95, 155, 255, 0.07);
  border: 1px solid rgba(95, 155, 255, 0.2);
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.resource-card:hover {
  background: rgba(95, 155, 255, 0.15);
  border-color: rgba(95, 155, 255, 0.4);
}

.resource-card i {
  font-size: 1.6rem;
  color: #5be0b3;
  min-width: 1.8rem;
  text-align: center;
}

.resource-card h6 {
  color: #ffffff;
}

/* Weekly lecture schedule placeholder */

.schedule-placeholder {
  text-align: center;
  padding: 3rem 1rem !important;
  font-style: italic;
  color: #6c757d;
}

.schedule-placeholder i {
  font-size: 1.8rem;
  color: var(--accent-blue);
}

/* Archive + footer: swap flat black for a deep colorful gradient */

.archive-section.bg-black {
  padding: 5rem 0;
  background: linear-gradient(135deg, #2c5a8a 0%, #2f5fdb 55%, #1c7a5a 100%) !important;
}

.archive-section .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.7);
}

footer.bg-black {
  background: #1f3a75 !important;
}