/*
Theme Name: CONCRETE X CENTRIS
Theme URI: https://concrete.digital
Author: CONCRETE - GROWTH PARTNER
Author URI: https://concrete.digital
Description: Tema del progetto CENTRIS
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: concrete-base
*/

/* Scroll fluido per i link ancora (es. "Scopri tutti i servizi" -> #servizi). */
html {
   scroll-behavior: smooth;
}

/* ============================================================
   CURSORE CAROSELLI TRASCINABILI
   Tutti i caroselli drag TRANNE quello iniziale in home (.carosello_home_container)
   e i loghi (auto-scroll, non interattivi): cursore pointer. */
.about_carosello_foto .splide__track,
.about_ecosistema_bottom_carosello .splide__track,
.recensioni_carosello .splide__track {
   cursor: pointer;
}

/* ============================================================ */

/* ============================================================
   1. VARIABILI GLOBALI
   ============================================================ */

:root {
   --nero: #363636;
   --giallo: #F9B417;
   --giallo-2: #FFF4D9;
   --verde-1: #36A27E;
   --verde-2: #E4F7F3;
   --viola-1: #935783;
   --viola-2: #FFE9F7;
   --azzurro-1: #50ABD8;
   --azzurro-2: #E1F5FF;
   --rosso-1: #EB645D;
   --rosso-2: #FFEAE9;
   --grigio: #6E6E6E;
   --grigio-2: #9E9E9E;
   --grigio-chiaro: #F3F3F3;
   --grigio-scuro: rgba(255, 255, 255, 0.05);
   --grigio-scuro-2: #7E7E7E;
   --grigio-chiaro-2: #E5E5E5;

   /* Font: i nomi devono combaciare con i @font-face in fonts.css */
   --font-sora: 'Sora', sans-serif;
   --font-instrument: 'Instrument Sans', sans-serif;
}

/* Font smoothing: il browser di default (macOS) usa il subpixel antialiasing,
   che rende il testo più "grasso" rispetto a Figma (che usa grayscale).
   Forzando grayscale i pesi combaciano con il design. */
body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-size: inherit;
   font-weight: inherit;
   line-height: 1.2;
   text-wrap: balance;
   margin: 0;
}

.hero-title {
   font-family: var(--font-sora);
   font-size: 4.1667vw;
   font-style: normal;
   font-weight: 700;
   line-height: 110%;
   letter-spacing: -1.8px;
}

.text-small {
   font-family: var(--font-instrument);
   font-size: 1.111vw;
   font-style: normal;
   font-weight: 500;
   /* era 500 */
   line-height: 140%;
}

.text-medium {
   font-family: var(--font-instrument);
   font-size: 1.389vw;
   font-style: normal;
   font-weight: 500;
   /* era 500 */
   line-height: 140%;
}

.text-semi-bold {
   font-family: var(--font-sora);
   font-size: 1.389vw;
   font-style: normal;
   font-weight: 600;
   line-height: 110%;
}

.text-title-big {
   font-family: var(--font-sora);
   font-size: 3.333vw;
   font-style: normal;
   font-weight: 600;
   line-height: 110%;
}

.title-semi-bold {
   font-family: var(--font-sora);
   font-size: 2.778vw;
   font-style: normal;
   font-weight: 600;
   line-height: 110%;
}

.title-small {
   font-family: var(--font-sora);
   font-size: 1.736vw;
   font-style: normal;
   font-weight: 600;
   line-height: 110%;
}

.title-medium {
   font-family: var(--font-sora);
   font-size: 2.153vw;
   font-style: normal;
   font-weight: 600;
   line-height: 110%;
}

/* ============================================================
   HOVER GLOBALE SUI BOTTONI
   Leggero overlay bianco al 12% sopra qualsiasi sfondo.
   box-shadow inset = riempie tutto il bottone senza alterare il layout. */
button,
.button-nero,
.button-white {
   transition: box-shadow 0.2s ease;
}

button:hover,
.button-nero:hover,
.button-white:hover {
   box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.12);
}

/* Bottone bianco: overlay NERO (il bianco su bianco non si vedrebbe). */
.button-white:hover {
   box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.08);
}

/* ============================================================ */

.button-nero {
   display: flex;
   padding: 1.111vw 1.667vw;
   justify-content: center;
   align-items: center;
   gap: 0.556vw;
   border-radius: 16px;
   /* Di default --button-bg non esiste => si usa il nero.
      Chi vuole un altro colore (es. le Aree) definisce --button-bg. */
   background: var(--button-bg, var(--nero));
   width: fit-content;
   border: none;
   color: white;
   text-decoration: none;
   /* serve quando il bottone è un <a> */
   cursor: pointer;
   font-family: var(--font-instrument);
   font-size: 0.972vw;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
   height: fit-content;
}

