/* ==========================================================================
   Tema minimalista da Base Hillink

   Carregado pelo "Custom HTML Head" do BookStack. Não altera nenhum arquivo
   da aplicação: some quando o link no cabeçalho for removido, e sobrevive a
   atualizações da imagem Docker.

   Objetivo: tirar a "cara de BookStack" e deixar a leitura no centro.
   Referência visual: Linear / Notion — neutro, sem cor institucional, sem
   sombras, sem painéis de atividade competindo com o conteúdo.

   O que NÃO é removido, de propósito: a busca e o menu do usuário. Sem eles
   a base fica bonita e inutilizável — não se acha nada e não se sai da conta.
   ========================================================================== */

:root {
  --hl-borda:      rgba(0, 0, 0, .10);
  --hl-texto:      #1a1a1a;
  --hl-suave:      #6b7280;
  --hl-fundo:      #ffffff;
  --hl-superficie: #fafafa;
  --hl-acento:     #1a1a1a;
  --hl-raio:       10px;
}

.dark-mode {
  --hl-borda:      rgba(255, 255, 255, .12);
  --hl-texto:      #ececec;
  --hl-suave:      #9ca3af;
  --hl-fundo:      #0d0d0d;
  --hl-superficie: #161616;
  --hl-acento:     #ececec;
}

/* --------------------------------------------------------------------------
   1. Cabeçalho — de barra azul institucional para linha discreta
   -------------------------------------------------------------------------- */
header.primary-background,
header .primary-background {
  background: var(--hl-fundo) !important;
  border-bottom: 1px solid var(--hl-borda);
  box-shadow: none !important;
}

header a,
header .header-links a,
header .dropdown-container a,
header button {
  color: var(--hl-texto) !important;
  font-weight: 450;
}

/* O logo/nome grande é o que mais "marca" a origem do produto. */
header .logo-text {
  font-size: 15px !important;
  font-weight: 600;
  letter-spacing: -.01em;
}
header .logo-image { max-height: 22px; }

/* Ícones coloridos do menu superior viram monocromáticos. */
header svg,
header .svg-icon {
  fill: currentColor !important;
  opacity: .75;
}

/* Busca: campo limpo, sem a moldura translúcida sobre o azul. */
header form.search-box input,
header .search-box input {
  background: var(--hl-superficie) !important;
  border: 1px solid var(--hl-borda) !important;
  color: var(--hl-texto) !important;
  border-radius: 8px;
}
header form.search-box input::placeholder { color: var(--hl-suave) !important; }

/* --------------------------------------------------------------------------
   2. Página inicial — só o conteúdo do projeto
   Os painéis abaixo mostram movimentação da equipe, não o material. Numa base
   que vai virar site de apresentação, são exatamente o tipo de ruído a tirar.
   -------------------------------------------------------------------------- */
#recent-activity,
#recent-drafts,
#top-favourites,
#recently-updated-pages {
  display: none !important;
}

/* Com os painéis fora, a home vira coluna única em vez de grade de 3. */
.home-default .grid.third {
  display: block !important;
}
.home-default .grid.third > div { width: 100%; }

/* --------------------------------------------------------------------------
   3. Rodapé e sobras
   -------------------------------------------------------------------------- */
footer,
.tri-layout-mobile-tabs { display: none !important; }

/* --------------------------------------------------------------------------
   4. Cartões e listas — bordas finas no lugar de sombras
   -------------------------------------------------------------------------- */
.card,
.content-wrap.card {
  box-shadow: none !important;
  border: 1px solid var(--hl-borda);
  border-radius: var(--hl-raio);
  background: var(--hl-fundo);
}

.entity-list-item:hover,
.entity-list-item.selected { background: var(--hl-superficie) !important; }

.entity-list-item .entity-list-item-name { font-weight: 550; }

/* As bolinhas coloridas por tipo de entidade (livro verde, página azul,
   capítulo laranja) são a assinatura visual mais forte do BookStack. */
.entity-list-item > .icon,
.featured-image-container + .content .icon,
.chapter-child-menu .icon,
.entity-chip .icon {
  color: var(--hl-suave) !important;
  background: transparent !important;
}
.entity-list-item > .icon svg { fill: var(--hl-suave) !important; }

