/*
 * Composition only: Navbar Light + Dropdown Navbar.
 * Does not change Navbar, Button, or Dropdown Navbar visual tokens.
 *
 * Position (NOT in Figma): panel flush under the 96px bar, left-aligned
 * to its trigger (JS clamps left so the panel stays inside the host).
 * z-index is 1 so the panel paints above following preview content.
 *
 * EXISTING WEBFLOW: at max-width 991px the panel sits in-flow under its
 * trigger inside the overlay (relative, full width, height auto).
 *
 * Interactions are from live marta-platform.com (IX2 + CSS), not Figma.
 * Figma Navbar / Dropdown frames do not define hover or motion.
 *
 * [hidden] must win over .mkt-dropdown-navbar { display: flex }.
 */

/* EXISTING WEBFLOW: sticky bar. Figma Navbar Light does not define scroll.
   sticky is also the containing block for absolute desktop panels. */
.mkt-navbar-dropdowns {
  position: sticky;
  top: 0;
  z-index: 100;
}

a.mkt-navbar__logo,
a.mkt-dropdown-navbar__item {
  color: inherit;
  text-decoration: none;
}

/* Full-bleed bar; the 1440 inner is centered on desktop. */
@media (min-width: 992px) {
  .mkt-navbar-dropdowns:has(> .mkt-navbar[data-property="variant2"]) {
    background: var(--navbar-fill-variant2);
  }
}

.mkt-navbar-dropdowns > .mkt-dropdown-navbar {
  position: absolute;
  top: 100%;
  z-index: 1;
  max-width: 100%;
}

.mkt-navbar-dropdowns .mkt-dropdown-navbar[hidden] {
  display: none;
}

/* EXISTING WEBFLOW IX2 a-5 / a-6: height 0→auto 500ms outCubic + opacity 200ms
   on open; reverse 300ms on close. Auto height is approximated with max-height. */
.mkt-navbar-dropdowns > .mkt-dropdown-navbar:not([hidden]),
.mkt-navbar-dropdowns .mkt-navbar__menu > .mkt-dropdown-navbar:not([hidden]) {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    max-height 500ms cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 200ms linear;
}

.mkt-navbar-dropdowns > .mkt-dropdown-navbar.is-open,
.mkt-navbar-dropdowns .mkt-navbar__menu > .mkt-dropdown-navbar.is-open {
  max-height: 32rem;
  opacity: 1;
  pointer-events: auto;
}

.mkt-navbar-dropdowns .mkt-dropdown-navbar.is-closing {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    max-height 300ms 100ms cubic-bezier(0.215, 0.61, 0.355, 1),
    opacity 300ms 200ms ease;
}

.mkt-navbar-dropdowns .mkt-dropdown-navbar:not([hidden]) .mkt-dropdown-navbar__col {
  opacity: 0;
  transition: opacity 500ms 200ms linear;
}

.mkt-navbar-dropdowns .mkt-dropdown-navbar.is-open .mkt-dropdown-navbar__col {
  opacity: 1;
}

.mkt-navbar-dropdowns .mkt-dropdown-navbar.is-closing .mkt-dropdown-navbar__col {
  opacity: 0;
  transition: opacity 200ms linear;
}

/* EXISTING WEBFLOW IX2 a-8 / a-9: chevron rotateZ 180, 500ms outQuart. */
.mkt-navbar-dropdowns [data-dropdown] .mkt-button__icon {
  transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mkt-navbar-dropdowns [data-dropdown][aria-expanded="true"] .mkt-button__icon {
  transform: rotate(180deg);
}

/* EXISTING WEBFLOW .new-navbar-link_wrapper:hover — vinaccia-100, radius 6, 0.3s.
   6px is a Webflow one-off; not added to tokens.css. --color-100 is pink-100. */
.mkt-navbar-dropdowns .mkt-dropdown-navbar:not([data-variant]) .mkt-dropdown-navbar__item {
  border-radius: 6px;
  transition: background-color 0.3s;
}

.mkt-navbar-dropdowns .mkt-dropdown-navbar:not([data-variant]) .mkt-dropdown-navbar__item:hover {
  background-color: var(--color-100);
}

/* PAGE IA: Case Study is one Risorse group, not two duplicated items.
   Uses existing Dropdown Navbar __label as the group heading. */
.mkt-navbar-dropdowns .mkt-dropdown-navbar:not([data-variant]) .mkt-dropdown-navbar__col > .mkt-dropdown-navbar__label {
  margin: 0;
  padding: 0 var(--space-8);
}

/* EXISTING WEBFLOW .button.is-primary:hover / .is-primary.is-white:hover:
   fill swap to vinaccia-100 and translateY(-2px), transform 0.2s.
   Scoped to navbar actions so Marketing UI Button stays rest-state only. */
.mkt-navbar-dropdowns .mkt-navbar__actions .mkt-button[data-variant="contained"][data-style="dark"],
.mkt-navbar-dropdowns .mkt-navbar__actions .mkt-button[data-variant="outline"][data-style="dark"] {
  transition:
    transform 0.2s,
    background-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}

.mkt-navbar-dropdowns .mkt-navbar__actions .mkt-button[data-variant="contained"][data-style="dark"]:hover,
.mkt-navbar-dropdowns .mkt-navbar__actions .mkt-button[data-variant="outline"][data-style="dark"]:hover {
  background: var(--color-100);
  color: var(--color-900);
  transform: translateY(-2px);
}

@media (max-width: 991px) {
  .mkt-navbar-dropdowns .mkt-navbar__menu > .mkt-dropdown-navbar {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    z-index: 1;
  }

  .mkt-navbar-dropdowns .mkt-navbar__menu > .mkt-dropdown-navbar[data-variant="simple"],
  .mkt-navbar-dropdowns .mkt-navbar__menu > .mkt-dropdown-navbar[data-variant="details"] {
    width: 100%;
    height: auto;
  }

  .mkt-navbar-dropdowns .mkt-navbar__menu > .mkt-dropdown-navbar {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .mkt-navbar-dropdowns .mkt-navbar__menu > .mkt-dropdown-navbar[data-variant="simple"] .mkt-dropdown-navbar__col,
  .mkt-navbar-dropdowns .mkt-navbar__menu > .mkt-dropdown-navbar[data-variant="details"] .mkt-dropdown-navbar__col {
    width: 100%;
    flex: 1 1 auto;
    height: auto;
  }

  .mkt-navbar-dropdowns .mkt-navbar__menu > .mkt-dropdown-navbar .mkt-dropdown-navbar__label,
  .mkt-navbar-dropdowns .mkt-navbar__menu > .mkt-dropdown-navbar .mkt-dropdown-navbar__title {
    white-space: normal;
  }
}