/*
Theme Name: SEO Platform Minimal
Author: SEO Platform
Description: Tema editoriale accessibile e production-ready per siti gestiti da SEO Platform.
Version: 1.4.1
Requires at least: 7.0
Requires PHP: 8.3
Text Domain: seo-platform-minimal
*/

/* Etichette centralizzate anche per HTML già pubblicato. */
.sp-itinerary-block {
    --sp-itinerary-map-show-label: "Mappa";
    --sp-itinerary-map-hide-label: "Nascondi mappa";
    --sp-itinerary-map-open-label: "Google Maps";
    --sp-itinerary-stop-label: "fermata";
    --sp-itinerary-stops-label: "fermate";
}

.sp-itinerary-block:lang(en) {
    --sp-itinerary-map-show-label: "Map";
    --sp-itinerary-map-hide-label: "Hide map";
    --sp-itinerary-map-open-label: "Google Maps";
    --sp-itinerary-stop-label: "stop";
    --sp-itinerary-stops-label: "stops";
}

/* L'HTML porta solo il numero di fermate: parola e plurale sono del tema. */
.sp-itinerary-connection-stop-count::after {
    content: " " var(--sp-itinerary-stops-label);
}

.sp-itinerary-connection-stop-count[data-sp-stop-count="1"]::after {
    content: " " var(--sp-itinerary-stop-label);
}

.sp-itinerary-legmap > summary > .sp-itinerary-legmap-label,
.sp-itinerary-legmap-open > .sp-itinerary-legmap-label {
    display: none;
}

.sp-itinerary-legmap > summary::after {
    content: var(--sp-itinerary-map-show-label);
}

.sp-itinerary-legmap[open] > summary::after {
    content: var(--sp-itinerary-map-hide-label);
}

.sp-itinerary-legmap-open::after {
    content: var(--sp-itinerary-map-open-label);
}

/* Itinerario: la struttura neutra del componente, che regge da sola senza Connector né
   proiezioni. Ogni selettore ha una classe sola, e contesto e stato stanno in :where():
   la specificità è sempre quella di una classe. Batte le regole generiche del tema
   (p, ul, ol) e cede a qualunque proiezione del sito, che arriva dopo il tema. Le parti si
   scelgono per quello che sono (header, data-sp-step, data-sp-stat, data-sp-control, dati
   e azioni della tratta), mai per posizione. */
.sp-itinerary-block {
    --sp-itinerary-rule: color-mix(in srgb, currentColor 18%, transparent);
    --sp-itinerary-muted: color-mix(in srgb, currentColor 68%, transparent);
    margin-block: 0 1.5rem;
}

/* La testata è un box solo: controlli, campione transit e totali. */
.sp-itinerary-header {
    border: 1px solid var(--sp-itinerary-rule);
    border-radius: 0.5rem;
    display: grid;
    gap: 0.6rem;
    margin-block-end: 1.25rem;
    padding: 0.75rem 0.9rem;
}

.sp-itinerary-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85rem;
    gap: 0.4rem 1rem;
}

/* Senza ancora e senza widget il contenitore resta vuoto: non occupa la testata. */
.sp-itinerary-controls:where(:empty) {
    display: none;
}

.sp-itinerary-anchor {
    color: var(--sp-itinerary-muted);
    font-size: 0.8rem;
    margin: 0;
}

.sp-itinerary-control {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
}

.sp-itinerary-control:where([data-sp-control="units"]) {
    margin-inline-start: auto;
}

.sp-itinerary-units {
    display: inline-flex;
    gap: 0.3rem;
}

.sp-itinerary-transit-sample {
    color: var(--sp-itinerary-muted);
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0;
    max-width: none;
}

/* I totali: etichetta e valore, il valore sopra. */
.sp-itinerary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.sp-itinerary-stat {
    display: flex;
    flex-direction: column-reverse;
}

.sp-itinerary-stat-label {
    color: var(--sp-itinerary-muted);
    font-size: 0.8rem;
}

.sp-itinerary-stat-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    margin: 0;
}

