/* ===== INIZIO SEZIONE: codesample ===== */
/* CSS di Prism per JCE Code Sample: sostituisce media/plg_jce_editor_codesample/vendor/prism/css/prism.min.css
   (parametro "Custom Prism CSS" del plugin e del profilo JCE). Le costanti --kw-color-* vengono dal brand kit in custom.css. */

/* Su :root e non sul pre, così una variante si ottiene ridefinendole su un antenato (contesto) o sul pre (.language-xxx). */
:root
{
    /* Quasi-nero della stessa tinta della pagina: si stacca sia dalla pagina sia dalla scheda dei tab. */
    --kw-code-bg: #1d1c22;
    --kw-code-color: var(--kw-color-text);
    --kw-code-radius: 8px;
    --kw-code-font: var(--kw-font-mono);
    --kw-code-selection: rgba(217, 255, 157, 0.25);
    --kw-code-comment: #9b9aa5;
    --kw-code-comment-style: italic;
    --kw-code-punctuation: #b8b7c0;
    --kw-code-keyword: var(--kw-color-accent);
    --kw-code-string: #f2c891;
    --kw-code-function: #8fd3ff;
    --kw-code-number: #f5a97f;
    --kw-code-operator: #b8b7c0;
    --kw-code-tag: #ffadc2;
    --kw-code-attr: #c9bcff;
    --kw-code-regex: #f5a97f;
    --kw-code-line-numbers: var(--kw-color-muted);
    --kw-code-line-numbers-border: var(--kw-color-border);
    --kw-copy-color: var(--kw-color-muted);
    --kw-copy-color-hover: var(--kw-color-text);
    --kw-copy-border: var(--kw-color-border);
}

/* Temi selezionabili dallo stile del template (attributo data-kw-code-theme su <html>, scritto da index.php).
   Colori presi da node_modules/prismjs/themes/: dei temi si riportano solo i colori, la struttura resta questa. */
/* Prism (chiaro): prism.css */
:root[data-kw-code-theme="prism"]
{
    --kw-code-bg: #f5f2f0;
    --kw-code-color: black;
    --kw-code-selection: #b3d4fc;
    --kw-code-comment-style: normal;
    --kw-code-comment: slategray;
    --kw-code-punctuation: #999;
    --kw-code-keyword: #07a;
    --kw-code-string: #690;
    --kw-code-function: #DD4A68;
    --kw-code-number: #905;
    --kw-code-operator: #9a6e3a;
    --kw-code-tag: #905;
    --kw-code-attr: #690;
    --kw-code-regex: #e90;
    --kw-code-line-numbers: rgba(0, 0, 0, 0.4);
    --kw-code-line-numbers-border: rgba(0, 0, 0, 0.12);
    --kw-copy-color: rgba(0, 0, 0, 0.5);
    --kw-copy-color-hover: var(--kw-code-color);
    --kw-copy-border: rgba(0, 0, 0, 0.15);
    --kw-code-token-attr-value: #07a;
    --kw-code-token-url: #9a6e3a;
    --kw-code-token-builtin: #690;
    --kw-code-token-selector: #690;
    --kw-code-token-property: #905;
}

/* Coy (chiaro): prism-coy.css */
:root[data-kw-code-theme="coy"]
{
    --kw-code-bg: #fdfdfd;
    --kw-code-color: black;
    --kw-code-selection: #b3d4fc;
    --kw-code-comment-style: normal;
    --kw-code-comment: #7D8B99;
    --kw-code-punctuation: #5F6364;
    --kw-code-keyword: #1990b8;
    --kw-code-string: #2f9c0a;
    --kw-code-function: #2f9c0a;
    --kw-code-number: #c92c2c;
    --kw-code-operator: #a67f59;
    --kw-code-tag: #c92c2c;
    --kw-code-attr: #2f9c0a;
    --kw-code-regex: #e90;
    --kw-code-line-numbers: rgba(0, 0, 0, 0.4);
    --kw-code-line-numbers-border: rgba(0, 0, 0, 0.12);
    --kw-copy-color: rgba(0, 0, 0, 0.5);
    --kw-copy-color-hover: var(--kw-code-color);
    --kw-copy-border: rgba(0, 0, 0, 0.15);
    --kw-code-token-attr-value: #1990b8;
    --kw-code-token-url: #a67f59;
    --kw-code-token-class-name: #1990b8;
    --kw-code-token-selector: #2f9c0a;
    --kw-code-token-property: #c92c2c;
    --kw-code-token-variable: #a67f59;
}

