/* ==========================================================================
   Netcomm Academy — Design System: TOKEN (L0)
   Solo variabili CSS, NESSUNA regola che imponga stili globali: header, footer
   e chrome del sito restano gestiti da OceanWP/WordPress (Customizer).
   I token sono disponibili site-wide così le viste Academy (e in futuro l'area
   utente) possono usarli; di per sé non applicano nulla finché non referenziati.

   NB: fonte canonica dei token. Tenere allineato il fallback nel plugin
   (assets/css/na-frontend.css).
   ========================================================================== */

:root {
	/* Superfici (tema scuro). */
	--na-bg: #0d0f13;          /* sfondo pagina */
	--na-bg2: #15181f;         /* sfondo rialzato / fine gradiente hero */
	--na-card: #1b1f28;        /* card */
	--na-card2: #222734;       /* superficie elevata (panel, popover) */

	/* Testo e linee. */
	--na-text: #f2f4f8;
	--na-muted: #9aa3b2;
	--na-line: #2a2f3a;

	/* Brand. */
	--na-accent: #1a7d3c;      /* verde Netcomm */
	--na-accent2: #37b85f;     /* verde chiaro (hover/accent) */
	--na-accent-ink: #ffffff;  /* testo su accent */
	--na-danger: #ff6b81;      /* cuore preferiti / errori */

	/* Raggi. */
	--na-radius: 12px;
	--na-radius-sm: 8px;
	--na-radius-pill: 999px;

	/* Ombre. */
	--na-shadow-card: 0 18px 40px rgba(0,0,0,.55);
	--na-shadow-pop: 0 16px 40px rgba(0,0,0,.6);

	/* Movimento. */
	--na-transition: .15s ease;

	/* Tipografia. Testi = Libre Franklin; titoli e CTA = Archivo. */
	--na-font: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--na-font-head: 'Archivo', 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Focus accessibile (usato dal plugin, scopizzato alle viste Academy). */
	--na-focus: 0 0 0 3px rgba(55,184,95,.55);
}

/* ==========================================================================
   Tipografia globale della piattaforma.
   Testi = Libre Franklin; titoli e CTA (pulsanti/link-bottone) = Archivo.
   ========================================================================== */
body,
button, input, select, textarea, optgroup {
	font-family: var(--na-font);
}
h1, h2, h3, h4, h5, h6,
.entry-title, .page-header .page-title, .widget-title {
	font-family: var(--na-font-head);
}
/* CTA: bottoni e link a forma di bottone. */
.button, button, input[type="submit"], input[type="button"], input[type="reset"],
.na-btn, .theme-button, .um .um-button {
	font-family: var(--na-font-head);
}

/* ==========================================================================
   Ultimate Member — coerenza col brand (scopato a .um).
   Baseline: i selettori UM variano per versione; rifinire sul sito live.
   ========================================================================== */
.um, .um-form, .um input, .um textarea, .um select, .um .um-button { font-family: var(--na-font) !important; }

/* Auth (login / registrazione / reset): card scura centrata. */
.um-login .um-form,
.um-register .um-form,
.um-password .um-form {
	background: var(--na-card2) !important;
	border: 1px solid var(--na-line);
	border-radius: var(--na-radius);
	padding: 28px !important;
	max-width: 520px;
	margin: 0 auto;
	box-shadow: var(--na-shadow-card);
}
.um-login .um-form input, .um-login .um-form textarea, .um-login .um-form select,
.um-register .um-form input, .um-register .um-form textarea, .um-register .um-form select,
.um-password .um-form input {
	background: var(--na-card) !important;
	color: var(--na-text) !important;
	border: 1px solid var(--na-line) !important;
	border-radius: var(--na-radius-sm) !important;
	box-shadow: none !important;
}
.um-login .um-form ::placeholder,
.um-register .um-form ::placeholder,
.um-password .um-form ::placeholder { color: var(--na-muted) !important; }
.um-login .um-field-label label,
.um-register .um-field-label label,
.um-password .um-field-label label { color: var(--na-text) !important; }

