/*
 * Slogan Studio - strato di design del tema child.
 *
 * Porta su tutto il sito il linguaggio delle pagine case study: nero pieno,
 * bianco, titoli stretti, etichette maiuscole spaziate. Il tema padre
 * resta intatto: qui si sovrascrive soltanto, e togliendo l'accodamento in
 * functions.php il sito torna esattamente com'era.
 *
 * Ordine dei blocchi:
 *   1  Font
 *   2  Token
 *   3  Tipografia
 *   4  Colori della demo scritti a mano nel tema
 *   5  Pulsanti
 *   6  Link
 *   7  Card e box
 *   8  Etichette e occhielli
 *   9  Form
 *   10 Header
 *   11 Footer
 *   12 Preloader
 *   13 Movimento
 */

/* ------------------------------------------------------------------ *
 * 1. Font
 *
 * Il tema chiama 'ClashDisplay-SemiBold.woff2' ma sul server il file si
 * chiama 'ClashDisplay-Semibold.woff2' con la b minuscola: Linux distingue
 * le maiuscole, quindi il peso 600 va in 404 su ogni pagina e il browser
 * ripiega su un finto grassetto sintetico. Qui lo ridichiariamo con il nome
 * giusto. Arrivando dopo, questa dichiarazione ha la precedenza.
 *
 * Il peso 800 (ExtraBold) e' dichiarato dal tema ma il file non esiste
 * proprio: lo rimandiamo al Bold, cosi' smette di scaricare a vuoto.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * Inter Tight
 *
 * E' il carattere dei titoli del sito. Un file solo: e' un carattere
 * variabile, quindi tutti i pesi da 100 a 900 stanno in 45 KB invece che in
 * un file per peso. Sta sul nostro server e non su Google: una richiesta
 * esterna in meno da attendere, e nessun indirizzo IP dei visitatori
 * spedito a un terzo senza averlo chiesto.
 * ------------------------------------------------------------------ */

/* Inter, per il testo corrente.
 *
 * E' la famiglia da cui deriva Inter Tight: stesse proporzioni, stessi
 * dettagli, ma disegnata per essere letta a corpo piccolo invece che vista a
 * corpo grande. Insieme fanno una coppia sola, e non due caratteri che si
 * sopportano.
 *
 * Prima qui c'era lo stack di sistema: corretto come ripiego, ma vuol dire
 * che il sito ha un aspetto diverso su ogni computer - Segoe su Windows, San
 * Francisco su Mac, chissa' cosa su Android. Per un sito che vende immagine
 * coordinata era la cosa peggiore da lasciare al caso. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter.woff2") format("woff2-variations"),
       url("../fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/InterTight.woff2") format("woff2-variations"),
       url("../fonts/InterTight.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("../../../grative/assets/fonts/clashdisplay/ClashDisplay-Semibold.woff2") format("woff2"),
       url("../../../grative/assets/fonts/clashdisplay/ClashDisplay-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("../../../grative/assets/fonts/clashdisplay/ClashDisplay-Bold.woff2") format("woff2"),
       url("../../../grative/assets/fonts/clashdisplay/ClashDisplay-Bold.woff") format("woff");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ *
 * 2. Token
 *
 * Gli stessi valori del prototipo case study, cosi' i due mondi combaciano
 * davvero invece di somigliarsi.
 *
 * Il selettore e' 'html:root' e non ':root': il tema stampa le proprie
 * variabili in uno <style> inline su ':root', che vale (0,0,1). Aggiungendo
 * il tipo html saliamo a (0,0,2) e vinciamo comunque, senza dipendere
 * dall'ordine di caricamento - che con il CSS inline non e' garantito.
 * ------------------------------------------------------------------ */

