/* Collapsible heading sections, built by _plugins/sections.rb.
   The bar colour comes from --section-color, set per section on the <details>.
   Everything here is scoped to .section, so ordinary headings are untouched. */

.section {
  --section-color: #6f777d;
  margin: 1.5em 0;
}

/* The bar */

.section__bar {
  display: block; /* also hides the browser's own disclosure triangle */
  padding: 0.4em 0.8em;
  border-radius: 4px; /* the theme's $border-radius, as used by .btn */
  background-color: var(--section-color);
  cursor: pointer;
  list-style: none;
}

.section__bar::-webkit-details-marker {
  display: none;
}

.section__bar:hover {
  filter: brightness(0.85);
}

.section__bar:focus-visible {
  outline: 2px solid var(--section-color);
  outline-offset: 2px;
}

/* Two classes, so this beats the theme's own `.page__content h2` rule, which
   would otherwise draw a border across the inside of the bar. */
.section__bar .section__title {
  margin: 0;
  padding: 0;
  border: 0;
  color: #fff;
  line-height: 1.4;
}

/* Every bar is flush with the content column, whatever its level. Depth shows
   in the size of the text instead, following the theme's own heading scale. */

.section__bar h1.section__title {
  font-size: 1.375em;
}

.section__bar h2.section__title {
  font-size: 1.25em;
}

.section__bar h3.section__title {
  font-size: 1.125em;
}

.section__bar h4.section__title {
  font-size: 1.0625em;
}

.section__bar h5.section__title,
.section__bar h6.section__title {
  font-size: 1em;
}

/* The triangle, which turns to point down when the section is open */

.section__marker {
  display: inline-block;
  margin-right: 0.5em;
  border: 0.35em solid transparent;
  border-right-width: 0;
  border-left-color: currentColor;
  vertical-align: 0.05em;
  transition: transform 0.15s ease;
}

.section[open] > .section__bar .section__marker {
  transform: rotate(90deg) translate(0.1em, 0.15em);
}

/* The theme adds a .header-link to every heading with an id, and shows it when
   the heading is hovered. Inside a bar it only needs to be white rather than
   the usual link blue. Two classes, to beat the theme's own a:hover rule. */

.section__bar .header-link,
.section__bar .header-link:hover,
.section__bar .header-link:visited {
  color: #fff;
  text-decoration: none;
}

/* The body */

.section__body {
  padding: 0.5em 0 0;
}

.section__body > :first-child {
  margin-top: 0;
}

.section__body > :last-child {
  margin-bottom: 0;
}


/* Paper doesn't collapse. sections.js opens every section before printing,
   which is what actually does the work; this covers browsers that run the
   print stylesheet without JS. */

@media print {
  .section::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  .section__marker,
  .section__bar .header-link {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section__marker {
    transition: none;
  }
}