/* Pulsanti e link brand (tutta l'area UM). */
.um .um-button,
.um-form input[type="submit"] {
	background: var(--na-accent) !important;
	border-color: var(--na-accent) !important;
	color: #fff !important;
	border-radius: var(--na-radius-sm) !important;
	box-shadow: none !important;
}
.um .um-button:hover,
.um-form input[type="submit"]:hover { background: var(--na-accent2) !important; }
.um a, .um .um-link { color: var(--na-accent2); }

/* Account / Profilo: larghezza leggibile + coerenza col tema scuro. */
.um-account, .um-profile { max-width: 1040px; margin: 30px auto; }

/* Menu laterale dei tab (Account / Password / Privacy / Elimina) come card scura. */
.um-account-side { background: var(--na-card2) !important; border: 1px solid var(--na-line) !important; border-radius: var(--na-radius) !important; overflow: hidden; }
.um-account-side ul, .um-account-side li { background: transparent !important; border: 0 !important; }
.um-account-side li a { background: transparent !important; color: var(--na-text) !important; border-top: 1px solid var(--na-line) !important; }
.um-account-side li:first-child a { border-top: 0 !important; }
.um-account-side li a:hover { background: rgba(255,255,255,.05) !important; }
.um-account-side li a.current { color: var(--na-accent2) !important; background: rgba(26,125,60,.12) !important; box-shadow: inset 3px 0 0 var(--na-accent) !important; }
.um-account-side li a i, .um-account-side li a span.um-account-icon { color: var(--na-muted) !important; }
.um-account-side li a.current i, .um-account-side li a.current span.um-account-icon { color: var(--na-accent2) !important; }
.um-account-name, .um-account-name a, .um-account a, .um-account .um-link { color: var(--na-accent2) !important; }

/* Campi del form Account/Profilo: scuri come il resto del sito.
   Esclusi submit/button (restano verdi) e checkbox/radio. */
.um-account .um-form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .um-account .um-form textarea, .um-account .um-form select,
.um-profile .um-form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), .um-profile .um-form textarea, .um-profile .um-form select {
	background: var(--na-card) !important;
	color: var(--na-text) !important;
	border: 1px solid var(--na-line) !important;
	border-radius: var(--na-radius-sm) !important;
	box-shadow: none !important;
}
.um-account .um-form input:disabled, .um-account .um-form input[readonly] { background: var(--na-bg2) !important; color: var(--na-muted) !important; opacity: 1 !important; }
.um-account .um-form ::placeholder, .um-profile .um-form ::placeholder { color: var(--na-muted) !important; }
.um-account .um-field-label label, .um-profile .um-field-label label { color: var(--na-text) !important; }

/* ==========================================================================
   Risultati di ricerca (search.php): layout Academy.
   ========================================================================== */
.na-search-form .na-search{max-width:640px}
.na-search-form .na-btn{flex:none}
.na-search-section{padding-top:6px}
.na-search-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.na-search-head .na-section-title{display:flex;align-items:center;gap:10px}
.na-search-count{font-size:12px;font-weight:600;color:var(--na-muted);background:var(--na-card);border:1px solid var(--na-line);border-radius:var(--na-radius-pill);padding:2px 9px}
.na-search-pages{list-style:none;margin:0;padding:0 0 24px;display:flex;flex-direction:column;gap:10px}
.na-search-pages li{background:var(--na-card);border:1px solid var(--na-line);border-radius:var(--na-radius);padding:14px 18px}
.na-search-pages a{color:var(--na-text);font-family:var(--na-font-head);font-weight:600;font-size:16px;text-decoration:none}
.na-search-pages a:hover{color:var(--na-accent2)}
.na-search-pages p{margin:4px 0 0;color:var(--na-muted);font-size:14px;line-height:1.5}
.na-search-results .na-empty .na-btn{margin-top:10px}
/* "Carica altri" della sezione Contenuti (na-search.js). */
.na-search-results .na-search-more{padding:18px 0 30px}
.na-search-results .na-search-more .na-btn[aria-busy="true"]{opacity:.6;pointer-events:none}
.na-search-results .na-search-end{text-align:center;color:var(--na-muted);font-size:14px;margin:0;padding:12px 0 30px}

