/* TaskWork VNext content styling (LIGHT theme — Onda Clara 2026-07-10/11: flip
   from dark/navy to warm cream/white, matching production. Decisão do dono do
   site; ver .omc/... Onda Clara. Scoped to the content area; header/footer/nav
   untouched EXCEPT the two documented dark exceptions below (site footer +
   mobile CTA bar, both live in taskwork-vnext-components.css and stay dark on
   purpose). PT-only (enqueue skips /es,/en).
   Source tokens: TaskWork_Vibecode/site/assets/css/main.css */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --tw-wine:#73003E; --tw-magenta:#D90B59; --tw-coral:#FF5B61; --tw-coral-lt:#FF8A8E;
  --tw-violet:#9D92FF;--tw-wine-ink:#C2273F;--tw-violet-ink:#6E61E8;--tw-teal-ink:#2C948A; --tw-bg:#FFFAF6; --tw-text:#4A4550; --tw-text-strong:#221318; --tw-text-muted:#7A737C;
  --tw-line:rgba(34,19,24,.10); --tw-raised:#FFFFFF;
  --tw-font-display:Montserrat,"Inter",system-ui,sans-serif; --tw-font-body:Inter,system-ui,sans-serif;

  /* P2-05 (2026-07-11): escala de spacing tokens — PRD TaskWork Visual 10/10 §11.
     Fonte: inventário completo de padding/margin/gap em taskwork-vnext-style.css
     + taskwork-vnext-components.css (223 declarações, 312 valores numéricos).
     Escala ajustada a partir da proposta literal do PRD (4/8/16/24/32/48/64/96):
     inclui --tw-space-3 (12px, 17x) e --tw-space-5 (20px, 16x), que juntos somam
     mais ocorrências reais que 24px sozinho e estavam ausentes da lista literal.
     Aplicação é CONSERVADORA por construção: só troca valores que já eram EXATAMENTE
     iguais ao token (0 delta), nunca arredonda. Ficam de fora desta escala, de propósito:
       - os 10 valores do padrão "4n+2" (6,10,14,18,22,26,30,34,46,62px — 91 ocorrências,
         29% do total) — arredondar qualquer um deles seria mudança visual, não é
         permitido nesta rodada; ver spacing-inventario.md §2 para o achado completo.
       - o offset calc(69px + env(safe-area-inset-bottom) + 16px) da mobile CTA bar —
         não é um valor de spacing de design, é compensação de layout medida ao vivo.
       - o drift .section (padding-block:96px) vs .section-alt (padding-block:88px) —
         mesmo 96px batendo exato na escala, as 3 declarações da família ficam
         intocadas nesta rodada; unificação é decisão de design pós-launch, não
         normalização automática (ver spacing-inventario.md §5, item 3).
       - as 9 declarações de spacing com !important — convivem com conflito de
         especificidade não resolvido; migrar para token exige revisão à parte.
     Ver spacing-inventario.md (P2-05) para o inventário e mapa de substituição completos. */
  --tw-space-0:0; --tw-space-1:4px; --tw-space-2:8px; --tw-space-3:12px; --tw-space-4:16px;
  --tw-space-5:20px; --tw-space-6:24px; --tw-space-7:32px; --tw-space-8:48px; --tw-space-9:64px;
  --tw-space-10:96px;
}

/* ---- Onda Clara T1: fundo navy vinha da opção Astra `astra-settings` →
   `global-color-palette[4]` (#1E293B, slot "Background Color"), aplicada
   via CSS nativo do tema em `body,.ast-separate-container{background-color:
   var(--ast-global-color-4)}` (e em .ast-article-inner p/ layouts boxed).
   NÃO mexemos na option (fora do escopo/risco); override aqui por cima do
   tema, no mesmo peso de especificidade do seletor original do Astra —
   footer/CTA mobile ficam de fora pois já definem seu próprio bg escuro
   com maior especificidade/!important em components.css. */
body,.ast-separate-container,.ast-separate-container .ast-article-inner{
  background-color:var(--tw-bg); background-image:none;
}

/* ---- layout: remove sidebar, center content full-width ---- */
#secondary,.widget-area,.ast-separate-container #secondary{ display:none !important; }
#primary,.ast-separate-container .ast-article-single{ width:100% !important; max-width:100% !important; }
.site-content .ast-container{ max-width:1080px; }
.site-main .entry-content{ padding-top:var(--tw-space-6); }