/* Le tappe: il numero è un contatore sul marker, che una pausa e il capolinea non hanno. */
.sp-itinerary {
    counter-reset: sp-itinerary-step;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-itinerary-step {
    margin: 0;
    max-width: none;
    padding: 0 0 1.25rem 2.5rem;
    position: relative;
}

.sp-itinerary-marker {
    block-size: 1.75rem;
    border: 1px solid var(--sp-itinerary-rule);
    border-radius: 50%;
    color: inherit;
    counter-increment: sp-itinerary-step;
    display: grid;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    inline-size: 1.75rem;
    inset-block-start: 0;
    inset-inline-start: 0;
    place-items: center;
    position: absolute;
    text-decoration: none;
}

.sp-itinerary-marker::before {
    content: counter(sp-itinerary-step);
}

:where(.sp-itinerary-step[data-sp-step="end"]) .sp-itinerary-marker {
    block-size: 0.75rem;
    counter-increment: none;
    inline-size: 0.75rem;
    inset-block-start: 0.4rem;
    inset-inline-start: 0.5rem;
}

:where(.sp-itinerary-step[data-sp-step="end"]) .sp-itinerary-marker::before {
    content: none;
}

.sp-itinerary-title {
    font-weight: 700;
    margin: 0;
}

.sp-itinerary-time {
    color: var(--sp-itinerary-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85rem;
    gap: 0.75rem;
    margin: 0 0 0.35rem;
}

.sp-itinerary-clock {
    font-weight: 700;
}

.sp-itinerary-description {
    margin: 0;
}

.sp-itinerary-ends {
    color: var(--sp-itinerary-muted);
    font-size: 0.85rem;
    margin: 0;
}

/* La tratta: ponte su una riga sua, poi dati, collegamenti e azioni nella stessa riga. */
.sp-itinerary-leg {
    align-items: center;
    color: var(--sp-itinerary-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85rem;
    gap: 0.4rem 0.75rem;
    margin-block-start: 0.6rem;
}

.sp-itinerary-leg-span {
    flex-basis: 100%;
}

.sp-itinerary-leg-facts,
.sp-itinerary-leg-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
}

.sp-itinerary-leg-time {
    font-weight: 700;
}

/* La mappa aperta prende tutta la riga, e con lei il gruppo delle azioni. */
.sp-itinerary-leg-actions:where(:has(.sp-itinerary-legmap[open])),
.sp-itinerary-legmap:where([open]) {
    flex-basis: 100%;
}

.sp-itinerary-legmap > summary {
    cursor: pointer;
}

.sp-itinerary-legmap-frame {
    block-size: 14rem;
    border: 0;
    display: block;
    inline-size: 100%;
    margin-block-start: 0.5rem;
}

/* Collegamenti transit: HTML nativo. Il pulsante sta nella riga della tratta, le alternative
   si aprono sotto, su tutta la larghezza. */
.sp-itinerary-connections,
.sp-itinerary-connection-disclosure {
    display: contents;
}

.sp-itinerary-connections::details-content,
.sp-itinerary-connection-disclosure::details-content {
    display: contents;
}

.sp-itinerary-connections > summary,
.sp-itinerary-connection-disclosure > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
    list-style: none;
    min-block-size: 44px;
}

.sp-itinerary-connections > summary::-webkit-details-marker,
.sp-itinerary-connection-disclosure > summary::-webkit-details-marker {
    display: none;
}

.sp-itinerary-connection-list {
    flex-basis: 100%;
    min-inline-size: 0;
    order: 20;
}

.sp-itinerary-connection-list:where(.sp-itinerary-connections:not([open]) > *),
.sp-itinerary-connection-journey:where(.sp-itinerary-connection-disclosure:not([open]) > *) {
    display: none;
}

.sp-itinerary-connection {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    margin: 0;
    overflow-wrap: anywhere;
    padding: 0;
}

.sp-itinerary-connection-title {
    font-size: inherit;
    margin: 0;
}

.sp-itinerary-connection-disclosure > summary {
    order: -1;
}

.sp-itinerary-connection-heading {
    flex: 1;
    margin: 0;
    min-inline-size: 0;
}

.sp-itinerary-connection-journey {
    flex-basis: 100%;
    margin: 0.25rem 0 0.5rem;
    min-inline-size: 0;
    order: 20;
    padding-inline-start: 1.2rem;
}

.sp-itinerary-connection-journey > li {
    line-height: 1.5;
    margin: 0.25rem 0;
    max-width: none;
    padding: 0;
}

/* Un elemento per dato: il separatore è del tema, così un sito può nasconderne uno. */
:is(
    .sp-itinerary-connection-summary,
    .sp-itinerary-connection-segment-title,
    .sp-itinerary-connection-segment-meta
) > * + *::before {
    content: "· ";
    font-weight: 400;
}

:root {
    --sp-shell-width: 1200px;
    --sp-content-width: 760px;
    --sp-layout-gap: clamp(1.5rem, 3vw, 3rem);
    --sp-color-ink: #172033;
    --sp-color-muted: #5b6475;
    --sp-color-surface: #ffffff;
    --sp-color-soft: #f4f7fb;
    --sp-color-border: #dce3ed;
    --sp-color-accent: #155eef;
    --sp-color-accent-dark: #0b47be;
    --sp-radius: 0.75rem;
    --sp-shadow: 0 0.75rem 2.5rem rgb(23 32 51 / 8%);
    --sp-table-card-gap: 0.75rem;
    --sp-table-card-inline-size: min(86%, 22rem);
    --sp-table-card-padding: 1rem;
    --sp-table-card-accent: var(--sp-color-accent-dark);
    --sp-table-card-surface: var(--sp-color-soft);
    --sp-table-scroll-key-surface: var(--sp-color-soft);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--sp-color-surface);
    color: var(--sp-color-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    overflow-wrap: break-word;
}

a {
    color: var(--sp-color-accent-dark);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

a:hover {
    color: var(--sp-color-accent);
}

:focus-visible {
    outline: 3px solid var(--sp-color-accent);
    outline-offset: 3px;
}

img,
svg,
video {
    height: auto;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

h1,
h2,
h3,
h4 {
    color: var(--sp-color-ink);
    line-height: 1.18;
    margin-block: 1.5em 0.55em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.15rem, 5vw, 4rem);
    letter-spacing: -0.035em;
    margin-block-start: 0;
}

h2 {
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    letter-spacing: -0.02em;
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
}

p,
ul,
ol,
blockquote,
figure,
table {
    margin-block: 0 1.25rem;
}

.sp-shell,
.sp-main {
    margin-inline: auto;
    max-width: var(--sp-shell-width);
    width: min(calc(100% - 2rem), var(--sp-shell-width));
}

.sp-main {
    min-height: 65vh;
    padding-block: clamp(2rem, 5vw, 4.5rem);
}

.sp-main:has(> .sp-breadcrumb) {
    padding-block-start: clamp(1rem, 2.5vw, 2rem);
}

.sp-site-header {
    background: rgb(255 255 255 / 96%);
    border-block-end: 1px solid var(--sp-color-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.admin-bar .sp-site-header {
    top: 32px;
}

.sp-site-header__inner {
    align-items: center;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    min-height: 4.5rem;
    padding-block: 0.75rem;
}

.sp-site-header__inner nav ul,
.sp-site-header__inner .menu {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-site-header__inner nav a,
.sp-site-identity {
    color: var(--sp-color-ink);
    font-weight: 700;
    text-decoration: none;
}

.sp-site-identity {
    align-items: center;
    display: inline-flex;
    font-size: 1.15rem;
    gap: 0.75rem;
}

.custom-logo {
    max-height: 2.75rem;
    width: auto;
}

/*
 * Navigazione canonica dell'header: `nav.sp-nav-inline` per il desktop e
 * `details.sp-nav` (hamburger senza JS) per il mobile, fratelli dentro
 * `.sp-site-header__inner`. Servono due markup perché il contenuto di un
 * `<details>` chiuso non è rivelabile via CSS su tutti i motori, e le
 * proiezioni header non possono contenere script né form.
 */
details.sp-nav {
    display: none;
}

.sp-site-footer {
    background: var(--sp-color-ink);
    color: #eef3fb;
    margin-block-start: clamp(3rem, 7vw, 6rem);
}

.sp-site-footer a {
    color: #ffffff;
}

.sp-site-footer__inner {
    padding-block: 2.5rem;
}

.sp-site-footer__inner p:last-child {
    margin-block-end: 0;
}

.sp-site-introduction {
    background: linear-gradient(135deg, #eef4ff, #f8fafc 58%, #edf8f5);
    border: 1px solid var(--sp-color-border);
    border-radius: calc(var(--sp-radius) * 1.5);
    margin-block-end: clamp(2rem, 5vw, 4rem);
    padding: clamp(1.5rem, 5vw, 4rem);
}

.sp-site-introduction h1 {
    max-width: 16ch;
}

.sp-site-introduction p {
    color: var(--sp-color-muted);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    margin-block-end: 0;
    max-width: 62ch;
}

.sp-breadcrumb {
    color: var(--sp-color-muted);
    font-size: 0.875rem;
    margin-block-end: 1.5rem;
}

.sp-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-breadcrumb li:not(:last-child)::after {
    color: #8992a3;
    content: "/";
    margin-inline-start: 0.6rem;
}

.sp-breadcrumb a {
    color: inherit;
}

.sp-article-meta {
    --sp-article-meta-icon-color: currentcolor;
    --sp-article-meta-icon-gap: 0.35rem;
    --sp-article-meta-icon-size: 0.9rem;
    color: var(--sp-color-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9rem;
    gap: 0.5rem 1.25rem;
    margin-block: -0.5rem 1.75rem;
}

.sp-article-meta > span {
    align-items: center;
    display: inline-flex;
    gap: var(--sp-article-meta-icon-gap);
    white-space: nowrap;
}

.sp-article-meta > span::before {
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    background-color: var(--sp-article-meta-icon-color);
    content: '';
    flex: 0 0 var(--sp-article-meta-icon-size);
    height: var(--sp-article-meta-icon-size);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    width: var(--sp-article-meta-icon-size);
}

.sp-article-meta__published::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3.5'%20y='5'%20width='17'%20height='16'%20rx='2'/%3E%3Cpath%20d='M8%202.5v5M16%202.5v5M3.5%209.5h17'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3.5'%20y='5'%20width='17'%20height='16'%20rx='2'/%3E%3Cpath%20d='M8%202.5v5M16%202.5v5M3.5%209.5h17'/%3E%3C/svg%3E");
}

.sp-article-meta__updated::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2020l4.25-1%2010.1-10.1a2.12%202.12%200%200%200-3-3L5.25%2016%204%2020ZM13.75%207.5l3%203'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2020l4.25-1%2010.1-10.1a2.12%202.12%200%200%200-3-3L5.25%2016%204%2020ZM13.75%207.5l3%203'/%3E%3C/svg%3E");
}

.sp-article-meta__reading-time::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207v5l3.5%202'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207v5l3.5%202'/%3E%3C/svg%3E");
}

.sp-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block: -1rem 1.75rem;
}

.sp-article-tags a {
    border: 1px solid var(--sp-color-border);
    border-radius: 999px;
    color: var(--sp-color-muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.8rem;
    text-decoration: none;
}

.sp-article-tags a:hover {
    border-color: var(--sp-color-accent);
    color: var(--sp-color-accent-dark);
}

/*
 * Disclaimer sotto il corpo dell'articolo.
 *
 * Deve leggersi come una nota a margine, non come una parte del testo: corpo ridotto, colore
 * attenuato e una riga di separazione. Nessun colore semantico — il segnale lo porta la posizione,
 * non una tinta d'allarme.
 */
.sp-disclaimer {
    border-top: 1px solid var(--sp-color-border);
    color: var(--sp-color-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    margin-block: clamp(2rem, 4vw, 3rem) 0;
    padding-block-start: 1rem;
}

.sp-disclaimer > :first-child {
    margin-block-start: 0;
}

.sp-disclaimer > :last-child {
    margin-block-end: 0;
}

.sp-featured-image {
    margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}

.sp-featured-image__media {
    aspect-ratio: 16 / 9;
    border-radius: var(--sp-radius);
    display: block;
    object-fit: cover;
    width: 100%;
}

.sp-featured-image figcaption,
.wp-element-caption {
    color: var(--sp-color-muted);
    font-size: 0.85rem;
    margin-block-start: 0.5rem;
}

.sp-content-layout {
    align-items: start;
    display: grid;
    gap: var(--sp-layout-gap);
    grid-template-columns: minmax(0, var(--sp-content-width));
}

.sp-content-layout:has(.sp-toc-sidebar:not(:empty)) {
    grid-template-columns: minmax(13rem, 18rem) minmax(0, var(--sp-content-width));
}

/* Il Connector aggiunge il disclaimer come fratello del corpo, così il contenuto
 * pubblicato resta indipendente dalla configurazione del sito. Quando esiste la
 * colonna dell'indice, il terzo elemento deve però continuare sull'asse del testo. */
@media (min-width: 64.01rem) {
    .sp-content-layout:has(.sp-toc-sidebar:not(:empty)) > .sp-disclaimer {
        grid-column: 2;
    }
}

.sp-toc-sidebar:empty {
    display: none;
}

.sp-toc-sidebar :is(.post-toc, .sp-toc) {
    max-height: calc(100vh - 7rem);
    overflow: auto;
    position: sticky;
    top: 6rem;
}

.post-toc,
.sp-toc {
    background: var(--sp-color-soft);
    border-inline-start: 4px solid var(--sp-color-accent);
    border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
    margin-block-end: 2rem;
    padding: 1rem 1.25rem;
}

.post-toc > p:first-child,
.sp-toc__title {
    display: block;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-block-end: 0.6rem;
    text-transform: uppercase;
}

.post-toc ol,
.sp-toc ol {
    margin: 0;
    padding-inline-start: 1.25rem;
}

.post-toc li + li,
.sp-toc li + li {
    margin-block-start: 0.35rem;
}

.sp-toc__level-3 {
    margin-inline-start: 1rem;
}

.wp-block-post-content {
    min-width: 0;
}

.wp-block-post-content > :first-child {
    margin-block-start: 0;
}

.wp-block-post-content p,
.wp-block-post-content li {
    max-width: 72ch;
}

.wp-block-post-content li + li {
    margin-block-start: 0.45rem;
}

.wp-block-post-content blockquote {
    border-inline-start: 4px solid var(--sp-color-accent);
    color: var(--sp-color-muted);
    font-size: 1.15rem;
    margin-inline: 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
}

.wp-block-table {
    overflow-x: auto;
}

.wp-block-table table {
    border-collapse: collapse;
    min-width: 36rem;
    width: 100%;
}

.wp-block-table th,
.wp-block-table td {
    border: 1px solid var(--sp-color-border);
    padding: 0.75rem;
    text-align: start;
}

.wp-block-table th {
    background: var(--sp-color-soft);
}

.sp-table-cards[hidden] {
    display: none;
}

@media (max-width: 48rem) {
    /* Il layout scroll conserva allineamento e soggetto durante lo swipe orizzontale. */
    .sp-table--scroll {
        border-collapse: separate;
        border-spacing: 0;
    }

    .sp-table--scroll :is(th, td) {
        min-inline-size: 9.5rem;
        vertical-align: top;
    }

    .sp-table--scroll tr > :first-child {
        background: var(--sp-table-scroll-key-surface);
        border-inline-end: 1px solid var(--sp-color-border);
        hyphens: none;
        inline-size: 8.5rem;
        inset-inline-start: 0;
        min-inline-size: 8.5rem;
        position: sticky;
        z-index: 1;
    }

    .sp-table--scroll thead tr > :first-child {
        z-index: 2;
    }

    /* Il layout cards è una proiezione mobile del Connector; la tabella resta il fallback. */
    .sp-table-cards {
        color: var(--sp-color-ink);
        margin-block-end: 0.5rem;
        min-inline-size: 0;
    }

    .sp-table-cards__track {
        display: flex;
        gap: var(--sp-table-card-gap);
        list-style: none;
        margin: 0;
        min-inline-size: 0;
        overflow-anchor: none;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: 0 0 0.45rem;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
    }

    .sp-table-cards__track::-webkit-scrollbar {
        display: none;
    }

    .sp-table-card {
        background: var(--sp-table-card-surface);
        border: 1px solid var(--sp-color-border);
        border-block-start: 2px solid var(--sp-table-card-accent);
        border-radius: 0 0 var(--sp-radius) var(--sp-radius);
        flex: 0 0 var(--sp-table-card-inline-size);
        padding: var(--sp-table-card-padding);
        scroll-snap-align: start;
        /* Un gesto rapido puo superare piu schede; lo snap riallinea comunque l'arrivo. */
        scroll-snap-stop: normal;
    }

    .sp-table-cards__track > .sp-table-card {
        margin-block-start: 0;
    }

    .sp-table-card__title {
        color: var(--sp-color-ink);
        font-size: 1.15rem;
        font-weight: 800;
        line-height: 1.25;
        margin: 0 0 0.85rem;
    }

    .sp-table-card dl {
        display: grid;
        grid-template-columns: minmax(6.25rem, 0.8fr) minmax(0, 1.2fr);
        margin: 0;
    }

    .sp-table-card :is(dt, dd) {
        border-block-start: 1px solid var(--sp-color-border);
        margin: 0;
        padding-block: 0.6rem;
    }

    .sp-table-card dt {
        color: var(--sp-color-muted);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.055em;
        padding-inline-end: 0.75rem;
        text-transform: uppercase;
    }

    .sp-table-card dd {
        line-height: 1.5;
        min-inline-size: 0;
    }
}

/*
 * Comparison: il markup resta una sola tabella semantica. Il tema ne definisce il layout
 * leggibile anche senza connector; il connector aggiunge la navigazione da tastiera.
 * Le etichette ripetute da data-sp-option-label mantengono il contesto quando una riga diventa
 * una card su mobile, senza nascondere la testata originale.
 */
.sp-comparison {
    background: var(--sp-color-soft);
    border-block: 1px solid var(--sp-color-border);
    border-inline-start: 0.25rem solid var(--sp-color-accent);
    border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
    margin-block: clamp(1.75rem, 4vw, 3rem);
    max-inline-size: 100%;
    padding: clamp(0.75rem, 2.5vw, 1.25rem);
}

.sp-comparison__table {
    border-collapse: separate;
    border-spacing: 0;
    inline-size: 100%;
    margin: 0;
    table-layout: fixed;
}

.sp-comparison__table caption {
    color: var(--sp-color-ink);
    font-size: 1.05rem;
    font-weight: 800;
    padding-block-end: 0.75rem;
    text-align: start;
}

.sp-comparison__table th,
.sp-comparison__table td {
    border-block-end: 1px solid var(--sp-color-border);
    border-inline-end: 1px solid var(--sp-color-border);
    min-inline-size: 0;
    padding: 0.85rem 0.9rem;
    text-align: start;
    vertical-align: top;
}

.sp-comparison__table tr > :first-child {
    border-inline-start: 1px solid var(--sp-color-border);
    inline-size: 24%;
}

.sp-comparison__table thead th {
    background: var(--sp-color-surface);
    border-block-start: 1px solid var(--sp-color-border);
    color: var(--sp-color-ink);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sp-comparison__table thead th:first-child {
    color: var(--sp-color-muted);
}

.sp-comparison__table tbody th {
    background: var(--sp-color-surface);
    color: var(--sp-color-ink);
    font-weight: 800;
}

.sp-comparison__criterion-label {
    display: block;
}

.sp-comparison__table tbody tr:last-child > * {
    border-block-end: 1px solid var(--sp-color-border);
}

.sp-comparison__table td {
    background: var(--sp-color-surface);
    overflow-wrap: anywhere;
}

.sp-comparison__table .sp-comparison__best {
    background: var(--sp-color-soft);
    box-shadow: inset 0 0 0 2px var(--sp-color-accent);
}

.sp-comparison__value {
    display: block;
}

.sp-comparison__winner {
    color: var(--sp-color-accent-dark);
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    line-height: 1.35;
    margin-block-start: 0.45rem;
    text-transform: uppercase;
}

.sp-comparison__criteria:focus-visible {
    outline: 2px solid var(--sp-color-accent);
    outline-offset: 2px;
}

/* Solo schermo: la stampa resta la matrice completa anche da un viewport stretto. */
@media screen and (max-width: 48rem) {
    .sp-comparison__table,
    .sp-comparison__table > caption,
    .sp-comparison__table > thead,
    .sp-comparison__table > tbody {
        display: block;
    }

    .sp-comparison__table > caption {
        inline-size: 100%;
    }

    /*
     * Due alternative: resta la tabella a due colonne. La testata nomina le alternative una volta
     * e resta visibile durante lo scorrimento; il criterio diventa la fascia sopra i suoi valori.
     */
    .sp-comparison[data-option-count="2"] .sp-comparison__table > thead {
        inset-block-start: 0;
        position: sticky;
        z-index: 1;
    }

    .sp-comparison[data-option-count="2"] .sp-comparison__table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-comparison[data-option-count="2"] .sp-comparison__table thead th:first-child {
        display: none;
    }

    .sp-comparison[data-option-count="2"] .sp-comparison__table tr > :nth-child(2) {
        border-inline-start: 1px solid var(--sp-color-border);
    }

    .sp-comparison[data-option-count="2"] .sp-comparison__table tbody th {
        border-block-end: 0;
        grid-column: 1 / -1;
        inline-size: auto;
        padding-block-end: 0;
    }

    .sp-comparison[data-option-count="2"] .sp-comparison__table tbody td {
        padding-block-start: 0.35rem;
    }

    /*
     * Oltre due alternative: il criterio è una scheda nel rail e lo swipe è nativo. La scheda
     * è quella delle tabelle a card — stessi token, filo d'accento in testa, etichetta a
     * sinistra e valore a destra — perché su mobile i due rail si leggono allo stesso modo.
     * Le righe sono alte quanto il loro contenuto: un prezzo non occupa lo spazio di una frase.
     * Le celle ripetono visivamente le alternative; la testata resta per gli screen reader.
     */
    .sp-comparison[data-option-count]:not([data-option-count="2"]) .sp-comparison__table > thead {
        block-size: 1px;
        clip-path: inset(50%);
        inline-size: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }

    .sp-comparison[data-option-count]:not([data-option-count="2"]) .sp-comparison__table > tbody {
        display: flex;
        gap: var(--sp-table-card-gap);
        overflow-anchor: none;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding-block: 0 0.45rem;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
    }

    .sp-comparison[data-option-count]:not([data-option-count="2"]) .sp-comparison__table > tbody::-webkit-scrollbar {
        display: none;
    }

    .sp-comparison[data-option-count]:not([data-option-count="2"]) .sp-comparison__table > tbody > tr {
        align-content: start;
        background: var(--sp-table-card-surface);
        border: 1px solid var(--sp-color-border);
        border-block-start: 2px solid var(--sp-table-card-accent);
        border-radius: 0 0 var(--sp-radius) var(--sp-radius);
        display: grid;
        flex: 0 0 var(--sp-table-card-inline-size);
        padding: var(--sp-table-card-padding);
        scroll-snap-align: start;
        /* Non obbliga ogni flick a fermarsi sulla scheda immediatamente successiva. */
        scroll-snap-stop: normal;
    }

    .sp-comparison[data-option-count]:not([data-option-count="2"]) .sp-comparison__table > tbody > tr > th {
        background: none;
        border: 0;
        color: var(--sp-color-ink);
        display: block;
        font-size: 1.15rem;
        font-weight: 800;
        inline-size: auto;
        line-height: 1.25;
        margin-block-end: 0.85rem;
        padding: 0;
    }

    .sp-comparison[data-option-count]:not([data-option-count="2"]) .sp-comparison__table > tbody > tr > td {
        background: none;
        border: 0;
        border-block-start: 1px solid var(--sp-color-border);
        display: grid;
        grid-template-columns: minmax(6.25rem, 0.8fr) minmax(0, 1.2fr);
        line-height: 1.5;
        padding: 0.6rem 0;
    }

    .sp-comparison[data-option-count]:not([data-option-count="2"]) .sp-comparison__table > tbody > tr > td::before {
        color: var(--sp-color-muted);
        content: attr(data-sp-option-label);
        display: block;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.055em;
        padding-inline-end: 0.75rem;
        text-transform: uppercase;
    }

    .sp-comparison[data-option-count]:not([data-option-count="2"]) .sp-comparison__table .sp-comparison__value,
    .sp-comparison[data-option-count]:not([data-option-count="2"]) .sp-comparison__table .sp-comparison__winner {
        grid-column: 2;
    }

    .sp-comparison[data-option-count]:not([data-option-count="2"]) .sp-comparison__table .sp-comparison__winner {
        margin-block-start: 0.15rem;
    }

    /* Il migliore arriva ai bordi della scheda: il segno d'accento sta sul filo del riquadro. */
    .sp-comparison[data-option-count]:not([data-option-count="2"]) .sp-comparison__table .sp-comparison__best {
        background: var(--sp-color-surface);
        box-shadow: inset 0.2rem 0 0 var(--sp-color-accent);
        margin-inline: calc(-1 * var(--sp-table-card-padding));
        padding-inline: var(--sp-table-card-padding);
    }
}

.wp-block-button__link,
button,
input[type="submit"] {
    background: var(--sp-color-accent);
    border: 1px solid var(--sp-color-accent);
    border-radius: 0.5rem;
    color: #ffffff;
    cursor: pointer;
    font-weight: 700;
    padding: 0.65rem 1rem;
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
    background: var(--sp-color-accent-dark);
    color: #ffffff;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

input[type="search"],
input[type="text"],
input[type="email"] {
    border: 1px solid #aab4c4;
    border-radius: 0.5rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
}

.sp-card-grid {
    display: grid;
    gap: clamp(1rem, 2.5vw, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.sp-card {
    background: var(--sp-color-surface);
    border: 1px solid var(--sp-color-border);
    border-radius: var(--sp-radius);
    box-shadow: 0 0.25rem 1rem rgb(23 32 51 / 5%);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: box-shadow 160ms ease, transform 160ms ease;
}

.sp-card:hover {
    box-shadow: var(--sp-shadow);
    transform: translateY(-2px);
}

.sp-card__image-link {
    background: var(--sp-color-soft);
    display: block;
}

.sp-card__image {
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: cover;
    width: 100%;
}

.sp-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.25rem;
}

.sp-card__title {
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
}

.sp-card__title a {
    color: inherit;
    text-decoration: none;
}

.sp-card__excerpt {
    color: var(--sp-color-muted);
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.sp-empty-state,
.sp-not-found {
    background: var(--sp-color-soft);
    border-radius: var(--sp-radius);
    max-width: 44rem;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.sp-empty-state h2,
.sp-not-found h1 {
    margin-block-start: 0;
}

.sp-collection-more {
    display: inline-block;
    margin-block-start: 1.25rem;
}

.sp-article-collection__controls {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-block-end: 0.75rem;
}

.sp-article-collection__header {
    align-items: end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-block-end: 0.9rem;
}

.sp-article-collection__header .sp-article-collection__controls {
    flex: 0 0 auto;
    margin-block-end: 0;
}

.sp-article-collection__title {
    font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem);
    margin: 0;
}

.sp-article-collection--related {
    border-block-start: 1px solid var(--sp-color-border);
    margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
    min-inline-size: 0;
    padding-block-start: clamp(1.25rem, 3vw, 2rem);
}

.sp-article-collection--related .sp-article-collection__controls button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
}

.sp-article-collection--related .sp-article-collection__viewport:focus-visible,
.sp-article-collection--related .sp-article-collection__controls button:focus-visible {
    outline: 2px solid var(--sp-color-accent);
    outline-offset: 2px;
}

.sp-article-collection--related .sp-article-collection__viewport {
    scrollbar-width: none;
}

.sp-article-collection--related .sp-article-collection__viewport::-webkit-scrollbar {
    display: none;
}

.sp-article-collection__controls[hidden] {
    display: none;
}

.sp-article-collection--carousel.is-enhanced .sp-article-collection__viewport {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0.25rem;
    scroll-snap-type: inline mandatory;
}

.sp-article-collection--carousel.is-enhanced .sp-article-collection__track {
    grid-auto-columns: minmax(min(82vw, 18rem), 22rem);
    grid-auto-flow: column;
    grid-template-columns: none;
}

.sp-article-collection--carousel.is-enhanced .sp-card {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

.wp-block-query-pagination {
    align-items: center;
    margin-block-start: 2.5rem;
}

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

.screen-reader-text:focus {
    background: #ffffff;
    clip: auto !important;
    clip-path: none;
    color: var(--sp-color-ink);
    height: auto;
    left: 1rem;
    padding: 0.75rem 1rem;
    top: 1rem;
    width: auto;
    z-index: 100000;
}

@media (max-width: 64rem) {
    .sp-content-layout,
    .sp-content-layout:has(.sp-toc-sidebar:not(:empty)) {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-toc-sidebar {
        display: none;
    }
}

@media (max-width: 48rem) {
    .admin-bar .sp-site-header {
        top: 46px;
    }

    .sp-site-header {
        position: static;
    }

    .sp-site-header__inner > nav.sp-nav-inline {
        display: none;
    }

    details.sp-nav {
        display: block;
        position: relative;
    }

    .sp-nav__toggle {
        align-items: center;
        border: 1px solid var(--sp-color-border);
        border-radius: 0.5rem;
        cursor: pointer;
        display: flex;
        height: 2.75rem;
        justify-content: center;
        list-style: none;
        position: relative;
        width: 2.75rem;
    }

    .sp-nav__toggle::-webkit-details-marker {
        display: none;
    }

    .sp-nav__toggle::before,
    .sp-nav__toggle::after {
        background: currentColor;
        content: "";
        height: 2px;
        left: 50%;
        position: absolute;
        top: 50%;
        translate: -50% -50%;
        width: 1.15rem;
    }

    .sp-nav:not([open]) > .sp-nav__toggle::before {
        box-shadow: 0 -0.35rem 0 currentColor, 0 0.35rem 0 currentColor;
    }

    .sp-nav:not([open]) > .sp-nav__toggle::after {
        content: none;
    }

    .sp-nav[open] > .sp-nav__toggle::before {
        rotate: 45deg;
    }

    .sp-nav[open] > .sp-nav__toggle::after {
        rotate: -45deg;
    }

    .sp-nav > nav {
        background: var(--sp-color-surface);
        border: 1px solid var(--sp-color-border);
        border-radius: var(--sp-radius);
        box-shadow: var(--sp-shadow);
        min-width: 13rem;
        padding: 0.5rem 0;
        position: absolute;
        right: 0;
        top: calc(100% + 0.6rem);
        z-index: 110;
    }

    .sp-nav > nav ul,
    .sp-nav > nav .menu {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
    }

    .sp-nav > nav a {
        display: block;
        padding: 0.55rem 1.1rem;
    }

    /* Header senza il pattern hamburger: layout in colonna con riga scrollabile. */
    .sp-site-header__inner:not(:has(details.sp-nav)) {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .sp-site-header__inner:not(:has(details.sp-nav)) nav {
        max-width: 100%;
        overflow-x: auto;
    }

    .sp-site-header__inner:not(:has(details.sp-nav)) nav ul,
    .sp-site-header__inner:not(:has(details.sp-nav)) .menu {
        flex-wrap: nowrap;
        padding-block-end: 0.35rem;
        white-space: nowrap;
    }

    .sp-main {
        width: min(calc(100% - 1.25rem), var(--sp-shell-width));
    }
}

@media (max-width: 48rem) {
    .sp-article-collection--related .sp-article-collection__controls {
        display: none;
    }
}

@media (min-width: 64.01rem) {
    .sp-content-layout:has(.sp-toc-sidebar:not(:empty))
        > .sp-article-collection--related {
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .sp-site-header,
    .sp-site-footer,
    .sp-toc-sidebar,
    .sp-breadcrumb {
        display: none;
    }

    .sp-main,
    .sp-content-layout {
        display: block;
        max-width: none;
        width: 100%;
    }
}