/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE NAV PREMIUM REDESIGN — Task #1053596
   Revenue-first ordering, premium visual hierarchy, structured sections.
   Supplements layout-head.ejs inline styles.
   Tested at: 375px, 390px, 428px, 768px
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────
   1. REVENUE SECTION HIGHLIGHT — "For Law Firms" at position 2, revenue-first
      Visual distinction: left accent border, subtle background tint.
   ──────────────────────────────────────────────────────────────────────────── */

.nav-mobile-accordion-group--revenue {
  background: #f8faff;
  border-bottom: 1px solid #dbeafe !important;
}

.nav-mobile-accordion-group--revenue > .nav-mobile-accordion-btn {
  color: #1e3a8a !important;
  -webkit-text-fill-color: #1e3a8a !important;
  border-left: 3px solid #2563eb;
  padding-left: calc(1rem - 3px) !important;
  background: #f8faff !important;
  font-weight: 700 !important;
}

.nav-mobile-accordion-group--revenue > .nav-mobile-accordion-btn:hover,
.nav-mobile-accordion-group--revenue > .nav-mobile-accordion-btn[aria-expanded="true"] {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   2. DIRECT PRICING LINK — premium styling, always first, revenue-critical
   ──────────────────────────────────────────────────────────────────────────── */

.nav-mobile-direct-link#navMobilePricingLink {
  font-weight: 800 !important;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  background: linear-gradient(to right, #eff6ff 0%, #fafbff 100%) !important;
  border-left: 3px solid #2563eb !important;
  border-bottom: 1px solid #dbeafe !important;
  padding-left: calc(1rem - 3px) !important;
  font-size: 1rem !important;
  letter-spacing: -0.01em;
}

.nav-mobile-direct-link#navMobilePricingLink:hover {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   3. ACCORDION BUTTON — premium typography, smooth hover
   ──────────────────────────────────────────────────────────────────────────── */

.nav-mobile-accordion-btn {
  padding: 0.875rem 1rem !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border-bottom: 1px solid transparent;
  transition: background 0.15s, color 0.15s !important;
  letter-spacing: -0.005em;
}

.nav-mobile-accordion-btn:hover {
  background: #f0f4ff !important;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
}

.nav-mobile-accordion-btn[aria-expanded="true"] {
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  background: #f0f4ff !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   4. SECTION SUBLABEL — bold section headers, clear visual anchor
   ──────────────────────────────────────────────────────────────────────────── */

.nav-mobile-accordion-body .nav-mobile-sublabel {
  font-size: 0.67rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
  padding: 0.8rem 1.25rem 0.3rem !important;
  border-top: 1px solid #f0f1f3;
  margin-top: 0.15rem !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   5. MOBILE NAV LINK — comfortable tap targets, smooth hover
   ──────────────────────────────────────────────────────────────────────────── */

.nav-mobile-link {
  padding: 0.6rem 1.25rem !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  transition: background 0.12s, color 0.12s, padding-left 0.12s !important;
}

.nav-mobile-link:hover {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  padding-left: 1.5rem !important;
}

/* Revenue paid links — more prominent */
.nav-mobile-link.nav-mobile-link--paid {
  font-weight: 700 !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   6. ACCORDION GROUP — clean section separators
   ──────────────────────────────────────────────────────────────────────────── */

.nav-mobile-accordion-group {
  border-bottom: 1px solid #f0f1f3 !important;
  border-top: none !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   7. CHEVRON — premium open/close animation
   ──────────────────────────────────────────────────────────────────────────── */

.nav-mobile-accordion-chevron {
  color: #9ca3af !important;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nav-mobile-accordion-btn[aria-expanded="true"] .nav-mobile-accordion-chevron {
  color: #2563eb !important;
  transform: rotate(180deg) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   8. CTA ROW — more prominent, premium feel
   ──────────────────────────────────────────────────────────────────────────── */

.nav-mobile-cta-row {
  padding: 0.85rem 1rem 0.65rem !important;
  gap: 0.55rem !important;
  border-bottom: 2px solid #e5e7eb !important;
}

.nav-mobile-cta-pro {
  min-height: 46px !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  border-radius: 10px !important;
}

.nav-mobile-cta-elig {
  min-height: 46px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   9. DIVIDER — crisp separator line
   ──────────────────────────────────────────────────────────────────────────── */

.nav-mobile-accordion-body .nav-mobile-divider {
  margin: 0.25rem 1rem !important;
  background: #e5e7eb !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   10. ACCORDION BODY OPEN STATE — generous top/bottom padding
   ──────────────────────────────────────────────────────────────────────────── */

.nav-mobile-accordion-body.open {
  padding: 0.4rem 0 0.6rem !important;
}