/* ============================================================
 * Blog Alltec — Tipografia e UX v2.0.0
 * ============================================================
 * Aplicado em HTMLs com data-page-type="blog-post" ou "blog-index"
 * - Tipografia confortável para leitura long-form
 * - Hierarquia visual restaurada (H1 > H2 > H3)
 * - Cor neutra nos títulos (vermelho marca só em destaques)
 * - Componentes: TOC, reading progress, breadcrumb, share, hero, related cards
 * ============================================================ */

/* === Tokens ===
 * v2.9.0: tokens locais do blog agora são ALIAS dos tokens globais
 * (css/tokens.css, carregado antes desta folha em todos os HTMLs).
 * Mantemos os nomes --blog-* por compat com o restante deste arquivo,
 * mas o valor canônico vem de tokens.css. Para mudar a marca, edite
 * css/tokens.css (um único ponto de verdade). */
:root {
  --blog-color-text: var(--color-text);
  --blog-color-text-secondary: var(--color-text-secondary);
  --blog-color-muted: var(--color-text-muted);
  --blog-color-heading: var(--color-heading);
  --blog-color-brand: var(--color-brand);
  --blog-color-brand-soft: var(--color-brand-soft);
  --blog-color-link: var(--color-link);
  --blog-color-border: var(--color-border);
  --blog-color-bg-soft: var(--color-bg-soft);
  --blog-color-bg-code: var(--color-bg-muted);

  --blog-font-body: var(--font-family-base);
  --blog-fs-body: var(--fs-md);
  --blog-fs-body-mobile: var(--fs-base);
  --blog-lh-body: var(--lh-loose);
  --blog-fs-h1: var(--fs-5xl);
  --blog-fs-h1-mobile: var(--fs-3xl);
  --blog-fs-h2: var(--fs-3xl);
  --blog-fs-h3: var(--fs-2xl);
  --blog-fs-h3-mobile: 19px;            /* sem token equivalente — manter literal */
  --blog-fs-h2-mobile: var(--fs-2xl);
  --blog-fs-h5: var(--fs-lg);

  --blog-max-content: var(--container-max-content);
  --blog-toc-width: 240px;              /* específico do blog — manter literal */
}

/* === Reset visual herdado do tema (somente blog) === */
[data-page-type="blog-post"] main p,
[data-page-type="blog-post"] main ul,
[data-page-type="blog-post"] main ol,
[data-page-type="blog-post"] main h1,
[data-page-type="blog-post"] main h2,
[data-page-type="blog-post"] main h3,
[data-page-type="blog-post"] main h4,
[data-page-type="blog-post"] main h5 {
  text-align: left !important;
}

/* === Container principal === */
[data-page-type="blog-post"] main {
  font-family: var(--blog-font-body);
  color: var(--blog-color-text);
}

[data-page-type="blog-post"] main .col-md-10,
[data-page-type="blog-post"] main .col-lg-9,
[data-page-type="blog-post"] main .col-xl-8 {
  max-width: var(--blog-max-content);
}

