/* =========================================================================
   Lympha Technologies — Tema "Lympha / Flusso"
   Estensione di Bootstrap Italia (AGID). I colori usati per il testo sono
   verificati per contrasto WCAG 2.1 AA (>= 4.5:1; >= 3:1 per testo grande).
   ========================================================================= */

/* I token di brand (palette --lt-* e override --bs-*) NON stanno più qui:
   sono il layer di progetto, in plugins/LymphaTech/webroot/css/lympha-brand.css,
   caricato dopo questo file. Questa CSS contiene solo la STRUTTURA (componenti,
   layout, selettori .lt-*) che consuma quei token via var(--lt-*), così resta
   riutilizzabile ridefinendo il :root con la palette di un altro progetto. */

/* ------------------------------ Tipografia ----------------------------- */
body {
  background-color: #fff;
  color: var(--lt-ink);
  font-family: var(--bs-body-font-family);
}
.display-1,.display-2,.display-3,.display-4,.display-5,h1,.h1,h2,.h2 {
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--lt-teal-900);
}
.lead { color: var(--lt-ink-soft); }
.text-accent { color: var(--lt-orange-700); }
.text-teal { color: var(--lt-teal-700); }
.fw-700 { font-weight: 700; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lt-teal-700);
}
.eyebrow::before {
  content: ""; width: 1.75rem; height: 2px;
  background: var(--lt-orange); display: inline-block;
}
.section-deep .eyebrow { color: var(--lt-aqua-soft); }

/* Ancore: compensa l'header sticky quando si salta a un #id */
:target { scroll-margin-top: calc(var(--lt-header-h) + 1rem); }
[id] { scroll-margin-top: calc(var(--lt-header-h) + 1rem); }

/* ---------------------------- Focus visibile --------------------------- */
/* WCAG 2.4.7 — non rimuovere mai l'outline */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
[tabindex]:focus-visible, summary:focus-visible {
  outline: 3px solid var(--lt-orange-700) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}
.section-deep a:focus-visible, .lt-footer a:focus-visible,
.lt-header a:focus-visible, .lt-drop-toggle:focus-visible {
  outline-color: var(--lt-orange) !important;
}

/* Skip link */
.lt-skiplink {
  position: absolute; left: 1rem; top: -100px; z-index: 1100;
  background: var(--lt-teal-900); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 .5rem .5rem; font-weight: 700; transition: top .15s ease;
}
.lt-skiplink:focus { top: 0; color: #fff; }

/* ---------------------------- Pulsanti / target ------------------------ */
/* WCAG 2.5.8 — dimensione bersaglio >= 44x44 px */
.btn { min-height: 44px; display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   Regola di stile: LO HOVER INVERTE IL RIPOSO. Quello che era fondo diventa
   testo e viceversa — un bottone pieno si svuota, un bottone vuoto si riempie.
   Il colore d'identità (teal, arancio, bianco) resta sul contorno in tutti gli
   stati, così il bottone non cambia mai natura: cambia solo da che parte sta il
   colore. Il caso «fondo scuro con testo scuro» sparisce per costruzione.

   IL TONO SCURO DEI BOTTONI È `--lt-teal-900` (#0c3540), non il teal della
   palette: quello (`--lt-teal`) veste superfici e decori, `--lt-teal-700` i
   testi-link. Sui bottoni la coppia è una sola — #0c3540 e bianco — e vale in
   entrambi i versi (13.1:1), sia col fondo scuro sia col testo scuro su bianco.

   PERCHÉ QUI SI SCRIVONO PROPRIETÀ VERE E NON SOLO LE `--bs-btn-*`.
   Il CSS compilato di Bootstrap Italia fissa i colori delle varianti a valori
   LETTERALI (`.btn-outline-primary:hover{color:#125ca5}`) e nella base `.btn`
   lascia due variabili SCSS non risolte (`--bs-btn-color: $primary`,
   `--bs-btn-hover-color: $color-background-primary-hover`). La sola regola che
   legge le variabili — `.btn:hover{background-color:var(--bs-btn-hover-bg);
   color:var(--bs-btn-hover-color)}` — pesa (0,1,1) e perde contro
   `.btn-outline-primary:hover` (0,2,0) del tema. Era esattamente il difetto
   segnalato: allo hover il fondo passava al teal della nostra variabile mentre
   il testo restava il blu del tema — scuro su scuro. Dichiarare altre
   `--bs-btn-*` non lo avrebbe mai risolto: erano codice morto.

   Le `--bs-btn-*` restano comunque la MANOPOLA della variante: sono dichiarate
   qui con valori sensati e rilette dalle tre regole di stato, così gli override
   inline già presenti nei contenuti (`style="--bs-btn-color:#fff;…"` sui
   bottoni delle sezioni scure) cominciano finalmente a funzionare davvero.

   Il contorno è un `box-shadow: inset` — l'idioma del tema — e non un `border`:
   passando da vuoto a pieno la scatola non cambia e il testo non si sposta.
   `--lt-btn-shadow` è l'ombra portata facoltativa, che si somma al contorno.
   -------------------------------------------------------------------------- */

/* Token per variante: qui si dice solo DI CHE COLORE è il bottone. */
.btn.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lt-teal-900);          /* tono scuro dei bottoni        */
  --bs-btn-border-color: var(--lt-teal-900);
  --bs-btn-hover-color: var(--lt-teal-900); /* su bianco = 13.1:1            */
  --bs-btn-hover-bg: #fff;
  --lt-btn-shadow: 0 .5rem 1.25rem rgba(12,53,64,.28);
}
.btn.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lt-orange-700);        /* bianco su arancio = 5.8:1     */
  --bs-btn-border-color: var(--lt-orange-700);
  --bs-btn-hover-color: var(--lt-orange-700);
  --bs-btn-hover-bg: #fff;
}
/* Il secondario del tema è un grigio-ardesia che su bianco non arriva a 4.5:1
   una volta invertito: qui si usa l'inchiostro tenue della palette, che ci
   arriva da entrambe le parti (7.0:1 sia bianco-su-ink sia ink-su-bianco). */
