/* ============================================================================
   Sinch Voice Ebook. WIDGETS EPIC (entregavel pro tema WordPress da Sinch)
   ----------------------------------------------------------------------------
   STATUS: este arquivo E parte do entregavel. Adicionar ao tema da Sinch.

   Contem APENAS classes que NAO existem no tema simpletexting-theme-blank.
   Cada classe abaixo e uma feature nova que o time EPIC desenhou para o
   voice ebook (aprovadas pela Sinch no proto de Abril):
     - reading-signal      indicador de progresso de leitura (fixed widget)
     - counter             animacao de numero ao entrar no viewport
     - scroll-reveal       fade-in on scroll
     - compliance-card     cartao FAQ expansivel
     - migration-timeline  lista vertical de passos numerados
     - form-gate           gate inline de captura de email
     - form-states         success/error do gate e do mc-form
     - ai-download-pill    pill flutuante (download de .md companion pra IA)
     - widget-rail         CSS var que reserva corredor pros widgets fixos

   Behaviors em `js/widgets.js`. GA4 tracking em `js/analytics.js`.

   Ordem de carga no preview EPIC:
     theme.css (scaffold) -> components.css (scaffold) -> widgets.css (este) -> ebook.css

   Ordem de carga no WordPress Sinch (apos lift):
     [tema sinch] -> widgets.css (este)
   ============================================================================ */

/* ============================================================================
   1. READING SIGNAL  (.signal-widget)  -- DEBUG ONLY
   Widget de telemetria de leitura. Mostra read-through, tempo na pagina,
   capitulo atual. ESCONDIDO POR DEFAULT. So aparece em modo debug, quando
   `body.debug` esta presente (ativado via URL `?debug` ou `?debug=1`).
   Pra Sinch QA validar tracking sem expor ao usuario final.
   ============================================================================ */
/* Default: escondido. So mostra com body.debug. */
.signal-widget { display: none; }
body.debug .signal-widget {
  --sw-surface: #364047;
  display: block;
  position: fixed;
  right: 1.5rem;
  /* Posicionado acima do .ai-pill (que vive em bottom 1.5rem com ~2.5-3rem
     de altura). 5rem de bottom = espaco entre as duas caixas, signal-widget
     fica visualmente acima do pill. */
  bottom: 5rem;
  z-index: 80;
  width: 260px;
  padding: 1rem 1.125rem;
  border-radius: var(--sinch-border-radius-lg);
  background-color: var(--sinch-body-bg);
  color: var(--sinch-accent);
  box-shadow: var(--sinch-box-shadow);
  font-family: var(--sinch-font-sans-serif);
}
.sw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.sw-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sinch-body-color);
}
.sw-pulse {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--sinch-highlight-text-color);
  box-shadow: 0 0 0 0 rgba(var(--sinch-glow-color), 0.7);
  animation: sw-pulse 2s infinite;
}
@keyframes sw-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--sinch-glow-color), 0.6); }
  70%  { box-shadow: 0 0 0 0.5rem rgba(var(--sinch-glow-color), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--sinch-glow-color), 0); }
}
.sw-collapse {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.375rem;
  background-color: var(--sw-surface);
  color: var(--sinch-accent);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.sw-collapse:hover { background-color: var(--sinch-border-color); }
.sw-body {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.sw-stat { flex: 1; }
.sw-stat-val {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--sinch-highlight-text-color);
  line-height: 1.1;
}
.sw-stat-label {
  font-size: 0.6875rem;
  color: var(--sinch-body-color);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sw-current {
  font-size: 0.8125rem;
  color: var(--sinch-body-color);
  padding-top: 0.75rem;
  border-top: 1px solid var(--sw-surface);
}
.sw-current strong { color: var(--sinch-accent); }
.signal-widget.collapsed .sw-body,
.signal-widget.collapsed .sw-current { display: none; }

/* Viewport <576px em debug mode: largura adaptada ao mobile, ainda acima da pill. */
@media (max-width: 575.98px) {
  body.debug .signal-widget { right: 0.75rem; bottom: 4.5rem; width: calc(100vw - 1.5rem); }
}

/* Sem widget rail: a ai-pill flutua no canto como icon-only (40x40), o
   signal-widget e debug-only. Conteudo ocupa toda a largura natural do
   container Sinch (max-width 1280, padding-inline 1.5rem). Pequeno
   padding-bottom no body so pra evitar que a pill cubra o ultimo conteudo
   antes do footer. */
body:has(.ai-pill) { padding-bottom: 4rem; }
@media (min-width: 992px) { body:has(.ai-pill) { padding-bottom: 1rem; } }

/* ============================================================================
   2. COUNTER  (.counter[data-target])
   O numero anima de 0 ate data-target quando entra no viewport. O markup vem
   do componente hub-data; aqui so o estado. data-prefix e data-suffix opcionais.
   ============================================================================ */
.counter { font-variant-numeric: tabular-nums; }
.counter[data-target]:not([data-animated]) {
  /* estado inicial enquanto o JS nao rodou: mantem o valor final no HTML
     como fallback progressive-enhancement */
}

/* ============================================================================
   3. SCROLL REVEAL  ([data-reveal])
   Elemento entra com fade + leve subida quando o JS adiciona .is-revealed.
   data-reveal-delay (ms) escalona itens de uma mesma secao.
   ============================================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   4. COMPLIANCE CARD  (.comp-card)
   Cartao expansivel. Cabecalho sempre visivel (chip + titulo + caret); corpo
   abre no clique (.open). Usado nos 4 cards de compliance (RAY BAUM, Kari's
   Law, STIR/SHAKEN, E911).
   ============================================================================ */
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: start; /* expanding one card must not stretch its row sibling (client note 05 Jun 2026: "Kari's Law box also dropped down, just without any text") */
}
@media (max-width: 767.98px) { .compliance-grid { grid-template-columns: 1fr; } }

.comp-card {
  border: 1px solid var(--sinch-border-color);
  border-radius: var(--sinch-border-radius-lg);
  background-color: var(--sinch-light);
  overflow: hidden;
}
/* Dark theme: `--sinch-light` resolve para #000 e a section atras (bg-light-subtle)
   resolve para #14181C, diferenca de ~6% de luminancia, cards quase desaparecem.
   Override pra criar contraste de superficie. */
[data-theme="dark"] .comp-card {
  background-color: #14181C;
  border-color: #4B575E;
}
[data-theme="dark"] .compliance-grid [data-theme="dark"] .comp-card,
.bg-light-subtle [data-theme="dark"] .comp-card {
  background-color: #1F262C;
}
.comp-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.comp-card-chip {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem;
  border-radius: 50rem;
  color: #000;
  background-color: #FFE97A;
}
.comp-card-title {
  margin-top: 0.625rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sinch-accent);
}
.comp-card-caret {
  flex-shrink: 0;
  font-size: 1.25rem;
  color: var(--sinch-body-color);
  transition: transform 0.25s ease;
}
.comp-card.open .comp-card-caret { transform: rotate(180deg); }
.comp-card-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.comp-card.open .comp-card-body { grid-template-rows: 1fr; }
.comp-card-body-inner {
  overflow: hidden;
  padding: 0 1.25rem;
}
.comp-card.open .comp-card-body-inner { padding-bottom: 1.25rem; }
.comp-card-body-inner p { color: var(--sinch-body-color); }
.comp-card-answer {
  margin-top: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--sinch-border-radius-sm);
  background-color: var(--sinch-body-bg);
  border-left: 3px solid var(--sinch-secondary);
  color: var(--sinch-body-color);
  font-size: 0.9375rem;
}
.comp-card-answer strong { color: var(--sinch-accent); }

