/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 19 2026 | 12:17:38 */
/* ==========================================================================
   CONTE MANGESA — HEADER
   Snippet:   cm-header  (CSS)  — versione 2 (widget gratuiti UAE)
              lavora insieme a cm-header-scroll (JS)
   Dove:      Custom CSS & JS → Frontend → Header → File esterno
   Struttura in Elementor (UAE → Intestazione e piè di pagina → "cm-header"):
     Contenitore (larghezza piena) ............ classe  cm-header
       ├── Immagine (logo intero) ............. classe  cm-header__logo
       └── Navigation Menu (widget UAE) ....... classe  cm-header__menu
   Nota: i selettori del menu sono lunghi di proposito, per battere
   lo stile di default del widget UAE.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. BARRA
   Fissa in alto, trasparente sopra le immagini.
   Diventa nera quando si scorre (classe aggiunta dal JS cm-header-scroll).
   -------------------------------------------------------------------------- */
.elementor .e-con.cm-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  z-index: 999;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--cm-space-lg);
  padding: 28px var(--cm-gutter);
  background-color: transparent;
  transition:
    background-color var(--cm-transition),
    padding var(--cm-transition),
    box-shadow var(--cm-transition);
}

/* Barra nera: dopo lo scorrimento, oppure quando il menu mobile è aperto */
.elementor .e-con.cm-header.cm-header--scrolled,
.elementor .e-con.cm-header:has(.hfe-nav-menu__toggle.hfe-active-menu) {
  background-color: var(--cm-black);
  padding-top: 16px;
  padding-bottom: 16px;
  box-shadow: 0 1px 0 var(--cm-white-line);
}

/* Quando sei loggato, la barra nera di WordPress sta sopra: spostiamo l'header */
body.admin-bar .elementor .e-con.cm-header {
  top: 32px;
}

/* Dentro l'editor di Elementor l'header non resta fisso, per poterlo modificare */
body.elementor-editor-active .elementor .e-con.cm-header {
  position: relative;
  top: 0;
}

/* I link alle àncore (es. #extra-dry) si fermano sotto l'header, non dietro */
html {
  scroll-padding-top: 100px;
}


/* --------------------------------------------------------------------------
   2. LOGO
   -------------------------------------------------------------------------- */
.elementor .cm-header__logo img {
  display: block;
  width: auto;
  max-width: none;
  height: 88px;                                 /* altezza logo desktop */
  transition: height var(--cm-transition);
}

.elementor .cm-header--scrolled .cm-header__logo img {
  height: 60px;                                 /* altezza logo dopo lo scorrimento */
}


/* --------------------------------------------------------------------------
   3. MENU — VOCI PRINCIPALI
   -------------------------------------------------------------------------- */
.elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu .menu-item a.hfe-menu-item {
  font-family: var(--cm-font-display);
  font-size: 20px;                              /* grandezza voci menu desktop */
  font-weight: 600;                             /* spessore voci menu */
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cm-white);
  background-color: transparent;
  padding: 8px 0;
  transition:
    color var(--cm-transition),
    background-size var(--cm-transition);
}

/* Hover e pagina corrente: voce oro */
.elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu .menu-item a.hfe-menu-item:hover,
.elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu .menu-item a.hfe-menu-item:focus,
.elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu li.current-menu-item > a.hfe-menu-item,
.elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu li.current-menu-ancestor > .hfe-has-submenu-container > a.hfe-menu-item,
.elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu li.menu-item-has-children:hover > .hfe-has-submenu-container > a.hfe-menu-item {
  color: var(--cm-gold);
}

/* Freccina di "I Vini" */
.elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu .sub-arrow {
  color: inherit;
  border-color: transparent;
  margin-left: 6px;
  padding: 0;
}


/* --------------------------------------------------------------------------
   4. MENU — SOLO DESKTOP (oltre 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {

  /* Spazio tra le voci */
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu__layout-horizontal > ul.hfe-nav-menu {
    gap: 40px;                                  /* spazio tra le voci */
  }

  /* Linea oro sotto la voce, parte da larghezza 0 */
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu .menu-item a.hfe-menu-item {
    background-image: linear-gradient(var(--cm-gold), var(--cm-gold));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 1.5px;
  }

  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu .menu-item a.hfe-menu-item:hover,
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu li.current-menu-item > a.hfe-menu-item,
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu li.current-menu-ancestor > .hfe-has-submenu-container > a.hfe-menu-item,
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu li.menu-item-has-children:hover > .hfe-has-submenu-container > a.hfe-menu-item {
    background-size: 100% 1.5px;
  }

  /* Tendina "I Vini": nera con bordo oro sottile */
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu .sub-menu {
    width: auto;
    min-width: 230px;
    padding: 8px 0;
    background-color: var(--cm-black);
    border: 1px solid var(--cm-gold-subtle);
    border-radius: var(--cm-radius-sm);
    box-shadow: none;
  }

  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu .sub-menu li.menu-item,
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu .sub-menu li.menu-item:not(:last-child) {
    background-color: transparent;
    border-bottom: 0;
  }

  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu .sub-menu a.hfe-sub-menu-item {
    font-family: var(--cm-font-display);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cm-white);
    background-color: transparent;
    padding: 12px 24px;
    transition: color var(--cm-transition);
  }

  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu .sub-menu a.hfe-sub-menu-item:hover,
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu .sub-menu li.current-menu-item > a.hfe-sub-menu-item {
    color: var(--cm-gold);
    background-color: transparent;
  }
}


