/* CBN Informatica - sottomenu "Servizi" dell'header (markup: Cbn_Header_Menu_Walker in functions.php, comportamento: assets/js/cbn-menu.js).
   Si appoggia a cbn-chrome.css (header, voci, bottoni, focus). Prefisso .cbn-sub / .cbn-has-sub; colori e spazi solo dai token --cbn-*.

   - la voce "Servizi" e' un LINK vero verso /servizi/ + un pulsante separato (chevron, aria-expanded) che apre il pannello:
     il link resta navigabile e il pannello non dipende dall'hover;
   - desktop (>= 1100px, lo stesso breakpoint dell'header): il pannello e' chiaro, largo quanto l'header, a 2 colonne con la
     descrizione breve di ogni servizio; si apre anche al passaggio del mouse (gestito dal JS, solo mouse);
   - mobile (< 1100px): accordion dentro il pannello dell'hamburger, voci >= 48px;
   - senza JS: desktop apre con :hover/:focus-within, mobile mostra l'elenco sempre aperto (come il menu di prima). */

/* ---- Voce con sottomenu: testa = link + pulsante ---- */
.cbn-has-sub { position: static; }
.cbn-sub-head { display: flex; align-items: center; }
.cbn-block .cbn-sub-toggle {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: var(--cbn-touch-target); height: var(--cbn-touch-target); margin: 0 0 0 4px; padding: 0;
	border: 0; background: transparent; color: var(--cbn-on-dark-muted); cursor: pointer;
	transition: color var(--cbn-dur-ui);
}
.cbn-block .cbn-sub-toggle:hover, .cbn-block .cbn-has-sub.is-open > .cbn-sub-head .cbn-sub-toggle { color: var(--cbn-on-dark); }
.cbn-sub-toggle svg { width: 14px; height: 14px; transition: transform var(--cbn-dur-ui) var(--cbn-ease-ui); }
.cbn-has-sub.is-open > .cbn-sub-head .cbn-sub-toggle svg { transform: rotate(180deg); }

/* Pagina corrente: la regola di cbn-chrome.css usa ".current-menu-item > a", ma qui il link sta dentro .cbn-sub-head.
   "Servizi" risulta attiva su /servizi/ (current-menu-item) e sulle 8 pagine servizio (current-menu-ancestor, figlie nel menu). */
.cbn-block .cbn-header__nav .current-menu-item > .cbn-sub-head > a,
.cbn-block .cbn-header__nav .current-menu-ancestor > .cbn-sub-head > a {
	border-bottom-color: var(--cbn-orange);
	color: var(--cbn-on-dark);
}

/* il pannello e' chiuso di base; l'apertura la decide .is-open (JS) */
.cbn-sub { display: none; }
.cbn-has-sub.is-open > .cbn-sub { display: block; }

.cbn-sub__list { display: grid; margin: 0; padding: 0; list-style: none; }
.cbn-block .cbn-header__nav .cbn-sub a { border-bottom: 0; }
.cbn-sub__arrow { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--cbn-dur-ui) var(--cbn-ease-ui); }
.cbn-sub a:hover .cbn-sub__arrow { transform: translateX(4px); }
.cbn-sub__title { font-weight: 700; }
.cbn-sub__desc { display: block; margin-top: 4px; color: var(--cbn-on-dark-muted); font: 400 .875rem/1.45 var(--cbn-font-body); }
.cbn-sub__intro { display: none; }

