:root {
  --font-weight-regular: 400;
  --font-weight-medium: 500;
}

.site-nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-6);
}

/* A linha da navegacao nao encosta nas bordas: recuo igual dos dois lados,
   pelo mesmo valor do padding do container, entao ela nasce e morre alinhada
   ao texto em vez de atravessar a tela. Pseudo-elemento no lugar de border
   porque border sempre ocupa a largura inteira da caixa. */
.site-nav::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: clamp(var(--space-4), 5vw, var(--space-12));
  block-size: 1px;
  background: var(--border);
}

.site-nav__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}

.site-nav__links .fbg-btn { padding: var(--space-2) var(--space-3); }

/* A marca d'agua em kanji sangra pela direita de proposito, mas sem isto ela
   estica a pagina e o site inteiro passa a arrastar na horizontal. `clip`
   corta sem criar contexto de rolagem, diferente de `hidden`. */
.site-hero { position: relative; overflow-x: clip; }

.site-lead {
  max-width: 44ch;
  font-size: var(--font-size-lead);
  color: var(--text-secondary);
}

.site-hero__aside {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: var(--space-8);
}

.site-lema { font-size: clamp(1.25rem, 3vw, 2rem); }

.site-section { padding-block: var(--space-16); }

.site-h2 {
  margin-block-start: var(--space-4);
  margin-block-end: var(--space-12);
}

.fbg-index__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-block-end: var(--space-8);
}

.fbg-index__toolbar .fbg-field { flex: 1 1 200px; max-inline-size: 280px; }

.fbg-index__list { list-style: none; margin: 0; padding: 0; }

.fbg-index__row { border-block-end: 1px solid var(--border); }
.fbg-index__row:first-child { border-block-start: 1px solid var(--border); }

.fbg-index__trigger {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto auto;
  gap: var(--space-4);
  align-items: baseline;
  inline-size: 100%;
  padding: var(--space-6) var(--space-2);
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--text-primary);
  text-align: start;
  transition: background-color var(--motion-base) var(--motion-ease);
}

.fbg-index__trigger:hover,
.fbg-index__trigger:focus-visible { background: var(--color-primary-subtle); }

.fbg-index__num {
  color: var(--text-muted);
  transition: color var(--motion-base) var(--motion-ease);
}

.fbg-index__trigger:hover .fbg-index__num,
.fbg-index__trigger:focus-visible .fbg-index__num { color: var(--color-primary-fg); }

.fbg-index__name {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-tight);
  line-height: var(--font-leading-tight);
  text-wrap: balance;
}

.fbg-index__jp {
  font-family: var(--font-family-jp);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-regular);
  color: var(--text-secondary);
}

.fbg-index__meta { color: var(--text-muted); white-space: nowrap; }

.fbg-index__status { transition: opacity var(--motion-base) var(--motion-ease); }

@media (hover: hover) {
  .fbg-index__status { opacity: 0.35; }
  .fbg-index__trigger:hover .fbg-index__status,
  .fbg-index__trigger:focus-visible .fbg-index__status { opacity: 1; }
}

@media (max-width: 719px) {
  .fbg-index__trigger {
    grid-template-columns: 3rem 1fr;
    align-items: start;
    padding-block: var(--space-4);
  }
  .fbg-index__status { justify-self: start; }
}

.fbg-index__empty {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-12);
}

.fbg-data { margin: 0; display: grid; gap: var(--space-8); }

.fbg-data > div {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  padding-block: var(--space-6);
  border-block-start: 1px solid var(--border);
}

.fbg-data dd {
  margin: 0;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--font-tracking-tight);
  line-height: 1;
}

@media (min-width: 768px) {
  .fbg-data { grid-template-columns: repeat(3, 1fr); }
  .fbg-data > div { border-block-start: 0; }
  .fbg-data > div + div {
    border-inline-start: 1px solid var(--border);
    padding-inline-start: var(--space-8);
  }
}

.contact-form { display: grid; gap: var(--space-6); }

.fbg-toast[hidden] { display: none; }
.fbg-pagination[hidden] { display: none; }

.fbg-pagination__item[disabled] {
  cursor: not-allowed;
  color: var(--color-disabled);
  border-color: var(--border);
}

.case-dialog { inline-size: min(92vw, 560px); }

.case-progress {
  block-size: 2px;
  background: var(--color-surface-sunken);
}

.case-progress span {
  display: block;
  block-size: 100%;
  inline-size: 0;
  background: var(--color-primary-fg);
}

.case-body {
  max-block-size: min(60vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.case-body .fbg-card__meta { margin-block-end: var(--space-2); }
.case-body h3 { margin-block-start: var(--space-8); }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8);
  padding-block: var(--space-16);
  border-block-start: 1px solid var(--border);
}

/* Alternador de tema: sol e lua orbitando o horizonte, atrás do monte.
   Portado do Mokkan (components/header/ThemeToggle.jsx). O ângulo acumula
   em app.js: cada clique soma 180°, sempre horário, então o sol se põe pela
   direita e volta entrando pela esquerda. */
.theme-toggle {
  inline-size: 34px;
  block-size: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.theme-toggle svg { display: block; }

.theme-toggle__orbit {
  /* Gira em torno do horizonte (16,20) sem depender de transform-origin. */
  transform: translate(16px, 20px) rotate(var(--orbit, 0deg)) translate(-16px, -20px);
  transition: transform 0.8s cubic-bezier(0.5, 0.05, 0.2, 1);
}

/* Painel de aba com mais de um parágrafo: o reset do design system zera a
   margem de <p>, então sem isto o texto vira um bloco só. O respiro entre
   parágrafos é o mesmo Ma que o texto descreve. */
.fbg-tabs__panel > p + p { margin-block-start: var(--space-4); }

/* O .fbg-offset do design system alinha as colunas pela base, o que funciona
   no hero, onde a coluna direita é curta e pende junto com o lema vertical.
   Em Processo e Contato a coluna direita é bem mais alta (painel de abas,
   formulário), e alinhar pela base joga o título para o rodapé do bloco,
   com um vazio grande acima. Aqui as duas colunas começam juntas. */
#processo .fbg-offset,
#contato .fbg-offset { align-items: start; }

/* Assinatura da marca no rodapé, no vermelho do logotipo (vermelho FBG, que o
   guia reserva para aplicação da marca, distinto do carmesim de CTA).

   No claro o vermelho do logo dá 5.36:1 e passa. No escuro dá 3.39:1 e reprova
   em AA para texto pequeno, que é o caso deste rótulo. O DE3B40 é o mesmo matiz
   (358°) e a mesma saturação (71%), só com a luminosidade subindo de 45% para
   55%: 4.53:1. Mesma técnica que o design system já usa no azul de marca. */
.site-footer__brand { color: var(--color-accent-brand); }
[data-theme="dark"] .site-footer__brand { color: #DE3B40; }

/* A assinatura entra no lugar do h1 do hero. O texto usa currentColor e
   acompanha o tema; a régua fica no vermelho da marca, que passa em contraste
   nos dois fundos (3,39:1 no escuro, 5,36:1 no claro), então não muda.
   A transição repete a curva do botão de tema, para as duas coisas girarem
   juntas quando o tema troca. */
.site-hero__marca {
  margin-block: 0;
  color: var(--text-primary);
}

.site-hero__assinatura {
  display: block;
  inline-size: min(100%, 30rem);
  block-size: auto;
  transition: color 0.8s cubic-bezier(0.5, 0.05, 0.2, 1);
}