/* === Tipografia base === */
[data-page-type="blog-post"] main h1 {
  font-size: var(--blog-fs-h1);
  line-height: 1.25;
  font-weight: 700;
  color: var(--blog-color-heading);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

[data-page-type="blog-post"] main header > p:first-of-type {
  /* meta info: data + categoria + tempo */
  font-size: 13px;
  color: var(--blog-color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  font-weight: 600;
}

[data-page-type="blog-post"] main header > p:nth-of-type(2) {
  /* subtitle/lead */
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: var(--blog-color-text-secondary) !important;
  font-style: normal !important;
  font-weight: 400;
  margin-bottom: 32px;
  padding-left: 16px;
  border-left: 3px solid var(--blog-color-brand);
}

[data-page-type="blog-post"] main h2 {
  font-size: var(--blog-fs-h2) !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: var(--blog-color-heading) !important;
  margin-top: 48px !important;
  margin-bottom: 16px !important;
  scroll-margin-top: 90px; /* offset pra anchor links com navbar fixa */
}

[data-page-type="blog-post"] main h3 {
  font-size: var(--blog-fs-h3) !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: var(--blog-color-heading) !important;
  margin-top: 32px !important;
  margin-bottom: 12px !important;
}

[data-page-type="blog-post"] main h5,
[data-page-type="blog-post"] main h3.heading-5 {
  font-size: var(--blog-fs-h5) !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  color: var(--blog-color-heading) !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
}

[data-page-type="blog-post"] main p {
  font-size: var(--blog-fs-body) !important;
  line-height: var(--blog-lh-body) !important;
  color: var(--blog-color-text) !important;
  margin-bottom: 20px !important;
}

[data-page-type="blog-post"] main ul,
[data-page-type="blog-post"] main ol {
  font-size: var(--blog-fs-body) !important;
  line-height: 1.7 !important;
  color: var(--blog-color-text) !important;
  padding-left: 24px !important;
  margin-bottom: 24px !important;
}

[data-page-type="blog-post"] main li {
  margin-bottom: 10px;
}

[data-page-type="blog-post"] main strong {
  color: var(--blog-color-text);
  font-weight: 700;
}

[data-page-type="blog-post"] main a:not(.button):not(.link-footer):not(.brand) {
  color: var(--blog-color-link);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

[data-page-type="blog-post"] main a:not(.button):not(.link-footer):not(.brand):hover {
  border-bottom-color: var(--blog-color-link);
}

/* === Tabelas dentro do artigo === */
[data-page-type="blog-post"] main table {
  font-size: 15px !important;
  border-collapse: collapse;
  width: 100%;
  margin: 24px 0;
}

[data-page-type="blog-post"] main table th,
[data-page-type="blog-post"] main table td {
  text-align: left !important;
}

/* === Mobile === */
@media (max-width: 767px) {
  [data-page-type="blog-post"] main h1 {
    font-size: var(--blog-fs-h1-mobile);
  }
  [data-page-type="blog-post"] main h2 {
    font-size: var(--blog-fs-h2-mobile) !important;
    margin-top: 36px !important;
  }
  [data-page-type="blog-post"] main h3 {
    font-size: var(--blog-fs-h3-mobile) !important;
  }
  [data-page-type="blog-post"] main p,
  [data-page-type="blog-post"] main ul,
  [data-page-type="blog-post"] main ol {
    font-size: var(--blog-fs-body-mobile) !important;
  }
  [data-page-type="blog-post"] main header > p:nth-of-type(2) {
    font-size: 17px !important;
    padding-left: 12px;
  }
}

/* v2.15.0: removidos componentes .blog-breadcrumb (33 linhas) e .blog-hero
 * (25 linhas) — confirmadamente sem uso em nenhum HTML do site (audit
 * v2.14.0). Eram componentes planejados em v2.0.0 mas nunca adotados na
 * marcação real. Re-implementar quando necessário consultando git history. */

/* ============================================================
 * Componente: Reading progress bar
 * ============================================================ */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--blog-color-brand);
  z-index: 99999;
  transition: width 0.1s ease-out;
  pointer-events: none;
}

/* ============================================================
 * Componente: TOC (Table of Contents)
 * ============================================================ */
.blog-toc {
  background: var(--blog-color-bg-soft);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 0 0 32px 0;
  font-size: 14px;
}

.blog-toc-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blog-color-muted);
  font-weight: 700;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.blog-toc-title::after {
  content: "−";
  font-size: 18px;
  line-height: 1;
}

.blog-toc.collapsed .blog-toc-title::after {
  content: "+";
}

.blog-toc.collapsed .blog-toc-list {
  display: none;
}

.blog-toc-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.blog-toc-list li {
  margin-bottom: 6px !important;
}

.blog-toc-list a {
  color: var(--blog-color-text-secondary) !important;
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 10px;
  display: block;
  padding-top: 4px;
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
}

.blog-toc-list a:hover,
.blog-toc-list a.active {
  color: var(--blog-color-brand) !important;
  border-left-color: var(--blog-color-brand);
}

/* v2.15.0: removidas regras de .blog-post-layout e .blog-toc-wrapper —
 * confirmadamente sem uso em HTML/JS. Eram do layout sticky planejado
 * em v2.0.0. JS atual injeta `.blog-toc` direto no conteúdo (sem wrapper
 * sticky). Re-implementar consultando git history se necessário. */

/* ============================================================
 * Componente: Share buttons
 * ============================================================ */
.blog-share {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--blog-color-border);
  border-bottom: 1px solid var(--blog-color-border);
  margin: 32px 0;
}

.blog-share-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--blog-color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 8px;
}

.blog-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blog-color-bg-soft);
  color: var(--blog-color-text-secondary) !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s;
  border: none !important;
}

.blog-share-btn:hover {
  background: var(--blog-color-brand);
  color: #fff !important;
}

.blog-share-btn .fa {
  font-size: 16px;
}

.blog-share-feedback {
  font-size: 13px;
  color: var(--blog-color-brand);
  margin-left: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.blog-share-feedback.visible {
  opacity: 1;
}

/* v2.15.0: removidos componentes .blog-nav-articles (52 linhas) e
 * .blog-related* (54 linhas) — confirmadamente sem uso em HTML/JS (audit
 * v2.14.0). Funcionalidade pode ser reimplementada via componente .card
 * (v2.10.0) quando necessário. Re-introduzir via git history se preciso. */

/* ============================================================
 * Blog INDEX — filtros + busca + cards melhorados
 * ============================================================ */
[data-page-type="blog-index"] .blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding: 16px 0;
  border-bottom: 1px solid var(--blog-color-border);
}

