/*
 * Theme "jessica": the look of today's jessicacolizza.it (YOOtheme Pro 2.7, style «Trek» on UIkit 3) in our own CSS.
 * Values measured on the public site (tests/tema/confronta.cjs misura, prove/originale/tema/*.json) and read in the compiled
 * theme CSS of the forensic copy (as data). Breakpoints of UIkit: 640, 960, 1200 px.
 */

/* ---------------------------------------------------------------- fonts (OFL, assets/fonts/OFL-*.txt) */
@font-face { font-family: Oswald; font-style: normal; font-weight: 200 700; font-display: swap; src: url(../fonts/oswald-latin.woff2) format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/roboto-latin.woff2) format('woff2'); }
@font-face { font-family: Roboto; font-style: italic; font-weight: 100 900; font-display: swap; src: url(../fonts/roboto-italic-latin.woff2) format('woff2'); }

/* ---------------------------------------------------------------- tokens */
:root {
    --blu: #227986;          /* primary: buttons, the «Formatrice» card, the slider cards, lines; was #5cc6d6 (white text 2:1),
                                darker turquoise under white text 5:1 (Marco, 2026-10-27) */
    --blu-testo: #227986;    /* turquoise text on white and light grey: same hue, 4.5:1 (variant B, Marco 2026-10-26) */
    --blu-scuro: #1b636e;    /* the bar at the top, hover; was #48bfd1 */
    --testo: #333;
    --titoli: #222;
    --tenue: #737373;        /* was #aaa (2.2:1 on #f9f9f9), variant B */
    --giallo: #af6400;       /* «Concluso», the course names over the comments; was #ffb045 (1.8:1), variant B */
    --bianco: #fff;
    --grigio: #f2f2f2;       /* «Su di me», the header band, the boxes of «Aree di competenza» */
    --grigio-chiaro: #f9f9f9;/* the grey sections, the striped rows */
    --bordo: #eee;
    --margine: 15px;         /* side padding of the containers */
    --spazio: 40px;          /* vertical padding of a section */
    --fila: 30px;            /* gap of the grids */
    --cd-a11y-scuro: #222; --cd-a11y-chiaro: #fff; --cd-a11y-accento: #227986; --cd-a11y-raggio: 0;
    --cd-cookie-sfondo: #fff; --cd-cookie-testo: #333; --cd-cookie-btn: #227986; --cd-cookie-btn-hover: #1b636e; --cd-cookie-btn-testo: #fff;
}
@media (min-width: 640px) { :root { --margine: 30px; } }
@media (min-width: 960px) { :root { --margine: 40px; --spazio: 70px; } }
@media (min-width: 1200px) { :root { --fila: 40px; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: Roboto, sans-serif; font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--testo); background: var(--bianco);
    -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { margin: 0; }
a { color: var(--blu-testo); text-decoration: none; }
a:hover { color: var(--blu-scuro); text-decoration: underline; }
strong, b { font-weight: 500; }   /* today the browser thickens Roboto Light (the only weight loaded): about Medium */
img, svg, video { vertical-align: middle; }
img { max-width: 100%; height: auto; }
p, ul, ol, dl, blockquote, figure, pre, table { margin: 0 0 20px; }
* + p, * + ul, * + ol, * + dl, * + blockquote, * + figure, * + table { margin-top: 20px; }
ul, ol { padding-left: 30px; }
h1, h2, h3, h4, h5, h6, .titolo { margin: 0 0 20px; font-family: Oswald, sans-serif; font-weight: 400; color: var(--titoli); text-transform: uppercase; letter-spacing: 1px; }
* + h1, * + h2, * + h3, * + h4, * + h5, * + h6, * + .titolo { margin-top: 40px; }
h1, .titolo--h1 { font-size: 35.7px; line-height: 1.2; }
h2, .titolo--h2 { font-size: 30.6px; line-height: 1.3; }
h3, .titolo--h3 { font-size: 28px; line-height: 36px; }
h4, .titolo--h4 { font-size: 20px; line-height: 26px; }
h5, .titolo--h5 { font-size: 17px; line-height: 22px; }
h6, .titolo--h6 { font-size: 15px; line-height: 20px; }
@media (min-width: 960px) {
    h1, .titolo--h1 { font-size: 42px; }
    h2, .titolo--h2 { font-size: 36px; }
}
.titolo--heading-small { font-size: 41.6px; line-height: 1.2; font-weight: 500; letter-spacing: 4px; margin-bottom: 40px; }
.titolo--heading-small + .riquadri { margin-top: calc(var(--fila) - 40px); }   /* 30 px on a phone, 40 on a computer, as today */
.titolo--heading-large { font-size: 57.8px; line-height: 1.1; font-weight: 500; letter-spacing: 4px; color: var(--blu-testo); }
@media (min-width: 960px) {
    .titolo--heading-small { font-size: 52px; }
    .titolo--heading-large { font-size: 92px; }
}
.titolo--titolo-blu { font-size: 35.7px; line-height: 1.2; color: var(--blu-testo); margin-bottom: 30px; }
@media (min-width: 1200px) { .titolo--titolo-blu { margin-bottom: 40px; } }
@media (min-width: 960px) { .titolo--titolo-blu { font-size: 42px; } }
.titolo--blu { color: var(--blu-testo); }
.titolo--divisore { padding-bottom: calc(5px + .1em); border-bottom: calc(1px + .04em) solid var(--titoli); }
.titolo--linea { padding-bottom: calc(5px + .1em); border-bottom: 1px solid rgba(255, 255, 255, .2); }
.titolo--barra::before { content: ""; display: inline-block; position: relative; top: calc(-.1 * 1em); vertical-align: middle; height: calc(4px + .7em);
    margin-right: calc(5px + .45em); border-left: calc(5px + .1em) solid var(--blu); }   /* .45em: the bar, then a space as in YOOtheme's markup */
.centro { text-align: center; }
@media (min-width: 960px) { .centro-m { text-align: center; } }
hr { overflow: visible; margin: 0 0 20px; border: 0; border-top: 1px solid var(--bordo); }
* + hr { margin-top: 20px; }
.linea-blu, .piede-linea { height: 3px; border-top: 1px solid var(--bordo); border-bottom: 2px solid var(--blu); }
.linea-corta { width: 100px; border-top: 2px solid var(--blu); margin: 20px 0; }
.nascosto, .salta:not(:focus) { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.salta:focus { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 20px; background: var(--titoli); color: var(--bianco); }
:focus-visible { outline: 2px solid var(--titoli); outline-offset: 2px; }
main:focus { outline: none; }

/* ---------------------------------------------------------------- containers and sections */
.contenitore { max-width: calc(1200px + 2 * var(--margine)); margin: 0 auto; padding: 0 var(--margine); }
.contenitore--largo { max-width: calc(1360px + 2 * var(--margine)); }
.contenitore--stretto { max-width: calc(960px + 2 * var(--margine)); }
.contenitore--pieno { max-width: none; }
.sezione { padding: var(--spazio) 0; }
.sezione > .riga--1 { display: flow-root; }
.sezione > .riga { max-width: calc(1360px + 2 * var(--margine)); margin-left: auto; margin-right: auto; padding: 0 var(--margine); }
.sezione--default { background: var(--bianco); }
.sezione--secondary { background: var(--grigio); }
.sezione--muted { background: var(--grigio-chiaro); }
.sezione--large { padding: 70px 0; }
@media (min-width: 960px) { .sezione--large { padding: 140px 0; } }
.sezione > .riga + .riga { margin-top: var(--fila); }
.colonna > .titolo--heading-small:last-child { margin-bottom: 40px; }   /* a heading alone in its row keeps its space, as YOOtheme's */
.sezione > * > :last-child, .colonna > :last-child, .contenitore > :last-child, .scheda > :last-child, .scheda-corpo > :last-child { margin-bottom: 0; }

/* rows of the YOOtheme layouts: one column, or two from 960 px */
.riga--2 { display: grid; gap: var(--fila); }
@media (min-width: 960px) { .riga--2 { grid-template-columns: 1fr 1fr; } }
.riga--2 > .colonna { min-width: 0; }

/* ---------------------------------------------------------------- buttons and icons */
.pulsanti { display: flex; flex-wrap: wrap; gap: 15px; }
* + .pulsanti { margin-top: 20px; }
.pulsanti--centro { justify-content: center; }
.pulsante { display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; padding: 0 20px; border: 1px solid transparent; border-radius: 0;
    font: 400 14px/43px Oswald, sans-serif; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer;
    transition: .1s ease-in-out; transition-property: color, background-color, border-color; }
.pulsante:hover { text-decoration: none; }
.pulsante--primary { background: var(--blu); color: var(--bianco); }
.pulsante--primary:hover { background: var(--blu-scuro); color: var(--bianco); }
.pulsante--default { background: transparent; color: var(--blu-testo); border-color: var(--blu-testo); }
.pulsante--default:hover { border-color: var(--blu-scuro); color: var(--blu-scuro); }
.pulsante--bianco, .colonna--primary .pulsante--default { background: transparent; color: var(--bianco); border-color: var(--bianco); }
.pulsante--bianco:hover, .colonna--primary .pulsante--default:hover { background: rgba(255, 255, 255, .1); color: var(--bianco); border-color: var(--bianco); }
.pulsante--small { font-size: 13px; line-height: 33px; padding: 0 15px; }
.pulsante svg { flex: none; }
.pulsante[href$=".pdf"]::before { content: ""; width: 20px; height: 20px; background: currentColor; flex: none;
    -webkit-mask: url(../icone/file-text.svg) center / 20px no-repeat; mask: url(../icone/file-text.svg) center / 20px no-repeat; }
.colonna .pulsante--default[href$="formazione-per-docenti.html"]::before { content: ""; width: 20px; height: 20px; background: currentColor; flex: none;
    -webkit-mask: url(../icone/forward.svg) center / 20px no-repeat; mask: url(../icone/forward.svg) center / 20px no-repeat; }

/* icons placed by the content as <span class="icona icona--name">: the UIkit icon as a mask, in the colour of the text */
.icona { display: inline-block; width: 20px; height: 20px; background: currentColor; vertical-align: middle;
    -webkit-mask: var(--icona) center / contain no-repeat; mask: var(--icona) center / contain no-repeat; }
.icona--email { --icona: url(../icone/mail.svg); }
.icona--linkedin { --icona: url(../icone/linkedin.svg); }
.icona--facebook { --icona: url(../icone/facebook.svg); }
.icona--youtube { --icona: url(../icone/youtube.svg); }
.icona--users { --icona: url(../icone/users.svg); }
.icona--bell { --icona: url(../icone/bell.svg); }
.icona--folder { --icona: url(../icone/folder.svg); }

/* the square icon buttons with a line under them (social links) */
.social, .social-barra, .social-pannello { display: flex; flex-wrap: wrap; gap: 15px; margin: 0; padding: 0; list-style: none; }
.social a, .pulsante-icona { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-bottom: 2px solid currentColor; color: var(--titoli); }
.social a:hover, .pulsante-icona:hover { text-decoration: none; opacity: .8; }

/* ---------------------------------------------------------------- header */
.barra-social { display: none; background: var(--blu-scuro); padding: 10px 0; }
.social-barra { justify-content: flex-end; }
.social-barra .pulsante-icona { color: rgba(255, 255, 255, .9); border-bottom-color: var(--bianco); }
.testata { position: sticky; top: 0; z-index: 980; background: var(--grigio); }
.testata-sopra .testata { background: var(--bianco); }
.testata-barra { display: flex; align-items: center; justify-content: space-between; min-height: 80px; padding-left: var(--margine); padding-right: 0; }
.logo { font: 400 28px/42px Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--titoli); }
.logo:hover { color: var(--titoli); text-decoration: none; }
.testata-menu { display: none; }
.menu-apri { display: inline-flex; align-items: center; gap: .25em; min-height: 80px; padding: 0 20px; border: 0; background: none; cursor: pointer;
    font: 400 16px/24px Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--testo); }