/* ==========================================================================
   Navigazione da tastiera nell'header (test UX D-03): focus visibile sulle
   voci di menu e sottomenu apribile con Tab (focus-within), non solo con hover.
   ========================================================================== */
#site-navigation a:focus-visible,
#site-header a:focus-visible,
#site-header button:focus-visible { outline: 0; box-shadow: var(--na-focus); border-radius: 4px; }
#site-navigation li.menu-item-has-children:focus-within > ul.sub-menu,
#site-navigation .dropdown-menu li:focus-within > ul { visibility: visible !important; opacity: 1 !important; }

/* ==========================================================================
   Ritocchi dal test UX mobile (2026-10-12, tema 1.6.0).
   ========================================================================== */
/* M-04: ricerca nell'header mobile: lente 44x44 accanto a MENU + barra a tutta larghezza (functions.php + na-header.js). */
.na-msearch-toggle{display:none}
.na-msearch{display:none}
@media(max-width:959px){
	.oceanwp-mobile-menu-icon{display:flex;align-items:center;gap:2px}
	.na-msearch-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:inherit;text-decoration:none;border-radius:8px}
	.na-msearch-toggle:hover,.na-msearch-toggle[aria-expanded="true"]{color:var(--na-accent2)}
	.na-msearch-toggle svg{width:22px;height:22px;display:block}
	/* M-08: "MENU" con area di tocco >= 44px. */
	.oceanwp-mobile-menu-icon a.mobile-menu{display:inline-flex;align-items:center;min-height:44px;padding:0 6px 0 10px}
	.na-msearch{display:block;position:absolute;left:0;right:0;top:100%;z-index:60;background:var(--na-bg2);border-top:1px solid var(--na-line);border-bottom:1px solid var(--na-line);padding:10px 16px;box-shadow:0 14px 30px rgba(0,0,0,.45)}
	.na-msearch[hidden]{display:none}
	.na-msearch form{display:flex;gap:8px;margin:0}
	.na-msearch input[type="search"]{flex:1;min-width:0;min-height:46px;padding:0 14px;border:1px solid var(--na-line);border-radius:8px;background:var(--na-card);color:var(--na-text);font-size:16px;-webkit-appearance:none}
	.na-msearch input[type="search"]::placeholder{color:var(--na-muted)}
	.na-msearch button{flex:none;min-height:46px;padding:0 16px;border:0;border-radius:8px;background:var(--na-accent);color:#fff;font-family:var(--na-font-head);font-weight:600;font-size:14px;cursor:pointer}
	#site-header{position:relative}
}

/* M-10: pagina risultati: testo digitato leggibile e pulsante a tutta larghezza su mobile. */
.na-search-form .na-search input{color:var(--na-text) !important;-webkit-text-fill-color:var(--na-text)}
@media(max-width:640px){
	.na-search-form{flex-direction:column;align-items:stretch}
	.na-search-form .na-search{max-width:none}
	.na-search-form .na-btn{width:100%;text-align:center}
}

