/*
Theme Name: Smith Theme
Theme URI: ''
Author: Giuseppe Marazzita
Author URI: ''
Description: Un tema FSE per Smith, basato sul mock-up.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: fse, block-theme, responsive
Text Domain: smith-theme
*/

/*Style bottone di default*/
/* .wp-block-button__link {
  border-radius: 13px !important;
  border-color: var(--wp--preset--color--primary) !important;
} */

/* .container {
  background-color: rgb(194, 25, 203) !important;
  padding: 3rem !important;
} */

html {
  scroll-behavior: smooth;
}

.find-out-first {
	background: linear-gradient(to bottom, #ffffff, #e0f2f4);
	padding: 10px;
    border-radius: 20px;
}


.find-out-second {
	background: linear-gradient(to bottom, #ffffff, #e6f4e0);
	padding: 10px;
    border-radius: 20px;
}

.find-out-third {
	#background: linear-gradient(to bottom, #ffffff, #f4e0f2);
	background: linear-gradient(to bottom, #ffffff, #e0f2f4);
	padding: 10px;
    border-radius: 20px;
}

.find-out-fourth {
	#background: linear-gradient(to bottom, #ffffff, #f4f2e0);  
	background: linear-gradient(to bottom, #ffffff, #e6f4e0);
	padding: 10px;
    border-radius: 20px;
}


.find-out-five {
	#background: linear-gradient(to bottom, #ffffff, #f4e8e0);
	background: linear-gradient(to bottom, #ffffff, #e0f2f4);
	padding: 10px;
    border-radius: 20px;
}

.find-out-six {
	#background: linear-gradient(to bottom, #ffffff, #f4e0e6); 
	background: linear-gradient(to bottom, #ffffff, #e6f4e0);
	padding: 10px;
    border-radius: 20px;
}

.find-out-seven {
	#background: linear-gradient(to bottom, #ffffff, #e0f4f2); 
	background: linear-gradient(to bottom, #ffffff, #e0f2f4);
	padding: 10px;
    border-radius: 20px;
}







.badge-row-container {
	display:flex;
	align-items: baseline;
}

/* ...existing code... */

/* Badge raffinati */
.badge {
  --badge-bg: linear-gradient(145deg,var(--badge-c1,#f5f7fa),var(--badge-c2,#eceff4));
  --badge-border: rgba(0,0,0,.08);
  --badge-glow: 0 0 0 0 rgba(0,0,0,0);
  --badge-text: var(--badge-text-color,#253046);
  --badge-radius: 40px;
  --badge-pad-y: .38rem;
  --badge-pad-x: .85rem;
  --badge-font: 0.68rem;
  display:inline-flex;
	  padding:12px !important;
  align-items:center;
  gap:.45em;
  padding:var(--badge-pad-y) var(--badge-pad-x);
  border-radius:var(--badge-radius);
  font-size:var(--badge-font);
  font-weight:600;
  letter-spacing:.35px;
  line-height:1;
  text-transform:uppercase;
  background:var(--badge-bg);
  color:var(--badge-text);
  border:1px solid var(--badge-border);
  position:relative;
  transition:.35s cubic-bezier(.4,.2,.2,1);
  backdrop-filter:saturate(160%) blur(4px);
  -webkit-font-smoothing:antialiased;
}

.badge::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);
  mix-blend-mode:overlay;
  pointer-events:none;
}

.badge:hover,
.badge:focus-visible {
  box-shadow:var(--badge-glow), 0 2px 4px -1px rgba(0,0,0,.08), 0 4px 14px -2px rgba(0,0,0,.12);
  transform:translateY(-1px);
}

.badge:active {
  transform:translateY(0);
  filter:saturate(110%);
}

/* Varianti delicate */
.badge--primary {
  --badge-c1:#eef4ff;
  --badge-c2:#dde9ff;
  --badge-text-color:#1d47a4;
  --badge-border:rgba(46,117,255,.25);
  --badge-glow:0 0 0 4px rgba(59,130,246,.12);
}
.badge--success {
  --badge-c1:#e9f9f1;
  --badge-c2:#d7f2e6;
  --badge-text-color:#0b6245;
  --badge-border:rgba(16,185,129,.28);
  --badge-glow:0 0 0 4px rgba(16,185,129,.14);
}
.badge--warning {
  --badge-c1:#fff7ea;
  --badge-c2:#ffeed6;
  --badge-text-color:#7b4607;
  --badge-border:rgba(245,158,11,.30);
  --badge-glow:0 0 0 4px rgba(245,158,11,.18);
}
.badge--danger {
  --badge-c1:#fff1f1;
  --badge-c2:#ffe2e2;
  --badge-text-color:#7f1d1d;
  --badge-border:rgba(239,68,68,.32);
  --badge-glow:0 0 0 4px rgba(239,68,68,.16);
}
.badge--info {
  --badge-c1:#e9f8fb;
  --badge-c2:#d6f0f6;
  --badge-text-color:#0e4d59;
  --badge-border:rgba(14,165,233,.28);
  --badge-glow:0 0 0 4px rgba(14,165,233,.15);
}
.badge--neutral {
  --badge-c1:#f4f5f7;
  --badge-c2:#e9eaed;
  --badge-text-color:#2f3947;
  --badge-border:rgba(0,0,0,.12);
  --badge-glow:0 0 0 4px rgba(0,0,0,.08);
}

/* Dimensioni opzionali */
.badge--sm { --badge-pad-y:.30rem; --badge-pad-x:.65rem; --badge-font:.60rem; }
.badge--lg { --badge-pad-y:.55rem; --badge-pad-x:1rem; --badge-font:.75rem; }

/* Icone opzionali */
.badge .icon {
  display:inline-flex;
  font-size:1.05em;
  line-height:1;
  translate:0 1px;
  opacity:.85;
}

/* Focus accessibile */
.badge:focus-visible {
  outline:2px solid rgba(0,0,0,.6);
  outline-offset:2px;
}

/* ...existing code... */
.hero-2-inner {
	display: flex;
	align-items: flex-start;
}


.gap-market-icon-container {
	background-color: #ebf8ff !important;
}

.smith-footer-link {
	color: #a1a1a1 !important;
}

.smith-footer-column > p {
	color: #a1a1a1;
}

.footer-title {
	color: white !important;
}

.btn-secondary > div > a {
	background-image: radial-gradient(rgb(209, 221, 223, .5), rgb(255, 255, 255));
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center center;
    transition: .1s;
}

.btn-secondary > div > a:hover {
	background-image: radial-gradient(rgb(181, 204, 208, .5), rgb(255, 255, 255));
    transition: .9s;
    background-size: 200% 200%;
}

.btn-primary > div > a {
	background-image: radial-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center center;
    transition: .1s;
}

.btn-primary > div > a:hover {
	background-image: radial-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
    transition: .9s;
    background-size: 200% 200%;
}

.logo-smith-text {
	color: var(--wp--preset--color--primary);
	font-style: italic;
	font-size: 1.25rem !important;
    line-height: 1.75rem !important;
}

.wp-block-navigation-item__label {
	font-family: "Saira Extra Condensed", sans-serif;
    letter-spacing: 1px;
    -webkit-font-smoothing: antialiased;
}
.wp-block-navigation-item__label {
  position: relative;
}

.wp-block-navigation-item__label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
  width: 100%;
  height: 1px;
  background-color: var(--wp--preset--color--primary) !important;
  transition: transform 250ms;
}

.wp-block-navigation-item__content:hover .wp-block-navigation-item__label::after {
  transform: translateX(-50%) scaleX(1);
}

.contact-container {
	display: grid !important;
	grid-template-columns: 3fr 5fr !important;
	max-width: 1200px !important;
	gap: 60px !important;
}

.contact-group {
	display: flex;
    justify-content: center;
    align-items: center;
}

.hero-2 {
  background: linear-gradient(270deg, rgb(255, 255, 255), rgb(220, 243, 255));
}

.page-title-bg {
  background: linear-gradient(270deg, rgb(255, 255, 255), rgb(220, 243, 255)) !important;
}

.embedded-video-container {
	display: flex !important;
}

.smith-footer-link {
  color: var(--wp--preset--color--gray);
}
.wp-block-template-part {
  margin-block-start: 0px !important;
}

.gap-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;
}
.footer-section a {
  color: aliceblue;
}
.container {
    margin: 0 auto;
    max-width: 1400px;
    padding: 0 2rem 32px
;
}
.gap-market-icon-container {
    background-color: var(--wp--preset--color--primary-light);
    padding: 15px !important;
    display: inline-block;
    border-radius: 12px;
}
.home-solve-icon-row {
  display: flex;
    flex-direction: row;
    align-items: start;
    gap: 10px;
}
.home-solve-icon {
  width: 24px !important;
}
.home-solve-icon-container {
    background-color: var(--wp--preset--color--primary-light);
    padding: 10px !important;
    display: inline-block;
    border-radius: 25px;
}
.home-solve-text-img-box {
  display: flex;
  align-items: center;
}

.wp-block-latest-posts__featured-image img { 
  border-radius: 16px;
}

h1 {
  color: var(--wp--preset--color--text-default) !important;
}
h2 {
  font-weight: 300;
  color: var(--wp--preset--color--text-default) !important;
}
h3 {
  color: var(--wp--preset--color--text-default) !important;
}
h4 {
  color: var(--wp--preset--color--text-default) !important;
}

span {
  color: var(--wp--preset--color--text-default) !important;
}

p {
  color: var(--wp--preset--color--text-default) !important;
}

.hero-2 {
    padding-top: 0px !important;
    padding-bottom: 0px !important; 
  }
  .smith-solve-container {
    background: linear-gradient(270deg, rgb(255, 255, 255), rgb(200, 234, 238));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04); /* ombra molto leggera */
  }
  .gap-container {
    background: linear-gradient(180deg, rgb(255, 255, 255), rgb(240, 247, 250));
  }
  .latest-news-container {
    background: linear-gradient(0deg, rgb(255, 255, 255), rgb(249, 250, 251));
  }
  .invest-container {
    background: linear-gradient(to right, rgb(230, 235, 234), rgb(250, 250, 250));
  }

  .gap-card-uno-uno {
    animation: appearance-left 1s cubic-bezier(0.22, 1, 0.36, 1) 0.20s forwards;
    background: #FFFF;
    background: linear-gradient(270deg, rgb(226, 244, 252), rgb(190, 225, 240)); 
  }
  .gap-card-uno-due {
    animation: appearance-left 1s cubic-bezier(0.22, 1, 0.36, 1) 0.30s forwards;
    background: #FFFF;
    background: linear-gradient(270deg, rgb(226, 244, 252), rgb(190, 225, 240));  
  }

  .gap-card-uno-tre {
    animation: appearance-left 1s cubic-bezier(0.22, 1, 0.36, 1) 0.40s forwards;
    background: #FFFF;
    background: linear-gradient(270deg, rgb(226, 244, 252), rgb(190, 225, 240)); 
  }

   .gap-card-due-uno {
    animation: appearance-left 1s cubic-bezier(0.22, 1, 0.36, 1) 0.50s forwards;
    background: #FFFF;
    background: linear-gradient(270deg, rgb(226, 244, 252), rgb(190, 225, 240));
  }

  .gap-card-due-due {
    animation: appearance-left 1s cubic-bezier(0.22, 1, 0.36, 1) 0.60s forwards;
    background: #FFFF;
    background: linear-gradient(270deg, rgb(226, 244, 252), rgb(190, 225, 240));  
  }

  .gap-card-due-tre {
    animation: appearance-left 1s cubic-bezier(0.22, 1, 0.36, 1) 0.70s forwards;
    background: #FFFF;
    background: linear-gradient(270deg, rgb(226, 244, 252), rgb(190, 225, 240));
  }

  .smith-solve-left {
    animation-name: slide-from-left;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-play-state: paused;
  }
  .smith-solve-right {
    animation-name: slide-from-right;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-play-state: paused;
  }
  
  .functionality-chess-first {
    animation-name: slide-from-left;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-play-state: paused;
  }
  .functionality-chess-second {
    animation-name: slide-from-right;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-play-state: paused;
  }
  .functionality-chess-third {
    animation-name: slide-from-left;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-play-state: paused;
  }
  .functionality-chess-fourth {
    animation-name: slide-from-right;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-play-state: paused;
  }
  .hero-elenco {
    display: none;
  }
  .appearance-block {
  transform: translateY(20px);
  animation: appearance 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
  .invest1 {
   animation: appearance-left 1s cubic-bezier(0.22, 1, 0.36, 1) 0.20s forwards;
  }

  .invest2 {
   animation: appearance-left 1s cubic-bezier(0.22, 1, 0.36, 1) 0.30s forwards;
  }
  .invest3 {
   animation: appearance-left 1s cubic-bezier(0.22, 1, 0.36, 1) 0.40s forwards;
  }
  .invest4 {
   animation: appearance-left 1s cubic-bezier(0.22, 1, 0.36, 1) 0.60s forwards;
  }

  .appearance-block-left {
    /* Avvia animazione */
    animation: appearance-left 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
  }
  .zoom-in-block {
    pointer-events: none;
    animation-play-state: paused;
    transform: scale(0.8);
    animation: zoom-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.40s forwards;
    opacity: 0;
  }

  @keyframes appearance {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes appearance-left {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
@keyframes zoom-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slide-from-top {
  from {
    translate: 0 -10vw;
    scale: 110% 1;
  }
  to {
    translate: 0 0;
    scale: 100% 1;
  }
}
@keyframes slide-from-bottom {
  from {
    translate: 0 10vw;
    scale: 110% 1;
  }
  to {
    translate: 0 0;
    scale: 100% 1;
  }
}
@keyframes slide-from-right {
  from {
    translate: 10vw 0;
    scale: 110% 1;
  }
  to {
    translate: 0 0;
    scale: 100% 1;
  }
}

  @keyframes slide-from-left {
  from {
    translate: -10vw 0;
    scale: 110% 1;
  }
  to {
    translate: 0 0;
    scale: 100% 1;
  }
} 

/* Contact form style */
/* ====== Stile base Contact Form 7 ====== */
.wpcf7 form {
  max-width: 600px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  /*margin-top: -20px;*/
}

/* Label */
.wpcf7 form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

/* Input, textarea, select */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  width: 90%;
  padding: 0.5rem 0.8rem;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fafafa;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.wpcf7 textarea {
  height: 100px;
}

/* Focus */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  outline: none;
  border-color: #94c0e9;
  box-shadow: 0 0 0 3px rgba(148, 192, 233, 0.25);
  background-color: #fff;
}

/* Pulsante */
.wpcf7 input[type="submit"] {
  height: 50px;
  font-size: 16px;
  background-color: var(--wp--preset--color--primary);
    border-radius: 0px;
    border-top-width: 0px;
    border-top-style: none;
    border-right-width: 0px;
    border-right-style: none;
    border-bottom-width: 0px;
    border-bottom-style: none;
    border-left-width: 0px;
    border-left-style: none;
    color: var(--wp--preset--color--white);
	background-image: radial-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    transition: 0.1s;
}

.wpcf7 input[type="submit"]:hover {
    background-image: radial-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
    transition: .9s;
    background-size: 100% 100%;
}

.wpcf7 input[type="submit"]:active {
  transform: scale(0.97);
}

/* Messaggi di errore e conferma */
.wpcf7 form .wpcf7-response-output {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 14px;
}

.wpcf7 form .wpcf7-mail-sent-ok {
  background: #e6f6ec;
  border: 1px solid #a7dcb4;
  color: #2d6a4f;
}

.wpcf7 form .wpcf7-validation-errors,
.wpcf7 form .wpcf7-acceptance-missing {
  background: #fff3f3;
  border: 1px solid #f5b5b5;
  color: #9b1c1c;
}

/* Checkbox e radio più leggibili */
.wpcf7-list-item {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.wpcf7 input[type="submit"] {
	width: 95%;
}

.entry-content {
  background: linear-gradient(rgb(255, 255, 255), rgb(240, 247, 250));
  border-radius: 10px;
}




/* Tablet */
@media (max-width: 1024px) {
    .gap-section-grid, .home-invest-trends-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonne uguali su tablet */
        gap: 15px; /* Riduci il gap se vuoi */
    }
}

/* Smartphone */
@media (max-width: 767px) {
.contact-container {
	display: flex !important;
	}
  .hero-2 {
    padding-top: 20px;
    padding-bottom: 0px; 
  }
    .hero-2-inner {
      flex-wrap: wrap;
      padding-top: 20px;
      padding-bottom: 0px; 
      }
      .hero-2-inner-dx {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
      .hero-2-inner-sx {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
    .gap-section-grid, .home-invest-trends-grid {
        grid-template-columns: repeat(1, 1fr); /* 1 colonna su smartphone (impilate) */
        gap: 20px; /* Spazio verticale tra le card impilate */
    }
    .chess-left-block {
      order: 2;
    }
    .invest-text-block {
      grid-template-columns: 1fr;
    }
    .invest-number-single-block {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding-top: 0 !important;
      padding-right: 0 !important;
      padding-bottom: 0 !important;
      padding-left: 0 !important;
    }
    .home-solve-text-img-box {
      grid-template-columns: 1fr;
      display: flex;
      align-items: center;
    }
    .header-buttons {
      padding-top: 5px !important;
    }
}