/*
   * APL accordion design system
   *
   * Supported markup:
   * 1. Legacy Views accordions: h2.section-heading + .details
   * 2. Direct exhibit accordions: button.usa-accordion__button + .exhibit-list--more
   * 3. Wrapped USWDS accordions: .usa-accordion__heading + .usa-accordion__content
   *
   * Form disclosures, including the Filter control on /digital/all, intentionally
   * retain their component-specific USWDS presentation.
   */

  .accordion,
  button.usa-accordion__button,
  .usa-accordion__content {
    --accordion-text: #22254e;
    --accordion-border: #d5d6e2;
    --accordion-accent: #66c594;
  }

  /* Legacy accordion container and item divider. */
  .accordion {
    background-color: transparent !important;
    padding-block: 0;
  }

  .accordion :is(section, div):has(> h2.section-heading + .details) {
    border-bottom: 1px solid var(--accordion-border);
  }

  /* Shared heading treatment for legacy accordions. */
  .accordion h2.section-heading {
    position: relative;
    margin: 0 !important;
    padding: 1.375rem 7rem 1.375rem 0 !important;
    border: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    background-position: initial !important;
    background-repeat: no-repeat !important;
    background-size: initial !important;
    color: var(--accordion-text) !important;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
  }

  /*
   * Shared heading treatment for both USWDS structures.
   * The structural selectors keep this from affecting unrelated buttons.
   */
  button.usa-accordion__button:has(
      + .exhibit-list--more.usa-accordion__content
    ),
  .usa-accordion__heading:has(+ .usa-accordion__content)
    > button.usa-accordion__button {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 1.375rem 3rem 1.375rem 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--accordion-border) !important;
    background-color: transparent !important;
    background-image: none !important;
    background-position: initial !important;
    background-repeat: no-repeat !important;
    background-size: initial !important;
    color: var(--accordion-text) !important;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  /* Underline headings only while hovered. */
  .accordion h2.section-heading:hover,
  button.usa-accordion__button:hover:has(
      + .exhibit-list--more.usa-accordion__content
    ),
  .usa-accordion__heading:has(+ .usa-accordion__content)
    > button.usa-accordion__button:hover {
    text-decoration-line: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: auto;
  }

  /* Replace existing icons with one consistent chevron. */
  .accordion h2.section-heading::after,
  button.usa-accordion__button:has(
      + .exhibit-list--more.usa-accordion__content
    )::after,
  .usa-accordion__heading:has(+ .usa-accordion__content)
    > button.usa-accordion__button::after {
    position: absolute;
    top: 50%;
    right: 0.375rem;
    width: 0.625rem;
    height: 0.625rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    background: none !important;
    content: "";
    transform: translateY(-65%) rotate(45deg);
    transition:
      color 150ms ease,
      transform 200ms ease;
  }

  /* Point the chevron upward when expanded. */
  .accordion h2.section-heading[aria-expanded="true"]::after,
  button.usa-accordion__button[aria-expanded="true"]:has(
      + .exhibit-list--more.usa-accordion__content
    )::after,
  .usa-accordion__heading:has(+ .usa-accordion__content)
    > button.usa-accordion__button[aria-expanded="true"]::after {
    transform: translateY(-35%) rotate(225deg);
  }

  /* Accent the chevron on hover. */
  .accordion h2.section-heading:hover::after,
  button.usa-accordion__button:hover:has(
      + .exhibit-list--more.usa-accordion__content
    )::after,
  .usa-accordion__heading:has(+ .usa-accordion__content)
    > button.usa-accordion__button:hover::after {
    color: var(--accordion-accent);
  }

  /*
   * Administrative edit link in legacy accordions:
   * position it immediately before the chevron.
   */
  .accordion h2.section-heading > a {
    position: absolute;
    top: 50%;
    right: 2.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: 1;
    text-decoration: none !important;
    transform: translateY(-50%);
  }

  .accordion h2.section-heading > a span {
    position: static !important;
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.25rem 0.5rem !important;
    border: 1px solid currentColor;
    border-radius: 2px;
    font-size: 0.875rem !important;
    font-weight: 500;
    line-height: 1 !important;
    text-decoration: none !important;
  }

  /* Shared panel treatment for all supported accordion structures. */
  .accordion h2.section-heading + .details,
  button.usa-accordion__button
    + .exhibit-list--more.usa-accordion__content,
  .usa-accordion__heading:has(> button.usa-accordion__button)
    + .usa-accordion__content {
    max-width: 80ch;
    margin: 0 !important;
    padding: 0.25rem 0 2rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--accordion-border) !important;
    background-color: transparent !important;
    color: var(--accordion-text);
    font-size: 1rem;
    line-height: 1.6;
    transform-origin: top;
  }

  /* The legacy item wrapper already supplies its bottom divider. */
  .accordion h2.section-heading + .details {
    border-bottom: 0 !important;
  }

  /*
   * Compatibility overrides for legacy theme rules that also use !important.
   * Repeating the component class raises specificity without affecting
   * elements outside the two accordion patterns.
   */
  body .accordion h2.section-heading.section-heading {
    padding: 1.375rem 7rem 1.375rem 0 !important;
    background: transparent !important;
  }

  body
    button.usa-accordion__button.usa-accordion__button:has(
      + .exhibit-list--more.usa-accordion__content
    ),
  body
    .usa-accordion__heading:has(+ .usa-accordion__content)
    > button.usa-accordion__button.usa-accordion__button {
    padding: 1.375rem 3rem 1.375rem 0 !important;
    background: transparent !important;
  }

  /*
   * Some staged legacy records retain the .active class while their
   * accessible state is closed. Keep aria-expanded and hidden authoritative
   * even when an older .active + .details rule also uses !important.
   */
  body
    .accordion
    h2.section-heading[aria-expanded="false"]
    + .details.details,
  body .accordion h2.section-heading + .details.details[hidden] {
    display: none !important;
  }

  /* Move the USWDS divider from an expanded heading to its open panel. */
  button.usa-accordion__button[aria-expanded="true"]:has(
      + .exhibit-list--more.usa-accordion__content
    ),
  .usa-accordion__heading:has(+ .usa-accordion__content)
    > button.usa-accordion__button[aria-expanded="true"] {
    border-bottom-color: transparent !important;
  }

  /* Open panels. */
  .accordion h2.section-heading[aria-expanded="true"]
    + .details:not([hidden]),
  button.usa-accordion__button[aria-expanded="true"]
    + .exhibit-list--more.usa-accordion__content:not([hidden]),
  .usa-accordion__heading:has(
      > button.usa-accordion__button[aria-expanded="true"]
    )
    + .usa-accordion__content:not([hidden]) {
    display: block !important;
    animation: apl-accordion-open 260ms cubic-bezier(0.2, 0, 0, 1);
  }

  /* Closed panels. The hidden attribute remains authoritative. */
  .accordion h2.section-heading[aria-expanded="false"] + .details,
  .accordion h2.section-heading + .details[hidden],
  button.usa-accordion__button[aria-expanded="false"]
    + .exhibit-list--more.usa-accordion__content,
  button.usa-accordion__button
    + .exhibit-list--more.usa-accordion__content[hidden],
  .usa-accordion__heading:has(
      > button.usa-accordion__button[aria-expanded="false"]
    )
    + .usa-accordion__content,
  .usa-accordion__heading:has(> button.usa-accordion__button)
    + .usa-accordion__content[hidden] {
    display: none !important;
  }

  /* Consistent paragraph spacing inside all accordion panels. */
  .accordion .details p,
  button.usa-accordion__button
    + .exhibit-list--more.usa-accordion__content
    p,
  .usa-accordion__heading:has(> button.usa-accordion__button)
    + .usa-accordion__content
    p {
    margin-top: 0;
    margin-bottom: 1.25rem;
  }

  .accordion .details p:last-child,
  button.usa-accordion__button
    + .exhibit-list--more.usa-accordion__content
    p:last-child,
  .usa-accordion__heading:has(> button.usa-accordion__button)
    + .usa-accordion__content
    p:last-child {
    margin-bottom: 0;
  }

  @keyframes apl-accordion-open {
    from {
      opacity: 0;
      transform: translateY(-0.4rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Consistent keyboard focus indicator. */
  .accordion h2.section-heading:focus-visible,
  button.usa-accordion__button:focus-visible:has(
      + .exhibit-list--more.usa-accordion__content
    ),
  .usa-accordion__heading:has(+ .usa-accordion__content)
    > button.usa-accordion__button:focus-visible {
    outline: 3px solid var(--accordion-accent) !important;
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .accordion h2.section-heading[aria-expanded="true"]
      + .details:not([hidden]),
    button.usa-accordion__button[aria-expanded="true"]
      + .exhibit-list--more.usa-accordion__content:not([hidden]),
    .usa-accordion__heading:has(
        > button.usa-accordion__button[aria-expanded="true"]
      )
      + .usa-accordion__content:not([hidden]) {
      animation: none;
    }
  }

  @media (max-width: 767px) {
    body .accordion h2.section-heading.section-heading {
      padding: 1.125rem 6.5rem 1.125rem 0 !important;
    }

    body
      button.usa-accordion__button.usa-accordion__button:has(
        + .exhibit-list--more.usa-accordion__content
      ),
    body
      .usa-accordion__heading:has(+ .usa-accordion__content)
      > button.usa-accordion__button.usa-accordion__button {
      padding: 1.125rem 3rem 1.125rem 0 !important;
    }

    .accordion h2.section-heading + .details,
    button.usa-accordion__button
      + .exhibit-list--more.usa-accordion__content,
    .usa-accordion__heading:has(> button.usa-accordion__button)
      + .usa-accordion__content {
      padding-bottom: 1.5rem !important;
    }
  }