/* Studio in Puglia — foglio di stile unico, scritto da zero sul modello del tema "signflow" con
   Hybrid Composer. Le misure vengono dalla copia ricomposta (tools/serialize.js) a 1440, 1024, 800
   e 390 px. Punti di rottura del tema: 993 px (menu orizzontale, contenitore 970 px, spaziature
   piene), 1200 px (contenitore 1170 px) e 768 px (alcune differenze tra telefono e tablet).

   1 font · 2 variabili · 3 base · 4 layout · 5 header e menu · 6 hero · 7 componenti
   8 footer · 9 utilità · 10 accessibilità */

/* 1. Font: Roboto in locale (un solo file variabile per sottoinsieme di caratteri). Come su Google
   Fonts i pesi sono dichiarati uno per uno: un testo a 600 usa la faccia 700, come nell'originale. */
@font-face { font-family: Roboto; font-weight: 100; font-display: swap; src: url("../fonts/roboto-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-weight: 300; font-display: swap; src: url("../fonts/roboto-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-weight: 400; font-display: swap; src: url("../fonts/roboto-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-weight: 500; font-display: swap; src: url("../fonts/roboto-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-weight: 700; font-display: swap; src: url("../fonts/roboto-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-weight: 900; font-display: swap; src: url("../fonts/roboto-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-weight: 100; font-display: swap; src: url("../fonts/roboto-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Roboto; font-weight: 300; font-display: swap; src: url("../fonts/roboto-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Roboto; font-weight: 400; font-display: swap; src: url("../fonts/roboto-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Roboto; font-weight: 500; font-display: swap; src: url("../fonts/roboto-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Roboto; font-weight: 700; font-display: swap; src: url("../fonts/roboto-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Roboto; font-weight: 900; font-display: swap; src: url("../fonts/roboto-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 2. Variabili. --sp e --mt sommano lo spazio prima di un blocco (vedi .stack): non si ereditano,
   così un blocco annidato non riceve per sbaglio lo spazio del genitore. */
@property --sp { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --mt { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --mb { syntax: "<length>"; inherits: false; initial-value: 0px; }

:root {
  --blue: #0776df;
  --blue-dark: #025b9f;
  --box: #f4f9fe;
  --text: #4c4c4c;
  --muted: #696969;
  --nav: #444;
  --nav-sub: #525252;
  --line: #dadada;
  --footer-bg: #f5f5f5;
  --footer-text: #4d5363;
  --caret: rgba(93, 93, 93, 0.5);
  --font: Roboto, Helvetica, Arial, sans-serif;
  --section-y: 50px;
  --space-xs: 8px;
  --space-s: 10px;
  --space-m: 20px;
}
@media (min-width: 993px) {
  :root { --section-y: 80px; --space-xs: 10px; --space-s: 20px; --space-m: 30px; }
}

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--text); font: 400 15px/27px var(--font); }
img, svg, video { max-width: 100%; }
img { height: auto; vertical-align: middle; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
h1, .h1 { font-size: 60px; font-weight: 100; line-height: 75px; }
h2, .h2 { font-size: 50px; font-weight: 100; line-height: 60px; }
h3, .h3 { font-size: 36px; font-weight: 400; line-height: 40px; }
h4, .h4 { font-size: 24px; font-weight: 600; line-height: 35px; }
h5, .h5 { font-size: 14px; font-weight: 400; line-height: 15.4px; }
h6, .h6 { color: var(--blue); font-size: 12px; font-weight: 400; line-height: 13.2px; }
b, strong { font-weight: 700; }
a { color: var(--muted); }
.icon { width: auto; height: 1em; fill: currentColor; vertical-align: -0.125em; }
@media (max-width: 992px) {
  h1, .h1 { font-size: 38px; line-height: 55px; }
  h2, .h2 { font-size: 33px; }
  h3, .h3 { line-height: 27px; }
}

/* 4. Layout. .container è largo come quello di Bootstrap 3 nel tema: fluido sotto i 993 px. */
.container { width: 100%; margin-inline: auto; padding-inline: 15px; }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
.section { padding-block: var(--section-y); }
.section--flush { padding-block: 0; }
/* sezione su fondo chiaro (boxed-inverse): 25 px di margine interno in più, 50 sopra i 993 px */
.section--boxed { padding: calc(var(--section-y) + 25px) 25px; background: var(--box); }

/* Blocchi in colonna: gli spazi verticali si sommano (niente fusione dei margini), come tra le
   colonne flottanti di Hybrid Composer. --sp = spazio del separatore che precedeva il blocco
   nell'originale (.sp-xs, .sp-s, .sp-m), --mt / --mb = margini propri del componente. */
.stack, .flow { display: flex; flex-direction: column; }
.stack > *, .flow > * { margin-block: calc(var(--mt) + var(--sp)) var(--mb); }
.sp-xs { --sp: var(--space-xs); }
.sp-s { --sp: var(--space-s); }
.sp-m { --sp: var(--space-m); }
/* al posto di un blocco di testo vuoto dopo un titolo (20 px sopra, 1 px di altezza minima, 3 px
   sotto, più i 5 + 5 px della sua colonna sotto i 993 px) seguito da un separatore xs */
.sp-empty { --sp: 36px; }
@media (min-width: 768px) {
  .sp-empty { --sp: 41px; }
}
@media (min-width: 993px) {
  .sp-empty { --sp: 34px; }
}
.mb-s { --mb: var(--space-s); }
.mb-m { --mb: var(--space-m); }
/* Sotto i 993 px ogni colonna del tema ha 5 px sopra e sotto (.col è la colonna esterna, i figli
   di .stack i componenti, uno .stack dentro uno .stack una colonna annidata); sotto i 768 px le
   colonne dopo la prima hanno altri 15 px sopra, e un separatore (.sp-*) contava come colonna
   precedente. .flow è una colonna di blocchi senza queste aggiunte (per esempio in una fisarmonica). */
@media (max-width: 992px) {
  .col { padding-block: 5px; }
  .stack > * { margin-block: calc(var(--mt) + var(--sp) + 5px) calc(var(--mb) + 5px); }
}
@media (max-width: 767px) {
  .stack > * + *, .stack > :is(.sp-xs, .sp-s, .sp-m, .sp-empty) { margin-top: calc(var(--mt) + var(--sp) + 20px); }
  /* i 3 px sotto un testo e i 5 px sotto un riquadro si fondevano con i 15 px sopra la colonna
     seguente, ma non con un separatore, che non aveva margini */
  .stack > .text:has(+ :not(.sp-xs, .sp-s, .sp-m, .sp-empty)) { --mb: 0px; }
  .stack > .box:has(+ :not(.sp-xs, .sp-s, .sp-m, .sp-empty)) { --mb: -5px; }
}

/* Griglia a due colonne (la "grid table" dell'originale). Sopra i 993 px le righe distano 50 px
   e i riquadri sono spostati di 40 px a destra (sporgono di 10 px), come nella pagina originale;
   sotto, le celle vanno in colonna con i riquadri rientrati di 15 px. */
.grid { display: grid; gap: 30px; padding-block: 15px; text-align: center; }
.stack > .grid { --mt: -15px; --mb: -15px; }
.grid > * { margin: 5px 15px; }
/* cella vuota dell'ultima riga: in colonna aggiunge lo spazio della cella vuota originale */
.grid > .grid__empty { margin: 0; }
@media (min-width: 993px) {
  .grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 50px 80px; padding: 0; margin-inline: 40px -10px; }
  .stack > .grid { --mt: 0px; --mb: 0px; }
  .grid > * { margin: 0; }
}

/* 5. Header e menu */
.site-header { position: relative; z-index: 100; background: #fff; line-height: 1.42857143; }
.site-header__bar { display: flex; flex-wrap: wrap; align-items: flex-start; }
.brand { display: block; flex: none; padding: 15px; margin: 0 5px 0 -15px; }
.brand img { display: block; width: auto; height: 40px; }
.nav-toggle {
  margin: 8px 0 8px auto; padding: 14px 8px 8px; border: 0; border-radius: 4px; background: none;
  color: var(--text); font-size: 25px; line-height: 23px; cursor: pointer;
}
.nav-toggle .icon { display: block; vertical-align: 0; }
.nav { flex: 1 0 100%; margin-inline: -15px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.13); border-top: 1px solid #e7e7e7; }
.nav:not(.is-open) { display: none; }
.nav__list, .nav__sub { list-style: none; padding: 0; }
.nav__list { padding: 10px 15px 0; margin-bottom: 7.5px; }
.nav__link {
  display: block; width: 100%; padding: 10px 15px; border: 0; background: none; color: var(--nav);
  font: 500 14px/20px var(--font); text-align: left; text-decoration: none; cursor: pointer;
}
.nav__link[aria-expanded] { position: relative; padding-right: 30px; }
.nav__link[aria-expanded="true"], .nav__link:hover { color: var(--blue); }
/* freccia: quadratino di 6 px con due lati, ruotato verso il basso, 9 px dopo il testo */
.nav__link[aria-expanded]::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-top: 2px solid var(--caret); border-right: 2px solid var(--caret); transform: rotate(135deg);
}
.nav__sub { display: none; padding-top: 10px; }
.nav__link[aria-expanded="true"] + .nav__sub { display: block; }
.nav__sub .nav__link { padding: 10px 20px 0; color: var(--nav-sub); font-size: 15px; font-weight: 400; line-height: 20px; }
.nav__sub .nav__link[aria-expanded="true"], .nav__sub .nav__link:hover { color: var(--blue); }

@media (min-width: 993px) {
  .site-header { position: sticky; top: 0; }
  .brand { margin-right: 15px; }
  .nav-toggle { display: none; }
  .nav, .nav:not(.is-open) { display: block; flex: 0 1 auto; margin: 0; box-shadow: none; border: 0; }
  .nav__list { display: flex; flex-wrap: wrap; padding: 0; margin: 0; }
  .nav__item { position: relative; }
  .nav__list > .nav__item > .nav__link[aria-expanded] { padding-right: 30px; }
  .nav__list > .nav__item:hover > .nav__link, .nav__list > .nav__item > .nav__link[aria-expanded="true"] {
    background: #fdfdfd; color: var(--nav);
  }
  .nav__sub {
    position: absolute; top: 100%; left: 0; z-index: 10; min-width: 160px; margin-top: -11px; padding: 10px 0;
    background: #fff; border-radius: 6px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.33); white-space: nowrap;
  }
  .nav__sub .nav__sub { top: -12px; left: 100%; margin-top: 0; }
  .nav__item:hover > .nav__sub { display: block; }
  .nav__sub .nav__link { padding: 10px 20px; line-height: 21.43px; }
  .nav__sub .nav__link[aria-expanded] { padding-right: 40px; }
  .nav__sub .nav__link[aria-expanded]::after { right: 15px; transform: rotate(45deg); }
}
@media (min-width: 993px) {
  .nav__list > .nav__item > .nav__link { padding-block: 25px; }
}

/* 6. Hero: foto di sfondo con il titolo in un riquadro chiaro. La taglia del titolo è quella del
   livello originale (.h1, .h2) o .text-xxl. Senza titolo resta una fascia di foto. */
.hero { position: relative; overflow: hidden; padding-block: 50px; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .container { position: relative; }
.hero__title { margin-block: 15px; padding: 25px; background: var(--box); color: var(--blue-dark); font-weight: 500; }
.hero__heading { margin-block: 15px; }
/* i titoli h1 della hero stavano 5 px più in alto */
.hero :is(.hero__title, .hero__heading).h1 { position: relative; top: -5px; }
.hero--empty { padding-block: 0; height: 161px; }
.hero--slider { padding-block: 0; height: 231px; margin-bottom: 33px; }
@media (min-width: 768px) {
  .hero__title { width: calc(50% - 15px); }
}
@media (min-width: 993px) {
  .hero { padding-block: 80px; }
  .hero__title { width: auto; margin-block: 0; padding: 50px; border-radius: 6px; }
  .hero__heading { margin-block: 0; }
  .section--boxed { padding: calc(var(--section-y) + 50px) 50px; }
}

/* 7. Componenti */
/* riquadro chiaro: .box su una colonna (sporge di 50 px a destra se è a tutta larghezza, come
   nell'originale), .boxed su un singolo elemento */
.box, .boxed { padding: 25px; background: var(--box); }
@media (max-width: 767px) {
  .stack > .box { --mt: -5px; }
}
@media (min-width: 993px) {
  .box, .boxed { padding: 50px; border-radius: 6px; }
  .stack > .box:not([class*="span-"]) { margin-right: -50px; }
}
.shadow { box-shadow: 0 2px 15px rgba(0, 0, 0, 0.13); }

/* colonne affiancate (.cols, sopra i 993 px: griglia di 12 con 80 px tra le colonne, come Bootstrap
   con le spaziature del tema); sotto i 993 px vanno una sotto l'altra come .stack */
@media (min-width: 993px) {
  .cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 80px; align-items: start; }
  .cols > * { grid-column: span 12; }
  .cols > .span-3 { grid-column: span 3; }
  .cols > .span-4 { grid-column: span 4; }
  .cols > .span-5 { grid-column: span 5; }
  .cols > .span-6 { grid-column: span 6; }
  .cols > .span-7 { grid-column: span 7; }
  .cols > .span-8 { grid-column: span 8; }
  .cols > .span-9 { grid-column: span 9; }
  .cols > .span-10 { grid-column: span 10; }
  /* colonna centrata: larga N dodicesimi del contenitore (margini interni compresi), meno i 40 px per lato */
  .cols > .col-center { grid-column: 1 / -1; justify-self: center; width: calc(var(--span) / 12 * (100% + 80px) - 80px); }
  /* nelle righe "box-middle" la riga non ha i margini negativi: si conta sui 30 px del contenitore */
  .cols--middle > .col-center { width: calc(var(--span) / 12 * (100% + 30px) - 80px); }
  /* con l'ombra la colonna comprende i suoi 40 + 40 px di margine interno; un riquadro centrato ha 25 px */
  .cols > .col-center.shadow { width: calc(var(--span) / 12 * (100% + 80px)); margin-inline: 0; }
  .cols > .box.col-center { padding-inline: 25px; }
  /* l'ombra copre anche i 40 px di margine interno della colonna */
  .cols > .shadow { margin-inline: -40px; padding-inline: 40px; }
}
/* --span: larghezza sopra i 993 px; --tspan: tra 768 e 992 px, dove il tema porta le colonne 3, 6 e 9
   a metà, la 4 a un terzo, la 8 a due terzi e tutte le altre a tutta larghezza */
.cols > * { --tspan: 12; }
.span-3 { --span: 3; --tspan: 6; }
.span-4 { --span: 4; --tspan: 4; }
.span-5 { --span: 5; }
.span-6 { --span: 6; --tspan: 6; }
.span-7 { --span: 7; }
.span-8 { --span: 8; --tspan: 8; }
.span-9 { --span: 9; --tspan: 6; }
.span-10 { --span: 10; }
.cols > .span-sm-12 { --tspan: 12; }
@media (min-width: 768px) and (max-width: 992px) {
  .cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 30px; align-items: start; }
  .cols > * { grid-column: span var(--tspan); }
  .cols > .col-center { grid-column: 1 / -1; justify-self: center; width: calc(var(--tspan) / 12 * (100% + 30px) - 30px); }
}
/* colonne di Bootstrap nascoste tra 768 e 991 px (visible-xs, nel tema, non nasconde nulla) */
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm { display: none !important; }
}

/* separatori dell'originale (hr.space): altezza fissa, nessun margine di colonna */
.space { height: 35px; }
.space--xs { height: 8px; }
.space--s { height: 10px; }
.space--m { height: 20px; }
.space--l { height: 50px; }
@media (min-width: 993px) {
  .space { height: 70px; }
  .space--xs { height: 10px; }
  .space--s { height: 20px; }
  .space--m { height: 30px; }
}
.stack > .space, .flow > .space { margin: 0; }
.sep { --mt: 20px; --mb: 20px; height: 0; margin-inline: 0; border: 0; border-top: 1px solid #d6d6d6; }

/* blocco di testo di Hybrid Composer: spaziatura delle lettere e 3 px sotto. Come nel tema, dai
   768 px in su un testo subito dopo un titolo e un pulsante subito dopo un testo hanno 20 px sopra. */
.text { --mb: 3px; letter-spacing: 0.5px; }
.text a, .editor a { text-decoration: underline; }
/* paragrafi dell'originale (senza classi): nel tema hanno spaziatura delle lettere e 3 px sotto, 20 px sopra
   dopo un titolo (dai 768 px) e 15 px sotto in un testo dell'editor */
main p:not([class]) { margin-bottom: 3px; letter-spacing: 0.5px; }
.editor p:not([class]) { margin: 0 0 15px; min-height: 15px; }
main :is(h1, .h1, h3, .h3, h4, .h4) + p:not([class]) { margin-top: 20px; }
@media (min-width: 768px) {
  .stack > :is(h1, h2, h3, h4, h5, h6) + .text:not(.sp-empty) { --mt: 20px; }
  .stack > :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) { --mt: 20px; }
  .stack > .text + .btn-row > :is(.btn, .btn-text) { margin-top: 20px; }
}
.subtitle { margin-top: 5px; font-weight: 500; }
@media (max-width: 992px) {
  .subtitle { font-size: 30px; line-height: 35px; }
  /* sotto i 993 px una colonna con l'ombra arriva ai bordi dello schermo */
  .stack > .shadow { margin-inline: -15px; padding-inline: 15px; }
}

/* pulsanti: l'icona entra da sinistra al passaggio del mouse, come nell'originale */
.btn-row--center { text-align: center; }
.btn-row--start { text-align: left; }
.btn-row--end { text-align: right; }
.btn {
  display: inline-block; position: relative; overflow: hidden; vertical-align: middle; padding: 5px 15px;
  border: 1px solid var(--blue); border-radius: 20px; background: var(--blue); color: #fff;
  font: 600 14px/20px var(--font); text-align: center; text-decoration: none;
  transition: background-color 0.3s, padding 0.3s;
}
.btn .icon { position: absolute; left: -30px; top: 50%; transform: translateY(-50%); transition: left 0.3s; }
.btn:hover, .btn:focus-visible { background: var(--blue-dark); border-color: var(--blue-dark); padding-left: 35px; padding-right: 8px; }
.btn:hover .icon, .btn:focus-visible .icon { left: 12px; }
.btn--lg { padding: 13px 50px; border-radius: 30px; font-size: 18px; line-height: 24px; }
.btn--lg:hover, .btn--lg:focus-visible { padding-left: 57px; padding-right: 43px; }
.btn--lg:hover .icon, .btn--lg:focus-visible .icon { left: 14px; }
.btn--lg .icon { font-size: 18px; }
.btn--sm { padding: 8px 35px; font-size: 13px; font-weight: 500; line-height: 19.5px; }
.btn--sm:hover, .btn--sm:focus-visible { padding-left: 45px; padding-right: 25px; }
/* pulsante di solo testo, sottolineato */
.btn-text { display: inline-block; border-bottom: 1px solid var(--blue-dark); color: var(--blue-dark); text-decoration: none; }
.btn-text .icon { display: none; }
.btn-text:hover { color: #7d7d7d; }
.btn--block { display: block; width: 100%; }

/* fisarmonica: <details> al posto dell'elenco animato via script. L'elenco ha 3 px sopra e 20
   sotto, le voci 10 px tra loro (gli altri 10 della voce si fondevano con quelli dell'elenco) */
.accordion-list { --mt: 3px; --mb: 20px; }
.accordion-list > .accordion + .accordion { margin-top: 10px; }
.accordion { border-bottom: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); text-align: left; }
.accordion > summary {
  display: block; position: relative; padding: 10px 15px 10px 40px; color: var(--muted); font-weight: 500;
  list-style: none; cursor: pointer;
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::before {
  content: ""; position: absolute; left: 19px; top: 19px; width: 6px; height: 6px;
  border-top: 2px solid var(--caret); border-right: 2px solid var(--caret); transform: rotate(45deg);
}
.accordion[open] > summary { color: var(--blue); }
.accordion[open] > summary::before { transform: rotate(135deg); }
.accordion > summary .icon { margin-right: 15px; }
.accordion__body { margin-block: 5px; padding: 0 15px 10px 20px; }

/* "leggi di più": pulsante centrato con la freccia; .collapse--after lo mostra sotto il testo */
.collapse__button { display: block; color: var(--muted); list-style: none; cursor: pointer; }
.collapse__button::-webkit-details-marker { display: none; }
.collapse__button strong { font-weight: 500; }
.collapse__button::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 9px; position: relative; top: -3px;
  border-top: 2px solid var(--caret); border-right: 2px solid var(--caret); transform: rotate(135deg);
}
.collapse[open] > .collapse__button::after { top: 1px; transform: rotate(-45deg); }
.collapse__body { margin-block: 5px; }
.collapse--after[open] { display: flex; flex-direction: column; }
.collapse--after > .collapse__button { order: 2; }

/* scheda con icona in alto (content box) */
.feature { padding: 45px 30px; background: var(--box); border-radius: 6px; text-align: center; }
.feature__icon { display: inline-block; width: 110px; height: 110px; color: var(--blue); font-size: 100px; line-height: 110px; }
.feature__icon .icon { vertical-align: middle; }
.feature > :is(h1, h2, h3, h4, h5, h6) { margin: 15px 0 20px; font-weight: 600; line-height: 35px; }
.feature .btn { margin-top: 25px; }

/* elenco con icone (fa-ul): icona nel margine sinistro */
.icon-list { margin: 0 0 0 2.142857em; padding: 0; list-style: none; text-align: left; }
.icon-list > li { position: relative; line-height: 30px; }
.icon-list > li > .icon:first-child { position: absolute; left: -2.142857em; top: 8px; color: var(--blue); }

/* immagini */
.image img { vertical-align: middle; }
.img-box { display: inline-block; max-width: 100%; }
.img-box img { display: block; border-radius: 6px; }
a.img-box:hover img { opacity: 0.8; }

/* testo libero dell'editor di WordPress */
.editor > ul, .editor > ol { margin-block: 15px; }
.editor img { max-width: 100%; height: auto; }
.editor > p:not([class]):last-child { margin-bottom: 0; }
.editor hr { margin: 20px 0; border: 0; border-top: 1px solid #d6d6d6; }

/* fascia del titolo degli articoli: riquadro scuro arrotondato; la sezione che segue ha 160 px sopra */
.page-header { height: 410px; margin-top: 80px; padding: 163px 80px 0; background: #1d1d1d; border-radius: 6px; text-align: left; }
.page-header h1 { color: #fafafa; font-size: 50px; font-weight: 500; line-height: 75px; }
.page-header-wrap + .section { padding-top: 160px; }
/* sopra i 993 px il riquadro è largo al massimo 1140 px, ma non resta dentro il contenitore da 970 */
@media (min-width: 993px) {
  .page-header-wrap { width: min(1140px, 100%); padding-inline: 0; }
}
@media (max-width: 992px) {
  .page-header { height: 300px; padding: 123px 80px 0; }
  .page-header h1 { margin-top: 5px; font-size: 30px; line-height: 35px; }
  .page-header-wrap + .section { padding-top: 100px; }
}
@media (max-width: 767px) {
  .page-header { padding-inline: 15px; }
  .page-header-wrap + .section { padding-top: 70px; }
}
/* pagine standard di WordPress: fascia blu con il titolo, poi il testo */
.page-title { padding: 20px 0 45px; background: #5584ff; color: #fff; text-align: left; }
.page-title h1 { width: calc(9 / 12 * (100% + 80px) - 80px); margin-left: -2px; padding-top: 20px; font-size: 37px; font-weight: 500; line-height: 50px; }
.page-content { padding-block: 80px; }
.page-content ul { margin: 0 0 10px; padding-left: 40px; }
.page-content :is(h4, .h4) { margin: 5px 0 20px; }
.page-content a { color: var(--blue); text-decoration: underline; }
@media (max-width: 992px) {
  .page-title { padding-bottom: 20px; }
  .page-title h1 { width: calc((100% + 30px) / 2 - 30px); line-height: 35px; }
  .page-content { padding-block: 50px; }
}
@media (max-width: 767px) {
  .page-title h1 { width: auto; }
}
.page-content h2 { font-weight: 600; }
.page-content p:not([class]) + p:not([class]) { margin-top: 10px; }
/* sottotitoli della Cookie Policy (35 px sopra) */
.label-35 { margin-top: 35px; }

/* elenco delle notizie con paginazione */
.news-list { display: flex; flex-direction: column; }
.news-item + .news-item { margin-top: 60px; }
.news-item__text { min-width: 0; }
.news-item :is(h2, h3) { font-size: 24px; font-weight: 600; line-height: 35px; text-align: left; }
.news-item--img { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; align-items: center; }
.news-item__img { width: 100%; border-radius: 6px; }
.pagination ul { display: flex; gap: 5px; margin: 20px 0 0; padding: 0; list-style: none; }
.pagination a { display: block; padding: 5px 10px; border: 1px solid #ddd; color: var(--blue); text-decoration: none; }
.pagination a[aria-current] { background: var(--blue); border-color: var(--blue); color: #fff; }

/* linea del tempo: riquadri alternati ai lati di una linea verticale, con un pallino e un'etichetta */
.timeline { position: relative; margin: 0 0 10px; padding: 20px 0; list-style: none; }
.timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #e8e8e8; }
.timeline__item { position: relative; margin-bottom: 50px; padding-right: 90px; }
.timeline__item--inverted { margin-top: -10px; padding: 0 0 0 90px; }
.timeline__item::before {
  content: ""; position: absolute; left: 50%; top: 32px; width: 20px; height: 20px; margin-left: -11px;
  border: 2px solid var(--blue); border-radius: 50%; background: #fff;
}
.timeline__label { position: absolute; top: 7px; left: calc(50% + 25px); padding: 10px 15px; }
.timeline__item--inverted .timeline__label { left: auto; right: calc(50% + 25px); }
.timeline__label > * { color: var(--blue); font-size: 25px; font-weight: 500; line-height: 35px; }
.timeline__panel { width: 50%; padding: 50px; background: #fff; border-radius: 6px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.13); }
.timeline__item--inverted .timeline__panel { margin-left: auto; }
.timeline__panel > :is(h2, h3, h4, h5) { margin-bottom: 20px; font-weight: 500; }
.timeline__body { padding-top: 10px; }
@media (max-width: 992px) {
  .timeline__item::before { display: none; }
  .timeline__panel { width: 100%; }
  .timeline__label, .timeline__item--inverted .timeline__label { top: 32px; left: auto; right: 0; max-width: 65px; padding: 0; }
  .timeline__item--inverted .timeline__label { left: 0; right: auto; text-align: right; }
  .timeline__label > * { font-size: 16px; }
}

/* Contatti: la fascia grigia della mappa (senza mappa: le coordinate erano vuote) con il riquadro
   dei recapiti, e l'elenco dei tipi di richiesta che aprono un messaggio di posta */
.map-band { display: flex; align-items: center; min-height: 450px; background: #e6e6e6; }
.map-card { display: grid; grid-template-columns: 1fr 1fr; width: 585px; max-width: 100%; margin-left: 5px; padding: 40px 0 60px; background: #fff; }
.map-card > * { padding-inline: 40px; }
@media (max-width: 992px) {
  .map-band { min-height: 0; padding-block: 30px; }
  .map-card { grid-template-columns: 1fr; gap: 20px; width: auto; margin-left: 0; padding: 30px; }
  .map-card > * { padding-inline: 0; }
}
.mail-list { --mt: 10px; --mb: 20px; padding: 0; list-style: none; }
.mail-list > li + li { margin-top: 8px; }

/* pagina 404: alta quanto la finestra (meno 67 px) con il messaggio al centro, come nel tema */
.page-404 { display: flex; align-items: center; min-height: calc(100vh - 67px); text-align: center; }
.page-404 :is(h1, .h1) { position: relative; top: -5px; font-weight: 600; }

/* video: il file locale con i controlli, YouTube come link */
.video { display: block; width: 100%; aspect-ratio: 16 / 9; }
.video-link { display: inline-flex; align-items: center; gap: 10px; color: var(--blue-dark); font-weight: 500; }
.video-link .icon { color: #f00; font-size: 30px; }

/* 8. Footer: la fascia vuota in alto è l'area widget (vuota) del tema */
.site-footer { padding-top: 220px; background: var(--footer-bg); color: var(--footer-text); }
@media (min-width: 768px) {
  .site-footer { padding-top: 190px; }
}
.site-footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.2); }
.site-footer__copy { padding-block: 30px; line-height: 20px; letter-spacing: 0.3px; text-align: left; }
.site-footer a { color: inherit; line-height: 25px; }
@media (min-width: 993px) {
  .site-footer { padding-top: 161px; }
}

/* 9. Utilità (nomi dalle classi del tema: text-center -> ta-center, text-color -> c-blue...) */
.ta-center { text-align: center; }
.ta-left { text-align: left; }
.ta-right { text-align: right; }
.ta-justify { text-align: justify; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-900 { font-weight: 900; }
.c-blue { color: var(--blue-dark); }
.p-0 { padding: 0; }
.text-xs { font-size: 12px; line-height: 16px; }
.text-s { font-size: 13px; line-height: 20px; }
.text-m { font-size: 17px; line-height: 25px; }
.text-l { font-size: 27px; line-height: 38px; }
.text-xl { font-size: 30px; line-height: 40px; }
.text-xxl { font-size: 45px; line-height: 50px; }
@media (min-width: 768px) {
  .text-xl { font-size: 35px; line-height: 60px; }
}
@media (min-width: 993px) {
  .text-xl { font-size: 45px; }
  .text-xxl { font-size: 110px; line-height: 110px; }
}

/* 10. Accessibilità */
.skip-link { position: absolute; left: 15px; top: -100px; z-index: 200; padding: 10px 15px; background: #fff; color: var(--blue-dark); font-weight: 500; }
.skip-link:focus { top: 10px; }
:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 2px; }
.text a, .site-footer a { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}