/* ------------------------------------------------------------------
   Hosting Stak Blog: solo ciò che il blog aggiunge a site.css.
   Colori, font, raggi e ombre sono le variabili del sito.
   ------------------------------------------------------------------ */

.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* testata degli elenchi e degli articoli */
.phero--post h1{font-size:clamp(1.9rem,3.5vw,2.85rem);line-height:1.1;max-width:22em}
.phero--post .eyebrow{text-decoration:none}
.phero--post .eyebrow:hover{text-decoration:underline;text-underline-offset:4px}
.phero--post .lede{max-width:40em}
.phero .pmeta{color:var(--slate-300)}

/* data, tempo di lettura, aggiornamento */
.pmeta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.88rem;line-height:1.4;color:var(--slate-500)}
.pmeta>*+*{position:relative;padding-left:14px}
.pmeta>*+*::before{content:"";position:absolute;left:0;top:.62em;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}

/* argomenti + ricerca */
.sec--blog{padding-top:clamp(32px,4vw,52px)}
.blogbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-bottom:clamp(28px,4vw,44px)}
.pills ul{display:flex;flex-wrap:wrap;gap:8px}
.pills a{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.58em 1.05em;font:700 .92rem/1 var(--font);color:var(--slate-500);text-decoration:none;transition:border-color .16s ease,color .16s ease,background-color .16s ease}
.pills a:hover{border-color:var(--slate-300);color:var(--slate-900)}
.pills a[aria-current]{background:var(--slate-900);border-color:var(--slate-900);color:#fff}
.bsearch{position:relative;width:min(100%,420px)}
/* nella testata scura il campo di ricerca è chiaro su scuro */
.phero .bsearch input{background:rgba(255,255,255,.08);border-color:var(--line-dark);color:#fff}
.phero .bsearch input::placeholder{color:var(--slate-300)}
.phero .bsearch input:focus{outline-color:var(--mint);background:rgba(255,255,255,.12)}
.phero .bsearch button{background:rgba(255,255,255,.12);color:#fff}
.phero .bsearch button:hover{background:var(--teal);color:var(--on-teal)}
/* avviso in testa agli articoli d'archivio */
.notice--archive{margin-bottom:clamp(24px,3vw,36px);background:var(--mist)}
.notice--archive .ico{color:var(--slate-500)}
.notice--archive a{color:var(--teal-ink);font-weight:600;text-underline-offset:3px}
.bsearch input{width:100%;font:400 .98rem/1.2 var(--font);color:var(--slate-900);background:#fff;border:1px solid var(--line);border-radius:10px;padding:.72em 2.9em .72em 1em;-webkit-appearance:none;appearance:none}
.bsearch input::placeholder{color:var(--slate-500)}
.bsearch input:focus{outline:2px solid var(--teal-deep);outline-offset:1px;border-color:transparent}
.bsearch button{position:absolute;right:5px;top:5px;bottom:5px;display:grid;place-items:center;width:36px;border:0;border-radius:7px;background:var(--mist);color:var(--slate-900);cursor:pointer}
.bsearch button:hover{background:var(--teal);color:var(--on-teal)}
.bsearch .ico{width:18px;height:18px;stroke-width:2.2}

/* schede degli articoli */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.pcard:hover{border-color:var(--slate-300);box-shadow:var(--shadow);transform:translateY(-2px)}
/* stesso formato delle immagini in evidenza (1200×630): si vedono intere, senza tagli */
.pcard__media{display:block;aspect-ratio:1200/630;background:var(--mist);overflow:hidden}
.pcard__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.pcard:hover .pcard__media img{transform:scale(1.03)}
.pcard__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:22px 22px 20px}
/* margine negativo = stessa impaginazione, ma l'area da toccare passa da 14 a 32 px */
.pcard__cat{align-self:flex-start;padding-block:9px;margin-block:-9px;font:700 .74rem/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);text-decoration:none}
.pcard__cat:hover{text-decoration:underline;text-underline-offset:3px}
.pcard__title{font:700 1.16rem/1.28 var(--font);letter-spacing:-.01em;color:var(--slate-900);text-wrap:balance}
.pcard__title a{color:inherit;text-decoration:none}
.pcard__title a:hover{color:var(--teal-ink)}
.pcard__text{font-size:.96rem;line-height:1.55;color:var(--slate-500);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard .pmeta{margin-top:auto;padding-top:6px}
/* l'articolo più recente: scheda orizzontale a tutta larghezza. L'altezza la decide
   l'immagine, nel suo formato: niente riquadri più alti che costringano a tagliarla. */
.pcard--lead{grid-column:1/-1;flex-direction:row;align-items:stretch}
.pcard--lead .pcard__media{flex:0 0 60%;aspect-ratio:auto;display:flex;align-items:center;background:var(--slate-950)}
.pcard--lead .pcard__media img{height:auto;aspect-ratio:1200/630}   /* se il testo a fianco è più alto, l'immagine resta intera e centrata */
.pcard--lead .pcard__body{justify-content:center;gap:14px;padding:clamp(24px,2.6vw,36px)}
.pcard--lead .pcard__title{font-size:clamp(1.45rem,2.2vw,1.9rem);line-height:1.15;letter-spacing:-.02em}
.pcard--lead .pcard__text{font-size:1.02rem;-webkit-line-clamp:3}
.pcard--lead .pmeta{margin-top:0}
@media (max-width:1099px){
  .pcard--lead{flex-direction:column}
  .pcard--lead .pcard__media{flex:none;display:block;background:var(--mist)}
  .pcard--lead .pcard__body{justify-content:flex-start;padding:26px 28px 24px}
}
@media (max-width:980px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .pgrid{grid-template-columns:minmax(0,1fr);gap:18px}
  .pcard--lead .pcard__body{padding:22px 22px 20px}
}
@media (prefers-reduced-motion:reduce){.pcard,.pcard__media img{transition:none}.pcard:hover{transform:none}.pcard:hover .pcard__media img{transform:none}}

/* paginazione */
.pager{margin-top:clamp(32px,4vw,52px)}
.pager .nav-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.pager .page-numbers{display:inline-flex;align-items:center;gap:8px;min-width:44px;height:44px;justify-content:center;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font:700 .95rem/1 var(--font);color:var(--slate-900);text-decoration:none}
.pager a.page-numbers:hover{border-color:var(--slate-900)}
.pager .page-numbers.current{background:var(--slate-900);border-color:var(--slate-900);color:#fff}
.pager .page-numbers.dots{border-color:transparent;background:transparent;min-width:0;padding:0 4px}
.pager .ico{width:18px;height:18px;stroke-width:2.2}
.pager .ico--back{transform:rotate(180deg)}
@media (max-width:620px){.pager .prev span,.pager .next span{display:none}}

/* articolo */
.sec--post{padding-top:clamp(28px,4vw,52px)}
.post__layout{grid-template-columns:minmax(0,780px) minmax(240px,1fr);gap:clamp(32px,5vw,72px)}
.post__main{min-width:0}
.post__media{margin:0 0 clamp(26px,3.5vw,40px)}
.post__media img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow)}
.post__content{max-width:none;font-size:1.06rem;line-height:1.72}
.post__aside{display:grid;gap:18px;position:sticky;top:96px}
.post__aside .aside-card{position:static}
.aside-card--cta{background:linear-gradient(160deg,var(--slate-800),var(--slate-950));color:var(--slate-200)}
.aside-card--cta h2{color:#fff}
.aside-card--cta p{font-size:.97rem;line-height:1.55}
.aside-card--cta b{color:#fff}
/* site.css colora di verde scuro i link dentro .aside-card: il pulsante deve tenere il suo colore */
.aside-card--cta .btn{width:100%}
.aside-card--cta .btn--teal,.aside-card--cta .btn--teal:hover{color:var(--on-btn);font-weight:700;text-decoration:none}
.toc ol{display:grid;gap:0;border-left:2px solid var(--line)}
.toc li{display:block;font-size:.95rem;line-height:1.4}
.toc a{display:block;margin-left:-2px;padding:6px 0 6px 14px;border-left:2px solid transparent}
.toc a:hover{border-left-color:var(--teal)}
.toc a{color:var(--slate-700);font-weight:500;text-decoration:none}
.toc a:hover{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.post__content h2{scroll-margin-top:96px}
/* su schermi stretti la colonna a fianco sparisce: l'indice diventa un riquadro apribile sotto l'immagine */
.toc-inline{display:none}
@media (max-width:1020px){
  .post__layout{grid-template-columns:minmax(0,1fr)}
  .post__aside{display:none}
  .toc-inline{display:block;margin-bottom:clamp(22px,3vw,32px);border:1px solid var(--line);border-radius:14px;background:var(--mist)}
  .toc-inline summary{cursor:pointer;padding:14px 18px;font:700 1rem/1.3 var(--font);color:var(--slate-900);list-style:none;display:flex;justify-content:space-between;align-items:center}
  .toc-inline summary::-webkit-details-marker{display:none}
  .toc-inline summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--teal-ink);border-bottom:2px solid var(--teal-ink);transform:rotate(45deg);margin-top:-4px;transition:transform .16s ease}
  .toc-inline[open] summary::after{transform:rotate(-135deg);margin-top:4px}
  .toc-inline ol{padding:0 18px 14px;display:grid;gap:2px}
  .toc-inline li{font-size:.96rem;line-height:1.4}
  .toc-inline a{display:block;padding:6px 0;color:var(--slate-700);text-decoration:none}
  .toc-inline a:hover{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
}

/* tipografia dei contenuti scritti in WordPress */
.prose img{max-width:100%;height:auto;border-radius:12px}
.prose figure{margin-inline:0}
.prose figcaption,.prose .wp-caption-text{margin-top:8px;font-size:.88rem;line-height:1.45;color:var(--slate-500);text-align:center}
.prose .wp-caption{max-width:100%}
.prose .aligncenter{display:block;margin-inline:auto}
.prose .alignleft{float:left;margin:.3em 1.5em 1em 0;max-width:50%}
.prose .alignright{float:right;margin:.3em 0 1em 1.5em;max-width:50%}
.prose::after{content:"";display:table;clear:both}
.prose blockquote{margin-inline:0;padding:4px 0 4px 22px;border-left:3px solid var(--teal);font-size:1.12em;line-height:1.6;color:var(--slate-900)}
.prose blockquote cite{display:block;margin-top:8px;font-size:.85em;font-style:normal;color:var(--slate-500)}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:2.2em}
.prose code{font:500 .9em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--mist);border-radius:5px;padding:.12em .38em;color:var(--slate-900)}
.prose pre{overflow-x:auto;padding:16px 18px;border-radius:12px;background:var(--slate-950);color:var(--slate-200);font-size:.9rem;line-height:1.55}
.prose pre code{background:transparent;padding:0;color:inherit}
.prose table{width:100%;border-collapse:collapse;font-size:.96rem;line-height:1.45}
.prose th,.prose td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose thead th,.prose tr:first-child th{background:var(--mist);font-weight:700;color:var(--slate-900)}
.prose .scroll{margin-top:1.4em}
.prose .scroll table{min-width:520px}
/* telefono: ogni riga della tabella diventa una scheda, con il nome della colonna sopra ogni valore */
@media (max-width:620px){
  .prose .scroll--cards{overflow:visible;border:0;border-radius:0}
  .prose table.is-labelled{display:block;min-width:0}
  .prose table.is-labelled thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .prose table.is-labelled tbody,.prose table.is-labelled tr,.prose table.is-labelled th,.prose table.is-labelled td{display:block;width:auto}
  .prose table.is-labelled tr{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
  .prose table.is-labelled tr+tr{margin-top:12px}
  .prose table.is-labelled tbody th{padding:12px 16px;background:var(--mist);border-bottom:1px solid var(--line);color:var(--slate-900)}
  .prose table.is-labelled td{padding:10px 16px 11px;border-bottom:1px solid var(--line)}
  .prose table.is-labelled tr td:last-child{border-bottom:0}
  .prose table.is-labelled td::before{content:attr(data-label);display:block;margin-bottom:2px;font:700 .7rem/1.35 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500)}
}
.prose iframe,.prose video{max-width:100%}
.prose h2+h3{margin-top:1em}
@media (max-width:620px){.prose .alignleft,.prose .alignright{float:none;display:block;margin:1em auto;max-width:100%}}
.post__pages{display:flex;flex-wrap:wrap;gap:8px;margin-top:2em;font-weight:700}

/* video: si carica solo al clic */
.yt{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.3px) 0 0/24px 24px,radial-gradient(620px 300px at 100% 0%,#47616f 0%,rgba(71,97,111,0) 70%),linear-gradient(160deg,var(--slate-800),var(--slate-950));box-shadow:var(--shadow)}
.yt__play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;border:0;background:transparent;color:#fff;cursor:pointer;font:700 1.05rem/1.3 var(--font)}
.yt__btn{display:grid;place-items:center;width:clamp(60px,9vw,84px);height:clamp(60px,9vw,84px);border-radius:50%;background:var(--teal);color:var(--on-teal);box-shadow:0 0 0 10px rgba(26,188,156,.16);transition:transform .18s ease,box-shadow .18s ease}
.yt__btn .ico{width:36%;height:36%;margin-left:6%;fill:currentColor;stroke:none}
.yt__play:hover .yt__btn{transform:scale(1.06);box-shadow:0 0 0 14px rgba(26,188,156,.2)}
.yt__play:focus-visible{outline:3px solid var(--mint);outline-offset:-6px}
.yt__text{display:grid;gap:4px;text-align:center}
.yt__text small{font-weight:400;font-size:.84rem;color:var(--slate-300)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* dentro il testo: una barra compatta, che diventa un video 16:9 solo quando si preme play */
.yt--compact{aspect-ratio:auto;border-radius:14px;box-shadow:none}
.yt--compact+.yt--compact,.prose p+.yt--compact{margin-top:12px}
.yt--compact .yt__play{position:static;flex-direction:row;justify-content:flex-start;gap:16px;padding:14px 18px;text-align:left}
.yt--compact .yt__btn{flex:none;width:46px;height:46px;box-shadow:0 0 0 6px rgba(26,188,156,.16)}
.yt--compact .yt__text{text-align:left;gap:2px;font-size:1rem}
.yt--compact.is-open{aspect-ratio:16/9;border-radius:18px;box-shadow:var(--shadow)}

/* condividi */
.post__foot{margin-top:clamp(28px,4vw,44px);padding-top:22px;border-top:1px solid var(--line)}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.share__label{font:700 .8rem/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500)}
.share ul{display:flex;flex-wrap:wrap;gap:8px}
.share a,.share button{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.55em 1em;font:600 .9rem/1 var(--font);color:var(--slate-900);text-decoration:none;cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--slate-900)}
.share button.is-done{background:var(--teal-50);border-color:var(--teal);color:var(--teal-ink)}

/* invito all'azione in fondo agli articoli e agli elenchi */
.bcta{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px clamp(28px,5vw,64px);align-items:center;margin-top:clamp(40px,5vw,64px);padding:clamp(28px,4vw,48px);border-radius:22px;color:var(--slate-200);box-shadow:var(--shadow);
  background:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.3px) 0 0/24px 24px,radial-gradient(720px 320px at 100% 0%,#47616f 0%,rgba(71,97,111,0) 70%),linear-gradient(160deg,var(--slate-800),var(--slate-950))}
.sec--tight .bcta{margin-top:0}
.bcta__copy{display:grid;gap:12px}
.bcta .eyebrow{color:var(--mint)}
.bcta h2{font-size:clamp(1.55rem,2.8vw,2.2rem);line-height:1.12;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.bcta p{max-width:36em;line-height:1.6}
.bcta b{color:#fff}
.bcta__side{display:grid;gap:14px;justify-items:start}
.bcta .tlink{color:var(--mint)}
@media (max-width:820px){.bcta{grid-template-columns:minmax(0,1fr)}}

/* nessun risultato */
.notice--empty{max-width:46em}

/* commenti (oggi spenti dal plugin AZ SECURITY) */
.comments{margin-top:clamp(40px,5vw,64px);max-width:780px}
.comments__title{font-size:1.4rem;margin-bottom:18px}
.comments__list{display:grid;gap:18px}
.comments__list .comment-body{padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:#fff}
.comments__list .children{margin:18px 0 0 22px;display:grid;gap:18px}
.comments__list .avatar{float:left;margin-right:12px;border-radius:50%}
.comments__list .comment-metadata{font-size:.85rem;color:var(--slate-500)}
.comments__list .comment-metadata a{color:inherit;text-decoration:none}
.comments__list .comment-content{clear:both;padding-top:10px;color:var(--slate-700)}
.comment-form{display:grid;gap:14px;margin-top:22px}
.comment-form label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;font:400 1rem/1.4 var(--font);border:1px solid var(--line);border-radius:10px;padding:.75em 1em;background:#fff;color:var(--slate-900)}
.bypostauthor>.comment-body{border-color:var(--teal)}
.sticky .pcard__cat::after{content:" · in evidenza"}

@media print{
  .blogbar,.post__aside,.bcta,.share,.pager{display:none!important}
  .post__layout{display:block}
}