/*!
 * CzarCommerce Typography — FASE 12.2
 * -----------------------------------------------------------------------------
 * Sistema tipográfico próprio. Aplica hierarquia h1-h6, parágrafos, links,
 * blockquote, code, small e classes utility opt-in (.czar-h1 .. .czar-text-lg).
 *
 * Convivência com legacy (ver docs/design-system.md):
 *   - Element selectors usam ESPECIFICIDADE BAIXA (sem :is(), sem !important,
 *     sem aninhamento). Onde houver regra legacy mais específica
 *     (ex.: .single-product h1), ela continua ganhando.
 *   - Onde NÃO houver regra específica, esta camada vira o default visual.
 *   - Classes .czar-* são opt-in para código novo (patterns próprios da #34,
 *     componentes da Fase 12.3+).
 *
 * Escala modular: 1.250 (major third), base 16px.
 *   h1 = 2.488rem (~40px)
 *   h2 = 1.953rem (~31px)
 *   h3 = 1.563rem (~25px)
 *   h4 = 1.25rem  (20px)
 *   h5 = 1rem     (16px)
 *   h6 = 0.8rem   (~13px)
 */

:root {
	--czar-font-family-base:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--czar-font-family-heading: var(--czar-font-family-base);
	--czar-font-family-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--czar-font-size-xs:   0.75rem;     /* 12px */
	--czar-font-size-sm:   0.875rem;    /* 14px */
	--czar-font-size-md:   1rem;        /* 16px - base */
	--czar-font-size-lg:   1.125rem;    /* 18px */
	--czar-font-size-xl:   1.25rem;     /* 20px */
	--czar-font-size-2xl:  1.563rem;    /* ~25px */
	--czar-font-size-3xl:  1.953rem;    /* ~31px */
	--czar-font-size-4xl:  2.488rem;    /* ~40px */

	--czar-font-weight-regular: 400;
	--czar-font-weight-medium:  500;
	--czar-font-weight-semibold: 600;
	--czar-font-weight-bold:    700;

	--czar-line-height-tight:  1.2;
	--czar-line-height-snug:   1.35;
	--czar-line-height-normal: 1.5;
	--czar-line-height-relaxed: 1.65;

	--czar-letter-spacing-tight: -0.01em;
	--czar-letter-spacing-normal: 0;
	--czar-letter-spacing-wide:  0.04em;
}

/* ---- Hierarquia de headings (element selectors) ----
   Especificidade 0,0,0,1 — qualquer regra legacy mais específica vence. */
h1 {
	font-family: var(--czar-font-family-heading);
	font-size: var(--czar-font-size-4xl);
	font-weight: var(--czar-font-weight-bold);
	line-height: var(--czar-line-height-tight);
	letter-spacing: var(--czar-letter-spacing-tight);
	color: var(--czar-color-text);
}

h2 {
	font-family: var(--czar-font-family-heading);
	font-size: var(--czar-font-size-3xl);
	font-weight: var(--czar-font-weight-bold);
	line-height: var(--czar-line-height-tight);
	letter-spacing: var(--czar-letter-spacing-tight);
	color: var(--czar-color-text);
}

h3 {
	font-family: var(--czar-font-family-heading);
	font-size: var(--czar-font-size-2xl);
	font-weight: var(--czar-font-weight-semibold);
	line-height: var(--czar-line-height-snug);
	color: var(--czar-color-text);
}

h4 {
	font-family: var(--czar-font-family-heading);
	font-size: var(--czar-font-size-xl);
	font-weight: var(--czar-font-weight-semibold);
	line-height: var(--czar-line-height-snug);
	color: var(--czar-color-text);
}

h5 {
	font-family: var(--czar-font-family-heading);
	font-size: var(--czar-font-size-md);
	font-weight: var(--czar-font-weight-semibold);
	line-height: var(--czar-line-height-snug);
	color: var(--czar-color-text);
}

h6 {
	font-family: var(--czar-font-family-heading);
	font-size: var(--czar-font-size-xs);
	font-weight: var(--czar-font-weight-semibold);
	line-height: var(--czar-line-height-snug);
	letter-spacing: var(--czar-letter-spacing-wide);
	text-transform: uppercase;
	color: var(--czar-color-text);
}

/* ---- Texto corrido ---- */
p {
	font-family: var(--czar-font-family-base);
	font-size: var(--czar-font-size-md);
	font-weight: var(--czar-font-weight-regular);
	line-height: var(--czar-line-height-relaxed);
	color: var(--czar-color-text);
}

/* ---- Herança de cor em wrappers WoodMart (marquee + color schemes) ----
   Blocos WoodMart definem a cor do texto no WRAPPER e contam com HERANÇA
   para os filhos:
     - wd/marquee   -> `color: colorCode` em `.wd-marquee`
     - color scheme -> `color: var(--wd-text-color)` em `.color-scheme-light`
   A regra `p` acima (seletor de elemento) fura essa herança e força
   var(--czar-color-text), deixando o texto escuro sobre faixas/seções de
   fundo colorido (ex.: marquee "Ganhe 15%..." e o quadro "alimentar
   fresco"). Devolvemos a herança para que o texto siga a cor do wrapper —
   sem mexer no fundo. Um colorCode explícito no bloco (seletor #id) ainda
   vence, por ter especificidade maior. */
