/**
 * Licensio — Knowledge Base bridge
 *
 * The knowledge base is the Licensio KB plugin, and the plugin owns its layout.
 * It ships assets/css/licensio-kb.css and enqueues it on every knowledge base
 * view from Licensio_KB_Templates::enqueue_styles(), plus search.css,
 * feedback.css and blocks.css alongside. That stylesheet is deliberately theme
 * neutral: it sets no colour and no font, derives its lines and tints from
 * `currentColor`, and only paints a brand colour when `--licensio-kb-brand` is
 * declared. It reads none of this theme's tokens.
 *
 * So the wrapper, hero, search form, breadcrumbs, cards, grids, sidebar
 * widgets, pagination and the feedback widget stay the plugin's, and this file
 * does three things on top of them:
 *
 * 1. Hands the plugin the Licensio palette through its own custom properties,
 *    so buttons, focus rings, the current-category marker and the feedback
 *    buttons come out brand green rather than in the text colour.
 * 2. Lays out the theme's hero band, which also clears the fixed header,
 *    on every knowledge base view.
 * 3. Restores article prose. The global reset in style.css
 *    (`*{margin:0;padding:0}`) strips list indentation out of the_content(),
 *    and the plugin sets no type scale for headings, no inline code, no code
 *    block and no table cell rules. The rules on `.licensio-kb-article__body`
 *    match the treatment `.post-body` gives the blog.
 *
 * Loaded after the plugin stylesheet and its settings-driven inline block
 * (licensio_enqueue_knowledge_base_assets() depends on that handle), so a
 * token declared here on `.licensio-kb` wins at equal specificity.
 *
 * @package Licensio
 * @since   0.1.0
 * @since   0.2.0 Bridges the plugin's 1.0.0 design tokens, renders the theme hero on every view and styles the plugin's breadcrumb trail in it.
 */

/* ---------- Design tokens ---------- */

/*
 * The plugin's tokens, pointed at the theme's. Declaring the brand colour is
 * what switches the plugin's buttons, accents and tints from `currentColor`
 * to green; the contrast companion is the label colour on a filled button.
 *
 * The card tokens replace the plugin's Card style setting on this site: the
 * theme's cards are white with a hairline and a soft green shadow everywhere
 * else, and a grey plugin card was the one surface that did not match.
 *
 * The anchor offset is the plugin's documented seam for a fixed header: a
 * table of contents jump otherwise lands the heading under the 79px header.
 */
.licensio-kb {
  --licensio-kb-brand: var(--primary);
  --licensio-kb-brand-contrast: #fff;
  --licensio-kb-line: var(--border);
  --licensio-kb-tint: var(--bg-tint);
  --licensio-kb-surface: var(--bg-soft);
  --licensio-kb-radius: 12px;
  --licensio-kb-card-bg: var(--card);
  --licensio-kb-card-border: 1px solid var(--border);
  --licensio-kb-card-shadow: var(--shadow-sm);
  --licensio-kb-shadow-md: var(--shadow-md);
  --licensio-kb-anchor-offset: 110px;
}

/*
 * Filled buttons take the theme's primary button: the gradient, the heading
 * face and the weight. The plugin fills them with the flat brand colour.
 */
.licensio-kb__button,
.licensio-kb-widget .licensio-kb-widget__button {
  border-color: transparent;
  background: var(--gradient);
  font-family: var(--font-head);
  font-weight: 700;
}

/* The plugin's sticky offset assumes no fixed header above it. */
@media (min-width: 62rem) {
  .licensio-kb__sidebar--sticky {
    top: 110px;
    max-height: calc(100vh - 130px);
  }
}

/* ---------- Hero band on every view ---------- */

