/* =====================================================================
   BYITALY STORE - header.css (v2 - riscritto sul markup REALE Classic)
   ---------------------------------------------------------------------
   Tema:   byitaly (child di Classic) - PrestaShop 8.2.6
   Autore: Francesco Fiore - www.fiorefrancesco.com - Licenza MIT
   ---------------------------------------------------------------------
   NESSUN override di header.tpl: questo file stila il template NATIVO
   del Classic (struttura confermata via file reale, non presunta).
   Blocchi del template nativo:
     .header-banner      -> hook displayBanner (claim topbar)
     .header-nav .row
       .hidden-sm-down    -> riga desktop: .col-md-5 (displayNav1) +
                              .right-nav (displayNav2)
       .mobile            -> riga mobile: #menu-icon, #_mobile_cart,
                              #_mobile_user_info, #_mobile_logo
     .header-top .row
       #_desktop_logo (col-md-2)
       .header-top-right (col-md-10) -> hook displayTop (menu, search,
                                          account, cart - markup nativo
                                          dei singoli moduli, INVARIATO)
     #mobile_top_menu_wrapper -> pannello mobile popolato via JS nativo
                                  (NON toccare: il Classic lo gestisce
                                  da solo, noi stiliamo solo l'aspetto)
   Markup interno moduli (verificato da pagina reale, invariato):
     ps_mainmenu:          .top-menu[data-depth="0"] > a[data-depth="0"]
     ps_searchbar:         #search_widget form
     ps_shoppingcart:      .blockcart .cart-products-count
     ps_languageselector:  .language-selector-wrapper
     ps_customersignin:    #_desktop_user_info .user-info
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOPBAR (.header-banner + .header-nav)  [A]
--------------------------------------------------------------------- */
.header-banner,
.header-nav {
  background: var(--ff-navy);
  color: #fff;
}
.header-banner { padding: 8px 0; font-size: 0.8125rem; }

/* Su mobile la riga topbar diventa la barra logo+hamburger+icone: deve
   restare bianca (coerente col resto dell'header), non navy - altrimenti
   logo e icone (pensati per sfondo chiaro) spariscono nel blu. */
@media (max-width: 991.98px) {
  .header-nav {
    background: #fff;
    color: var(--ff-text);
  }
  .header-nav .mobile #menu-icon,
  .header-nav .mobile #_mobile_cart,
  .header-nav .mobile #_mobile_user_info {
    color: var(--ff-navy);
  }
}

.header-nav .row { min-height: 38px; }
/* Bootstrap gestisce nativamente .col-md-5/.col-md-7 dentro
   .hidden-sm-down: NON tocchiamo display/flex qui, solo spaziatura
   verticale minima per allineare il testo nella topbar. */
.header-nav .hidden-sm-down { min-height: 38px; }
.header-nav .hidden-sm-down > [class*="col-"] {
  display: flex;
  align-items: center;
}
/* displayNav1 (lingua/valuta) a sinistra, displayNav2 (login) a destra */
.header-nav .right-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
}
.header-nav a { color: #fff; }
.header-nav a:hover { color: var(--ff-footer-link); }

/* Claim topbar (ff_theme, hook displayBanner) */
.ff-topbar-claim {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
}

/* Selettore lingua (ps_languageselector - markup nativo modulo) */
.header-nav .language-selector-wrapper,
.header-nav .language-selector-wrapper button,
.header-nav .language-selector-wrapper span,
.header-nav .language-selector-wrapper i {
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
}
.header-nav .language-selector-wrapper img {
  width: 18px;
  height: auto;
  margin-right: 6px;
  vertical-align: -2px;
  border-radius: 2px;
}
/* Ancora la tendina al proprio trigger con larghezza propria, invece
   di ereditare quella (stretta) della colonna Bootstrap che la
   contiene: senza questo, il dropdown risultava "schiacciato" nel
   contenitore invece che dimensionato sul proprio contenuto. */
.header-nav .language-selector-wrapper .language-selector {
  position: relative;
}
.header-nav .language-selector-wrapper .dropdown-menu {
  position: absolute;
  left: 0;
  top: 100%;
  margin: 6px 0 0;
  min-width: 170px;
  width: max-content;
}
.header-nav .language-selector-wrapper .dropdown-menu,
.header-nav .language-selector-wrapper .dropdown-menu * {
  color: var(--ff-navy);
  border-radius: var(--ff-radius-sm);
}
.header-nav .language-selector-wrapper .dropdown-menu {
  border: 1px solid var(--ff-border);
  box-shadow: var(--ff-shadow-md);
}

/* Login (ps_customersignin - markup nativo modulo) */
.header-nav #_desktop_user_info .user-info a,
.header-nav #_desktop_user_info .user-info a * {
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Riga mobile della topbar (hamburger + logo + icone rapide):
   lasciata al comportamento/nativo del Classic, solo colore icone */
.header-nav .mobile #menu-icon,
.header-nav .mobile #_mobile_cart,
.header-nav .mobile #_mobile_user_info {
  color: #fff;
}

/* ---------------------------------------------------------------------
   2. HEADER PRINCIPALE (.header-top)  [A]
--------------------------------------------------------------------- */
.header-top {
  background: #fff;
  border-bottom: 1px solid var(--ff-border);
}
.header-top .row {
  display: flex;
  align-items: center;
  min-height: 86px;
}

