/* =====================================================================
   AkiliLex - Mobile Responsive (v3, targeted to actual site markup)
   ---------------------------------------------------------------------
   Overwrite: /assets/css/mobile-responsive.css
   Breakpoints: 950px (tablet + landscape phones), 640px, 380px
   ===================================================================== */

/* ---------- GLOBAL FIXES ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; max-width: 100vw; overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
img, video, iframe { max-width: 100%; height: auto; }

/* Body scroll lock when mobile menu open */
body.mobile-nav-open { overflow: hidden; }

/* =====================================================================
   AKILILEX PUBLIC HEADER - specific to pub-header markup
   ===================================================================== */

/* Hamburger button (three bars) - hidden by default, shown on mobile */
.pub-mobile-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(10, 24, 40, 0.15);
    padding: 0;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-left: 8px;
    transition: border-color 0.15s;
}
.pub-mobile-toggle:hover { border-color: #0a1828; }
.pub-mobile-toggle .hamburger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #0a1828;
    border-radius: 1px;
    transition: transform 0.25s, opacity 0.25s;
}
.pub-mobile-toggle.is-open .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pub-mobile-toggle.is-open .hamburger-bar:nth-child(2) { opacity: 0; }
.pub-mobile-toggle.is-open .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav backdrop */
.pub-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 24, 40, 0.45);
    z-index: 998;
    animation: pubBackdropFadeIn 0.2s ease-out;
}
.pub-nav-backdrop.is-visible { display: block; }
@keyframes pubBackdropFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Mobile breakpoint (<=950px) ---------- */
@media (max-width: 950px) {
    /* Show hamburger */
    .pub-mobile-toggle { display: inline-flex !important; }

    /* Hide desktop-only Sign in / Request access buttons */
    .pub-action-desktop { display: none !important; }

    /* Convert horizontal nav into slide-in drawer from right */
    .pub-nav {
        display: flex !important;
        position: fixed !important;
        top: 0;
        right: -100%;
        width: 85% !important;
        max-width: 340px !important;
        height: 100vh;
        overflow-y: auto;
        background: #ffffff !important;
        box-shadow: -4px 0 24px rgba(10, 24, 40, 0.15);
        z-index: 999;
        padding: 72px 0 24px 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .pub-nav.is-open { right: 0 !important; }

    /* Style each nav link as a vertical list item */
    .pub-nav > a {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 16px 24px !important;
        color: #0a1828 !important;
        text-decoration: none !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        border-bottom: 1px solid #f0eee8 !important;
        min-height: 52px !important;
        transition: background 0.15s;
    }
    .pub-nav > a:hover, .pub-nav > a:focus {
        background: #f9f6ee !important;
    }

    /* CTA buttons at bottom of nav drawer */
    .pub-nav-cta {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: auto !important;
        padding: 24px !important;
        border-top: 1px solid #f0eee8 !important;
    }
    .pub-nav-cta a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
    }
}

/* ---------- Desktop breakpoint (>=951px) ---------- */
@media (min-width: 951px) {
    .pub-mobile-toggle,
    .pub-nav-backdrop { display: none !important; }
    /* Hide duplicate CTAs inside .pub-nav on desktop
       (they're already visible in .pub-actions .pub-action-desktop) */
    .pub-nav-cta { display: none !important; }
}

/* =====================================================================
   DASHBOARD LAYOUT (used once logged in)
   ===================================================================== */

@media (max-width: 950px) {
    /* Dashboard sidebar becomes a slide-in drawer from left */
    .sidebar, .side-nav, .dashboard-sidebar, aside.sidebar {
        position: fixed !important;
        top: 0;
        left: -100%;
        width: 85% !important;
        max-width: 320px;
        height: 100vh;
        overflow-y: auto;
        background: #fff;
        box-shadow: 4px 0 24px rgba(10, 24, 40, 0.15);
        z-index: 999;
        padding-top: 60px;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .sidebar.is-open, .side-nav.is-open,
    .dashboard-sidebar.is-open, aside.sidebar.is-open {
        left: 0 !important;
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(10, 24, 40, 0.45);
        z-index: 998;
    }
    .sidebar-backdrop.is-visible { display: block; }

    .main-content, .content-area, .dashboard-main, main.content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 16px !important;
    }
}

/* =====================================================================
   GENERIC MOBILE HELPERS
   ===================================================================== */

/* Tap targets */
@media (max-width: 950px) {
    a[href], button, input[type="submit"], input[type="button"],
    .btn, .button {
        min-height: 44px;
    }
    input[type="text"], input[type="email"], input[type="password"],
    input[type="tel"], input[type="number"], input[type="url"],
    input[type="search"], select, textarea {
        min-height: 44px;
        font-size: 16px;
        padding: 10px 12px;
    }
}

/* Section padding + typography */
@media (max-width: 640px) {
    h1 { font-size: 26px !important; line-height: 1.25 !important; }
    h2 { font-size: 22px !important; line-height: 1.3 !important; }
    h3 { font-size: 18px !important; }
    body { font-size: 15px !important; }
    section { padding: 32px 16px !important; }
    .hero, .hero-grid, .pub-section { padding-left: 16px !important; padding-right: 16px !important; }
}

@media (max-width: 380px) {
    h1 { font-size: 22px !important; }
    h2 { font-size: 19px !important; }
    body { font-size: 14px !important; }
}

/* Hero grid stacks on mobile */
@media (max-width: 950px) {
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .hero-visual { order: 2; }
    .hero-text { order: 1; }
}

/* Feature/pricing grids stack */
@media (max-width: 640px) {
    .feature-grid,
    .pricing-grid,
    .steps,
    .qw-steps,
    .testimonial-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .pub-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* Tablet: 2 columns instead of collapsing to 1 */
@media (min-width: 641px) and (max-width: 950px) {
    .feature-grid,
    .pricing-grid,
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Container padding on mobile */
@media (max-width: 950px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Tables scroll horizontally on mobile */
@media (max-width: 950px) {
    table.responsive {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* Modals full-screen on mobile */
@media (max-width: 950px) {
    .modal, .dialog, .popup {
        width: 96% !important;
        max-width: 96% !important;
        margin: 20px auto !important;
    }
}

/* Filter/toolbar bars stack on mobile */
@media (max-width: 950px) {
    .filters, .filter-bar, .toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .filters > *, .filter-bar > *, .toolbar > * {
        width: 100% !important;
    }
}

/* Print */
@media print {
    .pub-mobile-toggle, .pub-nav-backdrop,
    .sidebar, .sidebar-backdrop { display: none !important; }
    .main-content { margin-left: 0 !important; width: 100% !important; }
}