/* ==========================================================================
   cdc-icons.css — Sistema de ícones
   --------------------------------------------------------------------------
   Regras de uso do ícone: tamanho, alinhamento, cor, e os componentes que
   dependem dele (estrela de avaliação, botão de ícone, ícone social).

   Gramática, em uma frase: contorno de 1.75 na grade 24, três tamanhos,
   cor sempre herdada do texto ao lado.
   ========================================================================== */

/* ==========================================================================
   1. BASE
   ========================================================================== */

.cdc-i {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
  /* O ícone acompanha a cor do texto — nunca traz cor própria. É isso que faz
     o mesmo ícone servir em botão vermelho, em link escuro e no rodapé branco
     sem precisar de variante. */
  color: inherit;
}

.cdc-i--16 { block-size: var(--cdc-icon-xs); inline-size: var(--cdc-icon-xs); }
.cdc-i--20 { block-size: var(--cdc-icon-sm); inline-size: var(--cdc-icon-sm); }
.cdc-i--24 { block-size: var(--cdc-icon-md); inline-size: var(--cdc-icon-md); }

/* Traço não engorda quando o SVG é escalado por CSS. */
.cdc-i:not(.cdc-i--solid) {
  vector-effect: non-scaling-stroke;
}

/* Alinhamento óptico: a caixa do ícone é quadrada, a letra não. Sem esse
   ajuste o ícone parece 1px alto ao lado de texto de corpo. */
.cdc-i--16 { margin-block-start: -1px; }

/* Modificadores de cor, para os poucos casos em que o ícone precisa destoar
   do texto — nunca por decoração, só por significado. */
.cdc-i--brand   { color: var(--cdc-text-brand); }
.cdc-i--muted   { color: var(--cdc-text-muted); }
.cdc-i--accent  { color: var(--cdc-amber-700); }
.cdc-i--success { color: var(--cdc-success); }
.cdc-i--danger  { color: var(--cdc-danger); }

/* ==========================================================================
   2. ÍCONE + TEXTO
   ========================================================================== */

/* O par ícone-texto aparece dezenas de vezes no tema (autor, data, categoria,
   comentários, tempo, rendimento). Um componente só. */
.cdc-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--cdc-space-1);
  min-height: var(--cdc-tap-min);
  color: var(--cdc-brand-deep);
  font-size: var(--cdc-text-sm);
  line-height: var(--cdc-leading-snug);
}

.cdc-meta-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cdc-space-2) var(--cdc-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cdc-meta-list > li { list-style: none; margin: 0; }

/* ==========================================================================
   3. BOTÃO DE ÍCONE
   ========================================================================== */

.cdc-iconbtn {
  display: inline-grid;
  place-items: center;
  width: var(--cdc-tap);
  height: var(--cdc-tap);
  padding: 0;
  border: 0;
  border-radius: var(--cdc-radius-circle, 50%);
  background: transparent;
  color: var(--cdc-brand-dark);
  cursor: pointer;
  transition: background var(--cdc-dur-fast) var(--cdc-ease), color var(--cdc-dur-fast) var(--cdc-ease);
}
.cdc-iconbtn:hover { background: var(--cdc-tint-action-08); }
.cdc-iconbtn:focus-visible { outline: 3px solid var(--cdc-focus); outline-offset: 2px; }

.cdc-iconbtn--filled { background: var(--cdc-brand); color: var(--cdc-text-on-brand); }
.cdc-iconbtn--filled:hover { background: var(--cdc-red-700); }

.cdc-iconbtn--outline { border: 1px solid var(--cdc-border); background: var(--cdc-surface); }

/* Estado ativo de ação alternável (salvar, curtir): o ícone passa a ser
   preenchido, além de mudar de cor. Nunca só a cor. */
.cdc-iconbtn[aria-pressed="true"] .cdc-i,
.cdc-btn.is-done .cdc-i,
.is-active > .cdc-i {
  fill: currentColor;
}

/* ==========================================================================
   4. AVALIAÇÃO EM ESTRELAS
   --------------------------------------------------------------------------
   Substitui o caractere ★ (U+2605), que muda de peso e de cor conforme a fonte
   do aparelho — em alguns Android ele sai fino e cinza, em outros vira emoji
   colorido. Duas camadas do mesmo ícone, a de cima recortada por largura.
   ========================================================================== */

.cdc-rating {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  line-height: 0;
}

.cdc-rating-track,
.cdc-rating-fill {
  display: flex;
  gap: var(--cdc-space-05, 2px);
}

.cdc-rating-track { color: var(--cdc-gray-400); }

.cdc-rating-fill {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--cdc-amber-500);
}

