/* ============================================================================
   responsive.css  —  Adattamento mobile/tablet del sito Falkem Swiss
   ----------------------------------------------------------------------------
   Caricato DOPO style.css. Contiene quasi solo override dentro @media query,
   così il layout desktop (larghezza > 1000px) resta IDENTICO all'originale.
   Breakpoint:
     <= 1000px  -> contenitori fluidi (niente scroll orizzontale)
     <=  768px  -> tablet: le colonne affiancate iniziano a impilarsi
     <=  600px  -> smartphone: tutto a colonna singola, menu impilato
   ============================================================================ */

/* --- Regole di base sicure anche su desktop --- */
img { max-width: 100%; height: auto; }
html { overflow-x: clip; }
body { overflow-x: visible; }


/* ===========================================================================
   <= 1000px : rendi fluidi tutti i contenitori a larghezza fissa 980px
   =========================================================================== */
@media (max-width: 1000px) {
  .contain,
  #header, .hdr_main,
  #navigation,
  #banner, #banner_inner,
  #body,
  #welcome,
  #footer, .footer_main {
    width: 100% !important;
    max-width: 980px;
    box-sizing: border-box;
  }
  .contain {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  /* Slider della home: i <li> di bjqs restano larghi 980px e lo slider gestisce
     una "pista" scorrevole. Sotto i 1000px non ne forziamo la geometria (genera
     glitch): lo riduciamo a UN solo slide statico — il primo (citazione William
     Tell) — nascondendo gli altri slide e i controlli. */
  #container { width: 100% !important; }
  #banner { height: auto !important; }
  #banner-slide { width: 100% !important; height: auto !important; overflow: visible !important; }
  ul.bjqs {
    width: 100% !important; height: auto !important;
    left: 0 !important; position: static !important;
  }
  ul.bjqs > li { display: none !important; }
  ul.bjqs > li.slide1 {           /* mostra il primo slide… */
    display: block !important;
    float: none !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 200px;
  }
  ul.bjqs > li.slide1 ~ li.slide1 { display: none !important; } /* …ma non il suo clone */
  .bjqs-markers, .bjqs-controls,
  a.bjqs-next, a.bjqs-prev { display: none !important; }
  .banner_img {
    width: 100% !important;
    height: 200px !important;
    position: relative;
    background-position: right bottom;
    background-size: contain;
  }
}


/* ===========================================================================
   <= 768px : TABLET — inizia l'impilamento delle colonne
   =========================================================================== */
@media (max-width: 768px) {

  /* ---- Header: logo a sinistra, login a destra, su una riga ordinata ---- */
  .logo_main { margin-left: 0; }

  /* ---- Navigazione: menu a tutta larghezza, voci centrate; telefono sotto ---- */
  .nav_menu {
    float: none;
    width: 100%;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .nav_menu ul { display: inline-block; }
  .nav_li {
    float: none;
    display: inline-block;
    padding: 6px 14px;
  }
  .call_main {
    float: none;
    display: block;
    text-align: center;
    background-position: left center;
    padding: 0 0 14px 0;
    margin: 0;
  }

  /* ---- HOME: servizi e prodotti uno sotto l'altro, a tutta larghezza ---- */
  .our_services_main,
  .our_products_main {
    float: none;
    width: 100% !important;
    margin: 0 0 24px 0;
  }
  .services_hdng { width: 100%; box-sizing: border-box; }
  .services_row1 { width: 100%; }
  .servicesOur {
    width: 50%;
    box-sizing: border-box;
    padding-right: 10px;
  }
  .servicesOur[style] { padding-left: 0 !important; } /* annulla padding inline */
  .services111_box_main,
  .services1_box_main,
  .product1_box_main {
    width: auto;
    float: none;
    height: auto !important;   /* niente altezze fisse: il testo respira */
  }
  .newBox { height: auto !important; }

  /* ---- BANNER HOME (slider): bjqs scala in proporzione; sistemiamo il contenuto ---- */
  .slide1, .slide2, .slide3 {
    background-size: cover !important;
    background-position: center center !important;
  }
  .banner_img {
    background-position: right bottom;
    background-size: contain;
  }
  .banner_txt_main {
    float: none;
    margin: 0;
    position: absolute;
    right: 12px;
    bottom: 14px;
    max-width: 70%;
  }
  .banner_txt1, .banner_txt2 { width: auto; }
  .bnnr3_box {
    float: none;
    width: auto;
    max-width: 90%;
    margin-top: 60px;
    padding-left: 24px;
  }
  .slideHead { margin-top: 0; font-size: 26px; }

  /* ---- BANNER pagine interne: titolo sopra, immagine sotto ---- */
  #banner_inner { height: auto; }
  .banner_hdng {
    float: none;
    width: 100%;
    line-height: 1.2;
    padding: 24px 0 8px 0;
    font-size: 30px;
    box-sizing: border-box;
  }
  .banner_small_img {
    float: none;
    width: 100%;
    text-align: center;
  }

  /* ---- Pagine SERVIZI / PRODOTTI: box a metà larghezza ---- */
  .inner_body_main,
  .inner_services_main,
  .line {
    width: 100% !important;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
  }
  .services1 {
    width: 50%;
    box-sizing: border-box;
    margin-right: 0;
    padding-right: 12px;
    margin-bottom: 16px;
  }
  .services1_box_main,
  .product1_box_main { width: auto; height: auto !important; }
  .contactListLink { position: static; text-align: left; padding-top: 12px; }

  /* ---- Testo "chi siamo" ---- */
  .inner_about_txt { width: 100%; }

  /* ---- FOOTER: due colonne diventano una ---- */
  .footer_left,
  .footer_right {
    float: none;
    width: 100% !important;
    margin: 0 0 20px 0;
    box-sizing: border-box;
  }
  .ftr_navigation { width: 100%; box-sizing: border-box; }
  .ftr_li {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 8px;
  }
  .email_us_main { width: 100%; }
  .email_main, .copyright_main, .find_out_main { width: 100%; box-sizing: border-box; }
  .footer_middle { float: none; margin: 16px 0; }
  .toll_free_main, .company_name, .company_add { width: 100%; }
}


/* ===========================================================================
   <= 600px : SMARTPHONE — colonna singola dappertutto
   =========================================================================== */
@media (max-width: 600px) {

  /* Header impilato e centrato */
  .hdr_main { text-align: center; }
  .logo_main { float: none; display: inline-block; margin: 10px auto; }
  .search { float: none; display: inline-flex; justify-content: center; width: auto; margin: 0 auto 10px; }

  /* Box servizi/prodotti a tutta larghezza (una colonna) */
  .servicesOur,
  .services1 {
    width: 100%;
    padding-right: 0;
  }

  /* Banner home: testo un filo più compatto */
  .banner_txt_main { max-width: 85%; }
  .bnnr3_box { margin-top: 40px; }
  .slideHead { font-size: 22px; }

  /* Banner interno titolo più compatto */
  .banner_hdng { font-size: 24px; padding-top: 18px; }

  /* Menu: voci un filo più compatte */
  .nav_li { padding: 6px 10px; font-size: 15px; }
}