/* Blocchi usati in più pagine. */

/* ====================================================================================================
   Barra in cima alle pagine interne: freccia "indietro" e icone delle quattro sezioni principali
   ==================================================================================================== */

.topnav {
  z-index: 1;
  margin: -1em 0 0;
}
.topnav__back-btn {
  padding: 1em 3em;
  border: none;
  background: url('/wp-content/uploads/2022/06/freccia-back.svg') no-repeat;
}
.topnav__back-btn:hover,
.topnav__back-btn:focus-visible {
  background: url('/wp-content/uploads/2022/06/freccia-back.svg') no-repeat;
}
/* Al passaggio del mouse l'icona sale di 7px. La prospettiva (neutra) è quella dell'originale,
   che disegna le icone su un livello a parte: senza, la resa dei bordi cambia di qualche pixel. */
.topnav__icon {
  text-align: center;
  transform: perspective(1px);
  transition: transform 0.4s;
}
.topnav__icon:hover {
  transform: perspective(1px) translateY(-7px);
}
.topnav__icon a {
  display: inline-block;
}
.topnav__icon img {
  width: 40px;
  vertical-align: middle;
}
/* L'icona "Carriere" non ha una larghezza propria: prende i 48px delle icone SVG con link */
.topnav__icon .topnav__img--natural {
  width: 48px;
}

/* ====================================================================================================
   Intestazione delle pagine interne: icona grande e titolo
   ==================================================================================================== */

.hero {
  margin: 1em 0 var(--hero-mb);
}
.hero__icon {
  text-align: center;
  line-height: 0;
}
.hero__icon img {
  width: var(--hero-icon);
  vertical-align: middle;
}
.hero__title-wrap {
  margin-top: 1em;
  text-align: center;
}
.hero__title {
  margin: 0;
  padding: 0;
  color: var(--hero-color);
  font-family: var(--f-title);
  font-size: 3em;
  font-weight: 100;
  line-height: 1;
  letter-spacing: 6px;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}

/* ====================================================================================================
   Icone (disegni SVG nel testo)
   ==================================================================================================== */

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: visible;
}

/* ====================================================================================================
   Icone social (LinkedIn, Facebook, Instagram, YouTube)
   ==================================================================================================== */

/* Le icone sono in riga e vanno a capo come testo: lo spazio tra una e l'altra è dato da word-spacing. */
.social {
  font-size: 0;
  line-height: 1;
}
.social__list {
  display: inline-block;
  width: 100%;
  margin: 0 0 calc(-1 * var(--si-row-gap));
  padding: 0;
  list-style: none;
  word-spacing: var(--si-gap);
}
.social__item {
  display: inline-block;
  margin-bottom: var(--si-row-gap);
  word-break: break-word;
}
.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--si-size) + 2 * var(--si-pad));
  height: calc(var(--si-size) + 2 * var(--si-pad));
  border-radius: var(--si-radius);
  background-color: var(--si-bg);
  color: var(--si-color);
  font-size: var(--si-size);
  line-height: var(--si-size);
  text-align: center;
  transition: all 0.3s;
}
.social__link:hover {
  opacity: 0.9;
}
.social__link .icon {
  display: block;
  position: relative;
  width: 1em;
  height: 1em;
  vertical-align: 0 !important;
}

/* ====================================================================================================
   Pulsante "torna su"
   ==================================================================================================== */

