/* ============================================================================
   MD3 Menu - Anchored Dropdown
   ============================================================================
   Compact dropdown menu for download options and similar use cases.
   Follows Material Design 3 Menu specification.
   
   Components:
   - .md3-download-menu: Container with trigger button and menu
   - .md3-menu: The dropdown menu itself
   - .md3-menu-item: Individual menu items
   
   Status: ✅ MD3-konform (uses --md-sys-* tokens)
   ============================================================================ */

/* Container for button + anchored menu */
.md3-download-menu {
  position: relative;
  display: inline-block;
}

/* The dropdown menu */
.md3-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: 100;
  min-width: 200px;
  max-width: 320px;
  padding: var(--space-2) 0;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-2);
  opacity: 1;
  transform: scaleY(1);
  transform-origin: top left;
  transition: 
    opacity 200ms cubic-bezier(0.2, 0, 0, 1),
    transform 200ms cubic-bezier(0.2, 0, 0, 1);
}

/* Hidden state */
.md3-menu--hidden {
  opacity: 0;
  transform: scaleY(0.9);
  pointer-events: none;
}

/* Right-aligned variant */
.md3-menu--right {
  left: auto;
  right: 0;
  transform-origin: top right;
}

/* Menu item */
.md3-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.25px;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.md3-menu-item:hover {
  background: var(--md-sys-color-surface-container-high);
}

.md3-menu-item:focus-visible {
  outline: none;
  background: var(--md-sys-color-surface-container-highest);
}

.md3-menu-item:active {
  background: var(--md-sys-color-surface-container-highest);
}

/* Menu item with icon */
.md3-menu-item .material-symbols-rounded {
  font-size: 20px;
  color: var(--md-sys-color-on-surface-variant);
}

/* Separator */
.md3-menu-separator {
  height: 1px;
  margin: var(--space-2) 0;
  background: var(--md-sys-color-outline-variant);
}

/* Tonal button variant for menu trigger */
.md3-button--tonal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-full, 100px);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: 
    background-color 200ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
}

.md3-button--tonal:hover {
  background: var(--md-sys-color-secondary-container);
  box-shadow: var(--elev-1);
}

.md3-button--tonal:focus-visible {
  outline: 2px solid var(--md-sys-color-secondary);
  outline-offset: 2px;
}

.md3-button--tonal:active {
  box-shadow: none;
}

.md3-button--tonal .material-symbols-rounded {
  font-size: 18px;
}

/* Dropdown arrow rotation when open */
.md3-button--tonal[aria-expanded="true"] .md3-button__trailing-icon {
  transform: rotate(180deg);
}

.md3-button__trailing-icon {
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
}

/* ============================================================================
   Responsive Adjustments
   ============================================================================ */

@media (max-width: 599px) {
  .md3-menu {
    min-width: 180px;
    max-width: 280px;
  }

  .md3-menu-item {
    padding: var(--space-3) var(--space-3);
    font-size: 0.8125rem;
  }

  .md3-button--tonal {
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
  }
}