/* =====================================================================
   CIFP As Mercedes — menu.css
   ÁMBITO      : GLOBAL (cabeceira id 9007, condición "todo o sitio")
   ENCOLADO EN : functions.php → cifp_custom_css()  [lista GLOBAIS]
   WIDGET      : Elementor "Mega Menu" (nested, .elementor-widget-n-menu)
                 con clase personalizada "cifp-mega" (Avanzado → Clases CSS).
   SCOPE       : :is(.cifp-mega, .elementor-widget-n-menu)
                 → funciona coa clase propia OU coa de Elementor (fallback).
                   • A clase propia scopea SÓ a este menú e sobrevive a que
                     Elementor renomee o contedor do widget.
                   • As clases INTERNAS (.e-n-menu-*, .e-active, .elementor-icon-
                     list-*) xéraas Elementor e NON son editables → dependemos
                     delas para o interior (son estables; varias son ARIA).
   QUE FAI     :
     1) Chevron do item de nivel superior que XIRA 180° ao abrir
        (Elementor por defecto TROCA de icona angle-down/angle-up sen
         animación; forzamos unha soa icona e rotámola por CSS).
     2) Fondo do item de nivel superior en :hover (só layout horizontal).
     3) Panel do mega que ENTRA con fade + slide.  ⚠ Elementor oculta o
        panel con display:none e engade .e-active ao abrir → NON se pode
        usar transition; usamos @keyframes (reprodúcese ao aparecer).
     4) Enlaces das columnas (icon-list) en :hover: fondo + branco + nudge.

   TOKENS      : os realces son brancos translúcidos SOBRE o azul da
                 cabeceira (non existe token global equivalente). Expóñense
                 como variables locais deste compoñente para axustalos nun
                 só sitio. O azul de fondo do panel/barra xa vén dos
                 contedores en Elementor.
   MODELO      : ~/Proxectos/clientes/cifp-as-mercedes_provisional/
                 (index.html + assets/css/styles.css → .nav__top / .mega)
   ACTUALIZADO : 2026-08-25
   ===================================================================== */

/* Variables locais do compoñente (axústanse SÓ aquí) */
:is(.cifp-mega, .elementor-widget-n-menu){
  --cifp-menu-item-hover-bg: rgba(255,255,255,.14);
  --cifp-mega-link-hover-bg: rgba(255,255,255,.12);
  --cifp-menu-radius: 8px;
  --cifp-mega-anim: .22s;
}

/* ---------------------------------------------------------------------
   1) CHEVRON QUE XIRA (substitúe o troco de icona de Elementor)
   Elementor mostra .._closed cando aria-expanded=false e .._opened cando
   =true. Forzamos que só se vexa a "closed" e ROTAMOS O GLIFO (svg/i).

   ⚠⚠ CRÍTICO: rotamos o GLIFO (svg/i), **NON** o botón
   .e-n-menu-dropdown-icon. Ese botón contén etiquetas .elementor-screen-only
   posicionadas en `top:-10000em` (−140000px, ocultas moi arriba). Se se
   rota o BOTÓN 180°, ese −140000px convértese en +140000px → a etiqueta
   vaise 140000px ABAIXO e dispara un scroll VERTICAL xigante mentres o
   mega está aberto (e un arco horizontal durante a animación da rotación).
   Rotando só o svg/i (que non ten fillos screen-only) evítase por completo.
   --------------------------------------------------------------------- */
:is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu-dropdown-icon-opened{ display:none !important; }
:is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu-dropdown-icon[aria-expanded="true"] .e-n-menu-dropdown-icon-closed{ display:flex !important; }

:is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu-dropdown-icon-closed :is(svg, i){
  transition: transform .25s ease;
}
:is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu:not([data-layout=dropdown]) .e-n-menu-item:hover .e-n-menu-dropdown-icon-closed :is(svg, i),
:is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu-dropdown-icon[aria-expanded="true"] .e-n-menu-dropdown-icon-closed :is(svg, i){
  transform: rotate(180deg) !important; /* !important: Elementor pon transform ao svg nun bloque @media que gaña por cascada */
}

/* ---------------------------------------------------------------------
   2) FONDO DO ITEM DE NIVEL SUPERIOR EN :HOVER (só layout horizontal)
   No drawer móbil (data-layout=dropdown) o título ten fondo branco propio
   de Elementor → non o tocamos.
   --------------------------------------------------------------------- */
:is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu:not([data-layout=dropdown]) .e-n-menu-title{
  border-radius: var(--cifp-menu-radius);
  transition: background-color .2s ease;
}
:is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu:not([data-layout=dropdown]) .e-n-menu-item:hover .e-n-menu-title{
  background-color: var(--cifp-menu-item-hover-bg);
}

/* ---------------------------------------------------------------------
   3) PANEL DO MEGA: ENTRADA FADE + SLIDE
   O panel (.e-con) vai de display:none a .e-active → animámolo con
   @keyframes (a transition non funciona desde display:none). Elementor
   xa reserva animation-duration; nós damos o nome e a curva.
   --------------------------------------------------------------------- */
@keyframes cifp-mega-in{
  from{ opacity:0; transform: translateY(-10px); }
  to  { opacity:1; transform: translateY(0); }
}
:is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu:not([data-layout=dropdown]) .e-n-menu-content > .e-con.e-active{
  animation-name: cifp-mega-in;
  animation-duration: var(--cifp-mega-anim);
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
  animation-fill-mode: both;
}

