@charset "UTF-8";
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@font-face {
    font-family: 'Kanit';
    src: url(/assets/fonts/Kanit-Regular.woff2);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kanit';
    src: url(/assets/fonts/Kanit-Medium.woff2);
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta';
    src: url(/assets/fonts/PlusJakartaSans-Regular.woff2);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta';
    src: url(/assets/fonts/PlusJakartaSans-Medium.woff2);
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;
    --font-primary: "Plus Jakarta", sans-serif;
    --font-secondary: "Kanit", sans-serif;
    --background-pag: #fefefe;
    --background-main: #f9f9f9;
    --colore-testo: #061747;
    --colore-secondario: #046262;
    --colore-secondario-h: #034A4A;
    --colore-terz: #ee0c05;
    --colore-terz-h: #B40A04;
    --focus-outline: 3px solid #ffbf47;

    --colore-primario: #29292a;
    --colore-primario-scuro: #073763;
    --colore-outline: #a1a1a1;
    --colore-bordo: #e0e0e0;
  

}
html { scrollbar-gutter: stable;
    font-size: 18px; }

body {
    font-family: var(--font-primary);
    background-color: var(--background-pag);
    color: var(--colore-testo);
    font-size: 1rem;
}

.container {
  width: min(1320px, calc(100% - 1.5rem));
  margin-inline: auto;
  /* padding: 5rem 1rem 0 1rem; */
  /* padding: 1rem; */
}
main {background-color: var(--background-main);}
/* main, section {margin: 3rem 0;} */
section {padding: 5rem 0;}
footer {
  /* background: #045570; background: linear-gradient(180deg,rgba(4, 85, 112, 1) 0%, rgba(47, 69, 102, 1) 20%, rgba(27, 39, 46, 1) 100%); */
  background: #123542;
background: linear-gradient(180deg,rgba(18, 53, 66, 1) 0%, rgba(6, 9, 10, 1) 100%);
      padding: 5rem 0;}

a {text-decoration: none;}

.pt1 {padding-top: 1rem; }
.pt2 {padding-top: 2rem; }
.pt5 {padding-top: 5rem; }
.pb1 {padding-bottom: 1rem; }
.pb2 {padding-bottom: 2rem; }
.pb3 {padding-bottom: 3rem; }
.pb5 {padding-bottom: 5rem; }

.mb05 {margin-bottom: 0.5rem;}

h1 {font-family: var(--font-secondary); font-size: 1.5rem; color:var(--colore-secondario); font-weight: 500; margin-bottom: 1rem;}