/* Solarized Light (chiaro): prism-solarizedlight.css */
:root[data-kw-code-theme="solarizedlight"]
{
    --kw-code-bg: #fdf6e3;
    --kw-code-color: #657b83;
    --kw-code-selection: #073642;
    --kw-code-comment-style: normal;
    --kw-code-comment: #93a1a1;
    --kw-code-punctuation: #586e75;
    --kw-code-keyword: #859900;
    --kw-code-string: #2aa198;
    --kw-code-function: #b58900;
    --kw-code-number: #268bd2;
    --kw-code-operator: var(--kw-code-color);
    --kw-code-tag: #268bd2;
    --kw-code-attr: #2aa198;
    --kw-code-regex: #cb4b16;
    --kw-code-line-numbers: rgba(0, 0, 0, 0.4);
    --kw-code-line-numbers-border: rgba(0, 0, 0, 0.12);
    --kw-copy-color: rgba(0, 0, 0, 0.5);
    --kw-copy-color-hover: var(--kw-code-color);
    --kw-copy-border: rgba(0, 0, 0, 0.15);
    --kw-code-token-attr-value: #859900;
    --kw-code-token-builtin: #2aa198;
    --kw-code-token-entity: #657b83;
    --kw-code-token-selector: #2aa198;
    --kw-code-token-property: #268bd2;
}

/* Dark (scuro): prism-dark.css */
:root[data-kw-code-theme="dark"]
{
    --kw-code-bg: hsl(30, 20%, 25%);
    --kw-code-color: white;
    --kw-code-selection: rgba(255, 255, 255, 0.15);
    --kw-code-comment-style: normal;
    --kw-code-comment: hsl(30, 20%, 50%);
    --kw-code-punctuation: var(--kw-code-color);
    --kw-code-keyword: hsl(350, 40%, 70%);
    --kw-code-string: hsl(75, 70%, 60%);
    --kw-code-function: var(--kw-code-color);
    --kw-code-number: hsl(350, 40%, 70%);
    --kw-code-operator: hsl(40, 90%, 60%);
    --kw-code-tag: hsl(350, 40%, 70%);
    --kw-code-attr: hsl(75, 70%, 60%);
    --kw-code-regex: #e90;
    --kw-code-line-numbers: rgba(255, 255, 255, 0.4);
    --kw-code-line-numbers-border: rgba(255, 255, 255, 0.12);
    --kw-copy-color: rgba(255, 255, 255, 0.5);
    --kw-copy-color-hover: var(--kw-code-color);
    --kw-copy-border: rgba(255, 255, 255, 0.12);
    --kw-code-token-attr-value: hsl(350, 40%, 70%);
    --kw-code-token-url: hsl(40, 90%, 60%);
    --kw-code-token-builtin: hsl(75, 70%, 60%);
    --kw-code-token-selector: hsl(75, 70%, 60%);
    --kw-code-token-deleted: red;
    --kw-code-token-property: hsl(350, 40%, 70%);
    --kw-code-token-variable: hsl(40, 90%, 60%);
}

/* Funky (scuro): prism-funky.css */
:root[data-kw-code-theme="funky"]
{
    --kw-code-bg: black;
    --kw-code-color: white;
    --kw-code-selection: rgba(255, 255, 255, 0.15);
    --kw-code-comment-style: normal;
    --kw-code-comment: #aaa;
    --kw-code-punctuation: #999;
    --kw-code-keyword: deeppink;
    --kw-code-string: yellow;
    --kw-code-function: var(--kw-code-color);
    --kw-code-number: #0cf;
    --kw-code-operator: yellowgreen;
    --kw-code-tag: #0cf;
    --kw-code-attr: yellow;
    --kw-code-regex: orange;
    --kw-code-line-numbers: rgba(255, 255, 255, 0.4);
    --kw-code-line-numbers-border: rgba(255, 255, 255, 0.12);
    --kw-copy-color: rgba(255, 255, 255, 0.5);
    --kw-copy-color-hover: var(--kw-code-color);
    --kw-copy-border: rgba(255, 255, 255, 0.12);
    --kw-code-token-attr-value: deeppink;
    --kw-code-token-url: yellowgreen;
    --kw-code-token-inserted: yellowgreen;
    --kw-code-token-builtin: yellow;
    --kw-code-token-selector: yellow;
    --kw-code-token-deleted: red;
    --kw-code-token-property: #0cf;
    --kw-code-token-variable: yellowgreen;
}

