/* Manuale HyWork - tema. Valori da interno/tema-manuale.md (Design System HyWork). */

:root {
  --surface-page:#F8FAFB; --white:#FFFFFF;
  --slate-600:#2F5261; --slate-700:#2B4A57; --slate-800:#223A45;
  --neutral-500:#7A868D; --neutral-700:#3D464B; --neutral-100:#F1F4F5; --neutral-600:#5B666C;
  --ink:#111416;
  --turq-50:#ECFBFB; --turq-100:#D2F5F6; --turq-200:#A6EBEC;
  --turq-700:#14898C; --turq-800:#176C6F;
  --amber-50:#FDF4E6; --amber-500:#E8A33D; --amber-600:#B4761F;
  --green-50:#E8F6EE; --green-600:#1E7A4D;
  --border-subtle:#E2E8EA; --border-default:#CDD6DA;
  --radius-md:14px; --radius-lg:20px; --radius-xl:28px;
  --shadow-xs:0 1px 2px rgba(34,58,69,.06);
  --shadow-sm:0 2px 8px rgba(34,58,69,.07);
  --shadow-md:0 8px 24px -12px rgba(34,58,69,.28);

  --md-primary-fg-color:#14898C;
  --md-primary-fg-color--dark:#176C6F;
  --md-accent-fg-color:#176C6F;
  --md-default-bg-color:var(--surface-page);
  --md-typeset-color:var(--neutral-700);
  --md-typeset-a-color:var(--turq-700);
  --md-text-font:"Plus Jakarta Sans";
  --md-code-font:"JetBrains Mono";

  /* token usati dai componenti "Schede rapide" (tema-manuale.md).
     --text-muted e --ls-caps ripetono valori gia' presenti in tabella;
     --turq-500 e' il turchese del marchio (confermato da Design il 26/08);
     sopra ci va sempre testo --ink, mai bianco. */
  --text-muted:var(--neutral-500);
  --ls-caps:.08em;
  --radius-pill:999px;
  --turq-500:#1EC8CC;   /* turchese del marchio, dal Design System */
}

/* ---- barra superiore: 64px, bianca, hairline ---- */
.md-header{height:64px;background:var(--white);color:var(--slate-700);
  box-shadow:none;border-bottom:1px solid var(--border-subtle)}
.md-header__title{font-weight:700;letter-spacing:-.01em}
.md-tabs{display:none}

/* ---- larghezze e colonne ---- */
.md-grid{max-width:1400px}
.md-sidebar--primary{width:260px}
.md-sidebar--secondary{width:220px}
.md-content{max-width:840px}
.md-main__inner{margin-top:24px;gap:40px}

/* ---- tipografia ---- */
.md-typeset{font-size:17px;line-height:1.7}
.md-typeset h1{font-size:40px;font-weight:800;line-height:1.15;letter-spacing:-.02em;
  color:var(--slate-700);margin:0 0 18px}
.md-typeset h2{font-size:28px;font-weight:700;line-height:1.25;letter-spacing:-.01em;
  color:var(--slate-700);margin:48px 0 14px;scroll-margin-top:88px}
.md-typeset h3{font-size:20px;font-weight:700;line-height:1.35;
  color:var(--slate-800);margin:28px 0 10px;scroll-margin-top:88px}
.md-typeset p,.md-typeset ul,.md-typeset ol{max-width:68ch}
.md-typeset p{margin-bottom:16px}
.md-typeset strong{color:var(--ink);font-weight:700}
.md-typeset code{font-size:.88em;background:var(--neutral-100);color:var(--slate-800);
  border-radius:6px;padding:2px 6px}

/* ---- riquadri di richiamo: 💡 suggerimento, ⚠️ attenzione, 📝 esempio ---- */
.md-typeset blockquote{max-width:68ch;border:none;color:var(--neutral-700);
  font-size:16px;line-height:1.65;padding:18px 20px;border-radius:var(--radius-lg);
  margin:0 0 24px;background:var(--white);
  border:1px solid var(--border-default);box-shadow:var(--shadow-xs)}
.md-typeset blockquote p{margin:0}
.md-typeset blockquote p + p{margin-top:8px}
.md-typeset blockquote.callout-tip{background:var(--turq-50);
  border:1px solid var(--turq-200);box-shadow:none}
.md-typeset blockquote.callout-warn{background:var(--amber-50);
  border:1px solid #F0D9A8;border-left:4px solid var(--amber-500);box-shadow:none}

/* ---- tabelle: scorrimento orizzontale, prima colonna fissa ---- */
.md-typeset__table{width:100%}
.md-typeset table:not([class]){font-size:14px;line-height:1.5;background:var(--white);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  box-shadow:none;display:table;width:100%}
.md-typeset table:not([class]) th{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--neutral-500);background:var(--white);
  border-bottom:1px solid var(--border-subtle);white-space:nowrap}
.md-typeset table:not([class]) td{border-top:1px solid var(--border-subtle);
  vertical-align:top}

