/* === CV "Accordion" styles === */

.accordion-section {
  margin: 2rem 0rem;
  border-top: 1px solid #ccc;
  padding-top: 1rem;
}

.accordion-toggle {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1.1rem;
  text-align: left;
  padding: 0.75rem 1rem;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.2s ease;

  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-icon {
  transform: rotate(0deg);
  margin-left: 0.5rem;
/* Animated version */
/* display: inline-block;
   transition: transform 0.3s ease;
   font-size: 1rem; */
}

/* When expanded, rotate the icon */
.accordion-toggle[aria-expanded='true'] .accordion-icon {
  transform: rotate(180deg);
}

.accordion-toggle:hover,
.accordion-toggle:focus {
  background-color: #eaeaea;
  outline: none;
}

.accordion-panel {
  padding: 1rem 1.5rem;
  background-color: #fff;
  border-left: 2px solid #ccc;
  margin-top: 0.5rem;
  font-size: 1.25rem;
}

.accordion-panel ul {
  list-style-type: disc;
  padding: 0rem 0rem 1rem 1rem;
  margin: 0rem;
  text-align: left;
}

.accordion-toggle {
  background: none;
  border: none;
  font-size: 1rem;
  color: #b73626;
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
}

.accordion-toggle:hover {
  color: #8c291c;
}

.accordion-panel {
  margin-top: 1rem;
  padding-left: 0.5rem;
  border-left: 4px solid #b73626;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === RESPONSIVE BREAKPOINTS === */
@media (max-width: 21.25rem) {
  .accordion-panel {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
  }
  .accordion-panel ul {
	list-style: none; /* hides default bullet */
  }
}