.faq-module {
  padding: 5px;
  display: flex;
  flex-direction: column;
  column-gap: var(--space-96);
}

.faq-module .top-wrapper,
.faq-module .tab-wrapper { 
  margin-bottom: var(--space-48);
}

.faq-module .visma-module-header > * {
  width: 100%;
}

.faq-accordion{
  border-bottom: 1px solid #D6D6D6;
}

.faq-item-btn {
  background-color: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  font: inherit;
}

.faq-module.tag-tabs .cta.-primary {
  display: none;
}

.faq-module.tag-tabs .faq-item {
  border-bottom: none;
  margin-bottom: var(--space-32)
}

.faq-item-btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 4px;
}

.faq-accordion > h3:after {
	display: inline-block;
  min-width: 2rem;
	height: 1.6rem;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: auto;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: auto;
  background-color: currentColor; /*[1]*/
	speak-as: none;
  align-self: center;
}

.faq-accordion.active > h3:after {
  transform : rotate(180deg);
}

.accordion {
  text-align: left;
  outline: none;
  transition: 0.4s;
  padding: var(--space-32) 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  column-gap: 10px;
}

.faq-accordion.active .accordion {
  padding-bottom: var(--space-24);
}

.faq-accordion:nth-child(1) .accordion {
  padding-top: 0;
}

.accordion:hover, 
.accordion .faq-item-btn:hover,
.tab-wrapper .tag-filter-btn,
.tab-wrapper .show-all {
  cursor: pointer;
}

.panel {
  overflow: hidden;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel p {
  margin-bottom: var(--space-24);
  padding-right: var(--space-24);
}

.tab-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.tag-filter-btn.active,
.show-all.active {
  background-color: var(--cta-hover-background-color);
  color: var(--cta-hover-text-color);
  border: 2px solid transparent;
}

.tag-filter-btn.cta.-secondary:focus:not(:focus-visible),
.show-all:focus:not(:focus-visible) {
  box-shadow: none;
}

.tag-filter-btn:after,
.show-all:after {
  display: none;
 }

.faq-title {
  margin-bottom: var(--space-8);
}

@media screen and (min-width: 1050px) {
  .faq-module:not(.-stacked) {
    flex-direction: row;
  }

  .faq-module.tag-tabs {
    flex-direction: column;
  }

  .faq-wrapper {
    min-width: 50%;
    width: 100%;
  }
  
  .accordion { 
    padding: var(--space-48) 0;
  }

  .tab-wrapper:has(.-tabs) {
    display: flex;
    border-bottom: 2px solid;
    border-color: color-mix(in srgb, var(--site-text-color), transparent 85%);
    gap: 0;
  }

  .faq-module .top-wrapper {
    width: 100%;
  }

  .faq-module.tag-tabs .visma-module-header :last-child{
    margin-bottom: 0;
  }

  .faq-module.tag-tabs .visma-module-header {
    margin-bottom: var(--space-96);
  }

  .tab-wrapper .tag-filter-btn.-tabs,
  .tab-wrapper .show-all.-tabs {
    margin-right: 5px;
    background: none;
    border: none;
    --font-size: 2.4rem;
    outline: inherit;
    color: var(--site-brand-color);
    border-radius: 0;
    margin: 0 var(--space-24);
    padding: var(--space-12) 0;
    border-bottom: 4px solid transparent !important;
  }

  .top-section__title {
    margin-bottom: 0;
  }

  .top-section__title + div {
    margin-top: var(--space-24);
  }

  .top-section__title + .cta {
    margin-top: var(--space-64);
  }

  .tab-wrapper .show-all.-tabs {
    margin-left: 0;
  }

  .tab-wrapper .tag-filter-btn.active.-tabs,
  .tab-wrapper .show-all.active.-tabs {
    border-bottom: 4px solid var(--site-brand-color) !important;
    color: var(--site-text-color);
    background-color: transparent;
    outline: 0px solid transparent;
  }

  .faq-module.tag-tabs .faq-item {
    margin-bottom: var(--space-48);
  }

}

@media (min-width: 481px) {
  .faq-module .top-section .cta {
    width: max-content;
  }
/* === FAQ-moduulin pystyvälistys (14.10.2026) ===
   Teeman otsikkotyylit tuovat moduulin sisään isoja marginaaleja
   (otsikolle 64px ylös, ingressille 96px alas, kysymysriveille 64px ylös).
   Ne nollataan, ja jokainen väli asetetaan yhdestä paikasta.
   Moduulin erotus muista moduuleista tulee editorin padding-asetuksesta. */

/* 1. Otsikkolohkon sisäiset marginaalit pois */
.faq-module .top-wrapper.visma-module-header > *:first-child {
    margin-top: 0;
}

.faq-module .top-wrapper.visma-module-header > *:last-child {
    margin-bottom: 0;
}

/* 2. Väli otsikosta ensimmäiseen kysymykseen — SÄÄTÖ A */
.faq-module .top-wrapper.visma-module-header {
    margin-bottom: var(--space-48);
}

/* 3. Kysymysrivien keskinäinen väli — SÄÄTÖ B.
      Korvaa teeman 64px. Tämä on sama arvo kuin kysymyksen ja
      erotinviivan välinen tila, joten viiva asettuu keskelle. */
.faq-module .faq-wrapper > .faq-accordion > *:first-child {
    margin-top: var(--space-48);
}

/* 4. Ensimmäinen kysymysrivi: väli tulee jo otsikkolohkolta.
      Jos tag-napit ovat päällä, tämä ei osu ja napit hoitavat erotuksen. */
.faq-module .faq-wrapper > .faq-accordion:first-child > *:first-child {
    margin-top: 0;
}