/* M-11: menu mobile (dropdown OceanWP) coerente col tema scuro, voci tutte visibili (niente max-height), maiuscole uniformi, sottovoci rientrate. */
#mobile-dropdown{background:var(--na-bg2) !important;border-top:1px solid var(--na-line);max-height:none !important;overflow:visible !important;box-shadow:0 18px 40px rgba(0,0,0,.5)}
#mobile-dropdown .menu li{border-color:var(--na-line) !important}
#mobile-dropdown .menu li a{color:var(--na-text) !important;border-color:var(--na-line) !important;text-transform:uppercase;letter-spacing:.3px;font-size:14px;font-family:var(--na-font-head);min-height:51px;display:flex;align-items:center}
#mobile-dropdown .menu li a:hover,#mobile-dropdown .menu li.current-menu-item > a,#mobile-dropdown .menu li.current-menu-ancestor > a{color:var(--na-accent2) !important;background:rgba(26,125,60,.12) !important}
#mobile-dropdown .menu ul.sub-menu{background:var(--na-bg) !important}
#mobile-dropdown .menu ul.sub-menu li a{text-transform:none;padding-left:34px !important;font-family:var(--na-font);font-size:14.5px}
#mobile-dropdown .dropdown-toggle{color:var(--na-muted) !important}
#mobile-dropdown .dropdown-toggle:hover,#mobile-dropdown .dropdown-toggle:focus-visible{color:var(--na-accent2) !important}
#mobile-dropdown .mobile-searchform{padding:12px 16px 16px !important;border-top:1px solid var(--na-line)}
#mobile-dropdown .mobile-searchform input{background:var(--na-card) !important;color:var(--na-text) !important;border:1px solid var(--na-line) !important;border-radius:8px !important;min-height:44px}
#mobile-dropdown .mobile-searchform button,#mobile-dropdown .mobile-searchform .search-submit{min-width:44px;min-height:44px;color:var(--na-accent2) !important}

/* M-05: login e registrazione da mobile: campi alti 48px e testo 16px (niente zoom iOS), pulsanti impilati a tutta larghezza, azione secondaria come link-bottone leggero. */
.um-login .um-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.um-register .um-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.um-password .um-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]){min-height:48px;font-size:16px !important;padding-left:14px !important}
.um-login .um-form .um-col-alt .um-half,.um-register .um-form .um-col-alt .um-half{width:100% !important;float:none !important;margin:0 0 10px !important}
.um-login .um-form .um-col-alt .um-button,.um-register .um-form .um-col-alt .um-button{width:100% !important;min-height:48px;display:flex !important;align-items:center;justify-content:center}
.um-login .um-form .um-col-alt .um-right .um-button,.um-register .um-form .um-col-alt .um-right .um-button{background:transparent !important;border:1px solid var(--na-line) !important;color:var(--na-accent2) !important}
.um-login .um-form .um-col-alt .um-right .um-button:hover,.um-register .um-form .um-col-alt .um-right .um-button:hover{border-color:var(--na-accent2) !important}
.um-login .um-link-alt,.um-register .um-link-alt,.um-login .um-col-alt-b a{display:inline-block;padding:10px 0;color:var(--na-accent2) !important}
.um-login .um-field-checkbox,.um-register .um-field-checkbox{min-height:44px;display:flex;align-items:center}
.um .um-field-checkbox-option input[type="checkbox"],.um input[type="checkbox"]{width:22px;height:22px;accent-color:var(--na-accent2)}

/* ==========================================================================
   Ritocchi dal test UX da Socio loggato (2026-10-12, tema 1.7.0).
   ========================================================================== */
/* D-36: pagina Account: titolo, niente "Vedi profilo" (profilo pubblico non usato), hint sotto la password. */
.na-page-title{max-width:1040px;margin:28px auto 0;padding:0 16px;font-size:30px;line-height:1.15}
.um-account .um-account-profile-link{display:none !important}
.na-field-hint{margin:6px 0 0;color:var(--na-muted);font-size:13px;line-height:1.45}
/* D-23: voce "Esci" nella sidebar dell'account (aggiunta da na-header.js) e blocco sotto il form (mobile). */
.um-account-side li.na-account-side-logout a{color:var(--na-danger) !important}
.na-account-logout{max-width:1040px;margin:14px auto 30px;padding:0 16px;text-align:right}
.na-account-logout-link{display:inline-block;padding:10px 16px;border:1px solid var(--na-line);border-radius:8px;color:var(--na-text);text-decoration:none;font-family:var(--na-font-head);font-weight:600}
.na-account-logout-link:hover{border-color:var(--na-danger);color:var(--na-danger)}
@media(min-width:801px){.na-account-logout{display:none}}