html:root {
  --slg-ink: #080808;
  --slg-ink-soft: #111111;
  --slg-ink-lift: #16161a;
  --slg-paper: #ece9e1;
  --slg-paper-bright: #ffffff;
  --slg-silver: #c9c9c7;
  --slg-silver-dark: #6c6d70;

  --slg-line-dark: rgba(255, 255, 255, .18);
  --slg-line-soft: rgba(255, 255, 255, .10);
  --slg-line-light: rgba(8, 8, 8, .18);

  --slg-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --slg-font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --slg-font-serif: Georgia, "Times New Roman", serif;

  --slg-ease: cubic-bezier(.22, .72, .2, 1);

  /* Riaggancio delle variabili del tema. Le stesse cose si impostano anche
     nelle opzioni tema, ma quei campi possono essere rinominati o spariti in
     un aggiornamento: qui restano scritte, come rete di sicurezza. */
  --primary-color: #ece9e1;
  --primary-color-rgb: 236, 233, 225;
  --four-color: #ffffff;
  --four-color-rgb: 255, 255, 255;
  --body_bg-color: #080808;
  --body_bg-color-rgb: 8, 8, 8;
  --link-color: #ece9e1;
  --link-color-hover: #ffffff;
  --link-color-active: #ffffff;
  --gradient-color-from: #ece9e1;
  --gradient-color-to: #ffffff;
  --gradient-two-color-from_two: #111111;
  --gradient-two-color-to_two: #080808;
}

/* ------------------------------------------------------------------ *
 * 3. Tipografia
 *
 * Il tema usa Clash Display per tutto, testo compreso, a 18px. E' il motivo
 * principale per cui il sito sembra piatto: senza stacco fra titolo e testo
 * non c'e' gerarchia, e un display face sui paragrafi si legge peggio.
 *
 * Qui si separano i due ruoli: Clash Display resta ai titoli, il testo passa
 * allo stack di sistema. Nessuna richiesta di rete in piu'.
 * ------------------------------------------------------------------ */

body {
  color: var(--slg-paper);
  background-color: var(--slg-ink);
  font-family: var(--slg-font-sans);
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: .002em;
}

/* Le famiglie della demo (IBM Plex Mono, Host Grotesk, Manrope, Bebas Neue,
   DM Sans, Inter Tight) restano scritte dentro le impostazioni dei singoli
   widget. Quelle si ripuliscono a mano; questa e' la rete per tutto il resto
   del tema, dove le stesse famiglie compaiono nel foglio padre. */
body,
p,
li,
td,
th,
dd,
dt,
figcaption,
blockquote,
label,
input,
select,
textarea,
.pxl-item--desc,
.pxl-item--text,
.pxl-item--subtext,
.pxl-text-editor,
.elementor-widget-text-editor,
.widget-content {
  font-family: var(--slg-font-sans);
}

/*
 * Il '!important' su famiglia e colore non e' pigrizia.
 *
 * Sulla sola home ci sono 61 impostazioni di famiglia tipografica salvate
 * dentro i widget - Inter Tight 31 volte, IBM Plex Mono 17, Host Grotesk 9,
 * Anton 4 - e 80 colori pieni, quasi tutti bianco #FFFFFF. Elementor li
 * stampa con selettori a cinque classi: senza '!important' non si toccano.
 *
 * Conseguenza da sapere: finche' queste righe restano, cambiare colore o
 * font di un titolo dal pannello Elementor non produce effetto. La
 * correzione definitiva e' togliere quei valori dai widget (Strumenti >
 * Slogan Restyle); fatto quello, questi '!important' si possono togliere.
 *
 * Le esclusioni tengono fuori quello che ha gia' una tipografia sua e
 * accordata: le pagine case study (.slgn-cs), quelle del plugin sito
 * (.slgn-ws) e il guscio - testata e piede - che dalla stessa mano arriva
 * (.slgn-hdr, .slgn-ftr). Il guscio si e' aggiunto per ultimo, e il giorno
 * che e' arrivato il titolo dell'invito nel piede e' diventato avorio su
 * avorio: e' esattamente il danno descritto due righe piu' sotto. Senza, succedevano due danni: i titoli del case
 * study, disegnati su una famiglia larga, cambiavano larghezza fino a
 * sovrapporsi ai blocchi accanto; e nelle sezioni a fondo chiaro
 * diventavano color carta su carta, cioe' invisibili.
 */
