/**
 * @file
 * Custom overrides for Bootstrap accordions.
 * Synchronized with the Slate and Teal theme.
 */

 .accordion {
  /* 1. Global Variable Overrides */
  --bs-accordion-border-color: rgba(var(--mt-color-base-value), 0.1);
  --bs-accordion-border-radius: 8px;
  --bs-accordion-inner-border-radius: 7px;

  /* Active (Open) State Variables */
  --bs-accordion-active-bg: var(--mt-color-primary);
  --bs-accordion-active-color: var(--mt-color-primary-contrast);

  /* Button (Header) Variables */
  --bs-accordion-btn-color: var(--mt-color-base-dark);
  --bs-accordion-btn-bg: rgba(var(--mt-color-base-value), 0.05);
  /* Keyboard focus is the site-wide ring in css/base/a11y.css; Bootstrap's
     glow would draw a second indicator. */
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-focus-border-color: var(--uoa-color-focus-ring);
}

/* 2. Accordion Item Spacing */
.accordion-item {

  border:none!important;
  overflow: hidden;
}

/* 3. The Accordion Button (Header) */
.accordion-button {
  font-weight: 700;
  transition: all 0.2s ease-in-out;
}

/* Hover state for collapsed items */
.accordion-button:hover:not(.active) {
  background-color: rgba(var(--mt-color-primary-value), 0.1);
  color: var(--mt-color-primary);
}

/* 4. The Icon (Arrow) Color Fix */
/* When active, make the arrow white to match the text */
.accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}

/* 5. The Accordion Body */
.accordion-collapse {
  border: 1px solid var(--bs-accordion-btn-bg);
  border-top: 0;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  background-color: #ffffff;
  line-height: 1.6;
}

.accordion-button:hover:not(.collapsed)::after {
  filter: none;
}