.cdc-rating-fill .cdc-i { fill: currentColor; }

.cdc-rating-count {
  margin-inline-start: var(--cdc-space-2);
  font-size: var(--cdc-text-xs);
  color: var(--cdc-text-muted);
  vertical-align: middle;
}

/* Tamanho maior no bloco "Avalie esta receita", onde a estrela é o alvo de
   toque e não um indicador. */
.avalie .cdc-rating .cdc-i,
.cdc-rating--lg .cdc-i { width: var(--cdc-space-8); height: var(--cdc-space-8); }

/* ==========================================================================
   5. ÍCONES DE MARCA (redes sociais)
   ========================================================================== */

.cdc-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cdc-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cdc-social > li { list-style: none; margin: 0; }

.cdc-social-link {
  display: grid;
  place-items: center;
  width: var(--cdc-tap-min);
  height: var(--cdc-tap-min);
  border-radius: var(--cdc-radius-circle, 50%);
  background: var(--cdc-tint-on-dark-12, rgba(255, 255, 255, .12));
  color: var(--cdc-gray-0, #fff);
  transition: background var(--cdc-dur-fast) var(--cdc-ease), transform var(--cdc-dur-fast) var(--cdc-ease);
}
.cdc-social-link:hover { background: var(--cdc-tint-on-dark-24); transform: translateY(-2px); }
.cdc-social-link:focus-visible { outline: 3px solid var(--cdc-gray-0, #fff); outline-offset: 3px; }

/* Sobre fundo claro. */
.cdc-social--light .cdc-social-link {
  background: var(--cdc-gray-50);
  color: var(--cdc-brand-dark);
}
.cdc-social--light .cdc-social-link:hover { background: var(--cdc-red-50); }

/* ==========================================================================
   6. SUBSTITUIÇÃO DOS ÍCONES DE FUNDO DO TEMA
   --------------------------------------------------------------------------
   O style.css desenha vários ícones como `background-image` com SVG embutido e
   cor cravada na URL — o que impede herança de cor, impede estado de foco e
   obriga a duplicar a URL inteira para cada variação. Aqui as ocorrências mais
   visíveis passam a usar `mask`, que colore pelo `background-color` e portanto
   responde a `currentColor` como qualquer outro ícone.
   ========================================================================== */

.cdc-mask {
  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;
}

/* Seta do menu principal e do "Mais": mesmo traço dos demais ícones. */
@media (min-width: 1024px) {
  header nav > ul > li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-inline-start: var(--cdc-space-1);
    vertical-align: -3px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform var(--cdc-dur-fast) var(--cdc-ease);
  }

  header nav > ul > li.menu-item-has-children:hover > a::after,
  header nav > ul > li.menu-item-has-children:focus-within > a::after {
    transform: rotate(180deg);
  }

  /* Último item do menu ("Mais"): sinal de mais, não seta. */
  header nav > ul > li:last-child > a::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    transform: none !important;
  }

  /* Desliga as setas de fundo originais, agora redundantes. */
  header nav > ul > li > a { background-image: none; }
}

/* Botão de abrir/fechar o acordeão de preparo. */
.content-info .accordeon button {
  background-image: none;
  background-color: transparent;
  display: grid;
  place-items: center;
}
.content-info .accordeon button::before {
  content: "";
  width: var(--cdc-space-8); height: var(--cdc-space-8);
  background-color: var(--cdc-brand-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 13.5 4-4 4 4'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 13.5 4-4 4 4'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--cdc-dur-base) var(--cdc-ease);
}
.content-info .accordeon.inactive button::before { transform: rotate(180deg); }

/* Botão de excluir do cartão de receita salva. */
.receita-small-info button,
.receita-medium-info button,
.receita-big-info button {
  background-image: none;
  display: grid;
  place-items: center;
  color: var(--cdc-text-muted);
}
.receita-small-info button::before,
.receita-medium-info button::before,
.receita-big-info button::before {
  content: "";
  block-size: var(--cdc-icon-sm); inline-size: var(--cdc-icon-sm);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h15M9.5 6.5V4.5h5v2M6.5 6.5l.8 12a1.5 1.5 0 0 0 1.5 1.4h6.4a1.5 1.5 0 0 0 1.5-1.4l.8-12'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h15M9.5 6.5V4.5h5v2M6.5 6.5l.8 12a1.5 1.5 0 0 0 1.5 1.4h6.4a1.5 1.5 0 0 0 1.5-1.4l.8-12'/%3E%3C/svg%3E") no-repeat center / contain;
}
.receita-small-info button:hover::before,
.receita-medium-info button:hover::before,
.receita-big-info button:hover::before { background-color: var(--cdc-danger); }

/* Marcador de ingrediente já separado. */
.content-text-shadow ul li input:checked + i {
  background-color: var(--cdc-amber-700);
  background-image: none;
  border-color: var(--cdc-amber-700);
  position: relative;
}
.content-text-shadow ul li input:checked + i::before {
  content: "";
  position: absolute;
  inset: 1px;
  background-color: var(--cdc-gray-0, #fff);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center / 80%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center / 80%;
}

@media (prefers-reduced-motion: reduce) {
  .cdc-social-link:hover { transform: none; }
  .content-info .accordeon button::before,
  header nav > ul > li.menu-item-has-children > a::after { transition: none; }
}

/* ==========================================================================
   NORMALIZAÇÃO DOS SVG INLINE DOS TEMPLATES
   --------------------------------------------------------------------------
   92 SVG estão escritos direto no HTML dos templates, em cerca de 20
   combinações de tamanho e viewBox: `width="24" height="24"`,
   `width="20" height="18"`, `width="16" height="15" viewBox="0 0 25 24"`,
   alguns só com `width`, um com `width="2"`. O mesmo conceito — relógio,
   marcador, compartilhar — aparece com três pesos visuais na mesma tela.

   Editar 92 SVG em 14 arquivos PHP não é opção: o `single-receita.php` não é
   aberto por decisão de projeto, e o ganho não justifica o risco.

   A correção alinha pela ALTURA ÓPTICA, não pela caixa. `block-size` fixo com
   `inline-size: auto` faz todo ícone ocupar a mesma altura na linha —
   que é o que o olho lê como alinhamento — e preserva a proporção dos que não
   são quadrados. Ícone esticado seria pior que ícone desalinhado.
   ========================================================================== */

/* Ícone de apoio ao lado de texto: metadados, breadcrumb, legendas. */
.content-subtitle-info svg,
.content .culinaria svg,
.receita-small-info svg,
.receita-medium-info svg,
.receita-big-info svg,
.content-info .comments svg {
  block-size: var(--cdc-icon-xs);
  inline-size: auto;
  flex: 0 0 auto;
  display: block;
}

/* Ícone dentro de controle: botão, campo, ação. Acompanha a cor do texto. */
.btn-cta svg,
.content .caption svg,
.content-info .share svg,
.content-info .comments form button svg,
.archive .read-more svg,
#footer-lgpd button svg {
  block-size: var(--cdc-icon-sm);
  inline-size: auto;
  flex: 0 0 auto;
  display: block;
}

/* Ícone de cabeçalho de seção: maior, ancora o título. */
.content-text-shadow h2 svg,
.content-info .accordeon h2 svg {
  block-size: var(--cdc-icon-md);
  inline-size: auto;
  flex: 0 0 auto;
}

/* Ícone do cabeçalho do site. */
header .action-btn svg {
  block-size: var(--cdc-icon-md);
  inline-size: auto;
}

/* --------------------------------------------------------------------------
   COR DO ÍCONE.
   Boa parte dos SVG do tema tem `fill` cravado no path (`#881813`, `#5B1311`,
   `#494949`, `#fff`). Cravado, ele não responde a estado: o ícone continua
   vermelho quando o botão fica vermelho, e some.

   `fill: currentColor` no path resolve — o ícone passa a herdar a cor do
   texto, como qualquer outra letra da linha.
   -------------------------------------------------------------------------- */
.btn-cta svg path,
.content .caption button svg path,
.content-info .share button svg path,
.content-info .share a svg path,
.content-info .comments form button svg path,
.cdc-btn svg path,
.cdc-tab svg path,
.cdc-fab svg path {
  fill: currentColor;
}

/* Ícone decorativo nunca deve ser anunciado nem receber foco. */
svg[aria-hidden="true"] { pointer-events: none; }