/**
 * CP — Base do tema
 *
 * Carrega depois do reset.css do Hello e neutraliza as opiniões dele.
 * Tudo aqui aponta para os tokens do 00-core, que por sua vez leem os
 * Globais do Elementor. Nenhuma cor nasce neste arquivo.
 */

/* ── Tipografia ────────────────────────────────────────────── */

body,
button,
input,
select,
textarea,
optgroup {
	font-family: var(--e-global-typography-text-font-family, "Plus Jakarta Sans"), system-ui, sans-serif;
}

/* ── Bordas retas ──────────────────────────────────────────── */
/* O reset do Hello crava radius 3px em botão e campo de formulário.
   Aqui o raio passa a vir do token do projeto, que está em 0.          */

button,
[type="button"],
[type="reset"],
[type="submit"],
[type="date"],
[type="email"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="url"],
select,
textarea {
	border-radius: var(--rkscp-radius, 0);
}

/* ── Links ─────────────────────────────────────────────────── */
/* O reset pinta a:hover de #336 (azul-marinho) e sublinha :visited.
   Os dois vazam para dentro de qualquer widget com link.              */

a {
	color: inherit;
	text-decoration: none;
}

a:hover,
a:focus,
a:active {
	color: inherit;
}

a:visited {
	text-decoration: inherit;
}

/* Conteúdo de texto corrido continua sublinhando link, que é onde o
   sublinhado ajuda a leitura em vez de atrapalhar. */
.elementor-widget-text-editor a,
.elementor-widget-theme-post-content a {
	text-decoration: underline;
	text-underline-offset: .18em;
}

/* ── Botões ────────────────────────────────────────────────── */
/* O reset do Hello desenha TODO botão com borda e texto #c36 (rosa) e
   fundo #c36 no hover. É a origem do rosa que aparecia em botão de
   widget que ainda não tinha estilo próprio.                          */

button,
[type="button"],
[type="reset"],
[type="submit"] {
	background-color: transparent;
	border: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	padding: 0;
	transition: none;
}

button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="reset"]:hover,
[type="reset"]:focus,
[type="submit"]:hover,
[type="submit"]:focus {
	background-color: transparent;
	color: inherit;
	text-decoration: none;
}

/* ── Campos de formulário ──────────────────────────────────── */

input,
select,
textarea {
	border-color: var(--rkscp-line, #e2e2e2);
	color: var(--rkscp-ink-900, #161616);
	transition: border-color .15s ease;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--rkscp-ink-900, #161616);
}

input::placeholder,
textarea::placeholder {
	color: var(--rkscp-ink-500, #6b6b6b);
	opacity: 1;
}

/* ── Foco ──────────────────────────────────────────────────── */
/*
 * Um anel só, igual em todo o site, na cor de destaque.
 *
 * O foco NÃO é removido: sem ele, quem navega por teclado perde a
 * referência de onde está na página e o site deixa de passar no critério
 * 2.4.7 da WCAG. O que sai é a mistura de estilos do tema — o que fica é
 * um indicador previsível.
 *
 * :focus-visible em vez de :focus para o anel aparecer na navegação por
 * teclado e não a cada clique de mouse.
 */

:focus-visible {
	outline: 2px solid var(--rkscp-accent, #d81022);
	outline-offset: 2px;
}

/**
 * Campo de texto não leva anel.
 *
 * Pela especificação, `input` **sempre** casa com `:focus-visible` — mesmo
 * clicado com o mouse —, porque aceita teclado. Era isso que punha um anel
 * vermelho de 2px em volta de cada campo a cada clique, num formulário que
 * quer parecer limpo.
 *
 * O foco continua visível: a borda escurece de #e2e2e2 para quase preto, o
 * que é mudança de contraste suficiente para o critério 2.4.7 da WCAG. Quem
 * navega por teclado continua sabendo onde está — o que sai é o excesso,
 * não o indicador.
 *
 * Botão, link e demais controles mantêm o anel: neles a borda não muda, e
 * sem anel não sobraria pista nenhuma.
 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: none;
}

/**
 * Zoom automático ao tocar num campo, desligado.
 *
 * O Safari do iPhone dá zoom sozinho quando o campo tem fonte menor que
 * 16px — e depois não desfaz, deixando a página torta no meio do
 * preenchimento.
 *
 * A correção é a fonte, não o viewport. `user-scalable=no` resolveria o
 * sintoma e tiraria o pinça-para-ampliar do site inteiro, que é acessi-
 * bilidade de verdade indo embora para consertar um incômodo. (E o iOS
 * ignora essa meta desde a versão 10, então nem funcionaria.)
 *
 * `pointer: coarse` limita a regra a dedo: no desktop os campos seguem com
 * o tamanho do desenho.
 */
@media (pointer: coarse) {
	input,
	select,
	textarea {
		font-size: 16px;
	}
}

/* O reset zera o outline aqui; devolvemos ao padrão acima. */
button:focus:not(:focus-visible),
[type="button"]:focus:not(:focus-visible),
[type="submit"]:focus:not(:focus-visible) {
	outline: none;
}

/* ── O atributo hidden precisa vencer sempre ───────────────── */
/*
 * O reset do Hello traz `[hidden] { display: none }`. É um seletor de
 * atributo, especificidade 0-1-0 — exatamente a mesma de uma classe. Então
 * qualquer `.minha-classe { display: flex }` declarada depois ganha, e o
 * `hidden` deixa de esconder.
 *
 * Foi o que aconteceu com o estado vazio e o rodapé do drawer: o JS marcava
 * `el.hidden = true`, o atributo aparecia no DOM, e o elemento continuava
 * visível. Um bug que não se vê lendo o JS.
 *
 * Este é um dos poucos casos em que !important é a solução certa e não um
 * remendo: `hidden` é semântica de "não existe para o usuário", e nenhum
 * valor de display deveria poder contradizê-la. Os resets modernos
 * (normalize, sanitize) fazem igual.
 */
[hidden] {
	display: none !important;
}

/* ── Imagem ────────────────────────────────────────────────── */

img,
svg {
	max-width: 100%;
	height: auto;
}

svg {
	height: revert-layer;
}