/* Sezione Risorse.
 *
 * Eredita da supporto.css: barra, briciole, colonna, pulsanti e piede sono gli
 * stessi, e devono restarlo - due sezioni nostre che si somigliano appena sono
 * peggio di due che si somigliano del tutto. Qui c'e' solo cio' che una guida
 * ha e una risposta di supporto no: la colonna di lettura piu' stretta,
 * l'indice, le schede, le tabelle di confronto.
 *
 * La colonna del testo e' piu' stretta del contenitore di proposito: una riga
 * di sessanta-settanta caratteri si legge, una da centoventi no. E' l'unica
 * scelta tipografica che conta davvero in una pagina di sole parole.
 */

.ris { --ris-lettura: 720px; }

/* --- pagina principale ---------------------------------------------------- */
.ris-hero { padding: 26px 0 4px; max-width: 760px; }
.ris-hero h1 { margin-bottom: 14px; }
/* La ricerca dell'hub e' quella del Supporto, ma qui l'introduzione e'
   allineata a sinistra: il campo le va sotto, non al centro della pagina. */
.ris-hero .sup-cerca { margin: 22px 0 0; }

/* Cinque categorie su tre colonne lasciavano la seconda riga zoppa: due schede
   a sinistra e un buco a destra. La griglia e' di sei colonne e ogni scheda ne
   occupa due; quando le schede sono cinque, la quarta parte dalla seconda
   colonna, e la riga sotto viene centrata. Con un altro numero di schede la
   regola non si applica e la griglia torna quella normale. */
