/**
 * AddaInfluencer — Mobile Modernization Layer
 * /assets/css/mobile-modern.css
 *
 * Site-wide mobile polish. Layered on top of the existing CSS so we
 * don't break desktop. Everything here is scoped inside `@media`
 * blocks so it only fires below 920px (matches the existing
 * hamburger breakpoint in header.php).
 *
 * Adds:
 *   • Larger touch targets (44×44 min, iOS HIG)
 *   • Modern type scale with better line-height
 *   • Cleaner mobile spacing on heroes / cards / footers
 *   • Sticky bottom nav (5 destinations) — Modern SaaS pattern
 *   • Polished drawer animations + frosted overlay
 *   • Edge-to-edge cards (no awkward gutters on phones)
 *   • Safe-area-inset support for iPhone notches
 *
 * Doesn't change: any link, any text content, any markup — only look.
 *
 * Load order: this is enqueued LAST in functions.php so it wins
 * the cascade where intended.
 */

/* =====================================================================
   0. SAFE-AREA INSETS (iPhone notch / home indicator)
   ===================================================================== */
:root {
    --adi-safe-bottom: env(safe-area-inset-bottom, 0px);
    --adi-safe-top:    env(safe-area-inset-top, 0px);
}

/* =====================================================================
   1. STICKY BOTTOM NAVIGATION (mobile only, 5 destinations)
   Injected by wp_footer in functions.php so it appears on every page
   except the dashboard (which has its own sidebar nav).
   ===================================================================== */
.adi-bottom-nav {
    display: none;
}
@media (max-width: 920px) {
    .adi-bottom-nav {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 90;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 2px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: saturate(180%) blur(14px);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid #E5E7EB;
        padding: 6px 4px calc(6px + var(--adi-safe-bottom));
        box-shadow: 0 -4px 16px rgba(15, 23, 42, .04);
    }
    .adi-bottom-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 6px 4px;
        text-decoration: none;
        color: #64748B;
        font-size: 10.5px;
        font-weight: 600;
        border-radius: 10px;
        transition: background .15s, color .15s, transform .15s;
        min-height: 44px;
        position: relative;
    }
    .adi-bottom-nav__item:active { transform: scale(0.95); }
    .adi-bottom-nav__item:hover,
    .adi-bottom-nav__item.is-active {
        color: #4F46E5;
        background: #EEF2FF;
    }
    .adi-bottom-nav__icon {
        font-size: 19px;
        line-height: 1;
    }
    .adi-bottom-nav__label {
        line-height: 1;
        white-space: nowrap;
    }
    /* Live indicator dot — pulsing on /live/ tab */
    .adi-bottom-nav__live-dot {
        position: absolute;
        top: 8px;
        right: calc(50% - 18px);
        width: 7px;
        height: 7px;
        background: #EF4444;
        border-radius: 50%;
        animation: adi-bn-pulse 1.4s infinite;
    }
    @keyframes adi-bn-pulse {
        0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,.5); }
        50%      { transform: scale(1.3); opacity: .6; box-shadow: 0 0 0 6px rgba(239,68,68,0); }
    }

    /* Push every page content up so the bottom nav doesn't cover it */
    body:not(.adi-dash-body):not(.adi-bottom-nav-hidden) {
        padding-bottom: calc(72px + var(--adi-safe-bottom));
    }
}

/* Hide bottom nav on the standalone dashboard layout */
body.adi-dash-body .adi-bottom-nav { display: none !important; }

/* =====================================================================
   2. MOBILE HEADER POLISH
   Sticky, compact, frosted. Also gives the logo more presence.
   ===================================================================== */
@media (max-width: 920px) {
    .adi-header {
        position: sticky;
        top: 0;
        z-index: 80;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: saturate(180%) blur(14px);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        border-bottom: 1px solid rgba(15, 23, 42, .06);
    }
    .adi-header-inner { padding: 10px 14px; min-height: 56px; }
    .adi-logo img, .adi-logo .logo-text { font-size: 18px; }
    .adi-burger { width: 44px; height: 44px; }
}

/* =====================================================================
   3. DRAWER — modernized internals
   Edge-to-edge sections, larger touch targets, smoother accordions.
   ===================================================================== */
