/* ==========================================================================
   COMPONENTE — uc-pular
   O link "Ir para o conteudo": a primeira parada do Tab, invisivel ate
   receber foco.

   ==========================================================================
   1. POR QUE ELE E' UMA PECA, E NAO TRES LINHAS NO RESET
   ==========================================================================
   A `01-base.css` ja anotou este arquivo antes de ele existir: "A regra
   `:focus` que revela o link de pular continua vindo do nucleo e e' assunto do
   chrome (tarefa G), nao deste reset". O motivo e' que ele nao e' uma tecnica
   de esconder texto (isso e' `.screen-reader-text`, e ela fica na base): e' um
   CONTROLE, com alvo de toque, cor, raio e camada -- e controle e' componente.

   ==========================================================================
   2. ⛔ TRES DEFEITOS DO ANTIGO, CORRIGIDOS AQUI
   ==========================================================================
   O `.uc-skip` do tema antigo (theme.css:244) e o markup em header.php:

   1. APONTAVA PARA O LUGAR ERRADO. `href="#content"` -- e `#content` e' o
      `<div>` invólucro do GeneratePress, nao o `<main>`. O leitor pulava para
      um contenedor que comeca ANTES do conteudo. Aqui o alvo e' o proprio
      `<main id="uc-conteudo">`, medido no browser com Tab de verdade.
   2. ALVO DE TOQUE ABAIXO DO PISO. Medido em 05/09/2026: 162,7 x 38,5px.
      Passa os 24x24 do mouse e falha os 44 do dedo. Aqui e'
      `min-height:var(--uc-alvo-toque)`.
   3. FONTE DE DADO. Ele era mono (`--uc-mono`) e caixa normal, com aparencia
      de etiqueta de sistema. Neste sistema mono e' DADO (tarefa D: "numero e'
      dado, e dado se escreve em mono tabular"), e "Ir para o conteudo" nao e'
      dado -- e' um comando. Sans, como todo controle.

   ==========================================================================
   3. `:focus` E NAO `:focus-visible` — E A DIFERENCA IMPORTA
   ==========================================================================
   Todo o resto do tema usa `:focus-visible` (01-base.css), e esta e' a unica
   excecao consciente. `:focus-visible` deixa o navegador decidir se o foco
   "merece" ser mostrado, e ele decide que NAO quando o foco veio de clique ou
   de foco programatico. Um link de pular que recebe foco e continua recortado
   e' um elemento focado e invisivel -- o pior estado de acessibilidade que
   existe, porque a pessoa nao sabe onde esta. Com `:focus`, receber foco e
   aparecer sao a mesma coisa, sempre.

   ==========================================================================
   4. `clip-path`, E NAO `display:none` NEM `left:-9999px`
   ==========================================================================
   `display:none` e `visibility:hidden` tiram o elemento da ordem de tabulacao
   -- ou seja, matam o link. `left:-9999px` funciona, mas faz o navegador rolar
   a pagina para a esquerda em alguns motores quando o elemento recebe foco.
   `clip-path:inset(50%)` e' a mesma receita moderna que a `.screen-reader-text`
   da base usa, e desfazer e' uma declaracao so'.

   ==========================================================================
   5. LIMITES NOMEADOS
   ==========================================================================
   - Ele NAO some sozinho ao perder o foco por clique fora: some porque perdeu
     o foco, que e' o unico gatilho. Sem JavaScript, de proposito.
   - `position:fixed` e nao `absolute`: se a pessoa tabular depois de ja ter
     rolado a pagina (acontece com navegacao por teclado dentro de um formulario
     longo), o `absolute` deixaria o link fora da tela. Fixo, ele esta sempre
     onde o olho procura.
   - A camada e' `--uc-camada-pular` (100), acima de tudo, inclusive da tabbar.
     WCAG 2.4.11: foco nao pode ficar escondido atras de outro elemento.
   ========================================================================== */

.uc-pular{
  /* `justify-self:start` pelo mesmo motivo do `uc-botao` (tarefa D): "eu nao
     ocupo a linha inteira" e' afirmacao DO COMPONENTE, nao do hospedeiro. Sem
     isto ele estica dentro de qualquer grade -- medido no palco do mostruario,
     472px de largura para um texto de 110px. */
  justify-self:start;
  position:fixed;
  top:var(--sp-2);
  left:var(--sp-2);
  z-index:var(--uc-camada-pular);
  display:inline-flex;
  align-items:center;
  min-height:var(--uc-alvo-toque);
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--uc-r-2);
  background:var(--uc-acao);
  color:var(--uc-acao-ink);
  font-family:var(--uc-sans);
  font-size:var(--uc-s--1);
  font-weight:var(--uc-w-realce);
  line-height:var(--uc-lh-controle);
  text-decoration:none;
  box-shadow:var(--uc-elev-2);
  /* Recortado, nao removido: continua na arvore e continua focavel. */
  clip-path:inset(50%);
}

.uc-pular:focus{
  clip-path:none;
}

/* O exemplar do mostruario: mostra como ele fica QUANDO RECEBE FOCO, sem
   depender de a captura ser tirada com o foco nele. Mesma saida da
   `uc-tabbar--exemplar`, e pelo mesmo motivo: sem ela, a folha de exemplares
   teria de escrever `.uc-mostruario__palco .uc-pular{...}` -- o hospedeiro
   decidindo como o convidado aparece, que e' o que a R16 acusa.
   Vem depois da regra base para vencer `position` e `clip-path` por ordem, ja
   que a especificidade e' a mesma. */
.uc-pular--exemplar{
  position:static;
  clip-path:none;
}