/* ==========================================================================
   Ritocchi dal test UX mobile da Socio (2026-10-12, tema 1.8.0).
   ========================================================================== */
/* M-32: pagina Account da mobile: margine laterale, campi alti 48px con testo 16px. */
.um-account .um-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.um-account .um-form select{min-height:48px;font-size:16px !important;padding-left:14px !important}
.um-account .um-form .um-button,.um-account .um-form input[type="submit"]{min-height:48px}
@media(max-width:800px){
	.um.um-account{padding:0 16px !important;box-sizing:border-box}
	.um-account .um-account-main{padding:0 !important}
	.um-account .um-form .um-button,.um-account .um-form input[type="submit"]{width:100%}
}
/* M-28: sottomenu MyACADEMY aperto in partenza da loggato (na-header.js). */
#mobile-dropdown li.na-open-default > .dropdown-toggle{transform:rotate(45deg)}
/* M-38: footer e "torna su" con aree di tocco adeguate. */
@media(max-width:640px){
	.na-footer a{display:inline-block;padding:6px 0;line-height:1.4}
	.na-footer-menu a,.na-footer-legal a{padding:9px 0}
}
#scroll-top{width:44px !important;height:44px !important;line-height:44px !important;font-size:20px}
#scroll-top.scroll-top-left{left:14px;bottom:14px}
body.na-has-seqbar #scroll-top{bottom:calc(var(--na-seqbar-h,76px) + 14px) !important}

/* ==========================================================================
   Flusso registrazione / login / password dimenticata (tema 1.9.0).
   ========================================================================== */
/* Registrazione: da desktop il form si allarga e i campi vanno su due colonne
   (Nome|Cognome, Email|Azienda, Nome utente a tutta larghezza, Password|Conferma,
   privacy a tutta larghezza). L'ordine dei campi è impostato in functions.php. */
@media(min-width:768px){
	.um.um-register{max-width:760px !important}
	.um-register .um-form{max-width:760px;padding:32px 36px !important}
	.um-register .um-form .um-row .um-col-121{width:100% !important;float:none !important;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:0}
	.um-register .um-form .um-row .um-col-122:empty{display:none}
	.um-register .um-form .um-row .um-col-121 > .um-field{min-width:0}
	.um-register .um-form .um-row .um-col-121 > .um-field-user_login,
	.um-register .um-form .um-row .um-col-121 > .um-field-type_terms_conditions,
	.um-register .um-form .um-row .um-col-121 > .um-field-type_block,
	.um-register .um-form .um-row .um-col-121 > .um-field-type_textarea,
	.um-register .um-form .um-row .um-col-121 > .um-field-type_divider{grid-column:1 / -1}
	.um-register .um-form .um-col-alt .um-half{width:calc(50% - 8px) !important;float:left !important;margin:0 0 10px !important}
	.um-register .um-form .um-col-alt .um-right.um-half{float:right !important}
}
/* Password dimenticata: titolo/sottotitolo generati da functions.php con lo
   stesso aspetto di login/registrazione; spazio prima della card. */
