/*
Theme Name: Cannect Blog
Theme URI: https://cannect.life
Author: Cannect
Author URI: https://cannect.life
Description: Tema WordPress mobile-first para o Cannect Blog, alinhado ao roadmap AEO/GEO e à arquitetura de 17 categorias (15 pilares clínicos + Cannect Notícias + Central do Paciente). Inclui páginas de Home, Categoria/Pilar e Artigo (Leitura e Conversão) com sistema de design próprio.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cannect-blog
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root{
  --c-primary: #748351;   /* Cannect sage green - Header/Footer BG, brand */
  --c-accent:  #464f31;   /* Cannect dark olive - Active elements, buttons */
  --c-secondary: #ffffff; /* Cannect white - secondary surface */
  --c-secondary-tint: #eaece5; /* light tint of primary, used for inactive pills/tags */
  --c-mint:    #f1f3ee;   /* light tint of primary - AEO highlights, callouts */
  --c-text-dark: #111111; /* Headings */
  --c-text-body: #333333; /* Article copy */
  --c-text-meta: #666666; /* Metadata / dates / CRM */
  --c-border-soft: #e3e6dc;
  --c-border-mid: #dce0d4;
  --radius-lg: 12px;
}

/* ==========================================================================
   BASE
   ========================================================================== */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  color: var(--c-text-body);
  background:#ffffff;
  font-family: "Inter","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ color: var(--c-text-dark); font-weight:700; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

/* Hide scrollbar but keep native scroll (category slider) */
.scrollbar-none::-webkit-scrollbar{ display:none; }
.scrollbar-none{ -ms-overflow-style:none; scrollbar-width:none; }

/* ==========================================================================
   BRAND WORDMARK — matches the typography of the official "CANNECT" logo
   (geometric, bold, uppercase, tracked out), rendered in white per request.
   ========================================================================== */
.cannect-brand{
  display:inline-flex;
  align-items:baseline;
  gap:0.3em;
  white-space:nowrap;
}
.cannect-brand-modifier{
  font-family:"Poppins", sans-serif;
  font-weight:400;
  font-size:0.85em;
}
.cannect-brand-mark{
  font-family:"Poppins", sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.03em;
}

/* ==========================================================================
   ARTICLE BODY (18px / 1.6 line-height rule, short paragraphs)
   ========================================================================== */
.cannect-article-body{
  font-size:18px;
  line-height:1.6;
  color: var(--c-text-body);
}
.cannect-article-body p{ margin:0 0 1.1em; }
.cannect-article-body h2{
  font-size:22px; margin:1.6em 0 .6em; scroll-margin-top:96px; color:var(--c-text-dark);
}
.cannect-article-body h3{
  font-size:19px; margin:1.4em 0 .5em; scroll-margin-top:96px; color:var(--c-text-dark);
}
.cannect-article-body ul{
  list-style-type: disc;
  margin: 0 0 1.1em 1.3em;
  padding: 0;
}
.cannect-article-body ol{
  list-style-type: decimal;
  margin: 0 0 1.1em 1.3em;
  padding: 0;
}
.cannect-article-body li{
  margin: 0 0 .4em;
  padding-left: .25em;
}
.cannect-article-body li::marker{
  color: var(--c-accent);
}
.cannect-article-body ul ul,
.cannect-article-body ol ol,
.cannect-article-body ul ol,
.cannect-article-body ol ul{
  margin-top: .4em;
  margin-bottom: 0;
}

/* Hero / feature image fixed 1.91:1 ratio */
.cannect-hero-ratio{
  aspect-ratio: 1200 / 630;
  width:100%;
  object-fit:cover;
  border-radius: var(--radius-lg);
  background: var(--c-secondary-tint);
}

/* Secondary list card thumb — sizing now comes from responsive Tailwind
   utility classes at each usage (w-20 h-20 on mobile, larger/full-width on
   desktop), this class only sets the shared visual treatment. */
.cannect-thumb{
  object-fit:cover;
  background: var(--c-secondary-tint);
}

/* ==========================================================================
   CATEGORY PILL SLIDER
   ========================================================================== */