.btn.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lt-ink-soft);
  --bs-btn-border-color: var(--lt-ink-soft);
  --bs-btn-hover-color: var(--lt-ink-soft);
  --bs-btn-hover-bg: #fff;
}
.btn.btn-outline-primary {
  --bs-btn-color: var(--lt-teal-900);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--lt-teal-900);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lt-teal-900);
}
.btn.btn-outline-white {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--lt-teal-900);
  --bs-btn-hover-bg: #fff;
}
/* Placca bianca sulle sezioni profonde: allo hover si svuota e lascia passare
   il fondo scuro, con testo e contorno bianchi. */
.btn.btn-light-on-dark {
  --bs-btn-color: var(--lt-teal-900);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: transparent;
  font-weight: 700;
}

/* Sezioni scure: la variante «vuota» si veste di bianco. Senza questo, il tema
   la lascia teal su teal — illeggibile già da ferma, non solo allo hover. È lo
   stesso effetto che alcuni contenuti ottengono con le `--bs-btn-*` inline:
   averlo qui rende quegli inline ridondanti, non sbagliati. */
.section-deep .btn.btn-outline-primary,
.lt-footer .btn.btn-outline-primary,
.bg-dark .btn.btn-outline-primary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--lt-teal-900);
  --bs-btn-hover-bg: #fff;
}

/* Riposo — l'aspetto lo danno queste tre regole, uguali per tutte le varianti.
   I selettori sono doppi (`.btn.btn-primary`) per battere per specificità i
   colori letterali del tema, che stanno in un foglio caricato prima. */
.btn.btn-primary, .btn.btn-accent, .btn.btn-secondary,
.btn.btn-outline-primary, .btn.btn-outline-white,
.btn.btn-light-on-dark, .btn.lt-filter {
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  box-shadow: inset 0 0 0 2px var(--bs-btn-border-color), var(--lt-btn-shadow, 0 0 rgba(0,0,0,0));
}

/* Hover e focus da tastiera: l'inversione. Il contorno resta il colore
   d'identità (`--bs-btn-border-color`), che nelle varianti piene coincide con
   il fondo di riposo — il bottone si «svuota» senza perdere la sua tinta. */
.btn.btn-primary:hover, .btn.btn-primary:focus-visible,
.btn.btn-accent:hover, .btn.btn-accent:focus-visible,
.btn.btn-secondary:hover, .btn.btn-secondary:focus-visible,
.btn.btn-outline-primary:hover, .btn.btn-outline-primary:focus-visible,
.btn.btn-outline-white:hover, .btn.btn-outline-white:focus-visible,
.btn.btn-light-on-dark:hover, .btn.btn-light-on-dark:focus-visible,
.btn.lt-filter:hover, .btn.lt-filter:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  box-shadow: inset 0 0 0 2px var(--bs-btn-border-color), var(--lt-btn-shadow, 0 0 rgba(0,0,0,0));
}

/* Premuto: stessa inversione, appena più cupa. Il `:not(:disabled)` non serve
   alla logica ma alla specificità — il tema scrive
   `.btn-primary:not(:disabled):not(.disabled):active` (0,4,0) e va pareggiato. */
.btn.btn-primary:not(:disabled):active,
.btn.btn-accent:not(:disabled):active,
.btn.btn-secondary:not(:disabled):active,
.btn.btn-outline-primary:not(:disabled):active,
.btn.btn-outline-white:not(:disabled):active,
.btn.btn-light-on-dark:not(:disabled):active,
.btn.lt-filter:not(:disabled):active {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  box-shadow: inset 0 0 0 2px var(--bs-btn-border-color), var(--lt-btn-shadow, 0 0 rgba(0,0,0,0));
  filter: brightness(.94);
}

