/*
Theme Name: Mestre — Academia Brasileira de Voice AI
Theme URI: https://mestreasterisk.io
Author: Mestre — Academia Brasileira de Voice AI
Author URI: https://mestreasterisk.io
Description: Tema custom (block theme/FSE) da Mestre — Academia Brasileira de Voice AI (mestreasterisk.io). Core Web Vitals verdes no mobile, WCAG 2.2 AA, LGPD by design.
Version: 0.6.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mestreasterisk
Tags: full-site-editing, block-themes, blog, accessibility-ready
*/

/* ==========================================================================
   MESA-150 — Aliases de tokens legados → tokens canônicos MESA-142
   Permite que templates e padrões existentes continuem funcionando enquanto
   migram gradualmente para os novos slugs.
   ========================================================================== */

:root {
	/* Superfície e texto */
	--wp--preset--color--background:         var(--wp--preset--color--brand-surface);
	--wp--preset--color--background-subtle:  var(--wp--preset--color--brand-elevated);
	--wp--preset--color--text:               var(--wp--preset--color--brand-ink);
	--wp--preset--color--text-muted:         var(--wp--preset--color--brand-text-secondary);
	--wp--preset--color--border:             var(--wp--preset--color--brand-border);

	/* Acento → pilar Voice AI (cyan) como cor de ação */
	--wp--preset--color--accent:             var(--wp--preset--color--pilar-voice-ai);
	--wp--preset--color--accent-strong:      var(--wp--preset--color--pilar-voice-ai-dark);

	/* Código — fundo sempre escuro independente do modo */
	--wp--preset--color--code-bg:            #0A0A0A;
	--wp--preset--color--code-text:          #E4E4E7;

	/* Pilar BG aliases (antigo sistema fg/bg → novo token único) */
	--wp--preset--color--pilar-voice-ai-bg:           var(--wp--preset--color--pilar-voice-ai);
	--wp--preset--color--pilar-ai-telephony-bg:        var(--wp--preset--color--pilar-ai-telephony);
	--wp--preset--color--pilar-conversational-ai-bg:   var(--wp--preset--color--pilar-conversational-ai);
	--wp--preset--color--pilar-voice-ai-text:          #FFFFFF;
	--wp--preset--color--pilar-ai-telephony-text:      #FFFFFF;
	--wp--preset--color--pilar-conversational-ai-text: #0A0A0A;

	/* Aliases mestre-* (usados nos badges de pilar e dificuldade) */
	--mestre-pillar-voice:     var(--wp--preset--color--pilar-voice-ai);
	--mestre-pillar-telephony: var(--wp--preset--color--pilar-ai-telephony);
	--mestre-pillar-conv:      var(--wp--preset--color--pilar-conversational-ai);
	--mestre-card-alt:         var(--wp--preset--color--brand-elevated);
	--mestre-muted:            var(--wp--preset--color--brand-text-secondary);
	--mestre-border:           var(--wp--preset--color--brand-border);
	--mestre-subtle:           var(--wp--preset--color--brand-text-tertiary);
}

/* WP utility classes para slugs removidos da palette — backward compat */
.has-background-background-color        { background-color: var(--wp--preset--color--brand-surface) !important; }
.has-background-subtle-background-color { background-color: var(--wp--preset--color--brand-elevated) !important; }
.has-text-muted-color                   { color: var(--wp--preset--color--brand-text-secondary) !important; }
.has-border-background-color            { border-color: var(--wp--preset--color--brand-surface) !important; }

/* ==========================================================================
   MESA-133 — Logo / Wordmark
   ========================================================================== */

.ma-site-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--wp--preset--color--brand-ink);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--wordmark-header, 18px);
	line-height: 1;
	letter-spacing: -0.02em;
	flex-shrink: 0;
}

.ma-site-logo:hover,
.ma-site-logo:focus-visible {
	text-decoration: none;
	opacity: 0.85;
}

.ma-site-logo:focus-visible {
	outline: 2px solid var(--wp--preset--color--pilar-voice-ai);
	outline-offset: 3px;
	border-radius: 4px;
}

.ma-logo-mark {
	display: block;
	flex-shrink: 0;
}

.ma-wordmark {
	display: inline-block;
	font-family: var(--wp--preset--font-family--inter, sans-serif);
}

/* ==========================================================================
   MESA-133 — Header nav: 5 itens, static HTML, sem @wordpress/interactivity.
   Mobile-first: flex-wrap; desktop: inline row.
   ========================================================================== */

