/**
 * Colori 
 */
 :root {
  --brand-rosso: hsl(357, 92%, 62%);
  --brand-azzurro: hsl(184.8, 38.5%, 61.8%);
  --brand-verde: hsl(197, 100%, 12%);
  --brand-bianco: hsl(72, 24%, 96%);  
  --clr-white-pure: hsl(0, 0%, 98%);

  --clr-light: var( --brand-bianco );
  --clr-lightest: var( --clr-white-pure );
  --clr-dark: var( --brand-verde );  

  --btn-primary-bg: var( --brand-verde );
  --btn-primary-clr: var( --brand-verde );
  --btn-primary-border: var( --brand-verde );
  --btn-secondary-bg: var( --brand-bianco );
  --btn-secondary-clr: var( --brand-verde );
  --btn-secondary-border: var( --brand-verde );
   
  --link-light-bg: var( --brand-rosso );
  --link-light-hover-clr: var( --clr-lightest );
  --link-dark-bg: var( --clr-lightest );
  --link-dark-hover-clr: var( --clr-dark );
}

/**
 *  Variabili e utility class per tipografia
 */

/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1500,24,1.333,9,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|7,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7738rem + 0.0373vw, 0.8088rem);
  --step--1: clamp(0.9375rem, 0.8994rem + 0.1907vw, 1.0781rem);
  --step-0: clamp(1.125rem, 1.0403rem + 0.4237vw, 1.4375rem);
  --step-1: clamp(1.35rem, 1.1964rem + 0.7678vw, 1.9163rem);
  --step-2: clamp(1.62rem, 1.3666rem + 1.2669vw, 2.5544rem);
  --step-3: clamp(1.9438rem, 1.5475rem + 1.9814vw, 3.405rem);
  --step-4: clamp(2.3325rem, 1.7342rem + 2.9915vw, 4.5388rem);
  --step-5: clamp(2.7994rem, 1.9178rem + 4.4076vw, 6.05rem);
  --step-6: clamp(3.3594rem, 2.0833rem + 6.3805vw, 8.065rem);
  --step-7: clamp(4.0313rem, 2.2092rem + 9.1102vw, 10.75rem);
  --step-8: clamp(4.8375rem, 2.2633rem + 12.8712vw, 14.33rem);
  --step-9: clamp(5.805rem, 2.1991rem + 18.0297vw, 19.1019rem);
}

/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1500,23,1.333,9,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|7,s-l&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.3125rem, 0.2956rem + 0.0847vw, 0.375rem);
  --space-2xs: clamp(0.5625rem, 0.5117rem + 0.2542vw, 0.75rem);
  --space-xs: clamp(0.875rem, 0.8242rem + 0.2542vw, 1.0625rem);
  --space-s: clamp(1.125rem, 1.0403rem + 0.4237vw, 1.4375rem);
  --space-m: clamp(1.6875rem, 1.5519rem + 0.678vw, 2.1875rem);
  --space-l: clamp(2.25rem, 2.0805rem + 0.8475vw, 2.875rem);
  --space-xl: clamp(3.375rem, 3.1208rem + 1.2712vw, 4.3125rem);
  --space-2xl: clamp(4.5rem, 4.161rem + 1.6949vw, 5.75rem);
  --space-3xl: clamp(6.75rem, 6.2415rem + 2.5424vw, 8.625rem);
  --space-4xl: clamp(7.875rem, 7.2818rem + 2.9661vw, 10.0625rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1939rem + 0.5932vw, 0.75rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4269rem + 0.678vw, 1.0625rem);
  --space-xs-s: clamp(0.875rem, 0.7225rem + 0.7627vw, 1.4375rem);
  --space-s-m: clamp(1.125rem, 0.8369rem + 1.4407vw, 2.1875rem);
  --space-m-l: clamp(1.6875rem, 1.3655rem + 1.6102vw, 2.875rem);
  --space-l-xl: clamp(2.25rem, 1.6907rem + 2.7966vw, 4.3125rem);
  --space-xl-2xl: clamp(3.375rem, 2.7309rem + 3.2203vw, 5.75rem);
  --space-2xl-3xl: clamp(4.5rem, 3.3814rem + 5.5932vw, 8.625rem);
  --space-3xl-4xl: clamp(6.75rem, 5.8517rem + 4.4915vw, 10.0625rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.6504rem + 2.3729vw, 2.875rem);
}

