@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
font-family: "League Spartan", sans-serif;
}


:root {
    --white-color: #ffffff;         /* Bianco pulito */
    --dark-color: #0d1b2a;          /* Blu notte */
    --primary-color: #1d3557;       /* Blu profondo, colore principale */
    --secondary-color: #457b9d;     /* Blu medio, per evidenziare pulsanti/hover */
    --light-pink-color: #f1f8ff;    /* Azzurro molto chiaro, per sfondi */
    --medium-gray-color: #8d99ae;   /* Grigio-blu tenue, per testi secondari */


    --font-size-s: 0.9rem;
    --font-size-n: 1rem;
    --font-size-m: 1.12rem;
    --font-size-l: 1.5rem;
    --font-size-xl: 2rem;
    --font-size-xxl: 2.3rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --border-radius-s: 8px;
    --border-radius-m: 30px;
    --border-radius-circle: 50%;

    --site-max-width: 1300px;
}

html {
    scroll-behavior: smooth;
}



/* stili per l'intero sito */
ul {
    list-style: none;
}

a {
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

img {
    max-width: 100%;
}

.section-content {
    margin: 0 auto;
    padding: 0 20px;
    max-width: var(--site-max-width);
}

.section-title {
    text-align: center;
    padding:60px 0 100;
    text-transform: uppercase;
    font-size: var(--font-size-xl);
}

.section-title::after {
    content: "";
    width: 80px;
    height: 5px;
    display: block;
    background: var(--secondary-color);
    margin: 10px auto 0;
    border-radius: var(--border-radius-s);
}


/*nav bar stile*/
header {
    position: fixed;
    width: 100%;
    z-index: 5;
    background: var(--primary-color);
}

header .navbar {
    display: flex;
    padding: 20px;
    align-items: center;
    justify-content: space-between;
}

.navbar .nav-logo .logo-text {
    color: var(--dark-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.navbar .nav-menu {
    display: flex;
    gap: 10px;
}

.navbar .nav-menu .nav-link {
    padding: 10px 18px;
    color: var(--white-color);
    font-size: var(--font-size-m);
    border-radius: var(--border-radius-s);
    transition: 0.3s ease;
}

.navbar .nav-menu .nav-link:hover {
    color: var(--primary-color);
    background: var(--secondary-color);
}

.navbar :where(#menu-close-button, #menu-open-button) {
    display: none;
}

header {
    position: fixed;
    width: 100%;
    z-index: 5;
    background: var(--white-color);
}

.navbar .nav-menu .nav-link {
    color: var(--dark-color);
}





/* Hero Section styling*/
.hero-section {
    background: var(--primary-color);
    min-height: 100vh;
}

.hero-section .section-content {
    display: flex;
    align-items: center;
    min-height: 100vh;
    color: var(--white-color);
    justify-content: space-between;
    
}

.hero-section .hero-details .title {
    font-size: var(--font-size-xxl);
    color: var(--secondary-color);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.hero-section .hero-details .subtitle {
    margin-top: 8px;
    max-width: 70%;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.hero-section .hero-details .description {
    max-width: 70%;
    margin: 24px 0 40px;
    font-size: var(--font-size-m)
}

.hero-section .hero-details .buttons {
    display: flex;
    gap: 23px;
}

.hero-section .hero-details .button {
    padding: 10px 26px;
    border: 2px solid transparent;
    color: var(--primary-color);
    border-radius: var(--border-radius-m);
    background: var(--secondary-color);
    font-weight: var(--font-weight-medium);
    transition: 0.3s ease;
}

.hero-section .hero-details .button:hover,
.hero-section .hero-details .contattaci {
    color: var(--white-color);
    border-color: var(--white-color);
    background: transparent;
}

.hero-section .hero-details .contattaci:hover {
    color: var(--primary-color);
    border-color: var(--secondary-color);
    background: var(--secondary-color);
}

.hero-section .hero-image-wrapper {
    max-width: 500px;
    margin-right: 30px
}

/*about section styling*/
.about-section {
    padding: 120px 0;
    background: var(--light-pink-color);
}

.about-section .section-content {
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: space-between;
}

.about-section .about-image-wrapper{
  width: 400px;              /* dimensione */
  aspect-ratio: 1 / 1;       /* sempre quadrato */
  border-radius: 50%;        /* cerchio perfetto */
  overflow: hidden;          /* taglia i bordi dell'immagine */
}

.about-section .about-image-wrapper .about-image{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* riempire senza deformare */
  display: block;            /* evitate spazi sotto le immagini inline */
}

.about-section .about-details .section-title {
    padding: 0;

}

.about-section .about-details {
    max-width: 50%;
}

.about-section .about-details .text {
    line-height: 30px;
    font-size: var(--font-size-m);
    margin: 50px 0 30px;
    text-align: center;
}

.about-section .social-link-list {
    display: flex;
    justify-content: center;
    gap: 25px;
}

.about-section .social-link-list .social-link {
    color: var(--primary-color);
    font-size: var(--font-size-l);
    transition: 0.2s ease;
}

.about-section .social-link-list .social-link:hover {
    color: var(--secondary-color);
}

/*servizi section styling*/
.servizi-section {
    padding: 80px 0;
    background: var(--white-color);
}

.servizi-section .section-title {
    margin-bottom: 50px;
}

.servizi-section .servizi-list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}

.servizi-section .servizi-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 280px; /* uniforma larghezza card */
}

/* Wrapper per immagine tonda */
.servizi-section .servizi-image {
    width: 180px;             /* dimensione fissa, facile da scalare */
    aspect-ratio: 1 / 1;      /* proporzione quadrata */
    object-fit: cover;        /* riempie senza deformare */
    border-radius: 50%;       /* cerchio perfetto */
    overflow: hidden;
    margin-bottom: 20px;
    display: block;
}

/* Nome del servizio */
.servizi-section .name {
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 10px;
}

/* Testo descrittivo */
.servizi-section .text {
    font-size: var(--font-size-s);
    color: var(--dark-color);
    line-height: 1.4;
}

.servizi-section .servizi-image {
    width: 180px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* animazione fluida */
}

/* Quando passo sopra */
.servizi-section .servizi-item:hover .servizi-image {
    transform: scale(1.05); /* leggero ingrandimento */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* ombra soft */
}

/*sezione contatti*/
/* Sezione contatti */
.contact-section {
    padding: 80px 0;
    background: var(--light-pink-color);
}

.contact-section .section-title {
    text-align: center;
    margin-bottom: 50px;
    font-size: var(--font-size-xl);
    position: relative;
}

.contact-section .section-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}

/* Lista contatti */
.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: var(--font-size-m);
    margin-bottom: 15px;
    color: var(--dark-color);
}

.contact-info i {
    font-size: 1.2em;
    color: var(--primary-color);
}

.contact-info a {
    color: var(--dark-color);
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

/* Orari di apertura */
.opening-hours {
    min-width: 250px;
}

.hours-title {
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 15px;
    color: var(--primary-color);
}

.hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-m);
    color: var(--dark-color);
}

