@import url("./dd-menu.css");
/* DDMenu Wrapper - Creates an isolated styling context for DDMenu components */

/* Base wrapper styles - these don't interfere with theming */
.dd-menu-wrapper {
  /* Create a new stacking context but don't block theme inheritance */
  isolation: isolate;
  
  /* Reset positioning properties that could affect layout */
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  
  /* Ensure proper alignment and text handling */
  vertical-align: middle;
  line-height: normal;
  text-align: left;
  font: inherit;
  
  /* Reset potentially problematic properties */
  transform: none;
  pointer-events: auto;
  
  /* Ensure proper stacking */
  z-index: 1;
  
  /* Theme variables - these will be inherited from the parent DDMenu component */
  color: inherit;
  background: transparent;
  border-color: transparent;
  
  /* Spacing */
  --dd-spacing-xs: 2px;
  --dd-spacing-sm: 6px;
  --dd-spacing-md: 8px;
  --dd-spacing-lg: 12px;
  --dd-spacing-xl: 16px;
  --dd-spacing-2xl: 20px;
  
  /* Border Radius */
  --dd-radius-sm: 6px;
  --dd-radius-md: 8px;
  --dd-radius-lg: 12px;
  
  /* Typography */
  --dd-font-size-xs: 12px;
  --dd-font-size-sm: 13px;
  --dd-font-size-md: 14px;
  --dd-font-size-lg: 15px;
  --dd-font-size-xl: 16px;
  --dd-font-size-2xl: 24px;
  --dd-font-weight-normal: 400;
  --dd-font-weight-medium: 500;
  --dd-font-weight-semibold: 600;
  
  /* Transitions */
  --dd-transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  --dd-transition-slow: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure the DDMenu component inside gets proper positioning context */
.dd-menu-wrapper .dd-menu {
  position: relative;
  display: inline-block;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

/* Ensure the dropdown content is positioned correctly */
.dd-menu-wrapper .dd-menu__content {
  position: absolute;
  z-index: 1000;
}

/* Ensure proper submenu positioning */
.dd-menu-wrapper .dd-menu__submenu {
  position: absolute;
  z-index: 1001;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .dd-menu-wrapper .dd-menu__content {
    position: fixed;
    min-width: 100vw;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-radius: var(--dd-radius-lg, 12px) var(--dd-radius-lg, 12px) 0 0;
    bottom: 0;
    top: auto !important;
    margin: 0;
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* Reset any potential flex or grid properties that might be inherited */
.dd-menu-wrapper .dd-menu,
.dd-menu-wrapper .dd-menu__content,
.dd-menu-wrapper .dd-menu__item,
.dd-menu-wrapper .dd-menu__submenu,
.dd-menu-wrapper .dd-menu__trigger {
  flex: none;
  align-self: auto;
  justify-self: auto;
  order: 0;
  grid-area: auto;
}