/* --------------------------------------------------------------------------
   5. Tipografia do conteúdo — leitura confortável
   -------------------------------------------------------------------------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
               "Segoe UI", Roboto, sans-serif;
  color: var(--hl-texto);
  background: var(--hl-fundo);
}

.page-content {
  max-width: 46rem;
  font-size: 16px;
  line-height: 1.7;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
  letter-spacing: -.015em;
  font-weight: 600;
  color: var(--hl-texto);
}
.page-content h2 { margin-top: 2.2em; }

.page-content a { color: var(--hl-texto); text-decoration: underline; text-underline-offset: 2px; }
.page-content a:hover { opacity: .7; }

.page-content blockquote {
  border-left: 2px solid var(--hl-borda);
  background: transparent;
  color: var(--hl-suave);
  padding-left: 1em;
}

.page-content table { border-collapse: collapse; }
.page-content table td,
.page-content table th {
  border: 1px solid var(--hl-borda);
  padding: 8px 12px;
}
.page-content table th { background: var(--hl-superficie); font-weight: 600; }

/* --------------------------------------------------------------------------
   6. Embeds — correção defensiva de altura
   Estes seletores existem porque um embed pode chegar aqui de duas formas:
   colado pelo editor (que preserva o wrapper com proporção) ou vindo da API
   (onde o filtro de conteúdo pode ter descartado parte do estilo). Em ambos
   os casos, o resultado tem de ter altura visível.
   -------------------------------------------------------------------------- */

/* Wrapper de proporção que perdeu padding-top e ficou com altura zero. */
.page-content div[style*="padding-top"]:has(> iframe) {
  min-height: 420px;
}

/* Iframe posicionado de forma absoluta cujo pai não tem altura: volta ao
   fluxo normal e assume proporção de tela. */
.page-content div:not([style*="padding-top"]) > iframe[style*="position: absolute"],
.page-content div:not([style*="padding-top"]) > iframe[style*="position:absolute"] {
  position: static !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  min-height: 420px;
}

/* Canva: proporção de apresentação, independentemente do wrapper. */
.page-content iframe[src*="canva.com"] {
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--hl-borda);
  border-radius: var(--hl-raio);
}

/* Visualizador de PDF com altura própria não deve ser esticado. */
.page-content iframe[src$=".pdf"],
.page-content iframe[src*=".pdf#"] {
  border: 1px solid var(--hl-borda);
  border-radius: var(--hl-raio);
}

.page-content img { border-radius: var(--hl-raio); }

/* --------------------------------------------------------------------------
   7. Barras laterais — presentes, porém discretas
   -------------------------------------------------------------------------- */
.tri-layout-left-contents,
.tri-layout-right-contents { font-size: 13.5px; }

.sidebar .sidebar-page-list a,
.tri-layout-right a { color: var(--hl-suave); }
.sidebar .sidebar-page-list a:hover,
.tri-layout-right a:hover { color: var(--hl-texto); }

h5, .sidebar h5 {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  color: var(--hl-suave);
}

/* --------------------------------------------------------------------------
   8. Botões — neutros
   -------------------------------------------------------------------------- */
.button,
button.button,
input[type="submit"] {
  background: var(--hl-acento);
  border-color: var(--hl-acento);
  border-radius: 8px;
  box-shadow: none;
  font-weight: 500;
}
.dark-mode .button { color: #0d0d0d; }

.button.outline {
  background: transparent;
  color: var(--hl-texto);
  border: 1px solid var(--hl-borda);
}

/* --------------------------------------------------------------------------
   9. Leitura publica — visitantes veem apenas o material do projeto

   A classe e aplicada por hacks.js somente quando o cabecalho contem o link
   /login. Contas autenticadas nao recebem esta classe e mantem a interface
   normal do BookStack, incluindo navegacao, busca e acoes de edicao.
   -------------------------------------------------------------------------- */
html.hillink-guest-readonly #header,
html.hillink-guest-readonly .skip-to-content-link,
html.hillink-guest-readonly .tri-layout-mobile-tabs,
html.hillink-guest-readonly .tri-layout-sides,
html.hillink-guest-readonly .breadcrumbs,
html.hillink-guest-readonly #pointer,
html.hillink-guest-readonly button[refs="pointer@section-mode-button"],
html.hillink-guest-readonly #sibling-navigation,
html.hillink-guest-readonly .back-to-top,
html.hillink-guest-readonly footer,
html.hillink-guest-readonly #hillink-idiomas {
  display: none !important;
}

html.hillink-guest-readonly .tri-layout-container {
  display: block !important;
}

html.hillink-guest-readonly .tri-layout-middle {
  width: 100% !important;
  max-width: none !important;
  padding: 24px 20px 64px;
}

html.hillink-guest-readonly .tri-layout-middle-contents {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

html.hillink-guest-readonly .content-wrap {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: none !important;
}

html.hillink-guest-readonly .page-content {
  max-width: 68rem;
}

@media (max-width: 700px) {
  html.hillink-guest-readonly .tri-layout-middle {
    padding: 12px 12px 40px;
  }
}

/* --------------------------------------------------------------------------
   10. Impressão e exportação — sem cromo de interface
   -------------------------------------------------------------------------- */
@media print {
  header, footer, .tri-layout-left, .tri-layout-right,
  #hillink-idiomas { display: none !important; }
  .page-content { max-width: none; }
}