.ma-header-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.125rem;
}

.ma-header-nav a {
	color: var(--wp--preset--color--brand-text-secondary);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.875rem;
	padding: 0.375rem 0.625rem;
	border-radius: 0.375rem;
	transition: color 150ms ease-out, background-color 150ms ease-out;
	white-space: nowrap;
}

.ma-header-nav a:hover {
	color: var(--wp--preset--color--brand-ink);
	background-color: var(--wp--preset--color--brand-elevated);
}

.ma-header-nav a:focus-visible {
	outline: 2px solid var(--wp--preset--color--pilar-voice-ai);
	outline-offset: 2px;
	color: var(--wp--preset--color--brand-ink);
}

/* Pilar links com tint colorido no hover */
.ma-header-nav a[href*="/voice-ai/"]:hover         { background-color: rgba(6, 182, 212, 0.08); color: var(--wp--preset--color--pilar-voice-ai); }
.ma-header-nav a[href*="/ai-telephony/"]:hover      { background-color: rgba(168, 85, 247, 0.08); color: var(--wp--preset--color--pilar-ai-telephony); }
.ma-header-nav a[href*="/conversational-ai/"]:hover { background-color: rgba(245, 158, 11, 0.08); color: var(--wp--preset--color--pilar-conversational-ai); }

/* ==========================================================================
   MESA-135 — Mobile menu: hamburger toggle + dropdown panel
   Breakpoint <640px: hamburger visible, nav hidden → panel when open.
   Breakpoint ≥640px: nav visible as row, hamburger hidden.
   ========================================================================== */

/* Hamburger / close button ------------------------------------------------ */
.ma-menu-toggle {
	display: none; /* hidden on desktop */
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: none;
	border-radius: 0.375rem;
	background: transparent;
	color: var(--wp--preset--color--brand-text-secondary);
	cursor: pointer;
	transition: background-color 150ms ease-out, color 150ms ease-out;
	flex-shrink: 0;
}

.ma-menu-toggle:hover,
.ma-menu-toggle:focus-visible {
	background-color: var(--wp--preset--color--brand-elevated);
	color: var(--wp--preset--color--brand-ink);
}

.ma-menu-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--pilar-voice-ai);
	outline-offset: 2px;
}

/* Show hamburger icon; hide close icon by default */
.ma-menu-toggle .icon-close { display: none; }
.ma-menu-toggle .icon-menu  { display: block; }

/* When expanded: swap icons and update label via JS */
.ma-menu-toggle[aria-expanded="true"] .icon-menu  { display: none; }
.ma-menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile breakpoint ------------------------------------------------------- */
@media (max-width: 639px) {
	/* Anchor point for the dropdown panel */
	.site-header {
		position: relative;
	}

	.ma-menu-toggle {
		display: flex;
	}

	/* Nav hidden by default on mobile */
	.ma-header-nav {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
		/* Full-width dropdown, flush with header bottom edge */
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--wp--preset--color--brand-surface);
		border-bottom: 1px solid var(--wp--preset--color--brand-border);
		padding: 0.75rem 1.25rem 1.25rem;
		z-index: 99;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	}

	/* Shown when toggle is active */
	.ma-header-nav.is-open {
		display: flex;
	}

	.ma-header-nav a {
		font-size: 1rem;
		padding: 0.75rem 0.875rem;
		border-radius: 0.5rem;
		white-space: normal;
	}
}

/* ==========================================================================
   MESA-133 — Footer estruturado com seções
   ========================================================================== */

.site-footer__top {
	gap: 3rem;
}

@media (max-width: 639px) {
	.site-footer__top {
		flex-direction: column;
		gap: 2rem;
	}
}

.site-footer__brand {
	max-width: 280px;
}

@media (max-width: 639px) {
	.site-footer__brand {
		max-width: 100%;
	}
}

.site-footer__col-heading {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-text-secondary);
	margin: 0 0 0.5rem 0;
}

.site-footer__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.site-footer__nav-list a {
	font-size: 0.875rem;
	color: var(--wp--preset--color--brand-text-secondary);
	text-decoration: none;
	transition: color 150ms ease-out;
}

.site-footer__nav-list a:hover {
	color: var(--wp--preset--color--brand-ink);
	text-decoration: underline;
}

