/*!
Theme Name: maremontanarunningpark
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: maremontanarunningpark
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

maremontanarunningpark is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;400;600;800&family=Public+Sans:wght@100;200;400;600&display=swap');


:root {
    --font-title: 'Montserrat', sans-serif;
    --font-subtitle: 'Public Sans', sans-serif;
    --nerodifondo: #13101d;
    --verdevivace: #87b726;
    --giallocaldo: #fdc300;
    --azzurro: #1988c4;
    --azzurroscuro: #1988c4;
    --rosso: rgb(191, 59, 47);
    --nerofont: rgb(19, 16, 29); /* Note: This is the same as nerodifondo */
    --arancione: #ee751b;
    --semaforoverde: #87b726;
    --bianco: rgb(255,255,255);
}

body, button, input, select, optgroup, textarea {
    font-family: 'Public Sans', sans-serif!important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    font-weight: 200; /* Default, use 100, 200, 600 as needed */
}

h1 {
    font-size: 6.5rem;
    font-weight: 600;
    letter-spacing: -1px;
}

h2 {
    font-size: 5.5rem;
    font-weight: 500;
    letter-spacing: -1px;
    
}

h3 {
    font-size: 4.5rem;
    font-weight: 400;
    letter-spacing: -1px;
}

h4 {
    font-size: 3.5rem;
    font-weight: 400;
    letter-spacing: -1px;
}

p { font-size: 1.5rem;
    font-weight: 100;
    letter-spacing: 0px;
}

.container {
    max-width: 1500px!important;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
header {
    position: relative;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s;
}

header .navbar {
     background-color: transparent;
}

header .navbar.scrolled {
    background-color: white;
    height: 6em!important;
}

header .navbar-brand img {
    height: 50px;
}

header .navbar-nav .nav-item .nav-link {
    padding: 15px 20px;
    color: var(--nerofont);
}

/* Sezioni */
section {
    padding: 50px 0;
}

.app_icon {

	display:inline-block; 
	padding:5px;
}

/* */
/* Nav */
/* */

.fixed-top {
    top: 30px!important;
}

.fixed-top {
    background: transparent;
    transition: background 0.3s ease-in-out;
}

.fixed-top.scrolled {
    background: #fff;
}

#navbarNav .icon-text-container {
    display: flex;
    flex-direction: row; /* Cambiato da column a row */
    align-items: center; /* Mantiene gli elementi allineati verticalmente */
    justify-content: center;
    text-transform: uppercase;
    padding: 0.8em;
    font-size: 1.1em;
    font-weight: 200;
}

#navbarNav .menu-item-icon {
    margin-right: 10px; /* Adjust as needed */
}

#navbarNav .icon-text-container i, #navbarNav .icon-text-container span {
    color: var(--nerofont);
}

#navbarNav .icon-text-container span:hover {
    color: rgb(252,194,45);
}

.navbar {
    align-items: flex-start!important; 
    height: 10em!important;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
    color: var(--nerofont);
    top: -15px !important;
}

.navbar a, .navbar p {

    color: var(--nerofont);

}

.navbar.scrolled #navbarNav .icon-text-container i,
.navbar.scrolled #navbarNav .icon-text-container span {
    color: black;
}

.navbar.scrolled #navbarNav .icon-text-container span:hover {
    color: rgb(252,194,45); /* You can adjust this if you want a different hover color when scrolled */
}

/* Stile di base per la scritta Menu, visibile solo su dispositivi più grandi */
.navbar-toggler-text {
    display: none; /* Nascondi di default */
    margin-left: 10px; /* Spazio tra l'icona e la scritta */
}



/* Media query per dispositivi più grandi: mostra la scritta Menu */
@media (min-width: 992px) {
    .navbar-toggler-text {
        display: inline-block; /* Mostra la scritta solo su dispositivi più grandi */
    }
}

/* Assicurati che l'icona dell'hamburger sia visibile su tutti i dispositivi */
.navbar-toggler {
    display: flex;
    align-items: center;
}


@media (max-width: 991px) {
    .navbar-collapse {
        height: 100vh;
    }

}

.navbar {
    padding: 0.5rem 0rem 0rem 1rem!important;
}

