html {
  scroll-behavior: smooth;
}

body {
  font-family: "Rubik", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #333;
  margin: 0; /* spesso utile */
  padding: 0;
}

/* FONTS */

@font-face {
  font-family: 'Rubik Glitch';          /* Nome che userai in font-family (senza virgolette extra se non necessario) */
  src: 
    url('../fonts/Rubik/RubikGlitch-Regular.woff2') format('woff2'),  /* Priorità: formato più leggero e moderno */
    url('../fonts/Rubik/RubikGlitch-Regular.woff') format('woff'),    /* Fallback per browser vecchi */
    url('../fonts/Rubik/RubikGlitch-Regular.ttf') format('truetype'); /* Ultimo fallback */
  font-weight: 400;
  font-style: normal;
  font-display: swap;                   /* IMPORTANTISSIMO: evita il testo invisibile durante il caricamento */
}

@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik/Rubik-VariableFont_wght.ttf') format('truetype');
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
font-variant-ligatures: none; 
font-feature-settings: "liga" 0;
}

@font-face {
  font-family: 'Rubik Distressed';
  src: 
    url('../fonts/Rubik/RubikDistressed-Regular.woff2') format('woff2'),
    url('../fonts/Rubik/RubikDistressed-Regular.woff') format('woff'),
    url('../fonts/Rubik/RubikDistressed-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Rubik Italic';
    src: url('../fonts/Rubik/Rubik-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 300;
    font-stretch: 50% 150%; /* Anybody supporta anche larghezza variabile */
    font-style: normal;
    font-display: swap;
font-variant-ligatures: none; 
font-feature-settings: "liga" 0;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    src: url('../fonts/MaterialSymbolsOutlined.ttf') format('truetype');
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: 100;
    font-style: normal;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.grecaptcha-badge { 
visibility: hidden; 
}

hr {
margin-top:2rem;
padding-top:2rem;
border-top:1px solid #FF3131;
}

hr.bianco {
margin-top:2rem;
padding-top:2rem;
border-top:1px solid #fff;
}

img {
width:100%;
height:auto;
}

b, .strong {
font-weight:800;
}

a, a:hover {
color:inherit;
text-decoration:none;
}

/* TIPOGRAFIA */

.rubik {
font-family: 'Rubik';
}

.stress {
font-family: 'Rubik Distressed';
}

h1,h2,h3,h4,h5,h6, .capitolo {
font-weight: 700;
line-height:.9;
}

h1 {
font-size:4.5rem;
}
h2, .capitolo {
font-size:3rem;
}
h3 {
font-size:2.25rem;
}
h4 {
font-size:1.5rem;
}

.grande {
font-size:1.25rem;
line-height:1.5;
}

.medio {
font-size:1.15rem;
}

/* PESI */

.lite {
font-weight:300;
}

.regular {
font-weight:400;
}

.medium {
font-weight:600;
}

.heavy {
font-weight:800;
}

/* INTERLINEA */

.ridotto {
line-height:1;
}

.ampio {
line-height:1.1;
}

.indice {
font-size:5rem;
font-weight:800;
line-height:.8;
}

.claimhome {
font-size:2.5rem;
line-height:1;
}

.legenda {
font-size:.8rem;
font-weight:600;
}

@media only screen and (max-width: 768px) {
h1 {font-size:3rem}
h2 {font-size:2.5rem}
h3 {font-size:2rem}
.imgback {height:50vh;padding:20vh 0}
}

/* COLORI */

.fire {
color:#FF3131;
}
.firebg {
background-color:#FF3131;
}

.fire-lightest {
color:#FFEAEA;
}
.firebg-lightest {
background-color:#FFEAEA;
}

.fire-lighter {
color:#FFADAD;
}
.firebg-lighter {
background-color:#FFADAD;
}

.fire-light {
color:#FF6F6F;
}
.firebg-light {
background-color:#FF6F6F;
}

.fire-dark {
color:#B32222;
}
.firebg-dark {
background-color:#B32222;
}

.fire-darker {
color:#801919;
}
.firebg-darker {
background-color:#801919;
}

.bianco {
color:#fff;
}
.biancobg {
background-color:#fff;
}

.chiaro {
color:#F5F5F5;
}
.chiarobg {
background-color:#F5F5F5;
}

.scuro {
color:#333;
}
.scurobg {
background-color:#333;
}

/* Navigation */

.navbar-collapse {
    display: block !important;
}
.navbar-header {
    display: none !important;
}

nav {
z-index:9999;
}

.mega-sub-menu {
padding-top:5rem;
background: #1D7D83!important;
}

.mega-sub-menu img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border:1px solid #fff;
padding:1rem;
}

.logo img {
height:6rem;
width:auto;
}

.name {
font-weight:400;
font-size:1rem;
line-height:1;
letter-spacing:-.1rem;
}

/* Header */

header {
height:85vh;
position: relative;
width:100%;
}

.interna {
height:auto;
padding:20vh 0;
}

header .container {
position: relative;
z-index: 2;
}

/* Heroes */

.herohome {
position:relative;
height:70vh;
border-radius:1rem;
width:100%;
}

/* SEZIONE */

.sezione {
position:relative;
padding: 15vh 0;
}

.centrale img {
margin:2rem 0;
}

.centrale h2, .laterale h2 {
font-size:2.5rem;
}

.contenuto h2 {
margin-bottom:2rem;
}

.contenuto h3 {
margin:2rem 0;
}

.immagine {
height:20vh;
margin:1rem 0;
}

.stretto {
padding-right:10rem;
}

.newsblock {
    height: 15rem;
    border-radius: 1rem;
    overflow: hidden;           /* nasconde lo zoom oltre i bordi arrotondati */
    background: #f8f8f8;        /* fallback se immagine manca */
}

.newsblock__img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* mantiene le proporzioni come cover */
    display: block;
    transition: transform 0.4s ease;   /* durata fluida, puoi cambiare a 0.3s o 0.5s */
}

/* ATTIVA ZOOM SU TUTTO IL BLOCCO (perché <a> avvolge tutto) */
a:hover .newsblock__img {
    transform: scale(1.08);     /* 1.06 = discreto, 1.1 = più evidente, 1.12 = forte */
}


.ente img {
transition: 0.25s;
filter:grayscale(100%);
height:2rem;
width:auto;
margin-bottom:2rem;
}

.ente img:hover {
filter:grayscale(0%);
}

/* MORE BIANCO */

.morebianco, .morebianco:hover {
padding:.5rem 1rem;
transition: 0.25s;
color:#555;
font-weight:400;
font-size:1rem;
border:1px solid #555;
border-radius:0;
}

.morebianco span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.25s;
}