.wd-marquee p,
[class*="color-scheme-light"] .wp-block-wd-paragraph {
	color: inherit;
}

/* ---- Grid de categorias no prefooter (cms_block "Prefooter") ----
   Cada foto é um link pra categoria do animal; a legenda (.czar-cat-cap)
   fica escondida e aparece no hover, com leve scrim pra leitura do texto
   branco (color-scheme-light) sobre a foto. */
.czar-cat-cap {
	width: 100%;
	padding: 8px 10px;
	border-radius: 10px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.15));
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.wp-block-wd-cover:hover .czar-cat-cap {
	opacity: 1;
	transform: none;
}

small {
	font-size: var(--czar-font-size-sm);
	line-height: var(--czar-line-height-normal);
}

/* ---- Links ---- */
a {
	color: var(--czar-color-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease;
}

a:hover,
a:focus-visible {
	color: var(--czar-color-accent);
	text-decoration-thickness: 2px;
}

/* ---- Blockquote ---- */
blockquote {
	border-left: 3px solid var(--czar-color-primary);
	padding-left: var(--czar-space-4);
	font-style: italic;
	color: var(--czar-color-text);
}

/* ---- Code inline e blocks ---- */
code,
kbd,
samp {
	font-family: var(--czar-font-family-mono);
	font-size: 0.9em;
	background-color: var(--czar-color-surface);
	padding: 0.1em 0.3em;
	border-radius: var(--czar-radius-sm);
}

pre {
	font-family: var(--czar-font-family-mono);
	font-size: var(--czar-font-size-sm);
	line-height: var(--czar-line-height-normal);
	background-color: var(--czar-color-surface);
	padding: var(--czar-space-4);
	border-radius: var(--czar-radius-md);
	overflow-x: auto;
}

pre code {
	background: none;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
}

/* ---- HR ---- */
hr {
	border: 0;
	border-top: 1px solid var(--czar-color-surface);
	margin: var(--czar-space-6) 0;
}

/* ---- Classes utility opt-in (alta especificidade via classe) ---- */
.czar-h1 { font: var(--czar-font-weight-bold) var(--czar-font-size-4xl) / var(--czar-line-height-tight) var(--czar-font-family-heading); letter-spacing: var(--czar-letter-spacing-tight); }
.czar-h2 { font: var(--czar-font-weight-bold) var(--czar-font-size-3xl) / var(--czar-line-height-tight) var(--czar-font-family-heading); letter-spacing: var(--czar-letter-spacing-tight); }
.czar-h3 { font: var(--czar-font-weight-semibold) var(--czar-font-size-2xl) / var(--czar-line-height-snug) var(--czar-font-family-heading); }
.czar-h4 { font: var(--czar-font-weight-semibold) var(--czar-font-size-xl) / var(--czar-line-height-snug) var(--czar-font-family-heading); }
.czar-h5 { font: var(--czar-font-weight-semibold) var(--czar-font-size-md) / var(--czar-line-height-snug) var(--czar-font-family-heading); }
.czar-h6 { font: var(--czar-font-weight-semibold) var(--czar-font-size-xs) / var(--czar-line-height-snug) var(--czar-font-family-heading); letter-spacing: var(--czar-letter-spacing-wide); text-transform: uppercase; }

.czar-text-xs { font-size: var(--czar-font-size-xs); }
.czar-text-sm { font-size: var(--czar-font-size-sm); }
.czar-text-md { font-size: var(--czar-font-size-md); }
.czar-text-lg { font-size: var(--czar-font-size-lg); }
.czar-text-xl { font-size: var(--czar-font-size-xl); }

.czar-text-weight-regular  { font-weight: var(--czar-font-weight-regular); }
.czar-text-weight-medium   { font-weight: var(--czar-font-weight-medium); }
.czar-text-weight-semibold { font-weight: var(--czar-font-weight-semibold); }
.czar-text-weight-bold     { font-weight: var(--czar-font-weight-bold); }

.czar-text-muted    { color: color-mix(in srgb, var(--czar-color-text) 70%, transparent); }
.czar-text-primary  { color: var(--czar-color-primary); }
.czar-text-accent   { color: var(--czar-color-accent); }
.czar-text-sale     { color: var(--czar-color-sale); }

.czar-text-lead {
	font-size: var(--czar-font-size-lg);
	line-height: var(--czar-line-height-relaxed);
	font-weight: var(--czar-font-weight-regular);
}

.czar-link {
	color: var(--czar-color-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.czar-link:hover,
.czar-link:focus-visible {
	color: var(--czar-color-accent);
}