.hours-list li {
    margin-bottom: 8px;
}

/*dove siamo section*/
.location-section {
    padding: 80px 20px; /* maggiore respiro ai lati */
    background: var(--light-pink-color);
}

.location-section .section-title {
    text-align: center;
    margin-bottom: 50px; /* spazio tra titolo e contenuto */
    font-size: var(--font-size-xxl); /* titolo più grande */
    position: relative;
}

/* Contenuto principale */
.location-section .section-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px; /* spazio tra mappa e info */
    justify-content: center;
    align-items: flex-start;
}

/* Mappa */
.map-wrapper {
    flex: 1 1 500px;
    min-width: 300px;
    border-radius: var(--border-radius-m);
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.map-wrapper iframe {
    width: 100%;
    height: 350px;
    border: 0;
    border-radius: var(--border-radius-m);
}

@media (max-width: 768px) {
    .map-wrapper iframe {
        height: 250px;
    }
}

/* Info sezione */
.location-info {
    flex: 1 1 300px;
    font-size: var(--font-size-m);
    color: var(--dark-color);
    display: flex;
    flex-direction: column;
    gap: 20px; /* spazio tra blocchi */
}

/* Indirizzo */
.location-info .address {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-l);
    display: flex;
    align-items: center;
    gap: 10px;
}

.map-wrapper {
  width: 100%;
  max-width: 100%;   /* evita che si restringa */
  overflow: hidden;  /* previene scroll orizzontali */
}

