/*
---------------------------------------------------------
FRÅGOR OCH SVAR (FAQ)
--------------------------------------------------------- */


/* Grund: knapparna börjar alltid med 2rem ovanför */
.sv-vertical.lp-decoration-faq {
    margin-top: 1em;
    margin-bottom: 0;
}

/* Om en knapp följer direkt på en annan knapp → minska avståndet mellan dem */
.sv-vertical.lp-decoration-faq + .sv-vertical.lp-decoration-faq {
    margin-top: 0.9em;
}

/* Sätt 2rem under sista modulen i containern (om det är en knapp) */
.sv-vertical.lp-decoration-faq:last-child {
    margin-bottom: 2em !important;
}

.lp-decoration-faq > *:nth-child(odd),
.lp-decoration-faq > *:nth-child(even) {
  box-sizing: border-box;
}


/*
---------------------------------------------------------
# KNAPP/FRÅGA
--------------------------------------------------------- */

.lp-decoration-faq > *:nth-child(odd) {
  background: #86b028;
  background-color: #86b028;   /* säker grundfärg */
  background-position: 98% center;
  background-repeat: no-repeat;
  background-size: 25px;
  border: 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: block;
  text-align: left;
  width: 100%;
  font-size: 1.6rem;
/*  font-weight: 600; */
  transition: all .3s ease;
  background-image: none;
  position: relative;
  padding: 12px 45px 12px 16px !important;
}

/* PIL – vitt ">" – nu pekar den NEDÅT i grundläget */
.lp-decoration-faq > *:nth-child(odd)::after {
  content: "›";
  color: #fff;
  position: absolute;
  right: 16px;
  top: 50%;
  /* Grundläge: rotera 90° så pilen pekar nedåt */
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
  font-size: 3rem;
  font-weight: 700;
  transition: transform .3s ease, top .3s ease;
  pointer-events: none;
}

/* FAQ ÖPPEN – pilen pekar UPPÅT (ingen studs i viloläge) */
.lp-decoration-faq > [aria-expanded="true"]:nth-child(odd)::after {
  transform: translateY(-50%) translateX(-6px) rotate(-90deg); /* uppåt */
  animation: none;
}

/* ENDAT HOVER ska ge mörkorange */
.lp-decoration-faq > *:nth-child(odd):hover {
  background-color: #779623;
  outline: 0;
}

/* Hover: FAQ STÄNGD – pilen pekar nedåt och studsar NEDÅT */
.lp-decoration-faq > *:nth-child(odd):hover::after {
  transform: translateY(-50%) rotate(90deg);
  animation: faq-arrow-bounce 0.6s ease-in-out infinite;
}

/* Hover: FAQ ÖPPEN – pilen pekar uppåt och studsar UPPÅT */
.lp-decoration-faq > [aria-expanded="true"]:nth-child(odd):hover::after {
  transform: translateY(-50%) translateX(-6px) rotate(-90deg);
  animation: faq-arrow-bounce-up 0.6s ease-in-out infinite;
}

/* Lite studs NEDÅT (stängd) – original */
@keyframes faq-arrow-bounce {
  0%, 100% { top: 50%; }
  50%      { top: 54%; } /* lite nedåt */
}

/* Ny studs UPPÅT (öppen) */
@keyframes faq-arrow-bounce-up {
  0%, 100% { top: 50%; }
  50%      { top: 46%; } /* lite uppåt */
}

/* Tillgänglig fokusmarkering (icke-störande) */
.lp-decoration-faq > *:nth-child(odd):focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}


/*
---------------------------------------------------------
# REGLER SOM FIXAR CHROME-BUGGEN (bakgrund fastnar)
--------------------------------------------------------- */

/* Återställ alltid färgen när det INTE är hover */
.lp-decoration-faq > *:nth-child(odd):not(:hover) {
  background-color: #86b028;
}

/* Även om FAQ är öppen ska den inte bli mörkorange utan hover */
.lp-decoration-faq > *:nth-child(odd)[aria-expanded="true"]:not(:hover) {
  background-color: #86b028;
}


/*
---------------------------------------------------------
# RUBRIKER I KNAPPARNA
--------------------------------------------------------- */

.lp-decoration-faq > *:nth-child(odd) h2,
.lp-decoration-faq > *:nth-child(odd) h3,
.lp-decoration-faq > *:nth-child(odd) .normal,
.lp-decoration-faq > *:nth-child(odd) .brodtext {
   color: #fff !important;
   display: block;
   font-size: 1.6rem !important;
   font-weight: 500;
   margin-bottom: 0px;
}


/*
---------------------------------------------------------
# SVAR
--------------------------------------------------------- */

.lp-decoration-faq > *:nth-child(even) {
   background: #fff;
   border: 0.5px solid #ddd;
   border-top: 0;
   padding: 1.5em 1.5em 0.5em 1.5em;
}