h1:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *),
h2:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *),
h3:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *),
h4:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *),
h5:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *),
h6:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *),
.h1, .h2, .h3, .h4, .h5, .h6,
.pxl-item--title,
.pxl-heading .pxl-item--title,
.pxl-post--title,
.pxl-widget-title,
.pxl-counter--number,
.pxl-counter--value {
  color: var(--slg-paper) !important;
  font-family: var(--slg-font-display) !important;
  /* 500 e non 600: Inter Tight a 600 in maiuscolo diventa un muro. A 500 il
     titolo resta pieno ma si legge come una riga di testo, non come un
     cartello. */
  font-weight: 500 !important;
  /* Maiuscolo su tutti i titoli. Il tema metteva 'capitalize', che in
     italiano produce Maiuscole In Mezzo Alla Frase - un errore di battitura
     travestito da stile. */
  text-transform: uppercase !important;
}

/* Scala fluida. Il tema fissa 72px per l'h1: su un telefono da 390px
   quel titolo esce dallo schermo.

   Il tracking e' rifatto per il maiuscolo. I valori di prima - fino a
   -.045em - erano tarati su un display face in minuscolo, dove stringere
   compatta le parole. In maiuscolo le lettere hanno tutte la stessa altezza
   e nessuna asta che sporge: stringerle le fa toccare. Qui il segno si
   inverte, e piu' il corpo e' piccolo piu' l'aria aumenta, perche' e' li'
   che le maiuscole si impastano. */
h1, .h1 {
  font-size: clamp(2.6rem, 5.9vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -.012em;
}

h2, .h2 {
  font-size: clamp(2.05rem, 4.4vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -.008em;
}

h3, .h3 {
  font-size: clamp(1.6rem, 3.1vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: 0;
}

h4, .h4 {
  font-size: clamp(1.18rem, 1.8vw, 1.42rem);
  line-height: 1.3;
  letter-spacing: .01em;
}

h5, .h5 {
  font-size: 1.14rem;
  line-height: 1.4;
  letter-spacing: .018em;
}

h6, .h6 {
  font-size: .98rem;
  line-height: 1.4;
  letter-spacing: .026em;
}

/* Il corsivo serif come accento, uguale al case study. Si applica a mano
   sulle parole che devono staccare. */
/* Anche qui serve '!important': l'accento sta dentro un titolo, e la regola
   dei titoli qui sopra ce l'ha. Senza, il corsivo tornerebbe carta. */
.slg-serif,
.slg-accent,
h1 .slg-serif, h2 .slg-serif, h3 .slg-serif,
h1:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *) em,
h2:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *) em,
h3:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *) em,
.pxl-item--title em {
  color: var(--slg-paper-bright) !important;
  font-family: var(--slg-font-serif) !important;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: none;
}

::selection {
  color: var(--slg-ink);
  background: var(--slg-paper-bright);
}

strong, b { font-weight: 600; }

/* ------------------------------------------------------------------ *
 * 4. I colori della demo scritti a mano nel tema
 *
 * Nel foglio del tema padre ci sono 20 occorrenze di #181e00 (verde oliva
 * quasi nero) e 5 di #c5fd44 (verde acido). Non passano da variabile,
 * quindi cambiare la palette nelle opzioni non le tocca.
 *
 * Su fondo chiaro l'oliva funzionava da "quasi nero". Su fondo nero e'
 * testo invisibile. Qui va riscritto ruolo per ruolo: dove faceva da
 * testo diventa carta, dove faceva da fondo diventa bianco.
 * ------------------------------------------------------------------ */

