/* ==========================================================================
   NAPOLIMANIA - override su Hummingbird 2.0.0
   Backorder S.A.S.

   Palette campionata dallo snapshot Wayback del 21/10/2025.

   NOTA TECNICA: Hummingbird usa i cascade layer (@layer). Questo file sta
   fuori da ogni layer, quindi vince automaticamente sul tema. NON aggiungere
   !important: non serve e rende il file difficile da mantenere.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKEN DI MARCA
   -------------------------------------------------------------------------- */

:root {
  --nm-navy:       #0D3453;
  --nm-navy-dark:  #082438;
  --nm-navy-light: #1A4E76;

  --nm-red:        #C1272D;
  --nm-red-dark:   #9C1F24;

  --nm-yellow:     #FBE329;
  --nm-orange:     #FE4F19;
}


/* --------------------------------------------------------------------------
   2. RIMAPPATURA SULLE VARIABILI REALI DI HUMMINGBIRD
   Verificate contro theme.css. Da sole ricolorano pulsanti, link, badge,
   paginazione, anelli di focus e stati attivi.
   -------------------------------------------------------------------------- */

:root {
  --bs-primary:       var(--nm-navy);
  --bs-primary-rgb:   13, 52, 83;

  --bs-secondary:     var(--nm-red);
  --bs-secondary-rgb: 193, 39, 45;

  --bs-link-color:           var(--nm-navy);
  --bs-link-color-rgb:       13, 52, 83;
  --bs-link-hover-color:     var(--nm-red);
  --bs-link-hover-color-rgb: 193, 39, 45;

  --bs-focus-ring-color: rgba(13, 52, 83, .25);
}


/* --------------------------------------------------------------------------
   3. PULSANTI
   Nel vecchio sito le azioni erano rosse, non navy.
   -------------------------------------------------------------------------- */

.btn-primary {
  --bs-btn-bg:           var(--nm-red);
  --bs-btn-border-color: var(--nm-red);
  --bs-btn-color:        #FFFFFF;

  --bs-btn-hover-bg:           var(--nm-red-dark);
  --bs-btn-hover-border-color: var(--nm-red-dark);
  --bs-btn-hover-color:        #FFFFFF;

  --bs-btn-active-bg:           var(--nm-red-dark);
  --bs-btn-active-border-color: var(--nm-red-dark);
  --bs-btn-active-color:        #FFFFFF;

  --bs-btn-disabled-bg:           var(--nm-red);
  --bs-btn-disabled-border-color: var(--nm-red);

  --bs-btn-focus-shadow-rgb: 193, 39, 45;

  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 600;
}

.btn-outline-primary {
  --bs-btn-color:              var(--nm-navy);
  --bs-btn-border-color:       var(--nm-navy);
  --bs-btn-hover-bg:           var(--nm-navy);
  --bs-btn-hover-border-color: var(--nm-navy);
  --bs-btn-hover-color:        #FFFFFF;
  --bs-btn-active-bg:          var(--nm-navy);
  --bs-btn-active-color:       #FFFFFF;
}


/* --------------------------------------------------------------------------
   4. TITOLI
   Nel vecchio sito i titoli di sezione erano navy con underline rossa.
   -------------------------------------------------------------------------- */

h1, h2, h3, .h1, .h2, .h3 {
  color: var(--nm-navy);
}


/* --------------------------------------------------------------------------
   5. BOX CITAZIONE DURAZZO (home)
   Markup nel modulo "Blocco di testo personalizzato" su displayHome.
   -------------------------------------------------------------------------- */

.nm-quote {
  border: 3px solid var(--nm-red);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  background: #FFFFFF;
}

.nm-quote p {
  color: var(--nm-navy);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: .5rem;
}

