/* ── Desktop: nav item ─────────────────────────────── */

.nav-item {
  position: static;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-item__label {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--_typography---font-body, 'Public Sans Custom', 'Helvetica Neue', Arial, sans-serif);
  font-weight: var(--_typography---font-weight-bold, 700);
  font-size: var(--_typography---text-paragraph-sm, 1rem);
  line-height: var(--_typography---line-height-normal, 1.5);
  color: var(--_sh-text, var(--primary-600, #1B365F));
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease;
}

.nav-item__label:hover {
  opacity: 0.6;
}

.nav-item__label--active {
  border-bottom-color: currentColor;
}

/* ── Chevron ──────────────────────────────────────── */

.nav-item__chevron {
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.nav-item__chevron--open {
  transform: rotate(180deg);
}

/* ── Desktop: mega menu panel (slide-down) ────────── */

.nav-item__panel {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  background: var(--white, #ffffff);
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  pointer-events: none;
  transition: clip-path 300ms ease, opacity 200ms ease;
  z-index: 95;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-item__panel--open {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  pointer-events: auto;
}

.nav-item__panel-inner {
  margin: 0 auto;
}

/* ── Staggered content fade-in ────────────────────── */
/* Desktop stagger is applied from NavItem.tsx so slotted Webflow
   elements can animate even when they live outside the component root. */

/* ── Dropdown link hover ─────────────────────────── */

.nav-item__panel a {
  transition: opacity 150ms ease;
}

.nav-item__panel a:hover {
  opacity: 0.6;
}

/* ── Mobile: row in main screen ──────────────────── */

.nav-item__mobile-row {
  border-bottom: 0;
  width: 100%;
}

.nav-item__mobile-btn,
.nav-item__mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--_spacing---spacing-sm, 16px) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--_typography---font-heading, 'Gelasio Custom', Georgia, serif);
  font-weight: var(--_typography---font-weight-semibold-heading, 550);
  font-size: var(--_typography---text-h5, 1.25rem);
  line-height: var(--_typography---line-height-heading, 1.2);
  color: var(--primary-600, #1B365F);
  text-decoration: none;
  text-align: left;
}

/* ── Mobile: sub-screen ──────────────────────────── */

.nav-item__mobile-sub {
  animation: mobile-screen-slide-in 300ms ease both;
  flex: 1;
}

.nav-item__mobile-sub,
.nav-item__mobile-sub > *,
.nav-item__mobile-sub slot {
  height: 100%;
}

::slotted([slot="children"]) {
  height: 100% !important;
}

@keyframes mobile-screen-slide-in {
  from { transform: translateX(30%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ══════════════════════════════════════════════════════
   Navigation Card Patterns
   ══════════════════════════════════════════════════════ */

/* ── Navigation Series Card ──────────────────────── */

.nav-series-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.nav-series-card__image-wrap {
  aspect-ratio: 3 / 2;
  border-radius: var(--_spacing---radius-lg, 12px);
  overflow: hidden;
  position: relative;
}

.nav-series-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.nav-series-card:hover .nav-series-card__image {
  transform: scale(1.1);
}

.nav-series-card__series-number {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  pointer-events: none;
}

.nav-series-card__title {
  display: inline-flex;
  align-items: center;
  gap: var(--_spacing---spacing-xs, 8px);
  font-family: var(--_typography---font-heading, 'Gelasio Custom', Georgia, serif);
  font-weight: var(--_typography---font-weight-semibold-heading, 550);
  font-size: var(--_typography---text-h5, 1.5rem);
  line-height: var(--_typography---line-height-heading, 1.2);
  color: var(--primary-600, #1B365F);
  margin-top: var(--_spacing---spacing-sm, 16px);
}

.nav-series-card__title-chevron {
  display: inline-flex;
  transition: margin-left 200ms ease;
  margin-left: 0;
}

.nav-series-card:hover .nav-series-card__title-chevron {
  margin-left: var(--_spacing---spacing-xs, 8px);
}

.nav-series-card__desc {
  font-family: var(--_typography---font-body, 'Public Sans Custom', 'Helvetica Neue', Arial, sans-serif);
  font-weight: var(--_typography---font-weight-medium, 500);
  font-size: var(--_typography---text-paragraph-sm, 1rem);
  color: var(--primary-600, #1B365F);
  margin-top: var(--_spacing---spacing-xxs, 4px);
}

/* Series card mobile: horizontal layout */
@media (max-width: 991px) {
  .nav-series-card {
    display: flex;
    gap: var(--_spacing---spacing-sm, 16px);
    align-items: flex-start;
  }

  .nav-series-card__image-wrap {
    width: 40%;
    flex-shrink: 0;
  }

  .nav-series-card__body {
    flex: 1;
  }

  .nav-series-card__title {
    margin-top: 0;
  }
}

/* ── Navigation Callout Card ─────────────────────── */

.nav-callout-card {
  display: block;
  position: relative;
  border-radius: var(--_spacing---radius-lg, 12px);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  text-decoration: none;
  color: inherit;
}

.nav-callout-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.nav-callout-card:hover .nav-callout-card__image {
  transform: scale(1.1);
}

.nav-callout-card__overlay {
  position: absolute;
  inset: 0;
  background: var(--card-gradient-bottom,
    linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.03) 30%,
      rgba(0, 0, 0, 0.20) 50%,
      rgba(0, 0, 0, 0.40) 70%,
      rgba(0, 0, 0, 0.60) 100%
    )
  );
}

.nav-callout-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--_spacing---spacing-md, 24px);
  color: var(--white, #ffffff);
}

.nav-callout-card__title {
  display: inline-flex;
  align-items: center;
  gap: var(--_spacing---spacing-xs, 8px);
  font-family: var(--_typography---font-heading, 'Gelasio Custom', Georgia, serif);
  font-weight: var(--_typography---font-weight-semibold-heading, 550);
  color: var(--white, #ffffff);
}

.nav-callout-card__chevron {
  display: inline-flex;
  transition: margin-left 200ms ease;
}

.nav-callout-card:hover .nav-callout-card__chevron {
  margin-left: var(--_spacing---spacing-xs, 8px);
}

/* ══════════════════════════════════════════════════════
   Mobile Submenu Content Patterns
   Classes for Webflow content authors to use inside
   NavItem children slots on mobile submenus.
   ══════════════════════════════════════════════════════ */

/* ── CTA Buttons Row (e.g. "Shop All Models" + "Explore") ── */

.nav-cta-buttons {
  display: flex;
  gap: var(--_spacing---spacing-md, 16px);
  align-items: center;
  width: 100%;
  padding-bottom: var(--_spacing---spacing-sm, 16px);
}

.nav-cta-buttons > * {
  flex: 1;
}

/* ── Lifestyle Card (icon + text row) ──────────────── */

.nav-lifestyle-card {
  display: flex;
  gap: var(--_spacing---spacing-md, 16px);
  align-items: center;
  width: 100%;
  min-height: 40px;
  text-decoration: none;
  color: inherit;
}

.nav-lifestyle-card__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  overflow: hidden;
}

.nav-lifestyle-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-lifestyle-card__label {
  font-family: var(--_typography---font-body, 'Public Sans Custom', 'Helvetica Neue', Arial, sans-serif);
  font-weight: var(--_typography---font-weight-bold, 700);
  font-size: var(--_typography---text-paragraph-md, 1rem);
  line-height: var(--_typography---line-height-normal, 1.5);
  color: var(--primary-600, #1B365F);
}

/* ── Resources / Secondary Links Section ──────────── */

.nav-resources-section {
  border-top: 1px solid var(--neutral-300, #d7d2cd);
  padding-top: var(--_spacing---stacked-component-sm, 32px);
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---spacing-sm, 12px);
}

.nav-resources-section__label {
  font-family: var(--_typography---font-body, 'Public Sans Custom', 'Helvetica Neue', Arial, sans-serif);
  font-weight: var(--_typography---font-weight-bold, 750);
  font-size: var(--_typography---text-eyebrow-lg, 0.875rem);
  line-height: var(--_typography---line-height-heading, 1.2);
  letter-spacing: 0.56px;
  text-transform: uppercase;
  color: var(--primary-600, #1B365F);
}

.nav-resources-section__link {
  font-family: var(--_typography---font-body, 'Public Sans Custom', 'Helvetica Neue', Arial, sans-serif);
  font-weight: var(--_typography---font-weight-medium, 500);
  font-size: var(--_typography---text-paragraph-md, 1rem);
  line-height: var(--_typography---line-height-normal, 1.5);
  color: var(--primary-600, #1B365F);
  text-decoration: none;
}

/* ── Mobile Navigation Card (image + text) ────────── */

.nav-mobile-card {
  display: flex;
  gap: var(--_spacing---spacing-md, 16px);
  align-items: center;
  overflow: hidden;
  border-radius: var(--_spacing---radius-md, 4px);
  text-decoration: none;
  color: inherit;
}

.nav-mobile-card__image {
  width: 120px;
  height: 90px;
  flex-shrink: 0;
  border-radius: var(--_spacing---radius-lg, 12px);
  overflow: hidden;
}

.nav-mobile-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-mobile-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-mobile-card__title {
  font-family: var(--_typography---font-heading, 'Gelasio Custom', Georgia, serif);
  font-weight: var(--_typography---font-weight-semibold-heading, 600);
  font-size: var(--_typography---text-h6, 1rem);
  line-height: var(--_typography---line-height-heading, 1.2);
  color: var(--primary-600, #1B365F);
}

.nav-mobile-card__desc {
  font-family: var(--_typography---font-body, 'Public Sans Custom', 'Helvetica Neue', Arial, sans-serif);
  font-weight: var(--_typography---font-weight-medium, 500);
  font-size: var(--_typography---text-paragraph-sm, 0.875rem);
  line-height: var(--_typography---line-height-normal, 1.5);
  color: var(--primary-600, #1B365F);
}

/* ── Mobile Link List (plain text links) ──────────── */

.nav-mobile-links {
  display: flex;
  flex-direction: column;
  gap: var(--_spacing---spacing-sm, 12px);
}

.nav-mobile-links__link {
  font-family: var(--_typography---font-body, 'Public Sans Custom', 'Helvetica Neue', Arial, sans-serif);
  font-weight: var(--_typography---font-weight-medium, 500);
  font-size: var(--_typography---text-paragraph-md, 1rem);
  line-height: var(--_typography---line-height-normal, 1.5);
  color: var(--primary-600, #1B365F);
  text-decoration: none;
}