/*
  Disclosure (rozbaľovací obsah): extra information that opens on click, e.g. frequently asked questions.
  Looks like the accordion on saleziani.sk: thin dividers, the question as a heading in the link colour,
  the chevron on the right. Rules: rozbalovaci-obsah.html.

  <details class="details">
    <summary class="details__summary">
      <h3 class="details__title">Otázka</h3>
      <svg class="icon details__icon" viewBox="0 -960 960 960" aria-hidden="true">…expand_more…</svg>
    </summary>
    <div class="details__content"><p>Odpoveď.</p></div>
  </details>

  - Native details and summary: works without JavaScript, with the keyboard and with screen readers.
  - The question is a heading (h2–h4 by the page outline), so screen readers list it among headings.
  - Several in a row form a list; each opens on its own.
  - Only for extra information. What everyone needs stays visible.
*/

.details {
  border-top: var(--border-width) solid var(--border-subtle-neutral);
  border-bottom: var(--border-width) solid var(--border-subtle-neutral);
}

.details + .details {
  border-top: 0;
}

.details__summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--tap);
  padding: var(--space-4) 0;
  color: var(--fg-link);
  cursor: pointer;
  list-style: none;
}

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

/* Heading size h4 whatever its level; weight from base.css */
.details__title {
  margin: 0;
  font-size: var(--font-size-h4);
  letter-spacing: normal;
}

.details__summary:hover .details__title {
  text-decoration-line: underline;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 3px;
}

.details__icon {
  transition: transform 0.2s;
}

.details[open] > .details__summary .details__icon {
  transform: rotate(180deg);
}

.details__content {
  padding: 0 0 var(--space-5);
}

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

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