/* Modernized details box */
details {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: #fefefe;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s, transform 0.2s;
}

details:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* Summary styling */
summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none; /* remove default marker */
  position: relative;
  padding-left: 25px;
  font-size: 1.05rem;
  color: #333;
  user-select: none;
  transition: color 0.3s;
}

summary:hover {
  color: #0748AB; /* subtle highlight on hover */
}

/* Arrow indicator */
summary::before {
  content: "▶"; /* arrow symbol */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s, color 0.3s;
  color: #0748AB;
  font-size: 0.85em;
}

/* Rotate arrow when open */
details[open] summary::before {
  transform: translateY(-50%) rotate(90deg);
  color: #0748AB;
}

/* Paragraph styling inside details */
details p {
  margin-top: 12px;
  line-height: 1.7;
  font-size: 0.95rem;
  color: #555;
  transition: color 0.3s;
}