/* SmartLands Tema: basi comuni della grafica del sito.
   Il fondo del sito è ink (#14161A), quindi il testo di base è chiaro. Le superfici chiare dichiarano il testo scuro:
   sl-chiaro e sl-scuro le mette il plugin sui contenitori di Elementor dal colore di fondo impostato; le schede del
   sistema grafico (.sl-card, .sl-paper) sono chiare da sempre. I colori passano per variabili: ogni superficie le
   ridefinisce e chi sta dentro le eredita, anche quando le superfici stanno una dentro l'altra. */

/* 1. Superfici */
:root, .sl-scuro {
  --sl-su-testo: #C9CEDA;
  --sl-su-forte: #E8E6DF;
  --sl-su-tenue: #9AA1AC;
  --sl-su-link: #FFDE01;
  --sl-su-link-sopra: #FFFFFF;
}
.sl-chiaro, .sl-card, .sl-paper, #sl-a11y-panel {
  --sl-su-testo: #3E434C;
  --sl-su-forte: #14161A;
  --sl-su-tenue: #5E6470;
  --sl-su-link: #7D6A00;
  --sl-su-link-sopra: #14161A;
}
body, .sl-scuro, .sl-chiaro, .sl-card, .sl-paper, #sl-a11y-panel { color: var(--sl-su-testo); }

/* 2. Titoli. Quelli scritti dentro i testi (widget di testo, contenuti del tema, schede prodotto) e il titolo della
      pagina del tema sono più forti del testo. I widget "Titolo" senza un colore proprio seguono la superficie: il
      modello dell'intestazione li vuole chiari ovunque, e su una superficie chiara sparivano. Chi ha un colore
      impostato in Elementor lo tiene. */
:is(.elementor-widget-text-editor, .elementor-widget-theme-post-content, .page-content, .entry-content,
    .woocommerce-product-details__short-description, .woocommerce-Tabs-panel) :is(h1, h2, h3, h4, h5, h6),
.page-header .entry-title,
:is(.sl-chiaro, .sl-scuro, .sl-card, .sl-paper) .elementor-heading-title { color: var(--sl-su-forte); }
:is(.sl-chiaro, .sl-scuro, .sl-card, .sl-paper) .elementor-widget-breadcrumbs { color: var(--sl-su-tenue); }

/* 3. Link nel testo: sul fondo scuro il giallo del marchio, sulle superfici chiare un ocra scuro (5,2:1 sulla carta).
      Sottolineati dentro i testi, perché il colore da solo non basta a riconoscerli. */
.sl-chiaro a:not([class]):not([style*="background"]),
.sl-scuro a:not([class]):not([style*="background"]) { color: var(--sl-su-link) !important; }
.sl-chiaro a:not([class]):not([style*="background"]):is(:hover, :focus-visible),
.sl-scuro a:not([class]):not([style*="background"]):is(:hover, :focus-visible) { color: var(--sl-su-link-sopra) !important; }
:is(.elementor-widget-text-editor, .page-content, .entry-content) :is(p, li, td, dd) a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }

/* Pagine legali (privacy 375, cookie 197): il CSS del kit dava a tutti i link della pagina l'ocra da carta, anche a
   quelli sul fondo scuro (indice, briciole, piè di pagina: 3,3-3,9:1). Ora seguono la superficie: giallo sul fondo
   scuro, ocra da carta solo dentro le schede chiare .card. */
body.page-id-375 .card, body.page-id-197 .card {
  --sl-su-testo: #14161A; --sl-su-forte: #14161A; --sl-su-tenue: #5E6470; --sl-su-link: #7D6A00; --sl-su-link-sopra: #14161A;
}
body.page-id-375 a:not([class]):not([style*="background"]),
body.page-id-197 a:not([class]):not([style*="background"]) { color: var(--sl-su-link) !important; }
body.page-id-375 a:not([class]):not([style*="background"]):is(:hover, :focus-visible),
body.page-id-197 a:not([class]):not([style*="background"]):is(:hover, :focus-visible) { color: var(--sl-su-link-sopra) !important; }

