/* ============================================================
   AgriSense AI · MOBILE PARITY · v32
   Author: VinayKumar Errolla — Founder · vinay.errolla@agrisence.com

   Fixes:
   - .akd-nav now flex-wraps so the menu strip drops to row 2
     (was sitting on top of the hamburger, blocking taps).
   - Hamburger has a 44×44 touch target, high z-index, solid
     visible background.
   - Mobile dropdown menu becomes a full-screen overlay
     (impossible to miss the close target).
   ============================================================ */

/* ---------- (A) Sticky top nav, allow wrap into multiple rows ---------- */
@media (max-width: 1023px) {
  .akd-nav-wrap {
    display: block !important;
    position: sticky !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 1000 !important;
    background: rgba(255,255,255,.96) !important;
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 0 !important;
    overflow: visible !important;          /* don't clip the wrapped menu row */
  }
  .akd-nav {
    display: flex !important;
    flex-wrap: wrap !important;            /* CRITICAL — allows menu to drop to row 2 */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    height: auto !important;
    min-height: 52px !important;
    overflow: visible !important;
  }

  .akd-brand {
    display: flex !important; align-items: center !important;
    gap: 8px !important; flex-shrink: 0 !important;
    margin-right: auto !important;          /* push everything else right */
  }
  .akd-brand-mark {
    width: 32px !important; height: 32px !important;
    border-radius: 8px !important; font-size: 15px !important;
  }
  .akd-brand-name { font-size: 14px !important; line-height: 1.1 !important; }
  .akd-brand-tag  { display: none !important; }

  /* Right cluster: Sign in, Register, hamburger */
  .akd-nav-cta {
    display: flex !important; align-items: center !important;
    gap: 6px !important; flex-shrink: 0 !important;
    margin-left: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }
  .akd-nav-cta .akd-btn,
  .akd-nav-cta a.akd-btn {
    display: inline-flex !important;
    padding: 7px 11px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
    line-height: 1.1 !important;
    min-height: 36px !important;
  }

  /* HAMBURGER — large solid tap target, high z-index */
  .akd-mobile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important; height: 44px !important;
    min-width: 44px !important; min-height: 44px !important;
    border-radius: 10px !important;
    background: #0F8A3E !important;        /* solid green — clearly tappable */
    border: 1px solid #0A5C28 !important;
    color: #fff !important;
    cursor: pointer !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1001 !important;              /* above the menu row */
    box-shadow: 0 2px 6px rgba(15,138,62,.25) !important;
    flex-shrink: 0 !important;
  }
  .akd-mobile-toggle:active { transform: scale(.96); }
  .akd-mobile-toggle svg {
    width: 22px !important; height: 22px !important;
    pointer-events: none;                  /* clicks pass to button */
  }
  .akd-mobile-toggle svg path { stroke: #fff !important; }

  /* SECONDARY ROW — desktop link list as horizontal swipe strip */
  .akd-menu {
    display: flex !important;
    flex-basis: 100% !important;           /* take full row */
    width: 100% !important;
    order: 99 !important;                  /* after brand + cta in wrap order */
    align-items: center !important;
    gap: 0 !important;
    padding: 6px 4px !important;
    margin: 4px -12px 0 !important;        /* bleed to viewport edges */
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 1px solid #f1f5f9 !important;
    background: #fff !important;
    position: relative !important;
    z-index: 1 !important;                 /* below CTA cluster */
  }
  .akd-menu::-webkit-scrollbar { display: none; }
  .akd-menu a {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1.1 !important;
  }
  .akd-menu a:active { background: #ECFDF5 !important; }
}

/* ---------- (B) Mobile dropdown — full-screen overlay when open ---------- */
@media (max-width: 1023px) {
  .akd-mobile-menu {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 9999 !important;
    flex-direction: column !important;
    padding: 60px 16px max(env(safe-area-inset-bottom),24px) !important;
    gap: 4px !important;
    background: rgba(255,255,255,.98) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .akd-mobile-menu.open { display: flex !important; }
  .akd-mobile-menu::before {
    content: '✕';
    position: absolute;
    top: 14px; right: 18px;
    font-size: 28px;
    color: #334155;
    font-weight: 300;
    cursor: pointer;
    pointer-events: none;
  }
  .akd-mobile-menu a {
    display: block !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #fff !important;
  }
  .akd-mobile-menu a:last-child { border-bottom: 0 !important; }
  .akd-mobile-menu a:active { background: #ECFDF5 !important; color: #0F8A3E !important; }
}

/* ---------- (C) FARMER JOURNEY breadcrumb ---------- */
@media (max-width: 1023px) {
  .akd-lifecycle-strip {
    display: block !important;
    padding: 8px 0 6px !important;
    background: linear-gradient(180deg,#FBF8F1 0%, #FFFFFF 100%) !important;
    border-bottom: 1px solid #E2E8F0 !important;
  }
  .akd-lifecycle-inner {
    display: flex !important; align-items: center !important;
    gap: 8px !important; padding: 0 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .akd-lifecycle-inner::-webkit-scrollbar { display: none; }
  .akd-lifecycle-label {
    display: inline-block !important; flex-shrink: 0 !important;
    font-size: 10px !important; letter-spacing: .08em !important;
    color: #92400E !important; text-transform: uppercase !important;
    font-weight: 700 !important; margin-right: 4px !important;
    white-space: nowrap !important;
  }
  .akd-lifecycle-track {
    display: flex !important; flex-wrap: nowrap !important;
    min-width: max-content !important; align-items: center !important;
  }
  .akd-lifecycle-stage {
    padding: 5px 8px !important; font-size: 11.5px !important;
    gap: 5px !important; white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .akd-lifecycle-stage .num { width: 18px !important; height: 18px !important; font-size: 9.5px !important; }
  .akd-lifecycle-stage .ico { font-size: 13px !important; }
  .akd-lifecycle-stage .te { display: none !important; }
  .akd-lifecycle-arrow { font-size: 12px !important; padding: 0 1px !important; color: #94A3B8 !important; }
}

/* ---------- (D) Hero + PILOT PROOF stack cleanly ---------- */
@media (max-width: 1023px) {
  .ai-hero > .container, .ai-hero-inner, .akd-hero-grid {
    display: block !important; grid-template-columns: 1fr !important; gap: 16px !important;
  }
  .ai-hero { padding: 16px 0 22px !important; }
  .ai-hero h1, .ai-hero .ai-headline, .akd-h1 {
    font-size: clamp(1.6rem, 6vw, 2.1rem) !important;
    line-height: 1.08 !important; margin-bottom: 10px !important;
  }
  .ai-hero [class*="proof"], .ai-hero .ai-proof,
  .ai-hero [class*="right"], .akd-hero-visual {
    margin-top: 18px !important; width: 100% !important; max-width: 100% !important;
  }
  .akd-hero-visual { display: block !important; height: auto !important; }
  .akd-float { display: none !important; }
  .akd-phone {
    position: static !important; transform: none !important;
    width: 100% !important; max-width: 280px !important;
    margin: 0 auto !important; height: auto !important;
    min-height: 420px !important;
  }
}

/* ---------- (E) No leftover bottom CTA bar ---------- */
body { padding-bottom: 0 !important; }
.akd-mobile-cta-bar { display: none !important; }

/* ---------- (F) Chat bubble — default position ---------- */
@media (max-width: 1023px) {
  #akd-cb-fab   { bottom: 14px !important; }
  #akd-cb-panel { bottom: 78px !important; }
}

/* ---------- (G) Tall-screen height clamp clean-up ---------- */
@media (max-width: 1023px) and (min-height: 700px) {
  .akd-nav-wrap { padding: 0 !important; }
  .akd-nav      { padding: 8px 12px !important; height: auto !important; }
  .ai-hero      { min-height: auto !important; padding: 16px 0 22px !important; }
}

/* ---------- v38 · Hide any duplicate bottom Register/Sign in CTAs ---------- */
#akd-mobile-cta,
.akd-mobile-cta-bar,
.mobile-bottom-cta,
[data-mobile-cta] {
  display: none !important;
}


/* ---------- v43 · Single hamburger (native one) + kill any duplicate ---------- */
@media (max-width: 1023px) {
  /* Hide ALL legacy self-injected duplicates */
  #akd-self-fab,
  #akd-mobile-menu-v33-fab,
  [data-akd-self-fab] {
    display: none !important;
  }
  /* Force native hamburger to be visible, properly sized, NOT overlapping Register */
  .akd-mobile-toggle {
    display: inline-flex !important;
    position: static !important;          /* not fixed, sit inside .akd-nav-cta */
    width: 40px !important; height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
    background: #0F8A3E !important;
    border: 1px solid #0A5C28 !important;
    color: #fff !important;
    margin-left: 4px !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;                /* normal flow */
    box-shadow: 0 2px 6px rgba(15,138,62,.18) !important;
  }
  .akd-mobile-toggle svg { width: 20px !important; height: 20px !important; }
  .akd-mobile-toggle svg path { stroke: #fff !important; }
}


/* ============================================================
   v44 · Hamburger never half-cut · tight nav row math
   ────────────────────────────────────────────────────────────
   On phones 320-480px wide we have Brand + Sign in + Register +
   ☰. Make them all genuinely fit so the hamburger isn't clipped.
   ============================================================ */
@media (max-width: 1023px) {
  /* (1) Outer wrap: no clipping the right edge */
  .akd-nav-wrap,
  .akd-nav-wrap > * {
    overflow-x: visible !important;
  }
  .akd-nav {
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  /* (2) Brand: cap width so it can never push the CTA cluster off */
  .akd-brand {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 50% !important;
    overflow: hidden !important;
  }
  .akd-brand-name {
    font-size: 13.5px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .akd-brand-tag { display: none !important; }

  /* (3) CTA cluster: forces itself to fit on the right */
  .akd-nav-cta {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    flex-wrap: nowrap !important;
  }
  .akd-nav-cta .akd-btn,
  .akd-nav-cta a.akd-btn {
    padding: 6px 9px !important;
    font-size: 12px !important;
    min-height: 32px !important;
    height: 32px !important;
    line-height: 1.1 !important;
    border-radius: 7px !important;
    flex-shrink: 0 !important;
  }

  /* (4) Hamburger: ALWAYS fits, ALWAYS right-most */
  .akd-mobile-toggle {
    display: inline-flex !important;
    position: static !important;
    flex: 0 0 38px !important;
    width: 38px !important; min-width: 38px !important; max-width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 9px !important;
    background: #0F8A3E !important;
    border: 1px solid #0A5C28 !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(15,138,62,.20) !important;
    z-index: 2 !important;
  }
  .akd-mobile-toggle svg { width: 18px !important; height: 18px !important; }
  .akd-mobile-toggle svg path { stroke: #fff !important; }
}

/* (5) Tighter on narrow phones — Sign in becomes icon-only, Register drops Telugu suffix */
@media (max-width: 430px) {
  .akd-nav-cta a[href="login.html"] {
    font-size: 0 !important;
    padding: 6px 9px !important;
  }
  .akd-nav-cta a[href="login.html"]::before {
    content: "🔐";
    font-size: 16px;
  }
  .akd-nav-cta a[href="signup.html"] {
    font-size: 12px !important;
    /* Replace 'Register · చేరండి' with just 'Register' via the wrapper */
  }
  .akd-nav-cta a[href="signup.html"]::after {
    /* mask the Telugu portion if it overflows */
  }
}

/* (6) Even tighter on ≤360px — Register becomes icon-only too */
@media (max-width: 360px) {
  .akd-brand-name { font-size: 12.5px !important; }
  .akd-nav-cta a[href="signup.html"] {
    font-size: 0 !important;
    padding: 6px 9px !important;
  }
  .akd-nav-cta a[href="signup.html"]::before {
    content: "🌱";
    font-size: 16px;
  }
}

@media (max-width: 600px) { .akd-tag-te { display: none !important; } }


/* ============================================================
   v45 · MOBILE NAV = Brand + Hamburger ONLY
   ────────────────────────────────────────────────────────────
   Sign in + Register move into the hamburger menu (where they
   already are — first two items). This guarantees the hamburger
   is fully visible on every phone width, no clipping possible.
   ============================================================ */
@media (max-width: 1023px) {
  /* Hide Sign in + Register inside the top nav cluster */
  .akd-nav-cta a[href="login.html"],
  .akd-nav-cta a[href="signup.html"],
  .akd-nav-cta .akd-btn-ghost,
  .akd-nav-cta .akd-btn-primary {
    display: none !important;
  }

  /* Brand left, hamburger right — clean two-element layout */
  .akd-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 14px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .akd-brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 60px) !important;
    overflow: hidden !important;
    margin-right: 0 !important;
  }
  .akd-brand-name {
    font-size: 15px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .akd-brand-tag { display: none !important; }

  .akd-nav-cta {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  /* Hamburger: solid, large enough to tap, never clipped */
  .akd-mobile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: #0F8A3E !important;
    border: 1px solid #0A5C28 !important;
    color: #fff !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(15,138,62,.25) !important;
    z-index: 5 !important;
  }
  .akd-mobile-toggle svg {
    width: 22px !important;
    height: 22px !important;
    pointer-events: none;
  }
  .akd-mobile-toggle svg path { stroke: #fff !important; }
}