.site-footer__nav-list a:focus-visible {
	outline: 2px solid var(--wp--preset--color--pilar-voice-ai);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ==========================================================================
   MESA-133 — Breadcrumbs: server-rendered, schema.org BreadcrumbList.
   WCAG 2.2 AA: landmarks corretos, foco visível, contraste ≥ 4.5:1.
   ========================================================================== */

.mestre-breadcrumbs {
	padding: 0.75rem 0;
}

.mestre-breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--brand-text-secondary);
}

.mestre-breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.mestre-breadcrumbs__link {
	color: var(--wp--preset--color--brand-text-secondary);
	text-decoration: none;
	border-radius: 2px;
	transition: color 150ms ease-out;
}

.mestre-breadcrumbs__link:hover {
	color: var(--wp--preset--color--brand-ink);
	text-decoration: underline;
}

.mestre-breadcrumbs__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--pilar-voice-ai);
	outline-offset: 2px;
}

.mestre-breadcrumbs__sep {
	color: var(--wp--preset--color--brand-border);
	font-size: 0.75rem;
	user-select: none;
}

.mestre-breadcrumbs__current {
	color: var(--wp--preset--color--brand-ink);
	font-weight: 500;
	/* Truncar títulos longos em breadcrumb */
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;
	vertical-align: bottom;
}

@media (min-width: 768px) {
	.mestre-breadcrumbs__current {
		max-width: 400px;
	}
}

/* WordPress utility — visualmente oculto, lido por screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
	word-wrap: normal !important;
}

/* ── Card post (MESA-33) ───────────────────────────────────────────────────── */

.ma-card-post {
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ma-card-post:is(:hover, :focus-within) {
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.08);
	transform: translateY(-2px);
}

.ma-card-post .ma-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.ma-card-post .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--brand-ink);
}

.ma-card-post .wp-block-post-title a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--pilar-voice-ai);
	text-decoration: underline;
}

.ma-card-post .wp-block-post-title a:focus-visible,
.ma-card-post .wp-block-post-author a:focus-visible {
	outline: 2px solid var(--wp--preset--color--pilar-voice-ai);
	outline-offset: 2px;
	border-radius: 2px;
}

.ma-card-post .wp-block-post-featured-image a:focus-visible {
	outline: 2px solid var(--wp--preset--color--pilar-voice-ai);
	outline-offset: -2px;
}

.ma-card-post > .wp-block-post-featured-image {
	border-radius: 0;
	overflow: hidden;
}
.ma-card-post > .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ==========================================================================
   MESA-150 — Dark mode via system preference (tokens canônicos MESA-142)

   Estratégia: override dos CSS custom properties gerados pelo theme.json
   (--wp--preset--color--brand-*) diretamente, para que todos os blocos e
   os aliases legados respondam automaticamente.
   Guard :not([data-theme="light"]) impede sobrescrever seleção manual light.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		/* Tokens canônicos MESA-142 */
		--wp--preset--color--brand-ink:              #FAFAFA;
		--wp--preset--color--brand-surface:          #0A0A0A;
		--wp--preset--color--brand-elevated:         #1A1A1A;
		--wp--preset--color--brand-text-secondary:   #A1A1AA;
		--wp--preset--color--brand-text-tertiary:    #71717A;
		--wp--preset--color--brand-border:           #27272A;

		/* Pilares: dark mode usa variante -dark */
		--wp--preset--color--pilar-voice-ai:           #22D3EE;
		--wp--preset--color--pilar-ai-telephony:       #C084FC;
		--wp--preset--color--pilar-conversational-ai:  #FBBF24;

		/* Código — mantém fundo escuro explícito no dark */
		--wp--preset--color--code-bg:   #0D1117;
		--wp--preset--color--code-text: #E4E4E7;

		/* Badges de dificuldade */
		--wp--preset--color--dificuldade-iniciante-bg:        rgba(20, 83, 45, 0.35);
		--wp--preset--color--dificuldade-iniciante-text:      #86efac;
		--wp--preset--color--dificuldade-intermediario-bg:    rgba(120, 53, 15, 0.35);
		--wp--preset--color--dificuldade-intermediario-text:  #fcd34d;
		--wp--preset--color--dificuldade-avancado-bg:         rgba(127, 29, 29, 0.35);
		--wp--preset--color--dificuldade-avancado-text:       #fca5a5;
	}
}