/* ------------------------------- */
/* Menu Sticky */
/* ------------------------------- */

.sticky-buttons {
    display: none;
}

/* Styles for mobile view */
@media all and (max-width: 768px) {

    /* Base styles for buttons - always present */
    .sticky-buttons {
        display: flex;
        justify-content: space-between;
        background-color: rgb(252,194,45); /* Example background color */
        box-shadow: 0 -2px 5px rgb(59, 58, 58); /* Optional: adds a slight shadow at the top of the button container */
    }

    .sticky-buttons .button {
        flex: 1; /* Each button flexes to take up half the width */
        text-align: center;
        font-size: 1.3rem;
        padding: 10px 0;
        text-decoration: none;
        color: rgb(0, 0, 0); /* Set text color */
        display: flex; /* Use flexbox for aligning icon and text */
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        transition: background-color 0.3s; /* Smooth background color change on hover */
    }

    .sticky-buttons .button i { /* Icon-specific styles */
        margin-right: 8px; /* Space between icon and text */
    }

    /* Hover effect for buttons */
    .sticky-buttons .button:hover {
        background-color: rgb(252,194,45); /* Darken button on hover */
    }



    .sticky-buttons {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 10;
    }

    .sticky-buttons .button {
        box-sizing: border-box;
    }
}

/* Optionally, visual separation between the buttons */
.sticky-buttons .button:not(:last-child) {
    border-right: 1px solid rgb(252,194,45); /* Slightly lighter/darker border color based on the background */
}


/* ------------------------------- */
/* Card Iscrizioni */
/* ------------------------------- */


.horizontal-card {
    display: none;
}


/* Desktop Styles */
@media all and (min-width: 1024px) {
        /* Extra styling for horizontal card */
    .horizontal-card {
        width: 70%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: box-shadow 0.3s ease-in-out;
        margin-top: -4.1rem!important;
        margin-bottom: -4.1rem!important;
        border-radius: 0;
        position: relative;
      }

      .card-title {
        margin-bottom: 0px!important;
      }


      /* Styles for the buttons */
      #button-iscriviti, #button-regala {
        white-space: nowrap; /* Ensure text doesn't wrap */
        background-color: rgb(252,194,45)!important;
        border-radius: 0;
        border: 0px solid white;
        color: black;
        text-transform: uppercase;
        font-size: 1.3rem;
      }

      /* Adjust button padding if necessary */
      #button-iscriviti, #button-regala {
        padding: 20px 20px;
        margin-left: 20px;
        margin-right: 20px;
      }
}

/* Tablet Styles */
@media all and (min-width: 768px) and (max-width: 1024px) {
    .horizontal-card {
        display: none;
    }

}

/* Moblile */
@media all and (max-width: 768px) {
    .horizontal-card {
        display: none;
    }

    .card-body {
    }

}

/* ------------------------------- */
/* Sezione A: Header */
/*  ------------------------------ */

/* Homepage Hero */
.hero-section-homepage {
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
}

.hero-section-homepage h1 {
    color: var(--bianco);
    font-size: 6.5rem;
    font-weight: 800;
}

.hero-section-homepage p {
    color: #fff;
    font-size: 1.5rem;
}

/* Hero Generico */
.hero-section, .hero-section-single {
    background-size: cover;
    background-position: center;
}

.hero-section {
    height: 44vh;
}

.hero-section-single {
    height: 55vh;
}


.section-s h2 {
    margin-bottom: 80px;
}

.section-c h2, .section-e h2, .section-f h2, .section-g h2 {
    font-size: 5em;
    font-weight: 800;
}

.section-c h2 {
    color: var(--verdevivace);
}

.section-e h2 {
    color: var(--azzurroscuro);
);
}

.section-f h2 {
  
}

/* Responsive per Hero Homepage */
@media (max-width: 768px) {
    .hero-section-homepage h1 {
        color: var(--bianco);
        font-size: 3.5rem;
        font-weight: 800;
    }
}

@media (max-width: 576px) {
    .hero-section-homepage h1 {
        color: var(--bianco);
        font-size: 2.8rem;
        font-weight: 800;
    }
}