/* Okaidia (scuro): prism-okaidia.css */
:root[data-kw-code-theme="okaidia"]
{
    --kw-code-bg: #272822;
    --kw-code-color: #f8f8f2;
    --kw-code-selection: rgba(255, 255, 255, 0.15);
    --kw-code-comment-style: normal;
    --kw-code-comment: #8292a2;
    --kw-code-punctuation: #f8f8f2;
    --kw-code-keyword: #66d9ef;
    --kw-code-string: #a6e22e;
    --kw-code-function: #e6db74;
    --kw-code-number: #ae81ff;
    --kw-code-operator: #f8f8f2;
    --kw-code-tag: #f92672;
    --kw-code-attr: #a6e22e;
    --kw-code-regex: #fd971f;
    --kw-code-line-numbers: rgba(255, 255, 255, 0.4);
    --kw-code-line-numbers-border: rgba(255, 255, 255, 0.12);
    --kw-copy-color: rgba(255, 255, 255, 0.5);
    --kw-copy-color-hover: var(--kw-code-color);
    --kw-copy-border: rgba(255, 255, 255, 0.12);
    --kw-code-token-atrule: #e6db74;
    --kw-code-token-attr-value: #e6db74;
    --kw-code-token-url: #f8f8f2;
    --kw-code-token-builtin: #a6e22e;
    --kw-code-token-constant: #f92672;
    --kw-code-token-symbol: #f92672;
    --kw-code-token-selector: #a6e22e;
    --kw-code-token-property: #f92672;
    --kw-code-token-variable: #f8f8f2;
}

/* Tomorrow Night (scuro): prism-tomorrow.css */
:root[data-kw-code-theme="tomorrow"]
{
    --kw-code-bg: #2d2d2d;
    --kw-code-color: #ccc;
    --kw-code-selection: rgba(255, 255, 255, 0.15);
    --kw-code-comment-style: normal;
    --kw-code-comment: #999;
    --kw-code-punctuation: #ccc;
    --kw-code-keyword: #cc99cd;
    --kw-code-string: #7ec699;
    --kw-code-function: #f08d49;
    --kw-code-number: #f08d49;
    --kw-code-operator: #67cdcc;
    --kw-code-tag: #e2777a;
    --kw-code-attr: #e2777a;
    --kw-code-regex: #7ec699;
    --kw-code-line-numbers: rgba(255, 255, 255, 0.4);
    --kw-code-line-numbers-border: rgba(255, 255, 255, 0.12);
    --kw-copy-color: rgba(255, 255, 255, 0.5);
    --kw-copy-color-hover: var(--kw-code-color);
    --kw-copy-border: rgba(255, 255, 255, 0.12);
    --kw-code-token-url: #67cdcc;
    --kw-code-token-inserted: green;
    --kw-code-token-class-name: #f8c555;
    --kw-code-token-builtin: #cc99cd;
    --kw-code-token-constant: #f8c555;
    --kw-code-token-symbol: #f8c555;
    --kw-code-token-selector: #cc99cd;
    --kw-code-token-property: #f8c555;
    --kw-code-token-important: #cc99cd;
}

