/* ===== Accordion Card Container ===== */
div[id$="nl"] {
  /* margin-bottom: 10px; */
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden; /* ensures corners look neat when toggling */
}

/* ===== Heading Row (clickable) ===== */
div[id$="nl"] .sectionhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 15px 20px;
  background-color: #ffffff;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  position: relative;
}

/* Right arrow (collapsed state) */
div[id$="nl"] .sectionhead::after {
  content: "";
  position: absolute;
  right: 20px;
  width: 24px; /* adjust size as needed */
  height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg width='64px' height='64px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><g id='SVGRepo_bgCarrier' stroke-width='0'></g><g id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'></g><g id='SVGRepo_iconCarrier'><path d='M19 9L14 14.1599C13.7429 14.4323 13.4329 14.6493 13.089 14.7976C12.7451 14.9459 12.3745 15.0225 12 15.0225C11.6255 15.0225 11.2549 14.9459 10.9109 14.7976C10.567 14.6493 10.2571 14.4323 10 14.1599L5 9' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'></path></g></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.3s ease;
}


/* Rotate arrow when expanded */
div[id$="nl"] .sectionhead.expanded::after {
  transform: rotate(-180deg);
}

/* ===== Collapsible Content Container ===== */
div[id$="nl"] .newsletter-items {
  /* We want a flex layout inside here when open: */
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  /* Start collapsed: */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;

  /* Optional padding for the interior (we can add it dynamically below) */
  padding: 0 20px;
}

/* When expanded, set max-height large enough to show all items */
div[id$="nl"] .newsletter-items.expanded {
  /* If you want top/bottom padding only when expanded, set it here: */
  padding: 0px 20px 20px;
  max-height: 5000px; /* or 9999px, just bigger than any possible content height */
}

span.sectionhead.expanded {
    background: #f7fafd;
}