/* ============================================================
   03 — SCARABOCCHIO
   Il vestito dei disegni a penna. I tratti li genera
   js/scarabocchio.js: qui si dice solo dove vanno e di che
   colore sono.

   Regola: l'inchiostro non deve mai spostare niente. Ogni <svg>
   e' position:absolute dentro il suo elemento, quindi non entra
   nel flusso e non cambia l'altezza di nulla.
   ============================================================ */

/* l'elemento che ospita un disegno deve poterlo posizionare */
[data-penna]{
  position:relative;
}

.penna{
  position:absolute;
  overflow:visible;      /* l'inchiostro esce dagli angoli */
  pointer-events:none;
  z-index:1;
}
.penna path{
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.penna .penna__pieno{
  fill:currentColor;
  stroke:none;
}
/* la sagoma della carta e la cornice attorno stanno nello stesso
   disegno ma non sono dello stesso colore: il riempimento segue
   currentColor, i tratti sono neri e basta */
.penna .penna__nero{
  stroke:var(--inchiostro);
}

/* il contenuto sta sopra l'inchiostro, cosi' le ripassature
   sfiorano il testo senza coprirlo */
[data-penna] > *:not(.penna){
  position:relative;
  z-index:2;
}


/* ------------------------------------------------------------
   SENZA JAVASCRIPT
   Non e' un errore da nascondere: senza js restano dei bordi
   normali, sottili. Quando lo script parte mette la classe
   .penna-attiva su <html> e i bordi diventano trasparenti —
   trasparenti e non tolti, cosi' le misure non cambiano e
   niente salta.
   ------------------------------------------------------------ */

[data-penna="riquadro"]{
  border:1.5px solid var(--inchiostro);
}
.penna-attiva [data-penna="riquadro"]{
  border-color:transparent;
}


/* ------------------------------------------------------------
   COLORE DELL'INCHIOSTRO
   I tratti usano currentColor: basta cambiare `color`.
   ------------------------------------------------------------ */

.inchiostro-rosso{ color:var(--rosso); }
.inchiostro-oro  { color:var(--oro); }
.inchiostro-lieve{ color:var(--grigio-lieve); }
.inchiostro-carta{ color:var(--carta); }


/* ------------------------------------------------------------
   PEZZI DISEGNATI
   ------------------------------------------------------------ */

/* riga di separazione fra due sezioni */
.tratto{
  height:16px;
  margin:44px 0;
  border:0;
  color:var(--inchiostro);
}

/* sottolineatura sotto un titolo */
.sottotratto{
  height:12px;
  margin:6px 0 0;
  color:var(--inchiostro);
}

/* parola cerchiata a penna */
.cerchiata{
  display:inline-block;
  padding:1px 9px;
  color:var(--rosso);
}
.cerchiata > span{ color:var(--inchiostro); }

/* voce cancellata con una riga sopra */
.cancellata{
  color:var(--grigio);
}
.cancellata .penna{ color:var(--rosso); }

/* campitura a righine: l'ombra dei disegni a penna */
.tratteggio{
  overflow:hidden;        /* qui l'inchiostro sta dentro i bordi */
  color:var(--inchiostro);
}

/* gocce che colano da un bordo. Alte quanto serve ma con lo
   stesso valore negativo di margine sotto: occupano zero e
   colano sopra a quello che viene dopo */
.colature{
  position:relative;
  z-index:3;
  height:38px;
  margin-bottom:-38px;
  pointer-events:none;
  color:var(--rosso);
}

/* la riga cancellata e' un blocco in linea: il disegno si misura
   sul rettangolo dell'elemento, e su una frase che va a capo il
   rettangolo non vorrebbe piu' dire niente. Vale per poche parole,
   non per un periodo intero. */
.cancellata{ display:inline-block; }