/* Override Bootstrap code color variable */
:root {
  --bs-code-color: #17717f !important;  /* teal color for inline code */
}

/* Direct override for inline code elements */
code {
  color: #17717f !important;
}

/* Value box styling */
.bg-vb-success {
  color: var(--bs-success);
  background-color: rgba(var(--bs-success-rgb), 0.1);
  border-color: rgba(var(--bs-success-rgb), 0.3);
}

.bg-vb-info {
  color: var(--bs-info);
  background-color: rgba(var(--bs-info-rgb), 0.1);
  border-color: rgba(var(--bs-info-rgb), 0.3);
}

.bg-vb-warning {
  color: var(--bs-warning);
  background-color: rgba(var(--bs-warning-rgb), 0.1);
  border-color: rgba(var(--bs-warning-rgb), 0.3);
}

.bg-vb-danger {
  color: var(--bs-danger);
  background-color: rgba(var(--bs-danger-rgb), 0.1);
  border-color: rgba(var(--bs-danger-rgb), 0.3);
}

.bg-vb-primary {
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  border-color: rgba(var(--bs-primary-rgb), 0.3);
}

.bg-vb-secondary {
  color: var(--bs-secondary);
  background-color: rgba(var(--bs-secondary-rgb), 0.1);
  border-color: rgba(var(--bs-secondary-rgb), 0.3);
}

.card {
  --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
  --bs-card-bg: var(--bs-body-bg);
}

/* Hide titles with .notitle class */
section.notitle h1,
section.notitle h2,
section.notitle h3,
section.notitle h4,
section.notitle h5,
section.notitle h6 {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

section.level3.notitle h3 {
  display: none !important;
}

h1.notitle, h2.notitle, h3.notitle, h4.notitle, h5.notitle, h6.notitle {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* TOC styling - override Quarto defaults with theme colors */
div.sidebar-item-container nav[role=doc-toc] ul li a {
  color: #5C2129 !important;
}

div.sidebar-item-container nav[role=doc-toc] ul li a:hover {
  color: #9f7d35 !important;
}

div.sidebar-item-container nav[role=doc-toc] ul li a.active {
  color: #9f7d35 !important;
  font-weight: 600;
  border-left-color: #9f7d35 !important;
}

#quarto-margin-sidebar nav[role=doc-toc] ul li a,
#quarto-sidebar-toc nav ul li a {
  color: #5C2129 !important;
}

#quarto-margin-sidebar nav[role=doc-toc] ul li a:hover,
#quarto-sidebar-toc nav ul li a:hover {
  color: #9f7d35 !important;
}

#quarto-margin-sidebar nav[role=doc-toc] ul li a.active,
#quarto-sidebar-toc nav ul li a.active {
  color: #9f7d35 !important;
  font-weight: 600;
}

/* Navbar: un colore per gruppo tematico (palette Cariparma, vedi parma-theme.scss).
   La navbar e' scura (#517699, default Quarto): servono le tinte CHIARE (_lg) della palette.
   NB: l'id delle tendine e' generato da Quarto dal testo della voce
   (es. "Scuola" -> #nav-menu-scuola): se rinomini una voce, aggiorna qui.

   Come aggiungere un nuovo gruppo tematico:
   1. in _quarto.yml (website > navbar > left) crea la voce, con o senza `menu:`.
      Per il testo delle voci di gruppo evita lettere accentate (l'id resta prevedibile);
   2. scegli una tinta chiara: le _lg della palette in parma-theme.scss sono poco
      contrastate su questo sfondo (contrasto < 2.5), meglio schiarirle un po' come
      fatto per il verde qui sotto; controlla il contrasto (es. contrast-ratio.com);
   3. aggiungi qui una riga:
      - voce con tendina  -> #nav-menu-<testo-in-minuscolo-con-trattini> { color: ...; }
        es. "Giovani e lavoro" -> #nav-menu-giovani-e-lavoro
      - voce singola      -> .navbar a[href$="<nome_file>.html"] { color: ...; }
   4. piu' voci dello stesso tema = stesso colore (come Scuola + Giovani qui sotto);
   5. se non sei sicura dell'id, aprilo da docs/index.html cercando "nav-menu-". */
#nav-menu-demografia { color: #f7da7b; }                   /* demografia: ylw_lg */
#nav-menu-scuola,
.navbar a[href$="giovani_lavoro.html"] { color: #b7e4d0; } /* scuola + giovani: verde menta (grn_lg schiarito, contrasto ~3.4) */