/*
 * marca.css — componentes do tema na identidade "Cápsula".
 *
 * Só variáveis do tema: cor por `var(--wp--preset--color--<slug>)` e família por
 * `var(--wp--preset--font-family--display|mono)`. Nenhum código de cor literal.
 * Receita é o campo morango; cápsula é o campo menta; a tinta carvao veste os
 * dois. Forma do card-cápsula (raio 40/40/10/10 e aro de tinta na base).
 * Mobile primeiro.
 */

/* ------------------------------------------------------------ Ficha */

.dc-ficha {
	background: var(--wp--preset--color--morango);
	color: var(--wp--preset--color--carvao);
	font-family: var(--wp--preset--font-family--display);
	font-size: 16px;
	line-height: 1.6;
	text-wrap: pretty;
	overflow-wrap: anywhere;
	padding: 28px 20px;
	border-radius: 40px 40px 10px 10px;
	border-bottom: 6px solid color-mix(in oklch, var(--wp--preset--color--carvao) 22%, transparent);
}

/* A cápsula é dona do campo menta. */
.dc-ficha--capsula {
	background: var(--wp--preset--color--menta);
}

/* Resumo (tempo, rende, fabricante, intensidade): dado em DM Mono 14, em pílulas. */
.dc-ficha__resumo {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-ficha__resumo:not(:last-child) {
	margin-bottom: 24px;
}

.dc-ficha__resumo li {
	padding: 7px 14px;
	border-radius: 999px;
	background: color-mix(in oklch, var(--wp--preset--color--carvao) 10%, transparent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	line-height: 1.2;
}

.dc-ficha__resumo strong {
	font-weight: 500;
}

/* Títulos internos da ficha. */
.dc-ficha h2 {
	margin: 0 0 12px;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.05;
}

.dc-ficha h2:not(:first-child) {
	margin-top: 28px;
}

/* Ingredientes e preparo: corpo em 16 px, entrelinha de leitura. */
.dc-ficha__ingredientes,
.dc-ficha__preparo {
	margin: 0;
	padding-left: 1.25em;
	font-size: 16px;
	line-height: 1.6;
	text-wrap: pretty;
}

.dc-ficha__preparo {
	padding-left: 1.75em;
}

.dc-ficha__ingredientes li + li,
.dc-ficha__preparo li + li {
	margin-top: 8px;
}

.dc-ficha__ingredientes ::marker,
.dc-ficha__preparo ::marker {
	color: var(--wp--preset--color--carvao);
}

.dc-ficha__preparo ::marker {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
}

/* ------------------------------------------------------------ Filtro */

.dc-filtro {
	font-family: var(--wp--preset--font-family--display);
}

.dc-filtro__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dc-filtro__item {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	background: color-mix(in oklch, var(--wp--preset--color--carvao) 10%, transparent);
	color: var(--wp--preset--color--carvao);
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: transform 500ms cubic-bezier(.32, .72, 0, 1);
}

.dc-filtro__item:hover {
	transform: translateY(-2px);
}

/* Item ativo: preenchido em tinta, texto claro. */
.dc-filtro__item.is-ativo {
	background: var(--wp--preset--color--carvao);
	color: var(--wp--preset--color--leite);
}

/* Item sem receita: tinta mais clara (ainda ≥ 4,5:1) e o estado também pela forma. */
.dc-filtro__item.is-vazio {
	color: color-mix(in oklch, var(--wp--preset--color--carvao) 68%, transparent);
}

.dc-filtro__item.is-vazio.is-ativo {
	color: var(--wp--preset--color--leite);
}

/* Aviso "em breve" em pílula própria, no padrão do eyebrow. */
.dc-filtro__aviso {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: color-mix(in oklch, var(--wp--preset--color--carvao) 10%, transparent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------ Produto */

/* O parágrafo que envolve o link de produto não acrescenta espaçamento próprio. */
.dc-capsula__compra {
	margin: 0;
}

.dc-produto-link {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--wp--preset--color--carvao);
	color: var(--wp--preset--color--leite);
	font-family: var(--wp--preset--font-family--display);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 600ms cubic-bezier(.32, .72, 0, 1);
}

.dc-produto-link:hover {
	transform: translateY(-2px);
}

/* Foco visível em tudo que é clicável: anel de tinta com vão de 2px. */
.dc-filtro__item:focus-visible,
.dc-produto-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--carvao);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ Telas maiores */

@media (min-width: 600px) {
	.dc-ficha {
		padding: 40px;
	}

	.dc-ficha h2 {
		font-size: 40px;
	}
}

/* Movimento é opcional: quem pede menos movimento não recebe nenhum. */
@media (prefers-reduced-motion: reduce) {
	.dc-filtro__item,
	.dc-produto-link {
		transition: none;
	}

	.dc-filtro__item:hover,
	.dc-produto-link:hover {
		transform: none;
	}
}

/* ---------- Cabeçalho: logo ---------- */

.dc-logo {
	display: inline-block;
	color: inherit;
	line-height: 0;
}

.dc-logo svg {
	display: block;
	width: auto;
	height: 2.5rem;
}

.dc-logo:focus-visible {
	outline: 3px solid var(--wp--preset--color--carvao);
	outline-offset: 4px;
}

/* ---------- Cabeçalho: menu estático (sem JavaScript) ---------- */

.dc-nav {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	align-items: center;
}

.dc-nav p {
	margin: 0;
}

.dc-nav a {
	display: inline-block;
	padding-block: 0.75rem;
	color: var(--wp--preset--color--carvao);
	font-weight: 600;
	text-decoration: none;
}

.dc-nav a:focus-visible {
	outline: 3px solid var(--wp--preset--color--carvao);
	outline-offset: 4px;
}