/* custom.css */

/* Narrower article width only on the index page. The class `is-index`
   is added to the root element by `page_classer.js`, so the top nav
   and other theme chrome are not constrained.
*/
/* Ensure default article width is not artificially constrained for non-index pages */
.bd-main .bd-content .bd-article-container {
    max-width: none !important;
}

/* Narrower article width only on the index page. The class `is-index`
   is added to the root element by `page_classer.js`, so the top nav
   and other theme chrome are not constrained.
*/
/* index-specific narrowing is handled by the `.index-wrapper` element
   inside the index page content; avoid toggling layout via JS classes to
   prevent flashes when navigating between pages. */

/* Ensure highlight tables inside the code-pane wrap and don't cause
   horizontal scrolling. We target the Sphinx HTML structure generated
   when server-side line numbers are enabled (table.highlighttable). */
.code-pane table.highlighttable td.linenos pre,
.code-pane table.highlighttable td.code pre {
    white-space: pre-wrap !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Make the overall page container full width by default (override theme)
   so only the index page is constrained via `body.is-index`. */
.bd-page-width {
    max-width: none !important;
    width: auto !important;
}

/* Index-specific narrow layout: constrain only the article container, not the header */
/* The index uses an explicit .index-wrapper in the page source to control
   article width so the header/navbar remains full width and no layout
   flash occurs during navigation. */

/* Main layout overrides for code-with-comments pages */
.wy-nav-content {
    max-width: none !important; /* legacy override, harmless with PyData */
}

/* Container for the side-by-side view */
.code-comments-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-top: 1px solid #e1e4e5;
    margin-top: 24px;
}

/* Left pane for the source code */
.code-pane {
    flex: 1 1 50%;
    min-width: 0; /* allow shrinking inside flex container */
    box-sizing: border-box;
    padding-right: 1.5em;
    overflow-x: visible; /* allow wrapping, avoid horizontal scrollbar */
}