/* ---- figure: cornice bianca che fa respirare lo screenshot ---- */
.md-typeset img{border-radius:var(--radius-md);display:block}
.md-typeset p > img{background:var(--white);padding:20px;border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);max-width:100%;margin:8px 0 24px}

/* ---- menu laterale e indice ---- */
.md-nav{font-size:14px}
.md-nav__title{font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--neutral-500)}
.md-nav__link--active{color:var(--turq-800);font-weight:600}
.md-sidebar--secondary .md-nav__title{color:var(--neutral-500)}

/* ---- prev / next ---- */
.md-footer__inner{margin-top:64px}
.md-footer{background:var(--white);color:var(--slate-700);
  border-top:1px solid var(--border-subtle)}
.md-footer-meta{background:var(--white);color:var(--neutral-500)}
.md-footer__link{padding-top:28px;padding-bottom:28px}
.md-footer__title{font-weight:600}
.md-footer-meta__inner{font-size:17px;font-weight:600;color:var(--slate-700)}

/* ---- breakpoint: 1180 indice, 900 menu (da tema-manuale.md §5) ---- */
@media screen and (max-width:1180px){
  .md-sidebar--secondary{display:none}
}
@media screen and (max-width:900px){
  .md-typeset h1{font-size:30px}
  .md-typeset h2{font-size:23px;margin-top:36px}
  .md-typeset{font-size:16px}
  .md-typeset p > img{padding:10px;border-radius:var(--radius-lg)}
  .md-typeset__table{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ---- HOME ---- */
.md-typeset .home{max-width:1100px}
body[data-md-color-primary] .md-content{max-width:840px}
.md-typeset .home h1{display:none}

.md-typeset .eyebrow{font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--turq-700);margin:0 0 16px;max-width:none}

.md-typeset .home-search{margin:8px 0 40px}
.home-search__field{width:100%;text-align:left;font-family:var(--md-text-font);
  font-size:20px;font-weight:500;color:var(--neutral-500);background:var(--white);
  border:1px solid var(--border-default);border-radius:var(--radius-lg);
  padding:24px 28px 24px 64px;cursor:text;transition:box-shadow .16s ease-out;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="%2314898C" stroke-width="2" stroke-linecap="round"><circle cx="10" cy="10" r="7"/><path d="M15.5 15.5l6 6"/></svg>');
  background-repeat:no-repeat;background-position:26px center}
.home-search__field:hover{box-shadow:var(--shadow-sm)}
.md-typeset .home-search__hint{font-size:15px;color:var(--neutral-500);
  margin:14px 0 0 4px;max-width:none}

.md-typeset .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;margin:0 0 48px}
@media screen and (max-width:1100px){.md-typeset .cat-grid{grid-template-columns:repeat(2,1fr)}}
@media screen and (max-width:700px){.md-typeset .cat-grid{grid-template-columns:1fr}}
.md-typeset a.cat{display:block;background:var(--white);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:24px;text-decoration:none;color:var(--slate-700);
  box-shadow:var(--shadow-xs);transition:box-shadow .16s ease-out,transform .16s ease-out}
.md-typeset a.cat:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.md-typeset .cat__icon{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-md);background:var(--turq-100);
  color:var(--turq-800);margin-bottom:18px}
.md-typeset .cat__icon svg{width:22px;height:22px}
.md-typeset a.cat strong{display:block;font-size:18px;font-weight:700;line-height:1.3;
  letter-spacing:-.01em;color:var(--slate-700);margin-bottom:6px}
.md-typeset .cat__desc{display:block;font-size:15px;font-weight:400;line-height:1.5;
  color:var(--neutral-500)}

.md-typeset .faq-list{background:var(--white);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);margin-bottom:36px}
.md-typeset .faq-list ul{list-style:none;margin:0;padding:0;max-width:none}
.md-typeset .faq-list li{margin:0;border-top:1px solid var(--border-subtle)}
.md-typeset .faq-list li:first-child{border-top:none}
.md-typeset .faq-list a{display:block;padding:18px 22px;font-size:16px;font-weight:500;
  color:var(--slate-700);text-decoration:none}
.md-typeset .faq-list a:hover{background:var(--turq-50);color:var(--turq-800)}
.md-typeset .home-all a{font-size:15px;font-weight:600;color:var(--turq-700)}

/* barra: nome corto + ritorno al prodotto */
.md-header__button.md-logo{padding:0 8px}
.md-header__topic:first-child{font-weight:700;letter-spacing:-.01em}
.hw-back{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:15px;
  font-weight:600;color:var(--turq-700);text-decoration:none;padding:0 8px}
.hw-back:hover{color:var(--turq-800)}
@media screen and (max-width:600px){.hw-back span{display:none}}

