/*
 * Warmuppers: solo ciò che il prototipo non ha (ARCHITETTURA.md §6.3).
 * sito.css è il CSS originale e non si tocca: qui si aggiunge, con le sue variabili
 * (--lime --violet --deep --paper --muted --line) e il monospace delle etichette.
 * Si carica dopo sito.css: a parità di specificità vince questo file.
 */

/* ---------- Moduli: consenso, campo esca, stato, invio in corso ---------- */

/* consenso nella fascia newsletter lime (e nel modulo del quiz, se usato) */
.signup label.signupConsent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  color: var(--violet);
  font-size: 13px;
  line-height: 1.45;
}
/* casella disegnata coi colori della fascia: bordo viola, spunta lime su viola */
.signup .signupConsent input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 2px solid var(--violet);
  border-radius: 0;
  background: #ffffff45;
  cursor: pointer;
}
.signup .signupConsent input:checked {
  background: var(--violet);
}
.signup .signupConsent input:checked::before {
  content: "";
  width: 9px;
  height: 5px;
  border: solid var(--lime);
  border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg);
}
.signup .signupConsent input:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}
.signupConsent a,
.quizLead label a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.signupConsent a:hover,
.quizLead label a:hover {
  text-decoration-thickness: 2px;
}
.quizLead label a {
  color: var(--lime);
}

/* Fuoco dei link in linea (consensi, corpo di articoli e privacy). L'anello globale di
   sito.css (3px a 4px di distanza) passa sopra le lettere vicine: qui il link si
   evidenzia a colori invertiti, dentro il suo riquadro, senza toccare il testo intorno.
   Il contorno trasparente resta per i colori forzati di Windows, dove gli sfondi spariscono. */
.signupConsent a:focus-visible,
.quizLead label a:focus-visible,
.articleBody > div a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 0;
  background: var(--violet);
  color: var(--lime);
  text-decoration-thickness: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.quizLead label a:focus-visible,
.articleBody > div a:focus-visible {
  background: var(--lime);
  color: var(--deep);
}

/* Da desktop la fascia è su due colonne allineate in basso e la riga email + bottone
   sta alla pari col titolo, come nel prototipo. Il consenso resta nel flusso (un testo
   lungo fa crescere la fascia, non finisce sotto il piede) ma il form ne scende di una
   riga nel padding: margine negativo pari a 12px + una riga del consenso (13px × 1,45).
   Col consenso di una riga l'impaginazione è quella del prototipo; ogni riga in più
   alza la riga email invece di uscire dalla fascia. */
@media (width > 900px) {
  .newsletter .signup {
    margin-bottom: calc(-12px - 13px * 1.45);
  }
  .newsletter .signup label.signupConsent {
    margin: 12px 0 0;
  }
}

