/* ==========================================================================
   content.css — secções de conteúdo editorial/SEO de cronometro.pt
   --------------------------------------------------------------------------
   - Usa APENAS os tokens definidos em css/style.css:
     --primary, --primary-hover, --primary-glow,
     --bg, --glass-bg, --glass-border, --text, --text-secondary, --text-muted
   - Funciona em tema claro e escuro sem overrides: tudo vem dos tokens
     (o toggle de tema muda data-theme no <html> e os tokens mudam sozinhos).
   - Mobile first: base = mobile, min-width para ecrãs maiores.
   - O conteúdo vive DENTRO de .app (antes do <footer>), por isso os
     seletores .focus-mode … (classe aplicada a #app) funcionam por descendência.
   ========================================================================== */

/* ==========================================================================
   ANULAR O ESTILO DE <nav> DO CABEÇALHO — ler antes de mexer
   --------------------------------------------------------------------------
   O style.css estiliza o ELEMENTO nav, não uma classe:

       nav{ display:flex; padding:.25rem; background:var(--glass-bg);
            backdrop-filter:blur(20px); border-radius:100px;
            border:1px solid var(--glass-border); }

   Serve o menu em cápsula do cabeçalho, mas apanha TODOS os <nav> da página.
   Como o bloco de links do fim e o breadcrumb também são <nav>, herdavam a
   cápsula: era essa a caixa redonda no fim de cada página, e nenhuma alteração
   aos links lá dentro a tirava. O display:flex punha ainda o título ao lado da
   lista em vez de por cima.

   Pior: dentro da media query de telemóvel o style.css tem `nav{display:none}`
   para esconder o menu quando aparece o botão ☰. Isso escondia também os 127
   blocos de links e os 119 breadcrumbs em ecrã pequeno.

   Os seletores de classe abaixo (0,1,0) ganham ao seletor de elemento (0,0,1)
   em qualquer ordem e dentro de qualquer media query.
   ========================================================================== */
.breadcrumb,
.related-links{
  display:block;
  padding:0;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border:0;
  border-radius:0;
}

/* --------------------------------------------------------------------------
   Título da página (h1)
   Colocado entre os marcadores PAGE-H1-START/END, dentro de .app.
   -------------------------------------------------------------------------- */
.page-title{
  font-size:clamp(1.5rem,4.5vw,2.25rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.2;
  color:var(--text);
  text-align:center;
  margin:1.25rem auto .5rem;
  max-width:46rem;
  padding:0 .5rem;
}

/* --------------------------------------------------------------------------
   Breadcrumb (navegação de trilho, por cima do conteúdo)
   Estrutura esperada: <nav class="breadcrumb"><ol><li><a>…</a></li>…</ol></nav>
   -------------------------------------------------------------------------- */
.breadcrumb{
  font-size:.8rem;
  color:var(--text-muted);
  margin:0 auto 1rem;
  max-width:46rem;
}

.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.375rem;
  list-style:none;
  margin:0;
  padding:0;
}

.breadcrumb li{
  display:flex;
  align-items:center;
  gap:.375rem;
}

.breadcrumb li+li::before{
  content:"›";
  color:var(--text-muted);
}

.breadcrumb a{
  color:var(--text-secondary);
  text-decoration:none;
  transition:color .2s ease;
}

.breadcrumb a:hover{
  color:var(--primary);
}

/* --------------------------------------------------------------------------
   Wrapper do conteúdo editorial
   Vai entre os marcadores SEO-CONTENT-START/END, antes do <footer>.
   -------------------------------------------------------------------------- */
.seo-content{
  width:100%;
  max-width:46rem;
  margin:3rem auto 2rem;
  color:var(--text-secondary);
  font-size:1rem;
  line-height:1.75;
}

/* --------------------------------------------------------------------------
   Secção de conteúdo (um bloco temático com h2 e parágrafos)
   -------------------------------------------------------------------------- */
.seo-section{
  margin-bottom:2.5rem;
  scroll-margin-top:5rem;
}

.seo-section h2{
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--text);
  margin:0 0 .875rem;
}

.seo-section h3{
  font-size:1.1rem;
  font-weight:600;
  color:var(--text);
  margin:1.5rem 0 .5rem;
}

.seo-section p{
  margin:0 0 1rem;
}

.seo-section ul,
.seo-section ol{
  margin:0 0 1.25rem 1.25rem;
  padding:0;
}

.seo-section li{
  margin-bottom:.5rem;
}

.seo-section a{
  color:var(--primary);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .2s ease;
}

.seo-section a:hover{
  color:var(--primary-hover);
}

.seo-section strong{
  color:var(--text);
  font-weight:600;
}

/* Parágrafo de abertura (lead), logo a seguir ao h1 ou ao primeiro h2 */
.seo-lead{
  font-size:1.1rem;
  line-height:1.7;
  color:var(--text-secondary);
  margin:0 0 1.5rem;
}

