/* ============================================================
   Ícones customizados — piloto (treinamento.chanzo.com.br)
   Substitui o glifo de fonte (FontAwesome) por um SVG próprio via
   CSS mask, só nos 16 conceitos abaixo, escolhidos por terem uma
   correspondência clara e legível em tamanho pequeno no pacote
   enviado (icones_chanzo_svg). fa-globe e fa-envelope ficaram de
   fora de propósito: o pacote só tinha versões ilegíveis/irrelevantes
   pra esses dois — mantidos no ícone padrão do FontAwesome.
   Não altera nenhum HTML/PHP — reversível removendo o <link>
   deste arquivo em includes/header.php.
   ============================================================ */

:root {
  --cz-icon-book:                url('../icones/book.svg');
  --cz-icon-chalkboard-teacher:  url('../icones/chalkboard-teacher.svg');
  --cz-icon-graduation-cap:      url('../icones/graduation-cap.svg');
  --cz-icon-laptop-house:        url('../icones/laptop-house.svg');
  --cz-icon-cog:                 url('../icones/cog.svg');
  --cz-icon-users:               url('../icones/users.svg');
  --cz-icon-user-plus:           url('../icones/user-plus.svg');
  --cz-icon-user-circle:         url('../icones/user-circle.svg');
  --cz-icon-car:                 url('../icones/car.svg');
  --cz-icon-truck:               url('../icones/truck.svg');
  --cz-icon-credit-card:         url('../icones/credit-card.svg');
  --cz-icon-hand-holding-heart:  url('../icones/hand-holding-heart.svg');
  --cz-icon-warehouse:           url('../icones/warehouse.svg');
  --cz-icon-qrcode:              url('../icones/qrcode.svg');
  --cz-icon-shopping-cart:       url('../icones/shopping-cart.svg');
  --cz-icon-briefcase:           url('../icones/briefcase.svg');
}

/* 1) remove o glifo de fonte só nos ícones tratados */
i.fa-book::before, i.fa-book-open::before,
i.fa-chalkboard-teacher::before, i.fa-graduation-cap::before,
i.fa-laptop-house::before, i.fa-cog::before, i.fa-users::before,
i.fa-user-plus::before, i.fa-user-circle::before, i.fa-car::before,
i.fa-truck::before, i.fa-credit-card::before, i.fa-hand-holding-heart::before,
i.fa-warehouse::before, i.fa-qrcode::before, i.fa-shopping-cart::before,
i.fa-briefcase::before {
  content: "";
}

/* 2) desenha o ícone customizado via ::after, tamanho relativo ao
      texto (1em) — funciona em qualquer lugar do sistema onde a
      classe apareça, sem precisar de chip/wrapper especial */
i.fa-book::after, i.fa-book-open::after,
i.fa-chalkboard-teacher::after, i.fa-graduation-cap::after,
i.fa-laptop-house::after, i.fa-cog::after, i.fa-users::after,
i.fa-user-plus::after, i.fa-user-circle::after, i.fa-car::after,
i.fa-truck::after, i.fa-credit-card::after, i.fa-hand-holding-heart::after,
i.fa-warehouse::after, i.fa-qrcode::after, i.fa-shopping-cart::after,
i.fa-briefcase::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.14em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
i.fa-book::after,
i.fa-book-open::after          { -webkit-mask-image: var(--cz-icon-book); mask-image: var(--cz-icon-book); }
i.fa-chalkboard-teacher::after { -webkit-mask-image: var(--cz-icon-chalkboard-teacher); mask-image: var(--cz-icon-chalkboard-teacher); }
i.fa-graduation-cap::after     { -webkit-mask-image: var(--cz-icon-graduation-cap); mask-image: var(--cz-icon-graduation-cap); }
i.fa-laptop-house::after       { -webkit-mask-image: var(--cz-icon-laptop-house); mask-image: var(--cz-icon-laptop-house); }
i.fa-cog::after                { -webkit-mask-image: var(--cz-icon-cog); mask-image: var(--cz-icon-cog); }
i.fa-users::after              { -webkit-mask-image: var(--cz-icon-users); mask-image: var(--cz-icon-users); }
i.fa-user-plus::after          { -webkit-mask-image: var(--cz-icon-user-plus); mask-image: var(--cz-icon-user-plus); }
i.fa-user-circle::after        { -webkit-mask-image: var(--cz-icon-user-circle); mask-image: var(--cz-icon-user-circle); }
i.fa-car::after                { -webkit-mask-image: var(--cz-icon-car); mask-image: var(--cz-icon-car); }
i.fa-truck::after              { -webkit-mask-image: var(--cz-icon-truck); mask-image: var(--cz-icon-truck); }
i.fa-credit-card::after        { -webkit-mask-image: var(--cz-icon-credit-card); mask-image: var(--cz-icon-credit-card); }
i.fa-hand-holding-heart::after { -webkit-mask-image: var(--cz-icon-hand-holding-heart); mask-image: var(--cz-icon-hand-holding-heart); }
i.fa-warehouse::after          { -webkit-mask-image: var(--cz-icon-warehouse); mask-image: var(--cz-icon-warehouse); }
i.fa-qrcode::after             { -webkit-mask-image: var(--cz-icon-qrcode); mask-image: var(--cz-icon-qrcode); }
i.fa-shopping-cart::after      { -webkit-mask-image: var(--cz-icon-shopping-cart); mask-image: var(--cz-icon-shopping-cart); }
i.fa-briefcase::after          { -webkit-mask-image: var(--cz-icon-briefcase); mask-image: var(--cz-icon-briefcase); }

/* 3) chip suave nos ícones de bloco do menu principal (13 blocos) —
      .proj-grupo__icone já era um chip tingido com a cor do grupo
      (--pg-cor); nav-block-icon ganha o mesmo tratamento agora,
      deixando o nível mais visível do menu consistente com os
      subgrupos que já tinham esse acabamento */
i.nav-block-icon {
  width: 26px;
  height: 26px;
  font-size: 1rem;
  border-radius: 8px;
  background: var(--cz-50, #eef6f2);
  color: var(--cz-500, #1D9E75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  transition: background-color .15s ease, transform .15s ease;
}
.nav-block-header:hover i.nav-block-icon { background: var(--cz-100, #d7ece4); transform: translateY(-1px); }
i.nav-block-icon::after { width: .95em; height: .95em; vertical-align: 0; }

/* ajusta o tamanho do glifo dentro do chip que já existia (subgrupos de Projetos) */
.proj-grupo__icone i::after { width: 13px; height: 13px; vertical-align: 0; }