.menu-apri svg { margin-left: 15px; }
@media (min-width: 960px) {
    .barra-social { display: block; }
    .testata { position: static; }
    .testata-barra { min-height: 100px; padding-left: 20px; padding-right: 20px; }
    .logo { padding: 0 20px; }
    .testata-menu { display: block; }
    .menu-apri { display: none; }
}
.menu { display: flex; margin: 0; padding: 0; list-style: none; }
.menu a { position: relative; display: flex; align-items: center; min-height: 100px; padding: 0 20px; font: 400 16px/24px Oswald, sans-serif;
    letter-spacing: 1px; text-transform: uppercase; color: var(--testo); }
.menu a::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: transparent; transition: .3s ease-in-out; transition-property: background-color, height; }
.menu a:hover { color: var(--blu); text-decoration: none; }
.menu .attiva > a { color: var(--blu-testo); }
.menu .attiva > a::before { height: 4px; background: var(--blu); }

/* phone menu: a turquoise panel from the right, centred */
.menu-telefono { position: fixed; inset: 0; z-index: 1000; }
.menu-telefono[hidden] { display: none; }
.menu-telefono-velo { position: absolute; inset: 0; background: rgba(0, 0, 0, .1); }
.menu-telefono-pannello { position: absolute; top: 0; right: 0; bottom: 0; width: 270px; max-width: 100%; padding: 20px; overflow-y: auto; background: var(--blu);
    color: var(--bianco); display: flex; flex-direction: column; justify-content: center; text-align: center; }
