/* =============================================================================
   AVE MENU sottopagine
   Il container e' full-bleed (bordi da un lato all'altro) e porta il ritmo
   VERTICALE; la lista porta la MISURA orizzontale con --ave-pad-x, cosi' si
   allinea alle sezioni per costruzione, a ogni breakpoint.
   ============================================================================= */
/*
 * Niente font-family: il menu eredita il font del sito dal kit. Prima imponeva
 * Manrope con `!important`, che nessuna regola del design system poteva battere.
 * L'accento resta una custom property, cosi' si cambia da un punto solo: e' il
 * #D53221 storico del tema, che NON e' il rosso del brand (--ave-color-brand).
 */
.cs-menu-container {
  --df-cs-menu-accent: #D53221;

  border-top: 1px solid var(--ave-color-border, #e5e5e5);
  border-bottom: 1px solid var(--ave-color-border, #e5e5e5);
  padding: 0;
  width: 100%;
}

.cs-menu {
  display: flex;
  gap: 30px;
  padding-inline: var(--ave-pad-x);
  overflow-x: auto;
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none;    /* Firefox, Safari 18.2+, Chromium 121+ */
}

.cs-menu::-webkit-scrollbar {
  display: none; /* Older Safari and Chromium */
}

.cs-menu a {
  display: block;
  color: var(--e-global-color-text, #1a1a1a);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.3;
  padding: 25px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.cs-menu a:hover {
  color: var(--df-cs-menu-accent);
}

.cs-menu a.is-active {
  border-bottom-color: var(--df-cs-menu-accent);
  color: var(--e-global-color-text, #1a1a1a);
  font-weight: 500;
}

.cs-menu a .brk::before {
  content: "\A";
  white-space: pre;
}

/* --- RESPONSIVE: da riga a pillole. Il padding-inline resta --ave-pad-x --- */
@media (max-width: 1024px) {
  .cs-menu-container {
    border: 0;
    padding-block: 30px;
  }

  .cs-menu {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    overflow-x: visible;
  }

  .cs-menu a {
    padding: 10px 16px;
    background: var(--ave-color-white, #fff);
    border: 1px solid var(--ave-color-border, #e5e5e5);
    border-radius: 10px;
    font-size: 14px;
  }

  .cs-menu a.is-active {
    background: var(--ave-color-white, #fff);
    border-color: var(--df-cs-menu-accent);
  }
}

@media (max-width: 767px) {
  .cs-menu-container {
    border: 0;
    padding-block: 20px;
  }
}