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

.lp-decoration-faq {
   margin: 2rem 0;
}

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


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

.lp-decoration-faq > *:nth-child(odd) {
  background: #f6840c;
  background-color: #f6840c;   /* 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;
  margin-top: 15px;
  text-align: left;
  width: 100%;
  font-size: 1.7rem;
  font-weight: 600;
  transition: all .3s ease;
  background-image: none;
  position: relative;
}

/* PIL – vitt ">" – nu pekar den NEDÅT i grundläget */
.lp-decoration-faq > *:nth-child(odd)::after {
  content: "›";
  color: #fff;
  position: absolute;
  right: 20px;
  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: #e27310;
  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: #f6840c;
}

/* Ä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: #f6840c;
}


/*
---------------------------------------------------------
# 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;
   margin-bottom: 0;
   padding: 5px 40px 5px 5px;
   display: block;
   font-size: 1.7rem !important;
   font-weight: 600;
}


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

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