/*
Theme Name: SEO Platform Minimal
Author: SEO Platform
Description: Tema editoriale accessibile e production-ready per siti gestiti da SEO Platform.
Version: 1.6.18
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;
    /* L'acqua delle mappe: nessun altro colore del tema la dice, e la convenzione è azzurra. */
    --sp-color-water: #d6e3ea;
    /* Il carattere dei testi di richiamo fuori dai titoli, come il motto della home. */
    --sp-font-display: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, serif;
    --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;
}

/* Consenso: il banner e la riga del footer scritti dal Connector.
 *
 * Il banner arriva nell'HTML con `hidden` e lo rivela solo lo stato che lo
 * script del Connector mette su <html> prima del primo paint: senza script
 * resta nascosto, e senza consenso GA non parte. È fisso in basso, quindi non
 * sposta il contenuto. Ogni selettore pesa una classe sola, contesto e stato
 * in :where(): cede a qualunque proiezione. I token --sp-consent-* sono la
 * leva del brand. */
.sp-consent {
    --sp-consent-surface: var(--sp-color-surface);
    --sp-consent-ink: var(--sp-color-ink);
    --sp-consent-border: var(--sp-color-border);
    --sp-consent-accent: var(--sp-color-accent-dark);
    --sp-consent-accent-ink: #ffffff;
    --sp-consent-radius: var(--sp-radius);
    display: none;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 0.75rem;
    pointer-events: none;
    position: fixed;
    z-index: 1000;
}

.sp-consent:where(:root[data-sp-consent="pending"] *) {
    display: block;
}

.sp-consent__inner {
    align-items: center;
    background: var(--sp-consent-surface);
    border: 1px solid var(--sp-consent-border);
    border-radius: var(--sp-consent-radius);
    box-shadow: var(--sp-shadow);
    color: var(--sp-consent-ink);
    display: grid;
    gap: 0.75rem 1.5rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-inline: auto;
    max-inline-size: 64rem;
    padding: 1rem 3.25rem 1rem 1.25rem;
    pointer-events: auto;
    position: relative;
}

.sp-consent__text {
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
}

.sp-consent__policy {
    color: inherit;
}

.sp-consent__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    justify-content: flex-end;
}

.sp-consent__accept,
.sp-consent__decline {
    border: 2px solid var(--sp-consent-accent);
    border-radius: calc(var(--sp-consent-radius) * 0.6);
    cursor: pointer;
    font-weight: 600;
    line-height: 1.2;
    min-block-size: 2.75rem;
    padding: 0.5rem 1.25rem;
}

.sp-consent__accept {
    background: var(--sp-consent-accent);
    color: var(--sp-consent-accent-ink);
    order: 2;
}

.sp-consent__decline {
    background: transparent;
    color: var(--sp-consent-accent);
    order: 1;
}

/* Rifiuto come link: stesso livello, area di tocco piena, contrasto del testo. */
.sp-consent__decline:where([data-sp-consent-decline="link"] *) {
    border-color: transparent;
    color: var(--sp-consent-ink);
    font-weight: 400;
    min-inline-size: 2.75rem;
    padding-inline: 0.5rem;
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.sp-consent__close {
    background: transparent;
    block-size: 2.75rem;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 1.5rem;
    inline-size: 2.75rem;
    inset-block-start: 0.25rem;
    inset-inline-end: 0.25rem;
    line-height: 1;
    padding: 0;
    position: absolute;
}

.sp-consent-links {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875rem;
    gap: 0.25rem 1.25rem;
    margin-block: 1rem 0;
}

.sp-consent-links__settings {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-weight: inherit;
    padding: 0;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

/* Senza script il pulsante non aprirebbe nulla. */
.sp-consent-links__settings:where(:root:not([data-sp-consent]) *) {
    display: none;
}

@media (max-width: 48rem) {
    .sp-consent {
        padding: 0.5rem;
    }

    .sp-consent__inner {
        gap: 0.75rem;
        grid-template-columns: minmax(0, 1fr);
        padding: 0.875rem 2.75rem 0.875rem 1rem;
    }

    .sp-consent__accept {
        flex: 1 1 auto;
    }
}

.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__author::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='8'%20r='4'/%3E%3Cpath%20d='M4.5%2020.5a7.5%207.5%200%200%201%2015%200'/%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='8'%20r='4'/%3E%3Cpath%20d='M4.5%2020.5a7.5%207.5%200%200%201%2015%200'/%3E%3C/svg%3E");
}

/* Chi pubblica sta su una riga sua, sopra data e tempo di lettura: la riga non si spezza a caso. */
.sp-article-meta__author {
    flex-basis: 100%;
}

/* Il nome di chi pubblica porta alla pagina che lo racconta: un link, nel tono della riga. */
.sp-article-meta__author a {
    color: inherit;
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.18em;
}

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

.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;
}

