/* ==========================================================================
   Blog components for the new site design.

   The ported Next.js export supplies the page chrome, the .richtext article
   styling (including tables and .richtext-scroll) and a large Tailwind utility
   bundle. It does NOT contain a byline, an author card, pagination, or a
   category pill on dark, because the Next site had no blog templates.

   Those are written here rather than as Tailwind utilities, because the bundle
   only ships classes the Next build saw: a new utility combination would have
   no rule behind it. Everything below is prefixed kwd- (or targets markup the
   theme's own helpers emit, like .avatar) so nothing collides with a utility.

   Palette, taken from the shipped bundle:
     ink #15211f   ink-card #1f2f2c   cream #f6f2ea
     acid #7fc6c1  violet #0e7c7b
   ========================================================================== */

:root{
  --kwd-ink:#15211f;
  --kwd-ink-card:#1f2f2c;
  --kwd-cream:#f6f2ea;
  --kwd-acid:#7fc6c1;
  --kwd-violet:#0e7c7b;
}

/* The current section in the header nav. Marked with aria-current in the
   partial instead of an extra utility class, for the reason given above. */
.pointer-events-auto nav a[aria-current="page"],
.pointer-events-auto a[aria-current="page"]{
  background:var(--kwd-acid);
  color:var(--kwd-ink);
}

/* --------------------------------------------------------------------------
   Breadcrumbs. The export has no breadcrumb component, but the theme emits
   BreadcrumbList JSON-LD describing a visible Home / Guides / Title trail, so
   the trail needs to actually be on the page for that markup to be honest.
   -------------------------------------------------------------------------- */
