/* INDHOLDET AF ÉT SPØRGSMÅL - ÉN BOKS */
.faq-modul {
  min-height: 90px; /* Sikrer boksens minimumhøjde */
  border: 2px solid #7284FA; /* En kant med dotLegal lilla */
  background-color: #F6F5FF; /* En baggrundsfarver der er dotLegal mørkelilla 3 */
  /* margin: 0 auto; /* Placerer modulet i midten af skærmen */
  padding: 30px 15px; /* Skaber en fast afstand indvendigt hele vejen rundt */
  margin-bottom: 20px; /* Skaber en fast afstand til nedstående modul på*/
  border-radius: 6px; /* Giver boksene afrundede kanter */
  transition: transform 0.6s ease;
}

.faq-modul.gradient {
  background: linear-gradient(#F6F5FF, #FFF); /* De to farver, baggrundsfarven i den åbne FAQ gradierer imellem */
}

/* INDHOLDET I SPØRGSMÅLET - SELVE SPØRGSMÅLET OG PILEN */
.faq-question {
  display: flex; /* Spørgsmålet og pile stille på en horisontal linje */
  justify-content: space-between; /* De placeres med al pladsen imellem sig*/
  align-items: center; /* De placeres centreret vertiaklt, så der er lige lang afstand til top og bund */
  list-style: none; /* Fjerner default-pilen - den sorte, der bruges på -<details>-tagget */
}

/* NÅR MUSEN HOLDES OVER SPØRGSMÅLET */
.faq-question:hover {
  cursor: pointer; /* Det bliver tydeligt for brugeren, at spørgsmålet er klikbart */
}

/* DET TAG HVORI SVARET PÅ SPØRGSMÅLET PRÆSENTERES */
.faq-question p {
  max-width: 595px; /* Sikrer, at der altid er minimum 45px mellem spørgsmålet og pilen */
}

/* PILEN, DER KAN TRYKKES PÅ FOR AT ÅBNE SVARET */
.faq-open-arrow {
  /* margin: 0; /* Bruges til at placeres pilen i midten af sin container*/
  transform-origin: center center; /* Omdrejningspunktet - midtpunktet for den venstre kant */
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), margin-right 0.6s cubic-bezier(0.65, 0, 0.35, 1); /* Transitionen fra åben til lukket og omvendt af afstand til højre kant og at den roterer */
  display: flex; /* Gør det muligt at centrere pilen på en horisontal linje */
  align-items: center; /* Gør det muligt at centrere pilen på en horisontal linje */
  margin-left: 45px;
}

/* NÅR KLASSEN .FQ-OPEN-ARROW FÅR KLASSEN .ROTATED TILFØJET SKER NEDSTÅENDE */
.faq-open-arrow.rotated {
  transform: rotate(90deg); /* Roterer pilen 90 grader */
  margin-right: 6px; /* Pilem skubber 10px ind, når den er åben, så dens højde kant altid flugter med FAQ'ens padding */
  display: flex; /* Gør det muligt at centrere pilen på en horisontal linje */
  align-items: center; /* Gør det muligt at centrere pilen på en horisontal linje */
  margin-left: 45px;
}

/* SVARET PÅ SPØRGSMÅLET */
.faq-answer {
  margin-top: 19px; /* Danner afstanden mellem <p>-tagget og ovenstående h3*/
}

/* CTA I BUNDEN AF HVERT SVAR */
.faq-read-more {
  text-decoration: none; /* Link har ingen direkte styling, men skal eventuelt nedarve fra master? */
  margin-bottom: 32px; /* Der danens en afstand mellem linket/CTA i bunden af svaret ned til boksens kant */
  color: #7284FA; /* Linket/CTA får en bestemt farve - den nedarver muligvis dette fra span fra master-klassen*/
  font-weight: 500; /* Matcher med modulet på forsiden med samme type links */
}

/* PILEN TIL HØJRE FOR CTA-KNAPPEN */
.link-arrow {
  margin-left: 10px; /* Afstanden mellem pilen og teksten er ALTID 10px*/
  transition: transform 0.4s ease; /* En effekt, der får pilen til at flytte sig frem og tilbage */
}

/* NÅR MUSEN HOLDES OVER LINKET */
.faq-read-more:hover .link-arrow {
  transform: translate(8px, 0px); /* Effekten knyttes til hover og pilen flytter sig på x-aksen (matcher modulet på forsiden med samme effekt (textcolumns)) */
}

/* NÅR MUSEN HOLDES OVER LINKET */
.faq-read-more:hover .link-text {
  text-decoration: underline; /* Når der hover over linket for teksten en underline - tydeligører klikbarheden */
}

/* ALLE SPØRGSMÅL I FAQ'EN*/
h3 {
  margin: 0 !important; /* Overruler master-css, hvor: padding-bottom: 22,4px; øderlægger setuppet i denne FAQ*/
}

/* SVARELEMENTET */
.faq-answer-container {
  max-height: 0; /* Indholdet i svarelementet får ikke lov at fylde noget endnu */
  opacity: 0; /* Indholdet i svar-elementet skal ikke vises endnu */
  overflow: hidden; /* Sikrer, at tekststykker der er længere end containerens egentlige længde ikke går uden for containeren, men skjules */
  transition: max-height 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1); /* Transitionen mellem makshøjden og opaciteten er glidende*/
}

 /* NÅR ELEMENTET MED KLASSEN FÅR EN  */
 .faq-answer-container.open {
   max-height: 1000px; /* Der sættes en makshøjde på, hvor meget indholdet må fylde */
   opacity: 1; /* Indholdet må nu blive vist */
 }
  
  @media only screen and (max-width: 600px) {
    .faq-modul {
      min-height: 80px; /* Minimumhøjden på boksen */
      padding: 21px 15px; /* Skaber en fast afstand indvendigt hele vejen rundt */
   }
    
    .faq-open-arrow svg {
      width: 10px; /* Mindre end de nuværende 14px */
      height: 18px; /* Mindre end de nuværende 26px */
   }
    
    .faq-open-arrow.rotated {
      margin-right: 4px; /* Sikrer, at pilen alligner med højre kant, når pilen er roteret (for åben)*/
    }
}