/* Styling for a Bible chapter. */

.title {
  /* The title shows in the middle. */
  text-align: center;
  font-size: 140%;
}

table {
  /* Break long words. */
  overflow-wrap: break-word;
  word-break: break-word;
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 4px 6px rgb(0 0 0 / 5%);
  border-radius: 8px;
  overflow: hidden;
}

tr {
  transition: background-color 0.2s ease;
}

tr:hover {
  background-color: #f1f5f9;
}

td {
  /* The content of the cell aligns towards the top. */
  vertical-align: top;

  /* A very light, thin border */
  border-bottom: 1px solid #eaeaea;

  /* Add padding to give the text room to breathe. */
  padding: 1em 0.5em;
  font-size: 1.1rem;
  line-height: 1.7;
}

tr:last-child td {
  /* Remove the border from the very last row. */
  border-bottom: none;
}

#bar,
#tray {
  font-style: italic;
  color: var(--midnight-blue);
}

#bar {
  display: flex;
  margin: 1rem auto 2rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 12px;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 5%);
}

#bar label {
  flex: 1;
  text-align: center;
  cursor: pointer;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  transition: background-color 0.2s;
}

#bar label:hover {
  background-color: #e9ecef;
}

#tray {
  /* By default, the tray is hidden and the bar is visible. */
  display: none;
}

:target.verse {
  background-color: var(--anchor-highlight);
}

@media (width <= 500px) {
  /* Hide the language bar. */
  #bar {
    display: none;
  }

  /* Show the language tray instead. */
  #tray {
    display: block;
    float: right;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
  }

  /* Push the title to the left, so it will show next to the language tray. */
  .title {
    float: left;
  }

  /* Reduce the cell padding. */
  td {
    padding: 0.25em 0.125em;
    font-size: 1rem;
  }
}