.btt-gap {
  height: 20px;
}
.btt {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  width: 100%;
  text-align: right;
  pointer-events: none;
}
.btt__button {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50px;
  background: none;
  color: var(--c-text);
  font: 400 46px/50px var(--f-text);
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  animation: btt-out 0.5s;
}
.btt.is-visible .btt__button {
  opacity: 1;
  pointer-events: auto;
  animation: btt-in 0.5s;
}
.btt__button:hover,
.btt__button:focus-visible {
  color: var(--c-primary);
  background: #fff;
}
@keyframes btt-in {
  from { opacity: 0; transform: translateY(80px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes btt-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(80px); }
}

/* ====================================================================================================
   Carosello di immagini (pagina Cecilia Zorzi, su smartphone)
   ==================================================================================================== */

.ic { position: relative; }
.ic__viewport {
  overflow: hidden;
  padding-bottom: 30px;
  touch-action: pan-y;
}
.ic__track {
  display: flex;
  transform: translate3d(0, 0, 0);
  transition-property: transform;
  transition-timing-function: ease;
  transition-duration: 0s;
}
.ic__slide {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
}
.ic__img { border-radius: 20px; }
.ic__btn {
  position: absolute;
  top: calc(50% - 15px);
  z-index: 1;
  display: flex;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: hsla(0, 0%, 93%, 0.9);
  font-size: 25px;
  line-height: 1;
  transform: translateY(-50%);
}
.ic__btn:hover,
.ic__btn:focus-visible {
  background: none;
  color: hsla(0, 0%, 93%, 0.9);
}
.ic__btn--prev { left: 10px; }
.ic__btn--next { right: 10px; }
.ic__btn svg {
  display: block;
  width: 1em;
  height: 1em;
}
.ic__dots {
  position: absolute;
  bottom: 5px;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 24px;
  padding-top: 12px;
}
.ic__dot {
  width: 6px;
  height: 6px;
  margin: 0 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #000;
  opacity: 0.2;
  transition: none;
}
.ic__dot:hover,
.ic__dot:focus-visible { background: #000; }
.ic__dot[aria-current='true'] { opacity: 1; }

/* ====================================================================================================
   Timeline dei risultati a scorrimento (pagina Cecilia Zorzi)
   ==================================================================================================== */

.tl {
  --tl-big: 22px;
  --tl-small: 16px;
  /* Distanza fra il bordo superiore e i riquadri: etichette + 121px */
  --tl-top: calc(var(--tl-big) + var(--tl-small) + 121px);
  position: relative;
  margin: 0 24px;
}
@media (max-width: 1024px) {
  .tl {
    --tl-big: 20px;
    --tl-small: 14px;
  }
}
@media (max-width: 767px) {
  .tl { --tl-big: 18px; }
}
.tl__inside { overflow: hidden; }
.tl__viewport {
  position: relative;
  margin: 0 10px;
  touch-action: pan-y;
}
.tl__track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  margin: var(--tl-top) 0 60px;
  padding: 0;
  list-style: none;
  transform: translate3d(0, 0, 0);
  transition-property: transform, height;
  transition-timing-function: ease;
  transition-duration: 0s;
}
.tl__item {
  position: relative;
  flex-shrink: 0;
  width: calc((100% - 30px) / 3);
  margin-right: 15px;
}
@media (max-width: 767px) {
  .tl__item { width: 100%; }
}
.tl__labels {
  position: absolute;
  top: calc(20px - var(--tl-top));
  left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  text-align: center;
  transform: translateX(-50%);
}
.tl__year {
  color: var(--c-primary);
  font-size: var(--tl-big);
  font-weight: 700;
  line-height: var(--tl-big);
  white-space: nowrap;
}
.tl__label {
  font-size: var(--tl-small);
  line-height: var(--tl-small);
  white-space: nowrap;
}
.tl__dot {
  position: absolute;
  top: -60px;
  left: calc(50% - 12px);
  width: 24px;
  height: 24px;
  border: 4px solid #d6d6d6;
  border-radius: 50%;
  background-color: var(--c-primary);
}
/* Punta del riquadro: quadrato ruotato con due bordi */
.tl__arrow {
  position: absolute;
  top: -5.857px;
  left: calc(50% - 6.859px);
  z-index: 2;
  width: 13.7031px;
  height: 13.7031px;
  border-top: 3px solid var(--c-primary);
  border-left: 3px solid var(--c-primary);
  background: linear-gradient(to right bottom, #fff 52%, transparent 48%);
  transform: rotate(45deg);
}
.tl__content {
  position: relative;
  display: flex;
  padding: 12px 12px 2px;
  border-top: 3px solid var(--c-primary);
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.3);
}
.tl__desc {
  margin: 0 0 10px;
  text-align: center;
}
.tl__desc p { margin: 0 0 10px; }
.tl__nav {
  position: absolute;
  top: calc(var(--tl-top) - 60px);
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #d6d6d6;
  font-size: 20px;
  line-height: 20px;
}
.tl__nav:hover,
.tl__nav:focus-visible {
  background: none;
  color: #d6d6d6;
}
.tl__nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tl__nav--prev { left: -24px; }
.tl__nav--next { right: -24px; }
.tl__nav svg {
  display: block;
  width: 0.625em;
  height: 1em;
}
.tl__line {
  position: absolute;
  top: calc(var(--tl-top) - 50px);
  left: 0;
  right: 0;
  height: 4px;
  background-color: #d6d6d6;
}

/* ====================================================================================================
   Schede di approfondimento dei prodotti (pagina Business Solutions)
   ==================================================================================================== */

.pm { width: 700px; }
.pm--tall { max-height: 1200px; }

.pm__left .stack { align-content: flex-start; align-items: flex-start; }
.pm__head > .row > .col > .stack { align-content: center; align-items: center; }
.pm__title-col .stack { justify-content: flex-start; }
.pm__icon,
.pm__image {
  text-align: center;
  line-height: 0;
}
.pm__icon img,
.pm__image img { vertical-align: middle; }
.pm__title {
  text-align: start;
  color: var(--c-primary);
  font: 400 1.5em/1 var(--f-title);
  letter-spacing: 1.2px;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.08);
}