/* Liste di archivio e ricerca a righe: miniatura e titolo. Una card con foto ed estratto era alta
   400px su un telefono e se ne vedeva una e mezza; a righe se ne leggono sei. Tutta la riga è il
   bersaglio del tocco: il link del titolo si allarga alla card. Senza miniatura il titolo prende
   la riga intera. */
.sp-card-rows {
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
}

.sp-card:where(.sp-card-rows *) {
    align-items: center;
    background: none;
    border: 0;
    border-block-start: 1px solid var(--sp-color-border);
    border-radius: 0;
    box-shadow: none;
    column-gap: 0.875rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    padding-block: 0.75rem;
    position: relative;
}

.sp-card:where(.sp-card-rows *):where(:has(> .sp-card__image-link)) {
    grid-template-columns: 4.5rem minmax(0, 1fr);
}

.sp-card:where(.sp-card-rows *):hover {
    box-shadow: none;
    transform: none;
}

.sp-card__image-link:where(.sp-card-rows *) {
    border-radius: var(--sp-radius);
    overflow: hidden;
}

.sp-card__image:where(.sp-card-rows *) {
    aspect-ratio: 1;
    block-size: 4.5rem;
    inline-size: 4.5rem;
}

.sp-card__body:where(.sp-card-rows *) {
    padding: 0;
}

.sp-card__title:where(.sp-card-rows *) {
    font-size: 1.05rem;
    line-height: 1.3;
    margin: 0;
}

.sp-card__title:where(.sp-card-rows *) a::after {
    content: '';
    inset: 0;
    position: absolute;
}

.sp-card__excerpt:where(.sp-card-rows *) {
    display: none;
}

