/* UniHouse — the parts of the WordPress pages made from the YOOtheme layouts (strumenti/converti-yootheme.php) and the
   footer shared with /candidature/. Values come from token.css. */

/* ── footer (the same as /candidature/, parti/piede.php) ──────────────── */

.piede { background: var(--verde-scuro); color: rgba(255, 255, 255, .8); font-size: var(--t-piccolo); }
.piede-dentro {
  max-width: var(--largo); margin-inline: auto; padding: 1.8rem var(--pad) 2.2rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem;
}
.piede p { margin: 0; }
.piede b { color: #fff; font-family: var(--titoli); font-size: 1rem; }
.piede-sotto { display: block; margin: .15rem 0 .5rem; color: var(--oro); font-size: var(--t-etichetta); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.piede a { color: var(--oro); text-decoration: none; }
.piede a:hover { text-decoration: underline; }
.piede-diritti { display: inline-block; margin-top: .5rem; color: rgba(255, 255, 255, .6); font-size: var(--t-piccolo); }

/* ── sections (YOOtheme «section») ────────────────────────────────────── */

.sez { position: relative; isolation: isolate; }
.sez--default { background: #fff; }
.sez--muted { background: var(--crema); }
.sez--primary { background: var(--verde); color: rgba(255, 255, 255, .85); }
.sez--secondary { background: var(--verde-scuro); color: rgba(255, 255, 255, .85); }
.sez--primary :is(h1, h2, h3, h4, h5, h6, .titolo), .sez--secondary :is(h1, h2, h3, h4, h5, h6, .titolo) { color: #fff; }
.sez--primary a:not(.pulsante), .sez--secondary a:not(.pulsante) { color: #fff; }
.contenitore { position: relative; max-width: var(--largo); margin-inline: auto; padding-inline: var(--pad); }
/* Pages of plain text (privacy, cookie): the container and the section padding, as YOOtheme gave them */
.pagina-testo { padding-block: 40px 70px; }
.pagina-testo .pagina-titolo { max-width: 46rem; margin: 0 auto 1.5rem; }   /* above the reading column of unihouse-legale */
@media (min-width: 960px) { .pagina-testo { padding-block: 70px 140px; } }
/* Padding as UIkit's uk-section: large 70 or 140 px, default and medium 40 or 70 px (phone or computer) */
.sez-alto-large { padding-top: 70px; }
.sez-basso-large { padding-bottom: 70px; }
.sez-alto-medium, .sez-alto-default { padding-top: 40px; }
.sez-basso-medium, .sez-basso-default { padding-bottom: 40px; }
.sez-alto-none { padding-top: 0; }
.sez-basso-none { padding-bottom: 0; }
@media (min-width: 960px) {
  .sez-alto-large { padding-top: 140px; }
  .sez-basso-large { padding-bottom: 140px; }
  .sez-alto-medium, .sez-alto-default { padding-top: 70px; }
  .sez-basso-medium, .sez-basso-default { padding-bottom: 70px; }
}
/* A section with a picture behind it (the first screen of the home) */
.sez--foto { color: #fff; }
.sez-foto, .sez-velo { position: absolute; inset: 0; z-index: -1; }
.sez-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── rows and columns ─────────────────────────────────────────────────── */

.riga { display: grid; gap: 40px; }
.riga + .riga { margin-top: 40px; }
/* Dividers as UIkit's grid-divider: between stacked columns a line on top, between columns side by side a line on the left */
.riga--divisa > .col + .col { border-top: 1px solid var(--riga); padding-top: 40px; }
@media (min-width: 640px) and (max-width: 959px) {
  .riga--divisa > .col-s-1-2 + .col-s-1-2 { border-top: 0; padding-top: 0; }
  .riga--divisa > .col-s-1-2:nth-child(even) { border-left: 1px solid var(--riga); padding-left: 40px; }
  .riga--divisa > .col-s-1-2:nth-child(n+3) { border-top: 1px solid var(--riga); padding-top: 40px; }
}
@media (min-width: 960px) {
  /* as uk-grid-divider: equal columns, 80 px between them, the line in the middle of the gap */
  .riga--divisa { column-gap: 0; margin-left: -80px; }
  .riga--divisa > .col { position: relative; padding-left: 80px; }
  .riga--divisa > .col + .col { border-top: 0; padding-top: 0; }
  .riga--divisa > .col + .col::before { content: ""; position: absolute; top: 0; bottom: 0; left: 40px; border-left: 1px solid var(--riga); }
}
.sez--primary .riga--divisa > .col, .sez--secondary .riga--divisa > .col,
.sez--primary .riga--divisa > .col::before, .sez--secondary .riga--divisa > .col::before { border-color: rgba(255, 255, 255, .2); }
@media (min-width: 640px) {
  .riga:has(> .col-s-1-2) { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .riga:has(> .col-m-1-2) { grid-template-columns: repeat(2, 1fr); }
  .riga:has(> .col-m-1-3) { grid-template-columns: repeat(3, 1fr); }
  .riga:has(> .col-m-1-4) { grid-template-columns: repeat(4, 1fr); }
}
.col > :first-child { margin-top: 0; }
.col > :last-child { margin-bottom: 0; }

/* ── headings (YOOtheme «headline»): one scale for the whole site ─────── */

.titolo { margin: 0 0 20px; font-family: var(--titoli); line-height: 1.2; color: var(--verde-scuro); }   /* a <p> styled as a heading looks like one */
.titolo--h1 { font-size: var(--t-h1); font-weight: 800; }
.titolo--h2 { font-size: var(--t-h2); font-weight: 800; }
.titolo--h3 { font-size: var(--t-h3); font-weight: 700; }
.titolo--h4 { font-size: var(--t-h4); font-weight: 700; }
.titolo--h5 { font-size: var(--t-h5); font-weight: 700; }   /* Montserrat like every heading (YOOtheme had Poppins here) */
.titolo--h6 { font-size: var(--t-etichetta); font-weight: 700; font-family: var(--testo); letter-spacing: .2em; text-transform: uppercase; color: var(--verde); margin-bottom: 12px; }
.titolo--heading-small { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; }
.colore-primary { color: var(--verde); }
.colore-secondary { color: #296B51; }
.sez--primary .colore-primary, .sez--secondary .colore-primary { color: #fff; }   /* UIkit: uk-text-primary is white in the dark sections */

/* ── text and small utilities ─────────────────────────────────────────── */

.testo > :last-child { margin-bottom: 0; }
.testo--large { font-size: var(--t-lede); }
.larg-medium { max-width: 31.25rem; }
.larg-large { max-width: 40rem; }
.larg-xlarge { max-width: 50rem; }
.al-center { text-align: center; }
.al-right { text-align: right; }
.al-center.larg-medium, .al-center.larg-large, .al-center.larg-xlarge, .blocco-centro { margin-inline: auto; }
.mt-remove { margin-top: 0 !important; }
.mt-xsmall { margin-top: 5px; }
.mt-small, .mt-s { margin-top: 10px; }
.mt-default { margin-top: 20px; }
.mt-medium { margin-top: 40px; }
.mt-large { margin-top: 70px; }
.mb-xsmall { margin-bottom: 5px; }
.mb-small { margin-bottom: 10px; }
.mb-default { margin-bottom: 20px; }
.mb-medium { margin-bottom: 40px; }
.mb-large { margin-bottom: 70px; }
.m-0 { margin: 0 !important; }
.mr-xs { margin-right: 5px; }
.w-pieno { width: 100%; }
.flex { display: flex; }
.flex-colonna { flex-direction: column; }
.flex-centro { justify-content: center; }
.flex-medio { align-items: center; }
.griglia-2 { display: grid; gap: 30px; }
@media (min-width: 640px) { .griglia-2 { grid-template-columns: repeat(2, 1fr); } }
.solo-computer { display: none !important; }
@media (min-width: 960px) {
  .solo-computer { display: revert !important; }
  ul.solo-computer:not(.colonne-1-2, .colonne-1-3) { display: grid !important; }   /* lists in columns stay blocks (CSS columns) */
  .solo-telefono { display: none !important; }
}
.divisore { border: 0; border-top: 1px solid var(--riga); margin: 20px 0; }
.html > :last-child { margin-bottom: 0; }

/* ── icons ────────────────────────────────────────────────────────────── */

.icona-svg { display: inline-block; vertical-align: middle; flex: none; }   /* stroke or fill: from the file's own attributes */
.icona-svg:not([width]) { width: 20px; height: 20px; }
.icona { line-height: 0; }

/* ── cards (YOOtheme «grid» and card columns) ─────────────────────────── */

.schede { display: grid; gap: 30px; grid-template-columns: repeat(var(--colonne, 1), 1fr); }
@media (min-width: 640px) { .schede-s-2 { --colonne: 2; } .schede-s-3 { --colonne: 3; } }
@media (min-width: 960px) { .schede-m-2 { --colonne: 2; } .schede-m-3 { --colonne: 3; } .schede-m-4 { --colonne: 4; } }
.scheda { display: flex; flex-direction: column; border-radius: var(--raggio); overflow: hidden; }
.schede--default .scheda, .scheda--default, .scheda--chiara { background: #fff; color: var(--ink); box-shadow: var(--ombra); }
.schede--secondary .scheda, .scheda--secondary { background: var(--verde-scuro); color: rgba(255, 255, 255, .85); }
.schede--secondary .scheda :is(h3, h4, h5, .titolo) { color: #fff; }
.scheda-corpo { padding: 30px; }
.scheda-pad-small .scheda-corpo, div.scheda.scheda-pad-small { padding: 20px; }
div.scheda.scheda-pad-default { padding: 30px; }
.scheda-corpo > :last-child, div.scheda > :last-child { margin-bottom: 0; }
.scheda-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.scheda-icona { display: block; padding: 20px 20px 0; color: var(--verde); line-height: 0; }
.scheda-meta { margin: 0 0 4px; font-size: var(--t-etichetta); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muto); }
.scheda .titolo { margin: 0 0 8px; }
.scheda-testo { font-size: var(--t-testo); }
.scheda-testo > :last-child { margin-bottom: 0; }
.col--scheda > .scheda { height: 100%; }

/* ── lists ────────────────────────────────────────────────────────────── */

.elenco { margin: 0 0 1em; padding: 0; list-style: none; display: grid; gap: 8px; }
.elenco--punti { padding-left: 1.2em; list-style: disc; }
.elenco--punti li::marker { color: var(--verde); }
.elenco--icone li { display: flex; align-items: center; gap: 14px; }
.elenco--large { gap: 14px; font-size: var(--t-testo); }   /* YOOtheme «large» list: 15 px, our text step is 16 */
.elenco-icona { color: var(--oro) !important; line-height: 0; }   /* gold as YOOtheme's uk-text-primary; the sections' own `#eN :where(span)` colour must not win */
.elenco-icona .icona-svg { width: 30px; height: 30px; }
/* Lists in columns read top to bottom, then the next column (YOOtheme's uk-column, CSS columns), not row by row */
@media (min-width: 640px) { .colonne-1-2 { display: block; columns: 2; column-gap: 30px; } }
@media (min-width: 960px) { .colonne-1-3 { display: block; columns: 3; column-gap: 30px; } }
.elenco:is(.colonne-1-2, .colonne-1-3) > li { break-inside: avoid; margin-bottom: 8px; }
.elenco--large:is(.colonne-1-2, .colonne-1-3) > li { margin-bottom: 14px; }

/* ── buttons ──────────────────────────────────────────────────────────── */

.pulsanti { display: flex; flex-wrap: wrap; gap: 10px; }
.pulsanti.al-center { justify-content: center; }
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 30px;
  border: 2px solid transparent; border-radius: 4px; font: 500 var(--t-testo)/1.2 var(--testo); text-decoration: none; text-align: center;
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) { .pulsante { transition: background-color .15s, color .15s, border-color .15s; } }
/* Phone: 16 px text needs less side padding than YOOtheme's 30 px, or «Iscriviti alla graduatoria» goes on two lines */
@media (max-width: 639px) { .pulsante { padding-inline: 16px; } }
.pulsante .icona-svg { width: 18px; height: 18px; }
.pulsante--primary { background: var(--verde); color: #fff; }
.pulsante--primary:hover { background: var(--verde-scuro); color: #fff; }
.pulsante--secondary, .pulsante--scuro { background: var(--verde-scuro); color: var(--crema); }
.pulsante--secondary:hover, .pulsante--scuro:hover { background: var(--verde); color: #fff; }
.pulsante--default, .pulsante--chiaro { background: #fff; color: var(--ink); border-color: var(--riga); }
.pulsante--default:hover, .pulsante--chiaro:hover { background: var(--crema); color: var(--verde-scuro); }
.pulsante--text { padding: 0; min-height: 0; background: none; color: var(--verde); }

/* ── maps (cd-mappa) ──────────────────────────────────────────────────── */

.mappa { margin-block: 20px; }