/*
 * Items open menu — SD-55
 * Figma: content modules / items open menu (node 6503-60193)
 * Expandable menu group: header toggle button (+/×) + sub-item links.
 */

.dk-menu-item {
  background-color: var(--dk-color-brand-secondary-01); /* pink */
}

.dk-menu-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dk-space-04);
  inline-size: 100%;
  min-block-size: 2.75rem;      /* 44px */
  padding: var(--dk-space-01);  /* 8px all sides, Figma: spacing-01 */
  background: none;
  color: var(--dk-color-black);
  cursor: pointer;
  text-align: start;
}

.dk-menu-item-label {
  font-weight: var(--dk-font-weight-semibold, 600);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.2s ease;
}

.dk-menu-item-toggle {
  display: inline-flex;
  flex-shrink: 0;
  inline-size: 1.5rem;  /* 24px */
  block-size: 1.5rem;
  transition: transform 0.3s ease;
}

.dk-menu-item-header[aria-expanded="true"] .dk-menu-item-toggle {
  transform: rotate(45deg);
}

.dk-menu-item-toggle svg { display: block; inline-size: 100%; block-size: 100%; }

.dk-menu-item-toggle-open { display: inline-flex; inline-size: 100%; block-size: 100%; }
.dk-menu-item-toggle-close { display: none; }

.dk-menu-item-header:hover .dk-menu-item-label,
.dk-menu-item-header:active .dk-menu-item-label {
  text-decoration-color: currentColor;
}

.dk-menu-item-header:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--dk-color-black),
    0 0 0 4px var(--dk-color-white),
    0 0 0 8px var(--dk-color-focus);
}

/* Sub-items */
.dk-menu-item-sub {
  margin: 0;
  padding: 0;
  padding-block-start: var(--dk-space-03);  /* 12px */
  padding-block-end: var(--dk-space-04);    /* 20px */
  padding-inline-start: var(--dk-space-03); /* 12px */
  list-style: none;
}

.dk-menu-subitem {
  display: block;
  min-block-size: 2.75rem;
  padding: var(--dk-space-00); /* 4px, Figma: components/items open menu "sub/item" — flush left, no indent */
  color: var(--dk-color-black);
  text-decoration: none;
}

.dk-menu-subitem {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.2s ease;
}

.dk-menu-subitem:hover,
.dk-menu-subitem:active {
  text-decoration-color: currentColor;
}

.dk-menu-subitem[aria-current] {
  font-weight: var(--dk-font-weight-semibold, 600);
  text-decoration: underline;
}

.dk-menu-subitem:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--dk-color-black),
    0 0 0 4px var(--dk-color-white),
    0 0 0 8px var(--dk-color-focus);
}

@media (prefers-reduced-motion: reduce) {
  .dk-menu-item-toggle,
  .dk-menu-item-label,
  .dk-menu-subitem {
    transition: none;
  }
}