/* ==========================================================================
   TABELAS — legíveis no celular, sem esconder dados
   ==========================================================================

   COMO FUNCIONA NO CELULAR
   Tabelas largas ganham rolagem lateral dentro da própria caixa. Uma sombra
   suave aparece na borda direita quando há mais colunas para ver, e some
   ao chegar ao fim. A página em si nunca rola para o lado.

   ESTILO "COMPARATIVO" (bloco Tabela > Estilos > Comparativo)
   Cabeçalho verde, linhas alternadas e primeira coluna fixa ao rolar,
   ideal para comparar produtos financeiros, cargos e salários.

   O HTML que cria a rolagem: inc/editorial/tabelas-responsivas.php
   Também carregado no editor de blocos.
   ========================================================================== */

.wp-block-table,
.tabela-rolavel {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* "Sombras de rolagem": indicam que há conteúdo escondido à direita/esquerda. */
	background:
		linear-gradient(to right, var(--cor-fundo) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
		linear-gradient(to left, var(--cor-fundo) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(37, 42, 40, 0.16), transparent) left center / 14px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(37, 42, 40, 0.16), transparent) right center / 14px 100% no-repeat scroll;
}

.wp-block-table:focus-visible,
.tabela-rolavel:focus-visible {
	outline: 2px solid var(--cor-foco);
	outline-offset: 2px;
}

.wp-block-table table,
.tabela-rolavel table,
.conteudo-artigo table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
	line-height: 1.5;
	font-variant-numeric: tabular-nums; /* Números alinhados nas colunas. */
}

figure.wp-block-table th,
figure.wp-block-table td,
.tabela-rolavel th,
.tabela-rolavel td,
.conteudo-artigo th,
.conteudo-artigo td {
	min-width: 7.5rem; /* Colunas não ficam espremidas: a tabela rola em vez de quebrar palavra por palavra. */
	padding: 0.75em 0.9em;
	border: 0;
	border-bottom: 1px solid var(--cor-linha);
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead th,
.tabela-rolavel thead th,
.conteudo-artigo thead th,
.conteudo-artigo tr:first-child th {
	background: var(--cor-superficie);
	font-weight: var(--peso-semi);
	color: var(--cor-texto);
	border-bottom: 2px solid var(--cor-marfim-escuro);
}

figure.wp-block-table thead,
figure.wp-block-table tfoot {
	border: 0;
}

.wp-block-table tfoot td {
	font-weight: var(--peso-semi);
}

.wp-block-table figcaption {
	position: sticky;
	left: 0;
}

/* Listras do estilo nativo "Listras" do WordPress. */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--cor-superficie);
}

.wp-block-table.is-style-stripes {
	border-bottom: 0;
}

/* --------------------------------------------------------------------------
   ESTILO COMPARATIVO
   -------------------------------------------------------------------------- */
.wp-block-table.is-style-comparativo thead th {
	background: var(--cor-primaria);
	color: var(--cor-sobre-primaria);
	border-bottom: 0;
}

.wp-block-table.is-style-comparativo thead th:first-child {
	border-top-left-radius: var(--raio-medio);
}

.wp-block-table.is-style-comparativo thead th:last-child {
	border-top-right-radius: var(--raio-medio);
}

.wp-block-table.is-style-comparativo tbody tr:nth-child(even) td {
	background: #FAF9F5;
}

.wp-block-table.is-style-comparativo td:first-child,
.wp-block-table.is-style-comparativo th:first-child {
	position: sticky; /* A primeira coluna fica visível ao rolar a tabela para o lado. */
	left: 0;
	z-index: 1;
	font-weight: var(--peso-semi);
}

.wp-block-table.is-style-comparativo tbody td:first-child {
	background: var(--cor-fundo);
	box-shadow: 1px 0 0 var(--cor-linha);
}

.wp-block-table.is-style-comparativo tbody tr:nth-child(even) td:first-child {
	background: #FAF9F5;
}