/* ============================
   Toggle
============================ */

.toggle {
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  overflow: hidden; /* important */
  margin: 30px 0px 30px 0px;
}

/* Make summary full clickable block */
.toggle summary {
  cursor: pointer;
  padding: 1.2rem 1.4rem;   /* moved padding here */
  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: #1a1a1a;
}

/* Arrow */
.arrow {
  transition: transform 0.2s ease;
}

.toggle[open] .arrow {
  transform: rotate(90deg);
}

/* Content area */
.toggle-content {
  padding: 1.5rem;
  border-top: 1px solid #222;
}