.fs-step--1 {
  font-size: var(--step--1);
}
.fs-step-0 {
  font-size: var(--step-0);
}
.fs-step-1 {
  font-size: var(--step-1);
}
.fs-step-2 {
  font-size: var(--step-2);
}
.fs-step-3 {
  font-size: var(--step-3);
}
.fs-step-4 {
  font-size: var(--step-4);
}
.fs-step-5 {
  font-size: var(--step-5);
}
.fs-step-6 {
  font-size: var(--step-6);
}
.fs-step-7 {
  font-size: var(--step-7);
}


:root {
  --fs-title-small: var(--step-2);
  --fs-title-small-line-height: 1.125;

  --fs-title-medium: var(--step-3);
  --fs-title-medium-line-height: 1.05;

  --fs-title-big: var(--step-4);
  --fs-title-big-line-height: 1;

  --fs-display-1: var(--step-5);
  --fs-display-1-line-height: 1.05;

  --fs-body: var( --step-0 );
  --fs-body-line-height: 1.5;
  --fs-body-letter-spacing: 1px;
  
  --fs-body-smaller: var(--step--1);
  --fs-body-smaller-line-height: 1.5;
  --fs-body-smaller-letter-spacing: 1px;
  
  --fs-body-bigger: var(--step-1);
  --fs-body-biggeer-line-height: 1.5;
  --fs-body-bigger-letter-spacing: 1px;
}
.fs-title-small {
  font-size: var(--step-2);
  line-height: 1.125 !important;  
}
.fs-title-medium {
  font-size: var(--step-3);
  line-height: 1.05 !important;  
}
.fs-title-big {
  font-size: var(--step-4);
  line-height: 1 !important;  
}
.fs-display-1 {
  font-size: var(--step-5);
  line-height: 1.05 !important;  
}
.fs-body {
  font-size: var(--step-0);
  line-height: 1.5;
  letter-spacing: 1px;  
}
.fs-body-smaller {
  font-size: var(--step--1);
  line-height: 1.5;
  letter-spacing: 2px;
}
.fs-body-bigger {
  font-size: var(--step-1);
  line-height: 1.5;
  letter-spacing: 2px;
}

/*
In wp-bakery un blocco di testo annida i contenuti effettivi del blocco
in una struttura a 3 livelli: .wpb_content_element > wpb_wrapper > contenuto del blocco.

Quindi, associare una utility class che modifica la dimensione del testo al blocco di testo
non basta per fare in modo che abbia effetto sui contenuti del blocco.

Con questa regola faccio sì che in ogni blocco testo (identificabile dalla classe
.wpb_content_element associata al suo tag più esterno), a cui sia associata una utility class
per la modifica della dimensione del testo (classe che inizia per .fs-step), qualsiasi tag di testo
erediti la dimensione del font. In questo modo la dimensione del font viene ereditata dalla classe fs-step-*
*/
/* .wpb_content_element[class*="fs-"] :where(p, h1, h2, h3, h4, h5, h6) {
  font-size: inherit !important;
} */

h1,
h2,
h3,
h4 {
  letter-spacing: 0.5px;  
}

p {
  /*font-size: var(--step-0);*/
  line-height: 1.5;
  letter-spacing: 1px;
  /* max-width: 70ch; */
  font-weight: 500;
}

/* Pagine */
/*
html body.page .ocm-effect-wrap :is(h1,h2,h3,h4) {
  font-family: Calistoga;
}

html body.page .ocm-effect-wrap h1 {
  font-size: var(--step-4);
  line-height: 1.05 !important;  
}

html body.page .ocm-effect-wrap h2 {
  font-size: var(--step-3);
  line-height: 1.05 !important;  
}

html body.page .ocm-effect-wrap h3 {
  font-size: var(--step-2);  
  line-height: 1.2 !important;  
}

html body.page .ocm-effect-wrap h4 {
  font-size: var(--step-1);
  line-height: 1 !important;  
}
*/

.serif-bold {
  font-family: Calistoga;
}