h2 {font-family: var(--font-secondary); font-size: 1.25rem; color:var(--colore-secondario); font-weight: 500; margin-bottom: 1rem;}
h1::first-letter, h2::first-letter {
  border-bottom: 4px solid var(--colore-terz); padding-left: 10px; /* per dare spazio tra lettera e bordo */  /* color: var(--colore-testo); */
}
.th2 {font-family: var(--font-secondary); font-size: 1.25rem; color: #FBB104; font-weight: 500; margin-bottom: 1rem;}

.testo-centrato {text-align: center;}
.h3 {font-size: 1.25rem;}

.anima { opacity: 0; animation: slideBounce 1.2s ease-out forwards; }

.anim-1 { animation-delay: 0s; }
.anim-2{ animation-delay: 0.4s; }

@keyframes slideBounce {
  0% { opacity: 0; transform: translateY(-80px); }
  75% { opacity: 0.8; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(-10px); }
}




.footer-sez {
  flex: 1 0 300px;
  /* border: 1px solid #ccc; */
  display: flex; flex-direction: column;
  color: #fff;
  align-items: center;
}
.footer-sez ul {list-style: none;}
.footer-sez ul li {margin: 0.75rem 0;}

.f-row {display: flex; flex-direction: row;}
.f-jus-con-spa-bet {justify-content: space-between;}
.f-wrap-y {flex-wrap: wrap;}
.f-align-items-c {align-items: center;}
.f-align-items-fs {align-items:flex-start;}
.gap-05 {gap:0.5rem;}
.gap-1 {gap:1rem;}
.gap-2 {gap:2rem;}
.j-c-center {justify-content: center;}
.f-col {display: flex; flex-direction: column; align-items: center;}

/* testi */
.txt-hero {
    font-family: var(--font-secondary); font-weight: 500; font-size: 2rem; text-shadow: 6px 6px 7px rgba(14, 13, 13, 0.8); }
.txt-grande {
    font-size: 2rem; font-family: var(--font-secondary); font-weight: 500; }th2
.txt-medio {
    font-size: 1.5rem; font-family: var(--font-secondary); font-weight: 500; }
.txt-norm {
    font-size: 1rem; font-family: var(--font-secondary); font-weight: 500; }
.txt-piccolo {
   font-size: 0.75rem; font-family: var(--font-secondary); font-weight: 500; }
.txt-piccolo-f1 {
   font-size: 0.75rem; font-family: var(--font-primary);}   
.txt-cookie {
  font-size: 0.9rem;}

   /*-- colori --*/
.rosso {color: var(--colore-terz);}
.bianco {color: var(--background-pag);}


/* link */
a.but-link:link, a.but-link:visited  {
  font-family: var(--font-secondary); font-size: 1.25rem; background-color: #d7dfd2; color: #3c4738; padding: 0.5rem 1rem; border-radius: 50px; }
a.but-link:hover, a.but-link:active  {
  color: #d7dfd2; background-color: #3c4738; }
a.but-link:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

a.card-t:link, a.card-t:visited {
  font-family: var(--font-secondary); font-size: 1.25rem; color: var(--colore-secondario); }
a.card-t:hover, a.card-t:active  {
  color: var(--colore-secondario-h); }

a.card-a:link, a.card-a:visited {
  font-family: var(--font-primary); font-size: 0.9rem; color: var(--colore-secondario); }
a.card-a:hover, a.card-a:active  {
  color: var(--colore-secondario-h); }

a.card-cat:link, a.card-cat:visited {
  font-family: var(--font-secondary); font-size: 0.9rem; color: var(--colore-terz); }
a.card-cat:hover, a.card-cat:active  {
  color: var(--colore-terz-h); }

a.foot:link, a.foot:visited {
  font-family: var(--font-primary); color: var(--background-pag); font-weight: 500; font-size: 0.9rem;}

a.foot:hover, a.foot:active {
  color: var(--colore-terz); }

a.cookie:link, a.cookie:visited, a.cookie:hover, a.cookie:active {
  font-weight: 500; color: var(--colore-primario);}

a.card-t:focus-visible, a.card-a:focus-visible, a.card-cat:focus-visible, a.foot:focus-visible, a.cookie:focus-visible {
    outline: var(--focus-outline); outline-offset: 2px;}


/* .sottomenu li a:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
} */




.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  /* FIX per WAVE */
  color: #000; /* colore ad alto contrasto */
}

/*--- hero ---*/
.header-immagine {
    position: relative;
    width: 100%;
    height: 80vh;
}
.cover-image {
    width: 100%; height: 100%; object-fit: cover;
}
.overlay-content {
  position: absolute; /* Sgancia il div dal flusso normale */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4); /* Opzionale: scurisce l'immagine per leggere meglio il testo */
  color: var(--background-pag);
}

.hero_cont {
    display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 2rem;
}
.hero_ricerca {
    /* display: flex; flex-direction: row; gap: 2rem;  overflow: visible; */
    
    display: flex; flex-wrap: wrap; gap: 1rem;
}
.form-bianco {
    background-color: var(--background-pag);
    padding: 1rem;
    border-radius: 10px;
    width: 100%;
}

/* select menu*/

.custom-select {
  position: relative;
  /* width: 100%; */
  z-index: 10;
  flex: 1 1 250px;
}


.select-trigger {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid transparent;
  /* border-radius: 6px; */
  background: var(--background-pag);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  color: var(--colore-primario);
  /* position: relative; z-index: 8; */
}

.select-trigger:focus {
  outline: 2px solid #bebebe;
  outline-offset: 2px;
}

.select-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--background-pag);
  /* border: 1px solid #ccc; */
  /* border-radius: 6px; */
  /* margin-top: 4px; */
  max-height: 240px;
  overflow-y: auto;
  display: none;
  z-index: 20;
  color: var(--colore-primario);
  font-family: var(--font-secondary);
}