/* ------------------------------- */
/* Sezione: BreadCrumbs */
/* ------------------------------- */

#breadcrumbs {
    margin-top: 2em;
    margin-bottom: 2em;

}

/* ------------------------------- */
/* Sezione: Features */
/* ------------------------------- */


#features .claim h2 {
    margin-bottom: 50px
}



/* ------------------------------- */
/* Sezione: Section C */
/* ------------------------------- */


.section-c {
    height: 80vh;
    margin: 7em 0em;
}

/* ------------------------------- */
/* Sezione: SectionG */
/* ------------------------------- */


.section-g::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://maremontanarunningpark.com/wp-content/themes/maremontanarunningpark/images/curve-di-livello.png.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.1; /* Set your desired opacity here */
    z-index: 0;
}

/* ------------------------------- */
/* Sezione M: Footer */
/* ------------------------------- */

footer {
    padding: 20px 0;
    background-color: var(--nerodifondo);
}

footer .social-icons a {
    margin: 0 5px;
    color: var(--bianco);
    text-decoration: none;
}

#footer {
    min-height: 22vh;
    color: var(--bianco);
}

#footer i {
    color: var(--bianco);
    font-size: 1.5em;
}

#footer a, a:hover {
    text-decoration: none;
    color: var(--bianco);
}

#footer p {
    font-size: 1.1em;
    font-weight: 200;
}

#footer h2 {
  font-size: 3.5rem;
  color: var(--verdevivace);
  font-weight: 800;
}

#footer .footer-logo img {
    width: auto;
    height: 60px;
    max-width: 100%;
    margin-bottom: 25px;
}

#footer .footer-socials {
    text-align: center;
}

#footer .social-icon {
    margin: 0 20px; /* Aggiunge spaziatura tra le icone */
    transition: opacity 0.3s ease; /* Aggiunge un effetto di dissolvenza */
}

#footer .social-icon:hover {
    opacity: 0.7; /* Cambia l'opacità al passaggio del mouse */
    color: rgb(66,62,73);
}

#footer .footer-text p {
    text-align: left;
}

#footer a {
    color: var(--bianco); /* Colore del testo dei link */
    transition: color 0.3s ease; /* Aggiunge un effetto di transizione al colore */
}

#footer a:hover {
    color: rgb(66,62,73); /* Cambia il colore del testo dei link al passaggio del mouse */
}

#footer .btn, .form-control {
    padding: 0.375rem 4.75rem!important;
    background-color: var(--giallocaldo);
    border-radius: 0rem;
}

#footer .btn-primary {
    border-color:var(--giallocaldo);
}

img .card-img-top {
    border-top-left-radius: 0px!important;
    border-top-right-radius: 0px!important;
  }

#footer .card {
    border-radius: 0px!important;
}

#footer .form-control {
    border-radius: 0rem;
}

#app-cta h2 {
    color: var(--bianco);
    font-size: 1.8em;
    font-weight: 400;
    margin-bottom: 40px;
}

#app-cta img {
    border: 1px solid var(--bianco);
    border-radius: 22px;
}


.footer-list {
    list-style-type: none; /* Rimuove i punti delle liste */
    padding: 0; /* Rimuove il padding di default */
    margin: 0; /* Rimuove il margine di default */
}

.footer-list li {
    display: inline-block; /* Rende gli elementi della lista orizzontali su desktop */
    margin-right: 0px; /* Aggiunge uno spazio tra gli elementi */
}

.footer-list li:last-child {
    margin-right: 0; /* Rimuove il margine dall'ultimo elemento */
}

.footer-list li:not(:last-child)::after {
    content: "|"; /* Aggiunge il divisore */
    margin-left: 10px; /* Spaziatura dal testo */
    margin-right: 10px; /* Spaziatura dal prossimo elemento */
    color: #333; /* Stesso colore dei tuoi link */
}

.footer-list li:last-child {
    margin-bottom: 0; /* Rimuove il margine dall'ultimo elemento */
}

