/*
Theme Name:   GeneratePress Child
Theme URI:    http://localhost:8081/
Description:  Child theme do GeneratePress com folha de estilo zerada e tema clean inspirado no Facebook (modo claro). Mobile-first.
Author:       marcos
Author URI:   http://localhost:8081/
Template:     generatepress
Version:      0.2.0
Text Domain:  generatepress-child
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root {
  --gp-bg:           #f2f4f7;
  --gp-surface:      #ffffff;
  --gp-text:         #1c1e21;
  --gp-text-muted:   #65676b;
  --gp-border:       #e4e6eb;
  --gp-border-soft:  #f0f2f5;
  --gp-shadow:       0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --gp-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.08);

  --gp-radius:       12px;
  --gp-radius-pill:  999px;

  /* Estes quatro são sobrescritos pelo Customizer (functions.php). */
  --gp-header-a:     #1877f2;
  --gp-header-b:     #4267b2;
  --gp-accent:       #1877f2;
  --gp-footer-bg:    #1c1e21;

  /* Cores do texto do footer (claras, otimizadas para fundo escuro). */
  --gp-footer-text:        #b0b3b8;
  --gp-footer-text-strong: #ffffff;
  --gp-footer-hover-bg:    rgba(255, 255, 255, 0.08);

  --gp-container:    720px;
  --gp-container-wide: 1200px;

  --gp-font:         "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gp-space-1: 4px;
  --gp-space-2: 8px;
  --gp-space-3: 12px;
  --gp-space-4: 16px;
  --gp-space-5: 20px;
  --gp-space-6: 24px;
  --gp-space-8: 32px;
  --gp-space-10: 40px;
}

/* ============================================================
   Reset mínimo
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--gp-font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--gp-text);
  background: var(--gp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; }

a { color: var(--gp-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   Layout: container e main
   ============================================================ */
.gp-container {
  width: 100%;
  max-width: var(--gp-container);
  margin-inline: auto;
  /* Mobile: zero padding lateral — o card encosta nas bordas. */
  padding-inline: 0;
}

.gp-container--wide { max-width: var(--gp-container-wide); }

/* Páginas de listagem ficam com container largo (grid de cards). */
.home .gp-container,
.archive .gp-container,
.search .gp-container,
.blog .gp-container {
  max-width: var(--gp-container-wide);
}

.gp-main {
  /* Mobile: zero padding vertical — o card encosta no header. */
  padding-block: 0;
}

@media (min-width: 768px) {
  .gp-container { padding-inline: var(--gp-space-4); }
  .gp-main      { padding-block: var(--gp-space-5) var(--gp-space-10); }
}

/* ============================================================
   Header
   ============================================================ */
.gp-header {
  position: relative;
  background: linear-gradient(135deg, var(--gp-header-a), var(--gp-header-b));
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.gp-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-inline: var(--gp-space-4);
  min-height: 56px;
  row-gap: 0;
}

/*
 * .gp-header__brand é um <div> wrapper. Pode conter:
 *   (a) <a class="custom-logo-link"><img class="custom-logo"></a>  ← the_custom_logo()
 *   (b) <a class="gp-header__brand-text">site name</a>             ← fallback texto
 */
.gp-header__brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.gp-header__brand .custom-logo-link,
.gp-header__brand .gp-header__brand-text {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  padding: 0;
}
.gp-header__brand .custom-logo-link:hover,
.gp-header__brand .gp-header__brand-text:hover {
  text-decoration: none;
  opacity: 0.92;
  color: inherit;
}

/* Imagem do Custom Logo: ajusta ao header sem deixar passar do limite. */
.gp-header__brand img,
.gp-header__brand .custom-logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

/* Toggle do menu mobile (checkbox hack — sem JS) */
.gp-menu-toggle__input { display: none; }

.gp-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--gp-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  border: 0;
  padding: 0;
  transition: background-color 120ms ease;
}
.gp-menu-toggle:hover { background: rgba(255, 255, 255, 0.14); }

.gp-menu-toggle__bar,
.gp-menu-toggle__bar::before,
.gp-menu-toggle__bar::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 180ms ease, opacity 180ms ease;
}
.gp-menu-toggle__bar { position: relative; }
.gp-menu-toggle__bar::before { position: absolute; top: -6px; left: 0; }
.gp-menu-toggle__bar::after  { position: absolute; top:  6px; left: 0; }

.gp-menu-toggle__input:checked ~ .gp-header__inner .gp-menu-toggle__bar { background: transparent; }
.gp-menu-toggle__input:checked ~ .gp-header__inner .gp-menu-toggle__bar::before { top: 0; transform: rotate(45deg); }
.gp-menu-toggle__input:checked ~ .gp-header__inner .gp-menu-toggle__bar::after  { top: 0; transform: rotate(-45deg); }