/* Right pane for the AI comments */
.comments-pane {
    flex: 1 1 50%;
    min-width: 400px; /* Prevent excessive squishing */
    box-sizing: border-box;
    padding-left: 1.5em;
    border-left: 1px solid #e1e4e5;

    /* Remove internal scrolling and stickiness; let page scroll instead */
    height: auto;
    position: static;
    overflow: visible;       /* no own scrollbar */
    overflow-x: hidden;      /* hide any accidental horizontal overflow */

    /* Better wrapping for long content */
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Ensure code blocks in the comments wrap lines instead of scrolling */
.comments-pane pre,
.comments-pane code,
.comments-pane .highlight {
    white-space: pre-wrap;   /* preserve but wrap */
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow-x: hidden;      /* no horizontal scrollbar inside code blocks */
}

/* Ensure code blocks in the code-pane wrap and don't create horizontal scroll */
.code-pane pre,
.code-pane code,
.code-pane .highlight {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow-x: visible;
}

/* Hide server-generated line numbers inside the code-with-comments view
   without collapsing their column width (prevents layout jumps). */
.code-comments-container .linenos,
.code-comments-container .linenodiv,
.code-comments-container td.linenos {
    /* keep the column space but hide the text */
    visibility: hidden !important;
}

/* Gutter + content layout for code-with-comments; adds line numbers */
.code-with-gutter {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
}
.code-gutter {
    padding-right: 0.75rem;
    color: #6c757d;
    user-select: none;
    -webkit-user-select: none;
}
.code-gutter .line-nums {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    font-family: monospace;
    font-size: 0.95em;
    line-height: 1.3;
    text-align: right;
}
.code-content-wrapper pre,
.code-content-wrapper code {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow-x: visible;
}

/* Controls for language switching */
.comments-controls {
    padding-bottom: 1em;
    border-bottom: 1px solid #e1e4e5;
    margin-bottom: 1em;
}

/* Language toggle styling to blend with PyData */
.lang-toggle {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
}
.cm-lang-btn {
    appearance: none;
    background: var(--pst-color-surface, #f8f9fa);
    color: var(--pst-color-text, #222);
    border: 1px solid var(--pst-color-border, #ced4da);
    padding: 0.2rem 0.6rem;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    line-height: 1.2;
}
.cm-lang-btn:hover {
    background: var(--pst-color-on-surface, #e9ecef);
}
.cm-lang-btn--active {
    background: var(--pst-color-primary, #0d6efd);
    color: #fff;
    border-color: var(--pst-color-primary, #0d6efd);
}

/* Improve contrast for language buttons in dark mode */
html[data-theme="dark"] .cm-lang-btn {
    background: #2a2f36;
    color: #d4d7db;
    border-color: #3a3f46;
}
html[data-theme="dark"] .cm-lang-btn:hover {
    background: #343a40;
}

/* Narrower primary sidebar (PyData) */
.bd-sidebar-primary {
    width: 240px;               /* default ~ 300px */
}
@media (min-width: 1200px) {
    .bd-sidebar-primary { width: 260px; }
}

/* Larger font in code and comments panels */
.code-pane pre, .code-pane code, .code-pane .highlight,
.comments-pane { font-size: 1rem; }  /* base up from default ~0.9 */

/* Slightly larger breadcrumbs */
.bd-breadcrumbs { font-size: 1.05rem; }

/* Styling for the error message when comments fail to load */
.comments-error {
    background-color: #fffbe6;
    border: 1px solid #ffe58f;
    padding: 1em;
    border-radius: 3px;
}

.comments-error code {
    background: #f0f0f0;
    padding: 0.2em 0.4em;
    border-radius: 3px;
}

/* Index-specific content wrapper (server-side) */
.index-wrapper {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}
.index-wrapper img {
    max-width: 100%;
    height: auto;
    cursor: zoom-in;
}

/* Image modal overlay */
.img-modal-overlay {
    display: none;
    position: fixed;
    inset: 0; /* top:0;right:0;bottom:0;left:0 */
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.img-modal-overlay.open { display: flex; }
.img-modal-overlay .img-modal-image {
    max-width: calc(100% - 4rem);
    max-height: calc(100% - 4rem);
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.img-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 2.25rem;
    line-height: 1;
    cursor: pointer;
}

/* Comments loading overlay to avoid layout flashes */
.comments-pane { position: relative; }
.comments-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.comments-loading-overlay.dark {
    background: rgba(0,0,0,0.5);
}
.comments-spinner {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 3px solid rgba(0,0,0,0.12);
    border-top-color: rgba(0,0,0,0.6);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Index-specific mobile/layout rules removed per user request.
   Removed selectors targeting `html.is-index`, `body.is-index`,
   and `:has(.index-wrapper)` which were causing mobile navigation to be
   rendered underneath page content on `index.html`. If you need any
   of these adjustments restored in a more targeted way, please specify.
*/
/* Fix: ensure mobile sidebar/search dialogs appear above index content
   ---------------------------------------------------------------
   On `index.html` the `.is-index` / :has() rules adjust stacking order
   for the article. That can cause the theme's mobile sidebar dialog (the
   element shown when pressing the hamburger button) to be rendered
   beneath the article so it appears that the hamburger does nothing.
   Ensure the dialog used by the theme is above the content. */
#pst-primary-sidebar-modal,
#pst-search-dialog {
    z-index: 100000 !important;
    position: relative; /* keep dialog layout predictable across browsers */
}

/* Increase backdrop stacking where supported so the overlay is clickable. */
#pst-primary-sidebar-modal::backdrop,
#pst-search-dialog::backdrop {
    z-index: 99999 !important;
}

/* MOBILE RESPONSIVENESS ADDED BY SCRIPT */
.bd-content img, .bd-content svg:not(.svg-inline--fa):not([class*="fa-"]) {
    max-width: 100%;
    height: auto;
}
.bd-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.bd-content table th, .bd-content table td {
    word-break: break-word;
    white-space: normal;
}
pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 860px) {
    .code-comments-container {
        flex-direction: column;
    }
    .code-pane, .comments-pane {
        flex: 1 1 100%;
        min-width: 0 !important;
        padding-left: 0;
        padding-right: 0;
    }
    .comments-pane {
        border-left: none;
    }
    .code-pane {
        padding-right: 0;
    }
    .code-pane pre, .comments-pane pre {
        white-space: pre-wrap;
        word-break: break-word;
    }
}


/* STRONG MOBILE WRAPPING FIXES */
/* These rules ensure that the main article content and headings will
   wrap on small viewports and that flex children may shrink below their
   intrinsic width. They are intentionally specific and use !important to
   override theme styles that cause unwrapped/overflowing content. */
.bd-main, .bd-page, .bd-page-width, .bd-content, .bd-article-container {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Force headings and inline text blocks to wrap instead of overflowing */
.bd-content h1, .bd-content h2, .bd-content h3, .bd-content h4,
.bd-content h5, .bd-content h6 {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
    text-overflow: clip !important;
    max-width: 100% !important;
}

/* Ensure paragraphs, lists and table cells can break long words / links */
.bd-content p, .bd-content li, .bd-content dd, .bd-content dt,
.bd-content blockquote, .bd-content td, .bd-content th, .bd-content figcaption {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* Limit only media/large inline svgs/tables to container width */
.bd-content img,
.bd-content picture,
.bd-content figure img,
.bd-content svg[role="graphics-document"],
.bd-content .mermaid,
.bd-content .diagram,
.bd-content table {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Do NOT apply max-width to small inline icons (e.g. Font Awesome) */
.bd-content svg.svg-inline--fa,
.bd-content svg[class*="fa-"],
.svg-inline--fa,
svg[class*="fa-"] {
    max-width: none !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.125em !important;
    overflow: visible !important;
}

/* On narrow screens, stack the code/comments panes and reduce paddings */
@media (max-width: 860px) {
    .code-comments-container {
        flex-direction: column !important;
    }
    .code-pane, .comments-pane {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .bd-content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}


/* SITE FOOTER: make single-line and hide copyright */
/* Ensure this selector is specific so it overrides theme defaults. */
footer, .footer, .pydata-footer, .bd-footer, .md-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    flex-wrap: nowrap !important; /* keep everything on one row */
    white-space: nowrap !important;
    padding: 0.5rem 1rem !important;
}

/* Hide typical copyright containers rendered by themes */
footer .copyright,
footer p.copyright,
.md-copyright,
.pydata-footer .copyright,
.pydata-footer__meta,
.md-footer-meta__inner .md-copyright,
.copyright {
    display: none !important;
}

/* Ensure social icons and small inline elements keep normal sizing */
footer svg.svg-inline--fa,
footer svg[class*="fa-"],
footer .social-icons svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* If footer content would otherwise overflow, allow horizontal scroll */
@media (max-width: 480px) {
    footer, .md-footer, .pydata-footer {
        overflow-x: auto !important;
    }
}

/* Navbar control alignment: ensure search and theme buttons sit side-by-side
   without overlapping. The PyData theme sometimes layers small control
   buttons; force a simple flex layout for the right-side header items so
   each control flows naturally and keeps a consistent gap. */
.navbar-header-items__end {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Ensure each item is an inline flexbox so icons/labels align vertically. */
.navbar-header-items__end .navbar-item {
    display: inline-flex !important;
    align-items: center !important;
}

/* Force the persistent search container to appear before other header items
   (explicit ordering avoids relying on DOM position which can vary). */
.navbar-header-items__end .navbar-persistent--container {
    order: 0 !important;
    margin-right: 0.5rem !important;
}

/* All other navbar items follow after the persistent search container. */
.navbar-header-items__end .navbar-item {
    order: 1 !important;
}

/* Tweak specific controls so they don't overlap: keep them positioned
   in the normal flow and give the theme toggle a small left gap. */
.navbar-header-items__end .search-button-field,
.navbar-header-items__end .theme-switch-button,
.navbar-header-items__end .pst-navbar-icon {
    position: relative !important;
    z-index: 20 !important; /* keep above content, but below overlays */
}
.navbar-header-items__end .theme-switch-button {
    margin-left: 0.25rem !important;
}

/* On narrow viewports reduce gaps to save space but keep ordering. */
@media (max-width: 767px) {
    .navbar-header-items__end {
        gap: 0.25rem !important;
    }
    /* Hide the textual 'Search' label on very small screens to avoid
       the search button growing so wide that it overlaps the theme toggle. */
    .search-button__default-text {
        display: none !important;
    }
}

/* Force right-hand header controls to stay on a single row and not wrap. */
.navbar-header-items__end {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    justify-content: flex-end !important;
}

/* Ensure the persistent search container and other header items do not
   expand to fill available space (prevents pushing the theme toggle down).
   Use fixed/flex sizing so items remain side-by-side. */
.navbar-header-items__end .navbar-persistent--container,
.navbar-header-items__end .navbar-item {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

/* Prevent the search button from growing too wide; clip long labels and
   keep icon visible. This keeps the toggle on the same line. */
.navbar-header-items__end .search-button-field {
    display: inline-flex !important;
    align-items: center !important;
    /* Limit width so it doesn't push the theme toggle to a new line. */
    max-width: 8rem !important; /* ~128px: adjust if you want wider */
    padding: 0.28rem 0.45rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Hide keyboard hint on narrow viewports to save space */
@media (max-width: 900px) {
    .navbar-header-items__end .search-button__kbd-shortcut { display: none !important; }
}


/* The temporary visual separator used for debugging has been removed.
   No persistent styles remain. */