/* Posts do blog: "Compartilhar", player "Ouvir artigo", índice de tópicos (js/gm-artigo.js)
   e imagem destacada que amplia 20% com o mouse. Mesmo padrão do blog da Stance. */

body.single-post { --gm-accent: #127a50; --gm-listen-h: 118px; }

/* Topo do artigo: compartilhar + player antes da primeira linha do texto, ao lado da imagem destacada
   (flow-root: a caixa e a linha de baixo ficam ao lado da imagem flutuante, sem passar por baixo dela). */
.gm-artigo-topo {
  display: flow-root;
  margin: 0 0 20px;
  padding: 0 0 4px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.gm-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.gm-share__titulo {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #666;
}
.gm-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gm-accent);
  color: #fff !important;
  text-decoration: none !important;
  transition: transform .15s ease, background-color .15s ease;
}
.gm-share__btn [uk-icon] { display: inline-block; width: 20px; height: 20px; }
.gm-share__btn:hover { transform: translateY(-2px); background: #0d5c3c; }
.gm-share__btn:focus-visible { outline: 2px solid var(--gm-accent); outline-offset: 2px; }

/* Topo largo (desktop): compartilhar à direita do "Ouvir artigo", na mesma linha.
   Container query mede a caixa do topo (a imagem destacada flutua ao lado e varia a largura);
   abaixo de 680px tudo fica empilhado. A linha do player reserva a direita, então nem o botão
   "Parar" nem a velocidade passam por baixo dos ícones. Só com o espaço do player presente. */
.gm-artigo-topo { position: relative; container-type: inline-size; }
@container (min-width: 680px) {
  .gm-share:has(+ .gm-listen-slot) {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    min-height: 36px;
    margin: 0;
  }
  .gm-listen > .gm-listen__row:first-child { padding-right: 256px; }
}

/* CLS: o espaço do player vem no HTML com altura mínima fixa; o script só preenche. */
.gm-listen-slot { box-sizing: border-box; min-height: var(--gm-listen-h); }

.gm-listen {
  padding: 0 0 12px;
  font-family: inherit;
}
.gm-listen__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.gm-listen__row--seek { margin-top: 14px; flex-wrap: nowrap; }
.gm-listen__toggle,
.gm-listen__stop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.gm-listen__toggle {
  border: 1px solid var(--gm-accent);
  background: var(--gm-accent);
  color: #fff;
}
.gm-listen__toggle:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(18, 122, 80, .3); }
.gm-listen__stop {
  border: 1px solid rgba(0, 0, 0, .15);
  background: #fff;
  color: #333;
}
.gm-listen__stop:hover { background: rgba(0, 0, 0, .04); }
.gm-listen__stop[hidden],
.gm-listen svg[hidden] { display: none; }
.gm-listen__rate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #666;
}
.gm-listen__rate select {
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 999px;
  padding: 6px 12px;
  background: #fff;
  color: #333;
  font-size: 13px;
  font-family: inherit;
}
.gm-listen__seek {
  flex: 1;
  min-width: 0;
  height: 24px; /* área de toque; a trilha visível continua com 4px */
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.gm-listen__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: rgba(0, 0, 0, .12); }
.gm-listen__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -5px;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 999px;
  background: var(--gm-accent);
}
.gm-listen__seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 999px;
  background: var(--gm-accent);
}
.gm-listen__seek::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(0, 0, 0, .12); }
.gm-listen__status {
  flex-shrink: 0;
  min-width: 3.5em;
  text-align: right;
  font-size: 12px;
  color: #666;
}
.gm-listen__hint {
  margin: 8px 0 0;
  padding: 0;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.et_pb_post_content .tts-chunk.is-speaking,
h1.is-speaking {
  background: #ffd84d; /* amarelo forte: trecho que está sendo lido */
  box-shadow: 0 0 0 3px #ffd84d;
  border-radius: 2px;
}

/* Imagem destacada 15% menor em repouso no desktop e tablet (layout do Theme Builder: 400x500).
   No celular ela ocupa a largura toda e fica como está. */
@media (min-width: 768px) {
  body.single-post #featured_post { width: 340px !important; height: 425px !important; } /* !important: tamanho vem do CSS do Divi */
}

/* Imagens do texto do artigo: ampliam 15% ao passar o mouse, por cima do texto (só com mouse). */
@media (hover: hover) and (pointer: fine) {
  body.single-post .et_pb_post_content figure img,
  body.single-post .et_pb_post_content p img {
    position: relative;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
  }
  body.single-post .et_pb_post_content figure img:hover,
  body.single-post .et_pb_post_content p img:hover {
    z-index: 5;
    transform: scale(1.15);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.single-post .et_pb_post_content figure img:hover,
  body.single-post .et_pb_post_content p img:hover { transform: none; }
}

/* Imagem destacada (div#featured_post, fundo do Theme Builder): cresce 20% ao passar o mouse,
   por cima do texto vizinho (só em aparelhos com mouse; no toque não há hover). */
@media (hover: hover) and (pointer: fine) {
  body.single-post #featured_post {
    position: relative;
    z-index: 5;
    transform-origin: left top;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease;
  }
  body.single-post #featured_post:hover {
    z-index: 50;
    transform: scale(1.2);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
  }
  body.single-post .et_pb_column:has(> #featured_post:hover),
  body.single-post .et_pb_row:has(#featured_post:hover),
  body.single-post .et_pb_section:has(#featured_post:hover) {
    z-index: 50;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.single-post #featured_post:hover { transform: none; }
}

/* Índice flutuante: canto inferior esquerdo (o direito é do botão do WhatsApp). */
.gm-toc__toggle {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 99;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 999px;
  padding: 12px 16px;
  background: #fff;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  font-family: inherit;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.gm-toc__toggle:hover,
.gm-toc__toggle[aria-expanded="true"] { transform: translateY(-1px); border-color: var(--gm-accent); color: var(--gm-accent); }
.gm-toc__panel {
  position: fixed;
  left: 24px;
  bottom: 84px;
  z-index: 99;
  width: min(340px, calc(100vw - 48px));
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .15);
  font-family: inherit;
}
.gm-toc__panel[hidden] { display: none; }
.gm-toc__eyebrow {
  margin: 0 0 10px;
  padding: 0;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gm-accent);
  font-weight: 600;
}
.gm-toc__list { list-style: none; margin: 0; padding: 0; }
.gm-toc__list li { margin: 0; padding: 0; }
.gm-toc__link {
  display: flex;
  gap: 8px;
  padding: 6px 0 6px 12px;
  border-left: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #555;
  text-decoration: none !important;
  transition: color .15s ease, border-color .15s ease;
}
.gm-toc__num {
  flex-shrink: 0;
  min-width: 1.6em;
  color: var(--gm-accent);
  font-variant-numeric: tabular-nums;
}
.gm-toc__link--sub { padding-left: 24px; font-size: 13px; font-weight: 400; }
.gm-toc__link--sub .gm-toc__num { min-width: 2.2em; color: #178d5d; }
.gm-toc__link:hover,
.gm-toc__link.is-active { color: #222; border-left-color: var(--gm-accent); }
.et_pb_post_content h2[id],
.et_pb_post_content h3[id] { scroll-margin-top: 110px; }

@media (max-width: 767px) {
  body.single-post { --gm-listen-h: 88px; }
  .gm-listen__hint { display: none; }
  /* Botões numa linha só, para a altura reservada valer (o seletor "1x" dispensa o rótulo). */
  .gm-listen__row { flex-wrap: nowrap; gap: 8px; }
  .gm-listen__rate > span { display: none; }
  .gm-toc__toggle { left: 16px; bottom: 16px; padding: 12px; }
  .gm-toc__toggle span { display: none; }
  .gm-toc__panel { left: 16px; bottom: 72px; width: calc(100vw - 32px); }
}

@media print {
  .gm-artigo-topo,
  .gm-toc { display: none !important; }
}