.cannect-pill{
  flex:0 0 auto;
  padding:8px 16px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  background: var(--c-secondary-tint);
  color: var(--c-primary);
  transition: background .15s ease, color .15s ease;
}
.cannect-pill.is-active{
  background: var(--c-accent);
  color:#fff;
}
/* Force a visible "cut off" pill at the end on small viewports to hint swipe */
.cannect-pill-slider{ scroll-snap-type:x proximity; }
.cannect-pill-slider .cannect-pill{ scroll-snap-align:start; }

/* ==========================================================================
   CATEGORY TAG — shared badge for "which pillar is this post about",
   used on hero cards, feed cards, and anywhere else a category needs to be
   flagged next to a title/image. Two variants share the same shape/type
   scale so they read as the same component at a glance.
   ========================================================================== */
.cannect-tag{
  display:inline-flex;
  align-items:center;
  background: var(--c-mint);
  color: var(--c-accent);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1;
  padding:5px 10px;
  border-radius:999px;
}
/* Sits directly on top of a photo — needs a solid, high-contrast surface
   instead of the light mint tint. */
.cannect-tag-on-image{
  background: var(--c-primary);
  color:#fff;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1;
  padding:6px 12px;
  border-radius:999px;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}

/* ==========================================================================
   TL;DR / AEO CALLOUT
   ========================================================================== */
.cannect-tldr{
  background: var(--c-mint);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  border-left: 4px solid var(--c-accent);
  padding:16px 18px;
}

/* Trust / E-E-A-T box */
.cannect-trust-box{
  background: var(--c-mint);
  border:1px solid var(--c-border-soft);
  border-radius: var(--radius-lg);
  padding:14px 16px;
}

/* Pillar SEO box */
.cannect-pillar-box{
  background:#ffffff;
  border:1px solid var(--c-border-soft);
  border-radius: var(--radius-lg);
  padding:16px;
}

/* CRO cards */
.cannect-cro-card{
  border:1px solid var(--c-border-mid);
  border-radius: var(--radius-lg);
  background:#fff;
}
.cannect-btn-primary{
  background: var(--c-accent);
  color:#fff;
  font-weight:600;
  border-radius:10px;
  padding:12px 18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: filter .15s ease;
}
.cannect-btn-primary:hover{ filter:brightness(1.08); }

/* Sticky bottom bars */
.cannect-sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background: var(--c-primary);
  color:#fff;
}
.cannect-sticky-bar[hidden]{ display:none; }

/* FAQ accordion */
.cannect-faq-item{ border-bottom:1px solid var(--c-border-soft); }
.cannect-faq-question{
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between;
  padding:16px 4px; font-weight:600; color:var(--c-text-dark); background:transparent; border:0;
}
.cannect-faq-answer{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
  font-size:18px; line-height:1.6; color:var(--c-text-body);
}
.cannect-faq-item.is-open .cannect-faq-answer{ max-height:600px; padding-bottom:16px; }
.cannect-faq-item.is-open .cannect-faq-chevron{ transform:rotate(180deg); }
.cannect-faq-chevron{ transition:transform .2s ease; flex:0 0 auto; }

/* TOC index box */
.cannect-toc{
  background:#fff;
  border:1px solid var(--c-border-soft);
  border-left:4px solid var(--c-accent);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  padding:16px 18px;
}
.cannect-toc ul{ display:flex; flex-direction:column; gap:2px; }
.cannect-toc-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 8px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  color: var(--c-text-body);
  transition: background .15s ease, color .15s ease;
}
.cannect-toc-link:hover{
  background: var(--c-mint);
  color: var(--c-accent);
}
.cannect-toc-item.is-sub .cannect-toc-link{
  margin-left:22px;
  font-weight:500;
  font-size:13px;
  color: var(--c-text-meta);
}
.cannect-toc-badge{
  flex:0 0 auto;
  width:20px; height:20px;
  border-radius:999px;
  background: var(--c-accent);
  color:#fff;
  font-size:11px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cannect-toc-dot{
  flex:0 0 auto;
  width:5px; height:5px;
  border-radius:999px;
  background: var(--c-border-mid);
}

/* Phone-frame preview wrapper (used only on the Customizer/theme preview template) */
.cannect-phone-frame{
  width:390px; max-width:100%; margin:0 auto;
  border:10px solid #111; border-radius:40px; overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.25);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}