/* =========================================================
   THE WATCHMAKER — horologiarius
   Tema publish.css para Obsidian Publish

   Instalação:
   1. Salve este arquivo como "publish.css" (exatamente esse
      nome) na RAIZ do seu vault.
   2. Publique-o pelo painel "Publish changes".
   3. Em "Change site options" → Appearance, defina Theme
      como "Dark" (o tema foi pensado para .theme-dark;
      se quiser suportar o modo claro também, será preciso
      estender o bloco .theme-light no fim do arquivo).
   4. Alguns seletores de layout (barra lateral, cabeçalho)
      não são 100% documentados pela Obsidian e podem mudar
      entre versões — confira pelo Inspecionar elemento do
      navegador se algo não bater exatamente no seu site.
   ========================================================= */

/* --- Tipografia remota ---------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* --- Variáveis estruturais (independem de light/dark) --- */
.published-container {
  --page-width: 700px;
  --page-side-padding: 48px;
  --page-title-font: "Cinzel", serif;
  --font-text-size: 18px;
}

/* --- Famílias de fonte (definidas em body) --------------- */
body {
  --font-text-theme: "EB Garamond", "Iowan Old Style", serif;
  --font-interface-theme: "EB Garamond", serif;
  --font-monospace-theme: "IBM Plex Mono", monospace;

  --h1-font: "Cinzel", serif;
  --h2-font: "Cinzel", serif;
  --h3-font: "Cinzel", serif;
  --h4-font: "Cinzel", serif;
  --h5-font: "EB Garamond", serif;
  --h6-font: "EB Garamond", serif;
}

/* --- Paleta: gabinete de relojoeiro ----------------------
   ink        — fundo, madeira enegrecida da oficina
   ink-alt    — superfícies elevadas (citações, código)
   parchment  — texto principal, papel envelhecido
   muted      — texto secundário, grafite apagado
   brass      — latão: destaque primário, links, títulos
   brass-lt   — latão polido: estados de hover
   verdigris  — cobre oxidado: destaque secundário
   iron       — ferro fosco: bordas, divisores
   ---------------------------------------------------------- */

.theme-dark {
  --background-primary: #0d0e10; /* mantém como cor de reserva (fallback) */

  --text-normal: #e7dfc9;
  --text-muted: #9c9686;
  --text-faint: #706a5c;

  --h1-color: #d4af63;
  --h2-color: #d4af63;
  --h3-color: #cbb98a;
  --h4-color: #cbb98a;
  --h5-color: #e7dfc9;
  --h6-color: #e7dfc9;

  --interactive-accent: #b8933e;
  --interactive-accent-hover: #d4af63;

  --link-color: #b8933e;
  --link-color-hover: #d4af63;
  --link-external-color: #5e7c6c;
  --link-external-color-hover: #7fa38f;

  --blockquote-color: #9c9686;
  --blockquote-border-color: #5e7c6c;
  --blockquote-background-color: #16181c;

  --code-background: #16181c;
  --code-normal: #cbb98a;
  --code-comment: #706a5c;

  --table-border-color: #2b2e33;
  --table-header-background: #16181c;
  --table-header-color: #d4af63;

  --nav-item-color: #9c9686;
  --nav-item-color-hover: #e7dfc9;
  --nav-item-color-active: #d4af63;
  --nav-item-background-hover: #16181c;
  --nav-heading-color: #b8933e;
  --nav-collapse-icon-color: #706a5c;
}

.published-container {
  background-image: url("https://cdn.pixabay.com/photo/2020/07/12/13/23/hourglass-5397243_1280.jpg"); /* caminho dentro do vault */
  background-repeat: no-repeat; /* ou "no-repeat" se for uma imagem única, não uma textura */
  background-size: cover;    /* ou um tamanho fixo, se for textura pequena repetida */
  background-attachment: fixed;
}

.markdown-rendered {
  background-color: rgba(13, 14, 16, 0.88); /* "vidro" translúcido sobre a textura, senão o texto fica ilegível */
  padding: 2rem;
  border-radius: 4px;
}

/* --- Corpo do texto --------------------------------------- */
.markdown-rendered {
  line-height: 1.75;
  letter-spacing: 0.005em;
}

.markdown-rendered p {
  margin-bottom: 1.3em;
}

/* Capitular: só no primeiro parágrafo de cada nota */
.markdown-rendered p:first-of-type::first-letter {
  font-family: "Cinzel", serif;
  font-size: 3.2em;
  line-height: 0.78;
  font-weight: 600;
  float: left;
  padding: 0.04em 0.09em 0 0;
  color: var(--h1-color);
}

@font-face {
  font-family: "Utrillo Pro";
  src: url("/storage/emulated/O/Documents/Obsidian/The Watchmaker/Attachments/FOT-UtrilloPro-M.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}

/* --- Títulos: placas gravadas ------------------------------ */
.markdown-rendered h1,
.markdown-rendered h2 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  border-bottom: 1px solid #2b2e33;
  padding-bottom: 0.35em;
}

.markdown-rendered h3,
.markdown-rendered h4 {
  letter-spacing: 0.03em;
  font-weight: 500;
}

/* --- Divisor "escapamento" — assinatura visual do tema ----
   Uma régua de traços regulares, como o rebordo denteado
   de uma roda de escape, no lugar do <hr> padrão.
   ------------------------------------------------------------ */
.markdown-rendered hr {
  border: none;
  height: 3px;
  width: 46%;
  margin: 3.5rem auto;
  background-image: repeating-linear-gradient(
    90deg,
    var(--h1-color) 0px,
    var(--h1-color) 3px,
    transparent 3px,
    transparent 11px
  );
  opacity: 0.85;
}

/* --- Citações: epígrafes ------------------------------------ */
.markdown-rendered blockquote {
  border: none;
  border-left: 2px solid var(--blockquote-border-color);
  background: var(--blockquote-background-color);
  padding: 1rem 1.5rem;
  margin: 1.8rem 0;
  font-style: italic;
  color: var(--blockquote-color);
}

/* --- Links ---------------------------------------------------- */
.markdown-rendered a {
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 147, 62, 0.4);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.markdown-rendered a:hover {
  color: var(--link-color-hover);
  border-bottom-color: var(--link-color-hover);
}

/* --- Código ----------------------------------------------------- */
.markdown-rendered code {
  font-size: 0.88em;
  border-radius: 2px;
  padding: 0.1em 0.35em;
}

.markdown-rendered pre {
  border: 1px solid #2b2e33;
  border-radius: 3px;
}

/* --- Marca do site (coluna esquerda) ----------------------------- */
.site-body-left-column-site-name {
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.95em;
  color: var(--h1-color);
  text-align: center;
}

/* --- Responsivo --------------------------------------------------- */
@media (max-width: 640px) {
  .published-container {
    --page-side-padding: 24px;
    --font-text-size: 17px;
  }
  .markdown-rendered p:first-of-type::first-letter {
    font-size: 2.5em;
  }
}