/*
 * Nav — mobile-first
 * É um filho da row do header: ocupa flex-basis 100% (segunda linha).
 * Colapsa via grid-template-rows. Por estar in-flow no <header sticky>,
 * abrir empurra o conteúdo para baixo naturalmente.
 */
.gp-nav {
  flex-basis: 100%;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms ease;
}
.gp-nav__inner { overflow: hidden; }

.gp-menu-toggle__input:checked ~ .gp-header__inner .gp-nav {
  grid-template-rows: 1fr;
}

.gp-nav ul,
.gp-nav .gp-menu {
  list-style: none;
  margin: 0;
  padding: var(--gp-space-2) 0 var(--gp-space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gp-nav a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--gp-radius);
  color: inherit;
  font-weight: 500;
}
.gp-nav a:hover { background: rgba(255, 255, 255, 0.16); text-decoration: none; color: #fff; }
.gp-nav .current-menu-item > a,
.gp-nav .current_page_item > a { background: rgba(255, 255, 255, 0.20); }

/* ----- Botão de busca (lupa) + drawer (CSS-only via checkbox hack) -----
   Mobile: o drawer abre JUNTO com o menu (mesmo #gp-menu-toggle), portanto
           o botão de lupa fica oculto e a busca aparece no fim do drawer.
   Desktop: a navegação fica sempre aberta; o drawer abre via #gp-search-toggle
            como segunda linha do header. */
.gp-search-toggle__input { display: none; }

.gp-search-toggle {
  display: none; /* mobile esconde — busca já vem dentro do menu drawer */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--gp-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin-left: var(--gp-space-1);
  transition: background-color 120ms ease;
}
.gp-search-toggle:hover { background: rgba(255, 255, 255, 0.14); }

.gp-search-toggle__input:checked ~ .gp-header__inner .gp-search-toggle {
  background: rgba(255, 255, 255, 0.20);
}

/* Drawer — colapsa via grid-template-rows (mesma técnica do .gp-nav) */
.gp-search-drawer {
  flex-basis: 100%;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms ease;
}
.gp-search-drawer__inner { overflow: hidden; }

/* Mobile: abre junto com o menu (drawer é irmão direto do input) */
.gp-menu-toggle__input:checked ~ .gp-search-drawer {
  grid-template-rows: 1fr;
}

/* Formulário em si */
.gp-search {
  display: flex;
  gap: var(--gp-space-2);
  padding: var(--gp-space-3) var(--gp-space-4) var(--gp-space-4);
}

.gp-search__input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  font-size: 0.9375rem;
  background: #ffffff;
  color: var(--gp-text);
  border: 0;
  border-radius: var(--gp-radius);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.gp-search__input::placeholder { color: var(--gp-text-muted); }
.gp-search__input:focus { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); }
/* Remove o "x" nativo do input search no Chrome para um visual mais limpo */
.gp-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.gp-search__submit {
  flex-shrink: 0;
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border: 0;
  border-radius: var(--gp-radius);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.gp-search__submit:hover { background: rgba(255, 255, 255, 0.30); }

/* Utility para esconder texto mas manter acessível a leitores de tela.
   Necessário porque o tema desregistra o CSS do pai (que costuma fornecer). */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link (acessibilidade) */
.gp-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.gp-skip-link:focus {
  position: fixed;
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: var(--gp-surface);
  color: var(--gp-text);
  border-radius: var(--gp-radius);
  z-index: 1000;
}

/* Desktop */
@media (min-width: 768px) {
  .gp-menu-toggle { display: none; }
  .gp-header__inner { padding-inline: var(--gp-space-6); flex-wrap: nowrap; }
  .gp-nav {
    flex-basis: auto;
    grid-template-rows: 1fr;
    margin-left: auto;
  }
  .gp-nav ul,
  .gp-nav .gp-menu {
    flex-direction: row;
    padding: 0;
    gap: var(--gp-space-1);
  }
  .gp-nav a { padding: 8px 14px; }

  /* Botão de lupa aparece à direita do menu */
  .gp-search-toggle { display: inline-flex; }

  /* O drawer não é mais controlado pelo menu-toggle no desktop
     (a navegação fica sempre visível). Reseta para fechado. */
  .gp-menu-toggle__input:checked ~ .gp-search-drawer {
    grid-template-rows: 0fr;
  }
  /* Abre via search-toggle */
  .gp-search-toggle__input:checked ~ .gp-search-drawer {
    grid-template-rows: 1fr;
  }

  /* Layout do form no desktop: padding maior, fundo levemente escurecido
     para diferenciar visualmente do header */
  .gp-search-drawer {
    background: rgba(0, 0, 0, 0.10);
  }
  .gp-search {
    max-width: var(--gp-container-wide);
    margin-inline: auto;
    padding: var(--gp-space-4) var(--gp-space-6);
  }
}

/* ============================================================
   Cards (bloco padrão para conteúdo)
   ============================================================ */
.gp-card {
  background: var(--gp-surface);
  /* Mobile: sem borda lateral, sem radius, sem sombra — flush nas laterais. */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--gp-space-5);
}