.text-full-width {
  max-width: none;
}


/**
 *  Variabili e utility class per spaziature
 */

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}
.flow-nested :where(.wpb_wrapper, .col) > * + * {
  margin-block-start: var(--flow-space, 1em);
  padding-block: 0;
}

.flow-space-0 {
  --flow-space: 0;
}

.flow-space-3xs {
  --flow-space: var(--space-3xs);
}
.flow-space-2xs {
  --flow-space: var(--space-2xs);
}
.flow-space-xs {
  --flow-space: var(--space-xs);
}
.flow-space-s {
  --flow-space: var(--space-s);
}
.flow-space-m {
  --flow-space: var(--space-m);
}
.flow-space-l {
  --flow-space: var(--space-l);
}
.flow-space-xl {
  --flow-space: var(--space-xl);
}
.flow-space-2xl {
  --flow-space: var(--space-2xl);
}
.flow-space-3xl {
  --flow-space: var(--space-3xl);
}
.flow-space-4xl {
  --flow-space: var(--space-4xl);
}
.flow-space-s-m {
  --flow-space: var(--space-s-m);
}
.flow-space-m-l {
  --flow-space: var(--space-m-l);
}
.flow-space-l-xl {
  --flow-space: var(--space-l-xl);
}
.flow-space-xl-2xl {
  --flow-space: var(--space-xl-2xl);
}

/* Centra orizzontalmente il testo conteuto in un text block */

.marg-center-h :where(p, h1, h2, h3, h4, h5, h6) {
  margin-inline: auto;
}

/*
  La classe applica lo spazio verticale standard per le singole sezioni.
  Dato che wp bakery ha la pessima abitudine di applicare stile inline, devo applicare il padding
  al primo elemento che non ha stile inline, perché voglio evitare di usare parole magiche (sì, !important,
  sto parlando di te). 
  Per quanto riguarda la sezione, il primo elemento utile è la prima riga annidata, che ha sempre una classe
  .col.
*/
.region > .col {
  padding-block: var(--space-4xl)
}


/* Stile dei link */

a {
  --_dark-bg: var( --dark-bg, var( --link-dark-bg ) );
  --_dark-hover-clr: var( --dark-hover-clr, var( --link-dark-hover-clr ) );

  --_light-bg: var( --light-bg, var( --link-light-bg ) );
  --_light-hover-clr: var( --light-hover-clr, var( --link-light-hover-clr ) );
  
  --_underline-initial-height: var( --underline-initial-height, 10%);
  --_underline-initial-position: var( --underline-initial-position, 10%);
}


#page-header-bg .section-title .inner-wrap a {
  font-size: var(--step--1);
  font-weight: 400;
}

/* #page-header-bg .section-title .inner-wrap a:hover {
  color: inherit !important;
} */

:is( .meta-category, .grav-wrap .text) a::before {
  display: none;
}

/* :is( 
    .wpb_content_element, 
    .post-area > article .post-content,
    :is( .meta-category, .grav-wrap .text, .meta-author),
    #page-header-bg .container .section-title,
    .tab-item
) a {  
  position: relative;
  padding-inline: 2px;
  transition: all 100ms linear !important;  
  --light-hover-clr: var( --clr-light );
}

:is( 
    .wpb_content_element, 
    .post-area > article .post-content,
    :is( .meta-category, .grav-wrap .text, .meta-author),
    #page-header-bg .container .section-title,
    .tab-item
) a::after {  
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: var( --_underline-initial-position );
  width: 100%;
  height: var( --_underline-initial-height );
  background-color: var( --_light-bg );  
  transition: all 100ms linear !important;
  will-change: height;
  z-index: -1;
}

:is( 
    .wpb_content_element, 
    .post-area > article .post-content,
    :is( .meta-category, .grav-wrap .text, .meta-author),
    #page-header-bg .container .section-title,
    .tab-item
) a:is(:hover,:focus)::after {
  height: calc( 100% - var( --_underline-initial-position ) );  
}

:is( 
    .wpb_content_element, 
    .post-area > article .post-content,
    :is( .meta-category, .grav-wrap .text, .meta-author),
    #page-header-bg .container .section-title,
    .tab-item
) a:is(:hover, :focus) {
  color: var( --_light-hover-clr ) !important;
} */

