/*
 * glossary.css — carregado no Archive (Sprint 07A) E no termo individual (Sprint 07B) do
 * Glossário. Reaproveita tokens.css e as classes genéricas de components.css (.ma-container,
 * .ma-reading-container, .ma-eyebrow, .ma-meta, .ma-button, .ma-section, .ma-link-arrow,
 * .ma-breadcrumb* — o breadcrumb é global desde o fechamento técnico da 07A; o Glossário NÃO
 * carrega pillar.css em nenhum dos dois).
 *
 * Largura do Archive (07A.1 — polish): página de índice/biblioteca, usa mais do espaço de
 * `.ma-container` (1120px) do que a coluna de leitura estreita dos templates editoriais. A–Z e
 * filtro de Hub usam a largura total disponível; hero/busca/listagem têm um teto mais generoso
 * (820–920px). O termo individual (07B) é diferente: é lido de cima a baixo como definição +
 * explicação curta, por isso usa `.ma-reading-container` (720px, igual ao resto do tema) — não a
 * largura ampla do Archive.
 *
 * Sem JavaScript em nenhum dos dois: A–Z é âncora nativa (#letra-x), busca/filtro do Archive são
 * formulários/links GET; o termo individual não tem nenhuma seção interativa (sem FAQ/accordion).
 *
 * Breakpoints seguem o padrão já usado no tema: 640 / 900 / 1200px.
 */

.ma-glossary {
	padding-bottom: var(--space-8);
}

/* ---------- Aviso de preview (só para editor autenticado) ---------- */
/* Discreto de propósito: nota editorial, não alerta de debug — por isso borda sólida fina (não
   tracejada/accent) e tipografia no mesmo registro de .ma-meta, nunca mais chamativo que o Hero. */
.ma-glossary-preview-notice {
	margin-top: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border: var(--rule-weight) solid var(--border-default);
	border-radius: var(--radius-md);
	background: var(--surface-sunken);
}

.ma-glossary-preview-notice__label {
	display: block;
	margin-bottom: 2px;
}

.ma-glossary-preview-notice__text {
	margin: 0;
	font-size: var(--text-body-sm);
	color: var(--text-secondary);
}

/* ---------- Hero ---------- */
.ma-glossary-hero {
	padding-block: clamp(36px, 5vw, 48px) var(--space-5);
	max-width: 820px;
}

.ma-glossary-hero__title {
	font-family: var(--font-editorial);
	font-weight: var(--weight-semibold);
	font-size: var(--text-display-2);
	line-height: var(--leading-tight);
	margin: 10px 0 12px;
	color: var(--text-primary);
}

.ma-glossary-hero__lead {
	font-size: var(--text-body-lg);
	color: var(--text-secondary);
	line-height: var(--leading-body);
	margin: 0;
}

/* ---------- Busca ---------- */
.ma-glossary-search {
	padding-block: var(--space-5);
	border-top: var(--rule-weight) solid var(--border-default);
}

.ma-glossary-search__label {
	display: block;
	font-size: var(--text-label);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-tertiary);
	margin-bottom: var(--space-2);
}

.ma-glossary-search__field {
	display: flex;
	width: 100%;
	max-width: 820px;
	border-bottom: 2px solid var(--accent-primary);
}

.ma-glossary-search__input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 14px 4px;
	font-size: 15px;
	font-family: var(--font-sans);
	color: var(--text-primary);
	outline: none;
}

.ma-glossary-search__submit {
	width: 40px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-tertiary);
	background: transparent;
	border: none;
	font-size: 16px;
	cursor: pointer;
}

.ma-glossary-search__submit:hover {
	color: var(--accent-primary);
}

.ma-glossary-search__input:focus-visible,
.ma-glossary-search__submit:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* ---------- A–Z (sticky, sem JS) ---------- */
.ma-glossary-az {
	position: sticky;
	top: calc(var(--header-height) + var(--space-3));
	z-index: 10;
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	padding: 14px 0;
	background: var(--surface-page);
	border-top: var(--rule-weight) solid var(--border-default);
	border-bottom: var(--rule-weight) solid var(--border-default);
}

/* Mesma gramática visual do índice A-Z da Home (.ma-letters/.ma-letters__item, home.css) — tile
   maior (36px) e o estado "disponível" já visível em repouso (borda firme + texto em accent),
   não só no hover; "indisponível" tracejado/sunken, igual à Home. */
