/**
 * Heading Rotator AB - Divi 5 custom module.
 * Titre avec un span "rotator" qui alterne entre plusieurs items (pages liées).
 * Chaque item est un <a href="{permalink}"> (dynamic link vers la page cible).
 * Animation : fade ou slide-up, config via `data-ab-hr-animation`.
 */

.ab-heading-rotator {
  --ab-hr-rotator-color: #F62E02;
  --ab-hr-transition-duration: 400ms;

  width: 100%;
  box-sizing: border-box;
}

.ab-heading-rotator__heading {
  margin: 0;
  padding: 0;
}

/* Le span rotator est un conteneur inline-block qui a la largeur de son item
   le plus large, pour éviter que le texte fixe autour saute quand un item
   change. La technique : on rend TOUS les items en position statique dans un
   sous-container invisible (visibility:hidden) pour dimensionner le span, puis
   on absolute-positione les items visibles par-dessus. */
.ab-heading-rotator__rotator {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  color: var(--ab-hr-rotator-color);
  white-space: collapse;
}

/* Container qui empile les items pour dimensionner le span à l'item le plus long.
   Chaque item statique est invisible mais participe au layout, le span prend
   donc la largeur du plus long via max-content. */
.ab-heading-rotator__items-sizer {
  display: inline-grid;
  grid-template-columns: 1fr;
}
.ab-heading-rotator__items-sizer > * {
  grid-column: 1;
  grid-row: 1;
}

/* Item : masqué par défaut, affiché quand is-active */
.ab-heading-rotator__item {
  color: inherit;
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--ab-hr-transition-duration) ease;
  pointer-events: none;
}
.ab-heading-rotator__item.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Animation slide-down : effet slot machine descendant.
   - L'item visible descend et sort par le bas (translateY(100%))
   - Le suivant descend depuis le haut (translateY(-100%) → 0)
   Nécessite overflow: hidden sur le rotator pour clipper les items hors zone. */
[data-ab-hr-animation="slideDown"] .ab-heading-rotator__rotator {
  overflow: hidden;
  line-height: 1;
  padding: 0.15em 0;
  vertical-align: middle;
}
/* Ceinture + bretelles :
   - visibility: hidden sur le state par défaut → aucun sliver possible même
     si le padding/line-height du parent laisse dépasser un pixel.
   - Overshoot 120% pour que l'item soit hors-flow visuel de toute façon.
   - `transition` uniquement sur is-active/is-leaving → snap instant au retour
     au state par défaut (pas de re-traversée visible de la zone). */
[data-ab-hr-animation="slideDown"] .ab-heading-rotator__item {
  visibility: hidden;
  opacity: 1;
  transform: translateY(-120%);
  pointer-events: none;
}
[data-ab-hr-animation="slideDown"] .ab-heading-rotator__item.is-active {
  visibility: visible;
  transform: translateY(0);
  transition: transform var(--ab-hr-transition-duration) cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: auto;
}
[data-ab-hr-animation="slideDown"] .ab-heading-rotator__item.is-leaving {
  visibility: visible;
  transform: translateY(120%);
  transition: transform var(--ab-hr-transition-duration) cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}

/* Underline sur hover si activé */
[data-ab-hr-underline="on"] .ab-heading-rotator__item:hover,
[data-ab-hr-underline="on"] .ab-heading-rotator__item:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Mobile : les items du rotator peuvent être longs ("Marketing & Communications")
   et déborder de la largeur écran. On autorise le wrap et on passe le rotator
   sur sa propre ligne pour préserver la lisibilité du heading.
   L'animation slideDown continue de marcher : chaque item translate de +/- 120%
   de SA propre hauteur (multi-lignes possibles), le sizer grid prend la hauteur
   de l'item le plus haut, overflow: hidden clippe hors zone. */
@media (max-width: 767px) {
  .ab-heading-rotator__rotator {
    display: block;
    white-space: normal;
    width: 100%;
  }
  .ab-heading-rotator__items-sizer {
    display: grid;
    width: 100%;
  }
  .ab-heading-rotator__item {
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* Preview VB : montre juste le 1er item (statique), on ne peut pas animer proprement
   dans le VB car il rerend souvent. */
.ab-heading-rotator__items-preview {
  display: inline;
}
.ab-heading-rotator__items-preview .ab-heading-rotator__item {
  display: none;
}
.ab-heading-rotator__items-preview .ab-heading-rotator__item.is-active {
  display: inline;
  opacity: 1;
  pointer-events: auto;
}