@charset "UTF-8";

.accordion {
  background-color: var(--bgblue);
  color: var(--fg);
  cursor: pointer;
  padding: 10px;
  width: 95%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add background color when active/hovered */
.accordion:hover,
.accordion.active {
  background-color: var(--blue);
}

/* Panel hidden by default */
/* CLOSED state: no space, no bg */
.panel {
  max-height: 0;
  overflow: hidden;
  padding: 0;          /* no vertical padding */
  margin: 0;           /* no margins */
  background: none;    /* hide the peach strip */
  transition: max-height .25s ease;
}

/* OPEN state (JS adds .is-open) */
.panel.is-open {
  background: var(--blueltlt);
  padding: 10px 18px;  /* restore padding only when open */
}


/* Default icons for accordions */
.accordion:after {
  content: '\0001F'; /*unicode placeholder*/
  font-size: 25px;
  color: var(--goldlt);
  float: right;
  margin-right: 0.5em;
}

.accordion.active:after {
  content: '\0001D';
}

/* Section-specific icons */
#writing .accordion:after { content: '\0270F'; }
#writing .accordion.active:after { content: '\0270D'; }

#design .accordion:after { content: '⏣'; }
#design .accordion.active:after { content: '📐'; }

#media .accordion:after { content: '🎬'; }
#media .accordion.active:after { content: '🎹'; }

/* Section-specific colors */
#media .accordion {
  background-color: var(--rust);
}

#media .accordion:hover,
#media .accordion.active {
  background-color: var(--rustdk);
}

#media .panel {
  background-color: var(--rustlt);
}

/* end of old */