/* `.text-white` di Bootstrap è `!important`: sui bottoni di invio dei form
   (`AcmeForm`, `element/forms/BsItalia/*.php`) terrebbe il testo bianco anche
   dopo l'inversione — bianco su bianco. Unico `!important` del blocco, e c'è
   solo perché deve vincere contro un altro `!important`. */
.btn.btn-primary.text-white:hover,
.btn.btn-primary.text-white:focus-visible,
.btn.btn-primary.text-white:not(:disabled):active {
  color: var(--bs-btn-hover-color) !important;
}

/* -------------------------------- Header ------------------------------- */
.lt-header { border-bottom: 1px solid var(--lt-border); background:#fff; }

.lt-brand { display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.lt-brand:hover { text-decoration:none; }
.lt-brand img.lt-logo { height:74px; width:auto; flex:0 0 auto; }
.lt-brand .lt-name { font-weight:700; font-size:2.25rem; color:var(--lt-teal-900); line-height:1; }
.lt-brand .lt-name span { color: var(--lt-teal); }
.lt-brand .lt-tag { font-size:1.24rem; color:var(--lt-ink-soft); letter-spacing:.08em; } /* text-transform:uppercase; */

/* Selettore lingua */
.lt-lang { display:inline-flex; gap:.15rem; align-items:center; }
.lt-lang a { padding:.2rem .45rem; border-radius:.35rem; font-weight:700; color:var(--lt-ink-soft); text-decoration:none; font-size:.85rem; }
.lt-lang a:hover { color:var(--lt-teal-700); background:var(--lt-mist); }
.lt-lang a[aria-current="true"] { background:var(--lt-mist); color:var(--lt-teal-700); }

/* Selettore lingua — variante dropdown Bootstrap Italia con bandierine (menu Lympha) */
.lt-lang-toggle { font-weight:700; font-size:.85rem; color:var(--lt-ink-soft); cursor:pointer; }
.lt-lang-toggle:hover, .lt-lang-toggle:focus { color:var(--lt-teal-700); }
/* niente doppio caret: il chevron è già l'icona sprite #it-expand */
.lt-lang-toggle.dropdown-toggle::after { display:none; }
.lt-lang-toggle .icon { fill:currentColor; transition:transform .2s ease; }
.lt-lang-toggle[aria-expanded="true"] .icon { transform:rotate(180deg); }
/* bandierina: quadrata, ritagliata, coerente tra toggle e voci */
.lt-lang-flag { width:20px; height:20px; object-fit:cover; flex:0 0 auto; }
.lt-lang-menu .list-item.active { color:var(--lt-teal-700); font-weight:700; }

.lt-nav .nav-link { font-weight:600; color:var(--lt-ink); padding:.55rem .68rem; border-radius:.5rem; white-space:nowrap; }
.lt-nav .nav-item .btn { white-space:nowrap; }

@media (max-width:1199.98px){
  .lt-nav{ flex-basis:100%; width:100%; margin-top:.75rem; padding:.5rem 0 .75rem; border-top:1px solid var(--lt-border); }
  .lt-nav .navbar-nav{ width:100%; gap:.15rem; }
  .lt-nav .nav-link{ padding:.8rem .5rem; font-size:1.05rem; }
  .lt-nav .nav-item .btn{ display:block; width:100%; margin-top:.6rem; text-align:center; justify-content:center; }
  .lt-nav .nav-link[aria-current="page"]::after{ display:none; }
  .lt-nav .nav-link[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--lt-orange); }
}
@media (min-width:1200px){
  .lt-nav .nav-link{ padding:.55rem .5rem; font-size:.92rem; }
  .lt-nav .nav-item .btn{ padding-inline:.85rem; font-size:.92rem; }
}
@media (min-width:1200px) and (max-width:1399px){
  .lt-nav .nav-link{ padding:.55rem .4rem; font-size:.88rem; }
  /* nota: qui un tempo si nascondeva .lt-tag («technologies»), ma il tag è più
     stretto del wordmark che gli sta sopra: nasconderlo non recupera larghezza
     e faceva sparire la scritta tra 1200 e 1399px (segnalazione cliente 12/07) */
}
.lt-nav .nav-link:hover { color: var(--lt-teal-700); background: var(--lt-mist); }
.lt-nav .nav-link[aria-current="page"],
.lt-nav .lt-drop-toggle[aria-current="page"] { color: var(--lt-teal-700); background: var(--lt-mist); }
.lt-nav .nav-link[aria-current="page"]::after,
.lt-nav .lt-drop-toggle[aria-current="page"]::after {
  content:""; display:block; height:3px; border-radius:3px; margin-top:.3rem; background: var(--lt-orange);
}
@media (max-width:1199.98px){
  .lt-nav .lt-drop-toggle[aria-current="page"]::after{ display:none; }
  .lt-nav .lt-drop-toggle[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--lt-orange); }
}

