/**
 * @file
 * SVF - Preguntas frecuentes (c-pfrec).
 *
 * Franja de color a todo el ancho con título de sección y una lista de
 * preguntas en acordeón (un panel abierto a la vez). Cuando hay más de 5
 * preguntas, al pie aparece el botón "Ver todas".
 *
 * El acento sale del token --svf-acento del tema (púrpura en Rionegro,
 * verde en Medellín y Home); el componente no trae reglas .portal-*.
 */

.c-pfrec {
  /* Franja y eje */
  --pfrec-bg: #e4e2ef;
  --pfrec-eje: 1080px;
  --pfrec-franja: 64px;
  --pfrec-lado: 20px;

  /* Acento */
  --pfrec-acento: var(--svf-acento, #3d724d);

  /* Título de sección */
  --pfrec-titulo-size: 34px;
  --pfrec-titulo-color: #111111;
  --pfrec-titulo-gap: 28px;

  /* Card de pregunta */
  --pfrec-card-bg: #ffffff;
  --pfrec-card-radio: 16px;
  --pfrec-card-pad-x: 24px;
  --pfrec-card-pad-y: 18px;
  --pfrec-card-gap: 12px;

  /* Textos */
  --pfrec-pregunta-size: 15px;
  --pfrec-pregunta-color: #1d1d1b;
  --pfrec-texto-size: 14px;
  --pfrec-texto-color: #333333;

  /* Botón */
  --pfrec-boton-min: 150px;
  --pfrec-boton-alto: 42px;

  position: relative;
  box-sizing: border-box;
  padding: var(--pfrec-franja) var(--pfrec-lado);
  background-color: var(--pfrec-bg);
  /* Full-bleed: 100vmax en vez de 100vw para no contar la barra de scroll. */
  box-shadow: 0 0 0 100vmax var(--pfrec-bg);
  clip-path: inset(0 -100vmax);
}

.c-pfrec *,
.c-pfrec *::before,
.c-pfrec *::after {
  box-sizing: border-box;
}

.c-pfrec__inner {
  width: 100%;
  max-width: var(--pfrec-eje);
  margin: 0 auto;
}

/* Sobre un fondo oscuro de la paleta, el título pasa a blanco. La clase la
   pone el Twig calculando la luminancia del hex elegido. */
.c-pfrec--fondo-oscuro {
  --pfrec-titulo-color: #ffffff;
}

.c-pfrec__titulo {
  margin: 0 0 var(--pfrec-titulo-gap);
  font-size: var(--pfrec-titulo-size);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--pfrec-titulo-color);
}

/* ------------------------------------------------------------------ Lista */

.c-pfrec__lista {
  display: block;
}

.c-pfrec__item {
  background-color: var(--pfrec-card-bg);
  border-radius: var(--pfrec-card-radio);
  overflow: hidden;
}

.c-pfrec__item + .c-pfrec__item {
  margin-top: var(--pfrec-card-gap);
}

/* Preguntas por encima de las 5 visibles: ocultas mientras el contenedor
   esté plegado. El JS quita la clase del contenedor al pulsar el botón. */
.c-pfrec--plegado .c-pfrec__item--extra {
  display: none;
}

/* --------------------------------------------------------------- Pregunta */

.c-pfrec summary.c-pfrec__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--pfrec-card-pad-y) var(--pfrec-card-pad-x);
  font-size: var(--pfrec-pregunta-size);
  font-weight: 700;
  line-height: 1.3;
  color: var(--pfrec-pregunta-color);
  cursor: pointer;
  list-style: none;
}

/* Quitar el triangulito nativo de <summary>. */
.c-pfrec summary.c-pfrec__pregunta::-webkit-details-marker {
  display: none;
}

.c-pfrec summary.c-pfrec__pregunta::marker {
  content: "";
}

.c-pfrec summary.c-pfrec__pregunta:focus-visible {
  outline: 2px solid var(--pfrec-acento);
  outline-offset: -3px;
  border-radius: var(--pfrec-card-radio);
}

.c-pfrec__pregunta-texto {
  min-width: 0;
}

/* Signo + / − dibujado con dos barras: la vertical desaparece al abrir. */
.c-pfrec__icono {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.c-pfrec__icono::before,
.c-pfrec__icono::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 2px;
  background-color: var(--pfrec-pregunta-color);
  transform: translateY(-50%);
}

