@charset "UTF-8";
/* CSS Document */

body {
      font-family: "Taviraj", serif;
    }

    /* LOGO BAR */
    .logo-bar {
      background-color: #fff;
      border-bottom: 1px solid #e0e0e0;
      text-align: center;
      padding: 5px 0;
    }

    .logo-bar  {
      color: #0066cc;
      margin: 0 10px;
    }

    .header-social-desk {
      font-size: 25px;
      color: #fff;
      margin: 10px 10px;
		padding: 10px;
    }

/* forza visibilità su mobile */
@media (max-width: 991.98px){
  .header-social-desk{ 
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


    .search-toggle {
      cursor: pointer;
      color: #fff;
		font-size: 25px;
		padding: 10px;
    }

    .logo-bar .form-control {
      max-width: 200px;
      font-size: 14px;
    }

    /* NAVBAR */
    .custom-navbar {
      background-color: #fff;
      border-bottom: 1px solid #e0e0e0;
      z-index: 1030;
    }

    .navbar-nav .nav-link {
      color: #333 !important;
      font-size: 16px;
		text-transform: uppercase;
		font-weight: 400;
    }

    .navbar-nav .nav-link:hover {
      color: #0066cc !important;
      font-weight: 500;
    }

    .navbar-nav .dropdown-menu {
      background: #fff;
      font-size: 14px;
      line-height: 22px;
      border: none;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

.dropdown-item-new {
  display: block;
  width: 100%;
  padding: .25rem 1rem;
  clear: both;
  font-weight: 300;
  color: #333 !important;
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item-new:hover {
  color: #0066cc !important;
	font-weight: 400;
}

    .dropdown-menu .dropdown-item {
      color: #333 !important;
    }

    .dropdown-menu .dropdown-item:hover {
      color: #0066cc;
      background-color: #f8f8f8;
    }

    .nav-item.dropdown:hover .dropdown-menu {
      display: block;
    }

    .navbar-toggler {
      background: none;
      border: none;
      color: #333;
    }

   .navbar-toggler:hover {
      background: none;
      border: none;
      color: #0066cc;
    }

    .logo-mobile {
      width: 250px;
    }





/* HOME SEARCH HEADER */
  .search-box {
    width: 0;
    overflow: hidden;
    transition: width 0.3s ease;
  }

  .search-box.expanded {
    width: 200px;
  }

  .search-box input {
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
  }

  .search-box.expanded input {
    opacity: 1;
  }

/* Ancoriamo il form e posizioniamo il box sotto */
form[data-form="validate"] {
  position: relative;                 /* ancora per l'assoluto */
  display: inline-flex;
  align-items: center;
}

/* La label .search-box “galleggia” SOTTO il form, allineata alla lente a destra */
form[data-form="validate"] .search-box {
  position: absolute;
  top: calc(100% + 8px);              /* sotto il form (quindi sotto la lente) */
  right: 0;                           /* allineato al lato destro, vicino all’icona */
  z-index: 1080;
  overflow: visible;
  width: auto;                        /* evita il “quadratino” */
}

/* Larghezza comoda dell’input quando visibile */
form[data-form="validate"] .search-input {
  width: 320px;                       /* regola a piacere: 320/380/420px */
}

/* Se nel tuo progetto avevi queste regole, disattivale per questa istanza */
form[data-form="validate"] .search-box { transition: none; }
form[data-form="validate"] .search-box input { opacity: 1; transition: none; }

/* FINE HOME SEARCH HEADER */





    /* MOBILE MENU */
    .mobile-menu {
      position: fixed;
      top: 0;
      left: -100%;
      height: 100%;
      width: 250px;
      background: #fff;
      z-index: 1050;
      transition: left 0.3s ease-in-out;
      padding: 70px 20px 20px;
      border-right: 1px solid #e0e0e0;
	   text-transform: uppercase;
		font-size: 14px;
    }

    .mobile-menu ul li {
      padding: 10px 0;
      border-bottom: 1px solid #e0e0e0;
    }



    .mobile-menu ul li a {
      color: #333;
      font-size: 14px;
      display: block;
      text-decoration: none;
    }

.active-mobile-menu {
	color: #0066cc !important;
}


.link-mobile-menu {
	color: #333 !important;
}


    .has-submenu > .submenu-toggle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
    }

    .submenu-toggle i {
      margin-left: 10px;
    }

    .has-submenu ul.submenu {
      display: none;
      padding-left: 15px;
    }

    .has-submenu.open ul.submenu {
      display: block;
		border-bottom: none !important;
    }

    .submenu a {
      font-size: 12px;
      line-height: 18px;
	   text-transform: none;
    }

    .mobile-search-box {
      display: none;
    }






/* INIZIO MEDIA QUERY PER IMPOSTAZIONE VISUALIZZAZIONE  */

/* ====== MOBILE/TABLET: fino a 1199.98px (qualsiasi orientamento) ====== */
@media screen and (max-width: 1199.98px) {
  /* Nascondi la top logo-bar desktop */
  .logo-bar { 
    display: none !important; 
  }

  /* Mostra gli elementi mobile */
  .navbar-brand,
  .navbar-toggler,
  .search-toggle {
    display: block !important;
  }

  /* Nascondi il menu desktop esteso */
  .collapse.navbar-collapse {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Se hai icone “desktop” nella logo-bar */
  .header-social-desk { 
    display: none !important; 
  }

  /* Su mobile usa SOLO il box mobile: nascondi il box desktop */
  form[data-form="validate"] .search-box {
    display: none !important;
  }

  /* (facoltativo) se la lente è dentro header-social-desk, rendila visibile */
  .header-social-desk.search-toggle {
    display: inline-block !important;
  }
}

/* ====== DESKTOP: da 1200px in su ====== */
@media screen and (min-width: 1200px) {
  /* Mostra la top logo-bar */
  .logo-bar { 
    display: block !important; 
  }

  /* Nascondi elementi tipicamente “mobile” */
  .navbar-toggler { 
    display: none !important; 
  }

  /* Mostra il menu desktop esteso */
  .collapse.navbar-collapse {
    display: flex !important;   /* o block in base al tuo markup */
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* === SEARCH DESKTOP: box chiuso di default, si apre SOTTO la lente === */
  form[data-form="validate"] {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  /* Chiusa di default */
  form[data-form="validate"] .search-box {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1080;
    display: none;          /* <-- chiuso al load */
    overflow: visible;
    width: auto;

    /* aspetto “card” */
    background: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .5rem;
    padding: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  }

  /* Aperta quando aggiungiamo .open */
  form[data-form="validate"] .search-box.open {
    display: block;
  }

  /* Larghezza comoda dell'input */
  form[data-form="validate"] .search-input {
    width: 320px;
  }
}

/* FINE MEDIA QUERY PER IMPOSTAZIONE VISUALIZZAZIONE */










/* INIZIO CSS PER FAR VEDERE IL MENU IN FORMATO DESK ANCHE SUL PORTATILE 1440X900 */


/* ===== DESKTOP ≥1200px: pulizia seconda riga ===== */
@media screen and (min-width: 1200px) {
  /* Nascondi le versioni "mobile" DENTRO la NAVBAR (seconda riga) */
  .navbar .navbar-brand,
  .navbar .search-toggle,
  .navbar .header-social-desk {           /* se per caso avevi social anche qui */
    display: none !important;
  }

  /* Se il logo nella navbar è un'img tipo .logo-mobile, chiudilo del tutto */
  .navbar .logo-mobile {
    display: none !important;
  }

  /* Evita che restino spazi/altezza residui nella navbar */
  .navbar .navbar-brand img,
  .navbar .search-toggle,
  .navbar .header-social-desk {
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  /* Il menu desktop resta aperto e visibile */
  .navbar .collapse.navbar-collapse {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* In logo-bar invece le icone restano visibili e bianche */
  .logo-bar .search-toggle,
  .logo-bar .header-social-desk {
    display: inline-flex !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}


/* ==== FIX FINALE: DESKTOP (≥1200px) ==== */
@media screen and (min-width: 1200px) {
  /* 1) PRIMA RIGA (logo-bar): visibile, su una riga, icone a destra bianche */
  .logo-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: .5rem !important;
    flex-wrap: nowrap !important;
  }
  .logo-bar > * { min-width: 0 !important; }

  /* Logo non esagerato per far entrare tutto */
  .logo-bar img,
  .logo-bar .logo img {
    max-height: clamp(40px, 5vw, 56px) !important;
    height: auto !important;
    width: auto !important;
  }

  /* Mostra lente + social SOLO nella logo-bar */
  .logo-bar .search-toggle,
  .logo-bar .header-social-desk {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    color: #fff !important; /* ← torna bianco */
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 22px !important;
    padding: 6px !important;
    margin: 4px !important;
  }

  /* (Se avevi messo il colore grigio in precedenza, questo lo annulla) */
  /* .logo-bar .search-toggle,
     .logo-bar .header-social-desk { color: #333 !important; }  ← NON usare */

  /* 2) SECONDA RIGA (navbar): SOLO menu esteso, niente brand/lente/social */
  .navbar .navbar-brand,
  .navbar .logo-mobile,
  .navbar .search-toggle,
  .navbar .header-social-desk {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  .navbar,
  .navbar .collapse.navbar-collapse {
    width: 100% !important;
    max-width: 100% !important;
  }

  .navbar .collapse.navbar-collapse {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .navbar > .container,
  .navbar > .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Distribuzione voci menu */
  .navbar .navbar-nav {
    flex: 1 1 100% !important;
    justify-content: center !important; /* usa space-between/left se preferisci */
  }

  /* Assicura che il menu mobile non interferisca su desktop */
  .mobile-menu { left: -100% !important; }
}

/* ==== MOBILE/TABLET (≤1199.98px) — nulla cambia rispetto alla tua logica ==== */
@media screen and (max-width: 1199.98px) {
  .logo-bar { display: none !important; }

  .navbar-brand,
  .navbar-toggler,
  .search-toggle { display: block !important; }

  .collapse.navbar-collapse {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .header-social-desk { display: none !important; }

  /* su mobile usa solo box mobile per la ricerca */
  form[data-form="validate"] .search-box { display: none !important; }
}



/* FINE CSS PER FAR VEDERE IL MENU IN FORMATO DESK ANCHE SUL PORTATILE 1440X900 */