/* ---------------------------- Menu a tendina --------------------------- */
.lt-drop-toggle{ background:none; border:0; cursor:pointer; font:inherit; color:var(--lt-ink); font-weight:600;
  display:inline-flex; align-items:center; gap:.3rem; width:auto; padding:.55rem .5rem; border-radius:.5rem; }
.lt-drop-toggle:hover{ color:var(--lt-teal-700); background:var(--lt-mist); }
.lt-chev{ width:1em; height:1em; transition:transform .2s ease; flex:0 0 auto; }
.lt-drop-toggle[aria-expanded="true"] .lt-chev{ transform:rotate(180deg); }
.lt-dropdown{ display:none; }
.lt-drop-toggle[aria-expanded="true"] + .lt-dropdown{ display:block; }
.lt-dropdown__list{ list-style:none; margin:0; padding:.4rem; }
.lt-dropdown__list a{ display:block; padding:.6rem .8rem; border-radius:.5rem; color:var(--lt-ink); text-decoration:none; font-weight:600; font-size:.95rem; }
.lt-dropdown__list a:hover, .lt-dropdown__list a:focus-visible{ background:var(--lt-mist); color:var(--lt-teal-700); }
.lt-dd-label{ display:block; font-weight:600; line-height:1.25; }
.lt-dd-desc{ display:block; font-weight:400; font-size:.8rem; color:var(--lt-ink-soft); margin-top:.1rem; line-height:1.3; }
@media (max-width:1199.98px){ .lt-dd-desc{ display:none; } }

@media (min-width:1200px){
  .lt-has-drop{ position:relative; }
  .lt-dropdown{ position:absolute; top:calc(100% + .35rem); left:0; z-index:1090; min-width:20rem; background:#fff;
    border:1px solid var(--lt-border); border-radius:.9rem; box-shadow:0 1.25rem 2.5rem rgba(8,49,58,.16); padding:.25rem; }
  .lt-dropdown--wide{ min-width:40rem; }
  .lt-dropdown--wide .lt-dropdown__list{ columns:2; column-gap:.3rem; }
  .lt-dropdown--wide .lt-dropdown__list li{ break-inside:avoid; }
}
@media (max-width:1199.98px){
  .lt-dropdown{ margin:.1rem 0 .4rem; }
  .lt-dropdown__list{ border-left:2px solid var(--lt-mist); padding-left:.6rem; }
  .lt-dropdown__list a{ font-size:1rem; padding:.7rem .6rem; }
  .lt-drop-toggle{ width:100%; justify-content:space-between; }
}

@media (max-width:575.98px){ .row.g-5,.row.gx-5{ --bs-gutter-x:1.5rem; } }
html{ overflow-x:clip; }