/*
 * `.site-header` is fixed (style.css:53), and every knowledge base view
 * clears it the same way: with the `.page-hero` band, which carries 170px of
 * top padding (style.css:272). `licensio-kb/hero.php` renders it on the single
 * article, tag and search views, and `licensio-kb/page-header.php` renders the
 * same hero on the knowledge base home and a category.
 *
 * On those two the plugin prints the header inside its contained
 * `.licensio-kb--archive` / `.licensio-kb--category` wrapper rather than in a
 * full-bleed one, so the band breaks out to the viewport edges here, the
 * wrapper drops the top padding that would show above it, and the band keeps
 * the plugin's section spacing below it. `body` hides horizontal overflow
 * (style.css), so the scrollbar's share of `100vw` cannot open a sideways
 * scroll.
 *
 * Neither wrapper is emitted by a block (blocks are `licensio-kb-block--…`),
 * so an embedded grid cannot pick this up.
 */
.licensio-kb.licensio-kb--archive,
.licensio-kb.licensio-kb--category {
  padding-top: 0;
}

.licensio-kb--archive > .page-hero,
.licensio-kb--category > .page-hero {
  margin: 0 calc(50% - 50vw) var(--licensio-kb-space);
}

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

/*
 * The hero renders the plugin's trail (`licensio-kb__crumbs`, a flex list)
 * inside `.page-hero .crumbs`, which carries the theme's crumb type and link
 * colour. `.page-hero` centres its text, but a flex container places its
 * items by `justify-content`, so the trail is centred here.
 *
 * The plugin draws the `/` separator in the hairline colour, which on the
 * tinted hero all but disappears; it takes the muted text colour instead.
 */
.page-hero .licensio-kb__breadcrumbs {
  margin: 0;
  font-size: inherit;
}

.page-hero .licensio-kb__crumbs {
  justify-content: center;
}

.page-hero .licensio-kb__crumb,
.page-hero .licensio-kb__crumb + .licensio-kb__crumb::before {
  color: var(--muted);
}

.page-hero .licensio-kb__crumb [aria-current="page"] {
  color: var(--ink);
}

/* ---------- 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 `.licensio-kb__section`, so this only has
 * to stop the theme's band padding reaching it.
 *
 * Targeted at that class and **not** at `.licensio-kb section`. The hero the
 * theme renders is itself a `section` - `.page-hero` - and it sits inside a
 * `.licensio-kb` wrapper, so the broader selector stripped the 170px of top
 * padding that clears the fixed header and dropped the whole hero behind it.
 */
.licensio-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 `.licensio-kb`: the
 * blocks reuse that class, and an embedded category grid inside an ordinary
 * page would otherwise be pulled out of its own column.
 */
.licensio-kb--archive,
.licensio-kb--single,
.licensio-kb--category,
.licensio-kb--tag,
.licensio-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
 * `licensio_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. The top padding is
 * the plugin's `licensio-kb__empty` box, the outer element of the override.
 *
 * The plugin also renders this template from its FAQ, category grid and
 * article list blocks on ordinary pages, which is why
 * licensio_enqueue_knowledge_base_assets() loads this file wherever the
 * plugin's block stylesheet is enqueued, not only on knowledge base views.
 */
.nf-hero--kb {
  padding: 0 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-title {
  font-size: clamp(24px, 3.2vw, 34px);
  margin-top: 8px;
}

.nf-hero--kb .lead {
  max-width: 560px;
  margin: 14px auto 0;
}

.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);
}

/* ---------- Article body ---------- */
.licensio-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. */
.licensio-kb-article__body h2 {
  font-size: 26px;
}
.licensio-kb-article__body h3 {
  font-size: 21px;
}
.licensio-kb-article__body h4 {
  font-size: 17.5px;
}

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

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

/* Code. Inline is a tinted chip; a block is dark, as .code-block is elsewhere. */
.licensio-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;
}
.licensio-kb-article__body pre {
  background: var(--ink);
  color: #eaf6f0;
  padding: 20px 24px;
}
.licensio-kb-article__body pre code {
  background: none;
  color: inherit;
  padding: 0;
}

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