/* Sitewide `details { width: 95%; }` (paragraph-details.css) is left-aligned
 * with no margin: auto, which is fine for other, non-centered accordion
 * widgets but leaves this component's outer panel shifted left with a gap
 * on the right and, once the inner panel inherited the same 95% independently,
 * a second uncentered gap nested inside that. Centering is done once, at the
 * outer AND inner <details> - both class selectors below have higher
 * specificity than the bare `details` element selector, so they win
 * regardless of source order, without touching the shared sitewide rule. */
.dgcoks-nested-accordion__outer {
  width: auto;
  max-width: 85%;
  margin: 0 auto 0.5rem;
  /* Buffer above the panel when nested-accordion.js scrolls it into view
   * after a sibling collapses, so it doesn't land flush against the
   * viewport's top edge. scroll-margin-top only affects scroll positioning,
   * not layout. */
  scroll-margin-top: 200px;
}

.dgcoks-nested-accordion__inner {
  width: auto;
  scroll-margin-top: 200px;
}

.dgcoks-nested-accordion__outer-body {
  background-color: #e5edf0;
  padding: 25px;
  /* Without this, the first/last .dgcoks-nested-accordion__inner's
   * top/bottom margins collapse through this element's edges. No longer
   * load-bearing now that this element has its own padding on every side,
   * but left in place since it's harmless and this element may go back to
   * being border/padding-free in the future. */
  display: flow-root;
}

.dgcoks-nested-accordion__inner-body {
  padding: 10px;
}

.dgcoks-nested-accordion__row {
  padding: 0.25rem 0;
}

/*
 * The <details>/<summary> elements themselves are intentionally left
 * unstyled here - dougcty_theme/css/components/paragraph-details.css
 * (loaded sitewide via the dougcty_theme/global-styling library) already
 * styles bare `details` / `details summary` elements, so both accordion
 * levels inherit that look automatically with no scoped override needed.
 *
 * One exception: that sitewide rule also sets an open-state summary
 * background (details[open] summary { background-color: rgb(211, 239,
 * 248); }) - not wanted here. Overridden below, scoped to this component
 * only, rather than editing the shared theme file (which would change it
 * for every other details/accordion widget sitewide).
 */
.dgcoks-nested-accordion details[open] summary {
  background-color: transparent;
  border-bottom: 1px solid #bebebe;
}

/* Active/open-panel indicator: left accent border, matching the existing
 * left-bar accent pattern used elsewhere in Documents Hub (e.g. the
 * Document Type label in views-view-policy-hub.css). Child (inner) panels
 * get a distinct accent color from the outer/parent panel so the two
 * nesting levels stay visually distinguishable when both are open. */
.dgcoks-nested-accordion details.dgcoks-nested-accordion__outer[open] {
  border-left: 4px solid #135B64;
}

.dgcoks-nested-accordion details.dgcoks-nested-accordion__inner[open] > summary {
  background-color: #e7f3fc;
}