:is( 
    .wpb_content_element, 
    .post-area > article .post-content
) a:not([role="button"]):not(:has(>img)) {      
  transition: all 50ms linear !important;  
  text-decoration: underline var( --_light-bg ) solid 10%;  
  padding-inline: 4px;
}

:is(
  .wpb_content_element,
  .post-area > article .post-content,
  .meta-category,
  .grav-wrap .text,
  .meta-author,
  #page-header-bg .container .section-title .inner-wrap,
  .tab-item
) :is(
  a:not([role="button"]):not(:has(>img)):where(:hover, :focus),
  a:not([role="button"]):where(:hover, :focus) > .meta-author-name
) {
  background-color: var(--_light-bg) !important;  
  transition: all 50ms linear !important;    
  color: var(--_light-hover-clr) !important;
}

/* La solita classe hide */
.hide {
  display: none;
}

/* Correzioni varie */

/* Rende responsive le immagini e nasconde gli embed audio senza controlli */
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}
audio:not([controls]) { display:none; }


/**
 * HOMEPAGE
 */

.home-section-02 .wpb_content_element p {  
  text-align: left;
}
@media all and (max-width: 998px) {
  .home-section-02 .wpb_content_element p {
    font-size: var( --step-2 ) !important;;
    text-align: center;
  }
}

/* Cambio lo spessore della linea per la parte del logo
che imita la firma> "your marketing partner" */
.firma {
  stroke-width: 3;
}

/* Sezione Chi siamo */
.scheda-team__info p strong {
    font-size: var( --step-1);
}
.scheda-team__info p {
  font-size: var( --step-0);
}

.scheda-team i {
  font-size: var( --step-1 ) !important;
}

/* Sezione Tab offerta  */

.wpb_wrapper.tabbed {
  display: flex !important;
}

.wpb_wrapper.tabbed .wpb_tab {
  float: none !important;
}

.offerta-desktop-tabs .wpb_wrapper .wpb_tabs_nav {
  margin: 0;  
}

.offerta-desktop-tabs .ui-tabs-panel :where( .wpb_row, .col) {
  height: 100%;
}

.offerta-desktop-tabs .ui-tabs-panel .vc_column-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.offerta-desktop-tabs .ui-tabs-nav .tab-item span {
  font-size: var(--step-1);  
  font-family: Calistoga;
} 

.wpb_tabs_nav {
  --link-underline-initial-height: 5%;
  --link-underline-initial-position: 0%;
}


/* Form / Privacy */
.accettazione-privacy [type="checkbox"] + span,
.accettazione-privacy .privacy-label {  
  padding-left: 1.95rem;
  
}
.accettazione-privacy p * {
  font-size: var( --step--1 ) !important;;
}

/* Sezione Modello di lavoro */
@media all and (min-width: 998px ) {
  .modello-lavoro .column_container {
    --flow-space: 0;
  }    
}
.modello-lavoro .column_container .wpb_content_element {
  --flow-space: 1em;
}  


/* Sezione Esperienze */
.sezione-esperienze__loghi .hover-wrap {
	background-color: white;
	padding: 5%;
}

		
/* Carosello testimonianze */

@media only screen and (max-width: 690px) {
  .testimonial_slider[data-style*="multiple_visible"] blockquote
{
    width: 95%;
  }
}

@media only screen and (min-width: 1000px) and (max-width: 1300px) {
  .testimonial_slider[data-style="multiple_visible"] blockquote
{
    width: 66%;
  }
}

@media only screen and (min-width: 1300px) and (max-width: 2000px) {
  .testimonial_slider[data-style="multiple_visible"] blockquote
{
    width: 50%;
  }
}

@media only screen and (min-width: 2000px) {
  .testimonial_slider[data-style="multiple_visible"] blockquote
{
    width: 33%;
  }
}

.testimonial_slider[data-style="multiple_visible"] .image-icon {
  width: 100px;
  height: 100px;
}

.testimonial_slider .flickity-slider .testimonial-name {
  font-size: var( --step-1 );   
}

