/*
  A casca: cabeçalho, rodapé e o que os acompanha.

  ── Por que isto é GLOBAL e não CSS escopado ────────────────────────────────────

  Estas regras viviam em SiteHeader.razor.css e SiteFooter.razor.css, escopadas pelo
  Blazor. Funcionava — enquanto existia um aplicativo só.

  Com quatro (shell, conta, fórum, apoio), cada um com o próprio cabeçalho para que a
  travessia entre subdomínios não pareça trocar de site, o CSS escopado passou a ser
  exatamente o problema: ele é compilado por PROJETO. Os microfrontends renderizavam a
  mesma marcação sem estilo nenhum, e as páginas apareciam como HTML cru — cabeçalho e
  rodapé quebrados ao clicar em Comunidade, Apoiar ou Minha conta.

  Global resolve de vez, e o `ops/sync-design.sh` no porigins-deploy garante que os
  quatro carreguem BYTE A BYTE o mesmo arquivo: a publicação recusa um aplicativo cujo
  design divergiu. Sem isso, "copiei para os quatro" vira "três estão desatualizados"
  em duas semanas.
*/

/* ══ CABEÇALHO ══════════════════════════════════════════════════════════════════ */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: color-mix(in oklab, var(--bg-raised) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 2px solid var(--line);
    box-shadow: var(--shadow-sm);
}

/*
  A régua de tipos como base da barra.

  Quatro pixels com as cores de tipo assinam a página como Pokémon antes de qualquer
  texto ser lido — e resolvem o problema de uma barra branca sobre fundo branco não ter
  onde terminar.
*/
.site-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -2px;
    block-size: 3px;
    background: linear-gradient(to right,
        var(--type-grass), var(--type-fire), var(--type-water), var(--type-electric),
        var(--type-psychic), var(--type-dragon), var(--type-fairy), var(--type-ice));
}

.header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    height: var(--header-height);
    margin-inline: auto;
    padding-inline: var(--space-4);
    max-width: var(--container-wide);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--text);
    flex: none;
}

/*
  A marca.

  Um disco partido ao meio — escarlate em cima, claro embaixo, um anel escuro no meio.
  É uma Pokébola lida por quem conhece, e uma forma geométrica limpa para quem não
  conhece. Desenhada com gradiente, sem imagem: nada para baixar, nada para faltar, e
  ela acompanha o tema sozinha.
*/
.brand-mark {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background:
        linear-gradient(to bottom,
            var(--brand-500) 0 46%,
            var(--text) 46% 54%,
            oklch(1 0 0) 54% 100%);
    box-shadow:
        inset 0 0 0 2px var(--text),
        var(--shadow-sm);
    flex: none;
    position: relative;
}

/* O botão central. Pseudo-elemento em vez de mais um nó: a marca aparece em toda
   página e cada elemento a menos é um elemento a menos por página. */
.brand-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 9px;
    height: 9px;
    border-radius: var(--radius-full);
    background: oklch(1 0 0);
    box-shadow: 0 0 0 2px var(--text);
}

.brand-text { font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.02em; }
.brand-text strong { font-weight: 750; }

.primary-nav { display: none; gap: var(--space-1); flex: 1 1 auto; }

@media (min-width: 1024px) {
    .primary-nav { display: flex; }
}

/*
  Os itens do menu ficam em components.css, não aqui.

  Eles já estavam lá por outro motivo: o Blazor renderiza <NavLink>, e o CSS escopado
  não carimba o que um componente FILHO desenha — foi assim que a navegação apareceu
  sem estilo da primeira vez. Repetir a regra aqui daria duas definições da mesma
  coisa, que é como as duas passam a divergir.

  A classe de estado é `.is-current`, posta pelo próprio NavLink.
*/

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
}

/* A contagem ao vivo. Dígitos de largura fixa para que a pílula não mude de tamanho a
   cada tique — um controle que treme puxa o olho pelo motivo errado. */
.live-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--line);
    background: var(--bg-inset);
    text-decoration: none;
    color: var(--text);
    font-size: var(--text-sm);
    transition: border-color var(--dur-fast) var(--ease-out);
}
.live-pill:hover { border-color: var(--brand-400); color: var(--text); }
.live-count { font-variant-numeric: tabular-nums; font-weight: 650; }
.live-label { color: var(--text-muted); font-size: var(--text-xs); }

