/* =========================================================================
   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; }
.btn-primary {
  --bs-btn-bg: var(--lt-teal); --bs-btn-border-color: var(--lt-teal);
  --bs-btn-hover-bg: var(--lt-teal-700); --bs-btn-hover-border-color: var(--lt-teal-700);
  --bs-btn-active-bg: var(--lt-teal-900); --bs-btn-active-border-color: var(--lt-teal-900);
  box-shadow: 0 .5rem 1.25rem rgba(24,96,120,.28);
}
.btn-accent {
  --bs-btn-color: #fff; --bs-btn-bg: var(--lt-orange-700); --bs-btn-border-color: var(--lt-orange-700);
  --bs-btn-hover-bg: #8f3f23; --bs-btn-hover-border-color: #8f3f23; --bs-btn-hover-color:#fff;
  color:#fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--lt-teal-700); --bs-btn-border-color: var(--lt-teal);
  --bs-btn-hover-bg: var(--lt-teal); --bs-btn-hover-border-color: var(--lt-teal); --bs-btn-hover-color: #fff;
}
.btn-light-on-dark { background:#fff; color: var(--lt-teal-900); border:2px solid #fff; font-weight:700; }
.btn-light-on-dark:hover { background: var(--lt-mist); color: var(--lt-teal-900); }

/* -------------------------------- 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 { max-width:72ch; }
.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) */
.lt-filter { --bs-btn-color:var(--lt-teal-700); --bs-btn-border-color:var(--lt-teal);
  --bs-btn-hover-bg:var(--lt-mist); --bs-btn-hover-color:var(--lt-teal-700); border-radius:999px; }
.lt-filter[aria-pressed="true"] { background:var(--lt-teal); border-color:var(--lt-teal); color:#fff; }
.lt-filter[aria-pressed="true"]:hover { background:var(--lt-teal-700); color:#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); }