/* --- Preset overrides: dark mode via toggle manual --- */
:root[data-theme="dark"] {
	--wp--preset--color--brand-ink:              #FAFAFA;
	--wp--preset--color--brand-surface:          #0A0A0A;
	--wp--preset--color--brand-elevated:         #1A1A1A;
	--wp--preset--color--brand-text-secondary:   #A1A1AA;
	--wp--preset--color--brand-text-tertiary:    #71717A;
	--wp--preset--color--brand-border:           #27272A;
	--wp--preset--color--pilar-voice-ai:           #22D3EE;
	--wp--preset--color--pilar-ai-telephony:       #C084FC;
	--wp--preset--color--pilar-conversational-ai:  #FBBF24;
	--wp--preset--color--code-bg:   #0D1117;
	--wp--preset--color--code-text: #E4E4E7;
	--wp--preset--color--dificuldade-iniciante-bg:        rgba(20, 83, 45, 0.35);
	--wp--preset--color--dificuldade-iniciante-text:      #86efac;
	--wp--preset--color--dificuldade-intermediario-bg:    rgba(120, 53, 15, 0.35);
	--wp--preset--color--dificuldade-intermediario-text:  #fcd34d;
	--wp--preset--color--dificuldade-avancado-bg:         rgba(127, 29, 29, 0.35);
	--wp--preset--color--dificuldade-avancado-text:       #fca5a5;
}

/* --- Transição suave ao trocar tema --- */
html {
	color-scheme: light dark;
}

body {
	transition: background-color 200ms ease-out, color 200ms ease-out;
}

/* --- Card post: sombra adaptada ao dark --- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ma-card-post:is(:hover, :focus-within) {
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	}
}
:root[data-theme="dark"] .ma-card-post:is(:hover, :focus-within) {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   MESA-150 — Padding responsivo do container
   ========================================================================== */

.wp-site-blocks {
	padding-left: 16px;
	padding-right: 16px;
}

@media (min-width: 768px) {
	.wp-site-blocks {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (min-width: 1024px) {
	.wp-site-blocks {
		padding-left: 48px;
		padding-right: 48px;
	}
}

/* ==========================================================================
   MESA-40 — Botão toggle de tema
   ========================================================================== */

.ma-theme-toggle {
	background: none;
	border: 1px solid var(--wp--preset--color--brand-border);
	border-radius: 9999px;
	cursor: pointer;
	width: 36px;
	height: 36px;
	min-width: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--brand-text-secondary);
	transition: color 150ms ease-out, border-color 150ms ease-out, background-color 150ms ease-out;
	padding: 0;
	flex-shrink: 0;
	vertical-align: middle;
}

.ma-theme-toggle:hover,
.ma-theme-toggle:focus-visible {
	color: var(--wp--preset--color--brand-ink);
	background-color: var(--wp--preset--color--brand-elevated);
	border-color: var(--wp--preset--color--brand-text-secondary);
	outline: 2px solid var(--wp--preset--color--pilar-voice-ai);
	outline-offset: 2px;
}

.ma-theme-toggle svg {
	width: 16px;
	height: 16px;
	display: block;
	pointer-events: none;
}

.ma-toggle-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ma-theme-toggle .icon-sun  { display: none; }
.ma-theme-toggle .icon-moon { display: none; }
.ma-theme-toggle .icon-auto { display: block; }

:root[data-theme="dark"] .ma-theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .ma-theme-toggle .icon-auto { display: none; }

:root[data-theme="light"] .ma-theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .ma-theme-toggle .icon-auto { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .ma-theme-toggle .icon-sun  { display: block; }
	:root:not([data-theme]) .ma-theme-toggle .icon-auto { display: none; }
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme]) .ma-theme-toggle .icon-moon { display: block; }
	:root:not([data-theme]) .ma-theme-toggle .icon-auto { display: none; }
}

/* ── Grid por pilar (MESA-33) ──────────────────────────────────────────────── */

