/*
 * Marketing UI Navbar Light
 * CONFIRMED site-wide (2026-09-22): apply .mkt-navbar + .mkt-navbar-dropdowns
 * on every Marketing page. Do not use Product UI Header.
 * Figma: MARTA - Website / Navbar / Navbar Light (32:376)
 *
 * Property 1 (data-property):
 *   default  — fill none (transparent)
 *   variant2 — fill Standard/White
 *
 * Structure (verified children):
 *   1. Livello_1 logo 203×40
 *   2. Frame 6 menu — hug, gap 16, three Button instances
 *   3. Frame 7 actions — hug, gap 16, two Button instances
 *
 * Root auto-layout: horizontal, space-between, padding 24 / 112 / 24 / 112.
 * Item spacing 604 is Figma space-between leftover, not a token — do not use it.
 *
 * --navbar-width (1440) is the Figma desktop artboard, used as max-width.
 * It is not a CSS width lock. overflow:hidden is not used on the root:
 * it would clip menu/actions when the viewport is narrower than the
 * hug content. Logo overflow:hidden is Figma clipsContent on Livello_1.
 *
 * Buttons are Marketing UI Button instances (not Product UI):
 *   Default  — Text/Contained/Outline Large + Style=Light
 *   Variant2 — Text/Contained/Outline Large + Style=Dark
 *
 * EXISTING WEBFLOW / HTML (not Figma):
 *   Live marta-platform.com navbar uses Webflow data-collapse="medium"
 *   at max-width 991px: hamburger, overlay menu, reduced padding.
 *   991 / 767 are existing site values, not Design System tokens.
 *   .mkt-navbar__toggle and .mkt-navbar__collapse are composition chrome
 *   for that behavior. They are not Figma Navbar Light children.
 *   6-group IA cannot use Figma 112px + Large (3-item artboard). Pages set
 *   data-ia="six": padding --space-32 and Medium buttons, same as ds-apply
 *   on proto-nav. .is-collapsed is set in JS when hug content still overflows.
 *
 * NOT DEFINED / NEEDS IMPLEMENTATION DECISION:
 *   scroll-opaque behavior
 *   Figma mobile / breakpoint variants
 *   focus / hover / pressed / disabled
 *   dropdown panel position, variant mapping, and item destinations
 *     (open/closed click behavior is in navbar-dropdown.js; visuals unchanged)
 *   link destinations
 *   Chi siamo detached 1440×101 Pink/900 frame (not this component)
 */

.mkt-navbar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  max-width: var(--navbar-width);
  height: var(--navbar-height);
  padding-block: var(--navbar-padding-block);
  padding-inline: var(--navbar-padding-inline);
  background: var(--navbar-fill-default);
}

/* EXISTING WEBFLOW: navbar-content_wrapper is max-width + margin auto on desktop.
   Inverse of the 991px collapse. Below 992px the bar is already 100% wide. */
@media (min-width: 992px) {
  .mkt-navbar {
    margin-inline: auto;
  }
}

.mkt-navbar[data-property="variant2"] {
  background: var(--navbar-fill-variant2);
}

/* Livello_1 — fixed 203×40, clipsContent true. SVG leaf is 203×40.3796. */
.mkt-navbar__logo {
  box-sizing: border-box;
  flex: 0 0 var(--navbar-logo-width);
  width: var(--navbar-logo-width);
  height: var(--navbar-logo-height);
  overflow: hidden;
  color: var(--color-standard-white);
}

.mkt-navbar[data-property="variant2"] .mkt-navbar__logo {
  color: var(--color-900);
}

.mkt-navbar__logo svg,
.mkt-navbar__logo img {
  display: block;
  width: 203px;
  height: 40.3796px;
}

/* display:contents keeps logo | menu | actions as navbar flex children
   at desktop, matching Figma space-between. */
.mkt-navbar__collapse {
  display: contents;
}

.mkt-navbar__menu,
.mkt-navbar__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: var(--navbar-link-group-gap);
  height: var(--button-height-lg);
}

/* EXISTING WEBFLOW: hamburger is hidden on desktop (same as .w-nav-button). */
.mkt-navbar__toggle {
  display: none;
  box-sizing: border-box;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-16);
  border: 0;
  background: transparent;
  color: var(--color-standard-white);
  cursor: pointer;
}

.mkt-navbar[data-property="variant2"] .mkt-navbar__toggle {
  color: var(--color-900);
}

.mkt-navbar__toggle[aria-expanded="true"] {
  background: var(--color-100);
  color: var(--color-900);
  border-radius: var(--radius-8);
}

.mkt-navbar__toggle-icon {
  display: block;
  width: 24px;
  height: 24px;
}

.mkt-navbar__toggle-icon--close {
  display: none;
}