/* Per dispositivi mobili, puoi utilizzare una media query per rendere gli elementi della lista verticali */
@media (max-width: 768px) { /* Adatta il valore 768px in base alle tue necessità */
    .footer-list li {
        display: block; /* Rende gli elementi della lista verticali */
        margin-bottom: 10px; /* Aggiunge uno spazio tra gli elementi */
    }

    .footer-list li::after {
        content: ""!important; /* Rimuove il divisore */
        margin-left: 0px!important; /* Spaziatura dal testo */
        margin-right: 0px!important; /* Spaziatura dal prossimo elemento */
    }

    .footer-list li {
        margin-right: 0px!important;
    }

}

/* Media query per desktop */
@media (min-width: 768px) {
    .footer-socials, .col-md-6 {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Stili per i form */
.form-group,
.form-check {
    margin-bottom: 1rem;
}

.form-control {
    margin-bottom: .5rem;
}

.social-icon {
    margin-right: .5rem; /* Distanza tra le icone social */
}





/* ------------------------------- */
/* Sezione L: Partners - Immagini Sponsors */
/* ------------------------------- */


.sponsor-image {
    max-width: 180px;
    max-height: 180px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.sponsor-image:hover {
    transform: scale(1.1);
}


/* Header */ 

.navbar-brand img {
    
    height: 60px;
    width: auto; /* This will ensure the logo maintains its aspect ratio */
    max-width: 100%; /* This ensures the logo doesn't go beyond its container width */
}


/* ------------------------------- */
/* Social  */
/* ------------------------------- */


.social-icon {
    width: 40px; /* Definisci una larghezza fissa */
    height: 40px; /* Definisci un'altezza fissa */
    display: inline-flex;; /* Imposta il display come flex */
    justify-content: center; /* Centra orizzontalmente */
    align-items: left; /* Centra verticalmente */
    /* border: 2px solid #333; Qui impostiamo il bordo */
    border-radius: 50%;     /* Rende l'elemento perfettamente circolare */
    padding: 9px;          /* Spazio tra l'icona e il bordo */
    text-align: center;     /* Allinea l'icona al centro */
    line-height: 1;         /* Corregge l'allineamento verticale dell'icona */
    transition: 0.3s;       /* Aggiunge una transizione per effetti hover */
}

.social-icon:hover {
    border-color: #555;     /* Cambia il colore del bordo al passaggio del mouse */
}

/* Puoi anche voler modificare la dimensione delle icone */
.social-icon .fab {
    font-size: 18px; /* Aumenta o diminuisci secondo le tue esigenze */
}

.social-icon:hover .fab {
    color: #555; /* Cambia con il colore desiderato per l'hover */
}


/* ------------------------------- */
/* Utilità */
/* ------------------------------- */

.bg-light {
    background-color: #f8f9fa !important;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}


.intro-gradient {
   
}

.menu-item-icon {
    margin-right: 5px;
}


/* ------------------------------- */
/* Sezione: BreadCrumbs */
/* ------------------------------- */

#breadcrumbs {
    margin-top: 2em;
    margin-bottom: 2em;
    text-transform: uppercase;
    font-size: 0.8em !important;
    font-weight: 200;
    font-family: var(--font-subtitle);
    color: var(--nerofont);
    letter-spacing: 0.5px;
    line-height: 1.4;
}

/* Stili per i link (elementi cliccabili) */
#breadcrumbs a {
    color: var(--azzurroscuro);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.1em !important;
    font-weight: 400;
    transition: color 0.3s ease;
}

#breadcrumbs a:hover {
    color: var(--giallocaldo);
    text-decoration: none;
}

/* Stili per il testo semplice (ultimo elemento - pagina corrente) */
#breadcrumbs span,
#breadcrumbs > *:not(a) {
    color: var(--nerofont);
    text-transform: uppercase;
    font-size: 0.8em !important;
    font-weight: 400; /* Leggermente più pesante per indicare la pagina corrente */
}

/* Separatori */
#breadcrumbs {
    color: var(--nerofont);
}

/* Responsive per mobile */
@media (max-width: 768px) {
    #breadcrumbs {
        margin-top: 1em;
        margin-bottom: 1em;
        font-size: 0.7em !important;
    }
    
    #breadcrumbs a,
    #breadcrumbs span,
    #breadcrumbs > *:not(a) {
        font-size: 0.7em !important;
    }
}