/**
 * Lisensio — Knowledge Base article prose
 *
 * The knowledge base is the Lisensio KB plugin now, and the plugin owns its own
 * design. It ships assets/css/lisensio-kb.css and enqueues it on every knowledge
 * base view from Lisensio_KB_Templates::enqueue_styles(), whether or not the theme
 * overrides its templates, plus search.css, feedback.css and blocks.css alongside.
 * Its tokens are declared as var(--primary, …), var(--radius, …), var(--font-head, …),
 * so the :root block in assets/css/style.css already carries the Lisensio palette,
 * radius and type into the knowledge base with no KB-specific CSS at all.
 *
 * So the wrapper, hero, search form, breadcrumbs, category and article cards, grids,
 * pagination, the empty state and the feedback widget are all the plugin's, and none
 * of them are repeated here — two stylesheets fighting over one element is how a
 * design drifts.
 *
 * What is left is what the plugin cannot know about: the theme's fixed header,
 * and article prose. The global reset in style.css (`*{margin:0;padding:0}`)
 * strips list indentation out of the_content(), and the plugin deliberately sets
 * no type scale for headings, no inline code, no code block and no table cell
 * rules. These rules restore them on `.lisensio-kb-article__body`, matching the
 * treatment `.post-body` already gives the blog so an article reads like the rest
 * of the site.
 *
 * @package Lisensio
 * @since   0.1.0
 */

/* ---------- Top clearance under the fixed site header ---------- */

/*
 * `.site-header` is fixed (style.css:53), so a knowledge base page has to clear
 * it itself. It normally does that in markup: `lisensio-kb/hero.php` renders
 * the `.page-hero` band, which carries 170px (style.css:272).
 *
 * **This rule does not fire in the shipped configuration** - every knowledge
 * base route emits exactly one `.page-hero`, verified across the archive, a
 * single article, a category, a tag and both search states. It is the fallback
 * for the one case that would otherwise break silently: delete
 * `lisensio-kb/hero.php` and the plugin renders its own `.lisensio-kb__hero`
 * instead, whose 40px of padding leaves it **39px underneath** a 79px header.
 * Measured by renaming the override aside and reading the live page, not
 * computed - which is the only way to check a rule that is inert by design.
 *
 * It targets `--bleed`, the wrapper the hero actually lives in. An earlier
 * version listed the five content wrappers instead: the hero is their
 * *sibling*, so the padding landed on the content and opened a gap below a
 * hero that was still behind the header. That made the failure look different
 * rather than fixing it, and it was invisible until the override was removed.
 *
 * `--bleed` is emitted only by the five page templates, never by a block
 * (blocks are `lisensio-kb-block--…`), so an embedded grid cannot pick this up.
 *
 * 150px is what `.post-wrap` uses for the same reason (style.css:387).
 */
body:not(:has(.page-hero)) .lisensio-kb--bleed {
  padding-top: 150px;
}

/* ---------- Hero breadcrumbs ---------- */

/*
 * `.page-hero` centres its contents, and that reaches the heading and the
 * search form. It does not reach the breadcrumb: Statute SEO renders it as
 * `nav.statute-seo-breadcrumbs`, a flex container, and a flex container places
 * its items along the main axis by `justify-content` - `text-align` on the
 * parent has no say. So the crumb sat hard left under a centred heading.
 *
 * Scoped inside `.page-hero` so breadcrumbs elsewhere on the site, where the
 * page is not centred, are left as they are.
 */