.um-page-password-reset .na-auth-title{margin:0 0 10px}
.um-page-password-reset .na-auth-subtitle{margin:0 0 24px;color:var(--na-text)}
.um-password .um-form .um-field-block{color:var(--na-text)}
.um-password .um-form .um-col-alt .um-button{width:100% !important;min-height:48px;display:flex !important;align-items:center;justify-content:center}
/* Messaggi di errore UM: leggibili sul tema scuro. */
.um .um-field-error{background:var(--na-danger) !important;color:#fff !important;border-radius:6px;padding:6px 10px;font-size:13px;line-height:1.4}
.um .um-field-error .um-field-arrow,.um .um-field-error .um-field-arrow i{color:var(--na-danger) !important}
/* Registrazione: link all'informativa privacy (nuova scheda, sostituisce il toggle UM). */
.um-register .na-privacy-link{display:inline-block;padding:6px 0;color:var(--na-accent2) !important;text-decoration:underline}

/* ==========================================================================
   Pagina Account come dashboard (tema 1.10.0): il form UM diventa il blocco
   "I miei dati" sotto la dashboard [na_myaccount]. Sidebar/nav delle schede
   nascoste (password, privacy ed elimina sono link sotto il form).
   ========================================================================== */
body.na-myaccount .um-account .um-account-side,
body.na-myaccount .um-account .um-account-nav,
body.na-myaccount .um-account .um-account-meta{display:none !important}
body.na-myaccount .um-account{max-width:1200px;margin:14px auto 0}
body.na-myaccount .um-account .um-account-main{width:100% !important;float:none !important;padding:0 !important}
body.na-myaccount .um-account .um-account-main .um-account-tab{background:var(--na-card);border:1px solid var(--na-line);border-radius:var(--na-radius);padding:22px 24px}
body.na-myaccount .um-account .um-account-heading{display:none !important}
body.na-myaccount .um-account .um-form input[disabled]{cursor:not-allowed}
body.na-myaccount .na-field-hint-email a{color:var(--na-accent2)}
body.na-myaccount .um-account .na-acc-links a{color:var(--na-text) !important}
body.na-myaccount .um-account .na-acc-links a.is-danger{color:var(--na-danger) !important}
body.na-myaccount .um-account .na-acc-links a span{color:var(--na-muted) !important}
body.na-myaccount .na-account-logout{display:none !important}
@media(max-width:640px){body.na-myaccount .um-account{padding:0 16px !important}body.na-myaccount .um-account .um-account-main .um-account-tab{padding:16px}}
/* Tab "generale" UM su due colonne da desktop (Nome|Cognome, Nome utente|Email); password e pulsante a tutta larghezza. */
@media(min-width:768px){
	/* Solo quando è la scheda attiva: nelle altre (es. /account/delete/) UM la nasconde. */
	body.na-myaccount .um-account .um-account-main[data-current_tab="general"] .um-account-tab-general{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
	body.na-myaccount .um-account .um-account-tab-general > .um-field{min-width:0}
	body.na-myaccount .um-account .um-account-tab-general > .um-field-first_name{order:1}
	body.na-myaccount .um-account .um-account-tab-general > .um-field-last_name{order:2}
	body.na-myaccount .um-account .um-account-tab-general > .um-field-azienda{order:3}
	body.na-myaccount .um-account .um-account-tab-general > .um-field-user_login{order:4}
	body.na-myaccount .um-account .um-account-tab-general > .um-field-user_email{order:5;grid-column:1 / -1}
	body.na-myaccount .um-account .um-account-tab-general > .um-field-password,
	body.na-myaccount .um-account .um-account-tab-general > .um-col-alt{grid-column:1 / -1;order:9}
	body.na-myaccount .um-account .um-account-tab-general > .um-field-password{order:5}
}
/* Avviso UM "Dati salvati correttamente." nella pagina account: stile brand. */
body.na-myaccount .um-account .um-notice{background:rgba(55,184,95,.14) !important;border:1px solid var(--na-accent2) !important;color:var(--na-text) !important;border-radius:var(--na-radius-sm) !important;padding:12px 44px 12px 16px !important;margin:0 0 18px !important;font-weight:600;position:relative}
body.na-myaccount .um-account .um-notice.err{background:rgba(255,107,129,.14) !important;border-color:var(--na-danger) !important}
body.na-myaccount .um-account .um-notice i{color:var(--na-text) !important;top:50% !important;transform:translateY(-50%)}
/* Scheda Elimina account: pulsante rosso (azione distruttiva). */
body.na-myaccount .um-account .um-account-tab-delete .um-button{background:var(--na-danger) !important;border-color:var(--na-danger) !important;color:#1a0b0f !important}
body.na-myaccount .um-account .um-account-tab-delete .um-button:hover{filter:brightness(1.08)}