/* Logo desktop */
#_desktop_logo {
  flex-shrink: 0;
}
#_desktop_logo img {
  max-height: 70px;
  width: auto;
}

/* Contenitore displayTop: qui dentro ps_mainmenu + ps_searchbar +
   account + ps_shoppingcart rendono il loro markup nativo */
.header-top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------------
   3. MENU PRINCIPALE (ps_mainmenu - markup nativo del modulo)  [A]
   ---------------------------------------------------------------------
   IMPORTANTE: il Classic CLONA questo stesso markup (.top-menu
   [data-depth="0"] ecc.) dentro il pannello mobile (#_mobile_top_menu)
   via JS nativo. Se stiliamo .top-menu senza scoping, la riga
   flex/orizzontale si applica ANCHE al pannello mobile, che deve
   restare verticale/nativo. Tutto qui dentro vale SOLO da 992px in su:
   sotto, il menu mobile resta gestito dal CSS nativo del Classic,
   incontaminato dalle nostre regole.
--------------------------------------------------------------------- */
@media (min-width: 992px) {
  #_desktop_top_menu { flex: 1 1 auto; }
  .top-menu[data-depth="0"] {
    display: flex;
    align-items: center;
    justify-content: center;  /* menu centrato nello spazio disponibile
                                  tra logo e icone a destra (invece di
                                  restare incollato subito dopo il logo) */
    gap: 6px;
    margin: 0;
  }
  .top-menu a[data-depth="0"] {
    position: relative;
    display: block;
    padding: 0 14px;
    /* line-height = altezza della riga header-top (86px, §2): il testo
       si centra verticalmente in modo deterministico, indipendente da
       come i flex-container esterni (.header-top .row, .header-top-right)
       ridistribuiscono lo spazio - con padding verticale la posizione
       dipendeva da quella redistribuzione ed era imprevedibile. */
    line-height: 86px;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ff-navy);
  }
  /* Sottolineatura con coda tricolore (firma brand del menu).
     bottom calcolato rispetto agli 86px della riga, non al testo. */
  .top-menu a[data-depth="0"]::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 16px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(
      to right,
      var(--ff-navy) 0 70%,
      var(--ff-green) 70% 80%,
      #fff 80% 90%,
      var(--ff-red) 90% 100%
    );
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--ff-transition);
  }
  .top-menu a[data-depth="0"]:hover::after,
  .top-menu li.current > a[data-depth="0"]::after {
    transform: scaleX(1);
  }
  .top-menu .sub-menu {
    border: 1px solid var(--ff-border);
    border-radius: var(--ff-radius-sm);
    box-shadow: var(--ff-shadow-md);
  }
  .top-menu .sub-menu a { color: var(--ff-text); font-weight: 500; }
  .top-menu .sub-menu a:hover { color: var(--ff-red); }
}

/* ---------------------------------------------------------------------
   3bis. MENU NEL PANNELLO MOBILE (#_mobile_top_menu)  [richiesta cliente]
   ---------------------------------------------------------------------
   Scoperto SOLO a #_mobile_top_menu (il contenitore che il JS nativo
   del Classic popola clonando il menu) - NON tocca #_desktop_top_menu,
   cosi' desktop e mobile restano completamente indipendenti.
--------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  #_mobile_top_menu .top-menu[data-depth="0"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
  }
  #_mobile_top_menu .top-menu a[data-depth="0"] {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 0;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ff-navy);
  }
  #_mobile_top_menu .sub-menu {
    text-align: center;
  }
  #_mobile_top_menu .sub-menu a {
    color: var(--ff-text);
    font-weight: 500;
  }
}

/* ---------------------------------------------------------------------
   4. RICERCA (ps_searchbar - markup nativo)  [A]
--------------------------------------------------------------------- */
#search_widget { position: relative; }
#search_widget .search {
  color: var(--ff-navy);
  font-size: 1.25rem;
  cursor: pointer;
}
#search_widget input[type="text"] {
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
  font-size: 0.875rem;
}

/* ---------------------------------------------------------------------
   5. ACCOUNT (icona utente in displayTop)  [A]
--------------------------------------------------------------------- */
#_desktop_user_info a,
.header-top-right a[href*="account"] {
  color: var(--ff-navy);
  font-size: 1.25rem;
}

/* ---------------------------------------------------------------------
   6. CARRELLO + BADGE (ps_shoppingcart - markup nativo)  [A]
--------------------------------------------------------------------- */
.blockcart { background: transparent; }
.blockcart .header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ff-navy);
  cursor: pointer;
}
.blockcart .cart-products-count {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--ff-red);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ---------------------------------------------------------------------
   7. STICKY HEADER  [B]
   ---------------------------------------------------------------------
   #header e' il wrapper esterno (fornito dal layout, non da questo
   file) che racchiude .header-banner/.header-nav/.header-top.
--------------------------------------------------------------------- */
#header { position: sticky; top: 0; z-index: 1030; background: #fff; }
#header.ff-sticky .header-banner,
#header.ff-sticky .header-nav { display: none; }
#header.ff-sticky .header-top { box-shadow: var(--ff-shadow-md); }
#header.ff-sticky .header-top .row { min-height: 64px; }
#header.ff-sticky #_desktop_logo img { max-height: 40px; }
@media (min-width: 992px) {
  #header.ff-sticky .top-menu a[data-depth="0"] { line-height: 64px; }
  #header.ff-sticky .top-menu a[data-depth="0"]::after { bottom: 10px; }
}