.ma-glossary-az__letter {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-editorial);
	font-size: var(--text-body-sm);
	border: var(--rule-weight) solid var(--border-default);
	background: var(--surface-card);
	color: var(--text-primary);
	text-decoration: none;
	transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.ma-glossary-az__letter.is-available {
	border-color: var(--border-strong);
	color: var(--accent-primary);
	font-weight: var(--weight-semibold);
}

.ma-glossary-az__letter.is-available:hover {
	background: var(--accent-primary);
	border-color: var(--accent-primary);
	color: var(--text-on-accent);
}

.ma-glossary-az__letter.is-empty {
	border-style: dashed;
	background: var(--surface-sunken);
	color: var(--text-tertiary);
}

.ma-glossary-az__letter:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* ---------- Filtro por Hub ---------- */
.ma-glossary-hub-filter {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding-block: var(--space-4);
	border-bottom: var(--rule-weight) solid var(--border-default);
}

.ma-glossary-hub-filter__item {
	font-size: 11px;
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	border: var(--rule-weight) solid var(--border-default);
	background: transparent;
	color: var(--text-secondary);
	padding: 8px 14px;
	border-radius: var(--radius-pill);
	text-decoration: none;
	transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.ma-glossary-hub-filter__item:hover {
	border-color: var(--accent-primary);
	color: var(--accent-primary);
}

.ma-glossary-hub-filter__item.is-active {
	border-color: var(--accent-primary);
	background: var(--accent-primary);
	color: var(--text-on-accent);
}

.ma-glossary-hub-filter__item:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* ---------- Listagem agrupada por letra ---------- */
.ma-glossary-listing {
	padding-block: var(--space-6);
	max-width: 920px;
}

/* scroll-padding-top (base.css) já compensa o header sticky; aqui soma-se a altura aproximada da
   navegação A–Z (também sticky, logo abaixo do header) para a letra não ficar escondida atrás
   dela depois de um salto de âncora. */
.ma-glossary-listing__group {
	margin-bottom: var(--space-6);
	scroll-margin-top: calc(var(--header-height) + 60px + var(--space-3));
}

.ma-glossary-listing__letter {
	font-family: var(--font-editorial);
	font-size: 24px;
	font-weight: var(--weight-semibold);
	border-bottom: 2px solid var(--text-primary);
	padding-bottom: 6px;
	margin: 0 0 var(--space-4);
	color: var(--text-primary);
}

/* :target dá uma pista visual discreta de "você chegou aqui" depois do salto de âncora nativo —
   progressive enhancement 100% CSS, sem JavaScript. */
.ma-glossary-listing__group:target .ma-glossary-listing__letter {
	color: var(--accent-primary);
	border-color: var(--accent-primary);
}

.ma-glossary-listing__row {
	padding: var(--space-5) 0;
	border-bottom: var(--rule-weight) solid var(--border-default);
}

.ma-glossary-listing__name {
	font-size: 18px;
	font-weight: var(--weight-bold);
	margin-bottom: 6px;
	color: var(--text-primary);
}

.ma-glossary-listing__def {
	font-size: 13.5px;
	color: var(--text-secondary);
	line-height: var(--leading-body);
	margin: 0 0 var(--space-3);
	max-width: 640px;
}

/* Território + CTA na mesma linha de "metadados" — a seta vem só de .ma-link-arrow (CSS); o
   label do link não repete "→" (Sprint 07A.1 — corrige a seta duplicada "Entender X → →"). */
.ma-glossary-listing__meta {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.ma-glossary-listing__link {
	font-size: 12.5px;
	font-weight: var(--weight-semibold);
}

/* ---------- Estado vazio ---------- */
.ma-glossary-empty {
	padding-block: var(--space-6);
	text-align: center;
	color: var(--text-secondary);
}

.ma-glossary-empty__title {
	font-size: 14px;
	margin: 0 0 6px;
}

.ma-glossary-empty__hint {
	font-size: 12.5px;
	color: var(--text-tertiary);
	margin: 0;
}

/* ---------- CTA final ---------- */
/* Fundo sunken + raio: fechamento visual contido, não uma faixa cheia nem banner comercial. */
.ma-glossary-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--surface-sunken);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

.ma-glossary-cta__heading {
	font-size: 15px;
	font-weight: var(--weight-bold);
	margin-bottom: 2px;
	color: var(--text-primary);
}

.ma-glossary-cta__sub {
	font-size: 13px;
	color: var(--text-secondary);
}

/* =========================================================
   Termo individual (single-ma_glossary.php — Sprint 07B)
   ========================================================= */

/* ---------- Hero do termo ---------- */
.ma-glossary-term-hero {
	padding-block: clamp(36px, 5vw, 48px) var(--space-4);
}

.ma-glossary-term-hero__title {
	font-family: var(--font-editorial);
	font-weight: var(--weight-semibold);
	font-size: clamp(30px, 4vw, 38px);
	line-height: var(--leading-tight);
	margin: 10px 0 14px;
	color: var(--text-primary);
}

/* Definição canônica (ma_short_definition) em destaque — único bloco, nunca duplicado (ver
   docs/glossary-page-map.md §12.2). */
.ma-glossary-term-hero__definition {
	border-left: 2px solid var(--accent-primary);
	padding-left: 16px;
}

.ma-glossary-term-hero__definition p {
	margin: 0;
	font-size: var(--text-body-lg);
	color: var(--text-primary);
	line-height: var(--leading-editorial);
}

/* ---------- Ritmo vertical do conteúdo ---------- */
.ma-glossary-term__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding-block: var(--space-6) var(--space-8);
}

