/**
 * HIMC Agenda Tables
 * Owns every rule for the .agenda-table markup on /himc26/agenda/.
 * Previously split between inline style attributes and additional-style.css.
 */

/* Table layout ---------------------------------------------------------- */

.agenda-table {
  width: 100%;
}

.agenda-table thead tr,
.agenda-table thead th {
  height: 65px;
}

.agenda-table .time-col {
  width: 22.5%;
}

.agenda-table .content-col {
  width: 77.5%;
}

/* Day header ------------------------------------------------------------ */

.day-header {
  height: 66px;
  background: #002f70;
}

.day-header h4 {
  margin-top: 0.5em;
  color: #fff;
}

/* Session title / accordion trigger ------------------------------------- */

.session-title {
  font-weight: 700;
  font-size: 1.2em;
  margin-bottom: 0.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  cursor: pointer;
}

/* Nothing to expand, so don't invite the click */
.session-title:not(:has(~ .session-content)) {
  cursor: default;
}

.session-title span.details {
  font-weight: 400;
  font-size: 0.8em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px 5px;
  border: 1px solid #002f70;
}

.session-title .details::after {
  font-family: "FontAwesome";
  font-weight: 900;
  content: "\f105"; /* fa-chevron-right */
  display: inline-block;
  transition: transform 0.2s ease;
}

/* When open: arrow points down */
.session-title.active .details::after {
  content: "\f107"; /* fa-chevron-down */
}

/* Speakers — always visible, sits between the title and the description -- */

.session-people {
  margin-bottom: 0.75em;
}

.session-person {
  margin: 0 0 0.25em;
}

.session-person strong {
  font-style: italic;
}

.session-person .person-name {
  color: #002f70;
}

/* Collapsible description ----------------------------------------------- */

.session-content {
  display: none;
}

.session-title.active ~ .session-content {
  display: table-row;
}

/* Breakouts ------------------------------------------------------------- */

.session-speaker,
.time-label {
  display: block;
  font-weight: 600;
}

.breakout-box {
  padding: 10px 5px;
  border-bottom: 1px solid #ccc;
}

.breakout-title {
  font-weight: 700;
}

.breakout-container div.breakout-box:last-of-type {
  border-bottom: none;
}

/* Responsive ------------------------------------------------------------ */

@media (min-width: 992px) {
  .agenda-table .time-col {
    width: 20%;
  }

  .agenda-table .content-col {
    width: 80%;
  }
}