/* ==========================================================================
   FRESH DENTAL SOLUTIONS — KNOWLEDGE BASE SURFACE
   ==========================================================================
   Chrome for kb/index.html (browse + search) and the kb/<slug>.html article
   shells. Reading surfaces stay stable — no morphic emphasis states here.
   Article body copy is the shared `.prose` component (components.css);
   this file only adds the KB-specific frame around it.

   Depends on: tokens.css, base.css, components.css. Load this file fourth
   on kb/ pages (in place of morphic.css, which those pages don't use).
   ========================================================================== */

/* ==========================================================================
   Index hero band
   ==========================================================================
   <header class="kb-hero">
     <div class="container-narrow">
       <p class="eyebrow">Knowledge base</p>
       <h1>Straight answers, plainly cited</h1>
       <p class="kb-mission">Everything we publish links back to its source.</p>
       <div class="kb-search-wrap">
         <label class="visually-hidden" for="kb-search">Search the knowledge base</label>
         <input class="input kb-search" id="kb-search" type="search" placeholder="Search articles…" />
       </div>
     </div>
   </header> */

.kb-hero {
  /* Sits outside <main> (a top-level sibling of the fixed nav in the
     document), so — like `main` in base.css — it has to clear --nav-h
     itself; nothing upstream does it for this element. */
  padding-block: calc(var(--nav-h) + var(--s-16)) var(--s-12);
  text-align: center;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}

.kb-hero .eyebrow { justify-content: center; }

.kb-hero h1 { margin-bottom: var(--s-3); }

.kb-mission {
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--s-8);
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

.kb-search-wrap { max-width: 32rem; margin-inline: auto; }
.kb-search { border-radius: var(--r-full); text-align: left; }

/* ==========================================================================
   Browse sections
   ==========================================================================
   <main class="kb-main">
     <div class="container">
       <section class="kb-category" id="prevention">
         <h2>Prevention</h2>
         <p class="kb-category-blurb">Habits that keep problems from starting.</p>
         <div class="grid grid-3" aria-live="polite">
           <article class="card card-kb">…</article>
         </div>
       </section>
       <p class="kb-empty" hidden>No articles match your search.</p>
     </div>
   </main> */

/* padding-block's top value replaces (not adds to) base.css's bare `main`
   nav-clearance rule, so it has to restate --nav-h itself, plus its own
   breathing room below that. */
.kb-main { padding-block: calc(var(--nav-h) + var(--s-12)) var(--s-16); }

.kb-category { margin-bottom: var(--s-16); }
.kb-category:last-child { margin-bottom: 0; }

.kb-category h2 { margin-bottom: var(--s-1); }
.kb-category-blurb { color: var(--text-faint); margin-bottom: var(--s-6); }

.kb-empty { text-align: center; color: var(--text-faint); padding: var(--s-16) var(--s-4); }

/* ==========================================================================
   Article page
   ==========================================================================
   <main id="main">
     <div class="container-narrow">
       <nav class="breadcrumb kb-breadcrumb" aria-label="Breadcrumb">…</nav>
       <article class="kb-article">
         <p class="kb-chip kb-chip-cat">Prevention</p>
         <h1>Article title</h1>
         <div class="kb-article-meta">
           <span class="badge badge-neutral">6 min read</span>
           <span class="badge badge-neutral">Reviewed Aug 2026</span>
         </div>
         <div class="prose">
           … rendered markdown body, ending in ## Sources and the review
           + education-not-diagnosis footer …
         </div>
       </article>
       <section class="kb-article-cta">
         <div>
           <h3>Have questions about this?</h3>
           <p>Our team is happy to walk through it at your next visit.</p>
         </div>
         <div class="kb-cta-buttons">
           <a class="btn btn-primary" href="/contact.html">Book a visit</a>
           <a class="btn btn-secondary" href="tel:+15035551234">Call the office</a>
         </div>
       </section>
       <section class="kb-related">
         <h2>Related reading</h2>
         <div class="grid grid-3">…</div>
       </section>
     </div>
   </main> */

.kb-breadcrumb { margin-block: var(--s-8) var(--s-4); }

.kb-article { padding-bottom: var(--s-8); }
.kb-article h1 { margin-block: var(--s-3) var(--s-4); }

.kb-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-8);
}

.kb-chip {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--s-2);
}
.kb-chip-cat { color: var(--accent-text); }

/* --- Booking CTA band ------------------------------------------------- */
.kb-article-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  align-items: center;
  justify-content: space-between;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  margin-top: var(--s-12);
}
.kb-article-cta h3 { margin-bottom: var(--s-1); }
.kb-article-cta p { margin-bottom: 0; }

.kb-cta-buttons { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* --- Related reading ---------------------------------------------------- */
.kb-related { margin-top: var(--s-16); }
.kb-related h2 { margin-bottom: var(--s-6); }

@media (max-width: 48rem) {
  .kb-article-cta { padding: var(--s-6); }
}