/* ── Memberships dropdown (logged-out nav, partials/nav_new.hbs) ─────────────
   The trigger is the coral .btn-tertiary CTA; the panel links through to the
   signup page's Individual / Team plan tabs via ?membership-type=.
   Opened by assets/js/nav-membership-dropdown.js, which sets .is-open. */

.navbar .nav-membership {
  position: relative;
  display: inline-flex;
}

.navbar .nav-membership-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.navbar .nav-membership-chevron {
  width: 9px;
  height: 6px;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}

.navbar .nav-membership.is-open .nav-membership-chevron {
  transform: rotate(180deg);
}

/* Panel. Items run edge to edge, so overflow:hidden is what rounds the first
   and last rows to match the panel rather than a radius on each link. */
.navbar .nav-membership-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 9999;
  flex-direction: column;
  overflow: hidden;
  min-width: 100%;
  max-width: calc(100vw - 32px);
  background: #f9f8f5;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(9, 16, 15, 0.16);
}

.navbar .nav-membership.is-open .nav-membership-menu {
  display: flex;
}

/* The .nav-membership selector is load-bearing, not redundant: on mobile
   nav.js moves .nav-account into a clone of .nav-dropdown, which brings
   `.navbar .nav-dropdown a { padding: 4px 32px }` (nav.css + new-nav.css) into
   range. That is [0,2,1] and would beat a plain .navbar .nav-membership-link
   at [0,2,0], squashing these rows. The extra class makes it [0,3,0]. */
.navbar .nav-membership .nav-membership-link {
  display: block;
  padding: 10px 16px;
  color: #09100f;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.navbar .nav-membership .nav-membership-link:hover,
.navbar .nav-membership .nav-membership-link:focus-visible {
  background: var(--coral-gradient, linear-gradient(90deg, #ff7369 0%, #d83848 111.81%));
  color: #f9f8f5;
}

/* new-nav.css stacks .nav-account into a full-width column here, so the panel
   drops inline rather than floating over the items below it */
@media (max-width: 1200px) {
  /* The panel goes position:static below, which puts it back in flow as a
     flex item. The base rule is a row, so it would sit beside the trigger and
     run off screen -- stack the two instead. */
  .navbar .nav-membership {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .navbar .nav-membership-trigger {
    width: 100%;
    justify-content: center;
  }

  /* Sits inline under the CTA rather than floating, so the panel is outlined
     instead of shadowed and the rows are divided the way the rest of the
     mobile nav divides its sections. */
  .navbar .nav-membership-menu {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 8px;
    box-shadow: none;
    border: 1px solid #d4d4d4;
  }

  .navbar .nav-membership .nav-membership-link {
    padding: 12px 16px;
  }

  .navbar .nav-membership .nav-membership-link + .nav-membership-link {
    border-top: 1px solid #d4d4d4;
  }
}