/* ---- Schede rapide: 3 componenti ---------------------------------------
   Valori da interno/tema-manuale.md, sezione "Schede rapide (3 componenti)".
   Un solo oggetto in tre densita': stessa icona file-text in tile turchese,
   stesso occhiello, titolo = la domanda del cliente. Sono link, non callout:
   nessuno dei tre riusa il pattern di 💡⚠️📝.                              */

/* 1. blocco in cima alla pagina della guida */
.md-typeset a.scheda-link{display:flex;align-items:center;gap:16px;max-width:68ch;
  background:var(--white);border:1px solid var(--turq-200);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);
  padding:18px 20px;margin:0 0 32px;text-decoration:none;
  transition:border-color .16s ease-out,box-shadow .16s ease-out}
/* nessun sollevamento: e' dentro il testo, non una card in griglia */
.md-typeset a.scheda-link:hover{border-color:var(--turq-500);box-shadow:var(--shadow-md)}
.scheda-link__icona{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-md);
  background:var(--turq-100);color:var(--turq-800)}
.scheda-link__icona svg{width:22px;height:22px}
.scheda-link__testo{flex:1 1 auto;min-width:0}
.scheda-link__occhiello{display:block;font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--turq-700);
  margin-bottom:3px}
.scheda-link__titolo{display:block;font-size:17px;font-weight:600;line-height:1.35;
  color:var(--slate-700)}
.scheda-link__nota{display:block;margin-top:3px;font-size:14px;line-height:1.5;
  color:var(--text-muted)}
/* unico turchese pieno nella colonna di lettura: testo scuro come nel marchio */
.scheda-link__azione{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  background:var(--turq-500);color:var(--ink);border-radius:var(--radius-pill);
  padding:8px 14px;font-size:14px;font-weight:600;white-space:nowrap}
.scheda-link__azione svg{width:16px;height:16px}

/* 2. voce in testa all'indice di destra (colonna 220px) */
.md-sidebar--secondary a.toc-scheda{display:block;background:var(--turq-50);
  border:1px solid var(--turq-200);border-radius:var(--radius-md);
  padding:12px 14px;margin:0 0 22px;text-decoration:none;
  transition:background .16s ease-out,border-color .16s ease-out}
.md-sidebar--secondary a.toc-scheda:hover{background:var(--turq-100);
  border-color:var(--turq-500)}
.toc-scheda__occhiello{display:flex;align-items:center;gap:5px;font-size:11px;
  font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-caps);
  color:var(--turq-800)}
.toc-scheda__occhiello svg{width:13px;height:13px;flex:0 0 auto}
.toc-scheda__titolo{display:block;margin-top:5px;font-size:13px;font-weight:600;
  line-height:1.4;color:var(--slate-700)}
.toc-scheda__pdf{display:flex;align-items:center;gap:4px;margin-top:6px;
  font-size:12px;color:var(--turq-700)}
.toc-scheda__pdf svg{width:12px;height:12px;flex:0 0 auto}

/* 3. griglia sulla home */
.md-typeset .schede-sottotitolo{font-size:15px;line-height:1.5;
  color:var(--text-muted);margin:0 0 16px;max-width:68ch}
/* auto-fill e non auto-fit: con due schede le card restano della loro misura
   invece di allargarsi a mezza pagina; a sei riempiono tre colonne da sole */
.md-typeset .schede-griglia{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:0 0 48px}
.md-typeset a.scheda-card{display:flex;align-items:flex-start;gap:14px;
  background:var(--white);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);padding:20px;
  text-decoration:none;transition:box-shadow .16s ease-out,transform .16s ease-out}
/* stesso hover delle card categoria: sono fratelli nella stessa pagina */
.md-typeset a.scheda-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.scheda-card__icona{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--radius-md);
  background:var(--turq-100);color:var(--turq-800)}
.scheda-card__icona svg{width:19px;height:19px}
.scheda-card__titolo{display:block;font-size:16px;font-weight:600;line-height:1.4;
  color:var(--slate-700);text-wrap:pretty}
.scheda-card__meta{display:flex;align-items:center;gap:5px;margin-top:8px;
  font-size:13px;color:var(--text-muted)}
.scheda-card__meta svg{width:13px;height:13px;flex:0 0 auto}

@media print{.scheda-link,.toc-scheda{display:none}}

/* barra: il titolo resta "Manuale" anche scorrendo, come nella tavola di Design */
.md-header__topic:not(:first-child){display:none}

/* ---- Titoli di sezione della home ---------------------------------------
   Un solo trattamento per tutte e tre le sezioni (Design, 26/08): h2 da 25px.
   L'occhiello UPPERCASE resta solo dentro i componenti - menu, indice,
   blocco scheda rapida - dove non c'e' un titolo.                          */
.md-typeset .home h2.sezione{font-size:25px;font-weight:700;line-height:1.25;
  letter-spacing:-.01em;color:var(--slate-700);margin:0 0 4px;
  scroll-margin-top:88px}
.md-typeset .cat-grid{margin:12px 0 48px}
.md-typeset .faq-list{margin:12px 0 36px}