.button-white {
   display: flex;
   padding: 1.111vw 1.667vw;
   justify-content: center;
   align-items: center;
   gap: 0.556vw;
   border-radius: 16px;
   background: transparent;
   width: fit-content;
   border: 1px solid var(--nero);
   color: var(--nero);
   text-decoration: none;
   /* serve quando il bottone è un <a> */
   cursor: pointer;
   font-family: var(--font-instrument);
   font-size: 0.972vw;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
   height: fit-content;
}

.footer_menu_title {
   font-family: var(--font-sora);
   font-size: 0.833vw;
   font-style: normal;
   font-weight: 600;
   line-height: 110%;
   text-transform: uppercase;
}

/* letter-spacing SOLO quando la voce è gialla: le versioni gialle hanno tutte
   var(--giallo) nello style inline, quelle grigie hanno var(--grigio-scuro-2). */
.footer_menu_title[style*="--giallo"] {
   letter-spacing: 1px;
}

.footer_voci {
   color: var(--bianco, #FFF);
   font-family: var(--font-instrument);
   font-size: 0.972vw;
   font-style: normal;
   font-weight: 500;
   /* era 500 */
   line-height: 140%;
}

/* La <ul> generata da wp_nav_menu dentro .footer_voci: niente pallini, in colonna. */
.footer_voci .footer_menu {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 0.694vw;
}

/* I link non ereditano il colore: glielo passiamo noi + niente sottolineatura. */
.footer_voci a {
   color: inherit;
   text-decoration: none;
}

.footer_policy {
   color: var(--grigio-scuro-2);
   font-family: var(--font-instrument);
   font-size: 0.833vw;
   font-style: normal;
   font-weight: 500;
   /* era 500 */
   line-height: 140%;
}

.header_voci {
   color: var(--nero);
   font-family: var(--font-instrument);
   font-size: 0.972vw;
   font-style: normal;
   font-weight: 500;
   /* era 500 */
   line-height: normal;
}

.hero_area_normal,
.hero_area_semi_bold {
   font-family: var(--font-sora);
   font-size: 4.236vw;
   font-style: normal;
   font-weight: 400;
   line-height: 110%;
}

.hero_area_semi_bold {
   font-weight: 600 !important;
}

.hero_area_title {
   font-family: var(--font-sora);
   font-size: 1.736vw;
   font-style: normal;
   font-weight: 600;
   line-height: 110%;
   /* 27.5px */
}


/* ============================================================
   CURSORE PERSONALIZZATO --> riutilizzabile: basta dare la classe .scroll-zone a un elemento.
   ============================================================ */

/* Nasconde il cursore nativo SOLO dentro la zona. */
.scroll-zone {
   cursor: none;
}

.scroll-cursor {
   position: fixed;
   /* stesso sistema di riferimento di clientX/clientY */
   top: 0;
   left: 0;
   width: 9.028vw;
   height: 9.028vw;
   border-radius: 50%;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   z-index: 9999;
   opacity: 0;
   transition: opacity 0.2s ease;
   color: var(--nero, #363636);
   text-align: center;
   font-family: var(--font-instrument);
   font-size: 0.833vw;
   font-style: normal;
   font-weight: 500;
   line-height: 140%;
}

.scroll-cursor.is-visible {
   opacity: 1;
}

/* ============================================================
   FORM (WPForms) — stile condiviso da tutti i form del sito.
   Basta dare la classe .form_wrapper al contenitore del form.
   ============================================================ */

.form_wrapper label {
   color: var(--nero, #363636);
   font-family: var(--font-sora);
   font-size: 0.833vw;
   font-style: normal;
   font-weight: 600;
   line-height: 110%;
}

.form_wrapper input,
.form_wrapper textarea {
   display: flex;
   padding: 1.111vw 1.389vw !important;
   align-items: center;
   gap: 0.556vw;
   align-self: stretch;
   border-radius: 8px;
   border: 1px solid var(--grigio-chiaro-2, #E5E5E5);
   background: var(--bianco, #FFF);
   /* Stesso font del placeholder: senza questo il testo digitato usa la
      dimensione di default del browser (più piccola) e il placeholder "sfora". */
   font-family: var(--font-instrument);
   font-size: 16px;
   font-weight: 500;
   line-height: 140%;
   color: var(--nero);
}

/* Messaggio di conferma dopo l'invio — vale per tutti i form. */
.form_wrapper .wpforms-confirmation-container,
.form_wrapper .wpforms-confirmation-container-full {
   background: transparent;
   border: none;
   padding: 0 !important;
   margin: 0 !important;
}

.form_wrapper .wpforms-confirmation-container p,
.form_wrapper .wpforms-confirmation-container-full p {
   color: var(--nero, #363636) !important;
   font-family: var(--font-instrument);
   font-size: 1.389vw;
   font-style: normal;
   font-weight: 500;
   line-height: 140%;
   margin: 0;
}

@media screen and (min-width: 750px) {
   .form_wrapper textarea {
      min-height: 14.5833vw;
   }
}


.wpforms-label-hide {
   display: none;
}

/* Messaggi di errore WPForms (es. "Please enter a valid phone number"):
   usano il font globale del tema invece di quello di default del plugin. */
.form_wrapper .wpforms-error,
label.wpforms-error,
em.wpforms-error {
   font-family: var(--font-instrument) !important;
   font-style: normal !important;
   font-size: 0.833vw;
   font-weight: 500;
   line-height: 140%;
}

.choice-1 {
   display: flex;
   flex-direction: row;
   gap: 0.556vw;
   align-items: center;
}
/*
#wpforms-125-field_8 {
   padding: 0 !important;
   margin: 0 !important;
}*/

[id^="wpforms-"][id$="-field_8"] {
   padding: 0 !important;
   margin: 0 !important;
}

.form_wrapper input[type="tel"] {
   padding: 1.111vw 4.5vw !important;
   min-width: 100% !important;
}

.form_wrapper button {
   margin-top: 1.389vw;
   display: flex;
   width: 212px;
   padding: 1.111vw 1.667vw;
   justify-content: center;
   align-items: center;
   gap: 0.556vw;
   flex-shrink: 0;
   border-radius: 16px;
   /* Di default --button-bg non esiste => resta nero.
       Chi vuole un altro colore (es. i Servizi) definisce --button-bg. */
   background: var(--button-bg, var(--nero, #363636));
   color: white;
   border: 0;
   color: #FFF;
   font-family: var(--font-instrument);
   font-size: 0.972vw;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
   cursor: pointer;
}

.form_wrapper button:hover {
   background-color: #4e4e4e;
}

.form_wrapper input[type="checkbox"] {
   -webkit-appearance: none;
   /* Safari */
   appearance: none;
   width: 1.111vw;
   height: 1.111vw;
   padding: 0 !important;
   /* annulla il padding degli altri input */
   margin: 0;
   flex-shrink: 0;
   /* non si schiaccia accanto all'etichetta lunga */
   border: 1px solid var(--grigio-chiaro-2, #E5E5E5);
   border-radius: 4px;
   background: var(--bianco, #FFF);
   cursor: pointer;
   position: relative;
   /* riferimento per la spunta (::after) */
}

/* Cliccata: sfondo nero + spunta bianca.
   La spunta è un SVG inline: stroke-linecap/linejoin "round" danno le punte tonde
   (col trucco dei bordi resterebbero squadrate). */
.form_wrapper input[type="checkbox"]:checked {
   background-color: var(--nero);
   border-color: var(--nero);
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 85%;
}


.iti__selected-country {
   padding: 1.111vw 1.389vw !important;
}

.iti__selected-country-primary {
   padding: 0 !important;
}



/* Placeholder di TUTTI i campi del form (input di ogni tipo, textarea, select). */
.form_wrapper input::placeholder,
.form_wrapper textarea::placeholder,
.form_wrapper select::placeholder {
   color: var(--grigio-scuro-2, #7E7E7E);
   font-family: var(--font-instrument);
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
   line-height: 140%;
   opacity: 1;
   /* Firefox schiarisce i placeholder di default: lo annulliamo. */
}
/*
#wpforms-125-field_3-container,
#wpforms-125-field_4-container,
#wpforms-125-field_7-container,
#wpforms-125-field_6-container,
#wpforms-125-field_9-container {
   display: flex;
   gap: 0.486vw;
   flex-direction: column;
   width: 100%;
}
*/

/* era la lista #wpforms-125-field_3-container, ecc. */
.form_wrapper .wpforms-field-text,
.form_wrapper .wpforms-field-email,
.form_wrapper .wpforms-field-phone,
.form_wrapper .wpforms-field-textarea {
   display: flex;
   gap: 0.486vw;
   flex-direction: column;
   width: 100%;
}
.wpforms-layout-column,
.wpforms-layout-row {
   padding: 0 !important;
   margin: 0 !important;
}

.wpforms-field-layout-rows,
.wpforms-field-container {
   display: flex;
   flex-direction: column;
   gap: 1.389vw;

}

.wpforms-layout-row {
   display: flex;
   flex-direction: row;
   gap: 1.111vw;
}
/*
label[for="wpforms-125-field_8_1"] {
   color: #6E6E6E !important;
   font-family: var(--font-instrument) !important;
   font-size: 0.833vw !important;
   font-style: normal !important;
   font-weight: 500 !important;
   line-height: 140% !important;
}*/

/* era label[for="wpforms-125-field_8_1"] */
.form_wrapper .wpforms-field-gdpr-checkbox .wpforms-field-label-inline {
   color: #6E6E6E !important;
   font-family: var(--font-instrument) !important;
   font-size: 0.833vw !important;
   font-style: normal !important;
   font-weight: 500 !important;
   line-height: 140% !important;
}

.error {
   color: var(--giallo, #F9B417);
   font-family: var(--font-sora);
   font-size: 1.3889vw;
   font-style: normal;
   font-weight: 600;
   line-height: 110%;
}

.form_wrapper .wpforms-field-container > .wpforms-field[aria-hidden="true"],
.form_wrapper #wpforms-293-field_1-container {
   display: none !important;
}

@media screen and (max-width: 750px) {

   /* --- FORM (mobile) --- */
   
   .form_wrapper .wpforms-confirmation-container p,
.form_wrapper .wpforms-confirmation-container-full p {
   font-size: 4.103vw;
}

   .form_wrapper input[type="checkbox"] {
      width: 4.103vw;
      height: 4.103vw;
   }

   .form_wrapper label {
      font-size: 3.077vw;
   }

   #wpforms-125-field_3-container,
   #wpforms-125-field_4-container,
   #wpforms-125-field_7-container,
   #wpforms-125-field_6-container,
   #wpforms-125-field_9-container {
      gap: 3.077vw;
   }

   .form_wrapper input,
   .form_wrapper textarea {
      padding: 4.103vw 5.128vw !important;
   }

   .form_wrapper textarea {
      min-height: 100px;
   }

   .form_wrapper input[type="tel"],
   #wpforms-125-field_6 {
      padding: 4.103vw 16.128vw !important;
      width: 100% !important;
      min-width: 100px !important;
   }

   .iti__selected-country {
      padding: 4.103vw 5.128vw !important;
   }

   label[for="wpforms-125-field_8_1"] {
      font-size: 3.077vw !important;
   }

   .choice-1 {
      gap: 2.051vw;
      flex-direction: row;
   }

   .wpforms-layout-row,
   .wpforms-field-layout-rows,
   .wpforms-field-container {
      gap: 3.077vw;
   }

   .form_wrapper button {
      margin-top: 3.077vw;
      font-size: 3.077vw;
      padding: 3.077vw 4.615vw;
      width: 100%;

   }
   
    .form_wrapper .wpforms-field-text,
   .form_wrapper .wpforms-field-email,
   .form_wrapper .wpforms-field-phone,
   .form_wrapper .wpforms-field-textarea {
      gap: 3.077vw;
   }

   .form_wrapper input[type="tel"],
   .form_wrapper .wpforms-field-phone .iti__tel-input {
      padding: 4.103vw 16.128vw !important;
      width: 100% !important;
      min-width: 100px !important;
   }

   .form_wrapper .wpforms-field-gdpr-checkbox .wpforms-field-label-inline {
      font-size: 3.077vw !important;
   }
   
   
   

   .hero-title {
      font-size: 9.231vw;
   }

   .text-small {
      font-size: 3.333vw;
   }

   .text-title-big {
      font-size: 7.179vw;
   }

   .text-medium {
      font-size: 4.103vw;
   }

   .button-nero {
      padding: 3.077vw 4.615vw;
      gap: 2.051vw;
      border-radius: 12px;
      width: fit-content;
      border: none;
      font-size: 3.077vw;
   }

   .button-white {
      padding: 3.077vw 4.615vw;
      gap: 2.051vw;
      border-radius: 12px;
      width: fit-content;

      font-size: 3.077vw;
   }

   .text-semi-bold {
      font-size: 4.615vw;
   }

   .title-semi-bold {
      font-size: 6.154vw;
   }

   .title-small {
      font-size: 5.128vw;
   }

   /* Mobile: padding sopra il testo (l'apertura ora è via grid-template-rows). */
   .accordion-header[aria-expanded="true"]+.accordion-content .accordion-content-inner {
      padding-top: 3.077vw;
   }

   .title-medium {
      font-size: 5.641vw;
   }

   .footer_menu_title {
      font-size: 2.564vw;
   }

   .footer_voci {
      font-size: 3.077vw;
   }

   .footer_policy {
      font-size: 3.077vw;
   }

   .hero_area_normal,
   .hero_area_semi_bold {
      font-size: 8.205vw;
   }

   .hero_area_title {
      font-size: 5.128vw;
   }

   .error{
      font-size: 4.6154vw;
   }

}