/* --------------------------------------------------------------------------
   5. MENU — TABLET E MOBILE (hamburger, fino a 1024px)
   -------------------------------------------------------------------------- */

/* Icona hamburger: bianca, a destra */
.elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu__toggle {
  margin: 0 0 0 auto;
  padding: 4px;
  color: var(--cm-white);
  background-color: transparent;
  border: 0;
}

.elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu__toggle svg {
  width: 26px;
  height: 26px;
  fill: var(--cm-white);
  transition: fill var(--cm-transition);
}

.elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu__toggle:hover svg,
.elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu__toggle.hfe-active-menu svg {
  fill: var(--cm-gold);
}

@media (max-width: 1024px) {

  /* Il pannello parte dal bordo inferiore della barra (non dall'icona),
     così sotto il logo resta respiro. !important serve a battere la
     posizione che il widget calcola da solo. */
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu,
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .elementor-widget-container,
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu,
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu__toggle {
    position: static;
  }

  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu nav.hfe-nav-menu__layout-horizontal {
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* Pannello che si apre sotto la barra */
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu nav.hfe-dropdown,
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu nav.hfe-nav-menu__layout-horizontal {
    background-color: var(--cm-black);
    border-top: 1px solid var(--cm-white-line);
    box-shadow: none;
  }

  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu nav .hfe-nav-menu {
    padding-bottom: var(--cm-space-sm);
  }

  /* Righe del pannello: linea sottile tra una voce e l'altra */
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu nav.hfe-dropdown li.menu-item,
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu nav.hfe-dropdown li.menu-item:not(:last-child) {
    background-color: transparent;
    border-bottom: 1px solid var(--cm-white-line);
  }

  /* Voci principali nel pannello */
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu nav.hfe-dropdown .menu-item a.hfe-menu-item {
    font-size: 18px;
    font-weight: 500;
    color: var(--cm-white);
    background-color: transparent;
    padding: 16px var(--cm-gutter);
  }

  /* Sotto-voci (le 3 linee) nel pannello */
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu nav.hfe-dropdown .sub-menu {
    background-color: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
  }

  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu nav.hfe-dropdown .menu-item a.hfe-sub-menu-item {
    font-family: var(--cm-font-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cm-white-muted);
    background-color: transparent;
    padding: 14px var(--cm-gutter) 14px calc(var(--cm-gutter) + 20px);
  }

  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu nav.hfe-dropdown .menu-item a.hfe-menu-item:hover,
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu nav.hfe-dropdown .menu-item a.hfe-sub-menu-item:hover,
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu nav.hfe-dropdown li.current-menu-item > a.hfe-menu-item,
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu nav.hfe-dropdown li.current-menu-item > a.hfe-sub-menu-item {
    color: var(--cm-gold);
    background-color: transparent;
  }

  /* Barra più bassa e logo più piccolo */
  .elementor .e-con.cm-header {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .elementor .cm-header__logo img {
    height: 64px;
  }
}


/* --------------------------------------------------------------------------
   6. RESPONSIVE — ALTRI AGGIUSTAMENTI
   -------------------------------------------------------------------------- */

/* Schermi piccoli (1025–1280px): voci un po' più compatte perché stiano su una riga */
@media (min-width: 1025px) and (max-width: 1280px) {
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu__layout-horizontal > ul.hfe-nav-menu {
    gap: 28px;
  }
  .elementor .elementor-element.elementor-widget-navigation-menu.cm-header__menu .hfe-nav-menu .menu-item a.hfe-menu-item {
    font-size: 18px;
  }
}

@media (max-width: 782px) {
  body.admin-bar .elementor .e-con.cm-header {
    top: 46px;                                  /* barra WordPress più alta su mobile */
  }
}

@media (max-width: 767px) {
  .elementor .cm-header__logo img {
    height: 52px;
  }
  .elementor .cm-header--scrolled .cm-header__logo img {
    height: 46px;
  }
}