/* Stili SOLO per la navbar - non influenzano il resto della pagina */
/* CSS comune per topnav_rework.ejs - basato su homepage2.ejs */

/* Assicura che la topnav usi il font Outfit */
#main-header,
#main-header * {
  font-family: 'Outfit', sans-serif !important;
}

/* IMPORTANTE: Le icone Material Symbols devono usare il loro font specifico */
#main-header .material-symbols-outlined,
#main-header nav .material-symbols-outlined,
#main-header button .material-symbols-outlined,
#main-header a .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

#main-header {
  min-height: 60px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}
@media (min-width: 768px) {
  #main-header {
    min-height: 70px !important;
  }
  .mega-menu-wrapper,
  header .mega-menu-wrapper,
  nav .mega-menu-wrapper {
    top: 70px !important;
  }
}
@media (min-width: 1024px) {
  #main-header {
    min-height: 80px !important;
  }
  .mega-menu-wrapper,
  header .mega-menu-wrapper,
  nav .mega-menu-wrapper {
    top: 80px !important;
  }
}
#main-header img[alt="Trova Dermatologo"] {
  max-width: none !important;
  width: auto !important;
}

/* Footer logo - 100px on mobile, same as topnav on md/lg (override Tailwind img max-width: 100%) */
footer img[alt="Trova Dermatologo"] {
  max-width: none !important;
  width: auto !important;
  height: 100px !important; /* mobile */
}
@media (min-width: 768px) {
  footer img[alt="Trova Dermatologo"] {
    height: 3.5rem !important; /* 56px = h-14 */
  }
}
@media (min-width: 1024px) {
  footer img[alt="Trova Dermatologo"] {
    height: 4rem !important; /* 64px = h-16 */
  }
}
#main-header nav a,
#main-header nav button {
  font-size: 20px !important;
}

/* Stili per megamenu - solo dentro la navbar */
nav .relative[class*="group/"],
nav .relative[class*="group/cat"] {
  padding-bottom: 30px !important;  /* crea ponte invisibile tra link e menu */
  margin-bottom: -30px !important;
  position: relative !important;
}

/* Estendi l'area hover per includere il ponte invisibile */
nav .relative[class*="group/"]::after,
nav .relative[class*="group/cat"]::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  height: 30px;
  background: transparent;
  pointer-events: auto;
  z-index: 89; /* Ridotto da 91 a 89 per non interferire con il menu (z-index: 90) */
}

[class*="group/cat"]:hover > .mega-menu-wrapper > div {
  pointer-events: auto !important;
}
/* Ricerca header: slide inline, collassa blog/social (.header-nav-trailing) */
#main-header.header-search-expanded .header-nav-trailing {
  /* Hide without shifting other menu items */
  opacity: 0 !important;
  pointer-events: none !important;
}
#main-header.header-search-expanded #header-search-slider {
  width: var(--header-search-slider-w, min(28rem, calc(100vw - 12rem))) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Nascondi nav desktop su mobile */
