/**
 * Mobile Responsiveness Fixes
 * Targets: iPhone 14 (390x844) and other small viewports
 * Added: 2026-03-29
 *
 * Issues fixed:
 *   1.   Hero h1 font (60px) overflows on mobile — reduced to 2.5rem
 *   2.   Hero chat widget w-80 (320px fixed) overflows — capped with max-w + inset
 *   3.   Public homepage overflow-x caused by hero right column on mobile
 *   4.      No mobile hamburger navigation on public pages
 *   5.      Footer link tap targets too small (57×17px, needs ≥44×44px)
 *   6.      Testimonial dot tap targets 8×8px — enlarged to 44px touch area
 *   7.      App navbar nav-link height 40px < 44px on mobile
 *   8.      "Start Free" button in header too small on mobile (137×40px)
 *   9.  px-6 hero padding on 390px leaves no room for large demo widget
 *  10.  Hero section bottom padding reduced on mobile (py-32 = 8rem)
 */

/* ============================================================
   1. GLOBAL: Prevent horizontal overflow on all public pages
   ============================================================ */
html, body {
    /*  Prevent any element from causing horizontal scroll */
    overflow-x: hidden;
}

/* ============================================================
   2. PUBLIC HEADER: Mobile hamburger navigation
   ============================================================ */

/* Mobile menu toggle button — hidden on md+ */
.mobile-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #0f172a;
    border-radius: 8px;
    flex-shrink: 0;
    /*  Ensures minimum 44×44px tap target */
}

/* Mobile nav overlay drawer */
.mobile-nav-drawer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

.mobile-nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
}

.mobile-nav-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(320px, 88vw);
    height: 100%;
    background: #ffffff;
    box-shadow: -8px 0 40px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    padding: 24px 20px 32px;
    overflow-y: auto;
}

.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.mobile-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: #f1f5f9;
    border-radius: 10px;
    cursor: pointer;
    color: #0f172a;
    font-size: 1.25rem;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    /*  52px height ensures ≥44px tap target */
}

.mobile-nav-link:hover,
.mobile-nav-link:focus {
    background: #f1f5f9;
    color: #0f172a;
}

.mobile-nav-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.mobile-nav-signin {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
}

.mobile-nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: 12px;
    background: linear-gradient(to right, #2563eb, #8b5cf6);
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
}

.mobile-nav-drawer.is-open {
    display: block;
}

@media (max-width: 767px) {
    /*  Show hamburger button on mobile */
    .mobile-nav-toggle {
        display: flex;
    }
}

/* ============================================================
   3. HOMEPAGE HERO: Font size and layout fixes
   ============================================================ */

@media (max-width: 767px) {
    /*  Hero heading: 60px (text-6xl) → 2.5rem on mobile */
    .hero-heading {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }

    /*  Reduce hero section vertical padding on mobile */
    .hero-section {
        padding-top: 5rem !important;
        padding-bottom: 4rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /*  Hide the right-column browser/chat demo on mobile to prevent overflow */
    .hero-demo-column {
        display: none !important;
    }

    /*  Hero CTA buttons: ensure full-width on mobile */
    .hero-cta-wrap {
        flex-direction: column !important;
    }

    .hero-cta-wrap a {
        /*  Ensure ≥44px tap target */
        min-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ============================================================
   4. HOMEPAGE: Section padding reduction on small screens
   ============================================================ */

@media (max-width: 767px) {
    /*  Reduce py-32 (8rem) sections on mobile */
    .section-py-large {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    /*  Reduce px-6 to px-4 on sections where content overflows */
    .section-px-standard {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ============================================================
   5. FOOTER: Tap target fixes for small links
   ============================================================ */

/* Footer links: extend tap area to ≥44px height
   Font size 0.875rem ≈ 14px at line-height 1.25rem ≈ 20px.
   Add 12px padding each side: 20 + 12 + 12 = 44px */
.public-footer-link {
    display: inline-block;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Footer list items: ensure vertical spacing for tap targets */
.public-footer li {
    /* Give each list item enough vertical breathing room */
    line-height: 1;
}

/* ============================================================
   7. APP LAYOUT: Navbar improvements on mobile
   ============================================================ */

@media (max-width: 767.98px) {
    /* Ensure sidebar toggle is ≥44px tap target */
    .main-header.navbar .nav-link.js-sidebar-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Team switcher — constrain width on mobile to prevent overflow */
    .team-switcher-toggle {
        max-width: 140px;
        overflow: hidden;
    }

    .team-switcher-toggle span:not(.team-switcher-avatar-placeholder):not(.header-dropdown-caret) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 90px;
        display: inline-block;
    }

    /* App container padding on mobile */
    .content-wrapper > .content > .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* ============================================================
   8. PUBLIC HEADER: "Start Free" button tap target fix
   ============================================================ */

/* CTA button in header: ensure ≥44px height */
#main-nav a[href*="register"] {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================================
   9. FORMS: Input fields on mobile
   ============================================================ */

@media (max-width: 640px) {
    /*  Ensure form grid collapses on small screens */
    .auth-grid {
        grid-template-columns: 1fr !important;
    }

    /* Auth shell compact on very small screens */
    .auth-shell {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ============================================================
   10. IMAGES: Ensure all images are responsive
   ============================================================ */

/* Safety net: all images should not overflow their container */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   11. PUBLIC NAV: Prevent header content from overflowing
   ============================================================ */

@media (max-width: 767px) {
    /* Constrain nav inner container padding on mobile */
    #main-nav .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ============================================================
   12. HOMEPAGE: Demo chat widget icon buttons (20×28px → 44×44px)
   ============================================================ */

/* Decorative icon-only buttons in the live chat demo section:
   minimize, close, and send buttons. Use the .demo-icon-btn class
   which is added in the template. */
.demo-icon-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================================
   13. HOMEPAGE: Logo link tap target in header (137×40 → 44px)
   ============================================================ */

/* Ensure header logo link meets 44px minimum tap height */
#main-nav a[aria-label="AskAnyDocs home"] {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
}

/* ============================================================
   13. HOMEPAGE: Suggested-question chip buttons (196×30px → 44px)
   ============================================================ */

/* Quick-ask chip buttons: increase vertical padding for ≥44px tap height.
   These are suggested question chips in the demo section. */
@media (max-width: 767px) {
    button.text-xs.bg-white.border.border-gray-300 {
        /* Increase padding so touch target reaches ≥44px */
        padding-top: 0.8125rem !important; /* 13px */
        padding-bottom: 0.8125rem !important;
        min-height: 44px !important;
    }
}

/* ============================================================
   14. HOMEPAGE: Testimonial nav arrows (40×40 → 44×44)
   ============================================================ */

/* Prev/Next arrow buttons: increase to minimum 44×44px */
button[data-dir="prev"],
button[data-dir="next"] {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
}

/* ============================================================
   15. APP LAYOUT: Sidebar nav-link height (40px → 44px)
   ============================================================ */

/* AdminLTE nav-links in sidebar: ensure ≥44px tap target */
.nav-sidebar .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* Team switcher and user dropdown toggles: ensure ≥44px height */
.team-switcher-toggle,
.header-user-toggle {
    min-height: 44px !important;
}

/* ============================================================
   16. AUTH PAGES: Small link tap targets (43×16, 328×16)
   ============================================================ */

/* "Terms", "Sign in instead" and similar small auth links */
.auth-card-footer a,
.auth-link,
.auth-inline a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 4px;
    padding-bottom: 4px;
}