/* header-home.css — palette pastello allegra per asilo nido */
#main-header {
  background: linear-gradient(to bottom, #c2f0f7, #fef3c7); /* azzurro -> giallino */
  border-bottom: 3px solid #fbcf5c;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  position: fixed!important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

body.home,
body.page-template-front-page {
  background: #fef9e6 !important;
}

#main-wrapper {
  background: #fef9e6 !important;
}

/* Logo */
.logo-header .h1 {
  margin-left: 12px;
  color: #444;
}

.logo-header .h1 span {
  display: block;
  line-height: 1.4;
}

.logo-header .h1 span:first-child {
  font-size: 0.9rem;
  color: #7e7e7e;
}

.logo-header .h1 strong {
  font-size: 1.6rem;
  color: #f28d35; /* arancio pastello */
}

.logo-header .h1 .d-none.d-lg-block {
  color: #34a0a4; /* verde acqua */
  font-size: 1rem;
}


/* Social icons */
.header-social-wrapper a {
  margin-left: 0.5rem;
  background-color: #ffffff;
  border-radius: 50%;
  padding: 6px;
  display: inline-block;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.header-social-wrapper a:hover {
  transform: scale(1.1);
}

/* Reset margini extra */
header + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Responsive logo font */
@media (max-width: 991px) {
  .logo-header .h1 strong {
    font-size: 1.3rem;
  }
}

@media (max-width: 991px) {
  /* Header principale (versione mobile e sticky) */
  #main-header,
  #main-header.sticky-main-nav,
  .sticky-main-nav,
  .navbar,             /* eventuale wrapper Bootstrap */
  .mobile-header,      /* se il tema usa un header mobile separato */
  .main-header-mobile  /* altro alias frequente */
  {
    background: linear-gradient(to bottom, #c2f0f7, #fef3c7) !important;
    border-bottom: 3px solid #fbcf5c !important;
  }

  /* Elimina eventuali fondi bianchi applicati ai link del menu */
  .navbar,
  .navbar * {
    background-color: transparent !important;
  }
}

/* === Gradiente anche nel menu mobile/side === */
@media (max-width: 1200px) {

  /* contenitore scorrevole (sinistra) */
  .cbp-spmenu.cbp-spmenu-vertical,
  /* wrapper interno che a volte eredita uno sfondo bianco */
  .cbp-spmenu .nav-list-mobile,
  /* eventuali menu di primo e secondo livello */
  .cbp-spmenu .dl-menu,
  .cbp-spmenu .dl-submenu
  {
    background: linear-gradient(to bottom, #c2f0f7, #fef3c7) !important;
  }

  /* link e voci restano su sfondo trasparente */
  .cbp-spmenu a,
  .cbp-spmenu li {
    background-color: transparent !important;
  }
}




/*VOCI DEL MENU*/
.nav-list-primary > li[class*="text-"] > a {
  color: #000 !important;
  background-color: transparent !important;
}

/* Stile base uniforme per voci menu */
.main-nav .nav-list-primary > li > a.nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  font-size: 1.05rem;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-weight: bold;
  color: #000;
  transition: all 0.3s ease;
}

/* Hover: sfondo più evidente (albicocca chiaro), ombra dolce */
.main-nav .nav-list-primary > li > a.nav-link:hover,
.main-nav .nav-list-primary > li > a.nav-link:focus {
  background-color: rgba(255, 192, 128, 0.6); /* albicocca trasparente */
  color: #000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

/* Icone accanto ai titoli */
#mainNavDropdown1::before { content: "🏫"; }
#mainNavDropdown2::before { content: "🛎️"; }
#mainNavDropdown3::before { content: "📰"; }
#mainNavDropdown4::before { content: "📚"; }
#mainNavDropdown5::before { content: "🐣"; }  

/* Spaziatura icone */
#mainNavDropdown1::before,
#mainNavDropdown2::before,
#mainNavDropdown3::before,
#mainNavDropdown4::before
#mainNavDropdown5::before {
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 1.1rem;
  line-height: 1;
}

.sticky-main-nav ul.nav-list>li.text-orange a,
.sticky-main-nav ul.nav-list>li.text-purplelight a,
.sticky-main-nav ul.nav-list>li.text-bluelectric a,
.sticky-main-nav ul.nav-list>li.text-redbrown a,
.sticky-main-nav ul.nav-list>li.text-greendark a 
{
  color: #000 !important; 
}