/* Site-wide layout overrides for kungfujones.com.
 *
 * Material caps content width at ~1200px and reserves a right sidebar
 * for the in-page TOC. Both are correct for prose pages but squeeze
 * the wide results matrix on the home page. The rules below relax the
 * width cap, hide the TOC sidebar, and let the DataTables plugins
 * (scrollX, FixedColumns, FixedHeader) drive the matrix layout.
 *
 * The table's id in docs/index.md is `matrix-table` (hyphen); we
 * target that here. */

/* Remove Material's 1200px content cap so wide content can breathe. */
body[data-md-color-scheme] .md-grid {
    max-width: none;
}

/* Hide the right-side in-page TOC sidebar. The home page has little
 * structure for the TOC to expose, and the table needs the room. */
.md-sidebar--secondary {
    display: none !important;
}

/* Hide the LEFT primary sidebar too. The previous fix only hit the
 * secondary sidebar; the primary one continued to render the section
 * navigation AND (because `toc.integrate` is enabled in mkdocs.yml's
 * theme features) the page's table of contents — "Home | Where to
 * go next" was the page-H2 TOC entry showing up there. Inspecting
 * the rendered DOM confirms `<aside class="md-sidebar md-sidebar--primary">`
 * is present and Material sets it as a flex item with no inline width
 * cap, so a single `display: none` is enough — no specificity battle
 * with Material's own rules. */
.md-sidebar--primary {
    display: none;
}

/* DataTables with scrollX:true wraps the table in its own scrolling
 * `.dataTables_scrollBody` — let *that* be the only horizontal
 * scroller. (The previous v2 rule put overflow-x:auto on
 * `.dataTables_wrapper`, which fought FixedColumns once it was
 * enabled.) */
.dataTables_wrapper {
    overflow-x: visible;
}

/* Make the matrix table use the full available width. */
#matrix-table {
    width: 100% !important;
}

/* FixedHeader: z-index + top offset to clear Material's app bar.
 *
 * Measured directly from site/assets/stylesheets/main.*.min.css:
 *   .md-header { position: sticky; top: 0; z-index: 4; height: 2.4rem }
 *   .md-tabs   { z-index: 3; height: 2.4rem; (no position rule — STATIC) }
 *
 * So only the header is sticky. The tabs row scrolls away with the
 * page. Once the user scrolls far enough that the table's natural
 * header would leave the viewport, the tabs row has already left;
 * only the 2.4 rem header remains pinned to viewport top.
 *
 * v6's `top: 4.8rem` assumed both bars were sticky and left a
 * ~38 px dead-zone gap between Material's header and the floating
 * clone — that's the "lands in the middle of the page" symptom
 * the user reported. The correct offset is 2.4 rem (~38 px).
 *
 * Earlier (v3) used `z-index: 3` to keep nav above the floating
 * header, which made the clone invisible behind Material's
 * z-index: 4 header. v6 correctly lifted to z-index: 100 — kept.
 *
 * Plugin emits two class layers:
 *   .dtfh-floatingparent  (outer wrapper holding the cloned table)
 *   .fixedHeader-floating / .fixedHeader-locked  (the table element
 *     itself, while floating or locked respectively)
 * Confirmed from `grep "dtfh\|fixedHeader" datatables.fixedHeader.min.js`.
 *
 * !important is needed because the plugin writes inline styles for
 * top / left / z-index on the table at scroll time. */
.dtfh-floatingparent,
.fixedHeader-floating,
.fixedHeader-locked {
    z-index: 100 !important;
    top: 2.4rem !important;
}

/* The cloned header rows are positioned over scrolled content, so they
 * need an opaque background of their own — otherwise the page content
 * shows through. Use Material's CSS var so the rule respects the
 * active light/dark scheme. */
.dtfh-floatingparent,
.dtfh-floatingparent table,
.dtfh-floatingparent thead,
.dtfh-floatingparent thead th,
.fixedHeader-floating,
.fixedHeader-floating thead,
.fixedHeader-floating thead th {
    background-color: var(--md-default-bg-color) !important;
}

/* FixedColumns shadow tweak — Material's table styling fights the
 * default plugin shadow. Replace with a soft right-edge shadow on the
 * locked left columns so the eye can tell what's sticky. */
table.dataTable th.dtfc-fixed-left,
table.dataTable td.dtfc-fixed-left {
    background-color: var(--md-default-bg-color, #fff) !important;
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.15);
}

/* Sticky bottom scrollbar proxy element (created by JS in
 * docs/index.md::installStickyScrollbar). The inline styles handle
 * the layout; this block tunes the appearance so the scrollbar is
 * visible in both light and dark schemes. */
.sticky-x-scrollbar {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04) !important;
}
[data-md-color-scheme="slate"] .sticky-x-scrollbar {
    background: rgba(255, 255, 255, 0.06) !important;
    border-top-color: rgba(255, 255, 255, 0.12);
}