/* ==========================================================================
   Lab 12 — Bloco html: HTML em bruto (declaração de acessibilidade, tabela de
   cookies). Usa a coluna e a tipografia do bloco de texto (.text-block .prose).
   A marcação do gerador da declaração (mr-*) fica intacta; aqui só se dá
   espaço aos títulos, à lista de contactos, ao filete e à tabela.
   Os títulos com id dentro do bloco são destinos do índice da página.
   ========================================================================== */

.html-block [id] { scroll-margin-top: calc(var(--header-offset, 0px) + var(--anchors-bar, 0px) + var(--space-4)); }

/* Títulos dentro do conteúdo: 48px por cima (36px no h3), 16px até ao texto */
.html-block .prose h2 { margin: var(--space-6) 0 var(--space-heading); }
.html-block .prose h3 { margin: var(--space-5) 0 var(--space-heading); }
.html-block .prose > :first-child { margin-top: 0; }

/* Lista de definições (contactos do gerador): rótulo a 14px, valor por baixo */
.html-block .prose dl { margin: 0 0 var(--space-paragraph); }
.html-block .prose dt { font-size: var(--text-body-md); color: var(--color-text-subtle); }
.html-block .prose dd { margin: 0; }

/* Filete: texto a 20%, como o espaçador e os cards */
.html-block .prose hr {
  height: var(--border-width);
  margin: var(--space-6) 0;
  border: 0;
  background: var(--color-divider);
}

/* Tabela (tabela de cookies), com o desenho do site atual: cabeçalho em faixa amarela,
   cada linha numa caixa de superfície, 4px entre linhas, 24px de espaço interior.
   Telemóvel (abaixo de 768px): cada linha passa a card, com o rótulo da coluna
   (data-label, escrito pelo plugin) por cima de cada valor; o cabeçalho fica
   escondido só visualmente e continua a ser lido. */
.html-block table { width: 100%; margin: 0 0 var(--space-paragraph); border-collapse: separate; border-spacing: 0 var(--space-1); }
.html-block th, .html-block td { padding: var(--space-4); text-align: start; vertical-align: top; }
.html-block th { color: var(--color-on-accent); background: var(--color-accent); font-weight: var(--weight-regular); line-height: var(--lh-tight); }
.html-block td { background: var(--color-surface); }
.html-block td { overflow-wrap: break-word; }
/* Com tabela, o bloco sai da largura de leitura: 9 colunas a partir de 1024px (3/4, como no site atual) */
.html-block > .prose:has(table) { max-width: none; }
/* Coluna da descrição com a largura de leitura (C 2.3: ASI #23, CMRA Fix 36); a tabela não estica acima disso */
@media (min-width: 48em) {
  .html-block .cookie_display { width: auto; max-width: 100%; }
  .html-block .cookie_display th:nth-child(2) { width: var(--measure); }
}
@media (min-width: 64em) { .html-block > .prose:has(table) { grid-column: 1 / span 9; } }

@media (max-width: 47.99em) {
  .html-block table, .html-block tbody, .html-block tr, .html-block td { display: block; }
  .html-block thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .html-block tr { padding: var(--space-4); background: var(--color-surface); }
  .html-block tr + tr { margin-top: var(--space-3); }
  .html-block td { padding: 0; background: none; }
  .html-block td + td { margin-top: var(--space-3); }
  .html-block td::before { content: attr(data-label); display: block; font-size: var(--text-body-md); color: var(--color-text-subtle); }
}

/* Tabela do SCML Cookie Manager 4.1.1 (classe nova, chat 29): a mesma coluna da descrição;
   o <caption> escondido só visualmente (o título do bloco já o mostra, lab 12) e o texto
   de ajuda do plugin (.sr-only) escondido como o .visually-hidden do tema */
@media (min-width: 48em) {
  .html-block .scml-cookies-table { width: auto; max-width: 100%; }
  .html-block .scml-cookies-table th:nth-child(2) { width: var(--measure); }
}
.html-block .scml-cookies-table caption,
.html-block .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }