/* ==========================================================================
   SHS Italia – articolo del blog (templates/single-post.php)
   Impaginazione editoriale: apertura tipografica, immagine larga, colonna di
   lettura stretta con indice laterale, chiusura con condivisione e correlati.
   ========================================================================== */

/* Barra di avanzamento della lettura */
.shs-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 1001; height: 3px; pointer-events: none; }
.shs-progress span { display: block; height: 100%; width: 100%; background: var(--shs-navy); transform: scaleX(0); transform-origin: left; }
.admin-bar .shs-progress { top: 32px; }

.shs-article { background: #fff; }
.shs-article__wrap { max-width: calc(760px + var(--shs-gutter) * 2); margin: 0 auto; padding: 0 var(--shs-gutter); box-sizing: border-box; }
.shs-article__wrap--wide { max-width: calc(var(--shs-wrap) + var(--shs-gutter) * 2); }

/* Apertura */
.shs-article__head { padding: 56px 0 36px; }
.shs-article__crumbs { display: flex; gap: 8px; margin-bottom: 36px; font-size: 13px; color: var(--shs-muted); }
.shs-article__crumbs a { color: var(--shs-muted) !important; text-decoration: none; }
.shs-article__crumbs a:hover { color: var(--shs-navy) !important; }
.shs-article__kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.shs-article__kicker::before { content: ""; width: 6px; height: 6px; background: var(--shs-navy); }
.shs-article__kicker a { color: var(--shs-navy) !important; text-decoration: none; }
body.shs .shs-article__title {
	margin: 0; font-weight: 700; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.04; letter-spacing: -.04em;
	color: var(--shs-ink); text-wrap: balance;
}
.shs-article__dek { margin: 22px 0 0; font-size: 21px; line-height: 1.5; letter-spacing: -.01em; color: var(--shs-muted); text-wrap: pretty; }
.shs-article__meta { display: flex; flex-wrap: wrap; margin: 30px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--shs-line); font-size: 14px; color: var(--shs-muted); font-variant-numeric: tabular-nums; }
.shs-article__meta li { margin: 0; }
.shs-article__meta li + li::before { content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 14px; background: var(--shs-line-strong); vertical-align: -1px; }
.shs-article__meta li:first-child { color: var(--shs-ink); font-weight: 600; }

/* Immagine di copertina */
.shs-article__cover { max-width: 1120px; margin: 0 auto 64px; padding: 0 var(--shs-gutter); box-sizing: content-box; }
.shs-article__cover img { display: block; width: 100%; height: auto; max-height: 620px; object-fit: cover; aspect-ratio: 16 / 9; border-radius: var(--shs-radius); }

/* Corpo: colonna di lettura + indice laterale */
.shs-article__layout { max-width: calc(760px + var(--shs-gutter) * 2); margin: 0 auto; padding: 0 var(--shs-gutter); box-sizing: border-box; }
.shs-article__layout.has-toc { display: grid; grid-template-columns: 220px minmax(0, 700px); justify-content: center; column-gap: 72px; max-width: calc(220px + 72px + 700px + var(--shs-gutter) * 2); }
.shs-article__rail { position: relative; }
.shs-article__toc { position: sticky; top: calc(var(--shs-header-h) + 32px); }
.shs-article__toc summary { list-style: none; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--shs-line); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--shs-muted); cursor: default; }
.shs-article__toc summary::-webkit-details-marker { display: none; }
.shs-article__toc ol { counter-reset: shs-toc; margin: 0; padding: 0; list-style: none; }
.shs-article__toc li { counter-increment: shs-toc; margin: 0; }
.shs-article__toc a {
	display: grid; grid-template-columns: 26px 1fr; gap: 4px; padding: 7px 0;
	font-size: 14px; line-height: 1.4; color: var(--shs-muted) !important; text-decoration: none;
	transition: color .15s;
}
.shs-article__toc a::before { content: counter(shs-toc, decimal-leading-zero); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--shs-line-strong); padding-top: 1px; }
.shs-article__toc a:hover, .shs-article__toc a.is-active { color: var(--shs-ink) !important; }
.shs-article__toc a.is-active::before { color: var(--shs-navy); }

