/* Styles shared for the <details> blocks used on multiple pages
   Use the container class `.em-details` around the block
   to apply these styles in a targeted way. The rules also target
   `.entry-content details` by default for page content.
*/

.entry-content details,
.em-details details {
  margin: 1.1rem 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(0,0,0,0.06);
  background: var(--site-color-tertiary, #faf6fb);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02) inset;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.entry-content summary,
.em-details summary {
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none; /* removes the native marker */
  display: block;
  padding: 0.2rem 0.2rem;
  outline: none;
}

/* Hide the native marker on WebKit */
.entry-content summary::-webkit-details-marker,
.em-details summary::-webkit-details-marker {
  display: none;
}

/* Chevron custom */
.entry-content summary::after,
.em-details summary::after {
  content: '\25B8';
  float: right;
  transition: transform 200ms ease;
  transform-origin: center;
  color: var(--site-color-text-dark-safe);
}

/* Rotation when open */
.entry-content details[open] summary::after,
.em-details details[open] summary::after {
  transform: rotate(90deg);
}

/* Inner content */
.entry-content details > *:not(summary),
.em-details details > *:not(summary) {
  margin-top: 0.6rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(0,0,0,0.03);
}

/* Light accent when open */
.entry-content details[open],
.em-details details[open] {
  background: var(--site-color-tertiary);
}

/* Mobile */
@media (max-width: 600px) {
  .entry-content details,
  .em-details details {
    padding: 0.85rem 1rem;
    margin: 1.25rem 0;
  }
  .entry-content summary,
  .em-details summary {
    font-size: 1rem;
  }
}