/*
 * Cards empilhados no mobile: separador 1px no topo (sem fresta cinza).
 * Cobre tanto cards adjacentes quanto card-heading antes da .gp-list.
 */
.gp-card + .gp-card,
.gp-card + .gp-list > .gp-card:first-child {
  margin-top: 0;
  border-top: 1px solid var(--gp-border);
}

@media (min-width: 768px) {
  .gp-card {
    border: 1px solid var(--gp-border);
    border-radius: var(--gp-radius);
    box-shadow: var(--gp-shadow);
    padding: var(--gp-space-8);
  }
  .gp-card + .gp-card,
  .gp-card + .gp-list > .gp-card:first-child {
    margin-top: var(--gp-space-4);
    /* No desktop o card já tem border completo, então não precisa do border-top extra. */
    border-top: 1px solid var(--gp-border);
  }
}

/* ============================================================
   Botões
   ============================================================ */
.gp-btn {
  display: inline-block;
  padding: 10px 18px;
  background: var(--gp-accent);
  color: #ffffff;
  border: 0;
  border-radius: var(--gp-radius);
  font-weight: 600;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}
.gp-btn:hover { filter: brightness(0.94); text-decoration: none; color: #fff; }
.gp-btn:active { transform: translateY(1px); }

.gp-btn--ghost {
  background: var(--gp-surface);
  color: var(--gp-accent);
  border: 1px solid var(--gp-border);
}

/* ============================================================
   Post (single)
   ============================================================ */
.gp-post__title {
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: var(--gp-space-2);
}

.gp-post__excerpt {
  font-size: 1.0625rem;
  color: var(--gp-text-muted);
  margin-bottom: var(--gp-space-4);
}

.gp-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--gp-space-4);
  font-size: 0.8125rem;
  color: var(--gp-text-muted);
  margin-top: var(--gp-space-5);
}
.gp-post__meta a { color: inherit; }
.gp-post__meta a:hover { color: var(--gp-accent); text-decoration: none; }
.gp-post__meta-item { display: inline-flex; align-items: center; gap: 6px; }

.gp-post__feature {
  border-radius: var(--gp-radius);
  overflow: hidden;
  background: var(--gp-border-soft);
}
.gp-post__feature img { width: 100%; height: auto; }

/* ------------------------------------------------------------
   Corpo do post — tipografia editorial mobile-first.

   Princípios aplicados (UX Writing / Content Design):
   - Tamanhos confortáveis: 18px mobile, 19px desktop, line-height 1.7+.
   - Cor de destaque como âncora semântica (links, marca de h2, bullets,
     <mark>, capitular, blockquote, hr).
   - Lead paragraph (1º parágrafo) maior, para criar respiro e definir tom.
   - Hierarquia clara: h2 marca seção, h3 sub-tópico, h4 atua como eyebrow.
   - Componentes editoriais: pull quote, drop cap, mark, code, tabela.
   ------------------------------------------------------------ */
.gp-post__content {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--gp-text);
  hyphens: auto;
  word-wrap: break-word;
}

@media (min-width: 768px) {
  .gp-post__content {
    font-size: 1.1875rem;
    line-height: 1.75;
  }
}

/* Ritmo vertical entre filhos diretos */
.gp-post__content > * + * { margin-top: 1.1em; }

/* Lead — 1º parágrafo serve de "intro" editorial */
.gp-post__content > p:first-of-type {
  font-size: 1.1875rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--gp-text);
  margin-bottom: 1.4em;
}
@media (min-width: 768px) {
  .gp-post__content > p:first-of-type {
    font-size: 1.3125rem;
    line-height: 1.5;
  }
}

/* Drop cap (Gutenberg .has-drop-cap) — capitular em cor de destaque */
.gp-post__content p.has-drop-cap::first-letter {
  font-size: 3.6em;
  font-weight: 700;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.12em 0 0;
  color: var(--gp-accent);
  font-family: Georgia, "Times New Roman", serif;
}