.kwd-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.4rem;margin:0;
  font-size:.8125rem;color:#ffffff73;
}
.kwd-crumbs a{color:#ffffffb3;text-decoration:none}
.kwd-crumbs a:hover{color:var(--kwd-acid)}
.kwd-crumbs span[aria-current]{color:#ffffff73}

/* --------------------------------------------------------------------------
   Byline, in the dark post hero
   -------------------------------------------------------------------------- */
.kwd-byline{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.55rem .85rem;
  font-size:.9375rem;color:#ffffff80;
}
.kwd-byline a{color:#fff;font-weight:600;text-decoration:none}
.kwd-byline a:hover{color:var(--kwd-acid)}
.kwd-byline .kwd-dot{color:#ffffff40}
.kwd-byline-who{display:inline-flex;align-items:center;gap:.6rem}

/* Avatar, as emitted by kwd_avatar_html(). Sized variants match the helper. */
.avatar{
  display:inline-grid;place-items:center;overflow:hidden;flex:0 0 auto;
  width:34px;height:34px;border-radius:9999px;
  background:var(--kwd-ink-card);
  box-shadow:inset 0 0 0 1px #ffffff26;
  font-family:var(--font-display);font-size:.75rem;font-weight:700;
  color:var(--kwd-acid);line-height:1;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.lg{width:60px;height:60px;font-size:1.1rem}
.avatar.xl{width:84px;height:84px;font-size:1.5rem}
/* On the cream article surface the dark chip would fight the background. */
.kwd-authorbox .avatar,
.kwd-onlight .avatar{
  background:#15211f0f;box-shadow:inset 0 0 0 1px #15211f1f;color:var(--kwd-violet);
}

/* --------------------------------------------------------------------------
   FAQ accordion

   The trigger reuses the export's class strings so the closed state looks
   identical to the FAQs on the services page. The open state is expressed as a
   single data-open attribute on the item, set by JS, rather than by swapping the
   four Tailwind state classes the React component used
   (grid-rows-[0fr]/[1fr] and opacity-0/100). Both work; one attribute is less to
   keep in step with the bundle if the Next build is ever regenerated.

   The 0fr -> 1fr row transition is what lets the panel animate to its natural
   height without needing a measured pixel value.
   -------------------------------------------------------------------------- */
.kwd-faq-item + .kwd-faq-item{border-top:1px solid #ffffff1a}
.kwd-faq-item button{cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit}
.kwd-faq-item [role="region"]{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .3s ease-out,opacity .3s ease-out;
}
.kwd-faq-item[data-open] [role="region"]{grid-template-rows:1fr;opacity:1}
.kwd-faq-item [role="region"] > *{overflow:hidden;min-height:0}
.kwd-faq-icon{transition:rotate .3s ease-out}
.kwd-faq-item[data-open] .kwd-faq-icon{rotate:45deg}
@media (prefers-reduced-motion:reduce){
  .kwd-faq-item [role="region"],
  .kwd-faq-icon{transition:none}
}

/* --------------------------------------------------------------------------
   Author card at the foot of an article, on the cream surface
   -------------------------------------------------------------------------- */
.kwd-authorbox{
  display:flex;gap:1.25rem;align-items:flex-start;
  margin-top:3.5rem;padding:1.75rem;
  background:#fff;border-radius:1.5rem;
  box-shadow:inset 0 0 0 1px #15211f14;
}
.kwd-authorbox-eyebrow{
  margin:0;font-size:.6875rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#15211f73;
}
.kwd-authorbox-name{
  margin:.4rem 0 0;font-family:var(--font-display);font-size:1.25rem;font-weight:700;
  color:var(--kwd-ink);letter-spacing:-.02em;
}
.kwd-authorbox-name a{color:inherit;text-decoration:none}
.kwd-authorbox-name a:hover{color:var(--kwd-violet)}
.kwd-authorbox-role{margin:.15rem 0 0;font-size:.875rem;color:#15211f8c}
.kwd-authorbox-bio{margin:.75rem 0 0;font-size:.9375rem;line-height:1.6;color:#15211fb3}
.kwd-authorbox-more{margin:.85rem 0 0}
.kwd-authorbox-more a{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.875rem;font-weight:600;color:var(--kwd-violet);text-decoration:none;
}
.kwd-authorbox-more a:hover{text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------------------------
   Pagination. The export has no pager at all, only carousel arrows.
   Targets the markup the_posts_pagination() emits.
   -------------------------------------------------------------------------- */
.kwd-pager{margin-top:3.5rem}
.kwd-pager .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.kwd-pager .nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem}
.kwd-pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.75rem;height:2.75rem;padding:0 .9rem;
  border:1px solid #ffffff40;border-radius:9999px;
  font-size:.9375rem;font-weight:600;color:#fff;text-decoration:none;
  transition:background-color .2s,border-color .2s,color .2s;
}
.kwd-pager a.page-numbers:hover{background:#ffffff1a;border-color:#ffffff80}
.kwd-pager .page-numbers.current{background:var(--kwd-acid);border-color:var(--kwd-acid);color:var(--kwd-ink)}
.kwd-pager .page-numbers.dots{border-color:transparent;color:#ffffff73}

/* --------------------------------------------------------------------------
   Author profile page: the "what they focus on" chips
   -------------------------------------------------------------------------- */
.kwd-focus{margin-top:2.5rem}
.kwd-focus-label{
  margin:0 0 .85rem;font-size:.6875rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#15211f73;
}
.kwd-focus-list{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.kwd-focus-list li{
  margin:0;padding:.45rem .85rem;
  background:#15211f0a;border-radius:9999px;
  font-size:.875rem;font-weight:500;color:#15211fcc;
}
.kwd-teamline{
  margin:2.25rem 0 0;padding-top:1.5rem;border-top:1px solid #15211f1f;
  font-size:.9375rem;color:#15211f99;
}
.kwd-teamline a{color:var(--kwd-violet);font-weight:600}

/* Author email, rendered obfuscated by kwd_obfuscate_email(). */
.kwd-email{margin:.75rem 0 0;font-size:.9375rem;color:#ffffff8c}
.kwd-email a{color:#fff;font-weight:600;text-decoration:none}
.kwd-email a:hover{color:var(--kwd-acid)}