/*
 * ═════════════════════════════════════════════════════════════════════════════
 * O POLIMENTO — a mão de acabamento do site inteiro.
 *
 * "Dá uma melhorada no site todo na parte visual. Melhora as larguras das
 *  páginas, ícones, cores, formatação de texto, molduras de fotos, logos..."
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * POR QUE UM ARQUIVO À PARTE, E NÃO TRINTA REMENDOS.
 *
 * O site tem trinta telas, escritas em momentos diferentes: a ficha do jogador,
 * a lista de ídolos, a história, o acervo, a capa. Cada uma resolveu o seu
 * cartão, a sua foto e o seu título — e o resultado é um site em que nada está
 * errado e nada parece da mesma família. Cartões com quatro raios diferentes,
 * fotos com moldura em três telas e sem moldura em quatro, títulos com o mesmo
 * tamanho de parágrafo.
 *
 * Consertar isso tela por tela seria reabrir trinta arquivos e deixar o
 * trigésimo primeiro de fora. Aqui está o que é COMUM a todas: a moldura de
 * foto, o desenho do cartão, a medida do texto, a tabela, o foco, a seleção.
 * Uma folha só, lida por último, que dá a todas o mesmo acabamento.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * E ELA É LIDA POR ÚLTIMO DE PROPÓSITO.
 *
 * Metade do estilo do site é IMPRESSA NO RODAPÉ por quem desenha cada tela. Uma
 * folha de acabamento que chegasse antes perderia dessas regras em silêncio —
 * foi o que já aconteceu com o padding do texto das histórias. Enfileirada na
 * prioridade 99, com a tipografia como dependência, ela é a última palavra.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * O QUE ELA NÃO FAZ: mudar a cor do clube, o desenho de nenhuma tela, a ordem
 * de nada. É acabamento — raio, borda, sombra, espaço, medida. Se alguma tela
 * ficar estranha, apagar este arquivo devolve o site ao que era.
 *
 * @package ArquivoDoClube
 */

:root {
	/*
	 * AS TRÊS SOMBRAS DO SITE. Antes cada tela inventava a sua: umas com 2px de
	 * desfoque e preto puro, outras com 40px e azul. Sombra é distância do
	 * papel, e num site só existem três distâncias — encostado, levantado, e
	 * flutuando por cima de tudo.
	 */
	--ac-sombra-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
	--ac-sombra-2: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
	--ac-sombra-3: 0 12px 28px rgba(16, 24, 40, .14);

	/* O raio segue a escala do tema, com um degrau menor para o que é pequeno. */
	--ac-raio-p: 10px;
	--ac-raio-g: var(--arqc-raio, 14px);
}

/* ═══════════════════════════════════════════════════════ a medida do texto */

/*
 * TEXTO LONGO TEM LARGURA MÁXIMA — e ela se conta em LETRAS, não em pixels.
 *
 * Numa tela de computador, um parágrafo que atravessa 1180px tem umas 160
 * letras por linha. O olho perde o começo da linha seguinte e relê a mesma
 * frase; é por isso que jornal nenhum, em papel nenhum, passa de setenta.
 *
 * `ch` é a largura do algarismo zero na fonte em uso: mudando o corpo do texto,
 * a medida acompanha sozinha. Vale para o que é PROSA — tabela, grade de
 * cartões e campo de futebol continuam usando a largura toda.
 */
