.toggle {
  /* Local CSS variables */
  --toggle-bg: #111;
  --toggle-border: #222;
  --toggle-border-radius: 12px;
  --toggle-hover-bg: #1a1a1a;
  --toggle-padding-y: 1.2rem;
  --toggle-padding-x: 1.4rem;
  --toggle-content-padding: 0px 20px 0px 20px;
  --toggle-arrow-rotate: 90deg;
  --toggle-transition-duration: 0.2s;
  --toggle-border-width: 1px;
  
  background: var(--toggle-bg);
  border: var(--toggle-border-width) solid var(--toggle-border);
  border-radius: var(--toggle-border-radius);
  overflow: hidden; /* important */
  margin: 30px 0px 30px 0px;
}


/* --- LIGHT THEME OVERRIDES --- */
html.light .toggle {
  --toggle-bg: #ffffff;
  --toggle-border: #C9C1A8;
  --toggle-hover-bg: #EAE5D6;
}

/* Make summary full clickable block */
.toggle summary {
  cursor: pointer;
  padding: var(--toggle-padding-y) var(--toggle-padding-x);
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}

/* Remove default arrow */
.toggle summary::-webkit-details-marker {
  display: none;
}

/* Hover effect across whole area */
.toggle summary:hover {
  background: var(--toggle-hover-bg);
}

/* Arrow */
.arrow {
  transition: transform var(--toggle-transition-duration) ease;
}

.toggle[open] .arrow {
  transform: rotate(var(--toggle-arrow-rotate));
}

/* Content area */
.toggle-content {
  padding: var(--toggle-content-padding);
  border-top: var(--toggle-border-width) solid var(--toggle-border);
}