/* by osmy — FAQ.
   Requiere tokens.css.
*/

body.os-site .os-faq {
  background: var(--os-paper);
}


/* =========================================================
   LAYOUT
   ========================================================= */

body.os-site .os-faq__inner {
  display: grid;

  grid-template-columns:
    minmax(15rem, 0.65fr)
    minmax(0, 1.35fr);

  gap: clamp(
    var(--os-space-7),
    8vw,
    var(--os-space-10)
  );

  align-items: start;
}


/* =========================================================
   INTRO
   ========================================================= */

body.os-site .os-faq__intro {
  position: sticky;

  top: calc(
    var(--os-anchor-offset) +
    var(--os-space-4)
  );
}

body.os-site .os-faq__intro h2 {
  max-width: 10ch;

  margin: 0;

  font-size: var(--os-type-h2);
}


/* =========================================================
   FAQ LIST
   ========================================================= */

body.os-site .os-faq__list {
  width: 100%;

  border-top: 1px solid var(--os-color-border);
}


/* =========================================================
   ITEM
   ========================================================= */

body.os-site .os-faq__item {
  margin: 0;

  border-bottom: 1px solid var(--os-color-border);
}


/* =========================================================
   SUMMARY
   ========================================================= */

body.os-site .os-faq__item summary {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    2rem;

  gap: var(--os-space-5);

  align-items: center;

  min-height: 5rem;

  padding:
    var(--os-space-5)
    0;

  cursor: pointer;

  color: var(--os-ink);

  font-family: var(--os-font-body);
  font-size: clamp(
    1rem,
    0.95rem + 0.3vw,
    1.125rem
  );

  font-weight: var(--os-weight-semibold);
  line-height: 1.4;

  list-style: none;
}


/* Ocultar marker nativo */

body.os-site .os-faq__item summary::-webkit-details-marker {
  display: none;
}

body.os-site .os-faq__item summary::marker {
  display: none;
  content: "";
}


/* =========================================================
   PLUS / MINUS
   ========================================================= */

body.os-site .os-faq__item summary::after {
  content: "+";

  display: flex;
  align-items: center;
  justify-content: center;

  width: 2rem;
  height: 2rem;

  color: var(--os-wine);

  font-family: var(--os-font-display);
  font-size: 1.75rem;
  font-weight: var(--os-weight-regular);
  line-height: 1;
}

body.os-site .os-faq__item[open] summary::after {
  content: "−";
}


/* =========================================================
   HOVER / FOCUS
   ========================================================= */

body.os-site .os-faq__item summary:hover {
  color: var(--os-wine);
}

body.os-site .os-faq__item summary:focus-visible {
  outline: none;

  color: var(--os-wine);
}

body.os-site .os-faq__item summary:focus-visible::after {
  border-radius: 999px;

  box-shadow: var(--os-focus-ring);
}


/* =========================================================
   ANSWER
   ========================================================= */

body.os-site .os-faq__answer {
  padding:
    0
    3.5rem
    var(--os-space-6)
    0;
}

body.os-site .os-faq__answer p {
  max-width: 60ch;

  margin: 0;

  color: var(--os-color-text-secondary);

  font-family: var(--os-font-body);
  font-size: 1rem;
  line-height: 1.65;
}


/* =========================================================
   OPEN STATE
   ========================================================= */

body.os-site .os-faq__item[open] summary {
  color: var(--os-wine);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  body.os-site .os-faq__inner {
    grid-template-columns:
      minmax(13rem, 0.55fr)
      minmax(0, 1.45fr);

    gap: var(--os-space-7);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  body.os-site .os-faq__inner {
    grid-template-columns: 1fr;

    gap: var(--os-space-7);
  }

  body.os-site .os-faq__intro {
    position: static;
  }

  body.os-site .os-faq__intro h2 {
    max-width: none;
  }

  body.os-site .os-faq__item summary {
    grid-template-columns:
      minmax(0, 1fr)
      1.75rem;

    gap: var(--os-space-4);

    min-height: 4.5rem;

    padding:
      var(--os-space-4)
      0;
  }

  body.os-site .os-faq__item summary::after {
    width: 1.75rem;
    height: 1.75rem;
  }

  body.os-site .os-faq__answer {
    padding:
      0
      2.5rem
      var(--os-space-5)
      0;
  }

}