/*
 * Menu di navigazione dell'header.
 *
 * 0. Menu orizzontale (desktop, >= 1024px): tendine a card staccate, con
 *    "ponti" invisibili sugli spazi e un breve ritardo di chiusura, così il
 *    menu non si chiude attraversando lo spazio tra una tendina e l'altra.
 *    Le tendine che uscirebbero dallo schermo si aprono a sinistra
 *    (classe `opens-left`, assegnata da assets/js/navigation.js).
 * 1-4. Overlay mobile/tablet (< 1024px) a fisarmonica: il blocco core mostra
 *    tutti i sottomenu aperti; qui (con navigation.js) diventano un accordion
 *    chiuso di default, apribile dal caret; le voci senza link aprono il
 *    sottomenu anche toccando il testo.
 *
 * Le due parti sono separate da `.is-menu-open` (overlay aperto) /
 * `:not(.is-menu-open)` (menu orizzontale).
 *
 * Specificità: le regole core (wp-includes/blocks/navigation/style.css)
 * arrivano a 0,5,0 e sono stampate dopo questo file; i prefissi
 * `.wp-block-navigation .…responsive-container(:not).is-menu-open …` le
 * superano senza ricorrere a !important.
 */

/* ---------------------------------------------------------------------------
 * 0. Menu orizzontale (desktop)
 * ------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
  --ccs-dd-gap: 10px;        /* spazio tra voce principale e tendina */
  --ccs-dd-gap-side: 8px;    /* spazio visibile tra tendine affiancate */
  --ccs-dd-pad: 8px;         /* padding interno della tendina */
  --ccs-dd-hover: rgba(199, 228, 254, 0.6); /* #C7E4FE, colore hover del sito */
}

/* Le tendine chiuse hanno dimensioni reali e, vicino al bordo destro, escono
   dalla finestra: senza questo allargherebbero l'area scorrevole del body
   (overflow-x: hidden in style.css è scorrevole via script/focus → pagina
   spostata di lato). `clip` taglia solo in orizzontale e non crea scroll. */
header.wp-block-template-part {
  overflow-x: clip;
}

/* Tendina (stato chiuso). Dimensioni sempre calcolate (non 0 come nel core):
   servono al ritardo di chiusura e al calcolo del bordo schermo in JS. */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
  box-sizing: border-box;
  width: max-content;
  min-width: 200px;
  max-width: 360px;          /* etichette lunghe al massimo su due righe */
  height: auto;
  /* chiusa: altezza 0 e contenuto tagliato, altrimenti le tendine lunghe (es. 17
     professionisti) scendono oltre il fondo del body e sulle pagine corte si può
     scorrere su un'area vuota. Cambiano dopo 0.2s come visibility (allow-discrete). */
  max-height: 0;
  padding: var(--ccs-dd-pad);
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.06), 0 14px 32px -12px rgba(17, 17, 17, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.2s, max-height 0s linear 0.2s, overflow 0s linear 0.2s; /* chiusura ritardata */
  transition-behavior: allow-discrete;
}

/* Tendina aperta (hover o caret cliccato) */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
  width: max-content;
  min-width: 200px;
  height: auto;
  max-height: none;
  overflow: visible;
  z-index: 3; /* sopra quella che si sta chiudendo */
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* Primo livello: sotto la voce principale, testo allineato all'etichetta */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
  top: calc(100% + var(--ccs-dd-gap));
  left: -14px;
}

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container.opens-left {
  left: auto;
  right: -14px;
}

/* Livelli successivi: di fianco, prima voce allineata alla voce madre */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
  top: calc(-1 * var(--ccs-dd-pad));
  left: calc(100% + var(--ccs-dd-pad) + var(--ccs-dd-gap-side));
  max-width: 340px; /* più stretta: il percorso più profondo (Aree › … › Logopedia) sta nei 1280px */
}

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container.opens-left {
  left: auto;
  right: calc(100% + var(--ccs-dd-pad) + var(--ccs-dd-gap-side));
}

/* Ponti invisibili sugli spazi: fanno parte della tendina, quindi il mouse
   che attraversa lo spazio resta "dentro" la voce e il menu non si chiude. */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container::before {
  content: "";
  position: absolute;
}

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
  top: calc(-1 * var(--ccs-dd-gap));
  left: 0;
  right: 0;
  height: var(--ccs-dd-gap);
}

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before {
  top: 0;
  bottom: 0;
  left: calc(-1 * (var(--ccs-dd-pad) + var(--ccs-dd-gap-side)));
  width: calc(var(--ccs-dd-pad) + var(--ccs-dd-gap-side));
}

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container.opens-left::before {
  left: auto;
  right: calc(-1 * (var(--ccs-dd-pad) + var(--ccs-dd-gap-side)));
}

/* Voci della tendina */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container > .wp-block-navigation-item {
  min-width: 0;
  padding: 0;
  border-radius: 8px;
  transition: background-color 0.12s ease;
}

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover {
  background-color: var(--ccs-dd-hover);
}

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  padding: 9px 12px;
  line-height: 1.35;
  white-space: normal;
  text-decoration: none;
}

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
  font-weight: 500;
}

