/*
-----------------------------------------
FAQ
Vanliga frågor (källans #faq): rubrik, filterknappar per ämne och frågorna som grå rutor i två kolumner från 1085 px.
Svaret visas när frågan är öppen (main.js sätter aria-expanded och tar bort hidden).
-----------------------------------------
*/

/* Som Bootstraps btn-group: inline-block med vertical-align middle, så raden inte får luft under knapparna */
.faq__filter {
  display: inline-block;
  vertical-align: middle;
  margin-block-end: var(--space-30);
}

.faq__filter-button {
  float: left;
  padding: 0.6rem 1.2rem;
  border: var(--border-width) solid var(--color-grey-cc);
  background: var(--color-white);
  color: var(--text-body);
  font: var(--font-label);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
}

.faq__filter-button + .faq__filter-button {
  margin-inline-start: -1px;
}

/* Bootstraps btn-default: hover och vald är grå med mörkare kant, fokus har den mörkaste kanten, och en vald knapp är nedtryckt (inre skugga) */
.faq__filter-button:hover,
.faq__filter-button[aria-pressed="true"] {
  border-color: var(--color-grey-ad);
  background: var(--color-grey-e6);
}

.faq__filter-button:focus {
  border-color: var(--color-grey-8c);
  background: var(--color-grey-e6);
}

.faq__filter-button[aria-pressed="true"] {
  box-shadow: var(--shadow-pressed);
}

.faq__question:hover > span:first-child,
.faq__question:focus > span:first-child {
  text-decoration: underline;
}

.faq__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-30);
}

@media (width >= 1085px) {
  .faq__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Listan har ingen egen marginal under: på källsajten (ul med 12 px marginal) slås den ihop med sista frågans 20 px */
.faq__list {
  text-align: left;
}

.faq__item {
  margin-block-end: var(--space-20);
  padding: var(--space-20);
  border: var(--border-width) solid var(--border-faq);
  background: var(--surface-faq);
  box-shadow: var(--shadow-faq);
}

.faq__item[hidden] {
  display: none;
}

/* Frågan är en rad med text och en pil som flyter åt höger efter texten, så pilen hamnar på sista raden och texten bryts som på källsajten (första raden har hela bredden).
   Radhöjden är 24 px och texten är vertical-align middle (som källans länk), vilket gör varje rad 25 px. */
.faq__question {
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-question);
  font: var(--font-body);
  text-align: left;
}

/* Raden (strut) har brödtextens typsnitt och texten Montserrat: som på källsajten, där länken (Montserrat) ligger i listposten (Merriweather). Det ger en rad på 24,5 px som avrundas till 25. */
.faq__question > span:first-child {
  font-family: var(--font-family-heading);
}

/* Pilen flyter inte med i frågans höjd: på källsajten ligger länken inte i en egen formateringsruta, så en pil som tvingas ned på en rad av sin egen höjd sticker ut under raden (in i kortets luft)
   utan att göra kortet högre. Negativ marginal under ger pilen ingen höjd för rutan. */
.faq__icon {
  float: right;
  inline-size: 1.03rem;
  block-size: var(--size-faq-icon);
  margin-block-end: calc(-1 * var(--size-faq-icon));
  font-size: var(--size-faq-icon);
}

.faq__answer {
  margin-block-start: var(--space-20);
}