/* Twilight (scuro): prism-twilight.css */
:root[data-kw-code-theme="twilight"]
{
    --kw-code-bg: hsl(0, 0%, 8%);
    --kw-code-color: white;
    --kw-code-selection: hsla(0, 0%, 93%, 0.15);
    --kw-code-comment-style: normal;
    --kw-code-comment: hsl(0, 0%, 47%);
    --kw-code-punctuation: var(--kw-code-color);
    --kw-code-keyword: hsl(53, 89%, 79%);
    --kw-code-string: hsl(76, 21%, 52%);
    --kw-code-function: var(--kw-code-color);
    --kw-code-number: hsl(14, 58%, 55%);
    --kw-code-operator: hsl(76, 21%, 52%);
    --kw-code-tag: hsl(14, 58%, 55%);
    --kw-code-attr: hsl(76, 21%, 52%);
    --kw-code-regex: hsl(42, 75%, 65%);
    --kw-code-line-numbers: rgba(255, 255, 255, 0.4);
    --kw-code-line-numbers-border: rgba(255, 255, 255, 0.12);
    --kw-copy-color: rgba(255, 255, 255, 0.5);
    --kw-copy-color-hover: var(--kw-code-color);
    --kw-copy-border: rgba(255, 255, 255, 0.12);
    --kw-code-token-atrule: hsl(218, 22%, 55%);
    --kw-code-token-builtin: hsl(53, 89%, 79%);
    --kw-code-token-constant: hsl(53, 89%, 79%);
    --kw-code-token-symbol: hsl(53, 89%, 79%);
    --kw-code-token-selector: hsl(53, 89%, 79%);
    --kw-code-token-property: hsl(53, 89%, 79%);
    --kw-code-token-variable: hsl(76, 21%, 52%);
}

code[class*="language-"],
pre[class*="language-"]
{
    color: var(--kw-code-color);
    background: none;
    font-family: var(--kw-code-font);
    /* JetBrains Mono ha le legature attive: -> diventerebbe una freccia e chi ricopia scriverebbe il carattere sbagliato. */
    font-variant-ligatures: none;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.6;
    tab-size: 4;
    hyphens: none;
    border: 0;
}

pre[class*="language-"]
{
    margin: 0 0 1rem;
    padding: 1.25rem;
    overflow: auto;
    background-color: var(--kw-code-bg);
    border-radius: var(--kw-code-radius);
}

div.code-toolbar:last-child > pre[class*="language-"]
{
    margin-bottom: 0;
}

:not(pre) > code[class*="language-"]
{
    padding: 0.1em 0.3em;
    background-color: var(--kw-code-bg);
    border-radius: 0.3em;
    white-space: normal;
}

pre[class*="language-"] ::selection,
code[class*="language-"] ::selection
{
    background: var(--kw-code-selection);
}

/* Ogni token ha una variabile propria che ripiega su quella del gruppo: i temi Prism raggruppano i token
   in modo diverso e impostano la variabile del token solo dove si discostano dal gruppo. */
.token.comment
{
    color: var(--kw-code-token-comment, var(--kw-code-comment));
    font-style: var(--kw-code-comment-style);
}

.token.prolog
{
    color: var(--kw-code-token-prolog, var(--kw-code-comment));
    font-style: var(--kw-code-comment-style);
}

.token.doctype
{
    color: var(--kw-code-token-doctype, var(--kw-code-comment));
    font-style: var(--kw-code-comment-style);
}

.token.cdata
{
    color: var(--kw-code-token-cdata, var(--kw-code-comment));
    font-style: var(--kw-code-comment-style);
}

.token.punctuation
{
    color: var(--kw-code-token-punctuation, var(--kw-code-punctuation));
}

.token.keyword
{
    color: var(--kw-code-token-keyword, var(--kw-code-keyword));
}

.token.atrule
{
    color: var(--kw-code-token-atrule, var(--kw-code-keyword));
}

.token.string
{
    color: var(--kw-code-token-string, var(--kw-code-string));
}

.token.char
{
    color: var(--kw-code-token-char, var(--kw-code-string));
}

.token.attr-value
{
    color: var(--kw-code-token-attr-value, var(--kw-code-string));
}

.token.url
{
    color: var(--kw-code-token-url, var(--kw-code-string));
}

.token.inserted
{
    color: var(--kw-code-token-inserted, var(--kw-code-string));
}

.token.function
{
    color: var(--kw-code-token-function, var(--kw-code-function));
}

.token.class-name
{
    color: var(--kw-code-token-class-name, var(--kw-code-function));
}

.token.builtin
{
    color: var(--kw-code-token-builtin, var(--kw-code-function));
}

.token.number
{
    color: var(--kw-code-token-number, var(--kw-code-number));
}

.token.boolean
{
    color: var(--kw-code-token-boolean, var(--kw-code-number));
}

.token.constant
{
    color: var(--kw-code-token-constant, var(--kw-code-number));
}

.token.symbol
{
    color: var(--kw-code-token-symbol, var(--kw-code-number));
}