.ma-glossary-term__heading {
	font-size: var(--text-heading-2);
	font-weight: var(--weight-bold);
	margin: 0 0 var(--space-3);
	color: var(--text-primary);
}

/* ---------- Como funciona ---------- */
.ma-glossary-term-formula {
	border: var(--rule-weight) solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	text-align: center;
	font-family: var(--font-editorial);
	font-size: 16px;
	color: var(--text-primary);
}

/* ---------- Exemplo ---------- */
.ma-glossary-term-example {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.ma-glossary-term-example__item {
	border: var(--rule-weight) solid var(--border-default);
	border-radius: var(--radius-md);
	padding: 10px 14px;
	text-align: center;
	flex: 1;
	min-width: 140px;
}

.ma-glossary-term-example__label {
	font-size: 10.5px;
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.ma-glossary-term-example__value {
	font-size: 14px;
	font-weight: var(--weight-bold);
	margin-top: 4px;
	color: var(--text-primary);
}

/* ---------- Não confunda com ---------- */
.ma-glossary-term-confuse {
	background: var(--surface-sunken);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}

.ma-glossary-term-confuse__heading {
	font-size: 16px;
	font-weight: var(--weight-bold);
	margin: 8px 0 var(--space-3);
	color: var(--text-primary);
}

.ma-glossary-term-confuse__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.ma-glossary-term-confuse__label {
	font-size: 10.5px;
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.ma-glossary-term-confuse__text {
	font-size: 12.5px;
	color: var(--text-secondary);
	margin: 4px 0 0;
}

.ma-glossary-term-confuse__link {
	margin: var(--space-3) 0 0;
}

/* ---------- Outros termos em {Hub} ---------- */
.ma-glossary-term-other-terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.ma-glossary-term-other-terms__item {
	font-size: 12.5px;
	text-decoration: none;
}

.ma-glossary-term-other-terms__item:hover {
	text-decoration: underline;
}

/* ---------- Aprofunde (Supporting — rota principal) ---------- */
.ma-glossary-term-deepen {
	border: 1.5px solid var(--accent-primary);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.ma-glossary-term-deepen__title {
	font-size: 15px;
	font-weight: var(--weight-bold);
	margin: 6px 0 4px;
	color: var(--text-primary);
}

.ma-glossary-term-deepen__desc {
	font-size: 12.5px;
	color: var(--text-secondary);
	margin: 0;
}

/* ---------- Faz parte de (Pillar — contexto/território) ---------- */
.ma-glossary-term-part-of {
	border: var(--rule-weight) solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}

.ma-glossary-term-part-of__title {
	font-size: 14px;
	font-weight: var(--weight-bold);
	margin: 6px 0 4px;
	color: var(--text-primary);
}

.ma-glossary-term-part-of__desc {
	font-size: 12.5px;
	color: var(--text-secondary);
	margin: 0 0 8px;
}

/* ---------- Responsividade ---------- */
@media (max-width: 480px) {
	.ma-glossary-az__letter {
		width: 32px;
		height: 32px;
		font-size: 12px;
	}

	.ma-glossary-term-confuse__grid {
		grid-template-columns: 1fr;
	}
}