/* ---------------------------------------------------------------------
   4) ENLACES DAS COLUMNAS (icon-list) EN :HOVER
   Estrutura: .e-n-menu-content … li.elementor-icon-list-item > a
              > span.elementor-icon-list-icon (svg) + span.elementor-icon-list-text
   O padding do <a> dálle "aire" ao realce; se as filas quedan altas,
   reduce o "Espazado entre elementos" da icon-list en Elementor.
   --------------------------------------------------------------------- */
:is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu-content .elementor-icon-list-item > a{
  padding: .4rem .55rem;
  border-radius: var(--cifp-menu-radius);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
:is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu-content .elementor-icon-list-item > a:hover{
  background-color: var(--cifp-mega-link-hover-bg);
  transform: translateX(4px);
}
:is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu-content .elementor-icon-list-item > a:hover .elementor-icon-list-text{
  color:#fff;
}
:is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu-content .elementor-icon-list-item > a:hover .elementor-icon-list-icon svg{
  fill:#fff;
}

/* NOTA: o mega de Elementor é full-width de serie e NON provoca scroll
   horizontal por si mesmo. O "scroll xigante" que se vía viña do §1 cando
   se rotaba o BOTÓN da icona (arranxado: agora rótase só o glifo). Non fai
   falta ningún override de posición/ancho do panel. */

/* ---------------------------------------------------------------------
   5) TARXETA DESTACADA DO MEGA — :hover   (clase a medida: .cifp-mega-card)
   ➜ COLOCAR a clase "cifp-mega-card" no CONTAINER da tarxeta destacada de
     CADA panel (Elementor → Avanzado → Clases CSS). Son 5 (unha por menú).
   No :hover: fondo BRANCO sólido + texto e icona en AZUL ESCURO (tokens do
   Kit). O fondo/gradiente e as cores base ponse en Elementor; aquí só a
   transición e o estado :hover.
   --------------------------------------------------------------------- */
.cifp-mega-card{
  transition: background-color .2s ease, background-image .2s ease,
              color .2s ease, border-color .2s ease;
}
.cifp-mega-card:hover{
  background-color: var(--e-global-color-cmbranco, #fff) !important;
  background-image: none !important;        /* tapa o gradiente translúcido base */
  border-color: var(--e-global-color-cmbranco, #fff) !important;
}
/* Titulares/subtítulos → azul escuro */
.cifp-mega-card:hover :is(.elementor-heading-title, .elementor-widget-heading, .elementor-widget-text-editor){
  color: var(--e-global-color-secondary, #002B4A) !important;
}
/* Icona (svg de fonte ou <i>) → azul escuro */
.cifp-mega-card:hover .elementor-icon svg{ fill: var(--e-global-color-secondary, #002B4A) !important; }
.cifp-mega-card:hover .elementor-icon i{ color: var(--e-global-color-secondary, #002B4A) !important; }

/* ---------------------------------------------------------------------
   6) RESPONSIVE / DRAWER MÓBIL   (≤1024, layout dropdown)
   PROBLEMA: en ≤1024 Elementor pon o menú despregable con FONDO BRANCO por
   cada item, e o texto herda o BRANCO do escritorio (cabeceira azul) →
   texto branco sobre branco = opcións invisibles. Ademais a hamburguesa
   queda pegada ao logo (esquerda) e a súa icona sae escura.
   ARRANXO (coma no modelo): drawer con fondo azul escuro + texto/iconas/
   hamburguesa en branco; e empúrrase a hamburguesa á dereita.
   ⚠ A maquetación fina (posición/espazados) hai que vela no móbil real:
   o navegador de automatización non aplica o ancho de viewport móbil.
   --------------------------------------------------------------------- */
@media (max-width: 1024px){

  /* Ocultar a BARRA SUPERIOR enteira en tablet+móbil: queda baleira porque
     os 5 accesos baixan ao drawer e o teléfono móvese ao final do menú.
     (000000b = container da barra superior, fillo directo da cabeceira 9007) */
  .elementor-element-000000b{ display: none !important; }

  /* Hamburguesa ao borde dereito: o widget vai á dereita (margin-left:auto) E,
     dentro del, a icona aliñada á dereita (o toggle vén centrado nun widget
     máis ancho ca el → align-self:flex-end lévao ao borde). */
  :is(.cifp-mega, .elementor-widget-n-menu){ margin-left: auto !important; }
  :is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu-toggle{ align-self: flex-end !important; }

  /* Icona da hamburguesa / X en branco */
  :is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu-toggle svg{ fill: #fff !important; }
  :is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu-toggle i{ color: #fff !important; }

  /* Drawer: fondo azul escuro + padding interior (⇦ AXÚSTASE AQUÍ o espazado
     xeral do contido do menú móbil). O fondo é este, non un axuste de Elementor. */
  :is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu[data-layout=dropdown] .e-n-menu-wrapper{
    background-color: var(--e-global-color-secondary, #002B4A) !important;
    padding: 16px 0px !important;
  }
	
  /* Quitar o fondo branco que Elementor pon a cada item do drawer */
  :is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu[data-layout=dropdown] .e-n-menu-title{
    background-color: transparent !important;
  }
  /* Texto, iconas e chevrons do drawer en branco */
  :is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu[data-layout=dropdown] .e-n-menu-title-text{ color: #fff !important; }
  :is(.cifp-mega, .elementor-widget-n-menu) .e-n-menu[data-layout=dropdown] :is(.e-n-menu-icon, .e-n-menu-dropdown-icon) svg{ fill: #fff !important; }
}