@media (max-width: 1023px) {
  #main-header nav.hidden.lg\:flex {
    display: none !important;
  }
}
/* Allineamento verticale per tutte le categorie nella nav - solo su desktop */
@media (min-width: 1024px) {
  #main-header nav {
    display: flex !important;
    align-items: center !important;
  }
  #main-header nav .relative {
    display: flex !important;
    align-items: center !important;
  }
  #main-header nav .relative > a {
    display: flex !important;
    align-items: center !important;
    line-height: normal !important;
    vertical-align: middle !important;
  }
}
.mega-menu-wrapper,
header .mega-menu-wrapper,
nav .mega-menu-wrapper {
  position: fixed !important;
  top: 60px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  transform: translateY(10px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease !important;
  z-index: 90 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.mega-menu-wrapper > div {
  pointer-events: none;
}
.group\/cure:hover > .mega-menu-wrapper,
.group\/inestetismi:hover > .mega-menu-wrapper,
.group\/patologie:hover > .mega-menu-wrapper,
.group\/trattamenti:hover > .mega-menu-wrapper,
[class*="group/cat"]:hover > .mega-menu-wrapper,
nav .group\/cure:hover > .mega-menu-wrapper,
nav .group\/inestetismi:hover > .mega-menu-wrapper,
nav .group\/patologie:hover > .mega-menu-wrapper,
nav .group\/trattamenti:hover > .mega-menu-wrapper,
nav [class*="group/cat"]:hover > .mega-menu-wrapper,
.mega-menu-wrapper:hover,
.mega-menu-wrapper.mega-menu-visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.group\/cure:hover > .mega-menu-wrapper > div,
.group\/inestetismi:hover > .mega-menu-wrapper > div,
.group\/patologie:hover > .mega-menu-wrapper > div,
.group\/trattamenti:hover > .mega-menu-wrapper > div,
[class*="group/cat"]:hover > .mega-menu-wrapper > div,
nav .group\/cure:hover > .mega-menu-wrapper > div,
nav .group\/inestetismi:hover > .mega-menu-wrapper > div,
nav .group\/patologie:hover > .mega-menu-wrapper > div,
nav .group\/trattamenti:hover > .mega-menu-wrapper > div,
nav [class*="group/cat"]:hover > .mega-menu-wrapper > div,
.mega-menu-wrapper:hover > div,
.mega-menu-wrapper.mega-menu-visible > div {
  pointer-events: auto !important;
}

/* Assicura che i link dentro il mega menu abbiano pointer-events abilitati */
.mega-menu-wrapper.mega-menu-visible a,
.mega-menu-wrapper:hover a,
[class*="group/cat"]:hover > .mega-menu-wrapper a,
nav [class*="group/cat"]:hover > .mega-menu-wrapper a {
  pointer-events: auto !important;
}

/* Assicura che i link siano cliccabili e hoverabili */
.mega-menu-wrapper .megamenu-link {
  pointer-events: auto !important;
  position: relative;
  z-index: 92; /* Sopra il bridge (z-index: 89) e il menu wrapper (z-index: 90) */
}
.megamenu-shadow {
  box-shadow: none !important;
}
.mega-menu-wrapper a:hover {
  text-decoration: none;
}
.mega-menu-wrapper .group\/featured img,
.megamenu-featured-img {
  transition: transform .5s ease;
}
.mega-menu-wrapper .group\/featured:hover img,
.megamenu-featured-group:hover .megamenu-featured-img {
  transform: scale(1.05);
}
.megamenu-icon {
  opacity: .4;
  font-size: 16px !important;
}
.megamenu-section-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.megamenu-featured-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.megamenu-featured-image {
  width: 100%;
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 16px;
}
.megamenu-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.megamenu-featured-group:hover .megamenu-featured-img {
  transform: scale(1.05);
}
.megamenu-featured-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  display: block !important;
  order: 2;
}
.megamenu-featured-desc {
  font-size: 14px !important;
  line-height: 1.5;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0 !important;
  order: 3;
}
.megamenu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 92; /* Sopra il bridge e il menu wrapper */
}
.megamenu-list li {
  position: relative;
  z-index: 92;
  pointer-events: auto !important;
}
.megamenu-link {
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 92; /* Sopra il bridge e il menu wrapper */
  pointer-events: auto !important;
}
.megamenu-icon {
  font-size: 18px !important;
  opacity: .4;
  flex-shrink: 0;
}

/* Assicura che le colonne del mega menu siano cliccabili */
.mega-menu-wrapper .grid > div {
  position: relative;
  z-index: 91; /* Sopra il bridge (z-index: 89) ma sotto i link (z-index: 92) */
  pointer-events: auto !important;
}
.megamenu-cta-desc {
  font-size: 13px !important;
  line-height: 1.6;
}
.megamenu-cta-btn {
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 44px !important;
  padding: 0 16px;
}
.megamenu-cta-btn .material-symbols-outlined {
  font-size: 18px !important;
}
.megamenu-badges {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.megamenu-badges .material-symbols-outlined {
  font-size: 14px !important;
}
@media (max-width: 1023px) {
  .mega-menu-wrapper {
    display: none !important;
  }
  nav .relative[class*="group/"],
  nav .relative[class*="group/cat"] {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}
@media (min-width: 1024px) {
  .mega-menu-wrapper,
  header .mega-menu-wrapper,
  nav .mega-menu-wrapper {
    width: 100% !important;
    top: 110px !important; /* era 110px — deve matchare min-height dell'header */
  }
}

@media (min-width: 1024px) {
  nav .relative[class*="group/"],
  nav .relative[class*="group/cat"] {
    padding-bottom: 50px !important;
    margin-bottom: -50px !important;
  }

  /* Bridge invisibile che copre il gap tra header e mega menu - migliorato per movimento diagonale */
  nav .relative[class*="group/cat"] > .mega-menu-wrapper::before,
  nav .relative[class*="group/"] > .mega-menu-wrapper::before {
    content: '';
    position: fixed;
    top: 80px;        /* fine header */
    left: 0;
    right: 0;
    height: 30px;     /* copre il gap fino a top: 110px */
    background: transparent;
    z-index: 89;      /* sotto il mega menu (z-index: 90) */
    pointer-events: auto !important;
  }
}
/* Nascondi burger menu su desktop */
@media (min-width: 1024px) {
  #mobile-menu-button {
    display: none !important;
  }
}