.testimonial_slider .flickity-slider blockquote .title {
  margin-top: var(--space-2xs);
  font-size: var( --step--0 );  
}

.flickity-page-dots > .dot {
  width: var(--space-xl); 
}

.flickity-page-dots > .dot:before {  
  height: var(--space-3xs);
}


/* Preview Blog */
.nectar-post-grid-item :where( .meta-category, .meta-author ) {
  font-size: var( --step--1 );
}

.blog-preview__link p {
  margin-inline-start: auto;
}

.blog-preview__link a {
  background-color: white;
  padding-inline: 13px;
  padding-block: 3px;
  font-size: var(--step-2);  
  line-height: 1.8;
}

.blog-preview__link a span {
  position: relative;
  display: inline-block;
  margin-inline-end: .5rem;  
  animation: 1s ease-in infinite alternate bounce-right;
}


@keyframes bounce-right {
  from {
    /* pushes the sun down past the viewport */
    transform: translateX(0%);
  }
  to {
    /* returns the sun to its default position */
    transform: translateX(50%);
  }
}
.bounce-right {
  position: relative;
  animation: 1s ease-in infinite alternate bounce-right;
}

@keyframes bounce-down {
  from {
    /* pushes the sun down past the viewport */
    transform: translateY(0%);
  }
  to {
    /* returns the sun to its default position */
    transform: translateY(50%);
  }
}
.bounce-down {
  display: inline-block;
  position: relative;  
  margin-block-end: .5rem;  
  animation: 1s ease-in infinite alternate bounce-down;
}


/**
 * THE MARKETING CHANNEL
 */
 

/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1500,20,1.333,9,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|7,s-l&g=s,l,xl,12 */

html body:where(.single, .archive, .page-id-238) {
  --step--2: clamp(0.7035rem, 0.8023rem + -0.1055vi, 0.7813rem);
  --step--1: clamp(0.9375rem, 0.9374rem + 0.0003vi, 0.9377rem);
  --step-0: clamp(1.125rem, 1.0911rem + 0.1695vi, 1.25rem);
  --step-1: clamp(1.35rem, 1.2642rem + 0.4288vi, 1.6663rem);
  --step-2: clamp(1.62rem, 1.457rem + 0.8151vi, 2.2211rem);
  --step-3: clamp(1.944rem, 1.6683rem + 1.3786vi, 2.9607rem);
  --step-4: clamp(2.3328rem, 1.8951rem + 2.1883vi, 3.9467rem);
  --step-5: clamp(2.7994rem, 2.1318rem + 3.3377vi, 5.2609rem);
  --step-6: clamp(3.3592rem, 2.3684rem + 4.954vi, 7.0128rem);
  --step-7: clamp(4.0311rem, 2.5892rem + 7.2095vi, 9.3481rem);
  --step-8: clamp(4.8373rem, 2.7699rem + 10.3372vi, 12.461rem);
  --step-9: clamp(5.8048rem, 2.8744rem + 14.6518vi, 16.6104rem);
}

/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1500,20,1.333,9,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|7,s-l&g=s,l,xl,12 */

html body:where(.single, .archive, .page-id-238) {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5456rem + 0.0847vi, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8581rem + 0.0847vi, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0911rem + 0.1695vi, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6367rem + 0.2542vi, 1.875rem);
  --space-l: clamp(2.25rem, 2.1822rem + 0.339vi, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2733rem + 0.5085vi, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3644rem + 0.678vi, 5rem);
  --space-3xl: clamp(6.75rem, 6.5466rem + 1.0169vi, 7.5rem);
  --space-4xl: clamp(7.875rem, 7.6377rem + 1.1864vi, 8.75rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.2278rem + 0.4237vi, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4608rem + 0.5085vi, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7733rem + 0.5085vi, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.9216rem + 1.0169vi, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.4672rem + 1.1017vi, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.8432rem + 2.0339vi, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.9343rem + 2.2034vi, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.6864rem + 4.0678vi, 7.5rem);
  --space-3xl-4xl: clamp(6.75rem, 6.2076rem + 2.7119vi, 8.75rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.7521rem + 1.8644vi, 2.5rem);
}