/* ----- Cabeçalhos -----
   h2 = marco de seção (barra accent à esquerda).
   h3 = sub-tópico (limpo, peso da própria tipografia).
   h4 = eyebrow / rótulo (uppercase, pequeno, muted).
*/
.gp-post__content h2,
.gp-post__content h3 {
  color: var(--gp-text);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.gp-post__content h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-top: 2em;
  margin-bottom: 0.5em;
  position: relative;
  padding-left: var(--gp-space-3);
}
.gp-post__content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  border-radius: 2px;
  background: var(--gp-accent);
}

.gp-post__content h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin-top: 1.8em;
  margin-bottom: 0.4em;
}

.gp-post__content h4 {
  margin-top: 1.6em;
  margin-bottom: 0.3em;
  font-size: 0.8125rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--gp-accent);
  font-weight: 700;
}

@media (min-width: 768px) {
  .gp-post__content h2 {
    font-size: 1.875rem;
    padding-left: var(--gp-space-4);
  }
  .gp-post__content h2::before { width: 5px; }
  .gp-post__content h3 { font-size: 1.4375rem; }
}

/* ----- Links inline ----- */
.gp-post__content a {
  color: var(--gp-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--gp-accent) 40%, transparent);
  transition: text-decoration-color 160ms ease, text-decoration-thickness 160ms ease;
  font-weight: 500;
}
.gp-post__content a:hover {
  text-decoration-color: var(--gp-accent);
  text-decoration-thickness: 2px;
}

/* ----- Emphasis / inline marcas ----- */
.gp-post__content strong,
.gp-post__content b {
  font-weight: 700;
  color: var(--gp-text);
}
.gp-post__content em,
.gp-post__content i { font-style: italic; }

.gp-post__content mark {
  background: color-mix(in srgb, var(--gp-accent) 18%, transparent);
  color: var(--gp-text);
  padding: 0 4px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ----- Código ----- */
.gp-post__content code,
.gp-post__content kbd,
.gp-post__content samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.875em;
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--gp-accent) 8%, var(--gp-bg));
  color: var(--gp-text);
}
.gp-post__content pre {
  margin: 1.4em 0;
  padding: var(--gp-space-4);
  background: var(--gp-bg);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius);
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.5;
}
.gp-post__content pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
  border-radius: 0;
}

/* ----- Citação (blockquote padrão) ----- */
.gp-post__content blockquote {
  margin: 1.8em 0;
  padding: var(--gp-space-4) var(--gp-space-5);
  border-left: 4px solid var(--gp-accent);
  background: color-mix(in srgb, var(--gp-accent) 5%, var(--gp-bg));
  border-radius: 0 var(--gp-radius) var(--gp-radius) 0;
  color: var(--gp-text);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.6;
}
.gp-post__content blockquote > * + * { margin-top: 0.6em; }
.gp-post__content blockquote cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--gp-text-muted);
}
.gp-post__content blockquote cite::before { content: "— "; }

/* ----- Pull quote (destaque grande de frase-chave) -----
   Use a classe gp-pullquote em um <blockquote> ou parágrafo.
   Também atende ao bloco pullquote do Gutenberg.
*/
.gp-post__content .gp-pullquote,
.gp-post__content .wp-block-pullquote {
  margin: 2em 0;
  padding: var(--gp-space-6) 0;
  background: transparent;
  border-left: 0;
  border-radius: 0;
  border-top: 2px solid var(--gp-accent);
  border-bottom: 2px solid var(--gp-accent);
  text-align: center;
  font-size: 1.375rem;
  line-height: 1.4;
  font-weight: 500;
  font-style: normal;
  color: var(--gp-text);
  letter-spacing: -0.01em;
}
.gp-post__content .wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.gp-post__content .gp-pullquote cite,
.gp-post__content .wp-block-pullquote cite {
  display: block;
  margin-top: var(--gp-space-3);
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gp-accent);
}
.gp-post__content .gp-pullquote cite::before,
.gp-post__content .wp-block-pullquote cite::before { content: none; }
@media (min-width: 768px) {
  .gp-post__content .gp-pullquote,
  .gp-post__content .wp-block-pullquote { font-size: 1.625rem; }
}

