/**
 * HDBR Comunidade — base: tokens e cromo do site.
 *
 * Este arquivo entra em TODAS as páginas, porque cabeçalho, rodapé e a paleta valem no site
 * inteiro. O que é das prateleiras e da busca mora em hdbr-comunidade.css, que só entra onde
 * essas peças aparecem.
 *
 * Tudo em custom properties com prefixo --hdbr-, para que a marca de cada cliente entre
 * redefinindo tokens e não reescrevendo regra.
 *
 * Nenhuma fonte, imagem ou ícone externo: a família é a do sistema e os ícones são SVG
 * embutidos no HTML.
 */

:root {
	/* Cores. O molde nasce escuro, que é a convenção de área de membros. */
	--hdbr-fundo: #0c0d10;
	--hdbr-fundo-elevado: #17191f;
	--hdbr-fundo-card: #1d2027;
	--hdbr-texto: #f2f3f5;
	--hdbr-texto-suave: #a7abb5;
	--hdbr-borda: #2b2f38;
	--hdbr-realce: #e8b478;
	--hdbr-realce-claro: #f4d3a8;
	--hdbr-realce-texto: #14151a;
	--hdbr-foco: #7fb3ff;
	--hdbr-progresso-trilho: #33384a;

	/* Medidas. */
	--hdbr-gutter: clamp(1rem, 4vw, 3.5rem);
	--hdbr-card-largura: clamp(13.75rem, 62vw, 17.5rem);
	--hdbr-card-espaco: 0.75rem;
	--hdbr-raio: 0.625rem;
	--hdbr-raio-pequeno: 0.375rem;

	/* Tipografia: pilha do sistema, sem nenhum pedido de rede. */
	--hdbr-fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
		"Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

	--hdbr-transicao: 180ms cubic-bezier(0.2, 0, 0.2, 1);
}

@media (min-width: 48em) {
	:root {
		--hdbr-card-largura: clamp(15rem, 24vw, 20rem);
		--hdbr-card-espaco: 1rem;
	}
}

/* Variante clara, para quem montar o molde em fundo claro. */
.hdbr-area--claro {
	--hdbr-fundo: #f7f7f9;
	--hdbr-fundo-elevado: #ffffff;
	--hdbr-fundo-card: #ffffff;
	--hdbr-texto: #15171c;
	--hdbr-texto-suave: #5a6070;
	--hdbr-borda: #dfe1e7;
	--hdbr-realce: #1f2937;
	--hdbr-realce-claro: #0f172a;
	--hdbr-realce-texto: #ffffff;
	--hdbr-foco: #1d4ed8;
	--hdbr-progresso-trilho: #d9dce4;
}


/* ------------------------------------------- cabeçalho e rodapé do Astra

   O molde é uma área de membros: um cabeçalho branco em cima de um corpo escuro parece
   defeito, não escolha. Isto mora no TEMA de propósito, e não no Customizer: o que está no
   Customizer vive no banco (`theme_mods_*`) e se perde ou diverge entre clones; o que está
   aqui viaja junto com o tema.

   A forma de fazer não é perseguir seletor por seletor. O CSS dinâmico do Astra pinta quase
   tudo com `var(--ast-global-color-N)` — 194 usos das nove variáveis nesta página — e os
   seletores dele são específicos de propósito
   (`.site-below-footer-wrap[data-section="section-below-footer-builder"]`,
   `.ast-site-identity .site-title a`, `.ast-builder-menu-1 .menu-item > .menu-link`).
   Brigar com cada um exigiria dezenas de regras frágeis e ainda deixaria de fora o que
   ninguém lembrou de olhar.

   Então o que se troca é a PALETA dele, mapeada para os tokens deste tema. Uma declaração
   cobre cabeçalho, rodapé, menu, submenu, gaveta do celular, botões e as telas do Tutor. */

:root {
	--ast-global-color-0: var(--hdbr-realce);          /* link e botão */
	--ast-global-color-1: var(--hdbr-realce-claro);    /* hover e item atual */
	--ast-global-color-2: var(--hdbr-texto);           /* títulos */
	--ast-global-color-3: var(--hdbr-texto-suave);     /* texto corrido e item de menu */
	--ast-global-color-4: var(--hdbr-fundo-elevado);   /* fundo do cabeçalho e do rodapé */
	--ast-global-color-5: var(--hdbr-fundo-card);      /* fundo alternado */
	--ast-global-color-6: var(--hdbr-fundo);           /* fundo alternativo */
	--ast-global-color-7: var(--hdbr-borda);           /* borda */
	--ast-border-color: var(--hdbr-borda);
}

/* O que a paleta não alcança. */

body {
	background-color: var(--hdbr-fundo);
}

/* Foco visível também fora de .hdbr-area, que é onde moram cabeçalho e rodapé. */
body .site-header :focus-visible,
body .site-footer :focus-visible,
body .ast-mobile-popup-drawer :focus-visible {
	outline: 3px solid var(--hdbr-foco);
	outline-offset: 3px;
}

/* O ícone do menu no celular é SVG com `fill`, que não vem de cor de texto. */
body .ast-mobile-svg {
	fill: currentColor;
}

/* --------------------------------- a área de aula, como superfície de leitura

   Decisão deliberada, não concessão: o corpo da aula fica CLARO, e o cromo escuro fica em
   volta. Texto longo se lê melhor em fundo claro, e inverter o design system do Tutor seria
   outra coisa — são 294 custom properties, 167 vivas só nesta tela, 88 delas com valores
   claros. Mapear metade produz o pior resultado possível: bonito na tela que se testa e
   ilegível nas que ninguém abriu (quiz, tarefa, pedidos, perfil de instrutor).

   O que estava errado não era a cor da aula: era a emenda parecer acidente. Aqui ela vira
   desenho — a superfície clara flutua sobre o fundo escuro, com raio, borda e sombra.

   Sobre a especificidade: o Tutor pinta o corpo com `[data-tutor-theme] body, body`, que é
   (0,1,1) e vence um `body` sozinho. `html body:has(...)` é (0,1,2) e ganha sem !important.
   As classes de body vão junto como rede, para o caso de o :has() faltar. */

html body:has( .tutor-learning-area ),
html body:has( .tutor-dashboard ),
html body.single-lesson,
html body.single-tutor_quiz,
html body.single-tutor_assignments {
	background-color: var(--hdbr-fundo);
}

.tutor-learning-area,
.tutor-dashboard {
	border-radius: var(--hdbr-raio);
	border: 1px solid rgba(0, 0, 0, 0.28);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.05),
		0 20px 50px rgba(0, 0, 0, 0.45);
	margin-block: clamp(1rem, 3vw, 2.25rem);
	overflow: hidden;
}

/* O respiro entre o cabeçalho escuro e a superfície clara faz a transição ser lida como
   escolha. Sem ele as duas se encostam e parece que uma delas não carregou. */
html body:has( .tutor-learning-area ) .ast-container,
html body:has( .tutor-dashboard ) .ast-container {
	padding-block: clamp(0.75rem, 2vw, 1.5rem);
}