/* -- 4a. Era testo scuro su fondo chiaro: ora e' carta -- */
.pxl-showcase-grid1.default .pxl-grid-item .pxl-item--title,
.widget .widget-title,
.pxl-widget-title,
.wp-block-search__label,
.pxl-sidebar-sticky .widget .wp-block-heading,
.rss-widget-title,
.widget_block .wp-block-search__label,
.widget_pxl_recent_posts .pxl-item--title,
.pxl-blog-grid-layout1 .pxl-grid-item .pxl-post--title,
.pxl-image-carousel2 .pxl-item--title,
.pxl-icon-box4 .pxl-item--inner .pxl-item--title,
.pxl-testimonial-carousel2 .pxl-swiper-slide .pxl-item--holder .pxl-item--title,
.pxl-accordion1.style1 .pxl-accordion--title,
.pxl-team-grid1 .pxl-item--inner .pxl-item--title {
  color: var(--slg-paper);
}

/* Testi di servizio: stessa correzione, un gradino piu' basso di contrasto */
.pxl-icon-box4 .pxl-item--inner .pxl-item--desc,
.pxl-testimonial-carousel2 .pxl-swiper-slide .pxl-item--desc,
.pxl-accordion1.style1 .pxl-accordion--content,
.pxl-accordion1.style4 .pxl-accordion--content {
  color: rgba(236, 233, 225, .72);
}

/* -- 4b. Era fondo scuro pieno: ora e' bianco -- */
.pxl-icon-box4 .pxl-item--inner .pxl-item--icon,
.pxl-text-carousel2 .pxl-swiper-slide.swiper-slide-active .pxl-item--inner::after,
.pxl-text-carousel2 .pxl-swiper-slide.swiper-slide-next .pxl-item--inner::after {
  background-color: var(--slg-paper);
}

/* I pallini di separazione nella griglia showcase */
.pxl-showcase-grid1 .pxl-grid-item .pxl-item--title::after,
.pxl-showcase-grid1 .pxl-grid-item .pxl-item--categories::before,
.pxl-showcase-grid1 .pxl-grid-item .pxl-item--categories::after {
  background-color: var(--slg-paper);
}

/* Il filtro attivo della showcase: era fondo bianco con testo oliva */
.pxl-showcase-grid1.style-2 .pxl-grid-filter .filter-item.active,
.pxl-showcase-grid1.style-2 .pxl-grid-filter .filter-item:hover {
  color: var(--slg-ink);
  background-color: var(--slg-paper);
  border-color: var(--slg-paper);
}

/* -- 4c. Il verde acido -- */
.pxl-navigation-carousel.style-4 .pxl-navigation-arrow svg path {
  fill: var(--slg-paper);
}

.pxl-tabs-slip1.show-shape .pxl-shape-container {
  background-color: var(--slg-paper);
}

/* -- 4d. Il verde delle transizioni fra sezioni, terzo verde della demo -- */
.pxl-swiper-arrow-wrap.style-2 .pxl-swiper-arrow:hover,
.pxl-swiper-arrow-wrap.style-5 .pxl-swiper-arrow:hover,
.pxl-swiper-arrow-wrap.style-6 .pxl-swiper-arrow:hover {
  color: var(--slg-ink);
  background-color: var(--slg-paper);
}

/* ------------------------------------------------------------------ *
 * 5. Pulsanti
 *
 * Il CSS del tema per i pulsanti e' gia' corretto: '.btn:not(.btn-stroke)'
 * usa var(--primary-color) per il fondo e var(--secondary-color) per il
 * testo. Il bianco pieno arriva dalle regole che Elementor genera per
 * singolo widget, stampate inline nella pagina:
 *
 *   .elementor-9724 .elementor-element.elementor-element-5454a5b
 *     .pxl-button .btn { color:#000; background-color:#FFF }
 *
 * Cinque classi: (0,5,0). Un foglio esterno non ci arriva nemmeno
 * ripetendo i selettori, quindi qui serve '!important' sulle proprieta' di
 * colore. Non e' una scorciatoia: e' l'unico peso disponibile.
 *
 * I valori dentro i widget vanno comunque ripuliti a mano - a quel punto
 * queste righe restano solo come rete.
 * ------------------------------------------------------------------ */

