/* Drake KB — left rail.
 *
 * Deliberately minimal: the native BetterDocs category rail looks good
 * as-is and was kept over a reskin. Two scale problems needed fixing, and both
 * only appear with a real corpus.
 *
 * 1. HIDE the article-count badge IN THE RAIL.
 *    BetterDocs stamps a blue count bubble on every folder in the sidebar tree.
 *    With Drake's real numbers that is 20 bubbles of visual noise down the side
 *    of every article page, and the user's call was "hide the counts of
 *    articles, they're ugly in the LHR".
 *
 *    Scoped to the sidebar on purpose. BetterDocs' global `post_count` setting
 *    would have hidden the badge everywhere INCLUDING the home-page category
 *    grid, where a count next to "Drake Tax" is genuinely useful. It also would
 *    not have saved a single query — the template calls get_docs_count() first
 *    and only then decides whether to render (A/B'd: 5,805 queries either way),
 *    so `post_count` buys nothing here that CSS doesn't. Query volume is
 *    mu-plugins/drake-kb-perf.php's job.
 *
 *    `display:none` rather than `visibility:hidden` so the folder title reclaims
 *    the width (the badge sits in a flex row with `margin-left:auto`).
 *
 * 2. FIX the 4-digit badge that survives, on the HOME GRID.
 *    BetterDocs hardcodes the bubble at a fixed 50px wrapper around a 30px
 *    circular span. "Drake Tax" has 1,637 articles, and 4 digits overflow the
 *    span — "1637" spilled outside the blue circle. A 95-article test site could
 *    never surface this.
 *
 *    Note this rule now targets the wrapper AND the inner span. The previous
 *    version widened only the wrapper, which is not the element drawing the
 *    circle, so the overflow was never actually fixed. min-width keeps the
 *    circular look for 1-2 digits; width:auto + padding absorbs the extra
 *    digits; white-space stops a wrap.
 *
 * 3. STYLE the two NON-CATEGORY rows ("Home", "Tutorials") that
 *    mu-plugins/drake-rail-links.php injects, so they are indistinguishable
 *    from the 21 category rows. Not a scale problem — a fidelity one: Drake's
 *    rail has 23 top-level nodes and only 21 are categories.
 */

/* 1. No count badges anywhere in the sidebar category tree. Both selectors are
 *    the same nodes on the two rail markups BetterDocs emits (block sidebar and
 *    shortcode sidebar); listing both means neither layout can leak a badge. */
aside.betterdocs-sidebar .betterdocs-category-items-counts,
.betterdocs-sidebar-content.betterdocs-category-sidebar .betterdocs-category-items-counts {
  display: none !important;
}

/* 2. Home-page category grid keeps its counts — make 4 digits fit. */
.betterdocs-category-grid-wrapper .betterdocs-category-items-counts,
.betterdocs-category-grid-wrapper .betterdocs-category-items-counts span {
  width: auto !important;
  min-width: 30px;
  padding: 0 9px;
  border-radius: 999px !important; /* pill when wide, circle when not */
  white-space: nowrap;
  box-sizing: border-box;
}

/* 3. NON-CATEGORY RAIL ROWS ("Home", "Tutorials").
 *
 *    Drake's rail has 23 top-level nodes; two of them are plain links, not
 *    categories, so they cannot be `doc_category` terms. mu-plugins/
 *    drake-rail-links.php injects them into the rendered sidebar block by
 *    cloning a real category row — see that file for why.
 *
 *    The clone's header is deliberately renamed from
 *    `betterdocs-category-header` to `drake-rail-link-header`, because
 *    BetterDocs' category-toggler.js binds `e.preventDefault()` to every
 *    `.betterdocs-category-header` click and would silently swallow the
 *    navigation. Renaming the class is what makes the link work; these rules
 *    are what give the renamed element the ~6 declarations it lost. Copied from
 *    BetterDocs' sidebar.css layout-1 rules so the rows are pixel-identical to
 *    their category neighbours:
 *      .betterdocs-sidebar-layout-1 ... .betterdocs-category-header
 *        { padding:10px 15px; border-right:3px solid transparent;
 *          box-shadow:none; cursor:pointer }
 *      .betterdocs-category-header .betterdocs-category-header-inner
 *        { display:flex; align-items:center; justify-content:stretch }
 *      ... .betterdocs-category-header-inner { padding-bottom:0 }
 *    `cursor:pointer` is included: the anchor supplies it over the text, but the
 *    header's own 10px/15px padding is outside the anchor, and without this the
 *    row's edges showed `auto` while every category row showed `pointer`
 *    (measured).
 *
 *    NOT scoped to `aside.betterdocs-sidebar` only: the same block also renders
 *    on category archives, where the rail markup is the same but the wrapper
 *    classes differ. `.drake-rail-link` is ours and appears nowhere else, so an
 *    unscoped selector cannot collide. */