/* ----- Listas (bullets / numeração em cor de destaque) ----- */
.gp-post__content ul,
.gp-post__content ol {
  padding-left: 1.6em;
  list-style: none;
}
.gp-post__content ul > li,
.gp-post__content ol > li {
  position: relative;
  margin-top: 0.4em;
}
.gp-post__content ul > li::before {
  content: "";
  position: absolute;
  left: -1.2em;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gp-accent);
}
.gp-post__content ol { counter-reset: gp-ol; }
.gp-post__content ol > li { counter-increment: gp-ol; }
.gp-post__content ol > li::before {
  content: counter(gp-ol) ".";
  position: absolute;
  left: -1.6em;
  top: 0;
  width: 1.4em;
  text-align: right;
  padding-right: 6px;
  color: var(--gp-accent);
  font-weight: 700;
}
/* Sublistas — bullets menores, sem cor de destaque (hierarquia visual) */
.gp-post__content li ul > li::before {
  background: var(--gp-text-muted);
  width: 5px;
  height: 5px;
  top: 0.7em;
}

/* ----- HR — divisor curto em cor de destaque, centralizado ----- */
.gp-post__content hr {
  border: 0;
  margin: var(--gp-space-8) auto;
  width: 60px;
  height: 3px;
  background: var(--gp-accent);
  border-radius: 2px;
  opacity: 0.75;
}

/* ----- Imagens e figuras ----- */
.gp-post__content img { border-radius: var(--gp-radius); }
.gp-post__content figure { margin: 1.5em 0; }
.gp-post__content figure img,
.gp-post__content .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: var(--gp-radius);
}
.gp-post__content figcaption,
.gp-post__content .wp-block-image figcaption {
  margin-top: var(--gp-space-2);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--gp-text-muted);
  font-style: italic;
}

/* ----- Tabelas ----- */
.gp-post__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.9375rem;
}
.gp-post__content th,
.gp-post__content td {
  text-align: left;
  padding: var(--gp-space-2) var(--gp-space-3);
  border-bottom: 1px solid var(--gp-border-soft);
  vertical-align: top;
}
.gp-post__content thead th {
  border-bottom: 2px solid var(--gp-accent);
  color: var(--gp-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gp-post__content tbody tr:hover {
  background: color-mix(in srgb, var(--gp-accent) 4%, transparent);
}

/* Scroll suave para âncoras dentro do post */
.gp-post__content :target { scroll-margin-top: var(--gp-space-6); }

@media (min-width: 768px) {
  .gp-post__title { font-size: 2rem; }
}

/* Breadcrumb */
.gp-breadcrumb {
  margin-top: var(--gp-space-6);
  padding-top: var(--gp-space-4);
  border-top: 1px solid var(--gp-border-soft);
  font-size: 0.8125rem;
  color: var(--gp-text-muted);
}
.gp-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.gp-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gp-breadcrumb__item + .gp-breadcrumb__item::before {
  content: "›";
  color: var(--gp-border);
  font-size: 1rem;
  line-height: 1;
}
.gp-breadcrumb__item a {
  color: var(--gp-text-muted);
}
.gp-breadcrumb__item a:hover {
  color: var(--gp-accent);
  text-decoration: none;
}
.gp-breadcrumb__item span[aria-current="page"] {
  color: var(--gp-text);
  font-weight: 500;
  /* Trunca títulos longos em uma linha no mobile */
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Featured image quando aparece após o conteúdo (variante --bottom) */
.gp-post__feature--bottom {
  margin-top: var(--gp-space-5);
  margin-bottom: 0;
}

/* Caixa de recomendações injetada após o 8º parágrafo */
.gp-recommendations {
  margin: 1.5em 0;
  padding: var(--gp-space-4) var(--gp-space-5);
  background: var(--gp-bg);
  border: 1px solid var(--gp-border-soft);
  border-radius: var(--gp-radius);
  list-style: none;
}
.gp-recommendations__title {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--gp-text);
  margin-bottom: var(--gp-space-2);
}
.gp-recommendations ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
/*
 * Sobrescreve o estilo de lista do .gp-post__content (bullets accent
 * com position absolute left:-1.2em) — esses bullets cairiam fora da
 * caixa porque o ul aqui tem padding-left:0. A caixa de recomendações
 * já tem identidade visual própria (background + separadores), bullets
 * duplicariam o trabalho.
 */
.gp-recommendations ul > li {
  margin-top: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--gp-border-soft);
  position: static;
}
.gp-recommendations ul > li::before {
  content: none;
  display: none;
}
.gp-recommendations ul > li:last-child { border-bottom: 0; }

.gp-recommendations a {
  color: var(--gp-accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--gp-accent) 35%, transparent);
  transition: text-decoration-color 160ms ease;
}
.gp-recommendations a:hover {
  text-decoration-color: var(--gp-accent);
}