.pxl-button .btn:not(.btn-stroke),
.pxl-button a.btn:not(.btn-stroke),
.btn:not(.btn-stroke) {
  color: var(--slg-ink) !important;
  background-color: var(--slg-paper) !important;
  border-color: var(--slg-paper) !important;
  font-family: var(--slg-font-display) !important;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 0;
  transition: transform .35s var(--slg-ease),
              background-color .35s var(--slg-ease),
              color .35s var(--slg-ease);
}

.pxl-button .btn:not(.btn-stroke) i,
.btn:not(.btn-stroke) i {
  color: var(--slg-ink) !important;
}

.pxl-button .btn:not(.btn-stroke) svg path,
.btn:not(.btn-stroke) svg path {
  fill: var(--slg-ink) !important;
}

.pxl-button .btn:not(.btn-stroke):hover,
.btn:not(.btn-stroke):hover {
  color: var(--slg-ink) !important;
  background-color: var(--slg-paper-bright) !important;
  border-color: var(--slg-paper-bright) !important;
  transform: translateY(-2px);
}

/* L'effetto "tendina" del tema: una barra che sale dal basso al passaggio.
   Il colore lo scrive il widget (spesso nero su nero), qui si riporta in riga. */
.pxl-button .btn-hide-icon .pxl--btn-text::before,
.btn .pxl--btn-text::before {
  background-color: var(--slg-ink) !important;
}

/* Variante secondaria: solo contorno */
.pxl-button .btn.btn-stroke,
.btn.btn-stroke {
  color: var(--slg-paper) !important;
  background-color: transparent !important;
  border: 1px solid var(--slg-line-dark) !important;
  font-family: var(--slg-font-display) !important;
  font-weight: 600;
  border-radius: 0;
  transition: transform .35s var(--slg-ease),
              border-color .35s var(--slg-ease),
              color .35s var(--slg-ease);
}

.pxl-button .btn.btn-stroke:hover,
.btn.btn-stroke:hover {
  color: var(--slg-paper-bright) !important;
  border-color: var(--slg-paper) !important;
  transform: translateY(-2px);
}

/* Il pulsante dell'header: e' quello da cui siamo partiti, testo chiaro su
   fondo bianco, illeggibile. Ora fondo bianco e testo nero. */
#pxl-header-elementor .pxl-button .btn,
#pxl-header-default .pxl-button .btn,
.pxl-header-wrap .pxl-button .btn {
  color: var(--slg-ink) !important;
  background-color: var(--slg-paper) !important;
  border-color: var(--slg-paper) !important;
}

#pxl-header-elementor .pxl-button .btn:hover,
#pxl-header-default .pxl-button .btn:hover,
.pxl-header-wrap .pxl-button .btn:hover {
  background-color: var(--slg-paper-bright) !important;
  border-color: var(--slg-paper-bright) !important;
}

/* ------------------------------------------------------------------ *
 * 6. Link
 * ------------------------------------------------------------------ */

a {
  color: var(--slg-paper);
  transition: color .3s var(--slg-ease);
}

a:hover,
a:focus {
  color: var(--slg-paper-bright);
}

/* Sottolineatura che cresce da sinistra, invece di comparire di colpo */
.pxl-text-editor a:not(.btn),
.elementor-widget-text-editor a:not(.btn),
.entry-content a:not(.btn) {
  background-image: linear-gradient(var(--slg-paper), var(--slg-paper));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  text-decoration: none;
  transition: background-size .4s var(--slg-ease), color .3s var(--slg-ease);
}

