/*
 * Soft Product UI — morphing nav dropdown header (structure).
 *
 * One panel serves every menu. Moving between triggers animates the panel's
 * left/width/height rather than closing one box and opening another, so the
 * menus read as one object changing shape.
 *
 * Import AFTER tokens.css, or rely on the inline fallbacks below — this file
 * stands alone in a project that has no design tokens at all.
 *
 * DO NOT edit this file to re-skin the component. Every colour resolves from a
 * custom property; override those in `morphing-nav-dropdown.tokens.css` instead
 * so this file stays byte-identical and re-syncable against the library.
 * See THEMING.md.
 *
 * Geometry note: the panel sizes, type scale and radii here were measured off a
 * reference clip frame by frame and are the point of the element — they sit
 * outside the Soft Product 12/13/14/24 + 8/16 lock on purpose. README § What
 * was left out explains why.
 */

.sp-mnav,
.sp-mnav * {
  box-sizing: border-box;
}

/* --------------------------------------------------------------- the bar */

.sp-mnav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--sp-mnav-z, 40);
  font-family: var(--sp-mnav-font, var(--font-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif));
  color: var(--sp-mnav-bar-ink, #ffffff);
}

.sp-mnav--sticky {
  position: sticky;
}

.sp-mnav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: var(--sp-mnav-shell, 1100px);
  margin: 0 auto;
  padding: var(--sp-mnav-bar-pad-y, 30px) var(--sp-mnav-bar-pad-x, 24px) 0;
}

.sp-mnav__logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.sp-mnav__logo svg,
.sp-mnav__logo img {
  display: block;
  width: var(--sp-mnav-logo-size, 27px);
  height: var(--sp-mnav-logo-size, 27px);
}

.sp-mnav__links {
  display: flex;
  align-items: center;
}

/* The 10px padding plus 5px margin is what sets the 48px label-to-label gap,
   and the panel aligns to the padded box — changing either moves the panel. */
.sp-mnav__trigger,
.sp-mnav__link {
  appearance: none;
  margin: 0 var(--sp-mnav-item-gap, 5px);
  padding: 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--sp-mnav-label-size, 15px);
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--radius-nav, 8px);
  transition: opacity 0.2s ease;
}