/* Tags */
.gp-post__tags {
  margin-top: var(--gp-space-6);
  padding-top: var(--gp-space-5);
  border-top: 1px solid var(--gp-border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gp-post__tags-label {
  width: 100%;
  font-size: 0.8125rem;
  color: var(--gp-text-muted);
  margin-bottom: var(--gp-space-1);
}
.gp-tag {
  display: inline-block;
  padding: 4px 12px;
  background: var(--gp-bg);
  border: 1px solid var(--gp-border-soft);
  border-radius: var(--gp-radius-pill);
  font-size: 0.8125rem;
  color: var(--gp-text);
  transition: background-color 120ms ease, border-color 120ms ease;
}
.gp-tag:hover {
  background: var(--gp-border-soft);
  border-color: var(--gp-border);
  text-decoration: none;
}

/* ============================================================
   Posts relacionados (fim do single)
   ============================================================ */
.gp-related {
  margin-top: var(--gp-space-8);
}

/*
 * Variante de grid para a seção de relacionados.
 * Trava em 2 colunas em qualquer largura ≥640px (sem ir para 3/4
 * como o .gp-grid base faz nas listagens). Usa especificidade dupla
 * (.gp-grid.gp-grid--related) para vencer .gp-grid sem depender da
 * ordem de declaração das regras no arquivo.
 */
.gp-grid.gp-grid--related {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .gp-grid.gp-grid--related { grid-template-columns: repeat(2, 1fr); }
}

/* No mobile o container do single tem padding 0 — alinhamos a section heading
   e adicionamos um respiro lateral só nesta seção, pra ficar consistente. */
@media (max-width: 767px) {
  .gp-related .gp-section-heading {
    padding-left: var(--gp-space-5);
    padding-right: var(--gp-space-5);
  }
}

/* ============================================================
   Navegação entre posts (anterior / próximo)
   ============================================================ */
.gp-post-nav {
  margin-top: var(--gp-space-6);
  padding-top: var(--gp-space-5);
  border-top: 1px solid var(--gp-border);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-3);
}

.gp-post-nav__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--gp-space-3) var(--gp-space-4);
  background: var(--gp-surface);
  border: 1px solid var(--gp-border-soft);
  border-radius: var(--gp-radius);
  color: var(--gp-text);
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.gp-post-nav__item:hover {
  border-color: var(--gp-border);
  background: var(--gp-bg);
  text-decoration: none;
  color: var(--gp-text);
}

.gp-post-nav__item--empty {
  display: none;
}

.gp-post-nav__direction {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gp-text-muted);
}

.gp-post-nav__arrow {
  font-size: 0.9rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.gp-post-nav__item--prev:hover .gp-post-nav__arrow { transform: translateX(-3px); }
.gp-post-nav__item--next:hover .gp-post-nav__arrow { transform: translateX(3px); }

.gp-post-nav__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gp-text);
  /* Trunca em 2 linhas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 640px) {
  .gp-post-nav {
    grid-template-columns: 1fr 1fr;
    gap: var(--gp-space-4);
  }
  .gp-post-nav__item--empty {
    display: block;
    background: transparent;
    border-color: transparent;
  }
  .gp-post-nav__item--next {
    text-align: right;
    align-items: flex-end;
  }
}

/* ============================================================
   Bloco do autor (fim do post)
   ============================================================ */
.gp-author {
  margin-top: var(--gp-space-6);
  padding-top: var(--gp-space-5);
  border-top: 1px solid var(--gp-border);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--gp-space-4);
}

.gp-author__avatar {
  display: block;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gp-border-soft);
}
.gp-author__avatar:hover { text-decoration: none; }

.gp-author__img,
.gp-author__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gp-author__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gp-author__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gp-text-muted);
}

.gp-author__name {
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0;
  font-weight: 700;
}
.gp-author__name a { color: var(--gp-text); }
.gp-author__name a:hover { color: var(--gp-accent); text-decoration: none; }

.gp-author__bio {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--gp-text-muted);
}

.gp-author__link {
  margin-top: var(--gp-space-2);
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gp-accent);
}
.gp-author__link::after {
  content: " →";
  transition: transform 160ms ease;
  display: inline-block;
}
.gp-author__link:hover {
  text-decoration: none;
}
.gp-author__link:hover::after {
  transform: translateX(3px);
}

@media (min-width: 768px) {
  .gp-author {
    margin-top: var(--gp-space-8);
    padding: var(--gp-space-5);
    background: var(--gp-bg);
    border: 1px solid var(--gp-border-soft);
    border-radius: var(--gp-radius);
    gap: var(--gp-space-5);
  }
  .gp-author__avatar {
    width: 80px;
    height: 80px;
  }
  .gp-author__name { font-size: 1.125rem; }
}

/* ============================================================
   Listagem (home / archive)
   ============================================================ */

