:root {
    /*font*/
  --font-body: 'Saira', Arial, sans-serif;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-label: 'Dancing Script', serif;

  }


body, .font-body  {
  font-family: var(--font-body);
  color: var(--color-text);
}


  /* Titolazioni principali */
  .font-heading,
  h1, h2, h3, h4, h5, h6,
  .entry-title,
  .section-title,
  .page-title  {
  font-family: var(--font-heading);
  /*color: var(--color-title);*/

}
  /* Label / elementi decorativi */
  .font-label,
  .eyebrow,
  .section-label,
  .kicker {
    font-family: var(--font-label);
  }

  /* Classi titolazioni */
  .title-hero {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1;
    font-weight: 600;
  }

  .title-page {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.05;
    font-weight: 600;
  }

  .title-section {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.1;
    font-weight: 600;
  }

  .title-card {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 600;
  }

  .title-sm {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: 600;
  }

  /* Testo corpo */
  .text-body-lg {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.7;
    font-weight: 400;
  }

  .text-body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
  }

  .text-body-sm {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    font-weight: 400;
  }

  /* Label */
  .label-script {
    font-family: var(--font-label);
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 400;
  }

  .label-script-lg {
    font-family: var(--font-label);
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 400;
  }

  
    /* Testi secondari */
  .text-muted {
    color: rgb(var(--color-muted));
  }


    /* Background */
  .bg-cream {
    background-color: rgb(var(--color-cream));
  }

  .bg-cream-light {
    background-color: rgb(var(--color-cream-light));
  }


  /* Link */
  a,  .link-accent {
    transition:
      color 0.2s ease,
      background-color 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }
    a:not(.text-white) {
    color: var(--color-red);
    }

  a:hover:not(.text-white),
  .link-accent:hover {
    color: var(--color-red-hover);
  }

  a:active:not(.text-white),
  .link-accent:active {
    color: var(--color-red-active);
  }

  a:focus-visible,
  .link-accent:focus-visible {
    outline: 2px solid var(--color-red-focus);
    outline-offset: 2px;
  }

  /* Pulsante base */
  .btn,
  .button,
  .wp-element-button,
  button,
  input[type="submit"],
  input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /*background-color: rgb(var(--color-accent));
    color: rgb(var(--color-white));*/
    border: 1px solid rgb(var(--color-accent));
    text-decoration: none;
    transition:
      color 0.2s ease,
      background-color 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
    cursor: pointer;
  }

  .btn:hover,
  .button:hover,
  .wp-element-button:hover,
  button:hover,
  input[type="submit"]:hover,
  input[type="button"]:hover {
    /*background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: rgb(var(--color-white));*/
  }

  .btn:active,
  .button:active,
  .wp-element-button:active,
  button:active,
  input[type="submit"]:active,
  input[type="button"]:active {
    background-color: var(--color-accent-active);
    border-color: var(--color-accent-active);
    transform: translateY(1px);
  }

  .btn:focus-visible,
  .button:focus-visible,
  .wp-element-button:focus-visible,
  button:focus-visible,
  input[type="submit"]:focus-visible,
  input[type="button"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-focus);
  }

  /* Variante outline opzionale */
  .btn-outline {
    background-color: transparent;
    color: rgb(var(--color-accent));
    border: 1px solid rgb(var(--color-accent));
  }

  .btn-outline:hover {
    background-color: color-mix(in srgb, rgb(var(--color-accent)) 10%, white);
    color: rgb(var(--color-accent));
    border-color: var(--color-accent-hover);
  }

  .btn-outline:active {
    background-color: color-mix(in srgb, rgb(var(--color-accent)) 18%, white);
    color: rgb(var(--color-accent));
    border-color: var(--color-accent-active);
  }

  .btn-outline:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-focus);
  }
a[href=""] {
    display: none;
}

.social-link span {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-color: #a50f37;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

.social-link span.social-icon-Facebook  {
	mask-image: url('../img/icon/facebook.svg');
	-webkit-mask-image: url('../img/icon/facebook.svg');
}
.social-link span.social-icon-LinkedIn  {
	mask-image: url('../img/icon/linkedin.svg');
	-webkit-mask-image: url('../img/icon/linkedin.svg');
}
.social-link span.social-icon-Instagram  {
	mask-image: url('../img/icon/instagram.svg');
	-webkit-mask-image: url('../img/icon/instagram.svg');
}

.social-link:hover .social-icon {
	background-color: #b3113b;
}