/* Testo */
.shs-article__body { min-width: 0; font-size: 18px; line-height: 1.75; color: var(--shs-text); }
body.shs .shs-article__body .shs-prose,
body.shs .shs-article__body .shs-prose--articolo { max-width: none; margin: 0; font-size: 18px; line-height: 1.75; }
body.shs .shs-article__body .shs-prose--articolo > p:first-of-type,
body.shs .shs-article__body > p:first-of-type { font-size: 21px; line-height: 1.6; color: var(--shs-ink); }
.shs-article__body p { margin: 0 0 1.15em; }
.shs-article__body a { color: var(--shs-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.shs-article__body img { max-width: 100%; height: auto; border-radius: var(--shs-radius); }
.shs-article__body figure { margin: 2em 0; }
.shs-article__body figcaption { margin-top: 8px; font-size: 14px; color: var(--shs-muted); }
body.shs .shs-article__body .shs-prose h2.shs-ch { scroll-margin-top: calc(var(--shs-header-h) + 32px); }
body.shs .shs-article__body h2:not(.shs-ch):not(.shs-intro) { margin: 2em 0 .6em; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -.03em; color: var(--shs-ink); }

/* Articoli costruiti con Elementor: le sezioni seguono la colonna di lettura */
body.shs .shs-article__body .elementor-section.elementor-top-section > .elementor-container { max-width: none; }
body.shs .shs-article__body .elementor-section.elementor-top-section { padding-left: 0 !important; padding-right: 0 !important; }
body.shs .shs-article__body .elementor-column > .elementor-widget-wrap { padding-left: 0 !important; padding-right: 0 !important; }
body.shs .shs-article__body .elementor-widget-text-editor { font-size: 18px !important; line-height: 1.75 !important; color: var(--shs-text) !important; }
body.shs .shs-article__body .elementor-widget-heading .elementor-heading-title { letter-spacing: -.025em !important; text-transform: none !important; color: var(--shs-ink) !important; }
body.shs .shs-article__body .elementor-widget-image img { border-radius: var(--shs-radius); }

/* Chiusura */
.shs-article__end { max-width: calc(700px + var(--shs-gutter) * 2); margin: 56px auto 0; padding: 0 var(--shs-gutter); box-sizing: border-box; }
.shs-article__layout.has-toc + .shs-article__end { max-width: calc(220px + 72px + 700px + var(--shs-gutter) * 2); padding-left: calc(var(--shs-gutter) + 292px); }
.shs-article__share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 20px 0; border-top: 1px solid var(--shs-line); border-bottom: 1px solid var(--shs-line); }
.shs-article__share p { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--shs-muted); }
.shs-article__share ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.shs-article__share li { margin: 0; }
body.shs .shs-article__share a,
body.shs .shs-article__copy {
	display: inline-flex; align-items: center; height: 36px; padding: 0 12px; margin: 0;
	border: 0; border-radius: var(--shs-radius-sm); background: transparent; cursor: pointer;
	box-shadow: inset 0 0 0 1px var(--shs-line-strong);
	font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; text-transform: none; letter-spacing: 0;
	color: var(--shs-ink) !important; text-decoration: none;
	transition: box-shadow .15s, color .15s;
}
body.shs .shs-article__share a:hover,
body.shs .shs-article__copy:hover { box-shadow: inset 0 0 0 1px var(--shs-navy); color: var(--shs-navy) !important; background: transparent; }
.shs-article__tags { margin: 18px 0 0; font-size: 13px; }
.shs-article__tags a { display: inline-block; margin: 0 6px 6px 0; padding: 4px 10px; border-radius: var(--shs-radius-sm); background: var(--shs-bg); color: var(--shs-muted) !important; text-decoration: none; }
.shs-article__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 40px 0 0; padding: 28px 30px; background: var(--shs-bg); border-left: 3px solid var(--shs-navy); border-radius: var(--shs-radius); }
.shs-article__cta p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--shs-muted); }
.shs-article__cta .shs-article__cta-title { margin-bottom: 4px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--shs-ink); }
.shs-article__cta .shs-btn { flex-shrink: 0; height: 48px; }

/* Correlati */
.shs-article__related { margin-top: 96px; padding: 72px 0 96px; background: var(--shs-bg); }
.shs-article__related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
body.shs .shs-article__related h2 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.03em; color: var(--shs-ink); }
.shs-article__related-head a { font-size: 14px; font-weight: 600; color: var(--shs-navy) !important; text-decoration: none; }
.shs-article__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.shs-article__card { display: flex; flex-direction: column; gap: 10px; color: inherit !important; text-decoration: none; }
.shs-article__card-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--shs-radius); background: #fff; box-shadow: inset 0 0 0 1px var(--shs-line); }
.shs-article__card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shs-article__card time { margin-top: 6px; font-size: 13px; color: var(--shs-muted); font-variant-numeric: tabular-nums; }
.shs-article__card-title { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--shs-ink); transition: color .15s; }
.shs-article__card:hover .shs-article__card-title { color: var(--shs-navy); }

/* Responsive */
@media (max-width: 1100px) {
	.shs-article__layout.has-toc { display: block; max-width: calc(760px + var(--shs-gutter) * 2); }
	.shs-article__layout.has-toc + .shs-article__end { max-width: calc(700px + var(--shs-gutter) * 2); padding-left: var(--shs-gutter); }
	.shs-article__toc { position: static; margin: 0 0 36px; padding: 16px 18px; background: var(--shs-bg); border-radius: var(--shs-radius); }
	.shs-article__toc summary { margin: 0; padding: 0; border: 0; cursor: pointer; display: flex; justify-content: space-between; }
	.shs-article__toc summary::after { content: "+"; font-size: 16px; line-height: 1; color: var(--shs-navy); }
	.shs-article__toc[open] summary { margin-bottom: 10px; }
	.shs-article__toc[open] summary::after { content: "–"; }
}
@media (max-width: 782px) { .admin-bar .shs-progress { top: 46px; } }
@media (max-width: 767px) {
	.shs-article__head { padding: 32px 0 24px; }
	.shs-article__crumbs { margin-bottom: 24px; }
	.shs-article__dek { font-size: 18px; }
	.shs-article__meta { font-size: 13px; row-gap: 6px; }
	.shs-article__cover { margin-bottom: 36px; padding: 0; }
	.shs-article__cover img { border-radius: 0; max-height: 300px; }
	.shs-article__body, body.shs .shs-article__body .shs-prose { font-size: 17px; }
	body.shs .shs-article__body .shs-prose--articolo > p:first-of-type,
	body.shs .shs-article__body > p:first-of-type { font-size: 19px; }
	.shs-article__cta { flex-direction: column; align-items: stretch; padding: 22px 20px; }
	.shs-article__cta .shs-btn { width: 100%; }
	.shs-article__related { margin-top: 64px; padding: 48px 0 64px; }
	.shs-article__cards { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) { .admin-bar .shs-progress { top: 0; } }
@media print { .shs-progress, .shs-article__rail, .shs-article__share, .shs-article__cta, .shs-article__related { display: none; } }