html body:is(.single, .archive, .page-id-238) .content-inner :is(p, ul, ol),
.excerpt {
  font-size: var(--step-0);
  max-width: 70ch;
  font-weight: 400;
  line-height: 1.5;
}

html body:is(.single, .archive, .page-id-238) .ocm-effect-wrap :is(h1,h2,h3,h4) {
  font-family: Calistoga;
}

.single #page-header-bg .entry-title {
  font-size: var(--step-4);
  line-height: 1.1 !important;
  font-family: Calistoga;
}

html body:is(.single, .archive, .page-id-238) .ocm-effect-wrap h1 {
  font-size: var(--step-3);
  line-height: 1.12 !important;
  font-family: Calistoga;
}

html body:is(.single, .archive, .page-id-238) .ocm-effect-wrap h2 {
  font-size: var(--step-2);
  line-height: 1.125 !important;
  font-family: Calistoga;
}

html body:is(.single, .archive, .page-id-238) .ocm-effect-wrap h3 {
  font-size: var(--step-1);  
  line-height: 1.2 !important;  
}

html body:is(.single, .archive, .page-id-238) .ocm-effect-wrap h4 {
  font-size: var(--step-0);
  line-height: 1.3 !important;  
}




/* Header */

#page-header-bg .blog-title * {
  color: var( --clr-light ) !important;
}
.single .container-wrap {
  background-color: var( --clr-white-pure );
}


:is(.archive,.page-id-238) .large-featured-post-title a {
  font-size: var(--step-2);
}

/* Posts / Archivio post */

.post-area .posts-container .post-featured-img :where( img, video) {
  object-fit: cover;
}



/** Paginazione **/

#pagination {
  margin-block-start: 2rem;
}

#pagination .page-numbers {
  display: flex;
  flex-direction: row;
  gap: 1rem;    
  color: #002b3c !important;
  margin-inline: 0;  
}

#pagination .page-numbers li {
  list-style: none;    
}

#pagination .page-numbers li .page-numbers {
  background-color: #002b3c;
  border: 1px solid #002b3c;
  color: white !important;
}

#pagination .page-numbers li .current {
  background-color: #f8444f !important;
}


/* Post / Related posts */
.related-posts[data-style="material"] .post-featured-img img {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}

.related-posts .post-featured-img {
  aspect-ratio: 16/9;
  /*! width: 100%; */
}

.related-posts .post-featured-img :is(img, video) {
  height: 100%;
  object-fit: cover;
  width: 100% !important;
}

:where(.post-content, .wp-block-post-content) figure > :not( figcaption ) {
    max-width: min( 800px, 100%) !important;; 
}

:where(.post-content, .wp-block-post-content) figure {
    margin-block: 2rem;
}

:where(.post-content, .wp-block-post-content) figure > figcaption {
    font-style: italic; 
}

:where(.post-content, .wp-post-content) figure > * {    
    text-align: center;
    margin-inline: auto;
}


/**
 * Solo pagine archivio
 */ 

/* Spaziatura verticale tra gli articoli */

:is(.archive,.page-id-238) .post-area .posts-container > * {
  margin-block: 0;
}

:is(.archive,.page-id-238) .post-area .posts-container > * + * {    
  --flow-space: var(--space-xl);
  margin-block-start: var(--flow-space, 1em);
}

/* Formato del singolo articolo */
:is(.archive,.page-id-238) .article-content-wrap {
  --flow-space: 0;
  display: flex;
  gap: var(--space-xl);
}

:is(.archive,.page-id-238) .post-area .article-content-wrap .post-featured-img-wrap {
  position: static;
  flex-basis: 300px;
  aspect-ratio: 1 / 1;
  height: 300px;  
  width: 100%;
  top: 0;
  transform: translateY(0%) !important;
  justify-content: center;
  
}

:is(.archive,.page-id-238) .post-area .article-content-wrap .post-content-wrap *:not(:first-child) + * {      
  /*! --flow-space: 1em; */
  margin-block-start: var(--flow-space, 1em);
}


:is(.archive,.page-id-238) .post-area .article-content-wrap .post-content-wrap {
  --flow-space: 0;
  padding: 0;
  display: flex;
  flex-direction: column;  
  justify-content: center;
  left: auto !important;
}

