/* =========================================================================
 * catnav.css — base del menu categorie SX (left.php): token colore, account, ricerca, risultati, lingue
 * Tutto è sotto .catnav-sidebar. Il menu vero e proprio (pannello + accordion) è in catnav-mega.css.
 * ========================================================================= */

.catnav-sidebar {
  /* fondo sidebar: stesso gradiente verde della sidebar originale (main.css .sidebar-content) */
  --cn-panel: linear-gradient(to bottom, #9fd632 0%, #79b40e 100%);
  --cn-panel-solid: #9fd632;   /* tinta piena del pannello (ricerca sticky su mobile) */
  --cn-on-panel: #1e2a19;      /* testo sul verde */
  --cn-on-panel-muted: #2b3f1c;/* testo secondario sul verde (contrasto >= 4.5:1 anche sul verde scuro) */
  --cn-on-panel-link: #1e3a0f; /* link sul verde */
  --cn-pipe-color: #2f5304;    /* indicatori sul verde (ramo corrente, lingua): verde scuro, visibile sul gradiente */
  --cn-focus: #1e3a0f;
  --cn-row: #ffffff;        /* righe */
  --cn-line: #dde5d6;       /* separatori */
  --cn-ink: #1e2a19;        /* testo */
  --cn-muted: #5d6a57;      /* percorso, testi secondari */
  --cn-green: #79b40e;      /* verde marchio: tubo, indicatori, focus (mai per testo) */
  --cn-green-soft: #bcd98d; /* indicatore "la pagina corrente è qui dentro" */
  --cn-green-ink: #3d6a06;  /* testo verde leggibile */
  --cn-tint: #e6f2d3;       /* hover, evidenziazione ricerca */
  --cn-radius: 6px;

  font-family: "Ubuntu", "PT Sans", system-ui, sans-serif;
  color: var(--cn-on-panel);
  background: #fff; /* sopra il pannello (zona ippopotamo) resta bianco come l'originale */
}

.catnav-sidebar .sidebar-content.catnav-content {
  background: var(--cn-panel);
  /* in alto lascia spazio alle zampe dell'ippopotamo che "si affaccia" sul pannello */
  padding: 3.25rem 0.75rem 2rem;
}

.catnav-sidebar a { text-decoration: none; }

.catnav-sidebar :focus-visible {
  outline: 2px solid var(--cn-focus);
  outline-offset: 2px;
}

/* ---------- account / carrello ---------- */
.catnav-account {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  padding: 0.25rem 0.25rem 0.75rem;
  font-size: 0.875rem;
}

.catnav-acc-link,
.catnav-login > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 36px;
  color: var(--cn-on-panel);
  cursor: pointer;
}
.catnav-acc-link i,
.catnav-login > summary i { color: var(--cn-on-panel-link); font-size: 1rem; }
.catnav-acc-link:hover,
.catnav-login > summary:hover { color: var(--cn-on-panel-link); text-decoration: underline; }
.catnav-acc-quiet { color: var(--cn-on-panel-muted); }

.catnav-login { flex-basis: auto; }
.catnav-login[open] { flex-basis: 100%; order: 2; }
.catnav-login > summary { list-style: none; }
.catnav-login > summary::-webkit-details-marker { display: none; }
.catnav-login > summary::after {
  content: "";
  width: 0.4em; height: 0.4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 0.15rem;
}
.catnav-login[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }

.catnav-login-form {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--cn-row);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
}
.catnav-login-form label { font-size: 0.8125rem; color: var(--cn-muted); }
.catnav-login-form input {
  height: 40px;
  padding: 0 0.6rem;
  border: 1px solid #c3cfbb;
  border-radius: 4px;
  font: inherit;
  color: var(--cn-ink);
}
.catnav-login-form input:focus { border-color: var(--cn-green-ink); outline: none; box-shadow: 0 0 0 2px var(--cn-tint); }
.catnav-login-form button {
  margin-top: 0.4rem;
  height: 40px;
  border: 0;
  border-radius: 4px;
  background: var(--cn-green-ink);
  color: #fff;
  font: inherit;
  font-weight: bold;
}
.catnav-login-form button:hover { background: #2f5304; }
.catnav-login-error { margin: 0 0 0.25rem; color: #a3240f; font-size: 0.875rem; }
.catnav-login-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.25rem 0 0; font-size: 0.8125rem; }
.catnav-login-links a { color: var(--cn-green-ink); }

/* ---------- ricerca ---------- */
.catnav-search {
  position: relative;
  margin-bottom: 0.75rem;
}
.catnav-search > .bi-search {
  position: absolute;
  left: 0.8rem; top: 50%;
  transform: translateY(-50%);
  color: var(--cn-muted);
  pointer-events: none;
}
.catnav-search input {
  width: 100%;
  height: 44px;
  padding: 0 2.6rem 0 2.3rem;
  border: 1px solid rgba(30, 58, 15, 0.25);
  border-radius: var(--cn-radius);
  background: var(--cn-row);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--cn-ink);
  -webkit-appearance: none;
  appearance: none;
}
.catnav-search input::-webkit-search-cancel-button { display: none; }
.catnav-search input::placeholder { color: var(--cn-muted); }
.catnav-search input:focus { border-color: var(--cn-focus); outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7); }
.catnav-search input:disabled { background: var(--cn-row); opacity: 0.6; }
.catnav-clear {
  position: absolute;
  right: 2px; top: 2px;
  width: 40px; height: 40px;
  border: 0;
  background: none;
  color: var(--cn-muted);
  border-radius: var(--cn-radius);
}
.catnav-clear:hover { color: var(--cn-ink); }

/* ---------- elenco (risultati ricerca) ---------- */
.catnav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--cn-row);
  border: 1px solid rgba(30, 58, 15, 0.18);
  border-radius: var(--cn-radius);
  overflow: hidden;
}
.catnav-list > li + li { border-top: 1px solid var(--cn-line); }

.catnav-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem 0.6rem 0.875rem;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--cn-ink);
  cursor: pointer;
  position: relative;
}
.catnav-row:hover { background: var(--cn-tint); color: var(--cn-ink); }
.catnav-row:focus-visible { outline-offset: -2px; }
.catnav-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* risultato ricerca = pagina corrente */
.catnav-row[aria-current="page"] {
  box-shadow: inset 4px 0 0 var(--cn-green);
  font-weight: bold;
  color: var(--cn-green-ink);
}

/* ---------- risultati ricerca ---------- */
.catnav-results .catnav-row { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.catnav-path { font-size: 0.8125rem; color: var(--cn-muted); line-height: 1.3; }
.catnav-results mark {
  padding: 0;
  background: var(--cn-tint);
  color: inherit;
  font-weight: bold;
  border-radius: 2px;
}
.catnav-results .catnav-row:hover mark { background: var(--cn-green-soft); }
.catnav-note {
  margin: 0.6rem 0.25rem 0;
  font-size: 0.8125rem;
  color: var(--cn-on-panel-muted);
}
.catnav-empty {
  padding: 1rem 0.875rem;
  background: var(--cn-row);
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  font-size: 0.9375rem;
}
.catnav-empty p { margin: 0 0 0.5rem; }
.catnav-empty a { color: var(--cn-green-ink); text-decoration: underline; }

/* ---------- lingue ---------- */
.catnav-langs {
  display: flex;
  gap: 0.25rem;
  margin: 1.25rem 0 0.5rem;
  padding: 0 0.25rem;
  font-size: 0.8125rem;
}
.catnav-langs a {
  min-width: 36px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cn-on-panel-muted);
  border-radius: 4px;
}
.catnav-langs a:hover { color: var(--cn-on-panel); background: rgba(255, 255, 255, 0.35); }
.catnav-langs a[aria-current="true"] {
  color: var(--cn-on-panel);
  font-weight: bold;
  box-shadow: inset 0 -2px 0 var(--cn-pipe-color);
}

.catnav-extras { margin-top: 0.75rem; }
.catnav-extras #reviews { width: 100%; border-color: var(--cn-line); border-radius: var(--cn-radius); }

/* ---------- drawer mobile / tablet ---------- */
@media (max-width: 991.98px) {
  .sidebar.catnav-sidebar { background: #fff; }
  /* la ricerca resta in vista mentre si scorre il drawer */
  .catnav-search {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -0.75rem 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--cn-panel-solid);
  }
  .catnav-search > .bi-search { left: 1.55rem; }
  .catnav-clear { right: calc(0.75rem + 2px); top: calc(0.5rem + 2px); }
}