.nm-quote p.nm-quote__author {
  font-style: italic;
  font-weight: 400;
  text-align: right;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   6. BARRA SUPERIORE NAVY
   -------------------------------------------------------------------------- */

.header-top {
  background-color: var(--nm-navy);
  --header-top-color: #FFFFFF;
  color: #FFFFFF;
  padding: .5rem 0;
}

.header-top,
.header-top *,
.header-top a,
.header-top .material-icons {
  color: #FFFFFF;
}

.header-top a:hover,
.header-top a:hover * {
  color: var(--nm-yellow);
}

.header-top .header-block__badge {
  color: var(--nm-navy);
  background: #FFFFFF;
}

.header-top .ps-contactinfo {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  white-space: nowrap;
}

.header-top .nm-freeship {
  color: var(--nm-yellow);
  font-weight: 700;
}
/* --------------------------------------------------------------------------
   6. DA COMPLETARE

   GIA' RISOLTI fuori da questo file (6 ago 2026):
   - colonna categorie a sinistra in home  -> fix in index.tpl (rimossi gli
     override dei blocchi content_columns/left_column che azzeravano il layout)
   - tendina menu -> era la configurazione di ps_mainmenu, non il CSS
   - box citazione con bordo rosso -> sezione 5 qui sopra

   NOTA: theme.css e' INTEGRO (i 45 kB visti in Network erano la dimensione
   compressa in brotli; ps-mainmenu compare 183 volte nel file). La vecchia
   ipotesi del file troncato era sbagliata: i nomi delle classi si leggono
   direttamente da theme.css o da DevTools.

   ANCORA DA FARE:
   - barra superiore navy con testo bianco
   - striscia gialla trasporto gratuito
   - fasce banner promozionali (3+3)
   - footer chiaro invece che scuro
   - provincia doppia nel footer
   - proporzione dello slider
   -------------------------------------------------------------------------- */
   
   
   /* --------------------------------------------------------------------------
   7. SOTTOCATEGORIE COME TAG NAVY (pagina categoria)
   -------------------------------------------------------------------------- */

.subcategory__link {
  background-color: var(--nm-navy);
  border-color: var(--nm-navy);
  color: #FFFFFF;
  border-radius: 3px;
}

.subcategory__link .subcategory__name {
  color: #FFFFFF;
}

.subcategory__link:hover {
  background-color: var(--nm-red);
  border-color: var(--nm-red);
}

.subcategory__link:hover .subcategory__name {
  color: #FFFFFF;
}


/* --------------------------------------------------------------------------
   8. SIDEBAR CATEGORIE (ps_categorytree)
   -------------------------------------------------------------------------- */

#left-column .ps-categorytree {
  border: 1px solid #E0E0E0;
  margin-bottom: 1.5rem;
  font-size: .8125rem;
}

/* intestazione navy (il <p> che contiene "Home") */
#left-column .ps-categorytree .left-block__title {
  background-color: var(--nm-navy);
  margin: 0;
  padding: 0;
}

#left-column .ps-categorytree .left-block__title-link {
  display: block;
  padding: .8rem 1rem;
  color: #FFFFFF;
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

#left-column .ps-categorytree .left-block__title-link:hover {
  color: var(--nm-yellow);
}

/* compattazione accordion */
#left-column .accordion--category .accordion-item {
  border: 0;
  border-bottom: 1px solid #F0F0F0;
}

#left-column .accordion--category .accordion-button,
#left-column .accordion--category .category-tree__item-link {
  padding: .45rem 1rem;
  font-size: .8125rem;
  font-weight: 400;
  color: var(--nm-navy);
  line-height: 1.3;
}

#left-column .accordion--category .accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
  color: var(--nm-red);
}

#left-column .accordion--category .accordion-button:focus {
  box-shadow: none;
}

#left-column .accordion--category a:hover {
  color: var(--nm-red);
  background-color: #F7F7F7;
}

#left-column .accordion--category .accordion-body {
  padding: 0 0 0 1rem;
}

/* --------------------------------------------------------------------------
   9. NEWSLETTER
   -------------------------------------------------------------------------- */

section.ps-emailsubscription.bg-body-tertiary {
  background-color: var(--nm-navy);
  display: block;
  width: 100%;
}

section.ps-emailsubscription input[type="email"],
section.ps-emailsubscription input[type="text"] {
  background-color: #FFFFFF;
  color: #212529;
}

section.ps-emailsubscription .btn {
  background-color: var(--nm-red);
  border-color: var(--nm-red);
  color: #FFFFFF;
}

section.ps-emailsubscription .btn:hover {
  background-color: var(--nm-red-dark);
  border-color: var(--nm-red-dark);
}

/* fascia newsletter a tutta larghezza */
.footer.footer__before {
  background-color: var(--nm-navy);
}

.nm-banner-row {
  margin-bottom: 2rem;
}

.nm-banner-row > [class*="col-"] {
  padding-left: .75rem;
  padding-right: .75rem;
  margin-bottom: 1rem;
}

.nm-banner-row img {
  width: 100%;
  height: auto;
  border: 1px solid #E5E5E5;
}

/* --------------------------------------------------------------------------
   10. MOBILE — gestione colonna sinistra
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  /* in home: nascosta (le categorie stanno nel menu hamburger) */
  .page-index #left-column {
    display: none;
  }

  /* nelle altre pagine: presente ma dopo il contenuto */
  .columns-container .row {
    display: flex;
    flex-direction: column;
  }

  #left-column  { order: 2; }
  #center-column { order: 1; }
}


/* --------------------------------------------------------------------------
   11. MENU TOP — voci ridotte su desktop
   Il menu contiene tutte le categorie principali per il mobile (hamburger).
   Su desktop restano solo le prime 4 voci configurate in ps_mainmenu:
   Chi siamo, Abbigliamento, Gadget, Isole e dintorni.
   L'ordine delle voci in ps_mainmenu determina cosa resta visibile.
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  #top-menu > li:nth-child(n+5) {
    display: none;
  }
}