/*
 * Design System NTS.
 * La famiglia principale viene definita dinamicamente
 * da inc/design-system.php.
 */
:root {
    --nts-font-body: var(--nts-font-family, Arial, sans-serif);
    --nts-font-heading: var(--nts-font-family, Arial, sans-serif);
}

/* Font principale del sito e dell'editor Gutenberg. */

body.nts-site,
.editor-styles-wrapper {
  font-family: var(--nts-font-body);
  font-size: var(--nts-text-base);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

body.nts-site {
  color: var(--color-grey-dark);
  background: #fff;
}

/*
 * Limitiamo le regole dei contenuti al blocco flessibile:
 * header, footer e componenti Bootstrap conservano i propri stili.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--nts-font-heading);
  font-weight: 600;
  color: var(--color-primary-ft);
}

/* Tipografia, colori e container emessi da inc/design-system.php. */
body.nts-site .container,.editor-styles-wrapper .container {width:100%;max-width:var(--nts-container-large);margin-inline:auto;padding-inline:var(--nts-container-padding,16px)}

blockquote {
  border-left: 6px solid var(--nts-accent, var(--color-sky-ft));
  padding: 12px 32px;
}

/* Liste dei contenuti: menu e controlli dei form mantengono i propri stili. */
:is(
  [data-nts-layout="testo"] ul,
  [data-nts-layout="descrizione"] ul,
  [data-nts-form-description] ul,
  [data-nts-form-description-alt] ul,
  [data-nts-testata-description] ul,
  ul.wp-block-list,
  ul.list-default,
  ul.list-decoration
) {
  list-style: initial !important;
  padding-left: 18px !important;
  line-height: 16px !important;
}
:is(
  [data-nts-layout="testo"] ul,
  [data-nts-layout="descrizione"] ul,
  [data-nts-form-description] ul,
  [data-nts-form-description-alt] ul,
  [data-nts-testata-description] ul,
  ul.wp-block-list,
  ul.list-default,
  ul.list-decoration
) > li {
  padding-left: 0 !important;
}
:is(
  [data-nts-layout="testo"] ul,
  [data-nts-layout="descrizione"] ul,
  [data-nts-form-description] ul,
  [data-nts-form-description-alt] ul,
  [data-nts-testata-description] ul,
  ul.wp-block-list,
  ul.list-default,
  ul.list-decoration
) > li::before {
  display: none !important;
}
ul.list-decoration {
  list-style: none !important;
  padding-left: 0 !important;
  line-height: 30px !important;
  font-size: 20px;
}
ul.list-decoration > li {
  position: relative !important;
  padding-left: 54px !important;
  margin: 24px 0;
}
ul.list-decoration > li::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 16px !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  background-image: none !important;
  background-color: var(--nts-accent, var(--color-sky-ft)) !important;
  -webkit-mask: url("../img/icon-check.svg") center / contain no-repeat;
  mask: url("../img/icon-check.svg") center / contain no-repeat;
}
.text-white ul.list-decoration > li::before,
ul.list-decoration.text-white > li::before,
[data-nts-color="white"] ul.list-decoration > li::before {
  background-color: var(--bs-white, #fff) !important;
}

/* Bootstrap usa 1320px come massimo standard: qui adottiamo 1920px. */
body.nts-site .container,
.editor-styles-wrapper .container {
  max-width: var(--size-container);
}

/* Solo le due larghezze aggiuntive previste da ACF. */
body.nts-site .container.container--sm,
.editor-styles-wrapper .container.container--sm {
  max-width: var(--size-container-sm);
}

body.nts-site .container.container--xs,
.editor-styles-wrapper .container.container--xs {
  max-width: var(--size-container-xs);
}

/* Colori ACF che non hanno un equivalente semantico Bootstrap. */
.bg-nts-light-blue  { background-color: var(--nts-color-light-blue); }
.bg-nts-light-green { background-color: var(--color-back-light-secondary-ft); }
.bg-nts-beige       { background-color: var(--color-beige-ft); }
.bg-nts-light-beige { background-color: var(--color-beige-light-ft); }
.bg-nts-dark-blue   { background-color: var(--color-primary-dark-ft); }
.bg-nts-sky         { background-color: var(--color-sky-ft); }

.text-nts-dark-blue { color: var(--color-primary-dark-ft) !important; }
.text-nts-sky       { color: var(--color-sky-ft) !important; }


.section-mt-over { margin-top: -120px; }
.section-mb-over { margin-bottom: -120px; }

.shadow-custom{box-shadow: 2px 8px 16px rgba(0, 0, 0, 0.16);}