/* 4. Correzioni puntuali */
/* contatori delle categorie, nel negozio e nel menu: erano ocra su ink (3,99:1) */
mark.count { background: none; color: var(--sl-su-tenue); }
.elementor-location-header .product-category mark.count,
.elementor-location-header .product-category .count,
.elementor-location-archive .elementor-widget-wc-categories li.product-category .count { color: #9AA1AC !important; }
/* "Aggiungi al carrello" spento (finché non si sceglie una variante): il testo ink sul grigio scuro non si leggeva */
.woocommerce .single_add_to_cart_button.button.alt:is(.disabled, :disabled) { color: #9AA0AC !important; }
/* crediti delle mappe Leaflet: stanno su un riquadro chiaro e il giallo dei link non si leggeva (1,02:1) */
.leaflet-container .leaflet-control-attribution a { color: #3E434C !important; }
/* linguette e fisarmoniche di Elementor senza colori propri: prendevano il verde di fabbrica (bianco su verde, 1,99:1)
   o un titolo scuro sul fondo scuro (1,12:1). Qui i colori del sito; chi ha i suoi colori impostati li tiene. */
.elementor-widget-n-tabs {
  --n-tabs-title-color: #C9CEDA; --n-tabs-title-background-color: #1E2126;
  --n-tabs-title-color-hover: #14161A; --n-tabs-title-background-color-hover: #FFDE01;
  --n-tabs-title-color-active: #14161A; --n-tabs-title-background-color-active: #FFDE01;
}
.elementor-widget-n-accordion {
  --n-accordion-title-normal-color: var(--sl-su-forte); --n-accordion-title-hover-color: var(--sl-su-link);
  --n-accordion-title-active-color: var(--sl-su-link); --n-accordion-icon-normal-color: var(--sl-su-forte);
  --n-accordion-icon-hover-color: var(--sl-su-link); --n-accordion-icon-active-color: var(--sl-su-link);
}
/* telefono, pagine di vecchio impianto: l'animazione dell'apertura finiva sopra il titolo (per le immagini la
   correzione c'era già nel modello dell'intestazione) */
@media (max-width: 767px) {
  .elementor-widget-wrap > .elementor-widget-lottie { order: 99999; margin-top: 0 !important; }
}

/* 5. Bottoni. Un bottone o il tasto di un modulo senza colori propri prendeva il grigio di Elementor (testo a 4,3:1):
      di base è il bottone principale del sito, giallo con testo ink. Chi ha i suoi colori impostati li tiene. */
:is(.elementor-widget-button, .elementor-widget-form) .elementor-button,
:is(.elementor-widget-button, .elementor-widget-form) .elementor-button:is(:visited, :hover, :focus) { background-color: #FFDE01; color: #14161A; fill: #14161A; }
:is(.elementor-widget-button, .elementor-widget-form) .elementor-button:is(:hover, :focus-visible) { background-color: #E9CC00; }

/* 6. Intestazione, menu ed elementi flottanti */
/* piè di pagina: i titoli delle colonne sono h2 (erano h4 e saltavano un livello), con lo stesso aspetto di prima */
.elementor-location-footer h2.elementor-heading-title { font-size: 15px !important; letter-spacing: 1.2px; text-transform: uppercase; }
/* il bottone flottante dei cookie lascia il posto al link "Preferenze cookie" nel piè di pagina */
#sl-cookie-fab { display: none !important; }
/* "Preventivo" nel menu è l'invito principale del sito: un bottone, non una voce come le altre */
.elementor-location-header .elementor-element-b2f379a .e-n-menu-title:has(a[href*="richiedi-un-preventivo"]) { background-color: #FFDE01 !important; border-radius: 10px; }
.elementor-location-header .elementor-element-b2f379a .e-n-menu-title:has(a[href*="richiedi-un-preventivo"]) :is(a, span) { color: #14161A !important; }
.elementor-location-header .elementor-element-b2f379a .e-n-menu-title:has(a[href*="richiedi-un-preventivo"]):hover { background: #E9CC00; }
@media (max-width: 767px) {
  /* barra in alto: via i social (stanno nel piè di pagina) e l'importo del carrello; resta l'icona */
  .elementor-location-header .elementor-widget-social-icons { display: none; }
  .elementor-location-header .elementor-menu-cart__toggle .elementor-button-text { display: none; }
  /* bersagli da dito: bottone del menu, voci e frecce dei sottomenu */
  .elementor-location-header .elementor-element-b2f379a .e-n-menu-toggle { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .elementor-location-header .elementor-element-b2f379a .e-n-menu-title { min-height: 44px; }
  .elementor-location-header .elementor-element-b2f379a .e-n-menu-title-container { min-height: 44px; display: flex; align-items: center; }
  .elementor-location-header .elementor-element-b2f379a .e-n-menu-title:has(a[href*="richiedi-un-preventivo"]) { margin-inline: 16px; }
  /* la voce della pagina in cui si è aveva il fondo trasparente e lasciava vedere la pagina sotto il menu */
  .elementor-location-header .elementor-element-b2f379a .e-n-menu[data-layout="dropdown"] .e-n-menu-title:not(:has(a[href*="richiedi-un-preventivo"])) { background-color: #14161A !important; }
  .elementor-location-header .elementor-element-b2f379a .e-n-menu-dropdown-icon { min-width: 44px; min-height: 44px; }
  /* banner dei cookie più compatto: copriva un quinto dello schermo */
  #cookie-banner { padding: 14px 16px !important; font-size: 13px !important; line-height: 1.45 !important; }
  #cookie-banner .cb-b { margin-top: 10px !important; }
  #cookie-banner .cb-ico { display: none; }
}
:is(.elementor-widget-button, .elementor-widget-form) .elementor-button .elementor-button-text { color: inherit; }

/* 7. Negozio */
/* "IVA inclusa" accanto ai prezzi era a 11 px */
.woocommerce small.woocommerce-price-suffix { font-size: 13px; }

/* 8. Pagine di vecchio impianto (titolo a due colori più illustrazione quadrata) */
/* la fascia vuota in cima: un contenitore con dentro solo uno spaziatore */
[data-elementor-type="wp-page"] > .e-con:first-child:has(.elementor-widget-spacer):not(:has(.elementor-widget:not(.elementor-widget-spacer))) { display: none; }
@media (max-width: 767px) {
  /* l'illustrazione dell'apertura finiva sopra il titolo e spingeva il testo fuori dal primo schermo */
  .elementor-widget-wrap:has(> .elementor-widget-heading:first-child h1) > :is(.elementor-widget-image, .elementor-widget-lottie) { display: none; }
  .elementor-location-header .e-n-menu-dropdown-icon { min-width: 44px; min-height: 44px; }
}

/* 9. Apertura delle pagine di vecchio impianto, sul modello delle pagine nuove: briciole in alto, titolo grande e
      centrato nel carattere dei titoli, niente illustrazione, fondo con la griglia cartografica, testo in colonna */
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-breadcrumbs) {
  background-image: radial-gradient(900px 420px at 50% -90px, rgba(255, 222, 1, .07), transparent 70%),
    linear-gradient(rgba(227, 223, 212, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(227, 223, 212, .04) 1px, transparent 1px);
  background-size: 100% 560px, 56px 56px, 56px 56px; background-repeat: no-repeat, repeat, repeat;
}
.elementor-widget-wrap:has(> .elementor-widget-breadcrumbs) { justify-content: center; padding-top: 56px !important; }
.elementor-widget-wrap:has(> .elementor-widget-breadcrumbs) > .elementor-widget-breadcrumbs { order: -1 !important; width: 100%; text-align: center; font-size: 13px; letter-spacing: .4px; margin-bottom: 14px; }
.elementor-widget-wrap:has(> .elementor-widget-breadcrumbs) > .elementor-widget-heading:has(h1) { width: 100%; text-align: center; margin-bottom: 34px; }
.elementor-widget-wrap:has(> .elementor-widget-breadcrumbs) > .elementor-widget-heading h1 {
  font: 700 clamp(30px, 2.2vw + 22px, 48px)/1.12 'Space Grotesk', sans-serif !important; letter-spacing: -1px !important; text-transform: none !important; max-width: 20ch; margin-inline: auto;
}
.elementor-widget-wrap:has(> .elementor-widget-breadcrumbs) > :is(.elementor-widget-image, .elementor-widget-lottie) { display: none; }
.elementor-widget-wrap:has(> .elementor-widget-breadcrumbs) > .elementor-widget-text-editor { max-width: 820px; margin-inline: auto; font-size: 17px; line-height: 1.7; }