.morebianco span:after {
font-family: 'Material Symbols Outlined';
content: '\e5c8';
position: absolute;
opacity: 0;
top: 0;
right: 0;
transition: 0.25s;
}

.morebianco:hover span {
left:0;
padding-right: 2rem;
color:#555;
}

.morebianco:hover span:after {
opacity: 1;
right: 0;
color:#555;
}

.morebianco:hover span:before {
opacity: 0;
right: 0;
color:#555;
}

/* MORE INVERSO */

.moreinverso, .moreinverso:hover {
padding:.5rem 1rem;
transition: 0.25s;
color:#fff;
font-weight:400;
font-size:1rem;
border:1px solid #fff;
border-radius:0;
}

.moreinverso span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.25s;
}

.moreinverso span:after {
font-family: 'Material Symbols Outlined';
content: '\e5c8';
position: absolute;
opacity: 0;
top: 0;
right: 0;
transition: 0.25s;
}

.moreinverso:hover span {
left:0;
padding-right: 2rem;
color:#fff;
}

.moreinverso:hover span:after {
opacity: 1;
right: 0;
color:#fff;
}

.moreinverso:hover span:before {
opacity: 0;
right: 0;
color:#f;
}

/* MORE NEGATIVO */

.moreneg {
padding:.5rem 1rem;
transition: 0.25s;
background-color:#FF3131;
color:#fff;
font-weight:400;
font-size:1rem;
border-radius:0;
}

.moreneg:hover {
padding:.5rem 1rem;
transition: 0.25s;
background-color:transparent;
color:#FF3131;
font-weight:400;
font-size:1rem;
border-radius:0;
border:1px solid #FF3131;
}

.moreneg span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.25s;
}

.moreneg span:after {
font-family: 'Material Symbols Outlined';
content: '\e5c8';
position: absolute;
opacity: 0;
top: 0;
right: 0;
transition: 0.25s;
}

.moreneg:hover span {
left:0;
padding-right: 2rem;
color:#FF3131;
}

.moreneg:hover span:after {
opacity: 1;
right: 0;
color:#FF3131;
}

.moreneg:hover span:before {
opacity: 0;
right: 0;
color:#fff;
}

/* wpcf7 */

/* Form container */
.wpcf7 {
    width: 100% !important;
}

.wpcf7 form {
    width: 100%;
}

/* Wrapper spans */
.wpcf7 .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* Input fields */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
width: 100% !important;
max-width: 100%;
box-sizing: border-box;
padding:.5rem 1rem;
}

/* Paragrafi del form */
.wpcf7 p {
width: 100%;
margin-bottom: 1rem;
}

/* Labels */
.wpcf7 label {
font-size:.9rem;
display: block;
width: 100%;
color:white;
}

.wpcf7 input[type="submit"] {
padding: .5rem 2rem;
border:1px solid #fff;
color:#fff;
background-color:#1D7D83;
border-radius: 0;
cursor: pointer;
font-size: 1rem;
}

/* FOOT */

footer {
background-color:#EBEBEB;
padding:10vh 0;
position:relative;
color:#333;
line-height:1.2;
}

/* FILTERS */

form.searchandfilter ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

form.searchandfilter ul li {
    display: block;
    margin-bottom: 8px;
}

form.searchandfilter ul li label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

form.searchandfilter input[type="submit"],
form.searchandfilter button {
border:none;
background-color: #FF3131;
color: #fff;
padding: .5rem 1rem;
margin-top: 2rem;
cursor: pointer;
}