.mkt-navbar__toggle[aria-expanded="true"] .mkt-navbar__toggle-icon--bars {
  display: none;
}

.mkt-navbar__toggle[aria-expanded="true"] .mkt-navbar__toggle-icon--close {
  display: block;
}

/* EXISTING HTML: 6-group IA vs Figma 3-item 1440 artboard.
   Hug content fills 1440 with Medium + 2 CTAs, so space-between leftover
   is 0 and the menu sits on the logo. Compact label↔chevron (not global
   --button-gap) and a min column-gap so leftover air sits after the logo.
   Action copy “Funzionalità” is page IA, not the Figma 3-item preview. */
.mkt-navbar[data-ia="six"]:not(.is-collapsed) {
  padding-inline: var(--space-32);
  column-gap: var(--space-24);
}

.mkt-navbar[data-ia="six"] .mkt-navbar__menu,
.mkt-navbar[data-ia="six"] .mkt-navbar__actions {
  height: var(--button-height-md);
}

.mkt-navbar[data-ia="six"]:not(.is-collapsed) .mkt-navbar__menu,
.mkt-navbar[data-ia="six"]:not(.is-collapsed) .mkt-navbar__actions {
  gap: var(--space-8);
}

.mkt-navbar[data-ia="six"]:not(.is-collapsed) .mkt-navbar__menu .mkt-button {
  padding-inline-start: var(--space-8);
  padding-inline-end: var(--space-4);
  gap: var(--space-4);
}

/* Overlay: Webflow 991px, or JS .is-collapsed when hug content overflows. */
@media (max-width: 991px) {
  .mkt-navbar,
  .mkt-navbar[data-ia="six"]:not(.is-collapsed) {
    padding-inline: var(--space-16);
  }
}

.mkt-navbar.is-collapsed {
  padding-inline: var(--space-16);
}

@media (max-width: 991px) {
  .mkt-navbar__toggle {
    display: inline-flex;
  }

  .mkt-navbar__collapse {
    display: none;
    box-sizing: border-box;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
    padding: var(--space-16);
    background: var(--navbar-fill-variant2);
    box-shadow: var(--shadow-xsmall);
    z-index: 2;
  }

  .mkt-navbar[data-property="default"] .mkt-navbar__collapse {
    background: var(--color-900);
  }

  .mkt-navbar.is-open .mkt-navbar__collapse {
    display: flex;
    max-height: calc(100vh - var(--navbar-height));
    overflow-x: hidden;
    overflow-y: auto;
  }

  .mkt-navbar.is-open .mkt-navbar__menu,
  .mkt-navbar.is-open .mkt-navbar__actions {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    height: auto;
  }

  .mkt-navbar.is-open .mkt-button {
    width: 100%;
    height: auto;
    min-height: var(--button-height-lg);
    white-space: normal;
    justify-content: space-between;
  }

  .mkt-navbar.is-open .mkt-button[data-size="medium"] {
    min-height: var(--button-height-md);
  }
}

.mkt-navbar.is-collapsed .mkt-navbar__toggle {
  display: inline-flex;
}

.mkt-navbar.is-collapsed .mkt-navbar__collapse {
  display: none;
  box-sizing: border-box;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-16);
  padding: var(--space-16);
  background: var(--navbar-fill-variant2);
  box-shadow: var(--shadow-xsmall);
  z-index: 2;
}

.mkt-navbar[data-property="default"].is-collapsed .mkt-navbar__collapse {
  background: var(--color-900);
}

.mkt-navbar.is-collapsed.is-open .mkt-navbar__collapse {
  display: flex;
  max-height: calc(100vh - var(--navbar-height));
  overflow-x: hidden;
  overflow-y: auto;
}

.mkt-navbar.is-collapsed.is-open .mkt-navbar__menu,
.mkt-navbar.is-collapsed.is-open .mkt-navbar__actions {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  height: auto;
}

.mkt-navbar.is-collapsed.is-open .mkt-button {
  width: 100%;
  height: auto;
  min-height: var(--button-height-lg);
  white-space: normal;
  justify-content: space-between;
}

.mkt-navbar.is-collapsed.is-open .mkt-button[data-size="medium"] {
  min-height: var(--button-height-md);
}

/* Action CTAs have no chevron. space-between on .mkt-button parks the label
   on the start edge of the full-width control. Center them. Menu items
   keep space-between so the label stays left and the chevron stays right. */
.mkt-navbar.is-open .mkt-navbar__actions .mkt-button,
.mkt-navbar.is-collapsed.is-open .mkt-navbar__actions .mkt-button {
  justify-content: center;
  text-align: center;
}

.mkt-navbar.is-open .mkt-navbar__actions .mkt-button .mkt-button__label,
.mkt-navbar.is-collapsed.is-open .mkt-navbar__actions .mkt-button .mkt-button__label {
  width: 100%;
  text-align: center;
}