@media (max-width: 768px) {
	.ma-grid-por-pilar .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 480px) {
	.ma-grid-por-pilar .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Skip-link (WCAG 2.4.1 Bypass Blocks) — aparece somente quando focado. */
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
	background: var(--wp--preset--color--brand-surface, #FAFAFA);
	color: var(--wp--preset--color--brand-ink, #0A0A0A);
	border: 2px solid var(--wp--preset--color--pilar-voice-ai, #06B6D4);
	border-radius: 0.375rem;
	clip: auto;
	clip-path: none;
	display: inline-block;
	font-weight: 600;
	height: auto;
	left: 1rem;
	line-height: 1.4;
	padding: 0.625rem 1rem;
	position: fixed;
	text-decoration: none;
	top: 1rem;
	white-space: normal;
	width: auto;
	z-index: 100000;
}

/* ── Featured image caption (mestre-featured-caption mu-plugin) ──────── */
.mestre-featured-figure {
	margin: 0;
	display: block;
}

.mestre-featured-caption {
	display: block;
	font-size: var(--wp--preset--font-size--caption, 0.8125rem);
	color: var(--wp--preset--color--brand-text-secondary, #71717A);
	font-style: italic;
	text-align: center;
	margin-top: 0.5rem;
	padding: 0 0.5rem;
}

:root[data-theme="dark"] .mestre-featured-caption {
	color: var(--wp--preset--color--brand-text-tertiary, #A1A1AA);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .mestre-featured-caption {
		color: var(--wp--preset--color--brand-text-tertiary, #A1A1AA);
	}
}

/* ==========================================================================
   MESA-124 — Badges de pilar, dificuldade e tempo de leitura
   ========================================================================== */

.mestre-badge {
	display: inline-flex;
	align-items: center;
	font-size: var(--wp--preset--font-size--badge, 0.6875rem);
	font-weight: 600;
	line-height: 1;
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	text-decoration: none;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: opacity 150ms ease-out;
}

.mestre-badge:hover {
	opacity: 0.85;
	text-decoration: none;
}

/* ── Pilar hero — accent por term (MESA-136) ─────────────────────────────────── */

/* Left-border accent + subtle tinted background per pilar term. */
.ma-pilar-hero {
	border-left: 4px solid transparent;
	padding-left: calc(var(--wp--preset--spacing--40, 1.5rem) - 4px);
}

.term-voice-ai          .ma-pilar-hero { border-left-color: var(--wp--preset--color--pilar-voice-ai);          background: rgba(6,   182, 212, 0.06); }
.term-ai-telephony      .ma-pilar-hero { border-left-color: var(--wp--preset--color--pilar-ai-telephony);      background: rgba(168,  85, 247, 0.06); }
.term-conversational-ai .ma-pilar-hero { border-left-color: var(--wp--preset--color--pilar-conversational-ai); background: rgba(245, 158,  11, 0.06); }

/* Dark mode: slightly stronger tint. */
:root[data-theme="dark"] .term-voice-ai          .ma-pilar-hero { background: rgba(34,  211, 238, 0.09); }
:root[data-theme="dark"] .term-ai-telephony      .ma-pilar-hero { background: rgba(192, 132, 252, 0.09); }
:root[data-theme="dark"] .term-conversational-ai .ma-pilar-hero { background: rgba(251, 191,  36, 0.09); }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .term-voice-ai          .ma-pilar-hero { background: rgba(34,  211, 238, 0.09); }
	:root:not([data-theme]) .term-ai-telephony      .ma-pilar-hero { background: rgba(192, 132, 252, 0.09); }
	:root:not([data-theme]) .term-conversational-ai .ma-pilar-hero { background: rgba(251, 191,  36, 0.09); }
}

/* ── Pilar icon (rounded chip com cor do pilar) ── */

.mestre-pilar-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	border-radius: 0.5rem;
	background: rgba(100, 116, 139, 0.10);
	color: var(--wp--preset--color--text-muted);
}

.term-voice-ai          .mestre-pilar-icon { background: rgba(6,   182, 212, 0.12); color: var(--wp--preset--color--pilar-voice-ai); }
.term-ai-telephony      .mestre-pilar-icon { background: rgba(168,  85, 247, 0.12); color: var(--wp--preset--color--pilar-ai-telephony); }
.term-conversational-ai .mestre-pilar-icon { background: rgba(245, 158,  11, 0.12); color: var(--wp--preset--color--pilar-conversational-ai); }

/* ── "Fase 2 em curso" badge ── */

.mestre-fase-em-curso {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.2rem 0.625rem;
	border-radius: 9999px;
	background: rgba(245, 158, 11, 0.12);
	color: #92400E;
	border: 1px solid rgba(245, 158, 11, 0.35);
	white-space: nowrap;
}

/* Pulsing dot before badge text */
.mestre-fase-em-curso::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: currentColor;
	flex-shrink: 0;
	animation: mestre-pulse 2.4s ease-in-out infinite;
}

@keyframes mestre-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.4; }
}