/* ---- content shell ---- */
.entry-content{ font-family:var(--tw-font-body); color:var(--tw-text); font-size:1.125rem; line-height:1.72; }
.entry-content > *:first-child{ margin-top:var(--tw-space-0); }

/* ---- headings ---- */
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4{
  font-family:var(--tw-font-display); color:var(--tw-text-strong); line-height:1.1; letter-spacing:-.015em; }
/* P2-04 (2026-07-11): text-wrap:balance em h1/h2 sitewide — progressive
   enhancement (browsers sem suporte ignoram a declaração, mantêm o wrap
   normal de sempre). Reduz órfãs/linhas curtas isoladas em headings
   longos que quebram em 2-3 linhas (hero da home, page-hero das rotas
   internas, H2 de seção); zero efeito em h3/h4 (título curto, raramente
   quebra) por decisão do PRD §11/P2-04. Uma única declaração aqui cobre
   TODAS as variantes de h1/h2 do site (hero, page-hero, home, seções),
   pois nenhuma outra regra mais específica define text-wrap. */
.entry-content h1,.entry-content h2{ text-wrap:balance; }
.entry-content h1{ font-size:clamp(2.2rem,4.4vw,3.5rem); margin:.1em 0 .55em; font-weight:800; }
.entry-content h1::after{ content:""; display:block; width:88px; height:5px; border-radius:999px;
  background:linear-gradient(90deg,var(--tw-magenta),var(--tw-coral)); margin-top:26px; }
.entry-content h2{ font-size:clamp(1.55rem,2.7vw,2.3rem); margin:62px 0 22px; font-weight:700; }
.entry-content h2::before{ content:""; display:inline-block; width:26px; height:4px; border-radius:999px;
  background:var(--tw-coral); vertical-align:middle; margin-right:14px; transform:translateY(-6px); }