/* Locale switcher. Injected by the i18n build into generated pages.
   Same composition as the live Webflow language control: the code, a
   14px chevron, then the language names. Not a new Design System
   component. 14px, the 2px gap and weight 300 are the measured Webflow
   control; they are not tokens. On this white bar the code uses
   --color-900 (Webflow paints it white on the burgundy bar). */
.mkt-navbar__locales {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.mkt-navbar__locale-trigger {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 2px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-900);
  font-family: var(--font-family-lexend);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line-height);
  letter-spacing: var(--text-body-small-letter-spacing);
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
}

.mkt-navbar__locale-trigger .mkt-navbar__locale-icon,
.mkt-navbar__locale-trigger .mkt-button__icon {
  display: block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mkt-navbar__locale-trigger .mkt-navbar__locale-icon svg,
.mkt-navbar__locale-trigger .mkt-button__icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.mkt-navbar__locale-trigger[aria-expanded="true"] .mkt-navbar__locale-icon,
.mkt-navbar__locale-trigger[aria-expanded="true"] .mkt-button__icon {
  transform: rotate(180deg);
}

.mkt-navbar__locale-trigger:focus-visible,
.mkt-navbar__locale-menu a:focus-visible {
  outline: 2px solid var(--color-900);
  outline-offset: 2px;
}

.mkt-navbar__locale-menu {
  position: absolute;
  top: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: max-content;
  margin: 0;
  padding: var(--space-8) var(--space-16);
  list-style: none;
  border-radius: var(--radius-8);
  background: var(--dropdown-navbar-fill);
  box-shadow: var(--shadow-xsmall);
}

.mkt-navbar__locale-menu[hidden] {
  display: none;
}

.mkt-navbar__locale-menu a {
  display: block;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  color: var(--color-gray-900);
  font-family: var(--font-family-lexend);
  font-size: var(--text-body-small-size);
  line-height: 24px;
  letter-spacing: var(--text-body-small-letter-spacing);
  font-weight: 300;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
}

.mkt-navbar__locale-code {
  text-transform: uppercase;
}

.mkt-navbar__locale-menu a:hover,
.mkt-navbar__locale-menu a[aria-current="true"] {
  background: transparent;
}

.mkt-navbar__locale-menu a[aria-current="true"] {
  font-weight: var(--font-weight-medium);
}

/* The six-group bar is already full. Spanish labels are longer, so the
   menu gaps step down to existing tokens and the menu chevron loses
   its end padding. Action controls stay at --space-16 so the locale
   switcher and the two CTAs do not sit on each other. space-between
   still spreads the groups when the viewport has room. Type size
   and the 991px collapse stay unchanged. Pages without the switcher
   keep the roomier six-group spacing. */
.mkt-navbar[data-ia="six"]:not(.is-collapsed):has(.mkt-navbar__locales) {
  padding-inline: var(--space-10);
  column-gap: var(--space-4);
}

.mkt-navbar[data-ia="six"]:not(.is-collapsed):has(.mkt-navbar__locales) .mkt-navbar__menu {
  gap: var(--space-4);
}

.mkt-navbar[data-ia="six"]:not(.is-collapsed):has(.mkt-navbar__locales) .mkt-navbar__actions {
  gap: var(--space-16);
}

.mkt-navbar[data-ia="six"]:not(.is-collapsed):has(.mkt-navbar__locales) .mkt-navbar__menu .mkt-button {
  padding-inline-start: var(--space-4);
  padding-inline-end: 0;
}

/* JS .is-collapsed can happen above 991px. The menu then sits in the
   overlay, same as the 991px hamburger. */
.mkt-navbar.is-collapsed.is-open .mkt-navbar__locales {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.mkt-navbar.is-collapsed.is-open .mkt-navbar__locale-trigger {
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
}

.mkt-navbar.is-collapsed.is-open .mkt-navbar__locale-menu:not([hidden]) {
  position: static;
  width: 100%;
}

.mkt-navbar.is-collapsed.is-open .mkt-navbar__locale-menu a {
  min-height: 44px;
}

@media (max-width: 991px) {
  .mkt-navbar.is-open .mkt-navbar__locales {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .mkt-navbar.is-open .mkt-navbar__locale-trigger {
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
  }

  .mkt-navbar.is-open .mkt-navbar__locale-menu:not([hidden]) {
    position: static;
    width: 100%;
  }

  .mkt-navbar.is-open .mkt-navbar__locale-menu a {
    min-height: 44px;
  }
}

/* EXISTING WEBFLOW: navbar-content_wrapper at max-width 767px. */
@media (max-width: 767px) {
  .mkt-navbar,
  .mkt-navbar[data-ia="six"]:not(.is-collapsed) {
    padding-inline: var(--space-8);
  }
}