/* CSS Document 
Copyright (c) 2026 by Belspo (Guy Chaboteaux) (https://meri.belspo.be) */ 

.toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  text-align: left;
  background: #fafafa;
  border: 1px solid #bdbdbd;
  border-radius: 6px;
  padding: .6rem .75rem;
  cursor: pointer;
  font-weight: 600;
}

.toggle:hover {
		box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
	}
  
.toggle::before {
  content: "+";
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1.25rem;
  text-align: center;
  border-radius: 4px;
  background: #eee;
  color: #333;
  font-weight: 700;
  flex: 0 0 1.25rem;
}

.toggle[aria-expanded="true"]::before {
  content: "–";
  background: #e6f4ea;
}

.panel {
  display: none;
  padding: .5rem .75rem .75rem 2rem;
  border: 1px solid #bdbdbd;
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: #fff;
  animation: fadeIn .18s ease-in;
}

.panel[hidden] { display: none; }
.panel:not([hidden]) { display: block; }

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

/* Optional: visually link the button and panel as one card */
.group { margin-bottom: 1rem; margin-right: 10px;}
.group .toggle { border-radius: 6px 6px 0 0; }