.menu-chiudi { position: absolute; top: 20px; right: 20px; padding: 5px; border: 0; background: none; color: rgba(255, 255, 255, .9); cursor: pointer; }
.menu-pannello { margin: 0; padding: 0; list-style: none; }
.menu-pannello a { display: block; padding: 5px 0; font: 400 16px/24px Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.menu-pannello a:hover, .menu-pannello .attiva > a { color: var(--bianco); text-decoration: none; }
.social-pannello { justify-content: center; margin-top: 40px; }
.social-pannello .pulsante-icona { color: rgba(255, 255, 255, .9); border-bottom-color: var(--bianco); }
body.menu-aperto { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
    .menu-telefono:not([hidden]) .menu-telefono-pannello { animation: entra .3s ease-out; }
    @keyframes entra { from { transform: translateX(100%); } }
}

/* ---------------------------------------------------------------- footer */
.piede { padding: var(--spazio) 0; background: var(--bianco); }
.piede-linea { margin: 0 0 20px; }
.piede-voci { display: flex; flex-wrap: wrap; row-gap: 10px; justify-content: center; margin: 0 0 0 -20px; padding: 0; list-style: none; }
.piede-voci > li { display: flex; align-items: center; padding-left: 20px; }
.piede-voci > li + li::before { content: ""; height: 1.5em; margin-right: 20px; border-left: 1px solid #ddd; }
.piede-voci a, .piede-voci .versione { color: var(--testo); }
.piede-voci a:hover { color: var(--titoli); text-decoration: none; }

/* ---------------------------------------------------------------- the home (classes of contenuti/pagine.json) */
.testata-sopra main > .sezione:first-child { padding-top: var(--spazio); }
.foto-profilo { display: block; width: 300px; height: 300px; margin: 0 auto; border-radius: 50%; object-fit: cover; }
.home .sezione:first-child .colonna { text-align: center; }
.home .sezione:first-child .colonna > p { font-size: 21px; line-height: 1.5; }
.home .sezione:first-child .colonna > h1 { margin-top: 40px; }
.social { justify-content: center; }
* + .social { margin-top: 20px; }

/* «Su di me»: two columns from 960 px and a drop cap */
.sezione--secondary .colonna > p:first-of-type { column-gap: 40px; }
@media (min-width: 960px) { .sezione--secondary .colonna > p:first-of-type { column-count: 2; } }
.sezione--secondary .colonna > p:first-of-type::first-letter { float: left; margin: 0 10px -2px 0; font-size: 4.5em; line-height: 1; color: inherit; }

/* «Esperienze»: the turquoise card and the white card */
.colonna--primary, .colonna--default { padding: 40px 15px; }
@media (min-width: 640px) { .colonna--primary, .colonna--default { padding: 40px 30px; } }
@media (min-width: 960px) { .colonna--primary, .colonna--default { padding: 70px 30px; } }
@media (min-width: 1200px) { .colonna--primary, .colonna--default { padding: 70px 40px; } }
.sezione > .riga--2:last-child { padding-bottom: var(--fila); }   /* measured: the grid of cards keeps a gap under it, as today */
.colonna--primary { background: var(--blu); color: rgba(255, 255, 255, .9); box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .1); }
.colonna--default { background: var(--bianco); box-shadow: 0 4px 20px rgba(0, 0, 0, .08); }
.colonna--primary > .icona, .colonna--default > .icona { display: block; width: 50px; height: 50px; margin: 0 auto; }
.colonna--primary .titolo--h3, .colonna--default .titolo--h3 { text-align: center; }
.colonna--primary .titolo, .colonna--primary a:not(.pulsante) { color: var(--bianco); }
.colonna--primary > .icona { color: rgba(255, 255, 255, .9); }
.colonna--default > .icona { color: var(--testo); }
.ultimi-corsi, .elenco { margin: 0; padding: 0; list-style: none; }
.ultimi-corsi > li, .elenco > li { margin: 0; }
.ultimi-corsi > li + li, .elenco > li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bordo); }
.ultimi-corsi > li + li { border-top-color: rgba(255, 255, 255, .2); }
.ultimi-corsi > li { display: grid; grid-template-columns: 135px 1fr; column-gap: 15px; align-items: start; }
.ultimi-corsi-luogo { display: block; font: 400 17px/22px Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--bianco); }
.ultimi-corsi-data { display: block; font-size: 15px; line-height: 1.4; color: var(--bianco); }   /* was white at .7: under 4.5:1 */
.ultimi-corsi > li > div:last-child { position: relative; top: 2px; margin-right: -3px; }   /* -3px: the longest title stays on one line, as today (sub-pixel widths of the font) */