/* Badge — pílula da categoria */
.gp-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 14px;
  border-radius: var(--gp-radius-pill);
  background: color-mix(in srgb, var(--gp-accent) 14%, white);
  color: var(--gp-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.6;
}
.gp-badge:hover {
  background: color-mix(in srgb, var(--gp-accent) 22%, white);
  text-decoration: none;
}

/* Cabeçalho de archive (categoria, tag, busca, etc.) */
.gp-archive-heading {
  background: var(--gp-surface);
  padding: var(--gp-space-5);
}
.gp-archive-heading__eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gp-accent);
  margin-bottom: var(--gp-space-2);
}
.gp-archive-heading__title {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--gp-text);
}
.gp-archive-heading__title em { font-style: normal; color: var(--gp-accent); }
.gp-archive-heading__desc {
  margin-top: var(--gp-space-2);
  color: var(--gp-text-muted);
  font-size: 0.9375rem;
}
@media (min-width: 768px) {
  .gp-archive-heading {
    background: transparent;
    padding: var(--gp-space-6) 0 var(--gp-space-5);
  }
  .gp-archive-heading__title { font-size: 2rem; }
}

/* ----- Seções de categoria na home -----
   Header com título à esquerda e botão "Ver todos" à direita.
   No mobile o header fica em card branco (igual ao archive-heading);
   no desktop fica em transparente. */
.gp-cat-section {
  margin-top: var(--gp-space-8);
}

.gp-cat-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gp-space-3);
  padding: var(--gp-space-5) var(--gp-space-5) var(--gp-space-3);
  background: var(--gp-surface);
}

.gp-cat-section__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--gp-text);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gp-cat-section__see-all {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gp-accent);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gp-cat-section__see-all::after {
  content: "→";
  font-size: 1em;
  line-height: 1;
  transition: transform 160ms ease;
}
.gp-cat-section__see-all:hover { text-decoration: none; }
.gp-cat-section__see-all:hover::after { transform: translateX(3px); }

@media (min-width: 768px) {
  .gp-cat-section { margin-top: var(--gp-space-10); }
  .gp-cat-section__header {
    background: transparent;
    padding: 0;
    margin-bottom: var(--gp-space-5);
  }
  .gp-cat-section__title { font-size: 1.5rem; }
  .gp-cat-section__see-all { font-size: 0.875rem; }
}

/* Section heading — "MAIS RECENTES" com linha à direita */
.gp-section-heading {
  display: flex;
  align-items: center;
  gap: var(--gp-space-3);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gp-text-muted);
  margin: 0;
  padding: var(--gp-space-5) var(--gp-space-5) var(--gp-space-3);
  background: var(--gp-surface);
}
.gp-section-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gp-border);
}

@media (min-width: 768px) {
  .gp-section-heading {
    background: transparent;
    padding: 0;
    margin: var(--gp-space-8) 0 var(--gp-space-5);
  }
}

/* Hero (post em destaque) */
.gp-hero {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--gp-surface);
}

.gp-hero__media {
  display: block;
  aspect-ratio: 16 / 11;
  background: var(--gp-border-soft);
  overflow: hidden;
}
.gp-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gp-hero__body {
  padding: var(--gp-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-3);
}

.gp-hero__title {
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.gp-hero__title a { color: var(--gp-text); }
.gp-hero__title a:hover { color: var(--gp-accent); text-decoration: none; }

.gp-hero__excerpt {
  margin: 0;
  color: var(--gp-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.gp-hero__cta { margin: 0; }

.gp-hero__meta {
  margin-top: var(--gp-space-3);
  padding-top: var(--gp-space-3);
  border-top: 1px solid var(--gp-border-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--gp-space-2);
  font-size: 0.8125rem;
  color: var(--gp-text-muted);
}
.gp-hero__meta a { color: var(--gp-text-muted); }
.gp-hero__meta a:hover { color: var(--gp-accent); text-decoration: none; }
.gp-hero__author { color: var(--gp-text) !important; font-weight: 600; }

@media (min-width: 768px) {
  .gp-hero {
    grid-template-columns: 1.05fr 1fr;
    border: 1px solid var(--gp-border);
    border-radius: var(--gp-radius);
    overflow: hidden;
    box-shadow: var(--gp-shadow);
    align-items: stretch;
  }
  .gp-hero__media { aspect-ratio: auto; height: 100%; }
  .gp-hero__body  { padding: var(--gp-space-8); justify-content: center; gap: var(--gp-space-4); }
  .gp-hero__title { font-size: 2rem; }
  .gp-hero__excerpt { font-size: 1rem; }
}

/* Grid de cards */
.gp-grid {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--gp-surface);
}

@media (min-width: 640px) {
  .gp-grid { background: transparent; gap: var(--gp-space-4); }
}
@media (min-width: 768px)  { .gp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .gp-grid { grid-template-columns: repeat(4, 1fr); } }

/* Post card (home) */
.gp-post-card {
  background: var(--gp-surface);
  display: flex;
  flex-direction: column;
}

/* Mobile: separador entre cards (sem fresta cinza) */
.gp-grid > .gp-post-card + .gp-post-card {
  border-top: 1px solid var(--gp-border);
}

.gp-post-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--gp-border-soft);
  overflow: hidden;
}
.gp-post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 280ms ease;
}
.gp-post-card__media:hover img { transform: scale(1.03); }

