/* Drake KB — page LAYOUT region (page canvas, gutters, full-width, rail card).
 *
 * Loaded LAST by loader.php so it wins ties against the other region sheets.
 * Owns three things and nothing else:
 *   1. the white band under the blue header
 *   2. the left category rail rendering as a discrete white CARD on grey
 *   3. removing the theme's centering max-width so the KB fills the window
 *
 * ---------------------------------------------------------------------------
 * 1. WHERE THE WHITE BAR CAME FROM (measured with CDP on
 *    /kb/Drake-Tax-Online/19010.htm, 1440x1200 — not guessed)
 *
 *    <body>                                    background: #fff   <-- THE WHITE
 *      <div class="wp-site-blocks">
 *        <header class="wp-block-template-part">   top 0,  height 73 (Drake blue)
 *        <div class="wp-block-group has-background  <- article BODY WRAPPER,
 *             is-layout-flow"                          inline background #f2f4f7
 *             style="background-color:#f2f4f7">
 *                                                  top 93, margin-top 19.2px
 *
 *    The header ends at y=73 but the grey wrapper starts at y=93, because the
 *    theme's `:where(.wp-site-blocks) > * { margin-block-start: 1.2rem }` puts
 *    19.2px of margin above it. Margin is transparent, so those 20 rows render
 *    the BODY's white — a full-bleed white bar spanning the whole viewport.
 *
 *    The left rail's white then starts at exactly y=93 (the rail's white bg
 *    lives on `.betterdocs-sidebar-content.betterdocs-category-sidebar`, which
 *    had no top offset, border or radius), so it butts flush against the white
 *    bar and the two read as one fused white strip. That is the reported bleed.
 *
 *    NOT caused by header.css. header.css only lifts the search band out of
 *    flow (position:absolute) — that removed a band, it did not create this
 *    one; the 19.2px white gap sits between </header> and the grey wrapper and
 *    is pure theme + white body. Nothing here needs to change in header.css.
 *
 *    Fix, belt and suspenders:
 *      a) paint the page canvas grey so any transparent gap reads grey, and
 *      b) collapse that margin and replace it with grey PADDING INSIDE the
 *         grey wrapper, so the gutter is grey by construction.
 *
 *    THE TRAP (documented in header.css, honoured here): the body wrapper is
 *    `.wp-block-group.has-background` and it wraps the ENTIRE article body.
 *    We NEVER set a background on it or on any broad
 *    `.wp-block-group.has-background` selector — that floods the page. Below we
 *    only ever touch its margin/padding, and always pinned as a DIRECT CHILD of
 *    `.wp-site-blocks` so no nested group can be caught by accident.
 * ------------------------------------------------------------------------- */

/* (a) Page canvas. Scoped with :has() to pages that actually contain the grey
 * docs body wrapper, so the home page — designed on white by home.css — is left
 * alone. `.is-layout-flow` is load-bearing in this selector: on the HOME page the
 * search band is ALSO a direct-child `.wp-block-group.has-background`, but it is
 * `.is-layout-constrained`, so it is excluded here. `body.single-docs` is the
 * plain-selector fallback for the article template. */
body:has(> .wp-site-blocks > .wp-block-group.has-background.is-layout-flow),
body.single-docs {
  background-color: #f2f4f7;
}

/* (b) Kill the 19.2px transparent (white-showing) gap under the header and
 * re-create the gutter as padding INSIDE the grey wrapper, where it paints
 * grey. Pinned to the direct child of .wp-site-blocks = the body wrapper only.
 * Margin/padding only — no background here, ever. */
.wp-site-blocks > .wp-block-group.has-background.is-layout-flow {
  margin-top: 0 !important;
  padding-top: 28px;
}

/* The wrapper's own first in-flow child (the constrained group holding the two
 * columns) adds another 1.2rem of block-start margin, which would stack on top
 * of the 28px above and open a ~47px canyon. Zero it so the gutter is exactly
 * the 28px we asked for. Excludes the search band (`accent-1`), which header.css
 * owns and takes out of flow. */
