/* ==========================================================================
   site-chrome.css — integrazioni al design system necessarie all'innesto PHP.

   design-system.css resta intoccato: è il file prodotto dal design e verrà
   riaggiornato da lì. Tutto ciò che serve solo alla versione dinamica del
   sito (stati che il prototipo statico non aveva, componenti che nei
   prototipi erano duplicati per pagina) vive qui.

   Caricato da includes/views/head.php su ogni pagina migrata, subito dopo
   design-system.css e prima del CSS specifico di pagina.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Voce attiva nel drawer mobile.
   Il prototipo statico non aveva pagina corrente, quindi design-system.css
   definisce .is-active solo per .se-header__link (desktop). Qui si allinea
   il drawer allo stesso trattamento.
   -------------------------------------------------------------------------- */
.se-drawer__link.is-active {
  background: var(--slate-100);
  border-color: var(--navy);
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   Componente Input.

   Non sta in design-system.css: nei prototipi era ricopiato dentro il CSS di
   ogni pagina che ne aveva bisogno (cpt.css, registrazione.css,
   verifica-attestati.css, login.css), in versioni via via piu' complete.
   css/login.css:13-19 lascia scritto che al merge va promosso una volta sola.

   Qui c'e' la versione completa (quella di login.css, superset delle altre).
   Le copie nei CSS di pagina sono state lasciate dove stanno: servono ai
   prototipi in export/, che caricano solo design-system.css piu' il proprio
   foglio e senza quelle regole si vedrebbero male. Le dichiarazioni coincidono,
   quindi l'ordine di caricamento non cambia il risultato.
   -------------------------------------------------------------------------- */
.se-input { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.se-input__label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--navy); }
.se-input__wrap { position: relative; display: flex; align-items: center; }
.se-input__icon {
  position: absolute;
  left: 12px;
  pointer-events: none;
  color: var(--text-light);
  display: flex;
}
.se-input__field {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  background: var(--white);
  color: var(--navy);
  outline: none;
  transition: border-color var(--transition-smooth);
}
.se-input__field:focus { border-color: var(--terracotta); }
.se-input__wrap--icon .se-input__field { padding-left: 44px; }
.se-input__wrap--trailing .se-input__field { padding-right: 44px; }

.se-input__trailing { position: absolute; right: 12px; display: flex; color: var(--text-light); }
.se-input__trailing button {
  display: flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}
.se-input__trailing button:hover { color: var(--navy); }

/* Stato d'errore: cornice rossa e messaggio sotto il campo */
.se-input__hint { font-size: var(--text-xs); color: var(--text-medium); }
.se-input.has-error .se-input__field { border-color: var(--destructive); }
.se-input.has-error .se-input__hint { color: var(--destructive); }
.se-input__hint[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Avvisi.

   I prototipi simulavano tutto lato client e non avevano bisogno di comunicare
   esiti dal server. Le pagine vere invece devono dire "iscrizione inviata",
   "email gia' presente", "tutti i campi sono obbligatori": questo e' il
   componente condiviso per farlo, in tre gradi.
   -------------------------------------------------------------------------- */
.se-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  text-align: left;
}
.se-notice[hidden] { display: none; }
.se-notice > .se-icon { flex-shrink: 0; margin-top: 2px; }
.se-notice h2,
.se-notice h3 {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--fw-h4);
  color: inherit;
}
.se-notice p { margin: 0 0 6px; }
.se-notice p:last-child { margin-bottom: 0; }
.se-notice .se-btn { margin-top: 10px; }

.se-notice--ok {
  background: #ECFDF5;
  border-color: var(--success);
  color: #065F46;
}
.se-notice--warn {
  background: #FFFBEB;
  border-color: var(--warning);
  color: #92400E;
}
.se-notice--ko {
  background: var(--destructive-surface);
  border-color: var(--destructive);
  color: #991B1B;
}
.se-notice--ok > .se-icon { color: var(--success); }
.se-notice--warn > .se-icon { color: var(--warning); }
.se-notice--ko > .se-icon { color: var(--destructive); }