/* «Aree di competenza»: grey boxes, four per row */
.riquadri { display: grid; gap: 10px var(--fila); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .riquadri { grid-template-columns: 1fr 1fr; gap: var(--fila); } }
@media (min-width: 960px) { .riquadri { grid-template-columns: repeat(4, 1fr); } }
.riquadri > li { padding: 40px 30px; background: var(--grigio); }
@media (min-width: 1200px) { .riquadri > li { padding: 40px; } }
.riquadri .icona { width: 60px; height: 60px; color: var(--blu-testo); }
.riquadri h3 { margin: 20px 0 0; font-size: 22px; line-height: 1.4; color: var(--blu-testo); }

/* the quotation */
.citazione { max-width: 960px; margin: 0 auto; font: 400 15px/1.5 Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--titoli); }
.citazione p { margin: 0; }
.citazione footer { display: block; margin-top: 10px; }
.citazione footer, .citazione cite { font: italic 300 17px/1.5 Roboto, sans-serif; letter-spacing: 0; text-transform: none; color: var(--tenue); }
.citazione footer::before { content: "— "; }

/* the questionnaire and its landing page */
.page .sezione--default .colonna > p:first-child { font-size: 21px; line-height: 1.5; color: var(--titoli); }
.pagina-fine-questionario .titolo--h2 { color: var(--blu-testo); }
.pagina-fine-questionario main { padding-bottom: calc(2 * var(--spazio)); }   /* today an empty section of the layout stays under the text */
.pagina-fine-questionario .elenco a { font: 400 28px/36px Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--titoli); }

