/* ==================================================
   Pagina: FAQ
   Layout allineato alla ricerca documenti, elenco accordion.
================================================== */

.page-faq {
  --vita-space-scale: 0.72;
}

.page-faq__head {
  padding-top: calc(clamp(28px, 3.8vw, 72px) * var(--vita-space-scale));
}

.page-faq__results {
  position: relative;
  z-index: 1;
  overflow: visible;
  padding-block: calc(clamp(28px, 4vw, 64px) * var(--vita-space-scale))
    calc(clamp(48px, 6vw, 96px) * var(--vita-space-scale));
  border-bottom: 11px solid rgba(255, 255, 255, 0.9);
}

.page-faq .page-faq__main,
body.page-faq main {
  overflow: visible;
}

.page-faq__hero {
  position: relative;
  z-index: 1;
  overflow: visible;
  padding-bottom: calc(clamp(12px, 1.8vw, 28px) * var(--vita-space-scale));
}

.page-faq__empty {
  margin-top: 0;
}

.faq-accordion {
  margin: 0;
}

.faq-accordion__item {
  border-bottom: 3px solid rgba(255, 255, 255, 0.92);
}

.faq-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(clamp(12px, 1.6vw, 24px) * var(--vita-space-scale));
  min-height: calc(clamp(52px, 4.4vw, 76px) * var(--vita-space-scale));
  padding-block: calc(clamp(10px, 1vw, 16px) * var(--vita-space-scale));
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(
    calc(20px * var(--user-heading-scale)),
    calc(2.05vw * var(--user-heading-scale)),
    calc(34px * var(--user-heading-scale))
  );
  font-weight: 600;
  line-height: 1.12;
  list-style: none;
  cursor: pointer;
}

.faq-accordion__summary::-webkit-details-marker {
  display: none;
}

.faq-accordion__question {
  flex: 1 1 auto;
  min-width: 0;
}

.faq-accordion__arrow {
  position: relative;
  flex: 0 0 clamp(18px, 1.6vw, 24px);
  width: clamp(18px, 1.6vw, 24px);
  height: clamp(18px, 1.6vw, 24px);
  transition: transform 0.28s ease;
  transform: rotate(0deg);
}

.faq-accordion__arrow::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(10px, 0.9vw, 14px);
  height: clamp(10px, 0.9vw, 14px);
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translate(-65%, -70%) rotate(45deg);
  content: "";
}

.faq-accordion__item[open] > .faq-accordion__summary .faq-accordion__arrow {
  transform: rotate(180deg);
}

.faq-accordion__panel {
  color: var(--white);
  background: var(--blue);
}

.faq-accordion__answer {
  padding: 0 calc(clamp(4px, 0.5vw, 8px) * var(--vita-space-scale))
    calc(clamp(22px, 2.4vw, 36px) * var(--vita-space-scale));
  font-size: clamp(
    calc(17px * var(--user-text-scale)),
    calc(1.22vw * var(--user-text-scale)),
    calc(21px * var(--user-text-scale))
  );
  line-height: 1.5;
  font-weight: 400;
}

.faq-accordion__answer p {
  margin: 0 0 calc(0.85em * var(--vita-space-scale));
}

.faq-accordion__answer p:last-child {
  margin-bottom: 0;
}

.faq-accordion__answer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.faq-accordion__answer a:hover,
.faq-accordion__answer a:focus-visible {
  color: var(--yellow);
}

@media (max-width: 599px) {
  .faq-accordion__summary {
    min-height: calc(clamp(48px, 12vw, 64px) * var(--vita-space-scale));
    font-size: clamp(
      calc(18px * var(--user-heading-scale)),
      calc(4.8vw * var(--user-heading-scale)),
      calc(24px * var(--user-heading-scale))
    );
  }

  .faq-accordion__answer {
    font-size: clamp(
      calc(16px * var(--user-text-scale)),
      calc(4vw * var(--user-text-scale)),
      calc(19px * var(--user-text-scale))
    );
  }
}