.pxl-text-editor a:not(.btn):hover,
.elementor-widget-text-editor a:not(.btn):hover,
.entry-content a:not(.btn):hover {
  background-size: 100% 1px;
}

/* Focus visibile: senza, chi naviga da tastiera non sa dov'e'. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--slg-paper);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 * 7. Card e box
 *
 * La grammatica del case study: bordo sottile da 1px, angolo vivo, niente
 * ombre morbide. Le ombre su fondo nero non si vedono comunque - fanno solo
 * sembrare il bordo sporco.
 * ------------------------------------------------------------------ */

.pxl-icon-box1 .pxl-item--inner,
.pxl-icon-box2 .pxl-item--inner,
.pxl-icon-box4 .pxl-item--inner,
.pxl-icon-box6 .pxl-item--inner,
.pxl-icon-box8 .pxl-item--inner,
.pxl-accordion1 .pxl-accordion--item,
.pxl-testimonial-carousel2 .pxl-swiper-slide .pxl-item--inner,
.pxl-blog-grid-layout1 .pxl-grid-item .pxl-post--inner,
.pxl-team-grid1 .pxl-item--inner {
  border-radius: 0;
  box-shadow: none;
}

/* ------------------------------------------------------------------ *
 * 8. Etichette e occhielli
 *
 * Il maiuscolo spaziato e' il segnale piu' riconoscibile del case study:
 * e' quello che lega insieme le sezioni. Senza l'oro il peso lo fa il
 * grigio argento, che tiene l'occhiello un gradino sotto al titolo invece
 * di metterglisi accanto.
 * ------------------------------------------------------------------ */

/*
 * Qui si scontrano due regole piu' pesanti della nostra:
 *   .pxl-heading .pxl-item--subtitle.px-sub-title-default        (0,3,0)
 *     -> colore #747866 (grigio oliva) e 'capitalize'
 *   .elementor-9724 .elementor-element.elementor-element-XXX
 *     .pxl-heading .pxl-item--subtitle                           (0,5,0)
 *     -> Host Grotesk 16px/500
 *
 * La prima si batte pareggiando il selettore, la seconda solo con
 * '!important', come per i pulsanti: le famiglie estranee sono scritte
 * dentro le impostazioni dei widget e vanno ripulite anche li'.
 */
.pxl-item--subtitle,
.pxl-heading .pxl-item--subtitle,
.pxl-heading .pxl-item--subtitle.px-sub-title-default,
.pxl-item--sub-title,
.pxl-subtitle,
.slg-eyebrow {
  color: var(--slg-silver);
  font-family: var(--slg-font-display) !important;
  font-size: .74rem !important;
  font-weight: 600 !important;
  line-height: 1.6;
  letter-spacing: .18em;
  text-transform: uppercase !important;
}

/* I contatori: numero grande in display, etichetta piccola sotto */
.pxl-counter--number,
.pxl-counter--value,
.pxl-counter--prefix,
.pxl-counter--suffix {
  color: var(--slg-paper);
  font-family: var(--slg-font-display);
  font-weight: 600;
  letter-spacing: -.04em;
}

.pxl-counter--title {
  color: var(--slg-silver);
  font-family: var(--slg-font-sans);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * 9. Form
 *
 * Campi trasparenti con la sola riga sotto: su fondo nero i box chiari
 * pesano troppo e spezzano la pagina.
 * ------------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea,
.wpcf7 input:not([type="submit"]),
.wpcf7 textarea,
.wpcf7 select {
  color: var(--slg-paper);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--slg-line-dark);
  border-radius: 0;
  padding: .9rem 0;
  font-family: var(--slg-font-sans);
  transition: border-color .3s var(--slg-ease);
}