/* Il componente nei prototipi copriva solo input e textarea: le pagine
   dinamiche hanno anche select (province, categorie), che senza questo
   perderebbero l'aspetto del campo. */
select.se-input__field {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Archivio newsletter: nel prototipo "Iscriviti ora" era un <button> che
   apriva una finestra di iscrizione simulata. Qui porta al modulo vero, quindi
   e' un collegamento e servono le proprieta' che un <a> non ha.
   -------------------------------------------------------------------------- */
a.nl-cta__btn,
a.nl-signup__btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Header desktop: da loggati compare un pulsante in piu' (Logout, oltre al
   chip col nome). Nel prototipo il numero di pulsanti a destra era fisso e
   .se-header__nav non aveva mai bisogno di restringersi davvero: essendo un
   flex item senza min-width, quando lo spazio non basta piu' il suo
   contenuto (i link, tutti in nowrap) non si comprime ma trabocca fuori dal
   suo riquadro — e il primo link finisce sopra al logo CPT, che gli sta
   subito a sinistra nell'ordine dei flex item.

   Non e' un problema che il prototipo potesse anticipare (non aveva lo stato
   "loggato"): loghi e pulsanti restano alla loro larghezza naturale, e il
   menu di navigazione e' l'unico che puo' restringersi davvero. Se lo spazio
   proprio non basta scorre in orizzontale invece di sovrapporsi al logo. */
.se-header__inner > .se-lockup,
.se-header__inner > .se-header__actions { flex-shrink: 0; }

.se-header__nav {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.se-header__nav::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------------------
   Hero della homepage: il pulsante "Scopri i corsi" segue nel flusso il
   titolo e il sottotitolo, che pero' cambiano lunghezza da slide a slide (il
   contenuto viene dal database, non e' fisso come nel prototipo) — .se-hero__
   content li centra tutti insieme come un unico blocco verticale, quindi un
   titolo su due righe o un sottotitolo lungo spostano il pulsante piu' in
   basso, a volte a ridosso dei pallini di navigazione delle slide.

   Qui il pulsante esce dal flusso del testo e prende un posto fisso in
   fondo, sopra i pallini: resta sempre nello stesso punto, qualunque sia la
   lunghezza del testo sopra di lui. */
.se-hero__content { padding-bottom: 88px; }
.se-hero__cta {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Traduzione — menu a tendina dell'icona mondo (vedi includes/views/header.php)
   e occultamento dell'interfaccia che il widget di Google mette di suo: la
   barra in cima alla pagina, lo spostamento del body che la fa posto, e
   l'evidenziazione gialla delle parole tradotte.
   -------------------------------------------------------------------------- */
.se-translate { position: relative; }

.se-translate__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 180px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-header);
}
.se-translate__menu[hidden] { display: none; }

.se-translate__menu button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: var(--radius-lg);
  background: none;
  color: var(--navy);
  font-size: var(--text-13);
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
}
.se-translate__menu button:hover { background: var(--slate-100); }
.se-translate__hint { font-weight: var(--fw-normal); color: var(--text-light); }

/* Il widget vero e proprio non deve mai vedersi: il nostro menu ne pilota il
   <select> nascosto da fuori (vedi lo script). display:none impedirebbe a
   Google di inizializzarlo su alcuni browser, quindi si nasconde fuori
   schermo invece di toglierlo dal flusso. */
#au-translate-widget {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* La barra "Tradotto da Google Translate" in cima alla pagina, e il body che
   Google sposta di 40px per farle posto. */
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0 !important; }

/* L'evidenziazione gialla che Google mette sulle parole appena tradotte. */
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* Il balloon di traduzione che Google mostra a volte al passaggio del mouse
   o alla selezione del testo: e' un secondo meccanismo, indipendente dal
   title che lo script in fondo alla pagina toglie. */
.goog-te-balloon-frame { display: none !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-te-ftab-frame, .goog-te-ftab { display: none !important; }