/* -------------------------------- Sezioni ------------------------------ */
.section { padding-block: clamp(3rem, 6vw, 6rem); }
.section-mist { background: var(--lt-mist); }
.section-deep { background: radial-gradient(120% 140% at 80% -10%, var(--lt-teal) 0%, var(--lt-teal-900) 55%); color:#fff; }
.section-deep h1,.section-deep h2,.section-deep h3,.section-deep h4 { color:#fff; }
.section-deep .lead { color: var(--lt-aqua-soft); }
.section-deep p { color:#dbe6f1; }
.section-header { max-width: 60ch; }

/* --------------------------------- Hero -------------------------------- */
.lt-hero { position:relative; overflow:hidden;
  background:
    radial-gradient(90% 120% at 92% 8%, rgba(91,182,191,.40) 0%, rgba(91,182,191,0) 55%),
    radial-gradient(80% 120% at 0% 100%, rgba(216,96,16,.18) 0%, rgba(216,96,16,0) 50%),
    var(--lt-mist); }
.lt-hero__wave { position:absolute; inset:0; z-index:0; pointer-events:none; }
/* Onde "acqua in una giara": il profilo della superficie ondeggia (slosh lato-lato,
   quasi-casuale, fluido) ed è ridisegnato a ogni frame da lympha.js — niente scroll/CSS. */
.lt-hero__wave .wv { will-change: auto; }
.lt-hero__content { position:relative; z-index:1; }
.lt-hero__panel { position:relative; z-index:1; background: rgba(255,255,255,.6); backdrop-filter: blur(2px);
  border:1px solid rgba(255,255,255,.7); border-radius:1.5rem; }
.lt-hero h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }

/* --------------------------------- Card -------------------------------- */
.lt-card { background:#fff; border:1px solid var(--lt-border); border-radius:1.25rem; padding:1.75rem; height:100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.lt-card:hover, .lt-card:focus-within { transform: translateY(-4px); box-shadow: 0 1.25rem 2.5rem rgba(8,49,58,.12); border-color: rgba(24,96,120,.35); }
.lt-icon-badge { width:56px; height:56px; border-radius:1rem; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--lt-teal) 0%, var(--lt-aqua) 100%); color:#fff; margin-bottom:1rem; }
.lt-icon-badge .icon { width:28px; height:28px; }
.icon { width:1.25rem; height:1.25rem; vertical-align:-.2em; }
.lt-card h3 { color: var(--lt-teal-900); }
.lt-card .stretched-link::after { border-radius:1.25rem; }

/* -------------------------------- Metriche ----------------------------- */
.lt-metric { text-align:center; }
.lt-metric .num { font-size:clamp(2.2rem,4vw,3rem); font-weight:700; color:#fff; line-height:1; }
.lt-metric .num .text-orange { color: var(--lt-orange); }
.lt-metric .lbl { color:var(--lt-aqua-soft); font-weight:600; margin-top:.35rem; }

/* ------------------------------ Pillole/tag ---------------------------- */
.lt-pill { display:inline-block; padding:.3rem .8rem; border-radius:999px; background: var(--lt-mist);
  color: var(--lt-teal-700); font-weight:600; font-size:.85rem; border:1px solid rgba(24,96,120,.2); }
.section-deep .lt-pill { background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.3); }

/* -------------------------------- Timeline ----------------------------- */
.lt-timeline { list-style:none; margin:0; padding:0; position:relative; }
.lt-timeline::before { content:""; position:absolute; left:13px; top:6px; bottom:6px; width:2px; background: linear-gradient(var(--lt-teal), var(--lt-aqua)); }
.lt-timeline li { position:relative; padding:0 0 1.75rem 2.5rem; }
.lt-timeline li::before { content:""; position:absolute; left:6px; top:4px; width:16px; height:16px; border-radius:50%;
  background:var(--lt-teal); border:3px solid #fff; box-shadow:0 0 0 2px var(--lt-teal); }
.lt-timeline .yr { font-weight:700; color: var(--lt-teal-700); }

/* ------------------------- Liste con spunta (check) -------------------- */
.lt-check { list-style:none; padding-left:0; margin:0; display:grid; gap:.6rem; }
.lt-check li { position:relative; padding-left:1.9rem; }
.lt-check li::before { content:""; position:absolute; left:0; top:.15rem; width:1.25rem; height:1.25rem; border-radius:50%;
  background:var(--lt-mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f4a5b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/0.8rem no-repeat; }
.section-deep .lt-check li::before { background-color: rgba(255,255,255,.16); }

/* ---------------------------------- Form ------------------------------- */
.lt-form-card { background:#fff; border:1px solid var(--lt-border); border-radius:1.25rem; padding:clamp(1.5rem,3vw,2.5rem); }
.form-control, .form-select { min-height:44px; }
.required-mark { color: var(--lt-orange-700); font-weight:700; }
.invalid-feedback { font-weight:600; }

/* --------------------------------- Footer ------------------------------ */
.lt-footer { background: var(--lt-teal-900); color:#cdd8e4; }
.lt-footer a { color:#fff; text-decoration:none; }
.lt-footer a:hover { text-decoration:underline; }
.lt-footer h2 { color:#fff; font-size:1.05rem; letter-spacing:.04em; text-transform:uppercase; }
.lt-footer__bar { background: var(--lt-teal-700); }
/* Placca bianca per i loghi di certificazione (leggibili su footer scuro) */
.lt-cert-plate { display:inline-block; background:#fff; padding:.45rem .65rem; border-radius:.5rem; }
.lt-cert-plate img { display:block; width:150px; max-width:100%; height:auto; }
.lt-green-plate { display:inline-block; }
.lt-green-plate img { display:block; width:171px; max-width:100%; height:auto; } /* larghezza allineata al badge ESG */
.lt-footer .lt-cert-cap { font-size:.76rem; color:#aebfd0; line-height:1.45; }
.lt-footer .lt-cert-cap strong { color:#fff; }
.lt-footer__brand .lt-name { color:#fff; font-weight:700; font-size:1.25rem; }
.lt-footer__brand .lt-name span { color: var(--lt-aqua); }

/* ------------------------------ Definizioni ---------------------------- */
.lt-dl { display:grid; gap:.75rem; }
.lt-dl div { display:flex; gap:.75rem; align-items:baseline; }
.lt-dl dt { font-weight:700; color:var(--lt-teal-900); min-width:7rem; }
.lt-dl dd { margin:0; color:var(--lt-ink-soft); }

/* --------------------------- Riduzione movimento ----------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes ltReveal { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform:none; } }
  .lt-reveal { animation: ltReveal .6s ease both; }
}

/* --------------------------------- Utility ----------------------------- */
.lt-decor { position:absolute; z-index:0; pointer-events:none; }
.bg-soft { background: var(--lt-mist); }
.shadow-soft { box-shadow: 0 1rem 2.5rem rgba(8,49,58,.10); }
.rounded-xl { border-radius:1.5rem; }
.min-w-0 { min-width:0; }
hr.lt-sep { border:0; height:2px; background:linear-gradient(90deg,var(--lt-teal),transparent); opacity:.5; }
.text-orange { color: var(--lt-orange); }

/* ---------------------------------- Blog -------------------------------- */
/* Barra di progresso lettura (pagine articolo): fissa in cima al viewport,
   sopra l'header sticky. Riflette la posizione di scroll, non è un'animazione. */
.lt-progress { position:fixed; top:0; left:0; right:0; height:4px; z-index:2000; pointer-events:none; }
.lt-progress__bar { height:100%; width:0; background:linear-gradient(90deg, var(--lt-teal), var(--lt-orange)); }

/* Riga metadati (data · tempo di lettura · autore) */
.lt-post-meta { display:flex; flex-wrap:wrap; gap:.3rem .6rem; align-items:baseline;
  color:var(--lt-ink-soft); font-weight:600; font-size:.9rem; }

/* Tipografia da lettura del corpo articolo */
.lt-article p, .lt-article li { line-height:1.75; }
.lt-article figure { margin:2rem 0; }
.lt-article figcaption { font-size:.85rem; color:var(--lt-ink-soft); margin-top:.5rem; }
.lt-article pre { background:var(--lt-teal-900); color:#dbe6f1; padding:1rem 1.25rem;
  border-radius:.75rem; overflow-x:auto; font-size:.9rem; line-height:1.6; }
.lt-article code { background:var(--lt-mist); color:var(--lt-teal-900); padding:.1em .35em;
  border-radius:.35rem; font-size:.92em; }
.lt-article pre code { background:none; color:inherit; padding:0; font-size:inherit; }
.lt-blockquote, .lt-article blockquote { border-left:4px solid var(--lt-orange); background:var(--lt-mist);
  padding:1rem 1.25rem; border-radius:.5rem; margin:1.75rem 0; color:var(--lt-ink); font-weight:600; }

/* Indice dell'articolo (TOC) con evidenziazione della sezione corrente */
.lt-toc a { display:block; color:var(--lt-teal-700); text-decoration:none; font-weight:600;
  font-size:.95rem; padding-left:.65rem; border-left:3px solid transparent; }
.lt-toc a:hover { text-decoration:underline; }
.lt-toc a[aria-current="true"] { color:var(--lt-ink); border-left-color:var(--lt-orange); }

/* Filtri per categoria dell'indice blog (pulsanti con stato aria-pressed).
   Qui si dichiarano solo i token: colori e inversione allo hover arrivano dalle
   regole di stato del blocco «Pulsanti / target». Il filtro premuto è pieno,
   quindi allo hover si svuota — l'inverso di quello spento, che si riempie. */
.btn.lt-filter {
  --bs-btn-color: var(--lt-teal-900);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--lt-teal-900);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lt-teal-900);
  border-radius: 999px;
}
.btn.lt-filter[aria-pressed="true"] {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lt-teal-900);
  --bs-btn-hover-color: var(--lt-teal-900);
  --bs-btn-hover-bg: #fff;
}

/* I tag-pillola come link mantengono il comportamento dei .lt-pill */
a.lt-pill:hover, a.lt-pill:focus-visible { background:var(--lt-teal); color:#fff; border-color:var(--lt-teal); }

/* ---------------------- Domande frequenti (CoreFaqs) -------------------- */
/* Le domande sono `<details>` vestiti con le classi dell'accordion di Bootstrap
   Italia (vedi il docblock di `element/core_faqs/questions.php`): l'aspetto lo
   dà il tema, l'apertura la fa il browser.

   Qui si rimappa lo STATO. Bootstrap Italia lo legge da `.collapsed` e da
   `aria-expanded`, che su un `<summary>` non esistono: senza queste regole la
   voce chiusa userebbe comunque lo stile dell'aperta — `:not(.collapsed)`
   matcha sempre — e la freccia resterebbe girata al contrario. I selettori sono
   volutamente lunghi perché devono vincere per specificità su
   `.accordion-header .accordion-button:not(.collapsed)` del tema. */

/* Il triangolino nativo se ne va: l'indicatore è la freccia disegnata più sotto */
details.lt-faq > summary { list-style:none; cursor:pointer; }
details.lt-faq > summary::-webkit-details-marker { display:none; }

/* Il titolo riempie la testata ed eredita la tipografia del pulsante: flex,
   padding e freccia arrivano da `.accordion-button`. */
.lt-faq__q { margin:0; font-size:inherit; font-weight:inherit; color:inherit; letter-spacing:normal; }

/* Voce chiusa. `border-top:0` toglie il separatore del tema: qui lo rimette,
   più sotto, la regola che lo dà solo fra voci visibili. */
details.lt-faq > summary.accordion-header > .accordion-button {
  color: var(--lt-teal-700); background-color:#fff; box-shadow:none; border-top:0;
}
details.lt-faq:not([open]) > summary:hover > .accordion-button { background-color: var(--lt-mist); }

/* La freccia sta a SINISTRA della domanda: è il primo dei due scostamenti voluti
   dal componente di Bootstrap Italia, che la mette a destra (il secondo è il
   riquadro, più sotto). L'elenco delle FAQ si legge come un indice, e il `>`
   davanti al testo dice «questa riga si apre» prima ancora di arrivare in fondo
   alla domanda.

   Meccanica: `::after` — dove BI disegna la sua — si spegne, e l'icona nasce su
   `::before`, che nel flex di `.accordion-button` è il PRIMO elemento, quindi
   prima del testo. La forma è quella del tema, una freccia che punta in su:
   `rotate(90deg)` la fa diventare `>`, `rotate(180deg)` la fa cadere in giù
   quando la voce si apre. Il fill è codificato `%23` perché dentro un data URI
   il `#` letterale verrebbe letto come inizio del frammento. */
details.lt-faq > summary.accordion-header > .accordion-button::after { content:none; display:none; }
details.lt-faq > summary.accordion-header > .accordion-button::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230f4a5b' d='M12,10.3l4.8,4.8c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1l-4.8-4.8c-0.6-0.6-1.5-0.6-2.1,0L6.2,14c-0.3,0.3-0.3,0.8,0,1c0.3,0.3,0.8,0.3,1.1,0L12,10.3z'/%3E%3C/svg%3E");
  flex: 0 0 auto; width:1.5rem; height:auto; line-height:0; margin:0 .5rem 0 0;
  transform: rotate(90deg); transition: transform .3s;
}

/* Voce aperta: la freccia cade in giù e, con `accordion-background-active`, la
   testata si riempie di teal — la stessa resa dell'accordion di
   `element/items/accordions`. Sul fondo pieno la freccia si ridisegna bianca:
   il colore di un `content: url()` non si eredita. */
details.lt-faq[open] > summary.accordion-header > .accordion-button::before { transform: rotate(180deg); }
.accordion-background-active details.lt-faq[open] > summary.accordion-header > .accordion-button {
  background-color: var(--lt-teal); border-color: var(--lt-teal); color:#fff;
}
.accordion-background-active details.lt-faq[open] > summary.accordion-header > .accordion-button::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12,10.3l4.8,4.8c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1l-4.8-4.8c-0.6-0.6-1.5-0.6-2.1,0L6.2,14c-0.3,0.3-0.3,0.8,0,1c0.3,0.3,0.8,0.3,1.1,0L12,10.3z'/%3E%3C/svg%3E");
}

/* Il gruppo è delineato: un riquadro intorno alle domande dell'area, con le
   voci separate da una riga. Il bordo sta sul CONTENITORE e non sulle voci —
   ricerca e filtri nascondono le domande con `hidden`, e con il bordo sulle
   voci il riquadro resterebbe aperto o mostrerebbe angoli arrotondati su una
   voce invisibile. `overflow:hidden` fa tagliare dagli angoli anche la testata
   piena della prima e dell'ultima voce. */
.lt-faq-list {
  border:1px solid var(--lt-border); border-radius:.75rem; overflow:hidden; background:#fff;
}
/* Il separatore va solo FRA voci visibili: `~` chiede una sorella visibile che
   precede, quindi la prima dell'elenco non ce l'ha — e resta vero anche quando
   la ricerca nasconde proprio le prime. */
details.lt-faq:not([hidden]) ~ details.lt-faq:not([hidden]) > summary.accordion-header > .accordion-button {
  border-top:1px solid var(--lt-border);
}

/* Corpo della risposta: il padding è quello di `.accordion-body`, qui si
   sistema solo la lettura e il margine dell'ultimo blocco. */
.lt-faq__a { line-height:1.7; }
.lt-faq__a > :last-child { margin-bottom:0; }
.lt-faq__a ul, .lt-faq__a ol { padding-left:1.25rem; }

/* Permalink della singola risposta: si legge come «pagina#ancora», quindi in
   carattere a spaziatura fissa e in secondo piano. */
.lt-faq__meta { margin-top:.85rem; font-size:.8rem; }
.lt-faq__meta a {
  font-family: var(--bs-font-monospace); color: var(--lt-ink-soft); text-decoration:none;
  word-break: break-all;
}
.lt-faq__meta a:hover { color: var(--lt-teal-700); text-decoration:underline; }

/* Apertura morbida come quella del collapse, dove il browser la sa fare. Fuori
   da `@supports` non cambia nulla: il `<details>` si apre di scatto. */
@media (prefers-reduced-motion: no-preference) {
  @supports selector(::details-content) {
    details.lt-faq { interpolate-size: allow-keywords; }
    details.lt-faq::details-content {
      height:0; overflow:hidden;
      transition: height .3s ease, content-visibility .3s allow-discrete;
    }
    details.lt-faq[open]::details-content { height:auto; }
  }
}

/* Riquadro della ricerca in cima all'elenco */
.lt-faq-tools {
  background: var(--lt-mist); border:1px solid var(--lt-border);
  border-radius:1rem; padding:clamp(1rem,2vw,1.5rem);
}

/* Contatori: pillola nell'indice, etichetta discreta accanto al titolo d'area
   (lì il JS ci scrive una frase — «12 di 33 domande» — non un numero). */
.lt-faq-n {
  display:inline-flex; align-items:center; justify-content:center; min-width:1.75rem;
  padding:.1rem .5rem; border-radius:999px; background:#fff; border:1px solid var(--lt-border);
  color: var(--lt-teal-700); font-size:.78rem; font-weight:700; line-height:1.45;
}
.lt-faq-n--h {
  background:none; border:0; padding:0; min-width:0; margin-left:.5rem;
  color: var(--lt-ink-soft); font-size:.85rem; font-weight:600; white-space:nowrap;
  letter-spacing:normal;
}
.lt-toc li[data-faq-toc] > a {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding-block:.15rem;
}

/* «Vedi anche» dell'area */
.lt-faq-group__see { font-size:.9rem; color: var(--lt-ink-soft); }
.lt-faq-group__see a { color: var(--lt-teal-700); font-weight:600; }

/* «Per assistenti IA»: le edizioni per macchina, sotto l'indice delle aree.
   Stesso blocco contornato della ricerca (.lt-faq-tools) — sfondo mist, bordo,
   angoli tondi — cosi' le due schermate si leggono come una cosa sola. Il
   padding e' fisso e piu' contenuto: qui la colonna e' stretta, non c'e' il
   clamp della colonna larga. */
.lt-faq-machine {
  background: var(--lt-mist); border:1px solid var(--lt-border);
  border-radius:1rem; padding:1rem;
  font-size:.86rem; color: var(--lt-ink-soft); line-height:1.5;
}
.lt-faq-machine a { color: var(--lt-teal-700); font-weight:700; text-decoration:none; }
.lt-faq-machine a:hover { text-decoration:underline; }

/* Indice blog — spazio sopra e sotto, sempre lo stesso.

   L'oggetto finisce in due contesti diversi: dentro il template delle pagine
   categoria, dove sta in una `.section` che il suo padding ce l'ha gia', e
   dentro una pagina composta nell'editor, dove attorno c'e' al massimo un
   `.container` — che in Bootstrap ha solo padding ORIZZONTALE, quindi l'indice
   si appiccicava all'hero.

   La cura: il margine se lo porta l'oggetto, con lo stesso valore di `.section`,
   e si azzera quando e' gia' dentro una `.section` — altrimenti nelle categorie
   lo spazio raddoppierebbe. Cosi' l'indice respira uguale ovunque lo si metta,
   senza che chi compone la pagina debba saperlo. */
.acme-blog-index { margin-block: clamp(3rem, 6vw, 6rem); }
.section .acme-blog-index { margin-block: 0; }

/* Indice blog — switch griglia/righe.
   Il PHP disegna sempre le stesse card, con le classi di colonna scelte nel
   modale: la vista a righe non ridisegna niente, distende le card su tutta la
   larghezza e mette l'immagine di fianco al testo. Cosi' passare da una vista
   all'altra non perde ne' il filtro, ne' la ricerca, ne' la pagina corrente. */
.lt-layout-switch .btn { padding-inline:.6rem; }
.lt-layout-switch .icon { width:1.05rem; height:1.05rem; display:block; }

/* La colonna diventa piena larghezza: !important perche' deve battere le
   utility col-* di Bootstrap, che qui arrivano dal modale. */
[data-bi-layout="rows"] [data-bi-card] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* La card si dispone in orizzontale. L'immagine, quando c'e', tiene una
   colonna fissa a sinistra e non si deforma. */
[data-bi-layout="rows"] [data-bi-card] .lt-card {
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
}
[data-bi-layout="rows"] [data-bi-card] .lt-card > img {
  width: 15rem; max-width: 34%; height: 100%; max-height: 10rem;
  object-fit: cover; flex-shrink: 0; margin-bottom: 0 !important;
}

/* Il testo occupa il resto della riga; i meta tornano in fondo al blocco di
   testo invece che in fondo alla card. */
[data-bi-layout="rows"] [data-bi-card] .lt-card > :not(img) { flex-basis: auto; }
[data-bi-layout="rows"] [data-bi-card] .lt-card .lt-post-meta { margin-top: .75rem !important; padding-top: 0 !important; }
[data-bi-layout="rows"] [data-bi-card] .lt-card h3 { font-size: 1.2rem !important; }

/* Sotto i 576px la riga tornerebbe illeggibile: si riprende l'impilamento. */
@media (max-width: 575.98px) {
  [data-bi-layout="rows"] [data-bi-card] .lt-card { flex-direction: column; gap: 0; }
  [data-bi-layout="rows"] [data-bi-card] .lt-card > img { width:100%; max-width:100%; max-height:12rem; margin-bottom:1rem !important; }
}