/* The Scripture References section on question, article, and Bible word pages —
   vanilla CSS (project preference). */

.scripture-references {
  margin: 2rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e7e5e4; /* stone-200 */
}

.scripture-references__heading {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #78716c; /* stone-500 */
}

/* Reads as a wrapped line of citations, separated by middle dots. */

.scripture-references__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #44403c; /* stone-700 */
}

.scripture-references__list li:not(:last-child)::after {
  content: "·";
  margin: 0 0.5rem;
  color: #a8a29e; /* stone-400 */
}

.scripture-references__list a {
  color: #1e3a8a; /* the site's heading blue */
  text-decoration: none;
}

.scripture-references__list a:hover {
  text-decoration: underline;
}

/* One toggle: "Show all N references" when closed, "Show fewer" when open. */

.scripture-references__more summary {
  margin: 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #57534e; /* stone-600 */
  cursor: pointer;
}

.scripture-references__show-fewer,
.scripture-references__more[open] .scripture-references__show-all {
  display: none;
}

.scripture-references__more[open] .scripture-references__show-fewer {
  display: inline;
}

/* Open, the toggle moves below the whole list instead of splitting it. Browsers that
   cannot lay out details as flex leave it in place, which still works. */

.scripture-references__more[open] {
  display: flex;
  flex-direction: column;
}

.scripture-references__more[open] summary {
  order: 1;
}

.scripture-references__more .scripture-references__list {
  margin-top: 0.25rem; /* the list's row gap, so the two lists read as one */
}