:root {
  --color-primary:   #1f296b; /* Blue scuro */
  --color-secondary: #E84E0F; /* Arancio */
  --color-white:     #ffffff;
  --color-black:     #000000;
  --spacing:         1rem;
  --br:              0.5rem;
}

/* Base */
body {
  background: var(--color-white);
  color: var(--color-black);
}
.parco-macchine {
  padding: 1rem 0;

}

/* Finestra di visualizzazione: nasconde ciò che esce dai bordi */
.container-macchine {
  overflow: hidden;
  width: 100%;
   padding: 20px 0;
}

/* SPLIDE: reset larghezze fisse e gestisci spaziatura con padding */
#macchine-splide .splide__slide{
  flex: 0 0 auto;
  width: auto !important;      /* lascia gestire a Splide */
  margin-right: 0 !important;  /* rimuove override vecchio */
  padding: 0 .5rem;            /* gap tra card */
}
#macchine-splide .splide__list{ margin: 0 -.5rem; }

@media (max-width: 480px){
  #macchine-splide .splide__slide{ width: 100% !important; }
  #macchine-splide .macchina-card{ max-width: none; width: 100%; }
}

@media (max-width: 768px){
  #macchine-splide .macchina-card{ max-width: 260px; }
}

/* Singola card macchina */
.macchina-card {
      /* non si riduce e non si allunga */
  width: 100%;
  max-width: 300px;     /* larghezza massima */
  margin-right: 1rem;
  text-align: center;
  overflow: hidden;
  transition: transform 0.3s ease; /* per effetto hover */
}


/* Hover effects */

.macchina-card .btn:hover {
  background: #1f296b;
  color: #fff;
     font-size:20px;
   min-width:160px;
}

/* Piccole migliorie responsive */
@media (max-width: 768px) {
  .grid-macchine {
    gap: 0.5rem;
  }
  .macchina-card {
    max-width: 200px;
  }
    .archive-macchine .macchina-card {
        max-width: 300px;

    }
}
/* Header */
.site-header {
    background: var(--color-white);
    width: 90%;
    margin: 10px 5%;
    position: fixed;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 50px;
    justify-content: space-between;
    align-items: center;
    z-index: 9999999;
    display: flex;
}
.header-inner{
       display: flex;
           justify-content: space-between;
      align-items: center;
}
 nav a {
      margin: 0 10px;
      text-decoration: none;
      color: var(--color-primary);
      font-weight: bold;
          line-height: 50px;
    display: inline-block;
    padding: 0 5px;
    }
     nav a:hover {
     background: var(--color-primary);
     color: var(--color-white);
    }

.site-nav .nav-list {
  color: var(--color-white);
  background: var(--color-white);
  border: 2px solid var(--color-primary);
}
.site-nav .nav-list li a:hover {
  background: var(--color-primary);
  color: var(--color-white);
}
.header-extras .phone a,
.lang-switcher a {
  color: var(--color-white);
}
.btn {
      background: white;
      color: #00205B;
      padding: 10px 20px;
      margin-top: 10px;
      display: inline-block;
      border-radius: 30px;
      text-decoration: none;
      border: 2px solid var(--color-primary);
      font-size:30px;
    }
    .btn:hover {
      background: #00205B;
      color: #fff;
      padding: 10px 20px;
      margin-top: 10px;
      display: inline-block;
      border-radius: 30px;
      text-decoration: none;
      border: 2px solid #fff;
      font-size:30px;
    }