.menu-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    color: var(--text);
    background: none;
    border: none;
    cursor: pointer;
}
.menu-toggle:hover { background: var(--bg-overlay); }
.menu-icon { font-size: 1.25rem; line-height: 1; }

@media (min-width: 1024px) {
    .menu-toggle { display: none; }
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    padding: var(--space-2) var(--space-4) var(--space-4);
    border-top: 1px solid var(--line);
    background: var(--bg-raised);
}
.mobile-nav a {
    padding: var(--space-3) var(--space-2);
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    min-height: 44px;
    display: flex;
    align-items: center;
}
.mobile-nav a:hover { background: var(--bg-overlay); color: var(--brand-300); }

.theme-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover { color: var(--text); background: var(--bg-overlay); }

/* ══ MIOLO ══════════════════════════════════════════════════════════════════════ */

.site-main { min-block-size: 60vh; }

/* ══ RODAPÉ ═════════════════════════════════════════════════════════════════════ */

.site-footer {
    margin-block-start: var(--space-8);
    border-top: 1px solid var(--line);
    background: var(--bg-inset);
}

.footer-inner {
    display: grid;
    /* A lista de classes também carrega .container-wide, que dá a centralização; aqui
       só entram as colunas. Manter as duas responsabilidades separadas é o motivo de
       o rodapé ter quebrado uma vez — .container-wide não tinha margem automática. */
    gap: var(--space-6);
    padding: var(--space-7) var(--space-4) var(--space-6);
    grid-template-columns: 1fr;
    margin-inline: auto;
    max-width: var(--container-wide);
}

/* A coluna da marca é mais larga que as de links, e só quando há espaço. */
@media (min-width: 640px) { .footer-inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } }

.footer-brand { display: flex; flex-direction: column; gap: var(--space-3); max-width: 42ch; }
.brand-line {
    display: flex; align-items: center; gap: var(--space-2);
    text-decoration: none; color: var(--text); font-size: var(--text-lg);
}
.brand-line strong { font-weight: 750; }
.footer-brand p { font-size: var(--text-sm); color: var(--text-muted); }

.social { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.social a {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    text-decoration: none;
    color: var(--text-muted);
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.social a:hover { border-color: var(--brand-400); color: var(--brand-300); }

.site-footer h2 { font-size: var(--text-sm); color: var(--text); margin-block-end: var(--space-3); }
.site-footer ul { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.site-footer li a { font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; }
.site-footer li a:hover { color: var(--brand-300); text-decoration: underline; }

.footer-base {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4);
    margin-inline: auto;
    max-width: var(--container-wide);
    border-top: 1px solid var(--line);
    font-size: var(--text-xs);
    color: var(--text-subtle);
}
.footer-live { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Rodapé enxuto — o que os microfrontends usam quando não há o que listar. */
.footer-note { font-size: var(--text-sm); color: var(--text-muted); max-width: 60ch; margin: 0; }
.footer-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.footer-links a { font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--brand-300); text-decoration: underline; }

/* ══ TIPOS ══════════════════════════════════════════════════════════════════════
   Uma classe por tipo, para que a etiqueta de Água seja a MESMA azul no card de
   inicial, no filtro de ranking e no perfil da criatura. Cor mais nome — nunca cor
   sozinha. */

.type {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: 0.02em;
    /* Texto escuro sobre a cor do tipo: são todas claras o bastante para que o preto
       tenha muito mais contraste que o branco. */
    color: oklch(0.20 0.03 250);
    background: var(--type-normal);
}

.type-fire     { background: var(--type-fire); }
.type-water    { background: var(--type-water); }
.type-grass    { background: var(--type-grass); }
.type-electric { background: var(--type-electric); }
.type-ice      { background: var(--type-ice); }
.type-fighting { background: var(--type-fighting); color: oklch(1 0 0); }
.type-poison   { background: var(--type-poison); color: oklch(1 0 0); }
.type-ground   { background: var(--type-ground); }
.type-flying   { background: var(--type-flying); }
.type-psychic  { background: var(--type-psychic); }
.type-bug      { background: var(--type-bug); }
.type-rock     { background: var(--type-rock); }
.type-ghost    { background: var(--type-ghost); color: oklch(1 0 0); }
.type-dragon   { background: var(--type-dragon); color: oklch(1 0 0); }
.type-dark     { background: var(--type-dark); color: oklch(1 0 0); }
.type-steel    { background: var(--type-steel); }
.type-fairy    { background: var(--type-fairy); }