/* ==========================================================================
   Junta Já — GreenCream reskin for the blog, legal and secondary pages.

   Loaded LAST, after modern-styles.css / blog-styles.css, so it wins on
   specificity ties. It works by (a) redefining the design tokens those
   sheets already consume and (b) restyling the handful of components they
   define. No page markup changes — every page keeps its existing classes.

   Tokens are the same ones the landing page uses inline
   (JuntaJa_GreenCream_brand.json).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Figtree:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* brand */
  --primary:#0F7360;            /* marinho */
  --primary-hover:#0A5646;
  --primary-light:#E4F4EF;
  --primary-dark:#0A5646;
  --signal:#2FD1A8;             /* the scarce accent — o "já" */
  --signal-soft:#7FE6C9;

  /* surfaces */
  --ground:#F2ECE0;             /* pergaminho */
  --ground-2:#EBE3D3;
  --bg-primary:#FFFDF8;         /* cards */
  --bg-secondary:#F2ECE0;
  --bg-tertiary:#EBE3D3;
  --deep:#0C2C26;
  --deep-2:#081F1B;

  /* text */
  --text-primary:#17201B;       /* tinta */
  --text-secondary:#55605A;
  --text-light:#85908A;

  /* lines */
  --border:rgba(23,32,27,.14);
  --border-light:rgba(23,32,27,.08);

  --success:#0F7360;

  /* softer, rounder, less "SaaS template" */
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:22px;
  --radius-2xl:26px;

  --shadow-sm:0 1px 2px 0 rgba(23,32,27,.05);
  --shadow-md:0 8px 20px -12px rgba(23,32,27,.35);
  --shadow-lg:0 16px 40px -24px rgba(23,32,27,.42);
  --shadow-xl:0 24px 60px -30px rgba(23,32,27,.45);
}

/* ---------- typography ---------- */
body{
  background:var(--ground);
  color:var(--text-primary);
  font-family:'Figtree',system-ui,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,
.section-title,.blog-card-title,.card-title,.pricing-name{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:600;letter-spacing:-.02em;line-height:1.12;color:var(--text-primary);
}
h1{letter-spacing:-.03em}
a{color:var(--primary-dark)}
.post-meta,.badge,.pricing-badge,.step-number,.blog-card-link,.footer-section-title{
  font-family:'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;font-size:11.5px;
}

/* ---------- header / nav ---------- */
header{
  background:rgba(242,236,224,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-light);
  box-shadow:none;
}
.navbar{height:64px}
.logo{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;
  font-size:19px;letter-spacing:-.01em;color:var(--text-primary);gap:11px;
}
.nav-link{
  font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-secondary);
}
.nav-link:hover{color:var(--primary-dark)}

/* ---------- buttons ---------- */
.btn{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:15.5px;
  border-radius:100px;padding:13px 24px;border:none;transition:transform .2s,box-shadow .2s,background .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);box-shadow:0 14px 30px -14px rgba(15,115,96,.7)}
.btn-secondary{background:transparent;border:1.5px solid var(--border);color:var(--text-primary)}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary-dark)}

/* ---------- blog index cards ---------- */
.blog-grid{gap:22px}
.blog-card{
  background:var(--bg-primary);
  border:1px solid var(--border-light);
  border-radius:var(--radius-xl);
  box-shadow:none;overflow:hidden;
  transition:transform .25s,box-shadow .25s;
}
.blog-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-xl)}
/* the two pinned cards carry inline borders/shadows in the markup — tame them */
.blog-card[style]{box-shadow:none !important;border-color:var(--primary) !important}
.blog-card-image{background:var(--ground-2) !important}
.blog-card-content{padding:22px}
.blog-card-title{font-size:17px;line-height:1.3;margin-bottom:10px}
.blog-card-title a{color:var(--text-primary);text-decoration:none}
.blog-card-title a:hover{color:var(--primary-dark)}
.blog-card-excerpt{color:var(--text-secondary);font-size:15px}
.blog-card-link{color:var(--primary-dark);text-decoration:none}
.blog-card-link:hover{color:var(--primary)}

/* ---------- post page ---------- */
.post-full-content{
  background:var(--bg-primary);
  border:1px solid var(--border-light);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);
}
.post-body-content{color:var(--text-primary);font-size:17.5px;line-height:1.75}
.post-body-content h2{font-size:clamp(26px,3.4vw,34px);margin-top:1.9em}
.post-body-content h3{font-size:21px;margin-top:1.5em}
.post-body-content a{color:var(--primary-dark);text-decoration:underline;text-underline-offset:3px}
.post-body-content blockquote{
  border-left:3px solid var(--signal);
  background:var(--ground-2);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  color:var(--text-primary);font-style:normal;
}
.post-body-content code{
  font-family:'DM Mono',monospace;background:var(--ground-2);
  border-radius:6px;padding:2px 6px;font-size:.9em;
}
.post-body-content img{border-radius:var(--radius-lg)}
.post-body-content table{border-radius:var(--radius-md);overflow:hidden}
.post-body-content th{background:var(--deep);color:var(--ground);font-family:'Bricolage Grotesque',sans-serif}
.post-body-content td{border-color:var(--border-light)}
.post-meta{color:var(--text-light)}

/* ---------- post CTA ---------- */
.post-cta{
  background:radial-gradient(120% 140% at 78% 12%, #12463C 0%, var(--deep) 48%, var(--deep-2) 100%);
  border:none;border-radius:var(--radius-xl);color:var(--ground);
}
.post-cta h2,.post-cta h3{color:var(--ground)}
.post-cta p{color:rgba(242,236,224,.8)}
.post-cta .btn-primary{background:var(--signal);color:var(--deep)}
.post-cta .btn-primary:hover{background:var(--signal-soft);box-shadow:0 14px 30px -14px rgba(47,209,168,.8)}

/* ---------- share buttons ---------- */
.share-button{border-radius:100px;font-family:'Figtree',sans-serif;font-weight:600}
.share-whatsapp{background:var(--primary)}
.share-facebook,.share-twitter,.share-linkedin{background:var(--deep)}
.share-button:hover{transform:translateY(-2px)}

/* ---------- generic cards / sections used by legal + secondary pages ---------- */
.card,.faq-item,.pricing-card,.testimonial-card{
  background:var(--bg-primary);
  border:1px solid var(--border-light);
  border-radius:var(--radius-xl);
  box-shadow:none;
}
.card:hover,.faq-item:hover{box-shadow:var(--shadow-md)}
.section-title{font-size:clamp(30px,4.4vw,46px)}
.section-subtitle{color:var(--text-secondary)}

/* ---------- footer ---------- */
footer{
  background:var(--deep-2);
  color:rgba(242,236,224,.7);
  border-top:1px solid rgba(255,255,255,.06);
}
footer h1,footer h2,footer h3,footer h4,footer .footer-section-title{color:var(--ground)}
.footer-link,footer a{color:rgba(242,236,224,.6);text-decoration:none}
.footer-link:hover,footer a:hover{color:var(--signal)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);color:rgba(242,236,224,.4)}
footer .logo{color:var(--ground)}

/* the old logo mark is a green glyph on white — keep it legible on the deep footer */
/* the mark is ink-on-light; on the deep footer swap to the pergaminho variant */
footer .logo img{content:url('../images/juntaja-mark-dark.svg')}