/* ------------------------------------------------------------------
   article-guida.css
   Stile per le guide di supporto prodotte con la skill "guida-monami3000".
   Si applica SOLO al contenuto avvolto in <div class="guida-monami"> dentro
   la view articolo (#fullArticle). Non tocca gli altri articoli.
   Riproduce sul sito la grafica della guida HTML autonoma (box "In sintesi",
   indice, capitoli arancioni, tabelle di riferimento, note/avvisi, passi
   numerati, schema SVG, FAQ).
   ------------------------------------------------------------------ */

#fullArticle .guida-monami{
  --g-arancio:#e2680f;
  --g-arancio-scuro:#c25a0c;
  --g-testo:#4a4a4a;
  --g-testo-forte:#2f2f2f;
  --g-tenue:#8a8a8a;--g-sottotitolo:#6a6a6a;
  --g-bordo:#e3e3e3;
  --g-nota-bg:#fdf8e3;
  --g-nota-bordo:#f0e0a8;
  --g-attenzione-bg:#fdf0e6;
  --g-attenzione-bordo:#f3cdae;
  color:var(--g-testo);
  font-size:15px;
  line-height:1.68;
  text-align:left;
}
#fullArticle .guida-monami *{box-sizing:border-box}
/* forza l'allineamento a sinistra anche se il template del sito centra il primo testo */
#fullArticle .guida-monami .sottotitolo,
#fullArticle .guida-monami h1,
#fullArticle .guida-monami h2,
#fullArticle .guida-monami h3,
#fullArticle .guida-monami p{text-align:left}
#fullArticle .guida-monami p{margin:0 0 14px}
#fullArticle .guida-monami ul,
#fullArticle .guida-monami ol{margin:0 0 16px;padding-left:22px}
#fullArticle .guida-monami li{margin-bottom:7px}
#fullArticle .guida-monami a{color:var(--g-arancio);text-decoration:none;font-weight:600}
#fullArticle .guida-monami a:hover{text-decoration:underline}
/* i link del sito usano #fullArticle #article-content a (2 ID): serve pari specificita per riportarli all'arancio della guida, senza sottolineatura */
#fullArticle #article-content .guida-monami a{color:var(--g-arancio);text-decoration:none}
#fullArticle #article-content .guida-monami a:hover{text-decoration:underline}
#fullArticle #article-content .guida-monami nav.indice a{font-weight:500}
#fullArticle .guida-monami strong,
#fullArticle .guida-monami b{color:var(--g-testo-forte);font-weight:600}
#fullArticle .guida-monami em{font-style:italic}

#fullArticle .guida-monami .sottotitolo{color:var(--g-sottotitolo);font-size:15px;margin:0 0 26px}

/* titoli di capitolo e paragrafo (sovrascrivono #fullArticle h2/h3) */
#fullArticle .guida-monami h2{
  color:var(--g-arancio);font-size:20px;font-weight:600;
  margin:38px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--g-bordo);
}
#fullArticle .guida-monami h3{
  color:var(--g-testo-forte);font-size:16px;font-weight:600;margin:26px 0 8px;
}

/* percorso menu e tasti */
#fullArticle .guida-monami .percorso{
  display:inline-block;background:#fbf3ec;border:1px solid #f0dccb;border-radius:3px;
  padding:2px 9px;font-size:14px;color:var(--g-arancio-scuro);font-weight:600;white-space:nowrap;
}
#fullArticle .guida-monami kbd{
  display:inline-block;background:#f7f7f7;border:1px solid #d5d5d5;border-bottom-width:2px;border-radius:3px;
  padding:1px 6px;font:600 12px/1.6 "SF Mono",Consolas,Menlo,monospace;color:#444;
}

/* box "In sintesi" */
#fullArticle .guida-monami .sintesi{
  background:#fafafa;border:1px solid var(--g-bordo);border-left:4px solid var(--g-arancio);
  padding:18px 22px;margin:0 0 26px;
}
#fullArticle .guida-monami .sintesi h3{margin:0 0 10px;font-size:16px;color:var(--g-arancio)}
#fullArticle .guida-monami .sintesi dl{margin:0;display:grid;grid-template-columns:170px 1fr;gap:6px 16px}
#fullArticle .guida-monami .sintesi dt{color:var(--g-testo-forte);font-weight:600}
#fullArticle .guida-monami .sintesi dd{margin:0}