.arqc-conteudo--texto :where(p, ul, ol, blockquote, dl) {
	max-width: 68ch;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * NA FICHA, O TEXTO OCUPA O CARTÃO — "estranhamente o texto não tá ocupando o
 * espaço todo".
 *
 * A medida curta continua valendo onde o texto é a página inteira (um post, uma
 * página comum): lá ele atravessaria 1180px e a leitura sofreria de verdade.
 *
 * Na ficha do jogador é outra coisa. O texto mora num CARTÃO, ao lado de
 * tabelas e listas que usam a largura toda; a coluna estreita no meio do cartão
 * parece erro de montagem, e o vazio do lado direito é onde a foto flutuante
 * vai parar. Quem segura a linha aqui é a largura da página.
 * ───────────────────────────────────────────────────────────────────────────── */

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * AS FOTOS DO EDITOR VOLTAM A FLUTUAR.
 *
 * `alignright`, `alignleft` e `aligncenter` são as classes que o editor do
 * WordPress grava quando alguém escolhe o lado da foto. Elas nunca foram
 * escritas em folha nenhuma daqui: a foto marcada "à direita" ficava solta no
 * meio do parágrafo, empurrando uma letra sozinha para o lado dela.
 *
 * Com o `clear` no que vem depois, a foto não vaza para a seção seguinte — o
 * subtítulo seguinte começa embaixo dela, e não ao lado.
 * ───────────────────────────────────────────────────────────────────────────── */
.ac-content .alignright,
.arqc-artigo .alignright {
	float: right;
	margin: 6px 0 16px 20px;
	max-width: 50%;
	height: auto;
}

.ac-content .alignleft,
.arqc-artigo .alignleft {
	float: left;
	margin: 6px 20px 16px 0;
	max-width: 50%;
	height: auto;
}

.ac-content .aligncenter,
.arqc-artigo .aligncenter {
	display: block;
	margin: 20px auto;
	height: auto;
}

.ac-content :where(h2, h3, h4),
.arqc-artigo :where(h2, h3, h4) {
	clear: both;
}

/* E o fim do texto passa por baixo da foto, em vez de deixá-la vazando. */
.ac-content::after,
.arqc-artigo::after {
	content: "";
	display: block;
	clear: both;
}

@media (max-width: 600px) {
	/*
	 * NO CELULAR NÃO EXISTE "AO LADO": uma foto de metade da largura com três
	 * palavras espremidas ao lado é pior do que a foto inteira.
	 */
	.ac-content .alignright,
	.ac-content .alignleft,
	.arqc-artigo .alignright,
	.arqc-artigo .alignleft {
		float: none;
		display: block;
		margin: 16px auto;
		max-width: 100%;
	}
}

/*
 * O PRIMEIRO PARÁGRAFO DE UM TEXTO É O CONVITE. Um grau acima do corpo, ele faz
 * a página começar — e é o que separa um artigo de um bloco de texto.
 */
.arqc-conteudo--texto .arqc-artigo > p:first-of-type,
.ac-content > p:first-of-type {
	font-size: var(--arqc-t-destaque, 19px);
	line-height: 1.6;
	color: var(--arqc-tinta, #16181d);
}

/*
 * TÍTULO NÃO QUEBRA DEIXANDO UMA PALAVRA SOZINHA. `text-wrap: balance` reparte
 * as linhas em pedaços parecidos; onde o navegador não conhece, nada acontece.
 */
:where(h1, h2, h3, .ac-box > h2, .ac-box > h3) {
	text-wrap: balance;
}

:where(h1, h2) {
	letter-spacing: -0.015em;
}

/* Listas com respiro entre itens: colado, texto vira parede. */
.arqc-conteudo--texto :where(ul, ol) > li + li,
.ac-content :where(ul, ol) > li + li {
	margin-top: 4px;
}

/* A citação deixa de ser um parágrafo indentado e vira uma citação. */
.arqc-conteudo--texto blockquote,
.ac-content blockquote {
	margin-inline: 0;
	padding: 2px 0 2px 18px;
	border-left: 4px solid var(--arqc-clube, #c1121f);
	color: var(--arqc-suave, #667085);
	font-style: normal;
}

/* Um separador que não é uma linha de formulário. */
.arqc-conteudo hr {
	height: 2px;
	border: 0;
	margin: 28px 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--arqc-clube, #c1121f), rgba(0, 0, 0, 0));
	opacity: .35;
}

/* ═════════════════════════════════════════════════════ as molduras de foto */

/*
 * TODA FOTO DO SITE TEM A MESMA MOLDURA.
 *
 * Elas estavam cruas em metade das telas: um retângulo colado no texto, sem
 * canto, sem borda, encostando na palavra de cima. Uma foto sem moldura parece
 * uma foto que caiu ali; com o canto arredondado e uma borda de um pixel, ela
 * parece uma foto que foi POSTA ali.
 */
.arqc-artigo :where(img, figure img),
.ac-content :where(img),
.ac-foto img,
.ac-jog-thumb img,
.ac-gol-thumb img,
.ac-est-thumb img {
	border-radius: var(--ac-raio-p);
}

.arqc-artigo > :where(img, figure),
.ac-content > :where(img, figure) {
	display: block;
	margin: 20px 0;
}

.arqc-artigo figure img,
.ac-content figure img {
	width: 100%;
	box-shadow: var(--ac-sombra-1);
}

/* A legenda é apoio: menor, mais fraca, e colada na foto que explica. */
.arqc-artigo figcaption,
.ac-content figcaption {
	margin-top: 6px;
	font-size: var(--arqc-t-apoio, 14px);
	line-height: 1.45;
	color: var(--arqc-suave, #667085);
}

/*
 * O RETRATO DE QUEM NÃO TEM FOTO. As iniciais num quadrado cinza-claro ficavam
 * quase invisíveis; num fundo com a cor do clube diluída, elas passam a ser uma
 * marca — e a lista deixa de ter buracos brancos no meio.
 */
.ac-jog-thumb,
.ac-gol-thumb,
.ac-est-thumb,
.ac-sem-foto {
	background: linear-gradient(160deg, rgba(193, 18, 31, .10), rgba(193, 18, 31, .04));
	color: var(--arqc-clube, #c1121f);
	font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════ os cartões */

/*
 * OS CARTÕES DE LISTA SÃO UM DESENHO SÓ.
 *
 * Jogador, goleiro e estádio foram escritos em três momentos, e cada um ficou
 * com o seu raio, a sua borda e a sua sombra. Numa página que mostra os três em
 * sequência — e a de listas mostra —, a diferença é visível e não quer dizer
 * nada: são a mesma coisa, três nomes.
 */
.ac-jog-card,
.ac-gol-card,
.ac-est-card {
	border-radius: var(--ac-raio-g);
	border: 1px solid var(--arqc-borda, #e5e8ee);
	background: var(--arqc-fundo, #fff);
	box-shadow: var(--ac-sombra-1);
	transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
	/*
	 * E ELES RESPIRAM. Catorze pixels de folga em volta de um retrato de
	 * quarenta e quatro deixavam o nome colado na borda do cartão; a lista
	 * inteira lia como uma planilha com bordas arredondadas.
	 */
	padding: 12px 14px;
	gap: 12px;
	align-items: center;
}

/*
 * O RETRATO CRESCE. Num cartão de 300px, quarenta e quatro pixels de foto são
 * um selo; cinquenta e seis são um rosto — e rosto é o que faz alguém
 * reconhecer o jogador antes de ler o nome.
 */
.ac-jog-thumb,
.ac-gol-thumb,
.ac-est-thumb {
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ac-jog-thumb img,
.ac-gol-thumb img,
.ac-est-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/*
 * E ELES SOBEM UM PIXEL NO DEDO. Não é enfeite: um cartão que reage é um cartão
 * que se sabe clicável, e o site inteiro é feito de cartões que levam a algum
 * lugar. A borda vermelha é a confirmação, para quem não percebe o movimento.
 */
.ac-jog-card:hover,
.ac-gol-card:hover,
.ac-est-card:hover,
.ac-jog-card:focus-within,
.ac-gol-card:focus-within,
.ac-est-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--ac-sombra-2);
	border-color: rgba(193, 18, 31, .45);
}

/* O nome do cartão é o que se lê primeiro; o resto é apoio. */
.ac-jog-info b,
.ac-gol-title,
.ac-est-title {
	font-weight: 800;
	letter-spacing: -0.01em;
	font-size: var(--arqc-t-corpo, 16px);
	line-height: 1.25;
}

.ac-jog-sub,
.ac-gol-sub,
.ac-est-sub {
	color: var(--arqc-suave, #667085);
	font-size: var(--arqc-t-apoio, 14px);
}

/*
 * OS FILTROS A–Z VIRAM PASTILHAS DE VERDADE. Eles eram círculos de 28px com a
 * letra colada na borda; num acervo em que a busca por letra é o caminho mais
 * usado, esses são os botões mais clicados do site.
 */
.ac-az-filter {
	gap: 6px;
	margin-bottom: 14px;
}

.ac-az-btn {
	border-radius: 999px;
	border: 1px solid var(--arqc-borda-forte, #d3d8e2);
	font-weight: 700;
	min-width: 34px;
	min-height: 34px;
	transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.ac-az-btn:hover {
	border-color: var(--arqc-clube, #c1121f);
	color: var(--arqc-clube, #c1121f);
}

.ac-az-btn.is-active {
	box-shadow: 0 2px 8px rgba(193, 18, 31, .28);
}

/* ═══════════════════════════════════════════════════════════ as tabelas */

/*
 * TABELA COMPRIDA COM CABEÇALHO GRUDADO. Uma lista de cento e quarenta jogos
 * rola por três telas, e na segunda ninguém lembra mais qual coluna é o placar.
 */
.arqc-conteudo :where(table) thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--arqc-papel, #f6f7f9);
	box-shadow: inset 0 -1px 0 var(--arqc-borda-forte, #d3d8e2);
}

/*
 * E AS LINHAS ALTERNAM. Zebra não é decoração numa tabela de seis colunas: é o
 * que faz o olho não pular de linha no meio do caminho.
 */
.arqc-conteudo :where(table) tbody tr:nth-child(even) {
	background: rgba(16, 24, 40, .022);
}

.arqc-conteudo :where(table) tbody tr:hover {
	background: rgba(193, 18, 31, .05);
}

/* ═══════════════════════════════════════════════ cor, foco e acabamento */

/*
 * O TEXTO SELECIONADO FICA NA COR DO CLUBE. É um detalhe de três linhas que
 * aparece toda vez que alguém copia um nome para procurar no Google — e é
 * dessas coisas que um site parece cuidado.
 */
::selection {
	background: rgba(193, 18, 31, .18);
	color: inherit;
}

/*
 * O SUBLINHADO DOS LINKS RESPIRA. Colado na letra, ele corta o pé do "g" e do
 * "p" e o link fica sujo; três pixels abaixo, ele lê como sublinhado.
 */
.arqc-conteudo a:not([class]) {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.arqc-conteudo a:not([class]):hover {
	text-decoration-thickness: 2px;
}

/*
 * O ANEL DE FOCO É DO CLUBE, e existe em toda coisa clicável. Quem navega por
 * teclado — e quem usa leitor de tela — só sabe onde está por ele.
 */
.arqc-conteudo :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--arqc-clube, #c1121f);
	outline-offset: 2px;
	border-radius: 6px;
}

/*
 * IMAGEM QUE AINDA NÃO CARREGOU NÃO EMPURRA O TEXTO. Sem altura reservada, a
 * foto de um jogador chega depois do parágrafo e joga tudo para baixo — a
 * pessoa está lendo e a linha foge do olho.
 */
.arqc-artigo img[width][height],
.ac-content img[width][height] {
	height: auto;
}

/*
 * E O QUE NÃO PRECISA SE MEXER NÃO SE MEXE. Quem pediu ao sistema para reduzir
 * animações tem motivo — enjoo, vertigem, epilepsia fotossensível.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}