input::placeholder,
textarea::placeholder {
  color: var(--slg-silver-dark);
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
.wpcf7 input:not([type="submit"]):focus,
.wpcf7 textarea:focus {
  border-bottom-color: var(--slg-paper);
  outline: none;
  box-shadow: none;
}

/* Le option di una select ereditano il fondo del sistema operativo, non il
   nostro: senza colore esplicito su Windows restano testo chiaro su bianco. */
select option {
  color: var(--slg-ink);
  background-color: var(--slg-paper);
}

.wpcf7 input[type="submit"],
input[type="submit"],
button[type="submit"] {
  color: var(--slg-ink);
  background-color: var(--slg-paper);
  border: 0;
  border-radius: 0;
  padding: 1rem 2.4rem;
  font-family: var(--slg-font-display);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s var(--slg-ease), transform .3s var(--slg-ease);
}

.wpcf7 input[type="submit"]:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--slg-paper-bright);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------------ *
 * 10. Header
 * ------------------------------------------------------------------ */

#pxl-header-elementor .pxl-header-menu .pxl-menu-primary > li > a,
#pxl-header-default .pxl-header-menu .pxl-menu-primary > li > a,
.pxl-menu-primary > li > a {
  color: var(--slg-paper);
  font-family: var(--slg-font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -.01em;
}

.pxl-menu-primary > li > a:hover,
.pxl-menu-primary > li.current-menu-item > a,
.pxl-menu-primary > li.current_page_item > a {
  color: var(--slg-paper-bright);
}

/* Allo scroll il tema aggiunge 'pxl-header-fixed': il fondo diventa pieno,
   altrimenti il menu galleggia sopra il contenuto e non si legge piu'. */
.pxl-header-fixed,
#pxl-header-elementor.pxl-header-fixed,
#pxl-header-elementor .pxl-header-fixed {
  background-color: rgba(8, 8, 8, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--slg-line-soft);
}

/* Il menu a tendina */
.pxl-menu-primary .sub-menu {
  background-color: var(--slg-ink-soft);
  border: 1px solid var(--slg-line-soft);
  border-radius: 0;
}

.pxl-menu-primary .sub-menu li a {
  color: var(--slg-paper);
  font-family: var(--slg-font-sans);
}

.pxl-menu-primary .sub-menu li a:hover {
  color: var(--slg-paper-bright);
}

/* Il menu mobile: il tema lo apre su fondo chiaro */
@media screen and (max-width: 1200px) {
  .pxl-header-menu,
  #pxl-header-elementor .pxl-header-menu {
    background-color: var(--slg-ink);
  }

  .pxl-header-menu .pxl-menu-primary > li > a {
    color: var(--slg-paper);
  }
}

/* ------------------------------------------------------------------ *
 * 11. Footer
 * ------------------------------------------------------------------ */

#pxl-footer-elementor,
#pxl-footer-default,
.pxl-footer-wrap {
  background-color: var(--slg-ink);
  border-top: 1px solid var(--slg-line-soft);
}

/* Il contenitore del footer ha il prugna della demo (#131116) scritto nelle
   sue impostazioni. Lo prendiamo per struttura e non per id, cosi' regge
   anche se il blocco viene ricostruito. */
#pxl-footer-elementor > .footer-elementor-inner > .elementor > .e-con,
#pxl-footer-elementor > .footer-elementor-inner > .elementor > .elementor-section {
  background-color: var(--slg-ink) !important;
}

#pxl-footer-elementor a,
#pxl-footer-default a {
  color: var(--slg-silver);
}

#pxl-footer-elementor a:hover,
#pxl-footer-default a:hover {
  color: var(--slg-paper-bright);
}

/* ------------------------------------------------------------------ *
 * 12. Preloader
 *
 * Era prugna (#131116), il colore della demo. Ora nero pieno, cosi' il
 * passaggio al contenuto non fa uno scalino di colore.
 * ------------------------------------------------------------------ */

.pxl-loader,
.pxl-loader-curve,
.pxl-loading,
#pxl-preloader {
  background-color: var(--slg-ink);
}

.pxl-loader .loader-line-mask .loader-line,
.pxl-loader .loader-circle {
  border-color: var(--slg-paper);
}

