/* ==========================================================================
   NÚCLEO PARCEIRO (NP) — Folha de estilo da marca · BLOG
   Paleta oficial, tipografia (Grocky + Alterday) e base editorial de leitura.
   Partilhada por todas as páginas do blog. Autocontida (fontes em assets/fonts).
   Tema claro editorial por defeito (ótimo para ler); tema escuro automático.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. FONTES DA MARCA
   Grocky = display (títulos). Alterday = acento manuscrito (.alt, palavras-chave).
   Corpo de texto: stack de sistema (rápido, privado, sem pedidos externos).
---------------------------------------------------------------------------- */
@font-face {
  font-family: "Grocky";
  src: url("assets/fonts/GROCKY.woff2") format("woff2"),
       url("assets/fonts/GROCKY.woff") format("woff"),
       url("assets/fonts/GROCKY.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Alterday";
  src: url("assets/fonts/Alterday.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------------------------------
   2. TOKENS
---------------------------------------------------------------------------- */
:root {
  /* Paleta oficial NP (não alterar os valores) */
  --np-night:       #0F1623;
  --np-black:       #0A0E13;
  --np-marine:      #1D2C4D;
  --np-blue-deep:   #22315D;
  --np-ocean:       #31558A;
  --np-royal:       #37538B;
  --np-blue-light:  #7FB4DE;
  --np-gold:        #E2CA3A;
  --np-gold-soft:   #EBD465;
  --np-gold-deep:   #CCB803;
  --np-gold-pastel: #F4E08D;
  --np-cream:       #F8EAB5;
  --np-grey-light:  #E7E9E6;

  /* Papéis semânticos — TEMA CLARO EDITORIAL (default) */
  --bg:       #F6F5F1;   /* fundo creme-claro, descansa a vista na leitura longa */
  --surface:  #FFFFFF;   /* cartões, caixas */
  --fg:       #16202E;   /* texto principal (navy quase-preto) */
  --fg-soft:  #46566C;   /* texto secundário */
  --fg-faint: #8A97A8;   /* legendas, metadados */
  --line:     rgba(20, 32, 46, .12);
  --gold-txt: #9A7C00;   /* dourado legível sobre fundo claro (links/acentos) */
  --brand:    var(--np-ocean);
  --accent:   var(--np-gold);

  /* Tipografia */
  --font-display: "Grocky", "Georgia", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --measure: 68ch;       /* largura ideal da coluna de leitura */

  /* Ritmo visual */
  --radius: 14px;
  --shadow: 0 10px 40px rgba(15, 22, 35, .09);
  --maxw: 1160px;
}

/* TEMA ESCURO — automático (preferência do sistema) e via [data-theme="dark"] */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:       #0F1623;
    --surface:  #16202E;
    --fg:       #ECEFF3;
    --fg-soft:  #A9B6C8;
    --fg-faint: #6E7D91;
    --line:     rgba(226, 202, 58, .16);
    --gold-txt: #E2CA3A;
    --brand:    #7FB4DE;
    --shadow:   0 12px 44px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --bg:       #0F1623;
  --surface:  #16202E;
  --fg:       #ECEFF3;
  --fg-soft:  #A9B6C8;
  --fg-faint: #6E7D91;
  --line:     rgba(226, 202, 58, .16);
  --gold-txt: #E2CA3A;
  --brand:    #7FB4DE;
  --shadow:   0 12px 44px rgba(0, 0, 0, .45);
}

/* ----------------------------------------------------------------------------
   3. RESET + BASE
---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.28vw, 1.15rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--np-gold); outline-offset: 3px; border-radius: 4px; }

/* ----------------------------------------------------------------------------
   4. TIPOGRAFIA
---------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin-top: 2em; }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.5rem); margin-top: 1.6em; }
p { margin: 0 0 1.25em; }

a { color: var(--gold-txt); text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--gold-txt) 40%, transparent);
    transition: color .2s, border-color .2s; }
a:hover { color: var(--fg); border-color: var(--fg); }

strong { font-weight: 600; color: var(--fg); }
em { font-style: italic; }

/* .alt — acento manuscrito Alterday, só para palavras-chave editoriais em minúsculas */
.alt {
  font-family: "Alterday", "Cormorant Garamond", cursive;
  font-style: normal; font-weight: 400; text-transform: none;
  letter-spacing: -0.01em; color: var(--gold-txt);
}
/* .gold — destaque só a cor (para palavras longas/técnicas onde a script custa a ler) */
.gold { color: var(--gold-txt); }
/* Eyebrow — rótulo pequeno em maiúsculas espaçadas, sobre o título */
.eyebrow {
  font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-txt);
  margin: 0 0 1rem;
}

/* ----------------------------------------------------------------------------
   5. LAYOUT
---------------------------------------------------------------------------- */
.container { max-width: var(--maxw); margin-inline: auto;
             padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.prose { max-width: var(--measure); }               /* coluna de leitura do artigo */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ----------------------------------------------------------------------------
   6. CABEÇALHO + RODAPÉ (partilhados)
---------------------------------------------------------------------------- */
.np-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem clamp(1.1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.np-header a { border: 0; }
.np-brand { display: flex; align-items: center; gap: .6rem; }
.np-brand img { height: 26px; width: auto; }
.np-brand b { font-family: var(--font-display); font-weight: 400;
              font-size: 1.05rem; letter-spacing: .02em; color: var(--fg); }
.np-nav { display: flex; gap: 1.4rem; align-items: center; }
.np-nav a { font-size: .92rem; color: var(--fg-soft); }
.np-nav a:hover { color: var(--gold-txt); }

.np-footer {
  margin-top: 5rem; padding: 2.6rem clamp(1.1rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line); color: var(--fg-faint);
  font-size: .88rem; text-align: center;
}
.np-footer a { color: var(--fg-soft); }

/* ----------------------------------------------------------------------------
   7. CARTÃO DE ARTIGO (listagem)
---------------------------------------------------------------------------- */
.post-grid { display: grid; gap: 1.6rem;
             grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.post-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow);
                   border-color: color-mix(in srgb, var(--np-gold) 45%, var(--line)); }
.post-card a { border: 0; color: inherit; }
.post-card .cover { aspect-ratio: 16/9; object-fit: cover; width: 100%;
                    background: var(--np-blue-deep); }
.post-card .body { padding: 1.2rem 1.3rem 1.4rem; }
.post-card .cat { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
                  color: var(--gold-txt); font-weight: 600; }
.post-card h3 { margin: .5rem 0 .5rem; font-size: 1.35rem; }
.post-card p { color: var(--fg-soft); font-size: .96rem; margin: 0 0 1rem; }
.post-card .meta { font-size: .8rem; color: var(--fg-faint); }

/* ----------------------------------------------------------------------------
   8. CORPO DO ARTIGO (long-form)
---------------------------------------------------------------------------- */
.article-body { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem); line-height: 1.8; }
.article-body > * { max-width: var(--measure); }
.article-body h2, .article-body h3 { max-width: var(--measure); }
.article-body img, .article-body figure { max-width: 100%; }
.article-body figure { margin: 2rem 0; }
.article-body figcaption { font-size: .85rem; color: var(--fg-faint);
                            text-align: center; margin-top: .6rem; }
.article-body ul, .article-body ol { max-width: var(--measure); padding-left: 1.4rem;
                                      margin: 0 0 1.4rem; }
.article-body li { margin-bottom: .5rem; }

/* Capitular editorial no primeiro parágrafo (assinatura NP) */
.article-body > p.lead::first-letter {
  font-family: "Alterday", var(--font-display); float: left; font-size: 4.2em;
  line-height: .62; padding: .05em .12em 0 0; color: var(--gold-txt);
}

blockquote {
  margin: 2rem 0; padding: .4rem 0 .4rem 1.4rem;
  border-left: 3px solid var(--np-gold);
  font-family: var(--font-display); font-size: 1.4rem; line-height: 1.35;
  color: var(--fg);
}
blockquote cite { display: block; margin-top: .6rem; font-family: var(--font-body);
                  font-size: .85rem; font-style: normal; color: var(--fg-faint); }

code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .9em;
       background: color-mix(in srgb, var(--fg) 8%, transparent);
       padding: .1em .4em; border-radius: 5px; }
