/* Vigia Jurídico — folha do calendário forense (public/feriados/*.html).
   Entra DEPOIS de `legal.css` e só acrescenta: a base (tokens, container,
   cabeçalho, rodapé, tabela e o modo celular com `data-rotulo`) é a mesma das
   páginas legais, escrita uma vez. Aqui mora o que é do calendário — ficha,
   aviso de portaria faltando, selo de confiança e a tabela larga.
   Sem build, sem Tailwind: `scripts/calendario.py` escreve HTML puro em
   `public/`, então o que vale são os literais do global.css. */

/* A tabela do calendário tem 5 colunas e não cabe na medida de leitura de 72ch
   que `legal.css` impõe a todo filho de `.legal__col`. Só ela escapa. */
.legal__col > .fer-larga {
  max-inline-size: none;
}

.fer-lead {
  color: var(--luz-suave);
  font-size: 1.05rem;
}

/* ── ficha do tribunal ─────────────────────────────────────────────────── */
.fer-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0;
  margin: 0 0 2rem;
  border-block: 1px solid var(--vinco);
}

.fer-ficha__item {
  padding: .85rem 1.25rem .85rem 0;
  border-block-start: 1px solid var(--vinco);
}

.fer-ficha__item:first-child,
.fer-ficha__item:nth-child(2) {
  border-block-start: 0;
}

.fer-ficha dt {
  margin: 0 0 .3rem;
  color: var(--luz-fraca);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fer-ficha dd {
  margin: 0;
  color: var(--luz);
  font-size: .95rem;
  line-height: 1.5;
}

/* ── aviso: o ato que falta ────────────────────────────────────────────── */
/* Vermelho = não dá pra contar prazo deste tribunal neste ano.
   Âmbar = dá, mas com menos base do que o normal. Nenhum dos dois diz
   "não há feriado": a ausência do ato é ignorância nossa, não fato do mundo. */
.fer-aviso {
  margin: 0 0 2rem;
  padding: 1.1rem 1.25rem;
  border-inline-start: 3px solid var(--latao-fundo);
  background: var(--toga);
  color: var(--luz-suave);
}

.fer-aviso p {
  margin: 0 0 .7rem;
  font-size: .95rem;
  line-height: 1.6;
}

.fer-aviso p:last-child { margin-bottom: 0; }
.fer-aviso b { color: var(--luz); }

.fer-aviso--vermelho { border-inline-start-color: #b4472f; }
.fer-aviso--ambar { border-inline-start-color: var(--latao); }

/* ── linhas da tabela ──────────────────────────────────────────────────── */
.fer-marca,
.fer-vig,
.fer-semana {
  display: inline-block;
  margin-block-start: .2rem;
  color: var(--luz-fraca);
  font-size: .8rem;
  line-height: 1.4;
}

.fer-fonte {
  display: inline-block;
  color: var(--luz-suave);
  font-size: .85rem;
  line-height: 1.45;
}

.fer-link {
  display: inline-block;
  margin-block-start: .25rem;
  color: var(--latao-claro);
  font-family: var(--mono);
  font-size: .75rem;
  text-decoration-color: var(--latao-fundo);
  /* URL de portaria é longa e não tem espaço: sem isto ela empurra a tabela
     pra fora da tela no celular. */
  overflow-wrap: anywhere;
}

/* ── selo de confiança ─────────────────────────────────────────────────── */
.fer-selo {
  display: inline-block;
  padding: .12rem .5rem;
  border: 1px solid var(--vinco);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.fer-selo--alta { border-color: var(--latao-fundo); color: var(--latao-claro); }
.fer-selo--media { border-color: var(--vinco); color: var(--luz-suave); }
.fer-selo--baixa { border-color: #7a3b2a; color: #e0977f; }

/* ── ações ─────────────────────────────────────────────────────────────── */
.fer-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 2.25rem 0 0;
}

.fer-botao {
  display: inline-block;
  padding: .7rem 1.1rem;
  border: 1px solid var(--latao-fundo);
  background: var(--latao);
  color: var(--noite);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease;
}

.fer-botao:hover { background: var(--latao-claro); }

.fer-botao--fantasma {
  background: transparent;
  border-color: var(--vinco);
  color: var(--luz-suave);
}

.fer-botao--fantasma:hover {
  border-color: var(--latao-fundo);
  background: var(--toga);
  color: var(--luz);
}

.fer-rodape-nota {
  color: var(--luz-fraca);
  font-size: .9rem;
}

.fer-rodape-nota b { color: var(--luz-suave); }

/* ── celular ───────────────────────────────────────────────────────────── */
/* `legal.css` já derruba o `thead` e imprime `data-rotulo` antes de cada
   célula abaixo de 40rem; aqui só se separa uma linha da outra, porque cinco
   células empilhadas sem régua viram um bloco só de texto. */
@media (max-width: 40rem) {
  .fer-larga tbody tr {
    padding-block: .9rem;
    border-block-end: 2px solid var(--vinco);
  }

  .fer-larga tbody td {
    border-block-end: 0;
  }

  .fer-ficha {
    display: block;
  }

  .fer-ficha__item:nth-child(2) {
    border-block-start: 1px solid var(--vinco);
  }

  .fer-botao {
    flex: 1 1 100%;
    text-align: center;
  }
}