.wp-site-blocks > .wp-block-group.has-background.is-layout-flow
  > .wp-block-group.is-layout-constrained:not(.has-accent-1-background-color) {
  margin-top: 0 !important;
}

/* ---------------------------------------------------------------------------
 * 2. LEFT RAIL = white card on grey
 *
 * The rail's white background already lives on
 *   aside.betterdocs-sidebar > .betterdocs-sidebar-content.betterdocs-category-sidebar
 * (measured: bg rgb(255,255,255), l=24 w=295, no border/radius). We keep that
 * white but give it a border + radius so it reads as a contained card, and clip
 * the children (each category row also paints white) so the radius survives.
 * The card's left edge sits at the 24px root padding content.css sets on
 * .wp-site-blocks, so it never touches the viewport edge.
 * ------------------------------------------------------------------------- */
.betterdocs-sidebar .betterdocs-sidebar-content.betterdocs-category-sidebar {
  background-color: var(--drake-bg, #fff);
  border: 1px solid var(--drake-line, #d9dde1);
  border-radius: 4px;
  overflow: hidden;
}

/* Belt: if BetterDocs ever paints the aside itself, keep it transparent so the
 * card is the only white surface (no second white rectangle behind it). */
.betterdocs-sidebar.betterdocs-category-sidebar-wrapper,
aside.betterdocs-sidebar {
  background-color: transparent;
}

/* The rail column is a `has-global-padding` constrained column; its padding
 * would inset the card unevenly against the content column. Zero it so the card
 * spans its column and the grey gutter around it comes from the columns' own
 * flex gap + the root padding. */
.wp-block-columns > .wp-block-column.has-global-padding:has(.betterdocs-category-sidebar) {
  padding-left: 0;
  padding-right: 0;
}

/* ---------------------------------------------------------------------------
 * 3. FULL-WIDTH LAYOUT (remove the theme's centering max-width)
 *
 * The theme emits per-container layout rules with baked literal widths, e.g.
 *   .wp-container-core-group-is-layout-6 > :where(:not(.alignleft):not(.alignright):not(.alignfull))
 *     { max-width:1400px; margin-left:auto !important; margin-right:auto !important; }
 *   .wp-container-core-group-is-layout-6 > .alignwide { max-width:1400px; }
 * That 1400px + auto margins is what insets the whole KB. The auto margins are
 * `!important`, so overriding them requires `!important` too.
 *
 * `wp-container-core-group-is-layout-6` is a WP-GENERATED class and would change
 * if the template were re-saved, so we do not rely on it alone. Three
 * overlapping selectors, cheapest-to-break last:
 *   (i)  generic — children of any constrained group inside the docs BODY
 *        wrapper or <main> (header/footer are <header>/<footer> elements and are
 *        NOT `.wp-block-group`, so they can never be matched here and their
 *        centered 1340px chrome stays put);
 *   (ii) the two concrete blocks that carry the width on our pages: the
 *        article's `.wp-block-columns.alignwide` and the home category grid
 *        (stable BetterDocs class names);
 *   (iii) the generated container class the user verified in devtools.
 * Horizontal breathing room still comes from the 24px root padding content.css
 * puts on .wp-site-blocks, so nothing touches the viewport edge.
 * ------------------------------------------------------------------------- */

/* (i) generic */
.wp-site-blocks > .wp-block-group.has-background.is-layout-flow
  > .wp-block-group.is-layout-constrained > *,
.wp-site-blocks > main.wp-block-group
  > .wp-block-group.is-layout-constrained > *,
.wp-site-blocks > .wp-block-group.is-layout-flow:not(.has-background)
  > .wp-block-group.is-layout-constrained > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* (ii) the concrete width-carrying blocks */
.wp-site-blocks .wp-block-columns.alignwide,
.wp-site-blocks .betterdocs-category-grid-wrapper.betterdocs-blocks-grid {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto;
}

/* (iii) the generated container class confirmed in devtools */
.wp-container-core-group-is-layout-6
  > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.wp-container-core-group-is-layout-6 > .alignwide {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}