.ris-aree { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.ris-aree > * { grid-column: span 2; }
.ris-aree > :nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
.ris-area {
  display: block; padding: 26px 24px 22px;
  background: var(--sup-carta); border: 1px solid transparent;
  border-radius: var(--sup-raggio); text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.ris-area:hover { background: #fff; border-color: var(--sup-linea); transform: translateY(-2px); }
.ris-area h3 { margin: 14px 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.ris-area p { margin: 0 0 12px; font-size: 15px; color: var(--sup-tenue); line-height: 1.5; }
.ris-icona { width: 30px; height: 30px; color: var(--sup-viola); display: block; }
.ris-conta { font-size: 13px; font-weight: 500; color: var(--sup-viola); }
/* Una categoria senza guide lo dice, invece di mostrare uno zero: uno zero
   sembra un errore, "in preparazione" e' un'informazione. */
.ris-conta.ris-attesa { color: var(--sup-tenue); }

/* --- schede delle guide --------------------------------------------------- */
.ris-schede { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ris-scheda {
  display: block; padding: 22px 22px 20px;
  background: var(--sup-carta); border: 1px solid transparent;
  border-radius: var(--sup-raggio); text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.ris-scheda:hover { background: #fff; border-color: var(--sup-linea); transform: translateY(-2px); }
.ris-categoria { display: block; font-size: 13px; font-weight: 500; color: var(--sup-viola); }
.ris-scheda h3 { margin: 8px 0 8px; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.ris-scheda p { margin: 0; font-size: 15px; color: var(--sup-tenue); line-height: 1.5; }

/* --- pagina guida --------------------------------------------------------- */
.ris-guida { max-width: var(--ris-lettura); }
.ris-etichetta { margin: 14px 0 0; font-size: 14px; }
.ris-etichetta a { color: var(--sup-viola); text-decoration: none; font-weight: 500; }
.ris-etichetta a:hover { text-decoration: underline; }
.ris-guida h1 { font-size: clamp(28px, 3.8vw, 40px); margin: 8px 0 14px; }
.ris-bisogno { font-size: 19px; line-height: 1.55; color: var(--sup-tenue); margin: 0 0 14px; }
.ris-firma { font-size: 14px; color: var(--sup-tenue); margin: 0 0 4px; }

/* L'indice sta nel flusso, non incollato al lato: su un telefono un indice
   fisso copre il testo che dovrebbe aiutare a leggere. */
.ris-indice {
  margin: 26px 0 0; padding: 18px 22px;
  background: var(--sup-carta); border-radius: var(--sup-raggio);
}
.ris-indice-tit { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--sup-tenue); }
.ris-indice ol { margin: 0; padding-left: 20px; }
.ris-indice li { margin: 5px 0; }
.ris-indice a { text-decoration: none; }
.ris-indice a:hover { color: var(--sup-viola); text-decoration: underline; }

.ris-testo { margin: 34px 0 0; }
.ris-testo h2 {
  margin: 40px 0 12px; font-size: 25px; font-weight: 600;
  line-height: 1.22; letter-spacing: -.015em; scroll-margin-top: 90px;
}
.ris-testo h3 { margin: 26px 0 8px; font-size: 19px; font-weight: 600; }
.ris-testo p { margin: 0 0 16px; font-size: 18px; line-height: 1.68; }
.ris-testo ul, .ris-testo ol { margin: 0 0 18px; padding-left: 22px; }
.ris-testo li { margin: 8px 0; font-size: 18px; line-height: 1.6; }

/* Il riquadro non e' una decorazione: contiene l'avvertenza, il limite, la
   condizione in cui il consiglio non vale. Va visto come diverso dal resto. */
.ris-nota {
  margin: 0 0 20px; padding: 18px 22px;
  background: var(--sup-carta); border-left: 3px solid var(--sup-viola);
  border-radius: 0 var(--sup-raggio) var(--sup-raggio) 0;
  font-size: 16px; line-height: 1.6; color: #2b2f3a;
}

/* Le tabelle di confronto sono la parte piu' utile di una guida e la piu'
   fragile su schermo stretto: scorrono per conto loro, senza trascinarsi
   dietro la pagina. */
.ris-tabella { margin: 0 0 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ris-tabella table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 16px; }
.ris-tabella th, .ris-tabella td {
  padding: 12px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--sup-linea); line-height: 1.5;
}
.ris-tabella thead th { font-weight: 600; font-size: 14px; color: var(--sup-tenue); border-bottom-width: 2px; }
.ris-tabella tbody th { font-weight: 600; }

/* --- FAQ ------------------------------------------------------------------ */
.ris-faq { margin: 44px 0 0; max-width: var(--ris-lettura); }
.ris-faq h2 { font-size: 22px; font-weight: 600; margin: 0 0 14px; }
.ris-faq details { border-bottom: 1px solid var(--sup-linea); }
.ris-faq details:first-of-type { border-top: 1px solid var(--sup-linea); }
.ris-faq summary {
  padding: 16px 34px 16px 2px; position: relative;
  font-weight: 500; font-size: 17px; cursor: pointer; list-style: none;
}
.ris-faq summary::-webkit-details-marker { display: none; }
.ris-faq summary::after {
  content: '›'; position: absolute; right: 12px; top: 50%;
  transform: translateY(-52%) rotate(90deg);
  color: var(--sup-tenue); font-size: 20px; transition: transform .2s ease;
}
.ris-faq details[open] summary::after { transform: translateY(-52%) rotate(-90deg); }
.ris-faq summary:hover { color: var(--sup-viola); }
.ris-faq details p { margin: 0 0 16px; padding-right: 20px; line-height: 1.65; color: #2b2f3a; }

/* --- collegamento al supporto e invito ------------------------------------ */
.ris-collegata {
  margin: 34px 0 0; padding: 16px 20px;
  border: 1px solid var(--sup-linea); border-radius: var(--sup-raggio);
  font-size: 16px;
}
.ris-collegata p { margin: 0; }
.ris-collegata a { color: var(--sup-viola); }

.ris-invito { margin: 40px 0 0; padding: 30px 28px; background: var(--sup-carta); border-radius: 22px; }
.ris-invito h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; }
.ris-invito p { margin: 0 0 18px; color: var(--sup-tenue); }
.ris-azioni { display: flex; flex-wrap: wrap; gap: 12px; }

.ris-supporto { padding: 26px 28px; border: 1px solid var(--sup-linea); border-radius: 22px; }
.ris-supporto h2 { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.ris-supporto p { margin: 0; color: var(--sup-tenue); }
.ris-supporto a { color: var(--sup-viola); }

/* --- schermi stretti ------------------------------------------------------ */
@media (max-width: 900px) {
  /* due per riga: l'ultima, se resta da sola, va al centro */
  .ris-aree { grid-template-columns: repeat(4, 1fr); }
  .ris-aree > :nth-child(4):nth-last-child(2) { grid-column: span 2; }
  .ris-aree > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
@media (max-width: 640px) {
  .ris-aree, .ris-schede { grid-template-columns: 1fr; }
  .ris-aree > *, .ris-aree > :nth-child(4):nth-last-child(2),
  .ris-aree > :last-child:nth-child(odd) { grid-column: auto; }
  .ris-testo p, .ris-testo li { font-size: 17px; }
  .ris-testo h2 { font-size: 22px; margin-top: 32px; }
  .ris-bisogno { font-size: 17px; }
  .ris-invito { padding: 24px 20px; }
  .ris-azioni .sup-bottone { flex: 1 1 100%; text-align: center; }
}

/* La voce dell'indice corrispondente alla sezione che si sta leggendo. */
.ris-indice a[aria-current] { color: var(--sup-viola); font-weight: 600; }

/* Una categoria ancora senza guide: si vede, spiega che sta arrivando, ma non
   e' un collegamento - la sua pagina non esiste ancora. */
.ris-area-attesa { opacity: .62; cursor: default; }
.ris-area-attesa:hover { background: var(--sup-carta); border-color: transparent; transform: none; }

/* La barra copiata dalla home: il pannello del menu, sul telefono, sta dentro
   un contenitore che ritaglia (overflow:hidden) e alto quanto la barra. Sul
   sito e' React ad allargarlo quando il menu si apre; qui lo fa questa regola,
   accesa da mirror/boost/navbar.js. */
body.con-barra-mirror [data-framer-name="Phone"].boost-menu-aperto { overflow: visible !important; }

/* --- piano editoriale (documento di lavoro, solo in revisione) ------------- */
.ris-legenda { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0 0; font-size: 14px; color: var(--sup-tenue); }
.ris-legenda strong { color: var(--sup-testo); }

.ris-revisione { padding: 22px 26px; border: 1px dashed var(--sup-linea); border-radius: 22px; }
.ris-revisione h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.ris-revisione p { margin: 0; color: var(--sup-tenue); font-size: 15px; }
.ris-revisione a { color: var(--sup-viola); }

.ris-scheda-piano { border-bottom: 1px solid var(--sup-linea); }
.ris-scheda-piano:first-of-type { border-top: 1px solid var(--sup-linea); }
.ris-scheda-piano > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 13px 4px; cursor: pointer; list-style: none;
}
.ris-scheda-piano > summary::-webkit-details-marker { display: none; }
.ris-scheda-piano > summary:hover .ris-tit { color: var(--sup-viola); }
.ris-num { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--sup-tenue); min-width: 30px; }
.ris-tit { flex: 1 1 260px; font-weight: 500; }
.ris-tag {
  font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--sup-carta); color: var(--sup-tenue);
}
.ris-p1 { background: #ece5ff; color: #5b2fbe; }
.ris-fatta { background: #e3f6ea; color: #1c6b3a; }

.ris-scheda-piano dl { margin: 4px 0 20px; padding: 0 0 0 40px; font-size: 15px; }
.ris-scheda-piano dt { font-weight: 600; color: var(--sup-tenue); font-size: 13px; margin: 12px 0 3px; }
.ris-scheda-piano dd { margin: 0; line-height: 1.55; }
.ris-scheda-piano dd ol { margin: 4px 0; padding-left: 20px; }
.ris-scheda-piano dd li { margin: 3px 0; }
.ris-scheda-piano code { font-size: 13px; background: var(--sup-carta); padding: 2px 6px; border-radius: 5px; }
.ris-scheda-piano strong { color: #a3231d; }

@media (max-width: 640px) { .ris-scheda-piano dl { padding-left: 0; } }

/* La barra copiata dalla home e' fissa in cima (position:fixed, come sul sito):
   il contenuto va spostato sotto, altrimenti le briciole ci finiscono dietro.
   Misurata: 71 px su desktop e tablet, 74 sul telefono. */
body.con-barra-mirror .sup-briciole { padding-top: 89px; }
@media (max-width: 640px) {
  body.con-barra-mirror .sup-briciole { padding-top: 88px; }
}
/* I titoli raggiunti da un'ancora non devono finire sotto la barra. */
body.con-barra-mirror .ris-testo h2 { scroll-margin-top: 95px; }

/* La fascia sotto la barra quando la briciola non c'e': tiene esattamente lo
   spazio che occupava - i 89 px sotto la barra fissa piu' la riga di testo -
   cosi' togliendo la scritta la pagina resta dov'era. Misurato: il titolo deve
   restare a 163 px dall'alto. */
.sup-briciole-vuote { height: 0; }
/* La stessa specificita' della regola che sposta le briciole sotto la barra:
   senza, quella vince e lo spazio torna a 89. */
body.con-barra-mirror .sup-briciole-vuote { padding-top: 111px; }

/* NOTA. Queste regole prima si agganciavano con body:has([data-barra-mirror]).
   Funzionava sui browser recenti e su nessun altro: :has() e' arrivato in
   Chrome 105, Safari 15.4 e Firefox 121, e chi ha una versione precedente si
   vedeva il titolo finire dietro la barra fissa. Segnalato con due schermate.
   Ora la pagina dichiara da se' di avere la barra copiata, con una classe sul
   body: una classe la capiscono tutti. */