:is(.archive,.page-id-238) .post-content-wrap > * {
  margin: 0;
  --flow-space: var(--space-2xs)
}


/**
 * MISCELLANEA
 */

/* Misc / Metadata nelle anteprime dei post */

/* Fai in modo che la larghezza dell'elemento coincida con la larghezza del contenuto
in modo che l'effetto hover, che cambia il colore di background, funzioni bene.
Altrimenti, la larghezza sarebbe dipesa da quella dell'elemento span che segue, che visualizza
la data del post */
.grav-wrap {
  z-index: 110;
}
.grav-wrap .text a {  
  display: inline-block !important;
}
/* Visualizza la data su una riga separata */
.grav-wrap .text a + span {  
  display: block;
}

/**
 * COOKIE BANNER
 */

#iubenda-cs-banner .iubenda-cs-container 
:is( 
  .iubenda-cs-reject-btn, 
  .iubenda-cs-customize-btn, 
  .iubenda-cs-accept-btn 
) {
  border-radius: 4px !important;
}

#iubenda-cs-banner .iubenda-cs-container .iubenda-cs-content {
  background-color: var( --clr-white-pure ) !important;
  box-shadow: 8px -8px 40px rgba(0,0,0,.2) !important;
}

#iubenda-cs-banner .iubenda-cs-container .iubenda-cs-content :is(.iubenda-cs-reject-btn, .iubenda-cs-customize-btn ) {
  background-color: hsl(0, 0%, 98%) !important;
  color: var( --btn-secondary-clr ) !important;
  border: 1px solid var(--btn-secondary-border) !important;  
}

#iubenda-cs-banner .iubenda-cs-container .iubenda-cs-content .iubenda-cs-accept-btn {
  background-color: var( --btn-primary-bg ) !important;
  color: var( --clr-white-pure ) !important;
  border: 1px solid var(--btn-primary-border) !important;
}

#iubenda-cs-banner .iubenda-cs-container 
:is( 
  .iubenda-cs-reject-btn, 
  .iubenda-cs-customize-btn, 
  .iubenda-cs-accept-btn 
):hover {
  opacity: .8;
}

#iubenda-cs-banner .iubenda-cs-rationale #iubenda-cs-title {
  font-size: var(--fs-body) !important;  
}


/* Gallery lightbox usata negli articoli*/

[id^="lbbLightBox"] {
    margin-block-end: 1.5rem;
}

/* Allinea a sinistra il nome dell'autore nella pagina del singolo articolo */
.single #page-header-wrap #page-header-bg[data-post-hs="default_minimal"] #single-below-header {
  text-align: left;
}

/* Nascondi sezione "Le ultime dal marketing" nella home del blog */
body:is(.page-id-343, .page-id-238) #recent-posts-extra-2 {
  display: none;
}

/* Sistema il padding laterale dell'immagine nel post featured di tutte le pagine archivio */
@media only screen and (max-width:999px) {
    .nectar-recent-posts-single_featured .recent-post-container {
        padding-inline: var(--space-m) !important;
    }
}

/* Pulsanti di collegamento ai progetti Warp nella sidebar delle del blog */
.w7-progs {
    --_fs-body:var(--fs-body, 1rem);
    --_fs-title:var(--fs-title, 2rem);
    --fs-body:var(--step--1);
    --fs-title:var(--step-0)
}
.w7-progs .w7-progs__wrapper figure img {
    width:100% !important;
    object-fit:contain;
    margin-bottom: 0;
}
.w7-progs__wrapper {
    display:flex;
    flex-direction:column;
    gap:2rem;
}
.w7-progs figure {
  border: 1px solid black;
}

.w7-progs figcaption {
  padding: 1rem;  
} 
.w7-progs p {
    font-size:var(--_fs-body);
    line-height:1.4
}
.w7-progs h3 {
    font-size:var(--_fs-title);
    line-height:1.2
}

.w7-progs h3 .arrow {
    display:inline-block;
    position:relative;
    left:10px;
    transition: all 150ms ease;
}
.w7-progs a:hover .arrow {
    transform:translateX(10px)
}

.w7-progs a:hover h3 {
    color: var( --link-light-bg );
}