/* JCE azzera lo sfondo degli operatori per battere gli stili del template. */
.token.operator
{
    color: var(--kw-code-token-operator, var(--kw-code-operator));
    background: none;
}

.token.entity
{
    color: var(--kw-code-token-entity, var(--kw-code-operator));
    background: none;
}

.token.tag
{
    color: var(--kw-code-token-tag, var(--kw-code-tag));
}

.token.selector
{
    color: var(--kw-code-token-selector, var(--kw-code-tag));
}

.token.deleted
{
    color: var(--kw-code-token-deleted, var(--kw-code-tag));
}

.token.attr-name
{
    color: var(--kw-code-token-attr-name, var(--kw-code-attr));
}

.token.property
{
    color: var(--kw-code-token-property, var(--kw-code-attr));
}

.token.regex
{
    color: var(--kw-code-token-regex, var(--kw-code-regex));
}

.token.important
{
    color: var(--kw-code-token-important, var(--kw-code-regex));
}

.token.variable
{
    color: var(--kw-code-token-variable, var(--kw-code-regex));
}

.token.bold,
.token.important
{
    font-weight: bold;
}

.token.italic
{
    font-style: italic;
}

/* .tag è anche una classe del template: il token non deve prenderne padding e display. */
pre code[class*="language-"] .tag
{
    display: inline;
    margin: 0;
    padding: 0;
}

/* Plugin line-numbers */
pre[class*="language-"].line-numbers
{
    position: relative;
    padding-left: 3.8em;
    counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code
{
    position: relative;
    white-space: inherit;
}

.line-numbers .line-numbers-rows
{
    position: absolute;
    top: 0;
    left: -3.8em;
    width: 3em;
    font-size: 100%;
    letter-spacing: -1px;
    border-right: 1px solid var(--kw-code-line-numbers-border);
    pointer-events: none;
    user-select: none;
}

.line-numbers-rows > span
{
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span::before
{
    content: counter(linenumber);
    display: block;
    padding-right: 0.8em;
    color: var(--kw-code-line-numbers);
    text-align: right;
}

/* Plugin toolbar e pulsante copia di JCE (media/plg_jce_editor_codesample/js/script.js) */
div.code-toolbar
{
    position: relative;
}

div.code-toolbar > .toolbar
{
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
}

div.code-toolbar > .toolbar > .toolbar-item
{
    display: inline-block;
}

div.code-toolbar > .toolbar .toolbar-item > .copy-to-clipboard-button
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0.5em;
    color: var(--kw-copy-color);
    background: none;
    border: 1px solid var(--kw-copy-border);
    border-radius: 6px;
    box-shadow: none;
    cursor: pointer;
    transition: color 200ms;
}

div.code-toolbar > .toolbar .toolbar-item > .copy-to-clipboard-button:hover,
div.code-toolbar > .toolbar .toolbar-item > .copy-to-clipboard-button:focus-visible
{
    color: var(--kw-copy-color-hover);
}

div.code-toolbar > .toolbar .toolbar-item > .copy-to-clipboard-button.copy-to-clipboard-button-label::after
{
    content: attr(aria-label);
    margin-left: 0.25em;
    font-weight: 400;
}

/* JCE mette nel pulsante tre SVG, uno per stato: si mostra solo quello dello stato corrente. */
div.code-toolbar > .toolbar .toolbar-item > .copy-to-clipboard-button svg
{
    display: none;
}

div.code-toolbar > .toolbar .toolbar-item > .copy-to-clipboard-button[data-copy-state="copy"] svg.copy-to-clipboard-button-icon-copy,
div.code-toolbar > .toolbar .toolbar-item > .copy-to-clipboard-button[data-copy-state="copy-success"] svg.copy-to-clipboard-button-icon-success,
div.code-toolbar > .toolbar .toolbar-item > .copy-to-clipboard-button[data-copy-state="copy-error"] svg.copy-to-clipboard-button-icon-error
{
    display: inline-block;
}

/* Su schermi stretti la prima riga arriva sotto il pulsante copia: il codice parte sotto la toolbar. */
@media (max-width: 575.98px)
{
    div.code-toolbar > pre[class*="language-"]
    {
        padding-top: 3.25rem;
    }
}

/* ===== FINE SEZIONE: codesample ===== */