/* SPARK Logistics — Mobile off-canvas navigation */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  padding-block: calc(var(--header-h) + 1.5rem) 2.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-navy);
  color: var(--color-white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4%);
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    visibility 0s linear var(--dur-med);
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.mobile-nav > ul {
  display: grid;
  gap: 0.25rem;
}

.mobile-nav a:not(.btn) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.25rem;
  border-block-end: 1px solid var(--color-line-inverse);
  font-size: clamp(1.35rem, 5.4vw, 1.7rem);
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
}

.mobile-nav a:not(.btn):hover,
.mobile-nav a:not(.btn):focus-visible { color: var(--color-secondary); }

.mobile-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease-out);
}

.mobile-sub[data-open="true"] { grid-template-rows: 1fr; }

.mobile-sub > div { overflow: hidden; }

.mobile-sub ul {
  display: grid;
  gap: 0.15rem;
  padding-block: 0.6rem;
}

.mobile-sub a {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text-inverse-muted);
}

.sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0.25rem;
  border-block-end: 1px solid var(--color-line-inverse);
  font-size: clamp(1.35rem, 5.4vw, 1.7rem);
  font-weight: 700;
  color: var(--color-white);
  text-align: start;
}

.sub-toggle .icon {
  transition: rotate var(--dur-fast) var(--ease-out);
}

.sub-toggle[aria-expanded="true"] .icon { rotate: 180deg; }

.mobile-nav-cta {
  display: grid;
  gap: 0.8rem;
  margin-block-start: 2rem;
}

.mobile-nav-cta .btn {
  justify-content: center;
}