[data-page-type="blog-index"] .blog-filter-btn {
  padding: 8px 16px;
  background: var(--blog-color-bg-soft);
  border: 1px solid var(--blog-color-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blog-color-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

[data-page-type="blog-index"] .blog-filter-btn:hover {
  border-color: var(--blog-color-brand);
  color: var(--blog-color-brand);
}

[data-page-type="blog-index"] .blog-filter-btn.active {
  background: var(--blog-color-brand);
  border-color: var(--blog-color-brand);
  color: #fff;
}

[data-page-type="blog-index"] .blog-filter-btn .count {
  opacity: 0.7;
  margin-left: 4px;
  font-weight: 400;
}

[data-page-type="blog-index"] .post-tiny[data-category-hidden="true"] {
  display: none;
}

/* Card melhor visível com categoria visível */
[data-page-type="blog-index"] .post-tiny .post-category {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blog-color-brand);
  font-weight: 700;
  margin-bottom: 6px;
}

[data-page-type="blog-index"] .post-tiny-title {
  margin-top: 4px;
}

[data-page-type="blog-index"] .post-tiny-title a {
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

@media (max-width: 575px) {
  [data-page-type="blog-index"] .post-tiny-title a {
    font-size: 17px !important;
  }
}

[data-page-type="blog-index"] .post-tiny-text {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--blog-color-text-secondary) !important;
}

[data-page-type="blog-index"] .post-tiny-time {
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blog-color-muted) !important;
  margin-top: 12px;
}

/* ============================================================
 * v2.3.0 — Blog index: search + reading time + featured + updated em
 * ============================================================ */
[data-page-type="blog-index"] .blog-search {
  margin: 0 0 20px;
}
[data-page-type="blog-index"] .blog-search-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}
[data-page-type="blog-index"] .blog-search-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
[data-page-type="blog-index"] .blog-search-input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus);
}
[data-page-type="blog-index"] .blog-search-input::placeholder {
  color: #adb5bd;
}

/* Reading time pill */
[data-page-type="blog-index"] .post-reading-time {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-brand);
  background: var(--color-brand-soft);
  border-radius: 100px;
  letter-spacing: 0;
  text-transform: none;
}
[data-page-type="blog-index"] .post-reading-time .fa {
  margin-right: 4px;
}

/* Featured post (first card) */
[data-page-type="blog-index"] .post-featured {
  position: relative;
}
[data-page-type="blog-index"] .post-featured::before {
  content: "★ Em destaque";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--color-brand);
  color: var(--color-brand-contrast);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.03em;
}
[data-page-type="blog-index"] .post-featured .post-tiny-title a {
  font-size: 22px !important;
  font-weight: 700 !important;
}
@media (max-width: 767px) {
  [data-page-type="blog-index"] .post-featured .post-tiny-title a {
    font-size: 19px !important;
  }
}

/* v2.19.0 — reforço do destaque: card full-width horizontal (imagem ao
 * lado no desktop, empilhado no mobile) + borda/sombra. Mantém o badge
 * "★ Em destaque" e o título ampliado das regras acima. O JS marca o col
 * externo com .post-featured-col e agrupa o texto em .post-featured-body. */
[data-page-type="blog-index"] .post-featured-col {
  flex: 0 0 100%;
  max-width: 100%;
}
[data-page-type="blog-index"] .post-featured {
  text-align: left;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
[data-page-type="blog-index"] .post-featured .post-featured-body {
  padding: var(--space-6);
}
@media (min-width: 768px) {
  [data-page-type="blog-index"] .post-featured {
    display: flex;
    align-items: stretch;
  }
  [data-page-type="blog-index"] .post-featured .post-tiny-media {
    flex: 0 0 50%;
    max-width: 50%;
  }
  [data-page-type="blog-index"] .post-featured .post-tiny-media img {
    height: 100%;
    object-fit: cover;
  }
  [data-page-type="blog-index"] .post-featured .post-featured-body {
    flex: 1;
    align-self: center;
    padding: var(--space-8);
  }
  [data-page-type="blog-index"] .post-featured .post-tiny-title a {
    font-size: 28px !important;
  }
}

/* Hide cards on search */
[data-page-type="blog-index"] article[data-search-hidden="true"] {
  display: none !important;
}

/* "Atualizado em" pill nos blog posts */
[data-page-type="blog-post"] .blog-updated {
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
  margin: 8px 0 24px;
}
[data-page-type="blog-post"] .blog-updated time {
  font-weight: 600;
  color: var(--color-text-secondary);
}