/*V 1.1 Shared Header Navigation - submenus desktop + acordeon mobile. Se carga DESPUES del CSS de pagina para poder corregir la cascada del nav sin editar los 22 CSS.*/

/* === 1. Correcciones sobre el nav existente: contenedor para el panel y sitio para los carets === */
.desktop-nav > ul > li {position:relative;}
.desktop-nav > ul {flex-wrap:nowrap;}

@media (min-width:1151px) and (max-width:1300px) {
  .desktop-nav > ul {gap:clamp(10px, 2.2vw, 40px);}
}

/* === 2. Caret dibujado con bordes, no con Font Awesome, que se carga diferido y parpadearia === */
.nav-caret {
  display:inline-block; width:0; height:0; border-style:solid;
  border-width:5px 4px 0 4px; border-color:currentColor transparent transparent transparent;
  transition:transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); flex-shrink:0;
}

/* === 3. Desktop: cabecera del item con submenu === */
.desktop-nav .nav-has-sub {display:flex; align-items:center; gap:5px;}

.desktop-nav .nav-sub-toggle {
  background:none; border:none; padding:15px 2px; margin:0; cursor:pointer;
  color:var(--primary-black); line-height:0; display:flex; align-items:center;
  transition:color 0.3s;
}

.desktop-nav .nav-has-sub:hover .nav-sub-toggle,
.desktop-nav .nav-has-sub.is-open .nav-sub-toggle,
.desktop-nav .nav-has-sub > a.active + .nav-sub-toggle {color:#209b41;}

.desktop-nav .nav-has-sub.is-open .nav-caret {transform:rotate(180deg);}
.desktop-nav .nav-sub-toggle:focus-visible {outline:3px solid var(--primary-black); outline-offset:-3px;}

/* === 4. Desktop: panel. Se pliega con max-height porque interpola siempre; el overflow:hidden propio no recorta la sombra === */
.desktop-nav .nav-sub {
  display:block; width:max-content; max-width:320px; min-width:240px;
  position:absolute; top:calc(100% + 1px); left:0; z-index:10;
  background-color:var(--primary-white);
  border-top:2px solid var(--primary-green);
  border-radius:0 0 6px 6px;
  box-shadow:0 10px 28px rgba(0, 0, 0, 0.13), 0 2px 6px rgba(0, 0, 0, 0.06);
  padding:6px 0; margin:0;
  overflow:hidden; max-height:0; opacity:0; visibility:hidden;
  transition:max-height 0.18s ease-in, opacity 0.13s ease-in, visibility 0s linear 0.18s;
}

/* El tope debe superar la altura del panel mas alto (Air Conditioning, 296px): subirlo si se anaden subservicios */
.desktop-nav .nav-has-sub.is-open > .nav-sub {
  max-height:360px; opacity:1; visibility:visible;
  transition:max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease-out, visibility 0s;
}

/* Los items entran escalonados desde abajo, dentro de los 340ms del pliegue, para que sea un solo gesto */
.desktop-nav .nav-sub li {
  padding:0; opacity:0; transform:translateY(6px);
  transition:opacity 0.1s ease, transform 0.1s ease;
}

.desktop-nav .nav-has-sub.is-open > .nav-sub li {
  opacity:1; transform:translateY(0);
  transition:opacity 0.18s ease-out, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.desktop-nav .nav-has-sub.is-open > .nav-sub li:nth-child(1) {transition-delay:0.02s;}
.desktop-nav .nav-has-sub.is-open > .nav-sub li:nth-child(2) {transition-delay:0.04s;}
.desktop-nav .nav-has-sub.is-open > .nav-sub li:nth-child(3) {transition-delay:0.06s;}
.desktop-nav .nav-has-sub.is-open > .nav-sub li:nth-child(4) {transition-delay:0.07s;}
.desktop-nav .nav-has-sub.is-open > .nav-sub li:nth-child(5) {transition-delay:0.09s;}
.desktop-nav .nav-has-sub.is-open > .nav-sub li:nth-child(6) {transition-delay:0.10s;}
.desktop-nav .nav-has-sub.is-open > .nav-sub li:nth-child(7) {transition-delay:0.12s;}
.desktop-nav .nav-has-sub.is-open > .nav-sub li:nth-child(8) {transition-delay:0.13s;}

/* Neutraliza .desktop-nav a: sin mayusculas, sin el subrayado ::after, hover solo de color */
.desktop-nav .nav-sub a {
  display:block; padding:10px 18px; margin:0;
  font-size:14px; font-weight:600; line-height:1.35;
  text-transform:none; white-space:normal;
  color:var(--primary-black); position:static;
  transition:color 0.2s ease, background-color 0.2s ease;
}

.desktop-nav .nav-sub a:after {display:none; content:none;}
.desktop-nav .nav-sub a:hover {color:#209b41; background-color:rgba(36, 229, 80, 0.08);}
.desktop-nav .nav-sub a:focus-visible {outline:3px solid var(--primary-black); outline-offset:-3px;}
.desktop-nav .nav-sub a.is-current {color:#209b41; background-color:rgba(36, 229, 80, 0.10); font-weight:700;}

/* Jerarquia dentro del panel: enlace al padre, separador, grupo Tesla y sus hijas indentadas */
.desktop-nav .nav-sub .nav-sub-parent {font-weight:700; text-transform:uppercase; font-size:13px;}
.desktop-nav .nav-sub .nav-sub-sep {border-bottom:1px solid var(--border-color); margin:6px 0;}
.desktop-nav .nav-sub .nav-sub-group {font-weight:700; text-transform:uppercase; font-size:13px; padding-bottom:6px;}
.desktop-nav .nav-sub .nav-sub-child {padding-left:34px; font-weight:500; position:relative;}
.desktop-nav .nav-sub .nav-sub-child:before {
  content:""; position:absolute; left:20px; top:50%; width:6px; height:1px;
  background-color:#b5b5b5; transform:translateY(-50%);
}

/* === 5. Mobile: fila con el enlace a la izquierda y el toggle a la derecha, con area tactil de 52px === */
.mobile-nav .mnav-row {display:flex; align-items:center; justify-content:space-between; width:100%;}
.mobile-nav .mnav-row > a {flex:1 1 auto;}

.mobile-nav .mnav-toggle {
  background:none; border:none; margin:0; padding:0; cursor:pointer;
  color:var(--primary-white); flex:0 0 auto;
  width:52px; min-height:52px;
  display:flex; align-items:center; justify-content:center;
  border-left:1px solid rgba(255, 255, 255, 0.12);
  transition:background-color 0.2s ease, color 0.2s ease;
}

.mobile-nav .mnav-toggle .nav-caret {border-width:6px 5px 0 5px;}
.mobile-nav .mnav-toggle[aria-expanded="true"] {color:var(--primary-green); background-color:rgba(255, 255, 255, 0.06);}
.mobile-nav .mnav-toggle[aria-expanded="true"] .nav-caret {transform:rotate(180deg);}
.mobile-nav .mnav-toggle:focus-visible {outline:3px solid var(--primary-green); outline-offset:-3px;}

/* Sin display:none para poder animar el pliegue; visibility saca los enlaces del orden de tabulacion al cerrar */
.mobile-nav .mnav-sub {
  background-color:rgba(255, 255, 255, 0.045);
  max-height:0; overflow:hidden; opacity:0; visibility:hidden;
  transition:max-height 0.26s ease-out, opacity 0.14s ease-out, visibility 0s linear 0.26s;
}

.mobile-nav .mnav-sub.is-open {
  max-height:460px; opacity:1; visibility:visible;
  transition:max-height 0.36s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease-out, visibility 0s;
}

.mobile-nav .mnav-sub li {border-bottom:1px solid rgba(255, 255, 255, 0.07);}
.mobile-nav .mnav-sub li:last-child {border-bottom:none;}

.mobile-nav .mnav-sub a {
  padding:13px 20px 13px 36px; font-size:15px; font-weight:500;
  text-transform:none; line-height:1.35;
}

.mobile-nav .mnav-sub .mnav-sub-parent {font-weight:700; text-transform:uppercase; font-size:14px;}
.mobile-nav .mnav-sub .mnav-sub-group {font-weight:700; text-transform:uppercase; font-size:14px;}
.mobile-nav .mnav-sub .mnav-sub-child {padding-left:52px; position:relative;}
.mobile-nav .mnav-sub .mnav-sub-child:before {
  content:""; position:absolute; left:36px; top:50%; width:8px; height:1px;
  background-color:rgba(255, 255, 255, 0.35); transform:translateY(-50%);
}

.mobile-nav .mnav-sub a.is-current {color:var(--primary-green); background-color:rgba(255, 255, 255, 0.09); font-weight:700;}

/* === 6. Pantallas muy estrechas: se recorta el toggle y la sangria para que quepa el texto === */
@media (max-width:360px) {
  .mobile-nav .mnav-toggle {width:46px;}
  .mobile-nav .mnav-sub a {padding-left:30px; font-size:14px;}
  .mobile-nav .mnav-sub .mnav-sub-child {padding-left:44px;}
  .mobile-nav .mnav-sub .mnav-sub-child:before {left:30px;}
}

/* === 7. Movimiento reducido: la animacion se ACORTA y pierde el desplazamiento, nunca se elimina === */
@media (prefers-reduced-motion: reduce) {
  .desktop-nav .nav-sub {
    transition:max-height 0.1s linear, opacity 0.1s linear, visibility 0s linear 0.1s;
  }
  .desktop-nav .nav-has-sub.is-open > .nav-sub {
    transition:max-height 0.14s linear, opacity 0.14s linear, visibility 0s;
  }
  .desktop-nav .nav-sub li,
  .desktop-nav .nav-has-sub.is-open > .nav-sub li {
    transform:none; transition:opacity 0.1s linear; transition-delay:0s;
  }
  .mobile-nav .mnav-sub {
    transition:max-height 0.1s linear, opacity 0.1s linear, visibility 0s linear 0.1s;
  }
  .mobile-nav .mnav-sub.is-open {
    transition:max-height 0.14s linear, opacity 0.14s linear, visibility 0s;
  }
  .nav-caret {transition:transform 0.12s linear;}
}