/*
 * css/wubooking-theme.css
 * ------------------------------------------------------------------
 * Il colore "primario" del tema (rosa) è già gestito interamente da
 * css/skin-corporate-7-wubooking.css (copia ricolorata dello skin
 * originale: stesso file, stessi selettori, solo tinta cambiata).
 *
 * Questo file aggiunge SOLO ciò che va oltre la semplice sostituzione
 * del colore primario: gli sfondi navy scuro di header/footer/sezione
 * "Chi siamo" e il blu come secondo accento (icone, dettagli) — la
 * stessa palette usata nell'hero. Va caricato DOPO skin-corporate-7-
 * wubooking.css, così vince sulla cascata dove serve.
 * ------------------------------------------------------------------
 */

:root{
  --wb-pink:#ec1e86;
  --wb-pink-dark:#c7106c;
  --wb-blue:#2a5bf0;
  --wb-blue-dark:#1c3fc7;
  --wb-navy-0:#040509;
  --wb-navy-1:#080a18;
  --wb-navy-2:#0e1430;
  --wb-ink:#f3f6ff;
  --wb-ink-dim:rgba(243,246,255,.65);
}

/* ---------- fix: il menu deve restare sempre sopra l'hero ---------- */
/* L'header trasparente di Porto è "position: absolute/fixed" per stare sopra
   l'hero; il nostro .wb-hero è anch'esso un elemento "positioned" (necessario
   per gli sfondi/i moduli fluttuanti) e, venendo dopo nel markup, senza uno
   z-index esplicito rischia di dipingersi sopra l'header. Qui forziamo
   l'header a stare sempre più in alto nello stacking, senza toccarne la
   position (che viene gestita dal plugin sticky di Porto via JS). */
#header{
  z-index:1055 !important;
}
.wb-hero{
  position:relative;
  z-index:1;
}

/* ---------- header ---------- */
#header,
#header .header-body,
.header-transparent .header-body,
.header-body.bg-dark{
  background-color:#ffffff !important;
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* con sfondo bianco il testo/icone del menu (pensati per sfondo scuro) vanno scuriti */
.header-transparent .header-nav-main-square .nav-pills .nav-link,
.header-transparent .header-nav-main-square .nav-pills .dropdown-item,
.header-nav-light-text .header-nav-main nav > ul > li > a{
  color:#1a1d29 !important;
}
.header-transparent .header-nav-main-square .nav-pills .nav-link:hover,
.header-transparent .header-nav-main-square .nav-pills .nav-link.active{
  color:var(--wb-pink) !important;
}
.header-transparent .header-nav-features-toggle,
.header-transparent .header-nav-top-icon{
  color:#1a1d29 !important;
}

/* il pannello del menu a tendina (hamburger) è scuro per design (header-nav-main-mobile-dark):
   qui i link devono restare chiari. Uso volutamente GLI STESSI selettori della regola scura
   qui sopra (stessa specificità): dentro la media query, essendo dopo nel file, vince lei. */
@media (max-width:991px){
  .header-transparent .header-nav-main-square .nav-pills .nav-link,
  .header-transparent .header-nav-main-square .nav-pills .dropdown-item,
  .header-nav-light-text .header-nav-main nav > ul > li > a,
  .header-nav-main-mobile-dark .dropdown-item,
  .header-nav-main-mobile-dark .nav-pills .nav-link{
    color:var(--wb-ink) !important;
  }
  .header-transparent .header-nav-main-square .nav-pills .nav-link:hover,
  .header-transparent .header-nav-main-square .nav-pills .nav-link.active,
  .header-nav-main-mobile-dark .dropdown-item:hover,
  .header-nav-main-mobile-dark .nav-pills .nav-link:hover{
    color:var(--wb-pink) !important;
  }
}
.header-transparent .header-btn-collapse-nav{
  color:#1a1d29 !important;
}

/* ---------- fix: hamburger che sparisce del tutto su mobile verticale ---------- */
/* Non sappiamo con certezza quale regola del tema base lo nasconda (non
   l'abbiamo — questa è una correzione difensiva, non mirata a una riga
   precisa). Forziamo esplicitamente che resti visibile e cliccabile in
   tutta la fascia mobile, qualunque cosa lo stia disattivando altrove. */
@media (max-width:991px){
  .header-btn-collapse-nav{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    visibility:visible !important;
    opacity:1 !important;
  }
}

/* ---------- CTA "Iscriviti gratis" sotto al logo, solo su mobile ---------- */
/* L'originale (dentro il menu) va nascosto in questa fascia per non avere
   il bottone duplicato — resta solo quello nuovo, sotto al logo. */
@media (max-width:991px){
  .header-nav-features{
    display:none !important;
  }
}
.wb-cta-mobile{
  padding:.5rem 0 .75rem;
  background-color:#ffffff;
}

/* ---------- sezione "Chi siamo" (section-secondary) -> navy invece del rosso scuro di default ---------- */
.section-secondary{
  background:linear-gradient(180deg, var(--wb-navy-2), var(--wb-navy-1)) !important;
}
.section-secondary .btn-dark-scale-2{
  background-color:var(--wb-blue) !important;
  border-color:var(--wb-blue) !important;
  color:#fff !important;
}
.section-secondary .btn-dark-scale-2:hover{
  background-color:var(--wb-blue-dark) !important;
}

/* ---------- footer ---------- */
#footer{
  background-color:var(--wb-navy-0) !important;
  color:var(--wb-ink-dim);
}
#footer a{ color:var(--wb-ink-dim); }
#footer a:hover{ color:var(--wb-pink); }
#footer .footer-copyright-style-2{
  background-color:var(--wb-navy-1) !important;
  border-top:1px solid rgba(255,255,255,.06);
}

/* ---------- blu come secondo accento: metà delle icone feature-box ---------- */
.feature-box-icon .icons{
  color:var(--wb-blue) !important;
}
.feature-box:hover .feature-box-icon .icons{
  color:var(--wb-pink) !important;
}