/*
Theme Name: Nextframe
Theme URI: https://dominio
Author: Mario Rossi
Author URI: https://dominio
Description: Stile base del tema
Requires PHP: 7.0
*/



/* ! Reset */
/*------------------------------------------------------------------*/
:root{  
  --hef: #faf1e8; /*Colore per l'header e il footer*/
  --sfondo:#F5EBE1; /*Color crema per lo sfondo del sito e dell'header*/
  --white: white;
  --primary: #7E6F8E; /* Colore dominante del sito */
  --black: black;
}

/* ! CSS per modificare il colore blu di default al focus sugli elementi del form */
/*------------------------------------------------------------------*/
.wpcf7 select:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border: 2px solid #254360; /* tuo colore personalizzato */
  outline: none; /* rimuove il bordo blu */
  box-shadow: 0 0 5px rgba(37, 67, 97, 0.5); /* effetto glow opzionale */
}

/* ! Font-family from Google, Sezione utilizzata per importare eventuali font da google */
body, html{font-family: 'Nunito', sans-serif; background-color: var(--sfondo); /* colore chiaro/beige */ color: #3D3D3D /*Nero più morbido per le scritte*/}
h1,h2,h3,h4,h5,h6 {margin: 0;padding: 0; font-family: 'Playfair Display', serif;}
/* ---------------------------------------------------- */


html, body {
  overscroll-behavior: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body strong{ font-weight: bold !important;}

body, html{ font-size: 16px;   margin: 0;padding: 0;}
*,*:before,*:after{ box-sizing: border-box; }
ul li{font-size: 20px;}
img{height: auto; }
a{text-decoration: none;}
hr{border:none; border-bottom: 1px solid #ddd}




/*Colore dei link*/
a{text-decoration:none; color: #3D3D3D;}
p{line-height: 1.3; font-weight:100;}

/* Utilizzato per spaziare le cose */
.spacer{height: 70px;}


/* ! Title System */
/*------------------------------------------------------------------*/

.text-0{font-size: 5rem !important; line-height: 1;}
h1, .text-1{font-size: 3.5rem;}
h2, .text-2{font-size: 2.5rem;}
h3, .text-3{font-size: 1.8rem;}
h4, p, .text-4{font-size: 1.25rem;}

h1, h2, h3, h4, p, ol, ul{margin-bottom: 1rem;}

@media (max-width: 768px) {
  .text-0{font-size: 4rem}
  h1, .text-1{font-size: 3rem;}
  h2, .text-2{font-size: 2.2rem;}
  h3, .text-3{font-size: 1.5rem;}
  h4, p, .text-4{font-size: 1.25rem;}
}


/* ! Button system con wp-block... andiamo ad impostare lo stile di default dei bottoni in wordpress */
/*------------------------------------------------------------------*/

.gb-button:hover{ transition: 0.3s; transform: scale(1.05); cursor: pointer; }


.button-style a, .button-style span{background-color: var(--primary); text-transform: uppercase; color: var(--white);padding: 20px; border-radius: 10px;}
.button-style a:hover, .button-style span:hover {background-color: var(--white); transition: 0.3s; transform: scale(1.05); cursor: pointer;}
.button--invert a, .button--invert span{background-color: var(--white); color: var(--primary) !important;}
.button--invert a:hover, .button--invert span:hover{background-color: var(--primary); color: var(--white) !important;}

.button-style a:hover,
.prenota-button a:hover {
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.prenota-button a {
  color: var(--white) !important;
    background-color: var(--primary);
    padding: 10px 20px !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center;
    font-size: 14px !important;
    width: 170px !important;
    box-shadow: 0px 4px 5px 0px black;
    font-weight: bold !important;
    position: relative;/* Serve per posizionare l'icona relativa al bottone */
    justify-content: center; 
}

.prenota-button a::after {
  content: "";
  display: inline-block;
  background-image: url('https://www.logopedistaveronicatitone.it/wp-content/uploads/2026/05/contact-mail.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 22px;
  height: 22px;
  margin-left: 10px;
  filter: invert(1);
}
.prenota-button a:hover::after {
  filter: brightness(0) saturate(100%) invert(48%) sepia(4%) saturate(2267%) hue-rotate(227deg) brightness(94%) contrast(95%);
}
.prenota-button a:hover {
  color: var(--primary)!important;
  background-color: var(--white) !important;
  transition: 0.3s;
  transform: scale(1.05);
  cursor: pointer;
}
/* ! Header + Dropdown header */
/*------------------------------------------------------------------*/
.header-container {
  background: var(--hef);
  position: sticky;
  top: 0; /* essenziale per sticky */
  z-index: 1000;
  width: 100%;
  max-width: 100%;
  box-shadow: 0px 5px 5px 0px #00000060;
}

/* Se WordPress loggato, sposta sotto la barra admin */
.logged-in .header-container {
  top: 30px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
  height: 100px;
  padding: 5px;
}

.header li a {
  font-weight: bold;
  display: block;
  font-size: 14px;
  color: var(--primary);
  padding: 10px 15px;
  text-transform: uppercase;
}

.header li a:hover {
  color: var(--white);
  background-color: var(--primary);
  border-radius: 5px;
  transition: 0.3s;
}

.header__menu {
  margin-bottom: 0;
  margin-top: 0;
}

.header__menu li {
  display: inline-block;
  padding: 0 1.9rem 0 0px;
}

.header__logo img {
  height: 100%;
}

.header__hamburger {
  display: none;
}

@media (min-width: 1024px) and (max-width: 1440px) {
  .header__menu li {
    padding: 0 1rem 0 0;
  }
}

/* MOBILE */
@media (max-width: 1024px) {
  .header {
    align-items: center;
  }

  .header__logo img {
    padding: 10px;
  }

  .header__hamburger {
    width: 50px;
    height: 27px;
    display: block;
    position: relative;
    z-index: 100;
    background: transparent;
    border: none;
    margin-right: 20px;
    cursor: pointer;
    outline: 0;
  }

  .hamburger-menu-button-open,
  .hamburger-menu-button-open::before,
  .hamburger-menu-button-open::after {
    position: absolute;
    width: 24px;
    height: 2px;
    background: var(--primary);
    border-radius: 4px;
    transition: all 0.3s;
	left: 0;
  }

  .hamburger-menu-button-open {
    top: 50%;
    left: 50%;
    margin-top: -1px;
    margin-left: -12px;
  }

  .hamburger-menu-button-open::before {
    top: 6px;
    content: "";
  }

  .hamburger-menu-button-open::after {
    bottom: 6px;
    content: "";
  }

  .menu-open .hamburger-menu-button-close {
    background: transparent;
    transform: rotate(180deg);
  }

  .menu-open .hamburger-menu-button-close::before {
    transform: translateY(-6px) rotate(45deg);
  }

  .menu-open .hamburger-menu-button-close::after {
    transform: translateY(6px) rotate(-45deg);
  }

  .header__menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    height: 0;
    overflow: hidden;
    transition: all 1s cubic-bezier(.215, .61, .355, 1);
  }

  .menu-open .header__menu {
    height: 100vh;
    background-color: var(--sfondo);
	padding: 0;
  }

  .header__menu li {
    display: block;
    border-bottom: 1px solid var(--primary);
    padding: 20px;
  }

  .header li a {
    width: 100%;
  }

  .header li a:hover {
    border-radius: 0px;
  }

  .menu-open {
    overflow: hidden;
  }
}

/* =============== DROPDOWN MENU DESKTOP =============== */
@media (min-width: 1024px) {
  .header__menu li {
    position: relative;
  }

  .header__menu li ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--sfondo);
    min-width: 200px;
    padding: 0;
    margin: 0;
    list-style: none;
    display: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 999;
  }

  .header__menu li:hover > ul.sub-menu {
    display: block;
  }

  .header__menu li ul.sub-menu li {
    display: block;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .header__menu li ul.sub-menu li a {
    padding: 10px 15px;
    font-size: 13px;
    color: var(--primary);
    background-color: var(--sfondo);
  }

  .header__menu li ul.sub-menu li a:hover {
    background-color: white;
    color: var(--white);
    border-radius: 0;
  }
  
  .header__menu li.servizi-dropdown > a::after {
	content: "\f078"; /* freccia Font Awesome */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
	margin-left: 8px;
	font-size: 10px;
  }

	
}

/* =============== DROPDOWN MENU MOBILE =============== */
@media (max-width: 1024px) {
  .header__menu li ul.sub-menu {
    display: none;
    padding-left: 15px;
  }

  .header__menu li.menu-item-has-children > a::after {
    content: "\f078"; /* Font Awesome chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    float: right;
    margin-left: 10px;
  }

  .header__menu li.open > ul.sub-menu {
    display: block;
  }
}

/* ! Footer */
/*------------------------------------------------------------------*/

/* ! Footer */
/*------------------------------------------------------------------*/

.site-footer {
  background: var(--hef);
  padding: 100px 20px 30px;
}

.footer-container {
  max-width: 1250px;
  margin: 0 auto 20px;
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* COLONNE */
.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-col h4 {
  color: var(--primary);
}

/* LOGO */
.footer-logo {
  max-width: 200px;
}

/* TESTI */
.footer-name {
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 10px;
}

.footer-description {
  line-height: 1.6;
  max-width: 420px;
}

/* CONTATTI */
.footer-right h4 {
  color: var(--primary);
  margin-bottom: 15px;
}

.footer-right p {
  margin-bottom: 10px;
}

.footer-right i {
  margin-right: 8px;
  color: var(--primary);
}

/* SOCIAL */
.footer-social {
  margin-top: 20px;
}

.footer-social a {
  margin-right: 15px;
  color: var(--primary);
  font-size: 2rem;
}

/* FOOTER BOTTOM */
.footer-bottom {
  max-width: 1250px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid #D8D2DC;
  text-align: center;
}

.footer-bottom a {
  color: inherit;
  text-decoration: underline;
}

/* ==============================
   RESPONSIVE
   ============================== */

@media (max-width: 900px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .site-footer{padding: 100px 10px 30px;}

  .footer-logo {
    margin: 0 auto;
  }

  .footer-description {
    margin: 0 auto;
  }

  .footer-social a {
    margin: 0 10px;
  }
}

/* ! Grid System */
/*------------------------------------------------------------------*/
.grid{display: flex; flex-wrap: wrap; max-width: 100%; width:100%; margin: 0 auto;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.grid--small{max-width: 900px}
.grid--medium{max-width: 1450px;}
.grid--center{justify-content: center;}
.grid--content{max-width: 1200px;}
.grid--full{max-width: 100%}
.grid--footer{display: flex; justify-content: center; flex-wrap: wrap; max-width: 1450px; width: 100%; margin: 0 auto;}

.col-10{width: 10%;}
.col-15{width: 15%;}
.col-20{width:20%}
.col-25{width:25%}
.col-30{width:30%}
.col-33{width:33.33%}
.col-35 {width:35%}
.col-40{width:40%}
.col-50{width:50%}
.col-60{width:60%}
.col-70{width:70%}
.col-80{width:80%}
.col-90{width:90%}
.col-100{width:100%}

[class*='col-']{padding: 10px;}

.grid--full [class*='col-'],
.grid .grid [class*='col-'] {padding: 0;}


@media (max-width: 768px) {
  [class*='col-']{width: 100%}
  .sma-33{width: 33.33%}
  .sma-50{width: 50%}
  .sma-25{width: 25%}
}

/* ! ------------------------------------------------------------------- */
/* ! Blocks */
/* ----------------------------------------------------------------------------------- */

.cover{
  background: #000;padding: 20px;min-height: 100vh;
  display: flex; flex-flow: column;
  justify-content: center;
  align-items: center;
  position:relative;
}
.cover__bg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background:url(bridge.jpg) center center;background-size:cover;z-index:0;border: 1px solid #000}
.cover__bg:after{ content: ' ';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.7) 100%);;background-size:cover;}

.cover__content{max-width: 1200px; margin: 0 auto; position:relative; z-index: 1;width: 100%;}

.cover__content h1{max-width: 1000px}

.available{width: 300px; height: 300px; position:absolute; top:25%; right:10%;}

@media (max-width: 768px) {
  .available{width: 200px; height: 200px;  top:8%; right:2%;}
}

/* ! Animation */
/* --------------------------------------------------------- */

.fade-in{opacity: 0; transform: translateY(1rem);}
.text-reveal{transform: translateY(1rem);clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
.fade-up{opacity: 0; transform: translateY(5rem);}


/* ! Helpers */
/*------------------------------------------------------------------*/

.br{border: 1px solid red;}
.img-res{width: 100%;}
.video-res{width: 100%;height: 100%;overflow: hidden;}
.video-res video{width: 100%;height: 100%;object-fit: cover}

.relative{position: relative;}
.absolute{position: absolute;}

.mt-0{margin-top: 0;}
.mt-1{margin-top: 1rem !important;}
.mt-2{margin-top: 2rem !important;}
.mt-3{margin-top: 3rem !important;}
.mt-4{margin-top: 4rem !important;}
.mt-5{margin-top: 5rem !important;}
.mt-6{margin-top: 6rem !important;}

.mtneg10{margin-top: -10px;}

.mb-0{margin-bottom: 0;}
.mb-1{margin-bottom: 1rem !important;}
.mb-2{margin-bottom: 2rem !important;}
.mb-3{margin-bottom: 3rem !important;}
.mb-4{margin-bottom: 4rem !important;}

.mbneg15{margin-bottom: -15px;}

.ml-0{margin-left: 0;}
.ml-1{margin-left: 1rem !important;}
.ml-2{margin-left: 2rem !important;}
.ml-3{margin-left: 3rem !important;}
.ml-4{margin-left: 4rem !important;}
.ml-5{margin-left: 5rem !important;}
.ml-6{margin-left: 6rem !important;}

.mr-0{margin-right: 0;}
.mr-1{margin-right: 1rem !important;}
.mr-2{margin-right: 2rem !important;}
.mr-3{margin-right: 3rem !important;}
.mr-4{margin-right: 4rem !important;}
.mr-5{margin-right: 5rem !important;}
.mr-6{margin-right: 6rem !important;}

.text-center{text-align: center}
.text-left{text-align: left}
.text-right{text-align: right}

.p-0{padding: 0 !important;}
.p-1{padding: 1rem;}
.p-2{padding: 2rem;}
.p-3{padding: 3rem;}
.p-4{padding: 4rem;}

.pt-0{padding-top: 0;}
.pt-1{padding-top: 1rem;}
.pt-2{padding-top: 2rem;}
.pt-3{padding-top: 3rem;}
.pt-4{padding-top: 4rem;}

.pb-0{padding-bottom: 0;}
.pb-1{padding-bottom: 1rem;}
.pb-2{padding-bottom: 2rem;}
.pb-3{padding-bottom: 3rem;}
.pb-4{padding-bottom: 4rem;}

.mlr-10{margin-left: -10px; margin-right: -10px;}

.w-10{width: 10%;}
.w-20{width: 20%;}
.w-30{width: 30%;}
.w-40{width: 40%;}
.w-50{width: 50%;}
.w-60{width: 60%;}
.w-70{width: 70%;}

.fw-100{font-weight: 100;}
.fw-200{font-weight: 200;}
.fw-300{font-weight: 300;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}
.fw-800{font-weight: 800;}
.fw-900{font-weight: 900;}
.fw-bold{font-weight: bold;}

.rotate-20{transform: rotate(20deg);}

.icon-small{width: 40px;padding: 8px;}
.icon-white{filter: invert(1);}

.bg-dark{background: #000;}
.text-white{color:#fff}
.text-dark{color:#000}

.v-center{display: flex; justify-content: center; flex-flow: column;align-items: flex-start;}
 
.alg-center{align-items: center !important;}
.alg-start{align-items: start;}
.alg-end{align-items: end;}

.just-center{justify-content: center !important;}
.just-start{justify-content: start !important;}
.just-end{justify-content: end !important;}

.flex{display: flex;} 

.pointer{cursor: pointer;}

.margin-auto{margin: 0 auto !important;}

.font-normal{font-weight: 400;}
.fz-20{font-size: 20px;}

.max-none{max-width: none !important;}

.none{display: none;}
@media (max-width: 768px) {
  .sma-none{display: none;}
}

@media (min-width: 768px) {
  .desk-none{display: none;}
/* -------------------------------------------------------------------------------- */
/* ! Smartphone Helpers */
/* -------------------------------------------------------------------------------- */}
@media (max-width: 768px) {

  .s-m0{margin: 0 !important;}

  .s-mt-0{margin-top: 0 !important;}
  .s-mt-1{margin-top: 1rem !important;}
  .s-mt-2{margin-top: 2rem !important;}
  .s-mt-3{margin-top: 3rem !important;}
  .s-mt-4{margin-top: 4rem !important;}
  .s-mt-5{margin-top: 5rem !important;}
  .s-mt-6{margin-top: 6rem !important;}

  .s-mb-0{margin-bottom: 0 !important;}
  .s-mb-1{margin-bottom: 1rem !important;}
  .s-mb-2{margin-bottom: 2rem !important;}
  .s-mb-3{margin-bottom: 3rem !important;}
  .s-mb-4{margin-bottom: 4rem !important;}

  .s-ml-0{margin-left: 0 !important;}
  .s-ml-1{margin-left: 1rem !important;}
  .s-ml-2{margin-left: 2rem !important;}
  .s-ml-3{margin-left: 3rem !important;}
  .s-ml-4{margin-left: 4rem !important;}
  .s-ml-5{margin-left: 5rem !important;}
  .s-ml-6{margin-left: 6rem !important;}

  
  .s-mr-0{margin-right: 0 !important;}
  .s-mr-1{margin-right: 1rem !important;}
  .s-mr-2{margin-right: 2rem !important;}
  .s-mr-3{margin-right: 3rem !important;}
  .s-mr-4{margin-right: 4rem !important;}
  .s-mr-5{margin-right: 5rem !important;}
  .s-mr-6{margin-right: 6rem !important;}

  .s-p-0{padding: 0;}
  .s-p-1{padding: 1rem;}
  .s-p-2{padding: 2rem;}
  .s-p-3{padding: 3rem;}
  .s-p-4{padding: 4rem;}

  .s-pt-0{padding-top: 0;}
  .s-pt-1{padding-top: 1rem;}
  .s-pt-2{padding-top: 2rem;}
  .s-pt-3{padding-top: 3rem;}
  .s-pt-4{padding-top: 4rem;}

  .s-pb-0{padding-bottom: 0;}
  .s-pb-1{padding-bottom: 1rem;}
  .s-pb-2{padding-bottom: 2rem;}
  .s-pb-3{padding-bottom: 3rem;}
  .s-pb-4{padding-bottom: 4rem;}

  .s-text-center{text-align: center;}
  
  .s-justend{justify-content: end;}

  .s-mlr-20{margin-left: 20px !important; margin-right: 20px !important;}
}


/* ! Wordpress Styles */
/*------------------------------------------------------------------*/

input, textarea{border: 3px solid #ddd; border-radius: 3px;padding: 10px;}
input[type=submit], button{border: 3px solid #ddd; background: #ddd; border-radius: 3px;padding: 10px;}

.form-search{width: 100%;border: 3px solid #ddd;border-radius: 100px;padding-left: 15px;}
.form-search input{width: calc(100% - 40px); border: none;}
.form-search button{padding: 0; background: transparent; border: none;}
.form-search img{width: 25px;margin-bottom: -8px;}

/* il calc viene utilizzato per spostare l'immagine, in .alignfull: Prima viene centrata con 50% e poi 
viene allineata a sinistra con il - 50vw di modo cosi che sia a tutto schermo e risulti responsive. 
Stesso discorso per .alignwide solo che viene spostate di -45vw di modo da dargli del margine ai lati.*/
.alignfull{width: 100vw;margin-left: calc(50% - 50vw);}
.alignwide{width: 90vw;margin-left: calc(50% - 45vw);}