.bd-main .bd-content .bd-article-container {
  max-width: 100%;  /* default is 60em */
}

.bd-page-width {
  max-width: 100%;  /* default is 88rem */
}

/* ============================================================
 * Collapsible headers
 * Each h2-h6 section is automatically wrapped in a <details>
 * element by collapsible_headers.js. The rules below style
 * those wrappers. They use PyData Sphinx Theme CSS custom
 * properties (--pst-*) for colours, with plain hex fallbacks
 * for any browser that does not support the variables.
 * ============================================================ */

/* Outer <details> container: subtle border and rounded corners
 * to visually group the heading with its content. */
details.aviary-collapsible-section {
  margin-bottom: 0.75rem;
  border: 1px solid var(--pst-color-border, #d0d7de);
  border-radius: 0.3rem;
  background-color: var(--pst-color-surface, #ffffff);
}

/* <summary> bar that the user clicks to toggle the section open or closed.
 *
 * The summary contains two children arranged horizontally by flexbox:
 *   1. The disclosure triangle  (::before pseudo-element, defined below)
 *   2. The heading element      (h2–h6, moved here by collapsible_headers.js)
 *
 * Property-by-property explanation:
 *
 *   cursor: pointer
 *     Changes the mouse cursor to a hand on hover, making it obvious the
 *     bar is interactive — the same affordance used on <button> and <a>.
 *
 *   list-style: none
 *     Browsers (notably Firefox) render a <summary> with a list-item
 *     bullet by default.  This removes it so only our custom triangle
 *     is shown.
 *
 *   padding: 0.45rem 0.75rem
 *     Adds breathing room around the triangle and heading text so the
 *     click target is comfortable and the heading does not touch the
 *     border of the enclosing <details> box.
 *
 *   display: flex
 *     Switches the summary's layout to flexbox so its children (triangle
 *     and heading) can be placed side-by-side and aligned on the same
 *     baseline rather than flowing as inline text.
 *
 *   align-items: center
 *     Vertically centres the triangle and heading relative to each other.
 *     Without this the triangle would sit at the top of the summary bar
 *     when the heading text wraps to multiple lines.
 *
 *   gap: 0.45rem
 *     Adds a consistent small space between the triangle and the start
 *     of the heading text without needing margin on either element. */
details.aviary-collapsible-section > summary.aviary-collapsible-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.45rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* Remove the built-in WebKit disclosure triangle so our custom
 * ::before triangle is the only indicator shown. */
details.aviary-collapsible-section > summary.aviary-collapsible-summary::-webkit-details-marker {
  display: none;
}

/* Disclosure triangle drawn with a clip-path polygon rather than
 * a Unicode glyph.  A clip-path triangle fills its bounding box
 * precisely, so transform-origin: center center rotates around
 * the true visual centre of the triangle — something a text glyph
 * cannot guarantee because glyphs rarely fill their em-box evenly.
 *
 * The polygon() points describe a right-pointing triangle:
 *   top-left → right-middle → bottom-left
 *
 * When the section is open the triangle is rotated 90° to point
 * downward.  The CSS transition animates the rotation smoothly. */

 /* Insert a generated element at the very beginning of our custom summary bar,
  * but only when that summary bar sits directly inside our custom collapsible details block.
  * The ::before pseudo-element is what lets us draw the triangle purely in CSS without adding
  * any extra HTML markup.
*/
details.aviary-collapsible-section > summary.aviary-collapsible-summary::before {
  content: "";                        /* no text; shape comes from clip-path */
  flex-shrink: 0;                     /* never let the flex container squash it */
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--pst-color-text-muted, #57606a);
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%); /* right-pointing triangle */
  transform-origin: center center;    /* rotates around true geometric centre */
  transition: transform 0.15s ease-in-out;
  transform: rotate(90deg);           /* default (open) state: pointing down */
}

/* Closed state: triangle returns to pointing right (0°),
 * signalling that clicking will expand the section. */
/* The only property in this rule is transform: rotate(0deg), which returns
* the triangle to pointing right. Combined with the open-state rule above it
* (transform: rotate(90deg)), this is how the triangle animates between right (closed)
* and down (open) — the two rules define the two states, and the transition on the
* ::before element smoothly interpolates between them when open is added or removed.
*/
details.aviary-collapsible-section:not([open]) > summary.aviary-collapsible-summary::before {
  transform: rotate(0deg);
}

/* Heading elements inside <summary> fill the remaining width
 * (flex: 1) and have their default top/bottom margin removed
 * so the summary bar stays compact. */
details.aviary-collapsible-section > summary.aviary-collapsible-summary > h2,
details.aviary-collapsible-section > summary.aviary-collapsible-summary > h3,
details.aviary-collapsible-section > summary.aviary-collapsible-summary > h4,
details.aviary-collapsible-section > summary.aviary-collapsible-summary > h5,
details.aviary-collapsible-section > summary.aviary-collapsible-summary > h6 {
  display: block;
  margin: 0;
  flex: 1;
}

/* Body wrapper div that holds all section content below the
 * heading.  Padding keeps content from touching the container
 * edges while the top is left at 0 to sit flush with the summary. */
details.aviary-collapsible-section > .aviary-collapsible-body {
  padding: 0 0.9rem 0.9rem;
}