/* Resposta direta (ex.: "Faltam X dias para o Natal"), destacada por um traço
   de acento à esquerda. SEM CAIXA: sem fundo, sem contorno, sem cantos. */
.seo-answer{
  border-left:3px solid var(--primary);
  padding:.25rem 0 .25rem 1.25rem;
  margin:0 0 1.75rem;
  font-size:1.1rem;
  line-height:1.6;
  color:var(--text);
}

.seo-answer strong{
  color:var(--primary);
  font-weight:700;
}

/* --------------------------------------------------------------------------
   Grelha de cartões (usos, dicas, variantes)
   Mobile: 1 coluna. ≥640px: auto-fit com mínimo de 240px.
   -------------------------------------------------------------------------- */
.seo-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.75rem 2.5rem;
  margin:0 0 2rem;
}

@media(min-width:640px){
  .seo-grid{
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  }
}

/* SEM CAIXA: sem fundo, sem contorno, sem cantos. Só texto bem espaçado. */
.seo-card{
  background:none;
  border:0;
  border-radius:0;
  padding:0;
}

.seo-card h3{
  font-size:1rem;
  font-weight:600;
  color:var(--text);
  margin:0 0 .5rem;
}

.seo-card p{
  font-size:.95rem;
  line-height:1.6;
  margin:0;
}

/* --------------------------------------------------------------------------
   FAQ (lista de pergunta + resposta; par com JSON-LD FAQPage)
   -------------------------------------------------------------------------- */
/* SEM CAIXA: cada pergunta separada por um filete, não por um cartão. */
.faq-list{
  display:block;
  margin:0 0 1.5rem;
  border-top:1px solid var(--glass-border);
}

.faq-item{
  background:none;
  border:0;
  border-bottom:1px solid var(--glass-border);
  border-radius:0;
  padding:1.375rem 0;
}

.faq-item h3{
  font-size:1.02rem;
  font-weight:600;
  color:var(--text);
  margin:0 0 .5rem;
}

.faq-item p{
  font-size:.95rem;
  line-height:1.65;
  margin:0;
}

.faq-item p+p{
  margin-top:.625rem;
}

/* --------------------------------------------------------------------------
   Links relacionados, no fim de cada página.
   Botões sem caixa: fundo transparente e sem contorno, na mesma linguagem do
   .nav-btn do cabeçalho. Não há forma desenhada, logo não há nada de onde o
   texto possa sair; a pastilha só aparece ao passar o rato.
   Vai entre os marcadores RELATED-LINKS-START/END.
   -------------------------------------------------------------------------- */
.related-links{
  width:100%;
  max-width:46rem;
  margin:0 auto 3rem;
}

.related-links h2{
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--text-muted);
  text-transform:uppercase;
  margin:0 0 .875rem;
}

.related-links ul{
  display:flex;
  flex-wrap:wrap;
  gap:.375rem .25rem;
  list-style:none;
  margin:0 0 0 -1.25rem;   /* alinha o texto do 1.º botão com o resto da página */
  padding:0;
}

/* Botões, na mesma linguagem do .nav-btn do cabeçalho: fundo transparente,
   sem contorno, sem caixa visível. A forma só aparece ao passar o rato. */
.related-links a{
  display:inline-block;
  padding:.625rem 1.25rem;
  border:0;
  background:transparent;
  border-radius:100px;
  color:var(--text-secondary);
  font-family:inherit;
  font-size:.9rem;
  font-weight:500;
  line-height:1.4;
  text-decoration:none;
  cursor:pointer;
  transition:all .25s ease;
}

.related-links a:hover{
  color:var(--text);
  background:rgba(124,92,231,0.10);
}

/* Nada de column-count aqui: com colunas, a leitura passa a ser vertical
   coluna a coluna, o que destrói a ordem dos links e dá ao conjunto o aspeto
   de bloco retangular. Uma única linha que quebra mantém a ordem e fica limpa. */

/* --------------------------------------------------------------------------
   Tabela de dados (ex.: durações comuns, horários)
   Envolver SEMPRE em .seo-table-wrap para scroll horizontal em mobile.
   -------------------------------------------------------------------------- */
/* SEM CAIXA: sem moldura nem cantos, só os filetes das linhas. */
.seo-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 0 1.75rem;
  border:0;
  border-radius:0;
}

.seo-table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
  min-width:24rem;
}

.seo-table th{
  text-align:left;
  font-weight:600;
  color:var(--text);
  background:none;
  padding:.625rem .875rem .625rem 0;
  border-bottom:1px solid var(--glass-border);
  white-space:nowrap;
}

.seo-table td{
  padding:.625rem .875rem .625rem 0;
  border-bottom:1px solid var(--glass-border);
  color:var(--text-secondary);
}

.seo-table tr:last-child td{
  border-bottom:none;
}