.sp-mnav__chev {
  display: inline-flex;
  transition: transform 0.3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.sp-mnav__chev svg {
  display: block;
  width: 11px;
  height: 11px;
}

.sp-mnav__trigger[aria-expanded="true"] .sp-mnav__chev {
  transform: rotate(180deg);
}

/* Everything but the open trigger recedes. */
.sp-mnav.is-open .sp-mnav__trigger:not([aria-expanded="true"]),
.sp-mnav.is-open .sp-mnav__link {
  opacity: var(--sp-mnav-dim, 0.45);
}

.sp-mnav__trigger:hover,
.sp-mnav__link:hover {
  opacity: 1;
}

.sp-mnav__trigger:focus-visible,
.sp-mnav__link:focus-visible,
.sp-mnav__cta:focus-visible,
.sp-mnav__logo:focus-visible {
  outline: 2px solid var(--sp-mnav-focus, currentColor);
  outline-offset: 2px;
  opacity: 1;
}

.sp-mnav__cta {
  justify-self: end;
  padding: 9px 21px;
  border-radius: 9999px;
  background: var(--sp-mnav-cta-bg, #ffffff);
  color: var(--sp-mnav-cta-ink, #111111);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.18s ease;
}

.sp-mnav__cta:hover {
  background: var(--sp-mnav-cta-bg-hover, rgba(255, 255, 255, 0.86));
}

/* ------------------------------------------------- the morphing panel */

.sp-mnav__panel {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  border: 1px solid var(--sp-mnav-panel-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--sp-mnav-panel-radius, 18px);
  background: var(--sp-mnav-panel-bg, #121011);
  box-shadow: var(--sp-mnav-panel-shadow, 0 24px 60px rgba(0, 0, 0, 0.52), 0 2px 10px rgba(0, 0, 0, 0.4));
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  transform-origin: top left;
  transition:
    left var(--sp-mnav-morph, 0.54s) var(--sp-mnav-ease-morph, cubic-bezier(0.32, 0.72, 0, 1)),
    top var(--sp-mnav-morph, 0.54s) var(--sp-mnav-ease-morph, cubic-bezier(0.32, 0.72, 0, 1)),
    width var(--sp-mnav-morph, 0.54s) var(--sp-mnav-ease-morph, cubic-bezier(0.32, 0.72, 0, 1)),
    height var(--sp-mnav-morph, 0.54s) var(--sp-mnav-ease-morph, cubic-bezier(0.32, 0.72, 0, 1)),
    opacity 0.13s ease-in,
    transform 0.16s ease-in,
    visibility 0s 0.16s;
}

.sp-mnav__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    left var(--sp-mnav-morph, 0.54s) var(--sp-mnav-ease-morph, cubic-bezier(0.32, 0.72, 0, 1)),
    top var(--sp-mnav-morph, 0.54s) var(--sp-mnav-ease-morph, cubic-bezier(0.32, 0.72, 0, 1)),
    width var(--sp-mnav-morph, 0.54s) var(--sp-mnav-ease-morph, cubic-bezier(0.32, 0.72, 0, 1)),
    height var(--sp-mnav-morph, 0.54s) var(--sp-mnav-ease-morph, cubic-bezier(0.32, 0.72, 0, 1)),
    opacity 0.2s ease-out,
    transform 0.26s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    visibility 0s;
}

.sp-mnav__menu {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--sp-mnav-ink, #f5f5f7);
}

.sp-mnav__menu[hidden] {
  display: none;
}

/* Content rises in behind the shape change and leaves fast, so the panel and
   its contents never look like two separate animations. */
.sp-mnav__rv {
  opacity: 0;
  transform: translateY(8px);
}

.sp-mnav__menu.is-in .sp-mnav__rv {
  opacity: 1;
  transform: none;
  transition: opacity 0.22s ease, transform 0.34s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  transition-delay: calc(var(--i, 0) * 24ms);
}

.sp-mnav__menu.is-out .sp-mnav__rv {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.11s ease-in, transform 0.12s ease-in;
  transition-delay: 0s;
}

/* The hover marker slides between rows rather than fading per row. */
.sp-mnav__pill {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--sp-mnav-pill-radius, 12px);
  background: var(--sp-mnav-pill-bg, rgba(255, 255, 255, 0.055));
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.24s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    width 0.24s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    height 0.24s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity 0.18s ease;
}

/* ---------------------------------------- menu variant: list + media */

.sp-mnav__menu--split {
  display: flex;
  width: var(--sp-mnav-split-w, 720px);
  height: var(--sp-mnav-split-h, 392px);
  padding: 4px;
}

.sp-mnav__list {
  position: relative;
  flex: none;
  width: var(--sp-mnav-list-w, 252px);
}

.sp-mnav__row {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: var(--sp-mnav-row-h, 96px);
  padding: 16px 22px 16px 14px;
  border: 0;
  border-radius: var(--sp-mnav-pill-radius, 12px);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.sp-mnav__row-title {
  display: block;
  font-size: var(--sp-mnav-title-size, 16px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.sp-mnav__row-desc {
  display: block;
  margin-top: 3px;
  font-size: var(--sp-mnav-body-size, 15px);
  font-weight: 400;
  line-height: 1.38;
  color: var(--sp-mnav-ink-dim, rgba(238, 238, 242, 0.62));
}

.sp-mnav__media {
  flex: 1;
  align-self: stretch;
}

.sp-mnav__frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--sp-mnav-pill-radius, 12px);
  background: var(--sp-mnav-frame-bg, rgba(255, 255, 255, 0.04));
}

.sp-mnav__frame > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.3s ease, transform 0.55s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.sp-mnav__frame > .is-on {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------- menu variant: image cards */

.sp-mnav__menu--cards {
  display: flex;
  gap: 4px;
  width: var(--sp-mnav-cards-w, 464px);
  height: var(--sp-mnav-cards-h, 326px);
  padding: 4px;
}

.sp-mnav__card {
  position: relative;
  display: block;
  flex: 1;
  height: 100%;
  overflow: hidden;
  border-radius: var(--sp-mnav-pill-radius, 12px);
  color: inherit;
  text-decoration: none;
}

.sp-mnav__card > img,
.sp-mnav__card > .sp-mnav__card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.sp-mnav__card:hover > img,
.sp-mnav__card:hover > .sp-mnav__card-art {
  transform: scale(1.035);
}

.sp-mnav__card-scrim {
  position: absolute;
  inset: 0;
  background: var(--sp-mnav-card-scrim, linear-gradient(180deg, rgba(0, 0, 0, 0.04) 28%, rgba(0, 0, 0, 0.3) 56%, rgba(0, 0, 0, 0.8) 100%));
}

.sp-mnav__card-cap {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 24px 18px 18px;
}

.sp-mnav__card-title {
  display: block;   /* works whether the host uses an <h3> or a <span> */
  margin: 0;
  font-size: var(--sp-mnav-title-size, 16px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--sp-mnav-card-ink, #ffffff);
}

.sp-mnav__card-desc {
  display: block;
  margin: 4px 0 0;
  font-size: var(--sp-mnav-body-size, 15px);
  line-height: 1.38;
  color: var(--sp-mnav-card-ink-dim, rgba(255, 255, 255, 0.68));
}

/* ------------------------------------------------ menu variant: plain list */

.sp-mnav__menu--list {
  width: var(--sp-mnav-list-menu-w, 220px);
  height: var(--sp-mnav-list-menu-h, 226px);
  padding: 5px;
}

.sp-mnav__list--plain {
  position: relative;
}

.sp-mnav__list--plain .sp-mnav__pill {
  border-radius: var(--sp-mnav-pill-radius-sm, 10px);
}

.sp-mnav__item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: var(--sp-mnav-item-h, 54px);
  padding: 0 16px;
  border-radius: var(--sp-mnav-pill-radius-sm, 10px);
  color: inherit;
  font-size: var(--sp-mnav-item-size, 16px);
  font-weight: 500;
  letter-spacing: -0.008em;
  text-decoration: none;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  .sp-mnav__inner {
    padding-left: var(--sp-mnav-bar-pad-x, 24px);
    padding-right: var(--sp-mnav-bar-pad-x, 24px);
  }
}

@media (max-width: 780px) {
  .sp-mnav__inner {
    padding: 16px 16px 0;
  }

  .sp-mnav__trigger,
  .sp-mnav__link {
    margin: 0 2px;
    padding: 10px 6px;
    font-size: 14px;
  }

  .sp-mnav__menu--split {
    width: calc(100vw - 32px);
  }

  .sp-mnav__media {
    display: none;
  }

  .sp-mnav__list {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-mnav__panel,
  .sp-mnav__rv,
  .sp-mnav__pill,
  .sp-mnav__chev,
  .sp-mnav__frame > *,
  .sp-mnav__card > img,
  .sp-mnav__card > .sp-mnav__card-art {
    transition: none !important;
  }
}