/* ============================================================
* Header navigation — desktop megabar + mobile accordion
*
* Tutto scopato a `header.wp-block-template-part .animated-header
* .wp-block-navigation` per non toccare altri menu.
*
* DESKTOP (>= 768px):
* - 2° livello = barra full-width fissa SOTTO l'header bar
* `top: var(--main-header-height)` (no gap)
* slide-down: `transform: translateY(-12px) → 0` + opacity 0 → 1
* - 3° livello = barra full-width `position: absolute; top: 100%` del 2°
* stesso slide-down 12px
* - NESSUN ponte ::before (bloccavano l'hover sul 1° livello quando attivi)
* - Open state: classe `.coima-mega-open` su
*
* MOBILE (< 768px):
* - Overlay full-screen, accordion con chevron toggle
* - Classe `.coima-acc-open` su
, max-height inline da JS
* ============================================================ */
/* ============================================================
* DESKTOP (>= 768px)
* ============================================================ */
/* WP core piazza un inline `style="font-size: clamp(14px, ..., 16px)"` su
* OGNI
della navigazione (top-level e submenu) per via di un setting
* di typography sul blocco navigation. Quel clamp interpola tra 14 e 16 col
* viewport (~15.264px a desktop tipico), risultando più grande dei 14px fissi
* della .sub-nav-bar shortcode. Per uniformare TUTTI gli item della nav
* (header bar top-level + submenu hover) a 14px fissi, override !important
* sul
qui — fuori dal media query così vale anche su mobile. */
header.wp-block-template-part
.animated-header
.wp-block-navigation
.wp-block-navigation-item {
font-size: 14px !important;
}
@media (min-width: 768px) {
/* Top-level : position relative — ancoraggio per ::after. */
header.wp-block-template-part
.animated-header
.wp-block-navigation
.wp-block-navigation__container
> .wp-block-navigation-item.has-child {
position: relative !important;
}
/* PONTE invisibile sotto il
top-level — copre il gap fra il bottom
* della label (a metà header bar, dove finisce il
in layout) e il
* top della 2° barra (a livello del bottom dell'header). Essendo `::after`
* del
, l'area conta come parte del
per mouseenter/mouseleave →
* il cursore in transito non scatena un close indesiderato.
*
* Scope sul
's x-range (`left:0; right:0` rispetto al
), così non
* blocca i fratelli del 1° livello come facevano i ponti full-width della
* versione precedente. Pointer-events ATTIVO solo quando il menu è aperto:
* a menu chiuso il ponte non deve catturare niente (non c'è gerarchia da
* mantenere). */
header.wp-block-template-part
.animated-header
.wp-block-navigation
.wp-block-navigation__container
> .wp-block-navigation-item.has-child::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 120px;
background: transparent;
pointer-events: none;
}
header.wp-block-template-part
.animated-header
.wp-block-navigation
.wp-block-navigation__container
> .wp-block-navigation-item.has-child.coima-mega-open::after {
pointer-events: auto;
}
/* Nested (dentro un submenu): position STATIC, perché il
* submenu 3° livello dev'essere `position: absolute` ancorato al 2° (fixed),
* non al
intermedio. */
header.wp-block-template-part
.animated-header
.wp-block-navigation
.wp-block-navigation__submenu-container
.wp-block-navigation-item.has-child {
position: static !important;
}
/* 2° livello: barra full-width fissa, attaccata al bottom dell'header bar.
* Slide-down: `transform: translateY(-12px) → 0` + fade. Box rimane di
* altezza naturale (no max-height animation), così il 3° livello che è
* `top: 100%` del 2° non insegue un'altezza che cambia. */
header.wp-block-template-part
.animated-header
.wp-block-navigation
.wp-block-navigation__submenu-container {
position: fixed !important;
top: var(--main-header-height, 80px) !important;
left: 0 !important;
right: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
min-width: 100vw !important;
box-sizing: border-box !important;
/* CRITICO: WP core (wp-includes/blocks/navigation/style.css L93-115)
* imposta `height:0; width:0; visibility:hidden; overflow:hidden` di
* default e li riporta a valori normali SOLO su `.has-child:hover`.
* Questo significa che appena il cursore lascia la label il submenu
* collassa a 0×0 — sparisce dall'hit-area del
e mouseleave parte
* subito. Override permanente qui sotto: l'hit-area resta stabile,
* la visibilità è controllata via opacity/pointer-events della MIA
* classe `.coima-mega-open`, non da `:hover` di core. */
height: auto !important;
width: 100vw !important;
visibility: visible !important;
overflow: visible !important;
background: #ffffff;
border-bottom: 1px solid var(--color-neutral-200, #d8d8d8);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
padding: 14px 24px !important;
margin: 0 !important;
list-style: none;
z-index: 99;
/* Stato CHIUSO + TRANSIZIONE UNICA. Solo fade (no slide) — feedback
* design: animazione più semplice e veloce (180ms). */
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
/* Pointer-events INHERIT chirurgico — solo sui
di navigazione e
* sui loro link/contenuti, NON sui submenu annidati (che restano governati
* dalle proprie regole `.coima-mega-open`). Senza questo, i