/* Chapter 04 "questions to ask" reuse the comp-card accordion as a single-column
   stack (no chip, so reset the title's chip-offset margin). */
.question-stack { display: flex; flex-direction: column; gap: 1rem; }
.question-stack .comp-card-title { margin-top: 0; }

/* ============================================================================
   5. MIGRATION TIMELINE  (.timeline / .timeline-step)
   Lista vertical numerada. Cada passo aparece (scroll-reveal) com .visible.
   O numero vem de data-num.
   ============================================================================ */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background-color: var(--sinch-border-color);
}
.timeline-step {
  position: relative;
  padding: 0 0 2rem 4rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.timeline-step.visible { opacity: 1; transform: none; }
.timeline-step:last-child { padding-bottom: 0; }
/* Sem animacao (preferencia do usuario ou JS ausente): os passos aparecem
   de imediato. Sem isto, o capitulo 5 ficaria invisivel. */
@media (prefers-reduced-motion: reduce) {
  .timeline-step { opacity: 1; transform: none; transition: none; }
}
.timeline-step::before {
  content: attr(data-num);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--sinch-secondary);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}
.timeline-step h3 {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.25rem;
  color: var(--sinch-accent);
}
.timeline-step p { margin: 0; color: var(--sinch-body-color); }

/* ============================================================================
   6. FORM GATE  (.gate)
   Gate inline de captura. Antes do unlock, o conteudo bloqueado fica em
   display:none (regra do proto: gate honesto, nao blur). O JS adiciona
   .unlocked no <body> e revela.
   ============================================================================ */
.gate {
  max-width: 540px;
  margin-inline: auto;
  padding: 2.5rem;
  text-align: center;
  border-radius: var(--sinch-border-radius-lg);
  background-color: var(--sinch-light);
  box-shadow: var(--sinch-box-shadow-lg);
}
.gate-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sinch-secondary);
  margin: 0 0 0.5rem;
}
.gate-title { font-size: 1.5rem; margin: 0 0 0.75rem; }
.gate-sub { color: var(--sinch-body-color); margin: 0 0 1.5rem; }
.gate-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.gate-input {
  flex: 1 1 240px;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--sinch-body-color);
  background-color: var(--sinch-input-bg);
  border: 1px solid var(--sinch-border-color);
  border-radius: var(--sinch-border-radius-sm);
}
.gate-input:focus-visible {
  outline: var(--sinch-focus-ring-width) solid var(--sinch-focus-ring-color);
  outline-offset: var(--sinch-focus-ring-offset);
}
.gate-micro {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  color: var(--sinch-muted);
}
/* Conteudo bloqueado: invisivel ate o unlock (display:none, nao blur) */
.locked-content { display: none; }
body.unlocked .locked-content { display: block; }
body.unlocked .gate { display: none; }

