/* Root variables for colors */
:root {
  --aiu-accordion-bg: #EEEEEE; /* Gray background for open content */
}

/* Basic resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Accordion container */
.accordion {
  display: flex;
  width: 100%;
  margin: 2rem auto;
  overflow: hidden;
}

/* Each panel */
.accordion-panel {
  flex: 1; /* Each panel is equal width by default */
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

/* The clickable button/trigger */
.accordion-trigger {
  font-family: var(--font-family);
  background-color: var(--aiu-blue-dark); /* Will be overridden by data-color in JS */
  color: #fff;
  padding: 1rem;
  width: 100%;
  height: 320px;
  font-size: var(--font-size-title-3);
  line-height: var(--line-height-title-3);
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Active state */
.accordion-panel.active .accordion-trigger {
  height: 100px;
}

/* Use nth-of-type to set background colors */
.accordion-panel:nth-of-type(1) .accordion-trigger {
  background-color: var(--aiu-blue-dark);
}
.accordion-panel:nth-of-type(2) .accordion-trigger {
  background-color: var(--aiu-blue-light);
}
.accordion-panel:nth-of-type(3) .accordion-trigger {
  background-color: var(--aiu-orange);
}

.accordion-panel[data-color="blue-dark"] .accordion-content .icon-svg svg {
  fill: var(--aiu-blue-dark);
}
.accordion-panel[data-color="blue-light"] .accordion-content .icon-svg svg {
  fill: var(--aiu-blue-light);
}
.accordion-panel[data-color="orange"] .accordion-content .icon-svg svg {
  fill: var(--aiu-orange);
}

/* Hover state */
.accordion-panel .accordion-trigger:hover {
 background-color: var(--aiu-gray); 
}
.accordion-panel .accordion-trigger:hover .icon-svg svg {
	fill: rgba(255,255,255,1);
}

.accordion-panel .accordion-trigger .icon-svg {width: 48px; height: auto; display:block; position: absolute; left: calc(50% - 24px); top: 50px; transition: all 0.2s ease;}
.accordion-panel .accordion-trigger .icon-svg svg {fill: rgba(255,255,255,0.5); transition: all 0.2s ease;}
.accordion-panel .accordion-trigger .accordion-title {display: block}

.accordion-panel.active .accordion-trigger .icon-svg {top: -60px;}

/* Accordion content area (closed by default) */
.accordion-content {
  background-color: var(--aiu-accordion-bg);
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  padding: 0 1rem; /* Only horizontal padding visible when expanded */
	position: relative;
}

.accordion-content .icon-svg {width: 48px; height: auto; display:block; position: absolute; left: calc(50% - 24px); top: 15px; cursor: pointer;}

.accordion-content ul ul {padding: 0.5rem 0 0 2rem;}
.accordion-content li {padding-bottom: 0.5rem;}
.accordion-content li:last-child {padding-bottom: 0;}
    

/* When panel is active, expand the content */
.accordion-panel.active .accordion-content {
  padding: 75px 20px 15px 20px;
	height:100%;
}

/* When panel is active, make it larger than the others */
accordion-panel.active {
  flex: 3; /* This panel will expand while others remain smaller */
}

/* --- Responsive (stacked) at max-width: 720px --- */
@media (max-width: 1024px) {
  .accordion {
    flex-direction: column;
  }
  .accordion-panel {
    flex: none;
    width: 100%;
  }
  .accordion-panel.active {
    flex: none;
    width: 100%;
  }
}