.pm__text {
  text-align: justify;
  font: 400 1em/1.8em var(--f-text);
}
.pm__btn-wrap { text-align: left; }
.pm__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 15px 30px;
  border: 3px solid #1f50e2;
  border-radius: 5px;
  background-color: #1f50e2;
  color: #fff;
  font: 400 15px/1 var(--f-text);
  white-space: normal;
  vertical-align: middle;
  text-align: center;
  user-select: none;
  transition: all 0.4s ease;
}
.pm__btn:hover {
  background-color: var(--c-secondary);
  color: #fff;
}

.pm__dots {
  --dots-width: 100%;
  --dots-height: 10.3px;
  --dots-color: var(--c-text);
}

.pm__site { margin-top: -10px; }
.pm__site-stack { padding: 1em 0 0; }
.pm__site-title {
  text-align: center;
  color: var(--c-primary);
  font: 400 1.5em/1 var(--f-title);
  letter-spacing: 1.2px;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.08);
}
.pm__site-title a {
  color: inherit;
  text-decoration: none;
}
.pm__arrow {
  margin-top: -1em;
  text-align: center;
  line-height: 0;
}
.pm__arrow a { display: inline-block; }
.pm__arrow img { width: 64%; vertical-align: middle; }

@media (max-width: 767px) {
  .pm { width: var(--pm-mobile-width); }
  .pm--tall { max-height: 500px; }
  .pm--compact .pm__left .stack { justify-content: center; }
  .pm--compact .pm__icon-col .stack { justify-content: flex-start; }
  .pm--compact .pm__icon img { width: 100px; max-width: 100%; }
  .pm--compact .pm__title-col .stack { justify-content: center; }
  .pm--compact .pm__title,
  .pm--center-title .pm__title { text-align: center; }
  .pm--compact .pm__image img { width: 100%; max-width: 100%; }
  .pm--compact .pm__right .stack { padding: 1em; }
}

/* ====================================================================================================
   Pagine prodotto: riquadro "Contatta l'area commerciale" con il modulo
   ==================================================================================================== */

.cc { padding: 0 0 3em; }
.cc__card {
  padding: 2em;
  border-radius: 30px;
  background-color: #fff;
}
.cc__info { padding: 2em 2em 0 0; }
.cc__title .title {
  color: var(--c-primary);
  font: 400 1.2em/1 var(--f-title);
  letter-spacing: 6.1px;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
  .cc__card { padding: 1em; }
  .cc__info { padding: 0; }
  .cc__title { text-align: center; }
  .cc__title .title {
    line-height: 1.5em;
    letter-spacing: 3.8px;
  }
}

/* ====================================================================================================
   Riquadro "Richiedi informazioni" con il modulo
   ==================================================================================================== */

.irc {
  padding: 2em;
  border-radius: 30px;
  background-color: #fff;
}
.irc__stack { padding: 1em 2em 0; }
.irc__title { text-align: center; }
.irc__title .title {
  color: var(--c-primary);
  font: 400 1.2em/1 var(--f-title);
  letter-spacing: 10px;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}
.irc__intro {
  text-align: center;
  font: 400 1em/2em var(--f-text);
}
.irc__intro-box { margin-top: -1em; }

@media (max-width: 1024px) {
  .irc__stack { padding: 0; }
  .irc__title .title { line-height: 1.3em; }
}
@media (max-width: 767px) {
  .irc { padding: 1.5em; }
  .irc__title .title { line-height: 1.4em; }
  .irc__intro {
    text-align: justify;
    line-height: 1.5em;
  }
}

