.betterdocs-wrapper,
.docs-template-default {
  /* modernization token, then literal fallback */
  --kb-ink: var(--ink, #222222);
  --kb-ink-2: var(--ink-2, #3f3f3f);
  --kb-text: var(--text, #2c2c2c);
  --kb-muted: var(--muted, #6b7280);
  --kb-navy: var(--navy, #020e28);
  --kb-blue: var(--blue, #1e73be);
  --kb-blue-dk: var(--blue-dk, #155a94);
  --kb-blue-soft: var(--blue-soft, #e8f1f9);
  --kb-amber: var(--amber, #b45309);
  --kb-amber-soft: var(--amber-soft, #fdf4e7);
  --kb-surface: var(--surface, #f4f7fa);
  --kb-rule: var(--rule, #e2e8f0);
  --kb-cta: var(--cta, #f38d00);
  --kb-cta-dk: var(--cta-dk, #dd6420);

  --kb-radius: var(--radius, 10px);
  --kb-radius-sm: var(--radius-sm, 6px);
  --kb-shadow: var(--shadow, 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .08));

  --kb-fh: var(--fh, 'Space Grotesk', Tahoma, Geneva, sans-serif);
  --kb-fb: var(--fb, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* --------------------------------------------------------------------------
   1. Shared type
   -------------------------------------------------------------------------- */

.betterdocs-wrapper,
.betterdocs-wrapper button,
.betterdocs-wrapper input {
  font-family: var(--kb-fb);
  color: var(--kb-text);
  line-height: 1.65;
}

.betterdocs-wrapper h1,
.betterdocs-wrapper h2,
.betterdocs-wrapper h3,
.betterdocs-wrapper h4 {
  font-family: var(--kb-fh);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--kb-ink);
}

/* --------------------------------------------------------------------------
   2. Archive — the category grid at /docs/
   -------------------------------------------------------------------------- */

.betterdocs-docs-archive-wrapper {
  background: var(--kb-surface);
  padding-block: 48px 64px;
}

/* Cards. beats Customizer (background-color, radius, padding) */
.betterdocs-wrapper.betterdocs-docs-archive-wrapper .betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper>.betterdocs-single-category-wrapper .betterdocs-single-category-inner {
  background: #fff !important;
  border: 1px solid var(--kb-rule);
  border-radius: var(--kb-radius) !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  /* Clips children to the card curve. Without this the .betterdocs-footer at
     the bottom of the card — white background, 5px radius from the Customizer,
     empty until a category exceeds posts_number — paints over the two bottom
     corners and swallows the border there. */
  overflow: hidden;
}

/* Belt and braces: match the last child's bottom radius to the card's inner
   curve, so the corners stay right even if overflow is ever removed.
   beats Customizer (5px bottom radii) */
.betterdocs-wrapper.betterdocs-docs-archive-wrapper .betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper>.betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-footer:last-child,
.betterdocs-wrapper.betterdocs-docs-archive-wrapper .betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper>.betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-body:last-child {
  border-bottom-left-radius: calc(var(--kb-radius) - 1px) !important;
  border-bottom-right-radius: calc(var(--kb-radius) - 1px) !important;
}

.betterdocs-wrapper.betterdocs-docs-archive-wrapper .betterdocs-single-category-wrapper:hover .betterdocs-single-category-inner {
  border-color: var(--kb-blue);
  box-shadow: var(--kb-shadow);
  transform: translateY(-2px);
}

/* Card header: a tinted band so the category reads as a section, not a list */
.betterdocs-docs-archive-wrapper .betterdocs-category-header {
  background: var(--kb-blue-soft);
  border-bottom: 1px solid var(--kb-rule);
  border-radius: var(--kb-radius) var(--kb-radius) 0 0;
}

.betterdocs-docs-archive-wrapper .betterdocs-category-header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* beats Customizer (font-size)

   With category_title_link on, the text moved inside an <a>, so the anchor
   needs its own rule: the Customizer prints a separate .betterdocs-category-title a
   font-size, and !important on the parent h2 does not cascade over a rule set
   directly on the child. The anchor also has to be pulled off the theme's
   default link colour and underline. */
.betterdocs-wrapper.betterdocs-docs-archive-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-title,
.betterdocs-wrapper.betterdocs-docs-archive-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-title a {
  font-size: 19px !important;
  margin: 0;
  color: var(--kb-navy);
  text-decoration: none;
}

/* The whole card already lifts on hover, so the title underlines to confirm
   it is the thing that clicks. */
.betterdocs-wrapper.betterdocs-docs-archive-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-title a:hover,
.betterdocs-wrapper.betterdocs-docs-archive-wrapper .betterdocs-single-category-wrapper:hover .betterdocs-single-category-inner .betterdocs-category-title a {
  color: var(--kb-blue-dk);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The generic BetterDocs folder icon, tinted to brand instead of replaced */
.betterdocs-docs-archive-wrapper .betterdocs-category-icon-img {
  filter: grayscale(1) brightness(.35) sepia(1) hue-rotate(175deg) saturate(4);
  opacity: .85;
}

/* Article count: a quiet pill, not a competing number */
.betterdocs-docs-archive-wrapper .betterdocs-category-items-counts {
  margin-left: auto;
  background: #fff;
  border: 1px solid var(--kb-rule);
  border-radius: 100px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--kb-muted);
  line-height: 1.6;
}

/* The number sits in a nested <span> that the Customizer gives its own fill and
   white text — which would disappear inside the pale pill above.
   beats Customizer (background-color, color) */
.betterdocs-wrapper.betterdocs-docs-archive-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-items-counts,
.betterdocs-wrapper.betterdocs-docs-archive-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-items-counts span {
  background-color: transparent !important;
  color: var(--kb-muted) !important;
}

.betterdocs-wrapper.betterdocs-docs-archive-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-header .betterdocs-category-header-inner .betterdocs-category-items-counts {
  background-color: #fff !important;
}

/* "Explore More" — appears once a category passes posts_number. Ships as
   BetterDocs blue in a 50px pill; brought onto the CTA orange and one radius.
   beats Customizer (colour, border-color, radius) */
.betterdocs-wrapper.betterdocs-docs-archive-wrapper.betterdocs-category-layout-1 .betterdocs-footer a,
.betterdocs-wrapper.betterdocs-docs-archive-wrapper.betterdocs-category-layout-1 .betterdocs-footer button {
  background-color: #fff !important;
  color: var(--kb-blue-dk) !important;
  border-color: var(--kb-rule) !important;
  border-radius: var(--kb-radius-sm) !important;
  font-family: var(--kb-fb);
  font-size: 14px !important;
  font-weight: 600;
  padding: 8px 16px !important;
  margin: 0 20px 16px !important;
}

.betterdocs-wrapper.betterdocs-docs-archive-wrapper.betterdocs-category-layout-1 .betterdocs-footer a:hover,
.betterdocs-wrapper.betterdocs-docs-archive-wrapper.betterdocs-category-layout-1 .betterdocs-footer button:hover {
  background-color: var(--kb-cta) !important;
  border-color: var(--kb-cta) !important;
  color: #fff !important;
}

/* Article rows */
.betterdocs-docs-archive-wrapper .betterdocs-articles-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--kb-rule) 55%, transparent);
}

.betterdocs-docs-archive-wrapper .betterdocs-articles-list li:last-child {
  border-bottom: 0;
}

/* Shrink the inline file SVG — it ships at icon-block size and dominates the row */
.betterdocs-docs-archive-wrapper .betterdocs-articles-list li>svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  margin-top: 5px;
  opacity: .38;
}

.betterdocs-docs-archive-wrapper .betterdocs-articles-list li>svg .st0 {
  fill: var(--kb-navy);
}

.betterdocs-docs-archive-wrapper .betterdocs-articles-list li a {
  color: var(--kb-text);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.45;
}

.betterdocs-docs-archive-wrapper .betterdocs-articles-list li a:hover {
  color: var(--kb-blue-dk);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2b. Archive CTA
   Injected by a GeneratePress Hook Element after the category grid, because the
   BetterDocs archive has nowhere to put a ticket link. The h1 and intro come
   from the standard 99Plugs page banner, not from here.

   Tokens are read straight from :root here rather than the --kb-* aliases,
   since this block sits outside .betterdocs-wrapper where those are defined.
   -------------------------------------------------------------------------- */

.kb-cta {
  max-width: 720px;
  margin: 8px auto 56px;
  padding: 30px 32px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--rule, #e2e8f0);
  border-radius: var(--radius, 10px);
}

.kb-cta h2 {
  font-family: var(--fh, 'Space Grotesk', Tahoma, Geneva, sans-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink, #222222);
  margin: 0 0 8px;
}

.kb-cta p {
  font-family: var(--fb, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted, #6b7280);
  margin: 0 0 20px;
}

.kb-cta-btn {
  display: inline-block;
  background: var(--cta, #f38d00);
  color: #fff;
  font-family: var(--fb, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  padding: 12px 26px;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  transition: background .18s ease;
}

.kb-cta-btn:hover,
.kb-cta-btn:focus {
  background: var(--cta-dk, #dd6420);
  color: #fff;
  text-decoration: none;
}

.kb-cta-btn:focus-visible {
  outline: 2px solid var(--navy, #020e28);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .kb-cta {
    padding: 24px 20px;
    margin: 8px 16px 40px;
  }

  .kb-cta h2 {
    font-size: 21px;
  }

  .kb-cta p {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   2c. Back-to-top vs the Instant Answer launcher

   BetterDocs' IA launcher is fixed at right:20px, bottom:20px and is about
   60px across. GeneratePress puts .generate-back-to-top at right:30px,
   bottom:30px. They land on each other.

   Fix is vertical only: right:30px already centres the 40px back-to-top button
   over a 60px launcher sitting at right:20px, so the two read as one stack.
   Lifting it to 100px clears the launcher (20 bottom + 60 tall) plus a 20px gap.

   This targets a GeneratePress element rather than a BetterDocs one, but the
   collision is BetterDocs' doing, so the fix lives with it. It is NOT scoped to
   docs pages, because the launcher shows site-wide (display_ia_pages: all).

   If the launcher is ever resized, this is the one number to change.
   -------------------------------------------------------------------------- */

.generate-back-to-top {
  bottom: 100px;
  right: 25px;
}

/* --------------------------------------------------------------------------
   2d. Instant Answer widget — hide the doc excerpt

   The docs list prints the excerpt hard-truncated on character count, so it
   breaks mid-sentence ("If an item does not work and we cannot fix"). The
   titles are already self-describing, so the excerpt costs a line and returns
   a fragment.

   Scoped to .betterdocs-ia-docs-content so FAQ answers elsewhere in the panel
   are untouched — they use the same .content-item structure.
   -------------------------------------------------------------------------- */

.betterdocs-ia-docs-content .content-item > p {
  display: none;
}

/* The title carried bottom spacing that assumed a paragraph under it */
.betterdocs-ia-docs-content .content-item > .content-title {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   2e. Instant Answer — the greens that are not settings

   Most IA colours are settings and were moved onto the palette over MCP. These
   two are printed as fill attributes inside the inline SVGs, so no setting
   reaches them: #00B682 on the list arrows, #00A375 on the reaction icons.

   Matching on the attribute value rather than a container catches every
   instance wherever it appears in the panel. A CSS fill beats an SVG fill
   presentation attribute, so no !important is needed.
   -------------------------------------------------------------------------- */

.betterdocs-ia path[fill="#00b682" i],
.betterdocs-ia path[fill="#00a375" i],
.betterdocs-ia svg[fill="#00b682" i],
.betterdocs-ia svg[fill="#00a375" i] {
  fill: var(--blue, #1e73be);
}

/* --------------------------------------------------------------------------
   2f. Instant Answer — home panel header spacing

   Tightens the top of the home tab header. The ID-scoped selector is listed
   first so this wins over the plugin's own rule regardless of which stylesheet
   loads last; the bare selector is the fallback if the header ever renders
   outside #betterdocs-ia.
   -------------------------------------------------------------------------- */

#betterdocs-ia .betterdocs-ia-common-header.home-page-header,
.betterdocs-ia-common-header.home-page-header {
  padding-top: 10px;
}

/* --------------------------------------------------------------------------
   3. Single doc — left navigation sidebar
   The sidebar replaced the TOC (D14), so it carries the whole job of telling
   the reader where they are. The current-article state has to be obvious.
   -------------------------------------------------------------------------- */

/* The card box goes on the outer <aside> only. .betterdocs-category-sidebar is
   its child — styling both would nest two borders. */
.betterdocs-single-wrapper .betterdocs-sidebar {
  background: #fff;
  border: 1px solid var(--kb-rule);
  border-radius: var(--kb-radius);
  padding: 6px 4px;
}

/* .betterdocs-background carries a Customizer-set fill; neutralise it so the
   card above is what shows. beats Customizer */
.betterdocs-single-wrapper .betterdocs-sidebar.betterdocs-background {
  background: #fff !important;
}

.betterdocs-single-wrapper .betterdocs-category-title {
  font-family: var(--kb-fh);
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kb-muted);
}

.betterdocs-single-wrapper .betterdocs-articles-list li a {
  display: block;
  padding: 7px 12px;
  border-radius: var(--kb-radius-sm);
  color: var(--kb-text);
  font-size: 14.5px;
  line-height: 1.45;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.betterdocs-single-wrapper .betterdocs-articles-list li a:hover {
  background: var(--kb-surface);
  color: var(--kb-ink);
}

/* Current article. BetterDocs marks it with .active on the li or the a —
   both are covered so this survives a markup change. */
.betterdocs-single-wrapper .betterdocs-articles-list li.active>a,
.betterdocs-single-wrapper .betterdocs-articles-list li>a.active {
  background: var(--kb-blue-soft);
  border-left-color: var(--kb-blue);
  color: var(--kb-navy);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Single doc — the article itself
   -------------------------------------------------------------------------- */

.betterdocs-single-wrapper .betterdocs-content-area {
  background: #fff;
  border: 1px solid var(--kb-rule);
  border-radius: var(--kb-radius);
  padding: 32px 36px 40px;
}

.betterdocs-entry-title,
.docs-single-title {
  font-family: var(--kb-fh);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--kb-ink);
  margin-bottom: 10px;
}

.betterdocs-breadcrumb {
  font-size: 13px;
  color: var(--kb-muted);
  margin-bottom: 18px;
}

.betterdocs-breadcrumb a {
  color: var(--kb-muted);
  text-decoration: none;
}

.betterdocs-breadcrumb a:hover {
  color: var(--kb-blue-dk);
  text-decoration: underline;
}

.betterdocs-entry-content {
  font-size: 17px;
}

.betterdocs-entry-content>p {
  max-width: 70ch;
}

.betterdocs-entry-content h2 {
  font-size: 26px;
  margin: 34px 0 12px;
}

.betterdocs-entry-content h3 {
  font-size: 20px;
  margin: 28px 0 10px;
}

.betterdocs-entry-content a {
  color: var(--kb-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.betterdocs-entry-content a:hover {
  color: var(--kb-blue-dk);
}

.betterdocs-entry-content li {
  margin-bottom: 7px;
}

/* Screenshots. These are the reason the TOC came off (D14) — give them the
   full column and enough contrast to read against the white card. */
.betterdocs-entry-content img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--kb-rule);
  border-radius: var(--kb-radius-sm);
  box-shadow: 0 1px 2px rgb(0 0 0 / .05);
}

.betterdocs-entry-content figure {
  margin: 24px 0;
}

/* Code — wp-config snippets in the debug-log article, and inline function names */
.betterdocs-entry-content pre {
  background: var(--kb-navy);
  color: #e7eefc;
  border-radius: var(--kb-radius-sm);
  padding: 16px 18px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}

.betterdocs-entry-content :not(pre)>code {
  background: var(--kb-surface);
  border: 1px solid var(--kb-rule);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .9em;
  color: var(--kb-amber);
}

/* Tables — Known Plugin Limitations is two of them */
.betterdocs-entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 15px;
}

.betterdocs-entry-content th {
  background: var(--kb-navy);
  color: #fff;
  font-family: var(--kb-fh);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
}

.betterdocs-entry-content td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--kb-rule);
}

.betterdocs-entry-content tbody tr:nth-child(even) {
  background: var(--kb-surface);
}

/* The limitations tables carry an empty trailing row in the source */
.betterdocs-entry-content tbody tr:empty {
  display: none;
}

/* Tags — the 18 doc_tags applied in the Stage 2 metadata pass */
.betterdocs-tags a {
  display: inline-block;
  background: var(--kb-surface);
  border: 1px solid var(--kb-rule);
  border-radius: 100px;
  padding: 3px 12px;
  margin: 0 6px 8px 0;
  font-size: 13px;
  color: var(--kb-ink-2);
  text-decoration: none;
}

.betterdocs-tags a:hover {
  background: var(--kb-blue-soft);
  border-color: var(--kb-blue);
  color: var(--kb-navy);
}

/* Prev / next */
.docs-navigation a {
  color: var(--kb-blue);
  font-weight: 600;
  text-decoration: none;
}

.docs-navigation a:hover {
  color: var(--kb-blue-dk);
  text-decoration: underline;
}

/* Print / PDF buttons: quiet, they are utilities not calls to action */
.betterdocs-print-btn,
.betterdocs-print-pdf {
  color: var(--kb-muted);
  opacity: .7;
}

.betterdocs-print-btn:hover,
.betterdocs-print-pdf:hover {
  color: var(--kb-blue-dk);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   5. Search
   -------------------------------------------------------------------------- */

.betterdocs-wrapper input[type="search"],
.betterdocs-wrapper input[type="text"] {
  border: 1px solid var(--kb-rule);
  border-radius: var(--kb-radius-sm);
  padding: 11px 14px;
  font-size: 16px;
  background: #fff;
}

.betterdocs-wrapper input[type="search"]:focus,
.betterdocs-wrapper input[type="text"]:focus {
  outline: 2px solid var(--kb-blue);
  outline-offset: 1px;
  border-color: var(--kb-blue);
}

/* --------------------------------------------------------------------------
   6. Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .betterdocs-single-wrapper .betterdocs-content-area {
    padding: 22px 18px 28px;
  }

  .betterdocs-docs-archive-wrapper {
    padding-block: 28px 40px;
  }

  .betterdocs-entry-content {
    font-size: 16px;
  }

  .betterdocs-entry-content pre {
    font-size: 13px;
  }

  /* Wide tables scroll rather than squash the layout */
  .betterdocs-entry-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}