/* Mega menú de los idiomas != es (fca-menu-lang.php v2.0).
   En /de/, /en/, /pl/... el menú lo genera un mapa curado: pilares de primer
   nivel (li.fca-lang-pillar) con encabezados de columna (li.fca-mega-group) y
   sus landings debajo. Este fichero hace dos cosas:
   - ESCRITORIO (>=1001px): convierte el desplegable de li.fca-mega en un panel
     de columnas (grid) en vez de la lista de 25 ítems y 700px de alto que salía
     antes, y pinta el tercer nivel EN FLUJO (no como flyout anidado).
   - MÓVIL (<=1000px): reabre los submenús que menu-flat-v2.css oculta, pero solo
     en los pilares y en forma de ACORDEÓN (clase .is-open que pone
     fca-menu-mega.js). Sin esto, en /de/ y /pl/ el panel móvil solo ofrecía 3
     entradas y las ~25 landings eran inalcanzables desde la navegación.
   Se encola DESPUÉS de menu.css y de menu-flat-v2.css (fca-nav.php), así que a
   igualdad de especificidad gana por orden de carga; el resto del menú (español
   incluido) no se toca porque todos los selectores exigen .fca-lang-pillar,
   .fca-mega o .fca-mega-group, clases que solo existen en los otros idiomas.
   NOMBRE NUEVO (v2 tras el QA visual: el panel se salía por la izquierda y los
   ítems de columna no se veían porque GeneratePress FLOTA los <li> del menú y el
   <ul> de la columna colapsaba a 0 de alto): Cloudflare cachea los estáticos 7 días y sirve HIT stale
   aunque cambie el ?ver, y no hay credencial CF para purgar; un nombre de
   fichero que CF nunca ha visto fuerza el refresco. */

/* ============================================================
   Base (todas las anchuras): deshacer el float de GeneratePress
   ============================================================
   GP flota los <li> del menú (float:left), y esconde los submenús con
   height:0 + overflow:hidden abriéndolos con height:auto SOLO en :hover del
   padre. Dentro de estos desplegables hay un nivel que nunca se hoverea (la
   columna del mega) y en móvil no hay hover en absoluto, así que el <ul>
   colapsaba a 0 de alto: en escritorio el panel salía con los rótulos y nada
   debajo, y en móvil el acordeón abierto se solapaba con el pilar siguiente. */

#site-navigation .main-nav li.fca-lang-pillar ul.sub-menu li {
  float: none;
  width: 100%;
}

/* Alto real en TODOS los niveles del desplegable (sin width: en escritorio el
   ancho del panel lo fijan min-width/max-width mas abajo). */
#site-navigation .main-nav li.fca-lang-pillar ul.sub-menu {
  height: auto;
  overflow: visible;
}

#site-navigation .main-nav li.fca-lang-pillar ul.sub-menu ul.sub-menu {
  float: none;
  width: 100%;
}

/* ============================================================
   Escritorio (>=1001px): panel mega por columnas
   ============================================================ */