pre { overflow-x: auto; background: var(--np-night); color: #E7E9E6;
      padding: 1.1rem 1.3rem; border-radius: var(--radius); font-size: .9rem;
      line-height: 1.6; max-width: 100%; }
pre code { background: none; padding: 0; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; max-width: var(--measure); }

/* Caixa de destaque / evidência (para o rigor NP: dado + fonte + data) */
.np-evidence {
  max-width: var(--measure); margin: 2rem 0; padding: 1.2rem 1.4rem;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--np-gold); border-radius: 10px;
  font-size: .95rem; color: var(--fg-soft);
}
.np-evidence b { color: var(--fg); }

/* ----------------------------------------------------------------------------
   9. BOTÃO / CTA da marca (contorno dourado, estilo NP)
---------------------------------------------------------------------------- */
.np-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  padding: .8rem 1.6rem; border-radius: 999px; border: 0; cursor: pointer;
  color: var(--np-night);
  background: linear-gradient(180deg, var(--np-gold-soft), var(--np-gold));
  box-shadow: 0 6px 20px rgba(226, 202, 58, .25);
  transition: filter .2s, transform .2s;
}
.np-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.np-cta--ghost { background: transparent; color: var(--gold-txt);
                 border: 1px solid color-mix(in srgb, var(--np-gold) 60%, var(--line));
                 box-shadow: none; }

/* ----------------------------------------------------------------------------
   10. ACESSIBILIDADE / MOVIMENTO
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}