.custom-select[data-open="true"] .select-options {
  display: block;
}

.select-options li {
  padding: 10px 14px;
  cursor: pointer;
}

.select-options li:hover,
.select-options li:focus {
  /* background-color: #f0f0f0; */
  background-color: var(--colore-terz);
  color: var(--background-pag);
}

.form-group {
  position: relative;
  /* width: 100%; */
  /* min-width: 300px; */
  flex: 1 1 300px;
}

.form-group svg {
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
}

.input-chiave {
  width: 100%;
  padding: 10px 14px 10px 25px;
  border: 1px solid transparent;
  /* border-radius: 6px; */
  font-size: 1.25rem;
  background: var(--background-pag);
  color: var(--colore-primario);
  font-family: var(--font-secondary);
}

.input-chiave:focus {
  outline: 2px solid var(--colore-outline);
  outline-offset: 2px;
}

.submit-cerca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* padding: 10px 18px; */
  background: var(--colore-terz-h);
  color: var(--background-pag);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  flex: 1 1 150px;
}


.submit-cerca:hover {
  background: var(--colore-terz);
}

.submit-cerca:focus {
  outline: 2px solid var(--colore-outline);
  outline-offset: 2px;
}

.consigliati {display: none;}

/* card attività */



  .schede {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem; list-style-type: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;            /* Firefox */
    padding: 0 1rem 1rem;
    scroll-padding: 0 0.5rem;           /* allinea lo snap col padding */
  }
  .schede::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

  .schede-wrap { position: relative; }
  .schede-wrap::after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 1rem;
    width: 2rem;
    background: linear-gradient(to right, transparent, #fff);
    pointer-events: none;
  }

  
.card {
  flex: 0 0 85%;                    /* la scheda successiva si intravede */
  scroll-snap-align: center;        /* oppure start */
 
  background-color: var(--background-pag);
  box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
  border-radius: 10px;
  opacity: 0;
  animation: cardin 2s ease 0s 1 normal forwards;
}
@keyframes cardin {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}


.card-img {
  width: 100%;
  height: 150px;
  overflow: hidden;
}

.aspect-ratio-16-9 {
  width: 100%; /* o larghezza desiderata */
  aspect-ratio: 16 / 9;
  object-fit: cover; /* o contain */
  border-radius: 10px 10px 0 0;
  transition: transform 0.4s ease; /* Fluidità dell'animazione */
}
.aspect-ratio-16-9:hover {
  transform: scale(1.2);
}

.card-body {
  height: 230px;
  padding: 1rem;
  display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* scheda categoria slide*/
.scheda {
			background-color: var(--background-pag);
			border-radius: 10px;
			box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
		}

		.scheda-cat {
			position: relative;
			height: 200px;
		}
		

		.scheda-cat-ico {
			position: absolute;
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background-color: #fff;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			display: flex; justify-content: center; align-items: center;
		}

		.scheda-cat-ico img {width: 60px; height: 60px; }




@media (min-width: 576px) and (max-width: 767px) {
  .header-immagine { height: 80vh; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .header-immagine { height: 600px;}
  .txt-hero {font-size: 2.5rem;}
  .card {width: 325px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  h1 {font-size: 1.75rem;}
  h2 {font-size: 1.25rem;}
  .header-immagine {height: 700px; }  
  .consigliati {display: block;} 
  .txt-hero {font-size: 3rem; }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  h1 {font-size: 2rem;}
  h2 {font-size: 1.5rem;}s
  .header-immagine {height: 720px;}
  .consigliati {display: block;}
  .txt-hero {font-size: 4rem;}
}

@media (min-width: 1400px) {
  h1 {font-size: 2rem;}
  h2 {font-size: 1.5rem;}
  .header-immagine {height: 720px; }
  .consigliati {display: block;}
  .txt-hero {font-size: 5rem;}
  
  .schede {flex-direction: row; flex-wrap: wrap; }
  .card { flex: 1 1 370px; }
  .card-img {height: 220px; }
  .schede-wrap::after {background: none; }
    
}