/* ------------------------------------------------------------------ *
 * 13. Movimento
 *
 * Il tema stampa gia' le classi 'wow' sugli elementi: qui si ritarano solo
 * durata ed easing su quelli del case study. Piu' lento e piu' morbido:
 * l'effetto "premium" e' quasi tutto qui.
 * ------------------------------------------------------------------ */

.wow {
  animation-duration: 1s;
  animation-timing-function: var(--slg-ease);
}

/* Chi ha chiesto meno animazioni nelle impostazioni di sistema le ottiene:
   il tema non lo prevede. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ------------------------------------------------------------------ *
 * Scorrimento orizzontale
 *
 * Il tema padre mette 'overflow-x: hidden' sul body. Nasconde davvero, ma
 * ha un effetto collaterale poco noto: quando un asse e' 'hidden' l'altro
 * diventa scorrevole, e un contenitore scorrevole disattiva
 * 'position: sticky' per tutti i suoi discendenti.
 *
 * 'clip' taglia allo stesso modo senza creare il contenitore, quindi le
 * colonne agganciate tornano a funzionare.
 * ------------------------------------------------------------------ */

body { overflow-x: clip; }


/* ================================================================== *
 * NIENTE CAMBIA DI COLPO — LE PARTI DEL TEMA
 *
 * Le pagine costruite col builder hanno il loro strato di transizioni. Qui
 * ci sono i pezzi che il tema disegna su ogni pagina - intestazione, frecce
 * dei caroselli, filtri della griglia portfolio - e che finora cambiavano
 * di scatto: passandoci sopra il colore saltava da nero a carta in un
 * fotogramma, che e' il modo in cui si comporta una cosa rotta.
 *
 * Anche qui ':where()' azzera la specificita', cosi' questa regola non
 * scavalca niente di quello che il tema o lo strato sopra hanno gia'
 * deciso: aggiunge un tempo dove non c'era, e basta.
 */
:where(
  .pxl-button .btn,
  .pxl-swiper-arrow,
  .pxl-grid-filter .filter-item,
  .pxl-header-wrap a,
  .pxl-item--social a,
  .pxl-post--holder a,
  .widget a
) {
  transition:
    color .3s var(--slg-ease),
    background-color .3s var(--slg-ease),
    border-color .3s var(--slg-ease),
    opacity .3s var(--slg-ease),
    transform .45s var(--slg-ease);
}

/* I pulsanti dell'intestazione portano '!important' sui colori, ereditato
   dalle impostazioni per singolo widget della demo. La transizione non ne
   ha bisogno - nessuno la sta dichiarando altrove - ma i colori si', se un
   domani il widget tornasse a scriverli sopra. */
#pxl-header-elementor .pxl-button .btn,
#pxl-header-default .pxl-button .btn,
.pxl-header-wrap .pxl-button .btn {
  transition:
    color .3s var(--slg-ease),
    background-color .3s var(--slg-ease),
    border-color .3s var(--slg-ease),
    transform .45s var(--slg-ease);
}

/* Chi ha chiesto meno animazioni non vuole nemmeno queste: un cambio di
   colore che ci mette tre decimi resta un movimento. */
@media (prefers-reduced-motion: reduce) {
  .pxl-button .btn,
  .pxl-swiper-arrow,
  .pxl-grid-filter .filter-item {
    transition: none;
  }
}

/* Le icone dentro i link dell'intestazione e del pie', per lo stesso
   motivo: il colore lo scrive il tema sul figlio, non sul genitore. */
:where(
  .pxl-header-wrap a *,
  .pxl-item--social a *,
  .pxl-button .btn *,
  .pxl-swiper-arrow *
) {
  transition:
    color .3s var(--slg-ease),
    fill .3s var(--slg-ease),
    stroke .3s var(--slg-ease),
    opacity .3s var(--slg-ease),
    transform .45s var(--slg-ease);
}