/* ====================================================================================================
   Pagine Carriere: titolo "POSIZIONI APERTE"
   ==================================================================================================== */

.op {
  margin-top: 1em;
  padding: 5em 0 2em;
  background-image: linear-gradient(180deg, #cedae46e 12%, #7f92a100 55%);
}
.op__stack { margin-top: 2em; }
/* Spazio fra i blocchi meno 1em, come nell'originale (".stack >" per prevalere sullo spazio
   fra i blocchi di .stack in style.css) */
.stack > .op__title { margin-block-end: calc(var(--widget-space) - 1em); }
.op__title .title {
  color: var(--c-text);
  font: 400 1.5em/1 var(--f-title);
  letter-spacing: 4px;
}
.op__dots {
  --dots-width: 100%;
  --dots-height: 10.3px;
  --dots-color: var(--c-text);
}
.op__text { font: 400 18px/1.5 var(--f-text); }

@media (max-width: 1024px) {
  .op { padding: 1em; }
}
@media (max-width: 767px) {
  .op { padding: 1em 0 0; }
  .op__title { text-align: center; }
}

/* ====================================================================================================
   Pagine Carriere: griglia delle posizioni aperte
   ==================================================================================================== */

.pg {
  --container: 1000px;
  padding: 2em 0 4em;
  background: url('/wp-content/uploads/2022/04/LI.svg') center center / auto no-repeat;
}
.pg__overlay {
  position: absolute;
  inset: 0;
  background-color: #fff;
  opacity: 0.5;
}
.pg__row--gap { margin-top: 3em; }

/* Icona (variante "icon") */
.pg__icon {
  padding: 15px;
  text-align: center;
}
.pg__icon-box {
  display: inline-block;
  color: var(--c-text);
  font-size: 96px;
  line-height: 1;
  transition: all 0.3s;
}
.pg__icon-box:hover { color: var(--c-orange); }
.pg__icon-box svg { display: block; }

/* Icona cliccabile (variante "button") */
.pg__btn-wrap { text-align: center; }
.pg__btn,
.pg__btn:hover,
.pg__btn:focus-visible {
  background: transparent;
}
.pg__btn {
  display: inline-flex;
  align-items: center;
  padding: 16px 28px;
  border: none;
  border-radius: 0;
  color: var(--c-text);
  font: 400 18px/1.3333 var(--f-title);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pg__btn:hover,
.pg__btn:focus-visible { color: var(--c-orange); }
/* Il glifo sta su una riga del carattere del pulsante, come l'icona del font originale:
   stessa altezza della riga e stessa posizione rispetto alla linea di base */
.pg__glyph {
  display: block;
  font: 400 100px/1.3333 var(--f-title);
}
.pg__glyph svg { margin: 0 !important; }
.pg__glyph--box {
  width: 1em;
  height: 1em;
  line-height: 1;
}
.pg__glyph--box svg { display: block; }

/* Titolo */
.pg__name { text-align: center; }
.pg__trigger {
  display: inline-block;
  max-width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--c-text);
  font: 400 1em/1.5 var(--f-title);
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
}
.pg__trigger:hover,
.pg__trigger:focus-visible {
  background: none;
  color: var(--c-orange);
}

@media (max-width: 767px) {
  .pg { padding: 0; }
  .pg__row--gap { margin-top: 0; }
  .pg__gap-m > .stack { margin-top: 3em; }
}

/* ====================================================================================================
   Pagine Carriere: scheda di una posizione aperta con il modulo di candidatura
   ==================================================================================================== */

.jm { width: 1000px; }

.jm__icon-stack { justify-content: center; }
.jm--icon-gap .jm__icon-stack { margin-bottom: 1em; }
.jm__icon { text-align: center; }
.jm__icon-box {
  display: inline-block;
  color: var(--c-text);
  font-size: 50px;
  line-height: 1;
  transition: all 0.3s;
}
.jm__icon-box:hover { color: var(--c-orange); }
.jm__icon-box svg { display: block; }
.jm__icon-box img {
  display: block;
  width: 1em;
  height: 1em;
}

.jm__title-stack { justify-content: center; }
.jm__title .title {
  color: var(--c-primary);
  font: 400 1.2em/1 var(--f-title);
  letter-spacing: 2px;
}
.jm--center-title .jm__title { text-align: center; }

.jm__text {
  padding-right: 2em;
  text-align: justify;
  font: 400 1em/1.5em var(--f-text);
}

@media (max-width: 1024px) {
  .jm {
    width: 95%;
    max-height: 30em;
  }
  .jm--tablet-top .jm__title-stack {
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .jm--tablet-stack .jm__col { width: 100%; }
}
@media (max-width: 767px) {
  .jm__title { text-align: center; }
  .jm--mobile-lh .jm__title .title { line-height: 1.2em; }
}

/* ====================================================================================================
   Pagine Carriere: riquadro "Candidatura spontanea"
   ==================================================================================================== */

.sa-wave {
  margin-top: 1em;
  padding: 5em 0 2em;
  background-image: linear-gradient(180deg, #e7edf2 0%, #7f92a10f 34%);
}
.sa { padding: 0 0 3em; }
.sa__card {
  padding: 2em;
  border-radius: 30px;
  background-color: #fff;
}
.sa__info { padding: 2em 2em 0 0; }
.sa__title .title {
  color: var(--c-primary);
  font: 400 1.2em/1 var(--f-title);
  letter-spacing: 10px;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
}
.sa__text {
  margin-top: 1em;
  text-align: justify;
  font: 400 1em/1.9em var(--f-text);
}

@media (max-width: 1024px) {
  .sa__title .title { line-height: 1.3em; }
}
@media (max-width: 767px) {
  .sa__card { padding: 1.5em; }
  .sa__info { padding: 0; }
  .sa__title { text-align: center; }
  .sa__title .title { line-height: 1.4em; }
  .sa__text { line-height: 1.5em; }
}

/* ====================================================================================================
   Articoli: titolo in cima alla pagina
   ==================================================================================================== */

.post-title {
  margin: 8px 0 16px;
  color: var(--c-primary);
  font: 500 24px/1.2 var(--f-title);
  letter-spacing: 2pt;
  text-align: center;
  text-transform: uppercase;
}

/* ====================================================================================================
   Articoli: data con l'icona del calendario
   ==================================================================================================== */

.pd {
  display: flex;
  flex-direction: column;
  gap: var(--pd-gap);
  text-align: center;
}
.pd__icon {
  color: var(--c-primary);
  font-size: 30px;
  line-height: 0;
}
.pd__date {
  color: var(--c-primary);
  font-size: 1em;
  font-weight: 100;
}

/* ====================================================================================================
   Articoli: pulsanti di condivisione e collegamento "Torna alle news"
   ==================================================================================================== */

.ps__share-icon {
  display: inline-block;
  color: var(--c-primary);
  font-size: 35px;
  line-height: 1;
}
.ps__share-icon svg,
.ps__back-icon svg {
  display: block;
  width: 1em;
  height: 1em;
}
/* Nel font di icone dell'originale (ElementsKit) i glifi su righe più alte del carattere
   risultano 1/16 di em più in alto del centro */
.ps__back-icon svg,
.ps__social .ps__ekit {
  position: relative;
  top: -0.0625em;
}

.ps__social {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: var(--ps-social);
}
.ps__social li {
  display: inline-block;
  margin: 5px;
}
.ps__social a {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--c-text);
  line-height: 40px;
  text-align: center;
  transition: all 0.4s;
}
.ps__social a:hover,
.ps__social a:focus-visible { color: var(--c-primary); }
.ps__social svg { vertical-align: middle !important; }

.ps__back {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ps__back a {
  display: flex;
  align-items: center;
  justify-content: var(--ps-back);
  width: 100%;
  font-family: var(--ps-back-font);
}
.ps__back-icon {
  display: flex;
  align-items: center;
  justify-content: var(--ps-back-icon);
  width: 1.25em;
  height: 1.5em;
  color: var(--c-primary);
  font-size: var(--ps-back-size);
  transition: color 0.3s;
}
.ps__back-text {
  align-self: center;
  padding-inline-start: 5px;
  color: var(--ps-back-color);
  transition: color 0.3s;
}

@media (max-width: 1024px) {
  .ps__back a { justify-content: var(--ps-back-t); }
}
@media (max-width: 767px) {
  .ps__social { text-align: var(--ps-social-m); }
  .ps__back a { justify-content: var(--ps-back-m); }
}

/* ====================================================================================================
   Archivi degli articoli (categorie e autore)
   ==================================================================================================== */

.post__image {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
}
@media (max-width: 991px) {
  .post__image { max-height: 400px; }
}
@media (max-width: 575px) {
  .post__image { max-height: 300px; }
}