/* ======================= DESKTOP ======================= */
@media (min-width: 1100px) {
	/* la voce occupa tutta l'altezza della barra: tra il testo e il pannello non c'e' "terra di nessuno" dove l'hover si perde */
	.cbn-header__panel, .cbn-header__nav { align-self: stretch; }
	.cbn-header__nav > li { display: flex; align-items: center; }

	/* senza JS: apertura da hover/focus */
	html:not(.cbn-js) .cbn-has-sub:hover > .cbn-sub,
	html:not(.cbn-js) .cbn-has-sub:focus-within > .cbn-sub { display: block; }

	/* assoluto rispetto all'header (sticky, quindi posizionato): largo quanto la barra, subito sotto */
	.cbn-sub {
		position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
		background: var(--cbn-paper); color: var(--cbn-text);
		border-top: 1px solid var(--cbn-line-on-light); border-bottom: 4px solid var(--cbn-orange);
		box-shadow: 0 24px 40px rgba(0, 0, 0, .35);
	}
	.cbn-sub__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--cbn-space-xl); padding-top: var(--cbn-space-lg); padding-bottom: var(--cbn-space-lg); }
	.cbn-sub__intro { display: block; align-self: start; padding-right: var(--cbn-space-lg); }
	.cbn-sub__eyebrow { margin: 0 0 var(--cbn-space-sm); color: var(--cbn-orange-strong); font: 500 var(--cbn-size-label)/1 var(--cbn-font-label); letter-spacing: .12em; text-transform: uppercase; }
	.cbn-sub__intro p:not(.cbn-sub__eyebrow) { margin: 0 0 var(--cbn-space-md); color: var(--cbn-text-muted); font-size: 1rem; line-height: 1.55; }
	/* ".cbn-sub a." davanti: la regola generale delle voci (cbn-chrome.css, grigio chiaro, bianco in hover) ha specificita' pari o maggiore e su fondo chiaro farebbe sparire il link */
	.cbn-block .cbn-header__nav .cbn-sub a.cbn-sub__all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: 0; color: var(--cbn-orange-strong); font: 700 .9375rem/1 var(--cbn-font-display); text-decoration: underline; text-decoration-color: var(--cbn-orange-strong); text-decoration-thickness: 2px; text-underline-offset: 6px; }
	.cbn-sub__list { grid-template-columns: 1fr 1fr; column-gap: var(--cbn-space-lg); }
	.cbn-sub__all-wrap { display: none; }
	.cbn-block .cbn-header__nav .cbn-sub__list a {
		position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cbn-space-sm);
		min-height: 88px; padding: var(--cbn-space-sm) var(--cbn-space-sm) var(--cbn-space-sm) var(--cbn-space-md);
		border-top: 1px solid var(--cbn-line-on-light); border-left: 4px solid transparent; color: var(--cbn-text);
		font: 400 1rem/1.3 var(--cbn-font-body); transition: background-color var(--cbn-dur-ui), border-color var(--cbn-dur-ui);
	}
	.cbn-block .cbn-header__nav .cbn-sub__list a:hover,
	.cbn-block .cbn-header__nav .cbn-sub__list .current-menu-item > a { background: var(--cbn-white); border-left-color: var(--cbn-orange-strong); }
	.cbn-sub__title { display: block; font-size: 1.0625rem; letter-spacing: -.01em; }
	.cbn-sub__desc { color: var(--cbn-text-muted); }
	.cbn-sub__list .cbn-sub__arrow { margin-top: 3px; color: var(--cbn-orange-strong); opacity: 0; }
	.cbn-block .cbn-header__nav .cbn-sub a.cbn-sub__all:hover { color: var(--cbn-orange-strong-hover); }
	.cbn-sub a:hover .cbn-sub__arrow, .cbn-sub a:focus-visible .cbn-sub__arrow { opacity: 1; }
	/* ultima riga della griglia: chiude con un filetto */
	.cbn-block .cbn-header__nav .cbn-sub__list > li:nth-last-child(-n+2) a { border-bottom: 1px solid var(--cbn-line-on-light); }
	.cbn-sub :focus-visible { outline-color: var(--cbn-orange-strong); outline-offset: -3px; }
}

/* ======================= MOBILE (accordion) ======================= */
@media (max-width: 1099px) {
	.cbn-header__nav li + li { border-top: 1px solid var(--cbn-line-on-dark); }
	/* Voci di primo livello a 56px (pulsante del sottomenu compreso). */
	.cbn-block .cbn-header__nav > li > a, .cbn-block .cbn-header__nav .cbn-sub-head > a { display: flex; align-items: center; min-height: 56px; padding: 0 var(--cbn-space-sm); font-size: 1.0625rem; }
	.cbn-sub-head > a { flex: 1; }
	.cbn-block .cbn-sub-toggle {
		width: 56px; height: auto; align-self: stretch; margin: 0;
		border-left: 1px solid var(--cbn-line-on-dark); color: var(--cbn-on-dark);
	}
	/* sulla pagina corrente il segno e' la barra a sinistra (come le altre voci), non il filetto sotto */
	.cbn-block .cbn-header__nav .current-menu-item > .cbn-sub-head > a,
	.cbn-block .cbn-header__nav .current-menu-ancestor > .cbn-sub-head > a { border-bottom-color: transparent; border-left-color: var(--cbn-orange); }
	.cbn-sub { border-top: 1px solid var(--cbn-line-on-dark); background: var(--cbn-surface-raised); }
	/* senza JS l'elenco resta visibile (nessuna voce nascosta), con JS e' un accordion */
	html:not(.cbn-js) .cbn-sub { display: block; }
	.cbn-sub__inner { display: block; padding: 0; }
	.cbn-block .cbn-header__nav .cbn-sub a {
		display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cbn-space-sm);
		min-height: 48px; padding: 14px var(--cbn-space-sm) 14px var(--cbn-space-lg);
		border-left: 3px solid transparent; color: var(--cbn-on-dark); font-size: 1rem;
	}
	.cbn-block .cbn-header__nav .cbn-sub a:hover, .cbn-block .cbn-header__nav .cbn-sub .current-menu-item > a { border-left-color: var(--cbn-orange); background: var(--cbn-surface-raised-hover); }
	.cbn-sub__title { display: block; font-size: 1rem; }
	.cbn-sub__list .cbn-sub__arrow { display: none; }
	.cbn-block .cbn-header__nav .cbn-sub .cbn-sub__all-wrap a { align-items: center; color: var(--cbn-on-dark); font-weight: 800; }
}

/* Sotto i 720px (stesso punto in cui la CTA passa nel pannello) le descrizioni sono tolte: con 8 voci a due righe l'accordion
   supererebbe lo schermo e la CTA "Prenota una consulenza" in fondo al pannello andrebbe cercata scorrendo. La descrizione
   resta su tablet e desktop; il titolo del servizio basta a scegliere. */
@media (max-width: 719px) {
	.cbn-sub__desc { display: none; }
}