/* * Drawer de navegacion movil * --------------------------------------------------------------- * Convierte la superposicion del bloque de Navegacion de WordPress * (que es a pantalla completa) en un panel lateral con velo. * * El contenido lo aporta una PLANTILLA DE SUPERPOSICION propia (WP 7.0), * montada con bloques desde el editor. Por eso aqui solo se estilan el * contenedor exterior (que no cambia) y lo de dentro de esa plantilla. * * NO LLEVA MEDIA QUERY A PROPOSITO: el velo y el panel cuelgan de * .is-menu-open, que WordPress solo anade con el menu abierto. * * DOS FAMILIAS DE SELECTORES, y la diferencia importa: * * Velo y panel .... .wp-block-navigation__responsive-* (clases del core) * Solo existen en el frontend, con el menu abierto. * * Contenido ....... .wp-block-navigation__overlay-container (clase NUESTRA, en el grupo raiz de * parts/navigation-overlay.html) * Existe tambien en el editor, asi que el mega-menu se * ve estilado al editar la superposicion. * * Antes el contenido colgaba de .wp-block-navigation__overlay-container, * que genera WordPress al renderizar y NO existe en el editor: se editaba * a ciegas. Cambiado el 24-08-2026. * * Reparto de hover e iconos: * summary (Products, Solutions) .... sin hover, chevron azul fijo que gira al abrir * h3 sueltos (Integrations...) ..... hover, flecha celeste solo al pasar * enlaces del submenu .............. hover, flecha celeste solo al pasar * * Depende de las variables --gg-* definidas en :root de style.css. */ /* ============================================================ El panel ============================================================ */ /* Velo a pantalla completa; ancla el panel a la derecha. !important porque los estilos del bloque los imprime WordPress en el al renderizar y pueden cargar despues de esta hoja. */ .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; max-width: none !important; height: auto !important; padding: 0 !important; display: flex !important; flex-direction: row !important; justify-content: flex-end !important; background-color: rgba(23, 18, 122, 0.45) !important; z-index: 100000; } /* WordPress empuja este dialogo 46px hacia abajo cuando la barra de administracion esta visible. Solo lo ve quien este logueado. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0 !important; padding-top: 0 !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { position: relative; width: 80vw; max-width: 320px; height: 100%; margin: 0; padding: 1.25rem 1.5rem 2rem; background-color: var(--gg-blanco); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2); overflow-y: auto; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0 !important; align-items: stretch; justify-content: flex-start; } /* La hamburguesa (menu cerrado) */ .wp-block-navigation__responsive-container-open { padding: 0; color: var(--gg-azul); } /* La cruz del bloque Navigation Overlay Close. * * Ya viene justificada a la derecha por su grupo * (is-content-justification-right) y esta en flujo, no absoluta. Lo que * la descuadra es el SVG del core: su va de x=4,3 a x=19,5 dentro * de un viewBox de 24, o sea deja ~4,5px de aire por lado. El chevron de * los acordeones, con stroke-width 3,5 y puntas redondas, llega hasta * x=15,5 de 16. Las cajas estan alineadas; lo que no coincide es el * dibujo dentro de la caja. * * Se compensa moviendo la caja 4px a la derecha. Si WordPress cambia ese * SVG algun dia, este numero deja de valer. */ .wp-block-navigation__overlay-container .wp-block-navigation-overlay-close { padding: 0; margin-right: -4px; margin-bottom: 1.5rem; margin-bottom: 1.5rem; color: var(--gg-azul); } /* ============================================================ Acordeones del drawer (bloque Detalles) ============================================================ */ /* Fuera el triangulito nativo. Hacen falta las dos reglas: Firefox obedece a list-style, Chrome y Safari necesitan el pseudo -webkit. */ .wp-block-navigation__overlay-container .wp-block-details > summary { list-style: none; } .wp-block-navigation__overlay-container .wp-block-details > summary::-webkit-details-marker { display: none; } /* Cabeceras: los summary de los acordeones y los h3 sueltos comparten estilo. OJO: aqui el h3 va SIN acotar, asi que alcanza tambien a los que esten anidados dentro de un acordeon. Las reglas de la flecha y el hover, mas abajo, si usan "> .wp-block-group > h3" y solo cogen los sueltos. Esa asimetria es intencionada pero facil de olvidar. */ .wp-block-navigation__overlay-container .wp-block-details > summary, .wp-block-navigation__overlay-container h3 { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: 0.9rem 0; font-family: var(--gg-font); font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: 0; color: var(--gg-azul); } .wp-block-navigation__overlay-container .wp-block-details > summary { cursor: pointer; } /* Aire entre la cabecera del acordeon y su contenido. Solo se aprecia con el
abierto: cerrado, los hijos no se renderizan. */ .wp-block-navigation__overlay-container .wp-block-details > summary + * { margin-top: 0.5rem; } .wp-block-navigation__overlay-container > .wp-block-group > h3 a { flex: 1; color: inherit; text-decoration: none; } /* Chevron del acordeon, en azul. Siempre visible. */ .wp-block-navigation__overlay-container .wp-block-details > summary::after { content: ""; flex-shrink: 0; width: 16px; height: 10px; transition: transform 0.2s ease; background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.75 1.75L7.75 7.75L1.75 1.75' stroke='%2317127A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* El navegador ya sabe si esta abierto: solo hay que dibujarlo */ .wp-block-navigation__overlay-container .wp-block-details[open] > summary::after { transform: rotate(180deg); } /* Flecha de los h3 sueltos: existe siempre pero oculta con opacity, no con display, para que al aparecer no recoloque nada. */ .wp-block-navigation__overlay-container > .wp-block-group > h3::after { content: ""; flex-shrink: 0; width: 14px; height: 12px; opacity: 0; transition: opacity 0.15s ease; background-image: url("data:image/svg+xml,%3Csvg width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6H13M8 11L13 6L8 1' stroke='%2300D7D7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* Titulo de seccion dentro del acordeon: "NFC Cashless" */ .wp-block-navigation__overlay-container .wp-block-details h4 { margin: 0 0 0.5rem; font-family: var(--gg-font); font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: 0; color: var(--gg-celeste); } /* Si el acordeon tiene mas de una seccion, la segunda y siguientes necesitan respirar por arriba. */ .wp-block-navigation__overlay-container .wp-block-details h4:not(:first-of-type) { margin-top: 1rem; } /* Enlaces del submenu. El selector > p > a evita las anclas vacias sueltas que pueden quedar colgando directamente del
. */ .wp-block-navigation__overlay-container .wp-block-details > p { margin: 0; } .wp-block-navigation__overlay-container .wp-block-details > p > a { display: flex; align-items: center; /* La flecha va absoluta: en flujo reservaba 26px de los 212 de la fila y partia los titulos largos. Es un afordance de hover, invisible al tacto. */ position: relative; padding: 0 0.5rem; border-radius: 8px; font-family: var(--gg-font); font-weight: 400; font-size: 14px; line-height: 40px; letter-spacing: 0; color: var(--gg-azul); text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .wp-block-navigation__overlay-container .wp-block-details > p > a::after { content: ""; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); width: 14px; height: 12px; opacity: 0; transition: opacity 0.15s ease; background-image: url("data:image/svg+xml,%3Csvg width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6H13M8 11L13 6L8 1' stroke='%2300D7D7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* ============================================================ Selector de idioma dentro del drawer ============================================================ El componente vive en assets/css/lang-switcher.css, pensado para el header: pastilla de ancho fijo con el contenido centrado. Dentro del drawer tiene que comportarse al reves, asi que aqui solo se anula lo que sobra. No duplicar el componente. */ /* El grupo de la superposicion es is-layout-flow. Se convierte en columna para que el selector pueda empujarse al fondo con margin-top: auto, sin sacarlo del flujo con position: absolute. */ .wp-block-navigation__overlay-container > .wp-block-group { display: flex; flex-direction: column; } /* Anclado al fondo y separado del menu por una linea. Cubre los dos casos: que el switcher cuelgue directo del grupo, o que venga envuelto en el
del bloque HTML. Va a ancho completo solo para que la linea llegue de borde a borde: la pastilla de dentro conserva su propio ancho. */ .wp-block-navigation__overlay-container > .wp-block-group > .custom-lang-switcher, .wp-block-navigation__overlay-container > .wp-block-group > *:has(.custom-lang-switcher) { margin-top: auto; padding-top: 1.25rem; } /* Conserva la pastilla tal cual la del header. Unico cambio: un borde, porque en el header contrasta contra el azul y aqui el panel tambien es blanco, asi que sin borde no se veria. Revertido el 24-08-2026: hasta esa fecha se anulaba la pastilla entera para alinear el globo con el texto de los acordeones. */ .wp-block-navigation__overlay-container .custom-lang-current { border: 1px solid var(--gg-gris-borde); } /* Anclado al fondo, un desplegable que se abre hacia abajo se sale del panel. Se invierte: hacia arriba y alineado a la izquierda. */ .wp-block-navigation__overlay-container .custom-lang-dropdown { top: auto; bottom: 100%; left: 0; transform: none; margin: 0 0 var(--lang-separacion); } /* Solo donde hay puntero real: en tactil el :hover se queda pegado tras el toque hasta que se toca en otro sitio. OJO al probar: en el modo dispositivo de DevTools esto evalua a false. Hay que estrechar la ventana real por debajo de 600px. */ @media (hover: hover) { .wp-block-navigation__overlay-container .wp-block-details > p > a:hover { font-weight: 700; color: var(--gg-celeste); background-color: var(--gg-celeste-tenue); } .wp-block-navigation__overlay-container .wp-block-details > p > a:hover::after { opacity: 1; } /* Solo los h3 sueltos. Los summary de los acordeones no llevan hover. */ .wp-block-navigation__overlay-container > .wp-block-group > h3:hover { color: var(--gg-celeste); } .wp-block-navigation__overlay-container > .wp-block-group > h3:hover::after { opacity: 1; } } /* ============================================================ Foco ============================================================ */ .wp-block-navigation__overlay-container :is(summary, a, button):focus { outline: none; } .wp-block-navigation__overlay-container :is(summary, a, button):focus-visible { outline: 2px solid var(--gg-celeste); outline-offset: 2px; border-radius: 8px; } /* Igual que la del header en movil: solo el codigo de idioma. */ .wp-block-navigation__overlay-container .lang-globe, .wp-block-navigation__overlay-container .lang-arrow { display: none; }