@layer components;

/* =============== ACCORDION MODULE =============== */

/* scoped reset inside accordion */
.accordion__section *,
.accordion__section *::before,
.accordion__section *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.accordion__section {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var( --font-size-body-sm);          
  color: var(--color-text);
  line-height: var(--line-height-normal);
}

/* heading inside accordion */
.accordion__section h2 {
  font-size: var( --font-size-h4);               
  font-weight: var(--font-weight-regular);
}

/* title row */
.accordion__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: var(--spacing-2) 0;
  padding: var(--spacing-2) 0;
  background-color: var(--secondary-color-light-10); 
  border-left: 2px solid var(--primary-color); 
}

/* title text block */
.accordion__title__text {
  margin: 0;
  padding: var(--spacing-2) var(--spacing-4);
}

/* toggle icon/button (styled as H2 in original) */
h2.accordion__toggle {
  margin: 0 var(--spacing-4);
  padding: 0;
  font-size: var( --font-size-h1);               
  color: var(--primary-color);           
  transition: all var(--transition-fast);
  line-height: 1;                        
  cursor: pointer;
}

.accordion__toggle.open {
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
}

/* content panel */
.accordion__content {
  margin: 0;
  padding: 1em 2em;                     
}