/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/
/* =============================================
   KUNKOO OFF-CANVAS MENU — EDITORIAL STYLE
   ============================================= */

:root {
  --kk-menu-bg:        #0d0d0d;
  --kk-menu-text:      #f0ece4;
  --kk-menu-accent:    #AD1918;
  --kk-menu-speed:     0.45s;
  --kk-menu-ease:      cubic-bezier(0.65, 0, 0.15, 1);
}

/* --- Panel --- */
#slide-out-widget-area {
  background-color: var(--kk-menu-bg) !important;
  padding: clamp(2rem, 6vw, 5rem) !important;
}

@media (max-width: 768px) {
  #slide-out-widget-area {
    width: 60vw !important;
    padding: 2rem 1.5rem !important;
  }
}

/* --- Blob apertura --- */
#slide-out-widget-area.open {
  animation: kk-blob-open var(--kk-menu-speed) var(--kk-menu-ease) forwards;
}

@keyframes kk-blob-open {
  0%   { clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 10% 100%, 6% 80%, 9% 62%, 4% 40%, 7% 18%); }
  30%  { clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 5% 100%, 7% 72%, 2% 52%, 6% 28%, 3% 8%); }
  65%  { clip-path: polygon(2% 0%, 100% 0%, 100% 100%, 2% 100%, 3% 65%, 1% 45%, 3% 22%, 1% 6%); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 50%, 0% 0%, 0% 0%); }
}

/* --- Blob cierre --- */
#slide-out-widget-area:not(.open).mouse-accessed {
  animation: kk-blob-close var(--kk-menu-speed) var(--kk-menu-ease) forwards;
}

@keyframes kk-blob-close {
  0%   { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 75%, 0% 50%, 0% 25%, 0% 0%); }
  30%  { clip-path: polygon(3% 0%, 100% 0%, 100% 100%, 3% 100%, 7% 68%, 2% 50%, 8% 28%, 4% 7%); }
  65%  { clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 8% 100%, 5% 75%, 12% 52%, 6% 30%, 10% 7%); }
  100% { clip-path: polygon(14% 0%, 100% 0%, 100% 100%, 14% 100%, 7% 82%, 15% 58%, 5% 35%, 12% 10%); }
}

/* --- Overlay --- */
#slide-out-widget-area-bg.dark {
  background: rgba(0, 0, 0, 0.8) !important;
}

/* --- Ocultar mobile duplicado --- */
#slide-out-widget-area .off-canvas-menu-container.mobile-only {
  display: none !important;
}

/* --- Centrar verticalmente --- */
#slide-out-widget-area .inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 100vh;
}

/* --- Lista --- */
#slide-out-widget-area .off-canvas-menu-container:not(.mobile-only) .menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}

/* --- Items: animación entrada --- */
#slide-out-widget-area .off-canvas-menu-container:not(.mobile-only) .menu li {
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 0.35s var(--kk-menu-ease),
    transform 0.35s var(--kk-menu-ease);
}

#slide-out-widget-area.open .off-canvas-menu-container:not(.mobile-only) .menu li:nth-child(1) {
  opacity: 1; transform: translateX(0); transition-delay: 0.15s;
}
#slide-out-widget-area.open .off-canvas-menu-container:not(.mobile-only) .menu li:nth-child(2) {
  opacity: 1; transform: translateX(0); transition-delay: 0.25s;
}
#slide-out-widget-area.open .off-canvas-menu-container:not(.mobile-only) .menu li:nth-child(3) {
  opacity: 1; transform: translateX(0); transition-delay: 0.35s;
}
#slide-out-widget-area.open .off-canvas-menu-container:not(.mobile-only) .menu li:nth-child(4) {
  opacity: 1; transform: translateX(0); transition-delay: 0.45s;
}

/* --- Links: base compartida --- */
#slide-out-widget-area .off-canvas-menu-container:not(.mobile-only) .menu li a {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 300 !important;
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
  color: var(--kk-menu-text) !important;
  text-decoration: none !important;
  letter-spacing: -0.02em;
  line-height: 1.45;
  display: block;
  padding: 0.3em 0;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
  transition: color 0.2s ease !important;
}

/* --- about Us: alineado derecha --- */
#slide-out-widget-area .off-canvas-menu-container:not(.mobile-only) .menu li:nth-child(1) a {
  text-align: right;
  width: 5.2ch;
  margin-left: auto;
}

/* --- Contacto: alineado izquierda, corte Con-/tacto --- */
#slide-out-widget-area .off-canvas-menu-container:not(.mobile-only) .menu li:nth-child(2) a {
  text-align: left;
  width: 4.2ch;
  hyphens: auto;
  -webkit-hyphens: auto;
  margin-right: auto;
}

/* --- Mobile --- */
@media (max-width: 768px) {
  #slide-out-widget-area .off-canvas-menu-container:not(.mobile-only) .menu li a {
    font-size: clamp(2.8rem, 11vw, 4.5rem) !important;
    line-height: 1.45;
    padding: 0.3em 0;
  }

  #slide-out-widget-area .off-canvas-menu-container:not(.mobile-only) .menu li:nth-child(1) a {
    width: 80%;
    margin-left: auto;
  }

  #slide-out-widget-area .off-canvas-menu-container:not(.mobile-only) .menu li:nth-child(2) a {
    width: 3.8ch;
    margin-right: auto;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: break-word;
  }
}

/* Sin underline */
#slide-out-widget-area .off-canvas-menu-container:not(.mobile-only) .menu li a::after {
  display: none !important;
}

/* Rojo en hover y al pinchar */
#slide-out-widget-area .off-canvas-menu-container:not(.mobile-only) .menu li.menu-item a:hover,
#slide-out-widget-area .off-canvas-menu-container:not(.mobile-only) .menu li.menu-item a:active,
#slide-out-widget-area .off-canvas-menu-container:not(.mobile-only) .menu li.menu-item a:focus {
  color: #AD1918 !important;
  transition: color 0.2s ease !important;
}

/* --- Botón cerrar --- */
#slide-out-widget-area .slide_out_area_close {
  opacity: 0.4;
  transition: opacity 0.2s ease, transform 0.3s var(--kk-menu-ease) !important;
}

#slide-out-widget-area .slide_out_area_close:hover {
  opacity: 1;
  transform: rotate(90deg) !important;
}

#slide-out-widget-area .close-line {
  background-color: var(--kk-menu-text) !important;
}