@media (min-width: 48rem) {
    .sp-card-rows {
        column-gap: 2rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-card:where(.sp-card-rows *):where(:has(> .sp-card__image-link)) {
        grid-template-columns: 6rem minmax(0, 1fr);
    }

    .sp-card__image:where(.sp-card-rows *) {
        block-size: 6rem;
        inline-size: 6rem;
    }

    .sp-card__title:where(.sp-card-rows *) {
        font-size: 1.1rem;
    }
}

.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--carousel .sp-article-collection__viewport:focus-visible,
.sp-article-collection--carousel .sp-article-collection__controls button:focus-visible {
    outline: 2px solid var(--sp-color-accent);
    outline-offset: 2px;
}

/* Ogni carosello si scorre senza barra: lo dicono l'anteprima della card successiva e le ombre. */
.sp-article-collection--carousel .sp-article-collection__viewport {
    scrollbar-width: none;
}

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

/* Il JavaScript nasconde controlli e link "altri" quando non servono: `hidden` vince sempre. */
.sp-article-collection__controls[hidden],
.sp-collection-more[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;
}

/* Su mobile un carosello mostra una card alla volta: l'estratto tagliato a tre righe allungava
   ogni carosello di 78px e aggiungeva poco a titoli già descrittivi. Su desktop resta. */
@media (max-width: 48rem) {
    .sp-card__excerpt:where(.sp-article-collection--carousel *) {
        display: none;
    }
}

/* Ombre di scorrimento: i bordi da cui si può ancora scorrere sfumano, e la sfumatura sparisce
   a fine corsa. Solo CSS, con una timeline di scroll: dove non è supportata resta l'anteprima
   della card successiva. Senza overflow la timeline è inattiva e non sfuma nulla. */
@property --sp-scroll-fade-start {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --sp-scroll-fade-end {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@keyframes sp-scroll-fade {
    0% {
        --sp-scroll-fade-start: 0px;
        --sp-scroll-fade-end: 2.5rem;
    }

    8%,
    92% {
        --sp-scroll-fade-start: 2.5rem;
        --sp-scroll-fade-end: 2.5rem;
    }

    100% {
        --sp-scroll-fade-start: 2.5rem;
        --sp-scroll-fade-end: 0px;
    }
}

@supports (animation-timeline: scroll()) {
    .sp-article-collection__viewport,
    .sp-term-map__chips {
        animation: sp-scroll-fade linear both;
        animation-timeline: scroll(self inline);
        mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 var(--sp-scroll-fade-start),
            #000 calc(100% - var(--sp-scroll-fade-end)),
            transparent 100%
        );
    }
}

/* Contenuto di categoria (mappa, chip, caroselli per figlio) stampato dal Connector. L'HTML è
   lo stesso su ogni schermo: qui si decide come si dispone. La mappa usa solo classi e i
   colori vengono dai token del tema, che la proiezione del sito ridefinisce. */
.sp-term-content {
    margin-block: 0 clamp(2rem, 5vw, 3rem);
}

/* Su mobile la mappa occupa tutta la larghezza dello schermo, come la riga dei chip. */
.sp-term-map__figure {
    margin: 0 calc(50% - 50vw) 1rem;
}

.sp-term-map__svg {
    block-size: auto;
    display: block;
    inline-size: 100%;
}

/* I link della mappa sono fuori dal tab: la navigazione accessibile sono i chip e l'elenco dei
   capitoli. Toccarli non deve disegnare il rettangolo di focus né l'evidenziazione del tocco
   attorno a tutta l'area; il segno di risposta è il colore dell'area o del punto. */
.sp-term-map__svg a {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.m-sea {
    fill: var(--sp-color-water);
}

.m-out,
.m-unit {
    fill: var(--sp-color-soft);
    stroke: var(--sp-color-surface);
    stroke-width: 0.6;
}

.m-unit--home {
    fill: var(--sp-color-surface);
    stroke: var(--sp-color-border);
}

/* La categoria ha la stessa tinta ovunque compaia: area figlia sulla mappa del padre, area della
   sua mappa, regione evidenziata nel locator delle sue città. */
.m-focus,
.m-child,
.m-locator-area {
    fill: color-mix(in srgb, var(--sp-color-accent) 24%, var(--sp-color-surface));
}

.m-focus {
    stroke: var(--sp-color-ink);
    stroke-width: 1.1;
}

.m-child {
    stroke: var(--sp-color-surface);
    stroke-width: 0.8;
    transition: fill 0.15s ease;
}

.m-child:where(:hover, :focus-visible) {
    fill: var(--sp-color-accent);
}

.m-outline {
    fill: none;
    stroke: var(--sp-color-muted);
    stroke-linejoin: round;
    stroke-width: 0.8;
}

.m-label {
    fill: var(--sp-color-muted);
    font-size: 6.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    opacity: 0.75;
    text-anchor: middle;
}

.m-grand {
    fill: var(--sp-color-muted);
    opacity: 0.75;
}

.m-leader {
    stroke: var(--sp-color-ink);
    stroke-width: 0.8;
}

.m-spot {
    fill: var(--sp-color-ink);
}

.m-pin {
    fill: var(--sp-color-accent);
    stroke: var(--sp-color-surface);
    stroke-width: 1.5;
}

.m-pin:where(:hover, :focus-visible) {
    fill: var(--sp-color-accent-dark);
}

.m-pin text {
    fill: var(--sp-color-surface);
    font-size: 10px;
    font-weight: 700;
    pointer-events: none;
    stroke: none;
    text-anchor: middle;
}

/* Figli col nome: una città è punto e nome, un'area ha il nome dentro. Il punto è dell'accento
   come i segnaposto numerati: rosso è ciò su cui si va. L'alone del colore di fondo stacca il
   testo da confini e aree colorate; l'allineamento arriva come classe. La dimensione del testo
   è la stessa che il generatore usa per le collisioni (``term_map.labels.FONT_PX``). */
.m-place circle {
    fill: var(--sp-color-accent);
    stroke: var(--sp-color-surface);
    stroke-width: 1.5;
}

.m-place text,
.m-name text {
    fill: var(--sp-color-ink);
    font-size: 10px;
    font-weight: 600;
    paint-order: stroke;
    stroke: var(--sp-color-surface);
    stroke-linejoin: round;
    stroke-width: 3px;
}

.m-align-start text {
    text-anchor: start;
}

.m-align-middle text {
    text-anchor: middle;
}

.m-align-end text {
    text-anchor: end;
}

.m-place:where(:hover, :focus-visible) circle {
    fill: var(--sp-color-accent-dark);
}

:where(.m-place, .m-name):where(:hover, :focus-visible) text {
    fill: var(--sp-color-accent-dark);
}

.m-inset rect {
    fill: var(--sp-color-water);
    stroke: var(--sp-color-muted);
    stroke-width: 0.8;
}

.m-locator-area {
    stroke: var(--sp-color-accent);
    stroke-width: 0.8;
}

.m-locator {
    fill: var(--sp-color-accent);
    stroke: var(--sp-color-surface);
    stroke-width: 1.5;
}

.m-locator-halo {
    fill: var(--sp-color-accent);
    opacity: 0.22;
}

/* La riga dei chip arriva ai bordi dello schermo qualunque sia il margine del contenitore, e il
   primo chip resta allineato al testo. Lo scarto si misura sul contenitore (``cqi``): in
   ``scroll-padding`` il ``%`` si riferirebbe alla riga stessa, larga quanto lo schermo, e lo
   snap partirebbe spostato, con il primo chip sfumato e incollato al bordo. */
.sp-term-map__nav {
    container-type: inline-size;
}

.sp-term-map__chips {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0 calc(50cqi - 50vw);
    overflow-x: auto;
    padding: 0.1rem calc(50vw - 50cqi) 0.4rem;
    scroll-padding-inline: calc(50vw - 50cqi);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.sp-term-map__chips::-webkit-scrollbar {
    display: none;
}

.sp-term-map__chips > li {
    flex: none;
    scroll-snap-align: start;
}

/* Il chip ha la tinta della categoria sulla mappa, così si riconosce come pulsante, e ripete il
   segno del figlio sulla mappa: i chip fanno da legenda. */
.sp-term-map__chip {
    align-items: center;
    background: color-mix(in srgb, var(--sp-color-accent) 24%, var(--sp-color-surface));
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--sp-color-ink);
    display: flex;
    font-size: 0.92rem;
    gap: 0.5rem;
    line-height: 1.2;
    min-block-size: 2.75rem;
    padding: 0.3rem 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.sp-term-map__chip:where(:has(.sp-term-map__sign)) {
    padding-inline-start: 0.4rem;
}

.sp-term-map__chip:where(:hover, :focus-visible) {
    border-color: var(--sp-color-accent);
}

/* Due segni con lo stesso ingombro, perché i nomi restino allineati: il numero e il punto di un
   luogo. Un'area col nome scritto sulla mappa non ne ha. */
.sp-term-map__sign {
    background: var(--sp-color-surface);
    border-radius: 50%;
    display: inline-grid;
    flex: none;
    block-size: 1.6rem;
    inline-size: 1.6rem;
    place-items: center;
}

.sp-term-map__sign--number {
    background: var(--sp-color-accent);
    color: var(--sp-color-surface);
    font-size: 0.76rem;
    font-weight: 700;
}

.sp-term-map__sign--place::before {
    content: "";
}

/* Il punto rosso della città sulla mappa. */
.sp-term-map__sign--place::before {
    background: var(--sp-color-accent);
    border-radius: 50%;
    block-size: 0.55rem;
    inline-size: 0.55rem;
}

/* Intestazione del figlio e pulsanti del carosello sulla stessa riga: il carosello si scioglie
   nella griglia del gruppo (display: contents) senza cambiare il markup. */
.sp-term-group {
    align-items: end;
    column-gap: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-block-start: clamp(2rem, 5vw, 3rem);
}

.sp-term-group > .sp-article-collection {
    display: contents;
}

.sp-term-group > .sp-article-collection > :not(.sp-article-collection__controls) {
    grid-column: 1 / -1;
}

.sp-term-group .sp-article-collection__controls {
    margin-block-end: 0.9rem;
}

/* Intestazione e titolo sono quelli dei caroselli (sp-article-collection__header/__title):
   qui solo il link al figlio, senza segni, lontano dalla mappa. */
.sp-term-group__title :where(a) {
    color: inherit;
    text-decoration: none;
}

/* Città: sotto i 48rem il locator segue l'intro, basso e centrato; affiancato, in una colonna da
   7.5rem, l'intro andava su 8 righe da 30 caratteri. Da 48rem i due si affiancano. */
.sp-term-locator {
    margin: 0;
}

.sp-term-locator .sp-term-map__svg {
    block-size: 9rem;
    inline-size: auto;
    margin-inline: auto;
    max-block-size: none;
    max-inline-size: 100%;
}

.sp-term-locator figcaption {
    color: var(--sp-color-muted);
    font-size: 0.72rem;
    margin-block-start: 0.3rem;
    text-align: center;
}

@media (min-width: 48.01rem) {
    .sp-term-map__figure {
        margin: 0 0 1rem;
    }

    .sp-term-map__svg {
        block-size: min(34rem, 62vh);
        border-radius: calc(var(--sp-radius) / 2);
        inline-size: auto;
        max-inline-size: 100%;
    }

    /* Intro e locator sulla stessa riga. L'intro è la descrizione del termine, un blocco a sé:
       la griglia li affianca solo quando il locator c'è. */
    .sp-main:has(.sp-term-locator) {
        column-gap: 2rem;
        display: grid;
        grid-auto-flow: row dense;
        grid-template-columns: minmax(0, 1fr) 12rem;
    }

    .sp-main:has(.sp-term-locator) > * {
        grid-column: 1 / -1;
    }

    .sp-main:has(.sp-term-locator) > :where(.wp-block-term-description) {
        grid-column: 1;
    }

    /* Il contenuto della categoria porta il locator e il titolo dell'elenco: si scioglie nella
       griglia, così il locator sta nella colonna stretta e il titolo prende la riga intera. */
    .sp-main:has(.sp-term-locator) > :where(.sp-term-content) {
        display: contents;
    }

    .sp-term-locator {
        grid-column: 2;
    }

    /* Tutto il resto del contenuto prende la riga intera: il titolo dell'elenco, o la legenda e
       le sezioni degli argomenti. */
    :where(.sp-main:has(.sp-term-locator) > .sp-term-content > *):not(.sp-term-locator) {
        grid-column: 1 / -1;
    }

    /* Le pillole degli argomenti stanno sotto l'intro, accanto al locator, che scende su due
       righe: senza, fra intro e pillole restava il vuoto dell'altezza della mappa. */
    .sp-term-topics:where(.sp-main:has(.sp-term-locator) > .sp-term-content > *) {
        align-self: start;
        grid-column: 1;
        margin-block-start: 1.5rem;
    }

    .sp-term-locator:where(.sp-term-content:has(> .sp-term-topics) > *) {
        grid-row: span 2;
    }

    /* La mini-mappa sta nella sua colonna: con l'altezza delle mappe grandi era un riquadro da
       544px per un disegno di 190, e lasciava un vuoto sotto l'intro. */
    .sp-term-locator .sp-term-map__svg {
        block-size: auto;
        inline-size: 100%;
        margin-inline: 0;
    }

    /* Sotto la mappa i chip sono una legenda a pulsanti che va a capo, non una riga che scorre. */
    .sp-term-map__chips {
        animation: none;
        flex-wrap: wrap;
        margin: 0;
        mask-image: none;
        overflow: visible;
        padding: 0;
    }

    .sp-term-map__chip {
        font-size: 0.95rem;
        min-block-size: 2.5rem;
        padding-inline-end: 1rem;
    }
}

/* Pagine a capitoli: un'area del mondo coi suoi Paesi, la home con le sue aree.
   Scala dei titoli: H1 della pagina > titolo del capitolo > titoli dei caroselli. Colori: solo i
   token del tema e la tinta della categoria, come mappe e chip. */
.sp-chapters {
    margin-block-start: clamp(2.5rem, 7vw, 4.5rem);
}

.sp-chapter {
    margin-block-end: clamp(3rem, 8vw, 5.5rem);
    scroll-margin-block-start: 1rem;
}

.sp-chapter__title {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    line-height: 1.05;
    margin: 0 0 0.9rem;
}

.sp-chapter__title :where(a) {
    color: inherit;
    text-decoration: none;
}

.sp-chapter__title :where(a:hover, a:focus-visible) {
    color: var(--sp-color-accent-dark);
}

/* Su mobile la mappa del capitolo arriva subito dopo il titolo, a tutta larghezza. */
.sp-chapter__map {
    margin: 0 calc(50% - 50vw) 1rem;
}

.sp-chapter__map .sp-term-map__svg {
    block-size: auto;
    display: block;
    inline-size: 100%;
}

/* I luoghi del capitolo sono la legenda a pillole: sotto, il teaser. */
.sp-chapter__text > .sp-term-map__nav {
    margin-block-end: 0.9rem;
}

.sp-chapter__teaser {
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 1rem;
    max-inline-size: 42ch;
}

.sp-chapter__cta {
    margin: 0;
}

.sp-chapter > .sp-article-collection {
    margin-block-start: 1.5rem;
}

.sp-chapters__more {
    margin: 0 0 clamp(2rem, 5vw, 3rem);
    text-align: center;
}

/* Pagine elenco, dalla home alla città: un solo link d'azione, un solo pulsante per caricarne
   altri, un solo titolo per l'elenco completo. */

/* «Explore Italy →», «See all →»: colore e sottolineatura dei link, bersaglio da 44px. */
.sp-action-link {
    align-items: center;
    color: var(--sp-color-accent-dark);
    display: inline-flex;
    font-weight: 600;
    gap: 0.35rem;
    min-block-size: 2.75rem;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
    white-space: nowrap;
}

.sp-action-link:where(:hover, :focus-visible) {
    color: var(--sp-color-accent);
}

/* «Load more» di elenchi, capitoli e raccolte: la pillola piena, centrata dal contenitore. */
.sp-load-more {
    align-items: center;
    background: color-mix(in srgb, var(--sp-color-accent) 24%, var(--sp-color-surface));
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--sp-color-ink);
    display: inline-flex;
    font-weight: 600;
    min-block-size: 2.75rem;
    padding: 0.3rem 1.25rem;
    text-decoration: none;
}

.sp-load-more:where(:hover, :focus-visible) {
    border-color: var(--sp-color-accent);
}

/* Il titolo dell'elenco completo, sotto caroselli o locator, e quello di ogni argomento. */
.sp-term-latest {
    margin-block: clamp(2.5rem, 6vw, 4rem) 0.5rem;
}

/* Una sezione per argomento nella città, raggiunta dalla sua pillola: il titolo non finisce
   sotto l'header fisso. */
.sp-term-topic {
    scroll-margin-block-start: 5rem;
}

/* Nella home la legenda sta nel contenuto della pagina, dove `li + li` prende un margine: in una
   riga di pillole le sfalserebbe. */
.sp-term-map__chips > li + li {
    margin-block-start: 0;
}

@media (min-width: 48.01rem) {
    /* Testo e mappa affiancati, alternati da un capitolo all'altro; gli articoli sotto. */
    .sp-chapter {
        column-gap: clamp(2rem, 4vw, 3.5rem);
        display: grid;
        grid-template-areas:
            "title map"
            "text map"
            "articles articles";
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        grid-template-rows: auto 1fr auto;
    }

    .sp-chapter:nth-child(even) {
        grid-template-areas:
            "map title"
            "map text"
            "articles articles";
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    .sp-chapter__title {
        align-self: end;
        grid-area: title;
    }

    .sp-chapter__map {
        align-self: center;
        grid-area: map;
        margin: 0;
    }

    .sp-chapter__map .sp-term-map__svg {
        border-radius: calc(var(--sp-radius) / 2);
        max-block-size: 34rem;
    }

    .sp-chapter__text {
        grid-area: text;
    }

    .sp-chapter > .sp-article-collection {
        grid-area: articles;
    }
}

/* Home: dopo la presentazione i capitoli delle aree. La presentazione sta sull'asse del titolo,
   non centrata come il corpo delle pagine: il layout "constrained" del blocco la centrerebbe con
   `margin: auto !important`. */
.home .sp-content-layout .wp-block-post-content > * {
    margin-inline-start: 0 !important;
}

/* In home il titolo è il nome del sito, già nel logo subito sopra: resta per i motori di
   ricerca e gli screen reader, ma non si vede. Apre la pagina la presentazione. */
.home .sp-main > .wp-block-post-title {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

/* Apertura della home: una fascia a tutta larghezza con motto e ricerca a sinistra e
   l'illustrazione a destra, nel contenuto della pagina; la ricerca la scrive il Connector in un
   segnaposto. Su desktop l'immagine è alta quanto la fascia e il bordo sinistro sfuma nella
   carta; su mobile se ne vede il quadrato di destra, in alto, il motto ci si appoggia sopra con
   un alone del colore della fascia e la ricerca scende sotto il disegno. In home la ricerca
   dell'header c'è già nell'apertura. */
body:has(.sp-home-opening__search .sp-site-search) .sp-site-header .sp-search-panel {
    display: none;
}

.sp-main:has(.sp-home-opening) {
    padding-block-start: 0;
}

.sp-content-layout:has(.sp-home-opening) {
    grid-template-columns: minmax(0, 1fr);
}

.home .sp-content-layout .wp-block-post-content > .sp-home-opening {
    margin-block: 0 !important;
    margin-inline: calc(50% - 50vw) !important;
    max-inline-size: none;
}

.sp-home-opening {
    align-items: center;
    background: var(--sp-color-soft);
    border-block-end: 1px solid var(--sp-color-border);
    display: flex;
    min-block-size: clamp(24rem, 38vw, 33rem);
    overflow: hidden;
    padding-inline: max(1rem, calc(50vw - var(--sp-shell-width) / 2));
    position: relative;
}

.sp-home-opening__image {
    block-size: 100%;
    inline-size: auto;
    inset-block: 0;
    inset-inline-end: max(0px, calc(50vw - var(--sp-shell-width) / 2 - 6.25rem));
    -webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
    mask-image: linear-gradient(to right, transparent, #000 22%);
    max-inline-size: none;
    position: absolute;
}

.sp-home-opening__text {
    inline-size: min(32rem, 45%);
    position: relative;
}

.sp-home-opening .sp-home-opening__motto {
    color: var(--sp-color-ink);
    font-family: var(--sp-font-display);
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.08;
    margin: 0 0 1.4rem;
    max-inline-size: none;
    text-wrap: balance;
}

.sp-home-opening__motto strong {
    font-weight: 700;
}

.sp-home-opening__motto em {
    color: var(--sp-color-accent-dark);
    display: block;
}

.sp-home-opening__search {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
}

.sp-home-opening__search .sp-site-search {
    box-shadow: 0 2px 10px color-mix(in srgb, var(--sp-color-ink) 7%, transparent);
    flex: 1 1 16rem;
    padding-inline-start: 1.25rem;
}

.sp-home-opening__search .sp-site-search__input {
    font-size: 1.05rem;
    padding-block: 0.85rem;
}

.sp-home-opening__surprise {
    color: var(--sp-color-accent-dark);
    font-size: 0.95rem;
    font-weight: 600;
}

@media (max-width: 48rem) {
    .sp-home-opening {
        align-items: flex-start;
        min-block-size: 15rem;
        padding-block: 1.5rem;
    }

    .sp-home-opening__image {
        aspect-ratio: 1;
        block-size: auto;
        inline-size: 13.75rem;
        inset: 0.5rem -1.25rem auto auto;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 12%),
            linear-gradient(to top, transparent, #000 12%);
        mask-image: linear-gradient(to right, transparent, #000 12%),
            linear-gradient(to top, transparent, #000 12%);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
        object-fit: cover;
        object-position: right top;
    }

    .sp-home-opening__text {
        inline-size: auto;
    }

    /* Il motto occupa l'altezza del disegno, così la ricerca comincia sotto. */
    .sp-home-opening .sp-home-opening__motto {
        font-size: 2.15rem;
        margin-block-end: 0.75rem;
        max-inline-size: 11ch;
        min-block-size: 12.25rem;
        text-shadow: 0 0 0.5rem var(--sp-color-soft), 0 0 0.5rem var(--sp-color-soft),
            0 0 0.2rem var(--sp-color-soft);
    }

    .sp-home-opening__motto em {
        display: inline;
    }

    .sp-home-opening__search {
        row-gap: 0.5rem;
    }
}

/* Ricerca nell'header, in ogni pagina, con «Surprise me» accanto. Il campo e la lente stanno
   dentro la pillola, quindi si annullano bordo, sfondo e misure che il tema dà a ogni campo e
   pulsante. Su desktop tutto è in linea; su mobile resta la lente (vedi sotto). */
.sp-site-header__inner {
    position: relative;
}

.sp-search-panel {
    align-items: center;
    display: flex;
    flex: 0 1 30rem;
    justify-content: flex-end;
    min-inline-size: 0;
}

.sp-search-panel__toggle {
    display: none;
}

.sp-search-panel__body {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 1.25rem;
    justify-content: flex-end;
    min-inline-size: 0;
}

.sp-site-search {
    align-items: center;
    background: var(--sp-color-surface);
    border: 1px solid var(--sp-color-border);
    border-radius: 999px;
    display: flex;
    flex: 0 1 18rem;
    min-inline-size: 0;
    padding-inline-start: 1rem;
}

.sp-site-search:focus-within {
    border-color: var(--sp-color-accent);
}

.sp-site-search .sp-site-search__input {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--sp-color-ink);
    flex: 1;
    font: inherit;
    font-size: 0.95rem;
    min-block-size: 0;
    min-inline-size: 0;
    outline: none;
    padding: 0.55rem 0;
}

.sp-site-search .sp-site-search__input::placeholder {
    color: var(--sp-color-muted);
}

.sp-site-search .sp-site-search__button,
.sp-search-panel__toggle {
    background: transparent;
    block-size: 2.5rem;
    border: 0;
    border-radius: 999px;
    color: var(--sp-color-ink);
    cursor: pointer;
    flex: none;
    inline-size: 2.5rem;
    padding: 0;
    place-items: center;
}

.sp-site-search .sp-site-search__button {
    display: grid;
}

.sp-site-search .sp-site-search__button:where(:hover, :focus-visible),
.sp-search-panel__toggle:hover {
    background: transparent;
    color: var(--sp-color-accent-dark);
}

:where(.sp-search-panel__toggle, .sp-site-search__button) svg {
    block-size: 1.2rem;
    fill: none;
    inline-size: 1.2rem;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-width: 2.2;
}

.sp-search-panel__surprise {
    color: var(--sp-color-accent-dark);
    flex: none;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Su mobile si vede solo la lente, che è l'etichetta del campo: toccarla dà il focus al campo e
   il pannello con campo e «Surprise me» si apre sotto l'header. Resta aperto finché il focus è
   dentro (anche sul link), si chiude toccando fuori. Il pannello chiuso è solo trasparente, non
   nascosto: un campo nascosto non potrebbe prendere il focus. */
@media (max-width: 48rem) {
    .sp-search-panel {
        flex: none;
    }

    .sp-search-panel__toggle {
        display: grid;
    }

    .sp-search-panel__body {
        background: var(--sp-color-surface);
        border: 1px solid var(--sp-color-border);
        border-radius: var(--sp-radius);
        box-shadow: var(--sp-shadow);
        flex-wrap: wrap;
        gap: 0.75rem 1.25rem;
        inset-block-start: calc(100% + 0.25rem);
        /* Quasi tutto lo schermo: dal contenitore dell'header ai bordi, meno un filo. */
        inset-inline: calc((100% - 100vw) / 2 + 0.375rem);
        justify-content: flex-start;
        opacity: 0;
        padding: 1rem;
        pointer-events: none;
        position: absolute;
        z-index: 20;
    }

    .sp-search-panel:focus-within .sp-search-panel__body {
        opacity: 1;
        pointer-events: auto;
    }

    .sp-search-panel:focus-within .sp-search-panel__toggle {
        color: var(--sp-color-accent-dark);
    }

    .sp-site-search {
        flex: 1 1 100%;
    }

    .sp-site-search .sp-site-search__input {
        font-size: 1rem;
    }
}

.sp-home-latest {
    margin-block-start: clamp(2rem, 5vw, 3rem);
}

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

/* Il Connector mette «Load more» sotto la paginazione: col JavaScript prende il suo posto, e
   `hidden` deve vincere sul layout flex che WordPress dà alla paginazione. */
.wp-block-query-pagination[hidden] {
    display: none;
}

.sp-archive-more {
    margin-block: 2rem 0;
    text-align: center;
}

.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) {
    /* Su mobile l'header non resta in cima, ma resta sopra il contenuto: il pannello di ricerca
       che si apre sotto di lui non deve finire dietro l'immagine d'apertura. Non essendo fisso,
       non va spostato sotto la barra di amministrazione: `top` lo abbasserebbe di tanto. */
    .sp-site-header,
    .admin-bar .sp-site-header {
        position: relative;
        top: 0;
    }

    .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 con un menu ma senza il pattern hamburger: layout in colonna con riga scrollabile.
       Senza menu logo e ricerca restano sulla stessa riga. */
    .sp-site-header__inner:has(> nav):not(:has(details.sp-nav)) {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

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

    .sp-site-header__inner:has(> nav):not(:has(details.sp-nav)) nav ul,
    .sp-site-header__inner:has(> nav):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));
    }
}

/* Su mobile ogni carosello si scorre col dito: i pulsanti servono solo con mouse e tastiera. */
@media (max-width: 48rem) {
    .sp-article-collection--carousel .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-consent,
    .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%;
    }
}