/* --------------------------------------------------------------------------
   Botão de chamada à ação (voltar à ferramenta: "Iniciar temporizador")
   -------------------------------------------------------------------------- */
.seo-cta{
  display:inline-block;
  padding:.875rem 2rem;
  background:var(--primary);
  color:#fff;
  text-decoration:none;
  border-radius:100px;
  font-weight:600;
  font-size:1rem;
  box-shadow:0 8px 30px var(--primary-glow);
  transition:all .3s cubic-bezier(.4,0,.2,1);
}

.seo-cta:hover{
  background:var(--primary-hover);
  transform:translateY(-2px);
}

/* --------------------------------------------------------------------------
   Modo foco: esconder TODO o conteúdo editorial.
   Mesmo mecanismo de style.css — a classe .focus-mode é aplicada a #app
   pelo script do app; estes elementos vivem dentro de #app, logo os
   seletores por descendência aplicam-se. display:none (e não opacity:0)
   porque são blocos altos: não podem continuar a ocupar scroll.
   -------------------------------------------------------------------------- */
.focus-mode .page-title,
.focus-mode .breadcrumb,
.focus-mode .seo-content,
.focus-mode .related-links,
#app.focus-mode ~ .page-title,
#app.focus-mode ~ .breadcrumb,
#app.focus-mode ~ .seo-content,
#app.focus-mode ~ .related-links{
  display:none;
}

/* --------------------------------------------------------------------------
   Ajustes para ecrãs maiores
   -------------------------------------------------------------------------- */
@media(min-width:768px){
  .page-title{
    margin-top:1.5rem;
  }

  .seo-content{
    margin-top:4rem;
    font-size:1.05rem;
  }

  .seo-section h2{
    font-size:1.5rem;
  }

  .seo-section h3{
    font-size:1.15rem;
  }

  .seo-lead{
    font-size:1.15rem;
  }
}

/* padding lateral fora do .app */
body > .page-title,
body > .seo-content,
body > .related-links{
  padding-left:1.5rem;
  padding-right:1.5rem;
}
@media (min-width:640px){
  body > .page-title,
  body > .seo-content,
  body > .related-links{
    padding-left:2rem;
    padding-right:2rem;
  }
}

/* --------------------------------------------------------------------------
   Barra de scroll invisível.
   O site era exatamente 100vh e nunca mostrava barra. Agora há conteúdo por
   baixo da dobra, mas a barra não deve aparecer: continua a poder fazer-se
   scroll com roda, trackpad, teclado e toque, apenas não se desenha a barra.
   -------------------------------------------------------------------------- */
html{
  scrollbar-width:none;        /* Firefox */
  -ms-overflow-style:none;     /* Edge antigo */
}

html::-webkit-scrollbar{       /* Chrome, Safari, Edge */
  width:0;
  height:0;
  display:none;
}

/* --------------------------------------------------------------------------
   Contenção: nada pode sair das caixas.
   Itens de grelha e de flex nascem com min-width:auto, por isso um conteúdo
   largo (uma tabela, um URL, uma palavra comprida) empurra a caixa para fora
   da coluna. min-width:0 corrige isso, que é a causa das caixas rebentadas.
   -------------------------------------------------------------------------- */
.seo-content,
.seo-section,
.seo-grid,
.faq-list,
.related-links{
  min-width:0;
}

.seo-card,
.faq-item,
.seo-answer,
.seo-table-wrap{
  min-width:0;
  max-width:100%;
  overflow-wrap:break-word;
}

.seo-content p,
.seo-content li,
.seo-content h1,
.seo-content h2,
.seo-content h3,
.seo-card p,
.faq-item p,
.page-title{
  overflow-wrap:break-word;
  hyphens:auto;
}

/* links longos nunca esticam a caixa */
.seo-content a,
.faq-item a{
  word-break:break-word;
}

/* a tabela rola dentro da própria caixa, sem alargar a página */
.seo-table-wrap{
  overflow-x:auto;
  overscroll-behavior-x:contain;
}

.seo-table-wrap::-webkit-scrollbar{
  height:0;
  display:none;
}

.seo-table-wrap{
  scrollbar-width:none;
}

/* em ecrãs estreitos a tabela deixa de ter largura mínima e passa a caber */
@media (max-width:520px){
  .seo-table{
    min-width:0;
    font-size:.85rem;
  }
  .seo-table th,
  .seo-table td{
    padding:.5rem .625rem;
    white-space:normal;
  }
}

/* --------------------------------------------------------------------------
   Cartões mais legíveis em tema claro.
   Já não há caixas para reforçar: cartões, FAQ e tabelas não têm fundo nem
   contorno em tema nenhum. Só os filetes precisam de ser visíveis sobre branco.
   -------------------------------------------------------------------------- */
[data-theme="light"] .faq-list,
[data-theme="light"] .faq-item,
[data-theme="light"] .seo-table th,
[data-theme="light"] .seo-table td{
  border-color:rgba(0,0,0,0.12);
}
