@charset "utf-8";
/* CSS Document */

/* 1. STATE: When the button is focused (clicked or tabbed into) */
.accordion-button:focus {
  border-color: #669933; /* Changes the thin border line */
  box-shadow: 0 0 0 0.25rem rgba(102, 153, 51, 0.25); /* Changes the glowing ring color */
	
}

/* 2. STATE: When the accordion panel is OPEN and ACTIVE */
.accordion-button:not(.collapsed) {
  background-color: #669933; /* Changes the inner background color when open */
  color: #f7fbfa; /* Changes the text color to white for contrast */
	
}

/* 3. COMBINED STATE: When the button is BOTH open and focused */
.accordion-button:not(.collapsed):focus {
  box-shadow: 0 0 0 0.25rem rgba(102, 153, 51, 0.25); /* FIX: Glow matches your custom green (#669933) */
	
}

/* Target the regular arrow element when the accordion opens */
.accordion-button:not(.collapsed)::after {
 
	
  
  /* Rotates your regular arrow 180 degrees to face up */
  transform: rotate(-180deg);
  
  /* Smooths out the rotation animation */
  transition: transform 0.2s ease-in-out; 
}


/* 1. STATE: When the button is focused (clicked or tabbed into) */
.accordion-button:focus {
  border-color: #669933; /* Changes the thin border line */
  box-shadow: 0 0 0 0.25rem rgba(102, 153, 51, 0.25); /* Changes the glowing ring color */
}

/* 2. STATE: When the accordion panel is OPEN and ACTIVE */
.accordion-button:not(.collapsed) {
  background-color: #669933; /* Changes the inner background color when open */
  color: #f7fbfa; /* Changes the text color to white for contrast */


}

/* 3. COMBINED STATE: When the button is BOTH open and focused */
.accordion-button:not(.collapsed)::focus {
  box-shadow: 0 0 0 0.25rem rgba(102, 153, 51, 0.25); /* Glow matches your custom green */
	color: white;
	
}

/* 4. ARROW STATE: Turns the arrow white when the tab is open */
.accordion-button:not(.collapsed)::after {
  /* Inverts the black icon to white instantly without breaking Bootstrap's native spin */
  filter: invert(100%) brightness(200%);
}

/* Forces white text on open, active, and focused states */
.accordion-item .accordion-button:not(.collapsed),
.accordion-item .accordion-button:not(.collapsed):focus,
.accordion-item .accordion-button:not(.collapsed):active {
    background-color: #669933 !important;
    color: #ffffff !important;
}