/* ============================================================
   Mobile Bottom Nav — ArlingtonBlack (Green Oasis palette)
   Config-driven via --mn-* custom properties.
   See: .claude/skills/mobile-bottom-nav/SKILL.md
   ============================================================ */

.mn-bottom-nav {
  /* Brand tokens (Green Oasis palette, mapped from styles.css) */
  --mn-bg: #030303;          /* --color-bg */
  --mn-border: #0F3D22;      /* --color-border */
  --mn-text: #7CB899;        /* --color-text-muted */
  --mn-text-active: #E8F5EE; /* --color-text */
  --mn-cta-bg: #18DB67;      /* --color-accent (neon green) */
  --mn-cta-bg-hover: #068C43; /* --color-primary */
  --mn-cta-text: #030303;    /* dark for contrast on green CTA */
  --mn-cta-radius: 4px;      /* --radius-sm, sharp design */
  --mn-font: 'Playfair Display', Georgia, serif; /* --font-heading */

  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--mn-bg);
  border-top: 1px solid var(--mn-border);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35);
}

.mn-nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 56px;
  text-decoration: none;
  color: var(--mn-text);
  font-family: var(--mn-font);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}

.mn-nav-item svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  flex-shrink: 0;
}

.mn-nav-item span {
  line-height: 1;
  white-space: nowrap;
}

.mn-nav-item:hover,
.mn-nav-item:focus-visible {
  color: var(--mn-text-active);
}

.mn-nav-item--active {
  color: var(--mn-text-active);
}

/* CTA variant — primary community-partner action, always visually distinct.
   The pill background is applied directly to the item (no wrapper element
   needed) so it works with the flat <a class="mn-nav-item mn-nav-item--cta">
   markup used across every page. */
.mn-nav-item--cta {
  height: calc(56px - 12px);
  margin: 6px 4px 6px 0;
  background: var(--mn-cta-bg);
  color: var(--mn-cta-text);
  border-radius: var(--mn-cta-radius);
  transition: background 0.15s ease;
}

.mn-nav-item--cta:hover,
.mn-nav-item--cta:focus-visible,
.mn-nav-item--cta.mn-nav-item--active {
  background: var(--mn-cta-bg-hover);
  color: var(--mn-cta-text);
}

/* Show only on mobile viewports; desktop keeps the existing nav untouched */
@media (max-width: 768px) {
  .mn-bottom-nav {
    display: flex;
  }

  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}