/* HERO responsive */
.hero{
  position: relative;
  min-height: clamp(420px, 60vh, 780px);
  overflow: hidden;
}
.hero-slide{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(16px, 4vw, 56px);
  color: var(--color-white);
  text-align: right;
  opacity: 0;
  transition: opacity .8s ease-in-out;
}
.hero-slide.active{ opacity: 1; }
.hero-slide::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.hero-slide > div{
  position: relative;
  max-width: min(800px, 90vw);
}
.hero-slide h1{
  margin: 0 0 clamp(12px, 2.2vw, 20px);
  font-size: clamp(28px, 4.5vw, 72px);
  line-height: 1.1;
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
  white-space: pre-line;
}
.hero-slide .btn{
  font-size: clamp(16px, 1.8vw, 22px);
  padding: clamp(10px, 1.2vw, 14px) clamp(18px, 2vw, 28px);
  border-radius: 999px;
  border: 2px solid var(--color-primary);
  background: var(--color-white);
  color: var(--color-primary);
}
.hero-slide .btn:hover{
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-white);
}
@media (max-width: 768px){
  .hero-slide{
    justify-content: center;
    text-align: center;
  }
  .hero-slide::before{
    background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.1) 100%);
  }
  .hero-slide > div{ max-width: 92vw; }
}

/* Intro */
.intro {
  background: var(--color-white);
}
.intro-text h2 {
  color: var(--color-primary);
  font-size:30px;
}

/* Parco Macchine */
.parco-macchine {
      flex: 0 0 200px;
      overflow: hidden;
      text-align: center;

      width:100%;
      padding:10px;
}
.parco-macchine h2 {
  color: var(--color-primary);
}
.macchina-card h3 {
  color: var(--color-primary);
}

.macchina-card img{
    border-radius: 20px;
    border: 3px solid #00205B;
    width:100%;
    margin-bottom:10px;
}

/* Ensure images inside card scale correctly for macchine slider */
#macchine-splide .macchina-card img{ width: 100%; height: auto; display: block; }
.macchina-card a{
    text-decoration:none;
    color:#00205B;
   font-size:20px;
   min-width:160px;
}
.spazio{
    height:100px;
}
.btn-outline-primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-outline-primary:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* CONTACT / FOOTER responsive cleanup */
.contact{
  background: var(--color-primary);
  color: var(--color-white);
  display:flex; flex-wrap:wrap; justify-content:space-between;
  gap: 20px;
  padding: clamp(24px, 5vw, 48px) 20px;
}

/* Override inline paddings/borders safely */
.contact-form, .map{
  flex:1; min-width: 280px;
  padding: clamp(24px, 4.5vw, 60px) !important;
  text-align:center !important;
}

/* Typography responsive for footer titles */
.titolo-fotter{ font-size: clamp(22px, 3.2vw, 32px); }

/* Inputs full-width and readable */
.contact-form input{
  width: 100%; max-width: 520px; margin: 10px auto;
  padding: 12px 14px; border-radius: 30px; border: 2px solid var(--color-white);
  background: var(--color-white); color: var(--color-primary);
}
.contact-form input::placeholder{ color: rgba(0,0,0,.55); }
.contact-form button{
  background: var(--color-white); color: var(--color-primary);
  padding: 12px 22px; border: 2px solid var(--color-white); border-radius: 30px; cursor:pointer;
  font-weight:700;
}
.contact-form button:hover{
  background: transparent; color: var(--color-white); border-color: var(--color-white);
}

/* Map iframe responsive corners */
.map iframe{ border-radius: 30px !important; height: 380px; }

/* MOBILE: stack columns, swap border, tighten paddings */
@media (max-width: 768px){
  .contact{ padding: 20px 16px; }
  .contact-form{
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.35) !important;
    padding-bottom: 28px !important;
  }
  .map{ padding-top: 24px !important; }
  .map iframe{ height: 300px; border-radius: 20px !important; }
}

/* DESKTOP: keep the divider between columns */
@media (min-width: 992px){
  .contact-form{ border-right: 1px solid rgba(255,255,255,.35) !important; }
}