.gp-post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--gp-space-3);
  padding: var(--gp-space-4);
}

.gp-post-card__title {
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.005em;
}
.gp-post-card__title a { color: var(--gp-text); }
.gp-post-card__title a:hover { color: var(--gp-accent); text-decoration: none; }

.gp-post-card__excerpt {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--gp-text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gp-post-card__meta {
  margin-top: auto;
  padding-top: var(--gp-space-3);
  border-top: 1px solid var(--gp-border-soft);
  font-size: 0.75rem;
  color: var(--gp-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

@media (min-width: 640px) {
  .gp-post-card {
    border: 1px solid var(--gp-border);
    border-radius: var(--gp-radius);
    overflow: hidden;
    box-shadow: var(--gp-shadow);
    transition: box-shadow 180ms ease, transform 180ms ease;
  }
  .gp-post-card:hover { box-shadow: var(--gp-shadow-hover); }
  .gp-grid > .gp-post-card + .gp-post-card { border-top: 1px solid var(--gp-border); }
}

/* Placeholder para posts sem featured image */
.gp-thumb-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--gp-header-a), var(--gp-header-b));
  opacity: 0.85;
}

/* Botão com seta */
.gp-btn--arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gp-btn--arrow::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
  transition: transform 160ms ease;
}
.gp-btn--arrow:hover::after { transform: translateX(3px); }

/* ============================================================
   Footer
   ============================================================ */
.gp-footer {
  margin-top: var(--gp-space-10);
  padding-block: var(--gp-space-8);
  background: var(--gp-footer-bg);
  color: var(--gp-footer-text);
  font-size: 0.875rem;
}

.gp-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gp-space-6);
  text-align: center;
  /* Respiro lateral no mobile (o .gp-container fica em 0 por design para
     deixar os cards encostarem nas bordas, mas o footer precisa de margem). */
  padding-inline: 10px;
}

@media (min-width: 768px) {
  .gp-footer__inner {
    /* No desktop o .gp-container já dá 16px — explicitamos aqui para vencer
       a ordem de cascata da regra padding-inline:10px acima. */
    padding-inline: var(--gp-space-4);
  }
}

/* Logotipo */
.gp-footer__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gp-footer__brand .custom-logo-link,
.gp-footer__brand .gp-footer__brand-text {
  display: inline-flex;
  align-items: center;
  color: var(--gp-footer-text-strong);
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.gp-footer__brand img,
.gp-footer__brand .custom-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}

/* Colunas: empilhadas no mobile (logo + 3 menus), 4 colunas em ≥768px */
.gp-footer__cols {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gp-space-6);
  text-align: center;
}

@media (min-width: 768px) {
  .gp-footer__cols {
    grid-template-columns: repeat(4, 1fr);
    text-align: left;
    gap: var(--gp-space-6);
    align-items: start;
  }
}

.gp-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-3);
  min-width: 0;
}

.gp-footer__col-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gp-footer-text-strong);
  margin: 0;
}

/* Lista de links (categorias, institucional, mais vistos) — vertical */
.gp-footer__menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gp-footer__menu-list li { margin: 0; }

.gp-footer__menu-list a {
  display: inline-block;
  padding: 4px 0;
  color: var(--gp-footer-text);
  font-weight: 500;
  line-height: 1.4;
  transition: color 120ms ease;
}
.gp-footer__menu-list a:hover {
  color: var(--gp-footer-text-strong);
  text-decoration: none;
}
.gp-footer__menu-list .current-menu-item > a,
.gp-footer__menu-list .current_page_item > a {
  color: var(--gp-footer-text-strong);
}

/* Compliance — texto pequeno, centralizado, com largura máxima legível */
.gp-footer__compliance {
  margin: 0;
  padding-top: var(--gp-space-5);
  border-top: 1px solid var(--gp-footer-hover-bg);
  width: 100%;
  max-width: 720px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--gp-footer-text);
}

.gp-footer__copy {
  margin: 0;
  font-size: 0.75rem;
  color: var(--gp-footer-text);
}