/**
 * Glossary API autocomplete — Elementor kit-aware styles.
 * Uses Site Settings globals: Primary, Secondary, Text, Accent + typography.
 */

.glossary-api-ac {
  --glossary-api-color-primary: var(--e-global-color-primary, currentColor);
  --glossary-api-color-secondary: var(--e-global-color-secondary, #54595f);
  --glossary-api-color-text: var(--e-global-color-text, inherit);
  --glossary-api-color-accent: var(--e-global-color-accent, var(--e-global-color-primary, currentColor));
  --glossary-api-gap: 0.5em;
  --glossary-api-pad-x: 1em;
  --glossary-api-pad-y: 0.65em;

  position: absolute;
  z-index: 100000;
  top: calc(100% + var(--glossary-api-gap));
  left: 0;
  right: 0;
  min-width: 14em;
  max-height: 20em;
  overflow-y: auto;
  margin: 0;
  padding: var(--glossary-api-gap) 0;
  box-sizing: border-box;

  color: var(--glossary-api-color-text);
  background-color: #fff;
  border: 1px solid color-mix(in srgb, var(--glossary-api-color-secondary) 25%, transparent);
  border-radius: var(--glossary-api-radius, 0);

  font-family: var(--e-global-typography-text-font-family, inherit);
  font-size: var(--e-global-typography-text-font-size, 1em);
  font-weight: var(--e-global-typography-text-font-weight, inherit);
  line-height: var(--e-global-typography-text-line-height, 1.4);
  letter-spacing: var(--e-global-typography-text-letter-spacing, normal);
  text-transform: var(--e-global-typography-text-text-transform, none);
}

/* Fallback when color-mix unsupported */
@supports not (border-color: color-mix(in srgb, red 25%, transparent)) {
  .glossary-api-ac {
    border-color: rgba(0, 0, 0, 0.12);
  }
}

.glossary-api-ac[hidden] {
  display: none !important;
}

.glossary-api-ac__group {
  margin: 0;
  padding: var(--glossary-api-pad-y) var(--glossary-api-pad-x) calc(var(--glossary-api-pad-y) * 0.35);

  color: var(--glossary-api-color-secondary);
  font-family: var(--e-global-typography-secondary-font-family, var(--e-global-typography-primary-font-family, inherit));
  font-size: var(--e-global-typography-secondary-font-size, 0.75em);
  font-weight: var(--e-global-typography-secondary-font-weight, 600);
  line-height: var(--e-global-typography-secondary-line-height, 1.3);
  letter-spacing: var(--e-global-typography-secondary-letter-spacing, 0.04em);
  text-transform: var(--e-global-typography-secondary-text-transform, uppercase);
}

.glossary-api-ac__item.elementor-button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--glossary-api-gap);
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  padding: var(--glossary-api-pad-y) var(--glossary-api-pad-x);
  border-radius: 0;
  border: 0;
  box-shadow: none;
  text-align: left;
  text-decoration: none;
  cursor: pointer;

  /* Quiet list row; Elementor button colors reserved for hover/active */
  background-color: transparent;
  color: var(--glossary-api-color-text);
  fill: var(--glossary-api-color-text);

  font-family: var(--e-global-typography-text-font-family, inherit);
  font-size: var(--e-global-typography-text-font-size, 1em);
  font-weight: var(--e-global-typography-text-font-weight, inherit);
  line-height: var(--e-global-typography-text-line-height, 1.4);
  letter-spacing: var(--e-global-typography-text-letter-spacing, normal);
  text-transform: none;
}

.glossary-api-ac__item.elementor-button .elementor-button-content-wrapper {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--glossary-api-gap);
  width: 100%;
}

.glossary-api-ac__item.elementor-button .elementor-button-text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--glossary-api-gap);
  width: 100%;
}

.glossary-api-ac__item.elementor-button:hover,
.glossary-api-ac__item.elementor-button:focus,
.glossary-api-ac__item.elementor-button.is-active {
  background-color: var(--glossary-api-color-primary);
  color: #fff;
  fill: #fff;
  border: 0;
  box-shadow: none;
}

.glossary-api-ac__item.elementor-button:hover .glossary-api-ac__meta,
.glossary-api-ac__item.elementor-button:focus .glossary-api-ac__meta,
.glossary-api-ac__item.elementor-button.is-active .glossary-api-ac__meta {
  color: inherit;
  opacity: 0.85;
}

.glossary-api-ac__label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.glossary-api-ac__meta {
  flex: 0 0 auto;
  color: var(--glossary-api-color-secondary);
  font-family: var(--e-global-typography-accent-font-family, inherit);
  font-size: 0.75em;
  font-weight: var(--e-global-typography-accent-font-weight, inherit);
  letter-spacing: var(--e-global-typography-accent-letter-spacing, normal);
  text-transform: var(--e-global-typography-accent-text-transform, uppercase);
  opacity: 0.9;
}

.glossary-api-ac__empty {
  margin: 0;
  padding: var(--glossary-api-pad-y) var(--glossary-api-pad-x);
  color: var(--glossary-api-color-secondary);
  font-family: var(--e-global-typography-text-font-family, inherit);
  font-size: var(--e-global-typography-text-font-size, 1em);
}