@media (min-width: 1001px) {

  /* El panel se ancla a .inside-navigation (que GeneratePress ya trae con
     position:relative), NO al li del pilar: el pilar no es el último ítem de la
     barra (detrás van Kosmetik, Wissen y el CTA), así que un panel de ~880px
     anclado a su borde derecho se salía por la izquierda del viewport. Anclado
     al contenedor, el panel cuadra con el borde derecho del menú y siempre cae
     dentro de la pantalla. */
  #site-navigation .main-nav > ul > li.fca-mega {
    position: static;
  }

  /* Card blanca de menu.css (fondo, borde, radio 16px, sombra) pero ancha y en
     grid: una columna por grupo, con un mínimo para que no se estrechen. */
  #site-navigation:not(.toggled) .main-nav li.fca-mega > ul.sub-menu {
    width: auto;
    min-width: 560px;
    max-width: min(92vw, 900px);
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 4px 20px;
    align-items: start;
  }

  /* GP esconde los submenús con left:-99999px y los muestra con left:auto. Con
     un panel ancho ese mecanismo descuadra el ancho y lo saca del viewport, así
     que SOLO para el mega lo sustituimos por opacidad + visibilidad, anclando
     el panel al borde derecho del pilar. */
  #site-navigation:not(.toggled) .main-nav li.fca-mega > ul.sub-menu {
    left: auto !important;
    right: 0;
    top: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  #site-navigation:not(.toggled) .main-nav li.fca-mega:hover > ul.sub-menu,
  #site-navigation:not(.toggled) .main-nav li.fca-mega.sfHover > ul.sub-menu,
  #site-navigation:not(.toggled) .main-nav li.fca-mega:focus-within > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* El botón del acordeón solo existe en el panel móvil; si la página se
     cargó en <=1000px y luego se ensancha la ventana, el <button> sigue en el
     DOM: aquí se oculta para que no salga como botón nativo suelto en la barra. */
  #site-navigation .main-nav > ul > li.fca-lang-pillar > button.fca-acc {
    display: none;
  }

  /* Cada columna es un li del panel; static para que su submenú no se posicione
     respecto a ella. */
  #site-navigation .main-nav li.fca-mega > ul.sub-menu > li {
    position: static;
  }

  /* Tercer nivel DENTRO del mega: en flujo, debajo de su encabezado de columna,
     no como card flotante. */
  #site-navigation .main-nav li.fca-mega > ul.sub-menu > li > ul.sub-menu {
    position: static;
    left: auto;
    opacity: 1;
    visibility: visible;
    /* GP esconde los submenús con height:0 + overflow:hidden + float:left y los
       abre con height:auto en :hover. La columna no se hoverea nunca, así que
       hay que abrirla a mano o los ítems quedan recortados (panel con los
       rótulos y nada debajo). */
    height: auto;
    overflow: visible;
    float: none;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    transform: none;
  }

  /* Encabezado de columna: es un <a> sin href, así que lo vestimos de rótulo y
     lo desactivamos. Los selectores llevan #site-navigation .main-nav
     li.fca-mega para ganar a la regla de hover de los submenús de menu.css. */
  #site-navigation .main-nav li.fca-mega .fca-mega-group > a,
  #site-navigation .main-nav li.fca-mega .fca-mega-group:hover > a,
  #site-navigation .main-nav li.fca-mega .fca-mega-group.sfHover > a,
  #site-navigation .main-nav li.fca-mega .fca-mega-group > a:focus {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    line-height: 1.3;
    color: #6b7280;
    background-color: transparent;
    padding: 10px 14px 4px;
    /* Dos líneas de alto siempre: "Private Label & Eigenmarke" ocupa 2 y sin
       esto la primera landing de esa columna quedaba desalineada del resto. */
    min-height: calc(2.6em + 14px);
    pointer-events: none;
    cursor: default;
  }

  /* El último li de cada columna NO es el CTA: menu.css ya lo neutraliza con
     `ul ul li:last-child > a`, pero el último li del PANEL sí encaja también en
     `> ul > li:last-child`; lo neutralizamos aquí por si acaso. */
  #site-navigation .main-nav li.fca-mega > ul.sub-menu > li:last-child > a,
  #site-navigation .main-nav li.fca-mega ul.sub-menu li:last-child > a {
    color: #242727;
    background-color: transparent;
    font-weight: 500;
    box-shadow: none;
  }

  #site-navigation .main-nav li.fca-mega ul.sub-menu li:last-child:hover > a,
  #site-navigation .main-nav li.fca-mega ul.sub-menu li:last-child > a:focus {
    color: #007c68;
    background-color: #eafaf6;
  }

  /* ...pero el rótulo de columna sigue sin hover aunque sea el último. */
  #site-navigation .main-nav li.fca-mega .fca-mega-group:last-child > a,
  #site-navigation .main-nav li.fca-mega .fca-mega-group:last-child:hover > a {
    color: #6b7280;
    background-color: transparent;
    font-weight: 700;
  }
}

/* ============================================================
   Móvil / tablet (<=1000px): acordeón dentro del panel
   ============================================================ */

@media (max-width: 1000px) {

  /* El botón invisible del acordeón se posiciona sobre la fila del pilar. */
  #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar {
    position: relative;
  }

  /* menu-flat-v2.css oculta el chevron de TODOS los ítems con submenú; en los
     pilares lo reponemos (mismo dibujo que menu.css: cuadrado rotado -45deg)
     porque aquí sí despliegan. */
  #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #7a8583;
    border-bottom: 2px solid #7a8583;
    transform: rotate(-45deg);
    flex-shrink: 0;
    margin-left: auto;
    transition: transform 0.2s ease;
  }

  #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar.menu-item-has-children.is-open > a::after {
    transform: rotate(45deg);
  }

  /* Submenús: cerrados por defecto (como los deja menu-flat-v2.css) y abiertos
     solo en el pilar con .is-open. */
  #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar > ul.sub-menu {
    display: none;
  }

  #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar.is-open > ul.sub-menu,
  #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar.is-open ul.sub-menu ul.sub-menu {
    display: block;
  }

  /* Botón del acordeón (lo inyecta fca-menu-mega.js): transparente y sin texto,
     ocupa la esquina derecha de la fila. El indicador visual sigue siendo el
     chevron ::after del enlace; el <a> conserva su sitio con padding-right. */
  #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar.menu-item-has-children > a {
    padding-right: 56px;
  }

  #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar > button.fca-acc {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar > button.fca-acc:hover,
  #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar > button.fca-acc:focus {
    background: transparent;
  }

  #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar > button.fca-acc:focus-visible {
    outline: 2px solid #007c68;
    outline-offset: -4px;
  }

  /* Encabezados de columna dentro del acordeón: rótulo gris, sin hover. */
  #site-navigation.toggled .main-nav ul ul li.fca-mega-group > a,
  #site-navigation.toggled .main-nav ul ul li.fca-mega-group > a:hover,
  #site-navigation.toggled .main-nav ul ul li.fca-mega-group > a:focus {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #8a9391;
    background: transparent;
    padding: 14px 4px 4px;
    pointer-events: none;
    cursor: default;
  }

  #site-navigation.toggled .main-nav ul ul li.fca-mega-group > ul.sub-menu {
    padding-left: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #site-navigation.toggled .main-nav > ul > li.fca-lang-pillar.menu-item-has-children > a::after {
    transition: none;
  }
}