.c-pfrec__icono::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.c-pfrec__item[open] .c-pfrec__icono::after {
  opacity: 0;
  transform: translateY(-50%) rotate(0deg);
}

/* --------------------------------------------------------------- Respuesta */

.c-pfrec__respuesta {
  padding: 0 var(--pfrec-card-pad-x) 22px;
  font-size: var(--pfrec-texto-size);
  line-height: 1.55;
  color: var(--pfrec-texto-color);
}

.c-pfrec__respuesta > *:first-child {
  margin-top: 0;
}

.c-pfrec__respuesta > *:last-child {
  margin-bottom: 0;
}

.c-pfrec__respuesta p {
  margin: 0 0 14px;
}

.c-pfrec__respuesta ul,
.c-pfrec__respuesta ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.c-pfrec__respuesta li {
  margin-bottom: 6px;
}

.c-pfrec__respuesta a {
  color: var(--pfrec-acento);
  text-decoration: underline;
}

.c-pfrec__respuesta strong,
.c-pfrec__respuesta b {
  font-weight: 700;
  color: var(--pfrec-pregunta-color);
}

.c-pfrec__item[open] .c-pfrec__respuesta {
  animation: pfrec-aparece 0.18s ease;
}

@keyframes pfrec-aparece {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-pfrec__item[open] .c-pfrec__respuesta {
    animation: none;
  }

  .c-pfrec__icono::after,
  .c-pfrec__boton::after {
    transition: none;
  }
}

/* -------------------------------------------------------- Pie / Ver todas */

.c-pfrec__pie {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
}

/* Elemento + dos clases (0-2-1) para ganarle a button[type="button"] de
   _reboot.scss del tema base sin !important. */
.c-pfrec button.c-pfrec__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: var(--pfrec-boton-min);
  min-height: var(--pfrec-boton-alto);
  padding: 11px 24px;
  border: 1px solid var(--pfrec-acento);
  border-radius: 999px;
  background-color: var(--pfrec-acento);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

/* Hover = intercambio de contraste (relleno y texto se cambian). */
.c-pfrec button.c-pfrec__boton:hover,
.c-pfrec button.c-pfrec__boton:focus-visible {
  background-color: #ffffff;
  color: var(--pfrec-acento);
}

.c-pfrec button.c-pfrec__boton:focus-visible {
  outline: 2px solid var(--pfrec-acento);
  outline-offset: 2px;
}

/* El tema agrega una flecha a todos los .form-submit::before con ruta
   absoluta; por si esa regla alcanza a este botón, se anula. */
.c-pfrec button.c-pfrec__boton::before {
  content: none;
}

.c-pfrec__boton::after {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 10px;
  background-color: currentColor;
  clip-path: polygon(0 40%, 62% 40%, 62% 12%, 100% 50%, 62% 88%, 62% 60%, 0 60%);
  transition: transform 0.18s ease;
}

.c-pfrec button.c-pfrec__boton:hover::after {
  transform: translateX(3px);
}

/* Desplegado ("Ver menos"): la flecha apunta al otro lado. */
.c-pfrec:not(.c-pfrec--plegado) .c-pfrec__boton::after {
  transform: rotate(180deg);
}

.c-pfrec:not(.c-pfrec--plegado) button.c-pfrec__boton:hover::after {
  transform: rotate(180deg) translateX(3px);
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1024px) {
  .c-pfrec {
    --pfrec-titulo-size: 32px;
  }
}

@media (max-width: 767px) {
  .c-pfrec {
    --pfrec-franja: 40px;
    --pfrec-titulo-size: 28px;
    --pfrec-titulo-gap: 22px;
    --pfrec-card-pad-x: 18px;
    --pfrec-card-pad-y: 16px;
    --pfrec-boton-alto: 48px;
  }

  .c-pfrec__respuesta {
    padding-bottom: 18px;
  }

  .c-pfrec__pie {
    margin-top: 22px;
  }

  .c-pfrec button.c-pfrec__boton {
    width: 100%;
  }
}

@media (max-width: 379px) {
  .c-pfrec {
    --pfrec-titulo-size: 26px;
    --pfrec-pregunta-size: 14px;
    --pfrec-card-pad-x: 16px;
  }
}