/*
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{  
  --sfondo:#F7F7F7; /*sfondo bianco del sito*/
  --white: white;
  --red: #992027; /* 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: serif, 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;}
strong{font-weight: bold !important;}
/* ---------------------------------------------------- */


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

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: 2.8rem;}
  h2, .text-2{font-size: 2rem;}
  h3, .text-3{font-size: 1.3rem;}
  h4, p, .text-4{font-size: 1rem;}
}

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

/* Contenitore Gutenberg */
.custom-button {
  display: inline-block;
}

/* Link interno */
.custom-button .wp-block-button__link {
  margin-top:50px;
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  border: 2px solid #992027;     /* colore brand */
  border-radius: 6px;
  background: transparent;
  color: #992027;
  text-decoration: none;
  cursor: pointer;
  transition: all .25s ease;
}

/* Hover */
.custom-button .wp-block-button__link:hover {
  background: #992027;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(153,32,39,.25);
}

/* Active (click) */
.custom-button .wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(153,32,39,.2);
}



/* ! Header + Dropdown header */
/*------------------------------------------------------------------*/
.header-container {
  background: #fdf9f6;
  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(--red);
  padding: 10px 15px;
  text-transform: uppercase;
}

.header li a:hover {
  color: var(--white);
  background-color: #fa8648;
  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: #E9651E;
    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(--red);
    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(--red);
    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 – Circolo Scherma Fides */
/*------------------------------------------------------------------*/

/* ! Footer – Circolo Scherma Fides */
/*------------------------------------------------------------------*/

.site-footer {
  background-color: #2e2e2e;
  padding: 30px 20px 10px; /* meno padding verticale */
  font-family: Arial, sans-serif;
  color: #3D3D3D;
  font-size: 14px;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-left,
.footer-center,
.footer-right {
  flex: 1 1 30%;
  margin: 10px;
  padding: 10px 20px; /* ridotto */
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.footer-logo {
  max-width: 140px; /* ridotto */
  margin-bottom: 10px;
}

.footer-name {
  font-weight: bold;
  font-size: 18px;
  margin: 0 0 5px 0;
  color: #992027;
  font-family: 'Playfair Display', serif;
}

.footer-description {
  line-height: 1.5;
  font-size: 16px;
}

.footer-center h4,
.footer-right h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #992027;
}

.footer-center p,
.footer-right li {
  margin-bottom: 8px;
}

.footer-news {
  list-style: none;
  padding: 0;
}

.footer-news li {
  margin-bottom: 12px;
}

.footer-news li span {
  font-size: 12px;
  color: #666;
  display: block;
}

.footer-news li a {
  color: #992027;
  font-weight: 600;
  text-decoration: none;
}

.footer-news li a:hover {
  text-decoration: underline;
}

.footer-excerpt {
  font-size: 13px;
  color: #444;
  margin: 4px 0 0 0;
  line-height: 1.4;
}

.footer-mappa {
  max-width: 1200px;
  margin: 30px auto;
  height: 200px;
}

.mappa {
  width: 100%;
  height: 100%;
  border: 1px solid #3d3d3d !important;
  border-radius: 15px;
}

.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 15px 0;
  font-size: 14px;
  border-top: 1px solid #eee;
  max-width: 1200px;
  margin: 20px auto 0 auto;
  width: 100%;
}

.footer-bottom p {
  margin: 0;
  color: #333;
  font-size: 14px;
}

.footer-bottom a {
  color: #992027;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-bottom a:hover {
  color: #000;
}

/* Icone social */
.footer-social {
  display: flex;
  gap: 15px;
}

/* Icone social (versione 1 rivista) */
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;        /* cerchio bianco */
  color: #992027;          /* icona amaranto */
  font-size: 18px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.footer-social a:hover {
  background: #992027;     /* cerchio amaranto */
  color: #fff;             /* icona bianca */
}

@media (max-width: 1024px) {
  .footer-left, .footer-center, .footer-right {
    flex: 1 1 100%;
    margin: 10px 0;
  }
}


/* ! 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);}