/* ==========================================================================
   Xaras - Layout fix (footer)
   File: css/responsive-fix.css   ->  va caricato DOPO style.css
   v4 - Minimale. Nessun flex, nessuna regola globale.
        Non tocca Owl Carousel, NiceScroll, menu, header.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) LA FASCIA BIANCA SOTTO IL FOOTER
      style.css:589-590 -> .hero-slides .single-hero-slide { height: 700px }

      Il template Sonar aveva altre sezioni sotto lo slider, quindi 700px fissi
      andavano bene. Qui la pagina ha SOLO slider + footer: su una finestra alta
      1200px avanzano ~500px di bianco e il footer resta a mezz'aria.

      Fix: le slide sono alte quanto la finestra MENO la barra del footer
      (90px = 30px padding + 30px riga di testo + 30px padding).
      Slider + footer = esattamente 100vh -> il footer finisce sul bordo
      inferiore a qualsiasi risoluzione, senza toccare il layout del carosello.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
  .hero-slides .single-hero-slide {
    /* 118px = altezza barra footer (padding 60 + riga copyright 30 + riga link servizi 28) */
    height: -webkit-calc(100vh - 118px);
    height: calc(100vh - 118px);
    min-height: 600px;   /* finestre molto basse: non schiaccia le slide */
  }
}

/* Sotto i 768px si tiene l'altezza del template (550px): su smartphone 100vh
   e' inaffidabile, la barra indirizzi che compare/scompare fa saltare il
   layout. E li' la pagina scrolla comunque, quindi la fascia bianca non c'e'. */

/* --------------------------------------------------------------------------
   2) FOOTER - mai piu' largo della finestra, testo che va a capo
   -------------------------------------------------------------------------- */
.footer-area {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.footer-area .copywrite-text {
  padding: 30px 15px;   /* prima: 30px fissi su 4 lati */
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.footer-area .copywrite-text p {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media only screen and (max-width: 767px) {
  .footer-area .copywrite-text {
    padding: 20px 15px;
  }
  .footer-area .copywrite-text p,
  .footer-area .copywrite-text a {
    font-size: 13px;
    line-height: 1.9;
  }
}

/* --------------------------------------------------------------------------
   3) SCROLL ORIZZONTALE SU MOBILE - style.css:493-498
      .mainMenu { position:fixed; width:480px; right:-500px }
      Il menu off-canvas e' parcheggiato 500px oltre il bordo destro con un
      offset geometrico: su Safari iOS / WebView Android quel box entra
      nell'area scrollabile e allarga il documento.
      Fix: resta a right:0 e va fuori schermo con una transform, che non
      genera overflow di layout. Stessa animazione, stessa durata (800ms).
   -------------------------------------------------------------------------- */
.mainMenu {
  right: 0;
  max-width: 100%;
  -webkit-transform: translateX(110%);
      -ms-transform: translateX(110%);
          transform: translateX(110%);
  -webkit-transition: -webkit-transform 800ms ease;
          transition: transform 800ms ease;
}

.menu-open .mainMenu {
  right: 0;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

html {
  overflow-x: hidden;
}

/* ===== SEO / Accessibilità — aggiunte (non modificano il layout esistente) ===== */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Link ai servizi nel footer */
.footer-nav {
    margin-bottom: 8px;
}
.footer-nav a {
    color: #b5b5b5;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 8px;
    text-decoration: none;
    transition: color .3s;
}
.footer-nav a:hover,
.footer-nav a:focus {
    color: #dc3545;
}

/* Pagine servizio interne */
.service-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 15px 80px;
}
.service-page .service-inner {
    max-width: 720px;
}
.service-page .breadcrumb-nav {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8d8d8d;
    margin-bottom: 22px;
}
.service-page .breadcrumb-nav a {
    color: #b5b5b5;
    text-decoration: none;
}
.service-page .breadcrumb-nav a:hover {
    color: #dc3545;
}
.service-page h1 {
    color: #fff;
    font-size: 42px;
    margin-bottom: 18px;
}
.service-page p {
    color: #c7c7c7;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 12px;
}
.service-page .service-cta {
    display: inline-block;
    margin-top: 26px;
    padding: 14px 38px;
    background-color: #dc3545;
    color: #fff;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: background-color .3s;
}
.service-page .service-cta:hover,
.service-page .service-cta:focus {
    background-color: #b02a37;
    color: #fff;
}
.service-page .other-services {
    margin-top: 40px;
    font-size: 13px;
}
.service-page .other-services a {
    color: #b5b5b5;
    margin: 0 8px;
    text-decoration: none;
}
.service-page .other-services a:hover {
    color: #dc3545;
}