.entry-content h3{ font-size:1.5rem; margin:40px 0 12px; font-weight:700; color:#C2273F; } /* Onda Clara: era var(--tw-coral-lt) #FF8A8E, ilegível sobre claro; #C2273F = AA texto/branco */

/* ---- body ---- */
.entry-content p{ margin:var(--tw-space-0) var(--tw-space-0) var(--tw-space-5); max-width:72ch; }
.entry-content h1 + p,.entry-content > p:first-of-type{ font-size:1.3rem; color:var(--tw-text-muted); line-height:1.55; }
.entry-content strong{ color:var(--tw-text-strong); font-weight:700; }
.entry-content a{ color:#C2273F; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; } /* Onda Clara: era var(--tw-coral-lt) #FF8A8E */
.entry-content a:hover{ color:var(--tw-magenta); } /* Onda Clara: era #FFC2C4 (quase invisível sobre claro) */

/* ---- lists ---- */
.entry-content ul{ list-style:none; margin:var(--tw-space-0) var(--tw-space-0) var(--tw-space-6); padding:var(--tw-space-0); }
.entry-content ul li{ position:relative; padding-left:30px; margin-bottom:var(--tw-space-3); max-width:70ch; }
.entry-content ul li::before{ content:""; position:absolute; left:0; top:.55em; width:11px; height:11px; border-radius:3px;
  background:linear-gradient(135deg,var(--tw-coral),var(--tw-magenta)); }
.entry-content ol{ list-style:none; counter-reset:tw; margin:var(--tw-space-0) var(--tw-space-0) var(--tw-space-6); padding:var(--tw-space-0); }
.entry-content ol li{ counter-increment:tw; position:relative; padding-left:46px; margin-bottom:14px; max-width:70ch; }
.entry-content ol li::before{ content:counter(tw); position:absolute; left:0; top:-2px; width:30px; height:30px; border-radius:999px;
  background:rgba(157,146,255,.18); color:#6E61E8; font-weight:700; font-size:.9rem; display:grid; place-items:center; } /* Onda Clara: numeral era var(--tw-violet) #9D92FF (texto), escurecido p/ AA sobre o chip claro; bg do chip mantido */

/* ---- sections become raised cards when they group content ---- */
.entry-content section:has(> h2),.entry-content section:has(> h3),
.entry-content div:has(> h3):not(:has(div)){
  background:var(--tw-raised); border:1px solid var(--tw-line); border-radius:18px; padding:30px 34px; margin-bottom:var(--tw-space-6); }
.entry-content section:has(> h2) h2:first-child,.entry-content section:has(> h3) h3:first-child{ margin-top:var(--tw-space-0); }

/* ---- tables ---- */
.entry-content table{ width:100%; border-collapse:collapse; margin:var(--tw-space-6) var(--tw-space-0); font-size:1rem; color:var(--tw-text); }
.entry-content th,.entry-content td{ border:1px solid var(--tw-line); padding:var(--tw-space-3) var(--tw-space-4); text-align:left; vertical-align:top; }
.entry-content th{ background:rgba(34,19,24,.06); font-family:var(--tw-font-display); color:var(--tw-text-strong); } /* Onda Clara: era rgba(255,255,255,.06), invisível sobre claro */

/* ---- blockquote ---- */
.entry-content blockquote{ border-left:4px solid var(--tw-magenta); background:rgba(217,11,89,.12);
  margin:var(--tw-space-6) var(--tw-space-0); padding:18px 24px; border-radius:0 12px 12px 0; font-size:1.15rem; color:var(--tw-text-strong); }

@media (max-width:782px){
  .entry-content{ font-size:1.05rem; }
  .entry-content section:has(> h2),.entry-content section:has(> h3){ padding:22px 20px; }
}

/* ============ HOME hero (page 10084) ============ */
.page-id-10084 .site-main .entry-content{ padding-top:var(--tw-space-2); }
.page-id-10084 .entry-content > section:first-of-type{
  padding:40px 0 52px; margin-bottom:52px; border-bottom:1px solid var(--tw-line);
  background:radial-gradient(1100px 380px at 12% -10%, rgba(217,11,89,.10), transparent 60%); } /* Onda Clara: .16->.10, glow magenta mais forte sujava o creme */
/* eyebrow = the span directly before the H1 */
.page-id-10084 .entry-content span:has(+ h1){
  display:inline-block; background:rgba(255,91,97,.16); color:#C2273F;
  font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  padding:var(--tw-space-2) var(--tw-space-4); border-radius:999px; margin-bottom:22px; } /* Onda Clara: texto era var(--tw-coral-lt) */
.page-id-10084 .entry-content h1{ font-size:clamp(2.6rem,5.4vw,4.4rem); line-height:1.04; max-width:16ch; }
.page-id-10084 .entry-content h1::after{ display:none; }
.page-id-10084 .entry-content h1 span{
  background:linear-gradient(90deg,var(--tw-magenta),var(--tw-coral));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.page-id-10084 .entry-content > section:first-of-type p:first-of-type{ font-size:1.35rem; color:var(--tw-text-muted); max-width:60ch; }
/* hero CTAs as buttons */
.page-id-10084 .entry-content > section:first-of-type a{
  display:inline-flex; align-items:center; gap:var(--tw-space-2); padding:14px 28px; border-radius:999px;
  font-weight:700; text-decoration:none; margin:8px 14px 8px 0; transition:transform .15s ease; }
.page-id-10084 .entry-content > section:first-of-type a:hover{ transform:translateY(-2px); }
.page-id-10084 .entry-content > section:first-of-type a:first-of-type{
  background:linear-gradient(135deg,var(--tw-magenta),var(--tw-coral)); color:#fff; box-shadow:0 12px 30px rgba(217,11,89,.35); }
.page-id-10084 .entry-content > section:first-of-type a:not(:first-of-type){
  border:1px solid rgba(34,19,24,.22); color:var(--tw-text-strong); } /* Onda Clara: era rgba(255,255,255,.22), invisível sobre claro */

/* a11y: header current/hover menu link contrast — coral #f0625f on white header was 3.17:1 */
#ast-desktop-header .current-menu-item > .menu-link,
#ast-desktop-header .current-menu-ancestor > .menu-link,
.ast-nav-menu .current-menu-item > .menu-link,
.ast-nav-menu .current-menu-ancestor > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link,
.ast-nav-menu .menu-link:hover,
.main-header-menu .menu-link:hover,
.ast-nav-menu .menu-link:focus{ color:#8C133E !important; }