.titolo-footer{
    font-size:27px;
}
footer {
  background: #001B44;
  color: white;
  text-align: center;
  padding: 20px;
  font-size: 0.9em;
}
    .section-intro-contenitore{
        background: #001B44;

    margin-bottom: 100px;
    }
    .section-intro {
    padding: 0px 20px;
    background-color: #F5F6FA;
    display: flex
;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    border: 4px solid #001B44;
    border-radius: 40px;
    margin: 0 auto;
    top: 80px;
    position: relative;
    }
    .escavatore{
            position: absolute;
    height: 700px;
    top: -250px;
    right: -13px;
    }
    .section-intro .text {
      flex: 1;
      min-width: 300px;
      padding: 20px;
    }
    .section-intro .text h2 {
      color: #00205B;
      margin-bottom: 20px;
      font-size:30px;
    }
    .section-intro .image {
      flex: 1;
      min-width: 300px;
      text-align: center;
    }
    .section-intro .image img {
      max-width: 100%;
    }

/* Scrollbar orizzontale (se ti serve) */
.grid-macchine {
  scrollbar-width: thin;
}
.grid-macchine::-webkit-scrollbar {
  height: 8px;
}
.grid-macchine::-webkit-scrollbar-thumb {
  background: var(--color-secondary);
  border-radius: var(--br);
}
/* SLIDER */
.slider {
  background: var(--color-white);
}
.carousel-caption {
  background: rgba(31,41,107, 0.6); /* --color-primary con trasparenza */
  padding: 1rem;
  border-radius: var(--br);
}
.carousel-caption h5 {
  color: var(--color-secondary);
  font-size: 1.5rem;
  font-weight: 700;
}
.carousel-caption p {
  color: var(--color-white);
}


.main-content {
  flex: 1;
  min-width: 300px;
}

.main-img {
  width: 100%;
  border: 3px solid #26368b;
  border-radius: 24px;
}

.details {
  flex: 1;
  min-width: 250px;
}

h2 {
  font-size: 24px;
  line-height: 1.3;
}

.highlight {
  font-weight: bold;
  color: #26368b;
  border-bottom: 2px solid #26368b;
  display: inline-block;
  margin-top: 5px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin-top: 20px;
  margin-bottom: 30px;
  line-height: 1.6;
}

.contact-box {
  padding: 16px;
  border-radius: 20px;
  text-align: center;
}

.phone-button {
  display: inline-block;
  margin-top: 10px;
  background-color: transparent;
  border: none;
  color: #26368b;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
}

