/**
 * @file
 * Collapsible item styles.
 */

/* General spacing between collapsible items */
.collapsible__item+.collapsible__item {
  margin-top: var(--spacing-lg);
}

/* Trigger container styles */
.collapsible__trigger {
  margin-bottom: 0;
  z-index: 10;
  position: relative;
}

/* Base styles for the trigger button */
.collapsible__trigger-button {
  background: var(--accordion-header-background);
  color: var(--accordion-header-color);
  width: 100%;
  appearance: none;
  border: none;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-md) var(--spacing-lg);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Styles for the icon container within the button */
.collapsible__trigger-icon {
  padding-left: var(--spacing-xs);
  display: flex;
  align-items: center;
}

/* Styling for the SVG icon */
.collapsible__trigger-icon .icon svg {
  fill: var(--accordion-header-color);
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  transition: transform 0.3s ease, fill 0.2s ease;
}

/* Hover and Focus states for the trigger button */
.collapsible__trigger-button:hover,
.collapsible__trigger-button:focus {
  background: var(--accordion-header-background-hover);
  text-decoration: none;
  outline: none;
}

/* Icon fill color on button hover/focus */
.collapsible__trigger-button:hover .collapsible__trigger-icon .icon svg,
.collapsible__trigger-button:focus .collapsible__trigger-icon .icon svg {
  fill: var(--accordion-header-color-hover);
}

/* Styles when the button is expanded */
.collapsible__trigger-button[aria-expanded="true"] {
  background: var(--accordion-header-background);
  color: var(--accordion-header-color);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Icon rotation and fill when button is expanded */
.collapsible__trigger-button[aria-expanded="true"] .collapsible__trigger-icon svg {
  fill: var(--accordion-header-color);
  transform: rotate(180deg);
}

/* Collapsible content area */
.collapsible__response {
  background: var(--accordion-content-background);
  padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-lg);
  color: var(--accordion-content-color);
  border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
  margin-top: calc(var(--border-radius-base) * -1);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-block: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding-block 0.3s ease-out;
}

/* Styles for when the content is shown/expanded */
.collapsible__response[aria-hidden="false"] {
  max-height: 500px;
  /* Adjust as needed */
  opacity: 1;
  padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-lg);
  transition: max-height 0.3s ease-in, opacity 0.3s ease-in, padding-block 0.3s ease-in;
}

/* Ensure inner content is visible when expanded */
.collapsible__response[aria-hidden="false"]>* {
  display: block;
}

/* Remove bottom margin from last paragraph in the content */
.collapsible__response p:last-child {
  margin-bottom: 0;
}

/* Link styling within the content */
.collapsible__response a {
  color: var(--accordion-link-color);
}

/* Styles for explicit expand/collapse text if present */
.collapsible__trigger-button[aria-expanded="true"] .expand,
.collapsible__trigger-button[aria-expanded="false"] .collapse {
  display: none;
}

.collapsible__trigger-button[aria-expanded="false"] .expand,
.collapsible__trigger-button[aria-expanded="true"] .collapse {
  display: block;
}