/* Caret delle voci con sotto-tendina */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
  align-self: stretch;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 12px 0 4px;
  background: transparent; /* core: inherit → raddoppierebbe il colore di hover della voce */
}

.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle:has(~ .opens-left) svg {
  transform: rotate(90deg); /* punta a sinistra quando la tendina si apre a sinistra */
}

/* Focus da tastiera (style.css azzera gli outline con !important) */
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle:focus-visible {
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px #111;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
    transform: none;
    transition: visibility 0s linear 0.2s;
  }
}

/* ---------------------------------------------------------------------------
 * 1. Hamburger anche su tablet: core lo mostra solo sotto i 600px.
 * ------------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }

  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

@media (max-width: 1023.98px) {
  /* hamburger allineato a destra, accanto al logo */
  .header-row .wp-block-navigation {
    justify-content: flex-end;
  }

  .wp-block-navigation__responsive-container-open {
    padding: 10px;
    margin-right: -10px;
  }

  .wp-block-navigation__responsive-container-open svg {
    width: 28px;
    height: 28px;
  }
}

/* ---------------------------------------------------------------------------
 * 2. Overlay
 * ------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  --ccs-nav-ink: #111111;
  --ccs-nav-text: #3a3844;
  --ccs-nav-muted: #67656e;
  --ccs-nav-line: #ebe8e3;
  --ccs-nav-rail: #dad9d9;
  --ccs-nav-focus: #c7e4fe;
  --ccs-nav-speed: 0.25s;

  padding: 12px 20px 48px;
  overflow-x: hidden;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  top: 0;
  right: -10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
  padding-top: 56px;
  align-items: stretch;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  gap: 0;
  align-items: stretch;
}

/* Ogni voce: [testo | caret] sulla prima riga, sottomenu sotto a tutta larghezza.
   La seconda riga passa da 0fr a 1fr per animare l'apertura. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 0fr;
  align-items: center;
  width: 100%;
  font-size: inherit;
  transition: grid-template-rows var(--ccs-nav-speed) ease;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.is-submenu-open {
  grid-template-rows: auto 1fr;
}

/* Voci */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
  grid-column: 1;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  color: var(--ccs-nav-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:not([href]) {
  cursor: pointer;
  user-select: none;
}

/* Livello 1 */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item {
  border-bottom: 1px solid var(--ccs-nav-line);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  min-height: 60px;
  color: var(--ccs-nav-ink);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Livello 3 e oltre */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 16px;
  color: var(--ccs-nav-muted);
}

/* Voce aperta e pagina corrente */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .is-submenu-open > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .current-menu-item > .wp-block-navigation-item__content {
  color: var(--ccs-nav-ink);
  font-weight: 500;
}

@media (hover: hover) {
  .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover {
    color: var(--ccs-nav-ink);
  }
}

/* ---------------------------------------------------------------------------
 * 3. Sottomenu (accordion)
 * ------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item .wp-block-navigation__submenu-container {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: stretch; /* segue l'altezza della riga (0fr ↔ 1fr): senza, con align-items:center
                          resta alta quanto il contenuto e sborda sopra le voci sotto mentre si chiude */
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  margin: 0 0 0 2px;
  padding: 0 0 0 16px;
  /* clip e non solo hidden: un contenitore `hidden` può essere fatto scorrere dal
     browser (es. focus su un elemento che sporge) e il sottomenu si sposterebbe */
  overflow: hidden;
  overflow: clip;
  background: transparent;
  box-shadow: inset 1px 0 0 var(--ccs-nav-rail); /* filo verticale che mostra la gerarchia */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ccs-nav-speed) ease, visibility 0s linear var(--ccs-nav-speed);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .is-submenu-open > .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* respiro sotto l'ultimo elemento di un sottomenu aperto */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
  padding-bottom: 8px;
}

/* ---------------------------------------------------------------------------
 * 4. Caret (bottone core .wp-block-navigation-submenu__toggle, nascosto da core nell'overlay)
 * ------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* freccia allineata al bordo destro, senza margini negativi */
  width: 44px;
  height: 44px;
  margin: 0 0 0 8px;
  padding: 0 2px 0 0;
  color: var(--ccs-nav-ink);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  transform: none; /* core ruota di -90° i caret annidati (tendine desktop) sopra i 782px */
  transition: transform var(--ccs-nav-speed) ease;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .is-submenu-open > .wp-block-navigation-submenu__toggle svg {
  transform: rotate(180deg);
}

/* Focus da tastiera (style.css azzera gli outline con !important: si usa box-shadow) */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle:focus-visible,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
  box-shadow: 0 0 0 2px var(--ccs-nav-ink);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content a.wp-block-navigation-item__content:focus-visible {
  box-shadow: 0 2px 0 0 var(--ccs-nav-ink);
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation__responsive-container.is-menu-open {
    --ccs-nav-speed: 0s;
  }
}