/* the questionnaire form (cd-form, ticket 06): today's Balbooa look, measured page by page (prove/originale/questionario/).
   Today's «bold» is Roboto Light thickened by the browser: 500 here, as for strong. */
.cd-form-blocco { padding: 20px; }
.cd-form { font-size: 17px; color: var(--testo); }
.cd-form-passo-titolo { margin: 0; padding-top: 30px; font-weight: 500; line-height: 26px; color: var(--titoli); }
.cd-form-passo-titolo:focus { outline: none; }
.cd-form-passo-titolo:focus-visible { outline: 2px solid var(--titoli); outline-offset: 2px; }
/* the bar of 8 steps under the title: the steps done and this one in blue (data-cd-passo is 0 for the first); only the
   questionnaire has 8 pages */
[data-cd-modulo="questionario"] .cd-form-passo-titolo::after { content: ""; display: block; height: 10px; margin-top: 1px; --fatto: 12.5%;
    background: linear-gradient(to right, var(--blu) 0 var(--fatto), var(--bordo) var(--fatto) 100%);
    -webkit-mask: repeating-linear-gradient(to right, #000 0 calc(12.5% - 5px), transparent calc(12.5% - 5px) 12.5%);
    mask: repeating-linear-gradient(to right, #000 0 calc(12.5% - 5px), transparent calc(12.5% - 5px) 12.5%); }
[data-cd-modulo="questionario"] [data-cd-passo="1"] > .cd-form-passo-titolo::after { --fatto: 25%; }
[data-cd-modulo="questionario"] [data-cd-passo="2"] > .cd-form-passo-titolo::after { --fatto: 37.5%; }
[data-cd-modulo="questionario"] [data-cd-passo="3"] > .cd-form-passo-titolo::after { --fatto: 50%; }
[data-cd-modulo="questionario"] [data-cd-passo="4"] > .cd-form-passo-titolo::after { --fatto: 62.5%; }
[data-cd-modulo="questionario"] [data-cd-passo="5"] > .cd-form-passo-titolo::after { --fatto: 75%; }
[data-cd-modulo="questionario"] [data-cd-passo="6"] > .cd-form-passo-titolo::after { --fatto: 87.5%; }
[data-cd-modulo="questionario"] [data-cd-passo="7"] > .cd-form-passo-titolo::after { --fatto: 100%; }
.cd-form .cd-form-passo > .cd-form-passo-titolo + * { margin-top: 30px; }
/* on a phone today shows neither title nor bar: the title stays for screen readers and for the focus, and shows (with
   its outline) only while it has the keyboard focus, after «Procedi» or «Indietro» from the keyboard (WCAG 2.4.7) */
@media (max-width: 639px) {
    .cd-form-passo-titolo:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .cd-form .cd-form-passo > .cd-form-passo-titolo + * { margin-top: 14px; }
}
.cd-form .cd-form-titolo { margin: 0 0 30px; font-size: 20px; line-height: 26px; }
.cd-form .cd-form-campo { margin: 0 0 30px; }
.cd-form .cd-form-campo > label, .cd-form .cd-form-campo legend { margin: 0; font-weight: 400; line-height: 36px; color: var(--titoli); }
.cd-form .cd-form-campo legend { margin-bottom: 15px; }
/* the star of today; the words «(obbligatorio)» stay for screen readers */
.cd-form-obbl { font-size: 0; line-height: 0; }
.cd-form-obbl::before { content: "*" / ""; margin-left: 1px; font-size: 17px; line-height: 0; }   /* no taller line */
.cd-form .cd-form-campo input[type="text"], .cd-form .cd-form-campo input[type="email"], .cd-form .cd-form-campo select, .cd-form .cd-form-campo textarea {
    display: block; min-height: 60px; padding: 15px; border: 1px solid #ccc; border-radius: 0; background-color: var(--bianco);
    font: 500 15px/28px Roboto, sans-serif; color: var(--testo); }
.cd-form .cd-form-campo select { padding: 0 15px; font-weight: 400; }
.cd-form .cd-form-campo textarea { height: 150px; resize: vertical; }
.cd-form .cd-form-campo--area { margin-bottom: 38px; }   /* today the box sits on the text line: 8 px more under it */
.cd-form .cd-form-campo ::placeholder { color: #999; font-weight: 300; opacity: 1; }
/* «Il tuo nome» has today an ID card icon inside the box */
.cd-form [data-cd-campo="nome"] input { padding-left: 52px; background: var(--bianco) no-repeat 15px center / 22px 22px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M19 3h-4.2C14.4 1.8 13.3 1 12 1s-2.4.8-2.8 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0 4a3 3 0 1 1 0 6 3 3 0 0 1 0-6zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z'/%3E%3C/svg%3E"); }
/* choices: today's round (and square) grey buttons, 30 px, the text 20 px away */
.cd-form .cd-form-scelta { align-items: flex-start; gap: 20px; min-height: 30px; margin: 0 0 28px; font-size: 15px; font-weight: 400; line-height: 28px; color: var(--titoli); }
.cd-form .cd-form-scelta:last-child { margin-bottom: 14px; }
.cd-form .cd-form-scelta input { appearance: none; -webkit-appearance: none; width: 30px; height: 30px; margin: 0; border-radius: 50%; background: var(--bordo); cursor: pointer; }
.cd-form .cd-form-scelta input[type="checkbox"] { border-radius: 3px; }
.cd-form .cd-form-scelta input:checked { background: var(--blu); box-shadow: inset 0 0 0 9px var(--blu), inset 0 0 0 30px var(--bianco); }
.cd-form .cd-form-scelta input[type="checkbox"]:checked { box-shadow: none; background: var(--blu) no-repeat center / 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E"); }
.cd-form .cd-form-scelta input:focus-visible { outline: 2px solid var(--titoli); outline-offset: 2px; }
.cd-form .cd-form-scelta label { padding-top: 1px; cursor: pointer; }   /* a long answer on two lines: the button by the first */
.cd-form .cd-form-campo--consenso { margin-bottom: 58px; }
.cd-form .cd-form-campo--email + .cd-form-campo--consenso { margin-top: 45px; }
.cd-form .cd-form-campo--consenso:has(+ .cd-form-pulsanti) { margin-bottom: 43px; }
.cd-form .cd-form-campo--consenso .cd-form-scelta { margin: 0; }
.cd-form-campo--errore input[type="text"], .cd-form-campo--errore input[type="email"], .cd-form-campo--errore select, .cd-form-campo--errore textarea,
.cd-form-campo--errore .cd-form-scelta input { box-shadow: 0 0 0 2px #b00020; }
.cd-form .cd-form-errore { font-size: 15px; }
/* the buttons: «Procedi» blue on the right, «Indietro» plain text on the left; on a phone one under the other */
.cd-form .cd-form-pulsanti { justify-content: space-between; gap: 15px; margin-top: 0; }
.cd-form-pulsanti button { min-height: 58px; padding: 20px 60px; border: 0; border-radius: 0; background: transparent; cursor: pointer;
    font: 500 18px/18px Roboto, sans-serif; color: var(--titoli); }
.cd-form-pulsanti button:hover { background: #212121; color: var(--bianco); }
.cd-form-avanti, .cd-form-invia { margin-left: auto; background: var(--blu) !important; color: var(--bianco) !important; }
.cd-form-avanti:hover, .cd-form-invia:hover { background: #212121 !important; }
/* the last page: «Ecco Fatto: Invia» in the middle, «Indietro» under it */
.cd-form-pulsanti:has(.cd-form-invia) { flex-direction: column; align-items: flex-start; }
.cd-form-pulsanti:has(.cd-form-invia) .cd-form-invia { order: -1; margin: 0 auto 15px; }
@media (max-width: 639px) {
    .cd-form .cd-form-pulsanti { flex-direction: column-reverse; gap: 15px; }
    .cd-form-pulsanti button { width: 100%; }
    .cd-form-pulsanti:has(.cd-form-invia) { flex-direction: column; align-items: stretch; }
    .cd-form-pulsanti:has(.cd-form-invia) .cd-form-invia { width: auto; align-self: center; margin-bottom: 0; }
}

/* ---------------------------------------------------------------- course and comment pages */
.riga--corso { margin-top: 0; }
.corso-immagine img { width: 100%; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.informazioni { margin: 0; padding: 0; list-style: none; }
.informazioni > li { display: flex; align-items: center; gap: 10px; padding: 10px; }
.informazioni > li:nth-child(odd) { background: var(--grigio-chiaro); }
.informazioni svg { flex: none; }
.testo-articolo > :last-child { margin-bottom: 0; }
.testo-articolo h5 { margin-top: 40px; }
.testo-articolo > .uk-grid-margin { margin-top: var(--fila); }   /* the empty last block of some Joomla articles, as today */
.testo--grande { font-size: 21px; line-height: 1.5; }
/* the course video: the same box as today's player (560×315), with the consent request inside until the yes */
.video { margin-top: 40px; max-width: 560px; aspect-ratio: 560 / 315; background: var(--titoli); color: var(--bianco); }
.video iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-consenso { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; height: 100%; margin: 0; padding: 20px; text-align: center; }
.video-consenso a { color: var(--bianco); text-decoration: underline; }

.voti { max-width: 300px; margin: 0; padding: 0; list-style: none; }
.voti > li { display: flex; align-items: center; gap: 15px; }
.voti > li + li { margin-top: 10px; }
.voti svg { flex: none; }
.voti--generale { max-width: none; }
.voti--generale span { font: 400 17px/22px Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--titoli); }
.dati-commento { margin: 0; }
.dati-riga { display: flex; gap: 15px; }
.dati-riga + .dati-riga { margin-top: 10px; }
.dati-commento dt { flex: none; }
.dati-commento dt { font-weight: 300; }
.dati-commento dd { margin: 0; font: 400 17px/25.5px Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--titoli); }
.dati-commento dd a { color: var(--blu-testo); }

/* ---------------------------------------------------------------- lists of courses and comments */
.sezione--testa .titolo--h1 { margin-bottom: 20px; }
.griglia { display: grid; gap: var(--fila); margin: 0; padding: 0; list-style: none; }
@media (min-width: 960px) {
    .griglia--2 { grid-template-columns: 1fr 1fr; }
    .griglia--3 { grid-template-columns: repeat(3, 1fr); }
}
.scheda { min-width: 0; }
.scheda--default { padding: 30px; background: var(--bianco); color: var(--testo); box-shadow: 0 4px 20px rgba(0, 0, 0, .08); }
@media (min-width: 1200px) { .scheda--default { padding: 40px; } }
.scheda-immagine { display: block; }
.scheda-immagine img { width: 100%; }
.scheda--corso .titolo--h3 { margin: 20px 0 0; font-size: 22px; line-height: 1.4; padding-bottom: calc(5px + .1em); border-bottom-width: 1px; }
.scheda--corso .titolo a, .scheda--commento .titolo a { color: inherit; }
.scheda--corso .titolo a:hover, .scheda--commento .titolo a:hover { text-decoration: none; }
.scheda-stato { margin: 20px 0 0; font: 400 20px/26px Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--giallo); }
.scheda-testo { margin-top: 20px; }
.scheda-testo > :last-child { margin-bottom: 0; }

.scheda--commento { display: grid; grid-template-columns: 1fr auto; column-gap: var(--fila); align-content: start; }
.scheda--commento > * { grid-column: 1; margin-left: 0; }
.scheda-corso { margin: 0; font: 400 15px/20px Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--giallo); }
.scheda-testa { display: contents; }
.scheda-testa .titolo { grid-column: 1; margin: 20px 0 0; font-size: 22px; line-height: 1.4; }
.scheda-testa .stella { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.scheda--commento .scheda-testo { margin: 20px 0 0; }
/* under 960 px the rating goes on top, as YOOtheme's grid of picture and text */
@media (max-width: 959px) {
    .scheda--commento { display: flex; flex-direction: column; align-items: flex-start; }
    .scheda--commento > * { width: 100%; }
    .scheda-testa .stella { order: -1; margin-bottom: var(--fila); }
}

.filtro { margin-bottom: 10px; }
.filtro-voci { display: flex; flex-wrap: wrap; margin: 0 0 0 -20px; padding: 0; list-style: none; }
.filtro-voci > li { padding-left: 20px; }
.filtro-voci button { padding: 5px 10px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
    font: 400 17px/25.5px Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--tenue); }
.filtro-voci button:hover { color: var(--testo); }
.filtro-voci button[aria-pressed="true"] { color: var(--titoli); border-bottom-color: var(--grigio); }
.scheda[hidden] { display: none; }

/* ---------------------------------------------------------------- the comments' slider */
.carosello { position: relative; }
.carosello-finestra { position: relative; }
.carosello-binario { display: flex; margin: 0 0 0 calc(-1 * var(--fila)); padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; overscroll-behavior-x: contain; }
.carosello-binario::-webkit-scrollbar { display: none; }
.carosello-binario:focus-visible { outline-offset: -2px; }
.carosello-voce { position: relative; flex: 0 0 100%; padding-left: var(--fila); scroll-snap-align: start; display: flex; }   /* relative: the hidden texts of the far slides stay inside the track */
@media (min-width: 960px) { .carosello-voce { flex-basis: 50%; } }
.carosello-binario--trascina { scroll-snap-type: none; cursor: grabbing; }
.scheda--recensione { flex: 1; min-height: 300px; padding: 30px; text-align: center; }
@media (min-width: 1200px) { .scheda--recensione { padding: 40px; } }
.scheda--primary { background: var(--blu); color: var(--bianco); box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .1); }
.scheda--primary .titolo { color: var(--bianco); }
.scheda--recensione .titolo { margin-top: 20px; }
.scheda--recensione .pulsanti { justify-content: center; }
.carosello-freccia { position: absolute; top: 50%; z-index: 1; display: none; transform: translateY(-50%); margin: 0 30px; padding: 30px 14px; border: 0;
    background: rgba(242, 242, 242, .6); color: var(--bianco); cursor: pointer; transition: background-color .1s ease-in-out; }
.carosello-freccia:hover { background: rgba(242, 242, 242, .9); }
.carosello-freccia svg { display: block; width: 12px; height: 11px; }
.carosello-freccia--prima { left: 0; }
.carosello-freccia--dopo { right: 0; }
@media (min-width: 640px) { .carosello-freccia:not([hidden]) { display: block; } }
.carosello-punti { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.carosello-punti:empty { display: none; }
.carosello-punti button { width: 12px; height: 12px; padding: 0; border: 2px solid var(--grigio); border-radius: 50%; background: transparent; cursor: pointer; }
.carosello-punti button[aria-current="true"] { border-color: var(--blu); }
.carosello-punti button[hidden] { display: none; }
.carosello + .pulsanti { margin-top: var(--fila); }

/* ---------------------------------------------------------------- 404 (as YOOtheme's: the whole screen, no header) */
.pagina-404 { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 70px var(--margine); text-align: center; }
.pagina-404 h1 { margin: 0 0 20px; font-size: 68px; line-height: 1; font-weight: 500; letter-spacing: 4px; }
@media (min-width: 960px) { .pagina-404 h1 { font-size: 130px; } }
.pagina-404 p.titolo--h3 { margin-top: 40px; }
.pagina-404 > div { padding-top: 20px; }   /* centred 10 px lower, as today */
/* Accessibility statement (cd-accessibilita): the width of the theme's container, under the title, as the policies. */
.contenitore > .cd-a11y-dichiarazione { max-width: none; }
/* Links inside the text of the policies and the statement: underlined, the darker turquoise (variant B) is close to the
   grey of the text (WCAG 1.4.1, axe link-in-text-block). */
.cd-legale a, .cd-a11y-dichiarazione a { text-decoration: underline; }

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