/* SINGLE MACCHINA – layout responsive */
@media (max-width: 992px){
  .main-content{ width: 100%; }
  .gallery{ margin: 12px 0; }
  .details{ width: 100%; max-width: 680px; margin-top: 12px; }
}
@media (max-width: 992px){
  .gallery{
    max-height: none;
    overflow-y: hidden;     /* no vertical scroll */
    overflow-x: auto;       /* horizontal scroll */
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 6px 4px;
    gap: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .gallery .thumb{
    width: 72px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* MAIN IMAGE */
.main-content .main-img{
  max-width: 600px;
  width: 100%;
  height: auto;
  border-radius: 20px;
}
/* DETTAGLI */
.details{
  max-width: 300px;
}
.details h2 .highlight{ color:#522583; }  /* viola */
.phone-button{
  display:inline-block;
  margin-top:10px;
  padding:10px 20px;
  background:#E84E0F;
  color:#fff;
  text-decoration:none;
  border-radius:4px;
}
/* Su mobile rendiamo le caption sempre visibili */
@media (max-width: 768px) {
  .carousel-caption {
    display: block;
    position: static;
    background: var(--color-primary);
    margin-top: -4rem;
  }
}

.titolo-fotter{
    font-size:35px;
}
.site-header {
    background: var(--color-white);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.site-header a {
    color: var(--color-primary);
    text-decoration: none;
}

/* Contenitore header */
.header-inner{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:8px 12px;
}

/* NAV: mobile-first */
.site-nav{ position:relative; }
.site-nav .nav-list{
    list-style:none; margin:0; padding:0;
    display:none; /* chiuso su mobile */
    position:absolute; top:100%; left:50%; transform: translateX(-50%);
    z-index:1000; text-align:center;
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    min-width: 230px; border-radius: 0 0 calc(var(--br) * 2) calc(var(--br) * 2);
    overflow:hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.site-nav.is-open .nav-list{ display:block; }
.site-nav .nav-list li{ border-bottom:1px solid rgba(255,255,255,.08); }
.site-nav .nav-list li:last-child{ border-bottom:none; }

/* Link menu */
.site-nav .nav-list li a,
nav a{
    display:block;
    padding:12px 16px;
    line-height: 1.3;
    font-weight:bold;
    color: var(--color-primary);
}

/* Pulsante hamburger */
.nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius: var(--br);
    border:1px solid currentColor;
    color: var(--color-primary);
    background:transparent; cursor:pointer;
}
.nav-toggle:focus-visible{ outline:3px solid var(--color-secondary); outline-offset:2px; }
.nav-toggle .bar{
    width:22px; height:2px; background: currentColor; display:block; position:relative;
}
.nav-toggle .bar::before,
.nav-toggle .bar::after{
    content:""; position:absolute; left:0; width:22px; height:2px; background: currentColor;
    transition: transform .2s ease, top .2s ease, opacity .2s ease;
}
.nav-toggle .bar::before{ top: -6px; }
.nav-toggle .bar::after{  top:  6px; }
/* Varianti rapide
.nav-toggle .bar, .nav-toggle .bar::before, .nav-toggle .bar::after{ height:3px; }
.nav-toggle .bar::before{ top:-7px; }
.nav-toggle .bar::after{  top: 7px; }
*/
.site-nav.is-open + .nav-toggle .bar{ background:transparent; }
.site-nav.is-open + .nav-toggle .bar::before{ top:0; transform: rotate(45deg); }
.site-nav.is-open + .nav-toggle .bar::after{  top:0; transform: rotate(-45deg); }

/* Extras (lingue/telefono) */
.header-extras a{ color: var(--color-primary); font-weight:600; }
.header-extras .sep{ opacity:.7; margin:0 6px; }

/* Desktop ≥ 992px */
.image-escavatore{ display:none; }
@media (min-width: 992px){
    .site-nav .nav-list{
        display:flex !important; position:static; flex-direction:row; gap:6px;
        transform:none; left:auto; text-align:left;
        background:transparent; box-shadow:none; min-width:unset; border-radius:0;
        margin-top:0px;
        border: none;
    }
    .site-nav .nav-list li{ border:0; }
    .site-nav .nav-list li a{ padding:10px 12px;  }
    .nav-toggle{ display:none; }
    .header-inner{ padding:12px 20px; }
    .image-escavatore{ display:block; }
}
nav a.active {
    background:#1f296b;
    color:#fff !important;
}

/* GALLERY THUMBS */
.gallery .thumb{
  width: 100px;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border .2s;
}
.gallery .thumb:hover,
.gallery .thumb.active{
  border-color: var(--color-secondary);
}

/* --- Single Macchina: mobile gallery horizontal (strong override) --- */
@media (max-width: 992px){
  body.single-macchina .gallery{
    max-height: none !important;
    overflow-y: hidden !important;
    overflow-x: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    width: 100%;
    padding: 6px 4px;
    gap: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  body.single-macchina .gallery .thumb{
    width: 72px;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}
.spazio-top{
    height:250px;
}
/* === Fix mobile layout for single macchina === */
@media (max-width: 768px){
    .spazio-top{
        height:150px;
    }
  /* Stack blocks and allow full width */
  body.single .container-no-flex{ display:block !important; }
  body.single .main-content{ width:100% !important; margin:0 0 12px 0; }
  body.single .details{ width:100% !important; max-width:none !important; }

  /* Gallery strictly horizontal scroll */
  body.single .gallery{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    width:100% !important;
    max-height:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:6px 4px !important;
    gap:8px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  body.single .gallery .thumb{
    width:72px !important;
    height:auto !important;
    flex:0 0 auto !important;
    scroll-snap-align:start;
  }

  /* Main image full width */
  body.single .main-img{ max-width:100% !important; height:auto !important; }
}