/*
 * Marketing UI Dropdown Navbar
 * Figma: MARTA - Website / Dropdown
 *   Simple  33:7758  (frame, not a component set)
 *   Details 33:7813  (frame, not a component set)
 *
 * Distinct from Dropdown Menu (form select) and from Product UI Dropdown.
 *
 * NOT DEFINED / NEEDS IMPLEMENTATION DECISION:
 *   component-set variants / Property axes
 *   hover, focus, pressed, disabled
 *   open / closed / anchored-to-Navbar wiring
 *   link destinations
 *   mobile / breakpoints
 *   animation
 *   title color #181D27 is unbound on these frames and is not
 *     --color-gray-900 (#141C24); kept local, not added to tokens.css
 *
 * EXISTING WEBFLOW: unvarianted panels on Marketing pages use live
 * navbar dropdown type and item gaps (see rules at file end).
 */

.mkt-dropdown-navbar {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: var(--dropdown-navbar-gap);
  padding: var(--dropdown-navbar-padding);
  border-radius: var(--dropdown-navbar-radius);
  background: var(--dropdown-navbar-fill);
  /* Figma inside stroke: CSS border would shrink the content box. */
  box-shadow: inset 0 0 0 1px var(--color-gray-100);
}

.mkt-dropdown-navbar[data-variant="simple"] {
  width: var(--dropdown-navbar-simple-width);
  height: var(--dropdown-navbar-simple-height);
}

.mkt-dropdown-navbar[data-variant="details"] {
  width: var(--dropdown-navbar-details-width);
  height: var(--dropdown-navbar-details-height);
  box-shadow: var(--shadow-xsmall), inset 0 0 0 1px var(--color-gray-100);
}

.mkt-dropdown-navbar__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mkt-dropdown-navbar[data-variant="simple"] .mkt-dropdown-navbar__col {
  width: 183.5px;
  flex: 0 0 183.5px;
  gap: var(--space-10);
}

.mkt-dropdown-navbar[data-variant="details"] .mkt-dropdown-navbar__col {
  flex: 1 0 0;
  min-width: 0;
  height: 184px;
  gap: var(--dropdown-navbar-gap);
}

.mkt-dropdown-navbar__item {
  display: flex;
  gap: var(--space-8);
}

.mkt-dropdown-navbar[data-variant="simple"] .mkt-dropdown-navbar__item {
  align-items: center;
  width: 100%;
}

.mkt-dropdown-navbar[data-variant="details"] .mkt-dropdown-navbar__item {
  align-items: flex-start;
  width: 100%;
}

.mkt-dropdown-navbar[data-variant="simple"] .mkt-dropdown-navbar__icon,
.mkt-dropdown-navbar[data-variant="simple"] .mkt-dropdown-navbar__icon img,
.mkt-dropdown-navbar[data-variant="simple"] .mkt-dropdown-navbar__icon svg {
  display: block;
  box-sizing: border-box;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.mkt-dropdown-navbar[data-variant="details"] .mkt-dropdown-navbar__icon,
.mkt-dropdown-navbar[data-variant="details"] .mkt-dropdown-navbar__icon img,
.mkt-dropdown-navbar[data-variant="details"] .mkt-dropdown-navbar__icon svg {
  display: block;
  box-sizing: border-box;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

/* Unbound Figma fill on these frames. Not --color-gray-900. */
.mkt-dropdown-navbar__label,
.mkt-dropdown-navbar__title {
  color: #181d27;
  font-family: var(--font-family-lexend);
  letter-spacing: var(--letter-spacing-normal);
}

.mkt-dropdown-navbar__label {
  font-size: var(--text-body-xsmall-size);
  line-height: var(--text-body-xsmall-line-height-regular);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
}

.mkt-dropdown-navbar__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
  flex: 1 0 0;
}

.mkt-dropdown-navbar__title {
  margin: 0;
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.mkt-dropdown-navbar__desc {
  margin: 0;
  color: var(--color-gray-500);
  font-family: var(--font-family-lexend);
  font-size: var(--text-body-xsmall-size);
  line-height: var(--text-body-xsmall-line-height-regular);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--text-body-xsmall-letter-spacing);
}

/* EXISTING WEBFLOW: pages omit data-variant (IA does not fit Simple/Details).
   Live marta-platform.com .new-navbar-link_wrapper (1440, measured):
     title .text-size-regular .text-weight-semibold → 16/24/600
     desc  .text-size-small .text-weight-normal     → 14/24/400
     title↔desc gap 0
     item row-gap 16; icon↔copy 16; item padding 8
   Isolated Simple/Details previews keep the Figma frame metrics above.
   14/24 uses body-small size + body-medium line-height; not a new token. */
.mkt-dropdown-navbar:not([data-variant]) .mkt-dropdown-navbar__col {
  width: auto;
  flex: 1 1 auto;
  gap: var(--space-16);
}

.mkt-dropdown-navbar:not([data-variant]) .mkt-dropdown-navbar__item {
  align-items: flex-start;
  width: 100%;
  gap: var(--space-16);
  padding: var(--space-8);
}

/* Heroicons outline 24 (MIT). Page IA has no Simple/Details icon size. */
.mkt-dropdown-navbar:not([data-variant]) .mkt-dropdown-navbar__icon,
.mkt-dropdown-navbar:not([data-variant]) .mkt-dropdown-navbar__icon img,
.mkt-dropdown-navbar:not([data-variant]) .mkt-dropdown-navbar__icon svg {
  display: block;
  box-sizing: border-box;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: #181d27;
}

.mkt-dropdown-navbar:not([data-variant]) .mkt-dropdown-navbar__copy {
  gap: 0;
}

.mkt-dropdown-navbar:not([data-variant]) .mkt-dropdown-navbar__title {
  font-size: var(--text-body-medium-size);
  line-height: var(--text-body-medium-line-height);
  letter-spacing: var(--text-body-medium-letter-spacing);
  font-weight: var(--font-weight-semibold);
  white-space: normal;
}

.mkt-dropdown-navbar:not([data-variant]) .mkt-dropdown-navbar__desc {
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-medium-line-height);
  letter-spacing: var(--text-body-small-letter-spacing);
  font-weight: var(--font-weight-regular);
}