@media (max-width: 920px) {
    .adi-mobile-drawer {
        width: min(420px, 94vw) !important;
        padding-bottom: calc(100px + var(--adi-safe-bottom)) !important;
        background: #FAFBFC !important;
    }
    .adi-mobile-drawer .adi-md-header {
        padding: 14px 18px calc(14px + var(--adi-safe-top));
    }
    .adi-md-link {
        padding: 16px 18px !important;
        font-size: 15px !important;
        min-height: 56px;
        border-bottom: 1px solid rgba(15, 23, 42, .04) !important;
        background: #fff;
    }
    .adi-md-link:active { background: #EEF2FF !important; }
    .adi-md-acc summary {
        padding: 16px 18px !important;
        min-height: 56px;
        background: #fff;
    }
    .adi-md-acc-link {
        padding: 12px 14px !important;
        font-size: 14px !important;
        min-height: 44px;
    }
    .adi-md-acc-link:active { background: #EEF2FF !important; transform: scale(0.98); }
    /* Frosted overlay enhancement */
    .adi-mobile-overlay { backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; }
    /* Bottom contact strip — give it presence */
    .adi-md-foot {
        padding: 14px 18px calc(14px + var(--adi-safe-bottom)) !important;
    }
    .adi-md-foot-link {
        padding: 14px 10px !important;
        font-size: 14px !important;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* =====================================================================
   4. MOBILE TYPOGRAPHY — more honest hierarchy
   ===================================================================== */
@media (max-width: 780px) {
    h1, .h1, .archive-title { font-size: 28px !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; }
    h2, .h2 { font-size: 22px !important; line-height: 1.25 !important; }
    h3, .h3 { font-size: 18px !important; line-height: 1.3 !important; }
    p { line-height: 1.6 !important; }
}
@media (max-width: 480px) {
    h1, .h1, .archive-title { font-size: 24px !important; }
    h2, .h2 { font-size: 19px !important; }
    body { font-size: 14.5px; }
}

/* =====================================================================
   5. MOBILE HERO SECTIONS — universal polish
   Targets any section with a gradient/dark background using inline styles.
   ===================================================================== */
@media (max-width: 780px) {
    section[style*="linear-gradient"],
    section[style*="background:#0F172A"],
    section[style*="background: #0F172A"] {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    /* Reduce ridiculous hero heights on mobile */
    .adi-price-hero,
    .adi-briefs-hero,
    .archive-header,
    .adi-home-hero,
    section[class*="hero"] {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
}

/* =====================================================================
   6. CARDS & GRIDS — edge-to-edge on phones
   ===================================================================== */
@media (max-width: 560px) {
    .container, .adi-container, .adi-briefs-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    /* Force any 3+ col grid into 2 then 1 col on small phones */
    [style*="grid-template-columns:repeat(3,1fr)"],
    [style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
}
@media (max-width: 380px) {
    [style*="grid-template-columns:repeat(2,1fr)"],
    [style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

/* =====================================================================
   7. FORMS — bigger touch targets, no zoom on focus (iOS Safari)
   ===================================================================== */
@media (max-width: 780px) {
    input[type=text], input[type=email], input[type=tel], input[type=password],
    input[type=search], input[type=url], input[type=number], select, textarea {
        font-size: 16px !important; /* prevents iOS zoom-on-focus */
        padding: 12px 14px !important;
        border-radius: 10px !important;
    }
    button, .button, .adi-btn,
    a.adi-btn, a.adi-btn--primary {
        min-height: 44px;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* =====================================================================
   8. FOOTER — tighter, cleaner on mobile
   (Bottom-nav clearance handled by body padding-bottom in section 1.)
   ===================================================================== */
@media (max-width: 780px) {
    footer .footer-heading {
        font-size: 12px !important;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    footer .footer-links a {
        padding: 8px 0;
        font-size: 13.5px;
        display: block;
    }
}

/* =====================================================================
   9. MOBILE BUTTON ANIMATIONS — feel native
   ===================================================================== */
@media (max-width: 780px) {
    a, button, .adi-btn { -webkit-tap-highlight-color: transparent; }
    a:active, button:active, .adi-btn:active { transform: scale(0.97); }
}

/* =====================================================================
  10. STICKY UPGRADE / CLAIM SPOT BANNER (the top promo bar)
   Make it dismissible-feeling — shorter on mobile, single line
   ===================================================================== */
@media (max-width: 560px) {
    .adi-topbar { font-size: 11.5px !important; padding: 6px 0 !important; }
    .adi-topbar-inner { gap: 8px !important; }
}

/* =====================================================================
  11. ACCESSIBLE FOCUS RINGS ON MOBILE TOO
   ===================================================================== */
@media (max-width: 920px) {
    a:focus-visible, button:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, .35);
        border-radius: 8px;
    }
}

/* =====================================================================
  12. HIDE NON-ESSENTIAL CHROME ON MOBILE TO REDUCE NOISE
   ===================================================================== */
@media (max-width: 560px) {
    /* Hide phone number from top bar — already in bottom nav contact */
    .adi-topbar a[href^="tel:"] { display: none; }
}

/* =====================================================================
  13. LIFT FLOATING WIDGETS ABOVE THE BOTTOM NAV
   The chatbot (bottom-right) and "Chat with Founder" WhatsApp button
   (bottom-left) both sit at bottom:24px by default. The bottom nav is
   72-ish px tall, so the floaters land inside the nav and overlap
   icons. Push them above on mobile.
   ===================================================================== */
@media (max-width: 920px) {
    body:not(.adi-dash-body) #adi-chat-widget {
        bottom: calc(86px + var(--adi-safe-bottom)) !important;
        right: 14px !important;
    }
    body:not(.adi-dash-body) .adi-whatsapp-floater {
        bottom: calc(86px + var(--adi-safe-bottom)) !important;
        left: 14px !important;
    }
    /* On very small screens, also shrink the floaters so they don't
       crowd the nav corners visually */
    @media (max-width: 380px) {
        #adi-chat-btn { width: 52px !important; height: 52px !important; font-size: 22px !important; }
        .adi-whatsapp-floater { padding: 10px 12px !important; }
    }
}