.drake-rail-link .drake-rail-link-header {
  padding: 10px 15px;
  border-right: 3px solid transparent;
  box-shadow: none;
  cursor: pointer;
}

.drake-rail-link .drake-rail-link-header-inner {
  display: flex;
  align-items: center;
  justify-content: stretch;
  padding-bottom: 0;
  border-bottom: none;
}

/* The anchor WRAPS the row (icon + title) rather than sitting inside the <h2> —
 * see drake-rail-links.php for why (BetterDocs colours rail titles with
 * `:not(:has(a))`, so an anchor inside the h2 turns the row link-blue while
 * every category row stays grey). Because it is now the flex row's only child,
 * it has to become the flex row itself; nothing here sets a colour, so the h2
 * keeps whatever BetterDocs' block settings give it. */
.drake-rail-link .drake-rail-link-header-inner > .drake-rail-link-a {
  display: flex;
  align-items: center;
  justify-content: stretch;
  flex: 1;
  min-width: 0;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * "You are here": the current article's row in the rail.
 *
 * BetterDocs marks it (`<a class="active">`, set server-side or by
 * drake-kb-rail-cache.php's swap on a cached rail) but ships NO styling for it on
 * an article row — so the reader had no indication of where they were in a rail
 * that can be thousands of rows long. Drake's own KB tints the row and rules it
 * with a bar on the left, which is what this reproduces.
 *
 * Applied to the <a> itself, not a wrapper: the article rows are bare anchors in
 * `ul.betterdocs-nested-category-list`, with no per-row element to hang it on.
 * The negative margin + matching padding let the tint bleed to the card's edges
 * while the text stays aligned with its siblings.
 * --------------------------------------------------------------------------- */
/* BOTH list containers, not just the nested one.
 *
 * BetterDocs puts a category's own articles in `ul.betterdocs-articles-list` and
 * a SUBcategory's articles in `ul.betterdocs-nested-category-list`. Scoping this
 * to the nested list alone meant the highlight silently did nothing on every
 * top-level category — Broadcasts, Getting Started, Renewals — where the row
 * carried class="active" but received no styling at all. The folder above it
 * still highlighted, which made it look like the feature half-worked. */
.betterdocs-sidebar .betterdocs-nested-category-list a.active,
.betterdocs-sidebar .betterdocs-articles-list a.active {
  position: relative;
  display: block;
  background-color: var(--drake-blue-tint);
  border-left: 3px solid var(--drake-blue, #1b75bc);
  color: var(--drake-blue-dark, #155e97);
  font-weight: 600;
  /* Bleed the highlight out to the rail card's edges, then put the space back as
   * padding so the label does not shift relative to inactive rows. */
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 13px;   /* 16 - 3px border, so text stays put */
  padding-right: 16px;
}

/* Keep the hover treatment from fighting the active tint. */
.betterdocs-sidebar .betterdocs-nested-category-list a.active:hover,
.betterdocs-sidebar .betterdocs-articles-list a.active:hover {
  background-color: var(--drake-blue-tint);
  color: var(--drake-blue-dark, #155e97);
}

/* On the CATEGORY page the same active row loses its colour to BetterDocs' own
 * rule, which sets `color:#528fff` — 2.76:1 on our tint, failing WCAG AA (4.5:1).
 * Its selector is
 *   .betterdocs-single-category-wrapper .betterdocs-single-category-inner
 *   .betterdocs-articles-list li a.active
 * at specificity (0,4,2) against (0,3,1) above, so it wins on specificity rather
 * than order and raising ours only in the cascade would not help. Matched here
 * instead of using !important so a future override still behaves predictably. */
.betterdocs-single-category-wrapper
  .betterdocs-single-category-inner
  .betterdocs-articles-list li a.active,
.betterdocs-single-category-wrapper
  .betterdocs-single-category-inner
  .betterdocs-entry-body li a.active {
  color: var(--drake-blue-dark, #155e97);
}