:root[data-theme="dark"] .mestre-fase-em-curso {
	color: #FCD34D;
	background: rgba(251, 191, 36, 0.14);
	border-color: rgba(251, 191, 36, 0.35);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .mestre-fase-em-curso {
		color: #FCD34D;
		background: rgba(251, 191, 36, 0.14);
		border-color: rgba(251, 191, 36, 0.35);
	}
}

/* ── Pilar "Em construção" section (taxonomy-pilar-conversational-ai) ── */

.ma-pilar-em-construcao {
	text-align: center;
	background: rgba(245, 158, 11, 0.06);
	border: 1px dashed rgba(245, 158, 11, 0.35);
	border-radius: 0.75rem;
}

.ma-em-construcao-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgba(245, 158, 11, 0.12);
	color: var(--wp--preset--color--pilar-conversational-ai);
	margin: 0 auto;
}

:root[data-theme="dark"] .ma-pilar-em-construcao {
	background: rgba(251, 191, 36, 0.07);
	border-color: rgba(251, 191, 36, 0.25);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .ma-pilar-em-construcao {
		background: rgba(251, 191, 36, 0.07);
		border-color: rgba(251, 191, 36, 0.25);
	}
}

/* ── Pilar badges (pilar color = text; light tint = background)
   WCAG AA: dark ink text on light tint passes 4.5:1+ easily.
   Cyan-500 / purple-500 / amber-500 no background com text branco
   falham WCAG AA (< 4.5:1), por isso usamos ink text + tint bg. ── */

.mestre-badge-pilar {
	color: var(--wp--preset--color--brand-ink, #0A0A0A);
	background: rgba(100, 116, 139, 0.12);
	border: 1px solid rgba(100, 116, 139, 0.30);
}

.mestre-badge-pilar--voice-ai {
	background: rgba(6, 182, 212, 0.12);
	color: var(--wp--preset--color--brand-ink, #0A0A0A);
	border: 1px solid rgba(6, 182, 212, 0.40);
}

.mestre-badge-pilar--ai-telephony {
	background: rgba(168, 85, 247, 0.12);
	color: var(--wp--preset--color--brand-ink, #0A0A0A);
	border: 1px solid rgba(168, 85, 247, 0.40);
}

.mestre-badge-pilar--conversational-ai-aplicada {
	background: rgba(245, 158, 11, 0.12);
	color: var(--wp--preset--color--brand-ink, #0A0A0A);
	border: 1px solid rgba(245, 158, 11, 0.40);
}

/* ── Dificuldade badges ── */

.mestre-badge-dificuldade {
	background: var(--mestre-card-alt, #F1F5F9);
	color: var(--mestre-muted, #71717A);
	border: 1px solid var(--mestre-border, #E4E4E7);
}

.mestre-badge-dificuldade--iniciante {
	background: rgba(34, 197, 94, 0.10);
	color: #15803D;
	border-color: rgba(34, 197, 94, 0.30);
}

.mestre-badge-dificuldade--intermediario {
	background: rgba(232, 153, 35, 0.10);
	color: #A66B0F;
	border-color: rgba(232, 153, 35, 0.30);
}

.mestre-badge-dificuldade--avancado {
	background: rgba(239, 68, 68, 0.10);
	color: #B91C1C;
	border-color: rgba(239, 68, 68, 0.30);
}

/* Dark mode — dificuldade text colors */
:root[data-theme="dark"] .mestre-badge-dificuldade--iniciante    { color: #4ADE80; }
:root[data-theme="dark"] .mestre-badge-dificuldade--intermediario { color: #E89923; }
:root[data-theme="dark"] .mestre-badge-dificuldade--avancado     { color: #F87171; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .mestre-badge-dificuldade--iniciante    { color: #4ADE80; }
	:root:not([data-theme]) .mestre-badge-dificuldade--intermediario { color: #E89923; }
	:root:not([data-theme]) .mestre-badge-dificuldade--avancado     { color: #F87171; }
}

/* ── Tempo de leitura badge ── */

.mestre-badge-tempo-leitura {
	background: var(--mestre-card-alt, #F1F5F9);
	color: var(--mestre-subtle, #A1A1AA);
	border: 1px solid var(--mestre-border, #E4E4E7);
	cursor: default;
}