.map-wrapper iframe {
  width: 100%;
  height: 500px;     /* puoi regolare l’altezza */
  display: block;    /* elimina spazi indesiderati */
  border: none;
}


/* Pulsanti mappa */
.map-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.map-button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--border-radius-m);
    background: var(--secondary-color);
    color: var(--white-color);
    text-decoration: none;
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-medium);
    transition: background 0.3s ease;
}

.map-button:hover {
    background: var(--primary-color);
}

/* Indicazioni / Come raggiungerci */
.directions h3 {
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 10px;
    color: var(--primary-color);
}

.directions p {
    line-height: 1.6;
    font-size: var(--font-size-m);
}


/*footer section*/
.site-footer {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 15px 20px;
    position: relative;
    bottom: 0;
    width: 100%;
}

.site-footer {
  background-color: var(--primary-color);
  color: var(--white-color);
  padding: 40px 20px 20px;
  position: relative;
  font-size: 0.95rem;
}

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

.footer-column {
  flex: 1 1 250px;
}

.footer-column h3 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: var(--secondary-color);
}

.footer-column a {
  color: var(--white-color);
  text-decoration: none;
}

.footer-column a:hover {
  color: var(--secondary-color);
}

.footer-bottom {
  text-align: center;
  margin-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 15px;
  font-size: 0.85rem;
}

/* Freccetta scroll to top */
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--secondary-color);
  color: var(--white-color);
  border: none;
  border-radius: 50%;
  padding: 12px;
  cursor: pointer;
  font-size: 18px;
  display: none; /* nascosta all’inizio */
}

.scroll-to-top:hover {
  background: var(--dark-color);
}

/* Responsive */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
  }
}

/* Mobile */
@media (max-width: 768px) {
    .location-section .section-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .location-info .address {
        justify-content: center;
    }
}



/* Mobile */
@media (max-width: 768px) {
    .contact-section .section-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .contact-info {
        justify-content: center;
    }
}


/* --- Responsività --- */
@media (max-width: 768px) {
    .contact-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .contact-form {
        min-width: unset;
    }
}


@media screen and (max-width: 900px) {
    :root {
            --font-size-m: 1rem;
            --font-size-l: 1.3rem;
            --font-size-xl: 1.5rem;
            --font-size-xxl: 1.8rem;
    }

    body.show-mobile-menu header::before {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        backdrop-filter: blur(5px);
        background: rgba(0, 0, 0, 0.2);
    }

    .navbar :where(#menu-close-button, #menu-open-button) {
        display: block;
        font-size: var(--font-size-l);
    }

    .navbar #menu-close-button{
        position: absolute;
        right: 30px;
        top: 30px;
    }

    .navbar #menu-open-button{
        color: var(--dark-color);
    }

    .navbar .nav-menu {
        display: block;
        position: fixed;
        left: -300px;
        top: 0;
        width: 300px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 100px;
        background: var(--white-color);
        transition: left 0.2s ease;
    }

    body.show-mobile-menu .navbar .nav-menu {
        left: 0;
    }

    .navbar .nav-menu .nav-link {
        color: var(--dark-color);
        display: block;
        margin-top: 17px;
        font-size: var(--font-size-l);
    }

    .hero-section .section-content {
        gap: 50px;
        text-align: center;
        padding: 30px 20px 20px;
        flex-direction: column-reverse;
        justify-content: center;
    }

    .hero-section .hero-details :is(.subtitle, 
    .description), .about-section .about-details {
        max-width: 100%;
    }

    .hero-section .hero-details .buttons {
        justify-content: center;

    }

    .hero-section .hero-image-wrapper {
        max-width: 270px;
        margin-right: 0;
    }

    .about-section .section-content {
        gap: 70px;
        flex-direction: column-reverse;
    }

    .about-section .about-image-wrapper .about-image {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
    }
}

/* --- Mobile --- */
@media screen and (max-width: 768px) {
    .servizi-section .servizi-item {
        max-width: 100%;
    }
    .servizi-section .servizi-image {
        width: 140px;
    }
}

/* Cursor personalizzato*/
@media (hover: hover) and (pointer: fine) {
    body {
        cursor: url("immagini/cursor-paw.png") 16 16, auto;
    }
}