/* Estados de input do gate: erro = borda red + msg, success = borda glow yellow. */
.gate-input[aria-invalid="true"] {
  border-color: var(--sinch-error);
  outline-color: var(--sinch-error);
}
.gate-field { flex: 1 1 240px; text-align: left; }
.gate-field .gate-input { width: 100%; }
.gate-error {
  display: none;
  margin: 0.375rem 0 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sinch-error);
}
.gate-field[data-error="true"] .gate-error { display: block; }
/* Sucesso transitorio antes do unlock: borda yellow brand pulsa por ~600ms.
   Uso glow-color (yellow em ambos os temas), nao highlight-text-color (que e
   blue no light), porque confirmacao = momento de marca, nao acao. */
.gate.is-confirming .gate-input {
  border-color: rgb(var(--sinch-glow-color));
  box-shadow: 0 0 0 4px rgba(var(--sinch-glow-color), 0.28);
}

/* ============================================================================
   FORM BLOCK STATES  (.form-block do hub form)
   Sucesso = card yellow-accent confirmando envio. Erro = borda red + msg.
   O markup base esta em components.css; aqui sao apenas os states.
   ============================================================================ */
.form-block input[aria-invalid="true"] {
  border-color: var(--sinch-error);
}
.form-error {
  display: none;
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  color: var(--sinch-error);
}
.form-field[data-error="true"] .form-error { display: block; }
.form-block.is-submitted .mc-form { display: none; }
.form-success {
  display: none;
  padding: 1.5rem;
  border-radius: var(--sinch-border-radius);
  background-color: rgba(var(--sinch-glow-color), 0.12);
  border: 1px solid rgba(var(--sinch-glow-color), 0.4);
  text-align: center;
}
.form-block.is-submitted .form-success { display: block; }
.form-success__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Yellow brand em ambos os temas: sucesso e o "AI-era moment", merece o glow */
  background-color: rgb(var(--sinch-glow-color));
  color: #000;
  font-size: 1.25rem;
  font-weight: 700;
  box-shadow: 0 0 0 6px rgba(var(--sinch-glow-color), 0.22);
}
.form-success__title { margin: 0 0 0.5rem; font-size: 1.125rem; color: var(--sinch-accent); }
.form-success__body  { margin: 0; color: var(--sinch-body-color); font-size: 0.9375rem; }
@media (prefers-reduced-motion: no-preference) {
  .form-block.is-submitted .form-success {
    animation: fb-success-in 0.32s ease-out both;
  }
  @keyframes fb-success-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ============================================================================
   7. AI DOWNLOAD PILL  (.ai-pill)
   Pill flutuante, canto inferior esquerdo (lado oposto ao reading-signal).
   Baixa o .md companion do ebook. Tooltip explica o uso pratico.
   ============================================================================ */
.ai-pill {
  position: fixed;
  /* Flutua no canto inferior direito como botao pequeno (icon-only em
     desktop). Tooltip emerge pra esquerda no hover. */
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border-radius: 50rem;
  border: none;
  background-color: #FFE97A;
  color: #000;
  font-family: var(--sinch-font-sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sinch-box-shadow);
  cursor: pointer;
}
.ai-pill::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: #000;
  -webkit-mask: var(--ico-download) no-repeat 50% 50%;
  mask: var(--ico-download) no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.ai-pill__tip {
  position: absolute;
  /* Tooltip emerge para a esquerda da pill (rail fica a direita).
     Right: 0 alinha o final do tooltip com o final da pill, e a largura
     se expande pra esquerda dentro da area de conteudo. */
  bottom: 50%;
  right: calc(100% + 0.75rem);
  transform: translateY(50%);
  width: 240px;
  padding: 0.75rem 0.875rem;
  border-radius: var(--sinch-border-radius-sm);
  background-color: #1A2126;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.ai-pill__tip strong { color: #FFE97A; }
.ai-pill:hover .ai-pill__tip,
.ai-pill:focus-visible .ai-pill__tip { opacity: 1; visibility: visible; }

/* AI pill com texto visivel: "Add to your favorite LLM" eh o CTA.
   Tooltip ainda emerge no hover/focus pra explicar o uso pratico. */
@media (min-width: 576px) {
  .ai-pill__tip { font-size: 0.75rem; width: 220px; }
}

:root {
  --ico-download: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 3v12m0 0l-4-4m4 4l4-4M5 21h14' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

/* ============================================================================
   COMPLIANCE CARD source link, citation discreta
   Pequeno link "Read on fcc.gov" no body do card, sob o "Why it matters".
   ============================================================================ */
.comp-card-source {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;     /* 13px, sub-body */
  line-height: 1.4;
}
.comp-card-source a {
  color: var(--sinch-link-color);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  letter-spacing: 0.01em;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.comp-card-source a:hover {
  color: var(--sinch-link-hover-color);
  border-bottom-color: var(--sinch-link-hover-color);
}