.page-hero .crumbs .statute-seo-breadcrumbs {
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Section rhythm ---------- */

/*
 * The theme styles the bare `section` element - `section{padding:96px 0}`
 * (style.css:35) - because on a marketing page every section is a full band
 * with air around it. The knowledge base uses `section` for much smaller
 * things: the article list, the sub-category grid. Inheriting that put 96px of
 * nothing above every heading, which read as the page being broken.
 *
 * The plugin sets its own rhythm on `.lisensio-kb__section`, so this only has
 * to stop the theme's band padding reaching it.
 *
 * Targeted at that class and **not** at `.lisensio-kb section`. The hero the
 * theme renders is itself a `section` - `.page-hero` - and it sits inside a
 * `.lisensio-kb` wrapper, so the broader selector stripped the 170px of top
 * padding that clears the fixed header and dropped the whole hero behind it.
 */
.lisensio-kb__section {
  padding: 0;
}

/* ---------- Content column ---------- */

/*
 * Line the knowledge base up with the rest of the site.
 *
 * The plugin sizes its own wrapper - 72rem with a 1rem gutter, a 1120px
 * column - because it cannot know what container a theme uses. Here that put
 * the breadcrumbs and hero on the theme's 1180px `.container` and the cards on
 * the plugin's narrower one, so the two disagreed by 30px a side and the page
 * read as misaligned.
 *
 * Matching `.container` exactly (style.css:34) rather than nudging a value, so
 * the two stay aligned if the theme's measure ever changes.
 *
 * Scoped to the five page-level wrappers, never bare `.lisensio-kb`: the
 * blocks reuse that class, and an embedded category grid inside an ordinary
 * page would otherwise be pulled out of its own column.
 */
.lisensio-kb--archive,
.lisensio-kb--single,
.lisensio-kb--category,
.lisensio-kb--tag,
.lisensio-kb--search {
  width: min(1180px, 92%);
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- Knowledge base empty state ---------- */

/*
 * The 404 treatment, reused for a knowledge base dead end.
 *
 * Self-contained on purpose. The `.nf-*` base rules live in 404.css, which
 * `lisensio_empty_state_assets()` enqueues only on a 404 or an empty search -
 * and the plugin renders this template from seven places, six of which are
 * neither. Inheriting from that file left the glyph flat and the quick links
 * as bare inline text on an empty archive, category or tag.
 *
 * Sized for a block part way down a page rather than a whole one: `.nf-hero`
 * carries 180px of top padding because it owns the viewport, which is wrong
 * here, and the glyph is a mood rather than the subject.
 */
.nf-hero--kb {
  padding: 56px 0 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.nf-hero--kb .nf-code {
  font-family: var(--font-head);
  font-size: clamp(64px, 9vw, 110px);
  font-weight: 800;
  line-height: 1;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.04em;
}

.nf-hero--kb .nf-quick {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

.nf-hero--kb .nf-quick a {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: .25s;
}

.nf-hero--kb .nf-quick a:hover,
.nf-hero--kb .nf-quick a:focus {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
}

/* The plugin's own empty box is the outer element, so a knowledge base block
   dropped into an ordinary page - where no theme stylesheet loads at all -
   still renders a deliberate container rather than loose text. */
.lisensio-kb__empty .nf-hero--kb {
  padding-top: 0;
}

/* ---------- Content column ---------- */

/*
 * Line the knowledge base up with the rest of the site.
 *
 * The plugin sizes its own wrapper - 72rem with a 1rem gutter, a 1120px
 * column - because it cannot know what container a theme uses. Here that put
 * the breadcrumbs and hero on the theme's 1180px `.container` and the cards on
 * the plugin's narrower one, so the two disagreed by 30px a side and the page
 * read as misaligned.
 *
 * Matching `.container` exactly (style.css:34) rather than nudging a value, so
 * the two stay aligned if the theme's measure ever changes.
 *
 * Scoped to the five page-level wrappers, never bare `.lisensio-kb`: the
 * blocks reuse that class, and an embedded category grid inside an ordinary
 * page would otherwise be pulled out of its own column.
 */
.lisensio-kb--archive,
.lisensio-kb--single,
.lisensio-kb--category,
.lisensio-kb--tag,
.lisensio-kb--search {
  width: min(1180px, 92%);
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- Knowledge base empty state ---------- */

/*
 * The 404 treatment reused for a knowledge base dead end. `.nf-hero` is built
 * for a whole page and carries 180px of top padding (style.css); here it sits
 * part way down a results page, so it only needs breathing room, not a screen
 * of it. The glyph is smaller for the same reason - it is a mood, not the
 * subject of the page.
 */
.nf-hero--kb {
  padding: 56px 0 48px;
}

.nf-hero--kb .nf-code {
  font-size: clamp(64px, 9vw, 110px);
  line-height: 1;
}

/* ---------- Article body ---------- */
.lisensio-kb-article__body {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--body);
}

/* Heading scale. The plugin sets the rhythm; the sizes are the theme's. */
.lisensio-kb-article__body h2 {
  font-size: 26px;
}
.lisensio-kb-article__body h3 {
  font-size: 21px;
}
.lisensio-kb-article__body h4 {
  font-size: 17.5px;
}

/* Lists — the global reset removed the indent the markers need. */
.lisensio-kb-article__body ul,
.lisensio-kb-article__body ol {
  margin-left: 24px;
}
.lisensio-kb-article__body li {
  margin-bottom: 0.4em;
}

.lisensio-kb-article__body img {
  border-radius: 12px;
}

/* Code. Inline is a tinted chip; a block is dark, as .code-block is elsewhere. */
.lisensio-kb-article__body code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.88em;
  background: var(--bg-tint);
  color: var(--primary-dark);
  border-radius: 6px;
  padding: 2px 7px;
}
.lisensio-kb-article__body pre {
  background: var(--ink);
  color: #eaf6f0;
  padding: 20px 24px;
}
.lisensio-kb-article__body pre code {
  background: none;
  color: inherit;
  padding: 0;
}

/* Tables. The plugin collapses the borders but draws none. */
.lisensio-kb-article__body th,
.lisensio-kb-article__body td {
  border: 1px solid var(--border);
  padding: 10px 14px;
  text-align: left;
}
.lisensio-kb-article__body th {
  background: var(--bg-soft);
  color: var(--ink);
  font-family: var(--font-head);
}