/* Ornamento botanico line-art ("fogliolina"): variazioni di stile del blocco
   core/separator, registrate in functions.php.

   Perché un separatore e non un blocco HTML: nell'editor core/html è mostrato
   dentro un iframe sandbox con fondo bianco, quindi un disegno chiaro su banda
   scura risultava invisibile (una barra bianca). Un <hr> si vede identico in
   editor e front-end, ed è anche semanticamente corretto.

   Perché una MASCHERA e non un background-image: dentro un data-URI il colore
   è scritto nel file, quindi currentColor e le custom property non funzionano
   (era il motivo per cui esistevano due disegni, chiaro e scuro). Come
   mask-image il disegno è solo una forma e il colore lo dà background-color.

   Il colore: il selettore del blocco funziona senza patch, perché core/separator
   serializza la scelta come `has-<slug>-color` — cioè come `color`, e le classi
   preset di theme.json sono in !important, quindi vincono su tutto. Qui sotto
   c'è solo il default (salvia), che deve battere il `color: accent-7` che
   theme.json assegna a tutti i separatori: la sua regola è dentro un :where(),
   quindi basta una specificità normale. Sulle bande scure il colore chiaro va
   scelto sul blocco (accent-5), come fa il pattern "ornamento-chiaro". */

.wp-block-separator:is(
    .is-style-fogliolina,
    .is-style-fogliolina-sinistra,
    .is-style-fogliolina-destra
  ) {
  --vb-fogliolina: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M4 12 C 16 12, 32 12, 44 12'/%3E%3Cpath d='M24 12 C 20 6, 14 4, 8 5 C 12 10, 18 12, 24 12 Z'/%3E%3Cpath d='M24 12 C 28 6, 34 4, 40 5 C 36 10, 30 12, 24 12 Z'/%3E%3C/svg%3E");
  --vb-fogliolina-size: 44px 22px;
  --vb-fogliolina-position: center;

  border: 0;
  width: 100%;
  height: 22px;
  color: var(--wp--preset--color--accent-1);
  background-color: currentColor;
  -webkit-mask-image: var(--vb-fogliolina);
  mask-image: var(--vb-fogliolina);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--vb-fogliolina-size);
  mask-size: var(--vb-fogliolina-size);
  -webkit-mask-position: var(--vb-fogliolina-position);
  mask-position: var(--vb-fogliolina-position);
}

/* Allineamento: per sezioni con titolo non centrato */
.wp-block-separator.is-style-fogliolina-sinistra {
  --vb-fogliolina-position: left center;
}

.wp-block-separator.is-style-fogliolina-destra {
  --vb-fogliolina-position: right center;
}

/* Modificatore componibile con qualsiasi allineamento (campo "Classi CSS
   aggiuntive"): stesso disegno con due filetti laterali, per le bande larghe.
   I filetti sono disegnati dentro l'SVG — a mezza opacità, che nella maschera
   si traduce in una tinta più tenue — invece che con pseudo-elementi, così
   restano allineati al disegno a qualsiasi misura. */
.wp-block-separator.vb-fogliolina--linee {
  --vb-fogliolina: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 12 H 52' opacity='0.55'/%3E%3Cpath d='M60 12 C 72 12, 88 12, 100 12'/%3E%3Cpath d='M80 12 C 76 6, 70 4, 64 5 C 68 10, 74 12, 80 12 Z'/%3E%3Cpath d='M80 12 C 84 6, 90 4, 96 5 C 92 10, 86 12, 80 12 Z'/%3E%3Cpath d='M108 12 H 160' opacity='0.55'/%3E%3C/svg%3E");
  --vb-fogliolina-size: 160px 22px;
}