/* campo esca antispam: fuori schermo, fuori dal tab, invisibile ai lettori di schermo */
form input.campoEsca {
  position: absolute;
  top: 0;
  left: -10000px;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* riga di stato: vuota non occupa spazio */
.signupStato {
  margin: 12px 0 0;
  font: 700 12px/1.5 monospace;
  letter-spacing: .06em;
}
.signupStato:empty {
  display: none;
}
.signup .signupStato {
  color: var(--violet);
  letter-spacing: .06em;
}
.signup .signupStato.errore {
  color: #8f1d14;
}
.quizLead .signupStato {
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
}
.quizLead .signupStato.errore {
  color: #ff9a8c;
}
.quizLead .signupStato.ok {
  color: var(--lime);
}

/* invio in corso: bottone spento */
form[aria-busy="true"] button {
  opacity: .6;
  cursor: progress;
  pointer-events: none;
}

/* ---------- Articolo in bozza (visibile solo con la sessione del pannello) ---------- */

.draftBadge {
  display: inline-block;
  margin-left: 18px;
  padding: 5px 10px 4px;
  background: var(--lime);
  color: var(--deep);
  font: 900 11px monospace;
  letter-spacing: .12em;
  vertical-align: 1px;
}

/* ---------- Pagine nuove: privacy, conferma, 404 ---------- */

/* invito sotto la PageHero (conferma e 404) */
.pageHeroInner > .solidButton {
  margin-top: 34px;
}

/* informativa: stessa griglia e stessa tipografia dell'articolo, testo nella colonna larga */
.legalBody > div {
  grid-column: 2;
}
.legalBody p.lead {
  font-size: 22px;
}
.legalBody h2 {
  margin: 58px 0 20px;
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: -.035em;
  line-height: 1.1;
}
.legalBody ul {
  margin: 0 0 24px;
  padding-left: 22px;
  list-style: square;
}
.legalBody li {
  margin: 0 0 10px;
  padding-left: 4px;
  color: #ded4e1;
  font-size: 18px;
  line-height: 1.7;
}
.legalBody li::marker {
  color: var(--lime);
}
/* due paragrafi di fila (privacy, o articoli scritti dal pannello): nel prototipo non
   capita mai e il preflight azzera i margini, così sembrerebbero uno solo. La coppia
   attacco + paragrafo del prototipo resta attaccata com'è. */
.articleBody > div > p:not(.lead) + p {
  margin-top: 1em;
}
.articleBody > div a {
  color: var(--lime);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.articleBody > div a:hover {
  text-decoration-thickness: 2px;
}

@media (width <= 900px) {
  .legalBody > div {
    grid-column: 1;
  }
  .legalBody p.lead {
    font-size: 19px;
  }
  .legalBody h2 {
    margin: 40px 0 16px;
    font-size: 24px;
  }
  .legalBody li {
    font-size: 17px;
    line-height: 1.6;
  }
  .pageHeroInner > .solidButton {
    margin-top: 26px;
  }
}

/* ---------- Home: «Da leggere» senza la storia principale ---------- */

/* se la storia principale è in bozza o non esiste più, le brevi prendono tutta la
   larghezza invece di lasciare vuota la colonna di destra */
.editorialGrid > .storyBriefs:first-child {
  grid-column: 1 / -1;
}

/* ---------- Caroselli con tante voci (sorpassi e drop dal pannello) ---------- */

/* Nel prototipo i puntini non si stringono mai: da 9 voci a 390px la riga dei controlli
   sforava e le frecce uscivano dallo schermo. Qui i puntini si stringono solo quando
   manca spazio (con le voci del prototipo non cambia nulla); da 8 voci il bottone perde
   il padding e il puntino si centra dentro il suo bottone, così anche a 320px il puntino
   attivo (17px) non copre i vicini. Le frecce restano intere: fanno la stessa cosa dei
   puntini, con un bersaglio da 44px. */
.carouselControls .slideDots {
  min-width: 0;
}
.carouselControls .slideDots button {
  min-width: 0;
}
.carouselControls .slideDots:has(> button:nth-child(8)) button {
  padding-inline: 0;
}
.carouselControls .slideDots:has(> button:nth-child(8)) i {
  max-width: 100%;
  margin-inline: auto;
}

/* ---------- Drop: ritaglio scelto a mano (il valore «auto» segue il tono) ---------- */

.shopSlide .merchCrop.ritaglio1 img {
  transform: translate(0);
}
.shopSlide .merchCrop.ritaglio2 img {
  transform: translate(-33.3333%);
}
.shopSlide .merchCrop.ritaglio3 img {
  transform: translate(-66.6666%);
}
.shopSlide .merchCrop.ritaglioIntera img {
  width: 100%;
  object-fit: cover;
  transform: none;
}

/* ---------- Drop: prodotti veri dello shop (app/shop.php) ---------- */

/* la foto del prodotto riempie il riquadro: niente ritaglio a tre pannelli dei concept */
.shopSlideProdotto .shopSlideFoto {
  position: absolute;
  inset: 0;
  display: block;
}
.shopSlideProdotto .shopSlideFoto img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: none;
}
.shopSlideProdotto .shopSlideVisual > span {
  z-index: 1;
}
/* prezzo: lime e monospace come le etichette, il vecchio barrato */
.shopSlideCopy > span.shopPrezzo {
  margin: 0 0 22px;
  color: var(--lime);
  font: 700 20px/1.3 monospace;
}
.shopSlideCopy > span.shopPrezzo del {
  margin-right: 8px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
}
@media (width <= 900px) {
  .shopSlideCopy > span.shopPrezzo {
    margin-bottom: 14px;
    font-size: 17px;
  }
}