/*
Theme Name: HL Caderno
Theme URI: https://luthierbh.com.br/
Description: Tema filho do Astra que espelha nas paginas internas a identidade "caderno de bancada" da home. O estilo base vem de /home/home.css — aqui fica so o que e exclusivo das internas.
Author: Henrique Luthier
Template: astra
Version: 1.0.0
*/

/* Skip link — fora da tela até receber foco (acessibilidade de teclado) */
.skip-link {
  position: absolute; top: -100px; left: 8px; z-index: 50;
  background: var(--fita); border: 1.5px solid var(--tinta); color: var(--tinta);
  padding: 8px 14px; font-family: var(--mono); font-size: 13px; text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* Topo fixo + admin bar do WordPress (logado) */
body.admin-bar .topo { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .topo { top: 46px; }
}

/* Faixa de conteúdo das páginas internas */
.pagina { padding: 32px 0 44px; border-top: 0; background: transparent; }
.pagina h1 {
  font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.04;
  margin-bottom: 18px; max-width: 760px;
}
.pagina h1 em { color: var(--lapis); }

/* Texto corrido: tipografia de leitura sobre o papel */
.conteudo { max-width: 760px; }
.conteudo > * + * { margin-top: 16px; }
.conteudo p.lead { font-size: 18px; }
.conteudo h2 {
  font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1;
  margin-top: 36px;
}
.conteudo h3 { font-size: 17px; font-weight: 600; margin-top: 26px; }
.conteudo p { font-size: 16px; line-height: 1.6; }
.conteudo a { text-decoration: underline; text-underline-offset: 3px; }
.conteudo ul, .conteudo ol { padding-left: 20px; }
.conteudo li { font-size: 16px; line-height: 1.55; margin-bottom: 6px; }
.conteudo img { border: 1.5px solid var(--tinta); background: var(--branco); margin: 8px 0; }
.conteudo blockquote {
  background: var(--branco); border: 1.5px solid var(--tinta); padding: 14px 16px;
  font-family: var(--mao); font-size: 22px; color: var(--caneta); transform: rotate(-.5deg);
}
.conteudo blockquote p { font: inherit; }

/* Cartões de serviço (página Serviços) */
.servicos-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.servicos-cards a {
  display: block; background: var(--branco); border: 1.5px solid var(--tinta); padding: 16px;
}
.servicos-cards a:hover { box-shadow: 3px 3px 0 var(--tinta); }
.servicos-cards b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.servicos-cards small { color: var(--suave); font-size: 13.5px; line-height: 1.45; display: block; }
.servicos-cards .seta { font-family: var(--mono); font-size: 12px; color: var(--lapis); display: block; margin-top: 8px; }

/* Cartão em destaque (Luthier Online em /cursos/): ocupa a linha inteira em vez
   de sobrar sozinho com 1/4 (desktop) ou metade (celular) da largura da grade. */
.servicos-cards a.destaque { grid-column: 1 / -1; }

/* Ficha de prazo/garantia/instrumentos das páginas de serviço.
   Nome com sufixo porque `/home/home.css` já define uma classe de mesmo nome
   para a etiqueta vermelha do topo da home, e esse arquivo é carregado aqui também. */
.conteudo .ficha-servico {
  background: var(--branco); border: 1.5px solid var(--tinta);
  padding: 14px 16px; margin-top: 24px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px;
}
.conteudo .ficha-servico dt {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--suave);
}
.conteudo .ficha-servico dd { font-size: 15.5px; line-height: 1.5; margin: 2px 0 12px; }
.conteudo .ficha-servico dd:last-child { margin-bottom: 0; }

/* Chamada final com um botão só (páginas sem análise online: /parte-eletrica/,
   /restauracao/ e /customizacao/ — ver HL_CADERNO_PAGINAS_SEM_ANALISE em
   functions.php). No desktop, .final .ctas herda de home.css o grid de 2
   colunas (max-width: 620px); com um filho só, ele fica preso na coluna 1, a
   157px do centro do bloco (medido a 1280px: botão em x=474,8, bloco em
   x=632,3). hl_caderno_chamada_final() marca esse caso com a classe
   .ctas-unico direto no PHP — em vez de :has(), que cobriria o mesmo caso mas
   depende de suporte do navegador a seletores relacionais (Chrome/Firefox/
   Safari só têm desde 2023); a classe funciona em qualquer navegador. */
.final .ctas.ctas-unico { grid-template-columns: minmax(0, 1fr); max-width: 420px; }

/* Link de volta para a página de Serviços */
.conteudo .voltar { font-family: var(--mono); font-size: 13px; margin-top: 32px; }
.conteudo .voltar a { color: var(--lapis); text-decoration: none; border-bottom: 1.5px solid var(--lapis); }

/* Etiqueta do cartão (marca o curso que é online) */
.servicos-cards .etiqueta {
  display: inline-block; background: var(--fita); border: 1.5px solid var(--tinta);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 6px; margin-bottom: 6px; transform: rotate(-1.2deg);
}

/* Par de fotos com legenda (as duas fachadas em /a-luthieria/) */
.conteudo .fotos-par {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 20px;
}
.conteudo .fotos-par figure { margin: 0; }
.conteudo .fotos-par img { display: block; width: 100%; height: auto; margin: 0; }
.conteudo .fotos-par figcaption {
  font-family: var(--mono); font-size: 12px; color: var(--suave);
  margin-top: 6px; text-transform: uppercase; letter-spacing: .05em;
}

@media (min-width: 768px) {
  .pagina { padding: 46px 0 56px; }
  .pagina h1 { font-size: 56px; }
  .servicos-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .conteudo .ficha-servico { grid-template-columns: 150px minmax(0, 1fr); }
  .conteudo .ficha-servico dd { margin-bottom: 6px; }
  .conteudo .fotos-par { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}