/* =========================================================
   MENÚ MÓVIL (Off Canvas de Salient): SUBMENÚS DESLIZANTES
   ---------------------------------------------------------
   Reutilizable en cualquier web con Salient. Solo CSS.
   Requisitos en Salient > Header Navigation > Off Canvas Menu:
     - "Off Canvas Menu Dropdown Behavior" = Default
       (Salient genera los <li class="back"> y anima con las
       clases dl-animate-in-N / dl-animate-out-N).
   Aquí se sustituyen sus animaciones (escala/fundido) por un
   deslizamiento lateral:
     abrir submenú  -> el menú sale a la izquierda y el submenú
                       entra desde la derecha
     volver         -> al revés
   El texto del botón "Back" se traduce a "Volver" en
   includes/language/translations.php.
   ========================================================= */

#slide-out-widget-area {
  --ocm-slide: 100%;
  --ocm-dur: 0.45s;
  --ocm-ease: cubic-bezier(0.65, 0, 0.35, 1);
}

#slide-out-widget-area .menuwrapper {
  overflow-x: clip;
}

/* Menú actual sale hacia la izquierda (al abrir un submenú) */
#slide-out-widget-area .menuwrapper .menu[class*='dl-animate-out'],
#slide-out-widget-area .menuwrapper .sub-menu.dl-subview[class*='dl-animate-out'] {
  animation: ocm-slide-out-left var(--ocm-dur) var(--ocm-ease) both !important;
}

/* Menú anterior vuelve desde la izquierda (al pulsar Volver) */
#slide-out-widget-area .menuwrapper .menu[class*='dl-animate-in'] {
  animation: ocm-slide-in-left var(--ocm-dur) var(--ocm-ease) both !important;
}

/* Submenú entra desde la derecha */
#slide-out-widget-area .menuwrapper > .sub-menu[class*='dl-animate-in'] {
  animation: ocm-slide-in-right var(--ocm-dur) var(--ocm-ease) both !important;
}

/* Submenú sale hacia la derecha (al pulsar Volver) */
#slide-out-widget-area .menuwrapper > .sub-menu[class*='dl-animate-out'] {
  animation: ocm-slide-out-right var(--ocm-dur) var(--ocm-ease) both !important;
}

@keyframes ocm-slide-out-left {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(calc(-1 * var(--ocm-slide))); opacity: 0; }
}
@keyframes ocm-slide-in-left {
  from { transform: translateX(calc(-1 * var(--ocm-slide))); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes ocm-slide-in-right {
  from { transform: translateX(var(--ocm-slide)); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes ocm-slide-out-right {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(var(--ocm-slide)); opacity: 0; }
}

/* Chevrons (máscara SVG: toman el color del texto) */
#slide-out-widget-area {
  --ocm-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* Botón Volver con chevron a la izquierda */
#slide-out-widget-area .menuwrapper li.back > a {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4em;
}
#slide-out-widget-area .menuwrapper li.back > a::before {
  content: '';
  display: inline-block;
  flex: none;
  width: 0.7em;
  height: 0.7em;
  background-color: currentColor;
  -webkit-mask: var(--ocm-chevron) center / contain no-repeat;
  mask: var(--ocm-chevron) center / contain no-repeat;
  transform: scaleX(-1);
  transition: transform 0.3s var(--ocm-ease);
}
@media (hover: hover) {
  #slide-out-widget-area .menuwrapper li.back > a:hover::before {
    transform: scaleX(-1) translateX(0.3em);
  }
}

/* Chevron a la derecha en los elementos con submenú */
#slide-out-widget-area .menuwrapper li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.4em;
  vertical-align: 0.05em;
  background-color: currentColor;
  -webkit-mask: var(--ocm-chevron) center / contain no-repeat;
  mask: var(--ocm-chevron) center / contain no-repeat;
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  #slide-out-widget-area {
    --ocm-dur: 0.01s;
  }
}