/* indice */
#fullArticle .guida-monami nav.indice{
  background:#fafafa;border:1px solid var(--g-bordo);padding:16px 22px;margin:0 0 30px;
}
#fullArticle .guida-monami nav.indice p{font-weight:600;color:var(--g-testo-forte);margin:0 0 8px}
#fullArticle .guida-monami nav.indice ol{margin:0;padding-left:20px;columns:2;column-gap:32px}
#fullArticle .guida-monami nav.indice li{margin-bottom:4px}
#fullArticle .guida-monami nav.indice a{font-weight:500}

/* note e avvisi */
#fullArticle .guida-monami .nota,
#fullArticle .guida-monami .attenzione{padding:14px 18px;margin:18px 0;border-radius:2px}
#fullArticle .guida-monami .nota{background:var(--g-nota-bg);border:1px solid var(--g-nota-bordo)}
#fullArticle .guida-monami .attenzione{background:var(--g-attenzione-bg);border:1px solid var(--g-attenzione-bordo)}
#fullArticle .guida-monami .nota p:last-child,
#fullArticle .guida-monami .attenzione p:last-child{margin-bottom:0}
#fullArticle .guida-monami .etichetta{
  display:block;font-weight:700;color:var(--g-testo-forte);font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px;
}

/* tabelle di riferimento */
#fullArticle .guida-monami .tabella-scroll{overflow-x:auto;margin:0 0 20px}
#fullArticle .guida-monami table{border-collapse:collapse;width:100%;font-size:14.5px;margin:0}
#fullArticle .guida-monami th,
#fullArticle .guida-monami td{border:1px solid var(--g-bordo);padding:9px 12px;text-align:left;vertical-align:top}
#fullArticle .guida-monami th{background:#f5f5f5;color:var(--g-testo-forte);font-weight:600}
#fullArticle .guida-monami tbody tr:nth-child(even){background:#fbfbfb}

/* passi numerati */
#fullArticle .guida-monami ol.passi{list-style:none;padding:0;counter-reset:passo;margin:0 0 20px}
#fullArticle .guida-monami ol.passi>li{counter-increment:passo;position:relative;padding:0 0 18px 46px;margin:0}
#fullArticle .guida-monami ol.passi>li::before{
  content:counter(passo);position:absolute;left:0;top:1px;width:29px;height:29px;border-radius:50%;
  background:var(--g-arancio);color:#fff;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
#fullArticle .guida-monami ol.passi>li h3{margin:2px 0 6px}
#fullArticle .guida-monami ol.passi>li p:last-child{margin-bottom:0}

/* figure, didascalie e segnaposto degli screenshot */
#fullArticle .guida-monami figure{margin:22px 0}
#fullArticle .guida-monami figure img{display:block;max-width:100%;border:1px solid #d8d8d8;border-radius:2px;margin:0}
#fullArticle .guida-monami figcaption{color:var(--g-tenue);font-size:13px;font-style:italic;margin-top:7px}
#fullArticle .guida-monami .segnaposto{
  border:1px dashed #c9c9c9;background:#fafafa;color:#8a8a8a;
  padding:20px 22px;font-size:13.5px;line-height:1.55;border-radius:2px;
}
#fullArticle .guida-monami .segnaposto b{display:block;color:#666;font-size:13px;margin-bottom:4px}

/* schema SVG */
#fullArticle .guida-monami figure.diagramma{margin:24px 0}
#fullArticle .guida-monami figure.diagramma svg{max-width:100%;height:auto;display:block;margin:0 auto}

/* FAQ */
#fullArticle .guida-monami .faq h3{margin:18px 0 6px}
#fullArticle .guida-monami .faq h3::before{content:"\203A  ";color:var(--g-arancio)}

/* schermi stretti */
@media(max-width:640px){
  #fullArticle .guida-monami nav.indice ol{columns:1}
  #fullArticle .guida-monami .sintesi dl{grid-template-columns:1fr;gap:2px}
  #fullArticle .guida-monami .sintesi dd{margin-bottom:8px}
}