/* =================================================
   ToolHive Mobile CSS
   =================================================
   ROOT CAUSE of half-screen bug: Multiple pages use
   "width: 100vw" + "margin-left: calc(50% - 50vw)"
   to break out of containers. On mobile, 100vw is
   wider than the screen (includes phantom scrollbar),
   creating horizontal overflow that shifts everything
   to the left half.
   ================================================= */

/* --- 1. Kill horizontal overflow at the source --- */
html {
    overflow-x: hidden;
}

/* --- 2. Fix every fullbleed breakout on mobile ---
   These exact classes use width:100vw + negative margins
   Found in: about, contact, categories, terms, privacy,
   messages, quotes/show pages.
   MUST use !important here because the original styles
   are in inline <style> tags that load after this file. */
@media (max-width: 900px) {
    .th-fullbleed,
    .th-chat-breakout,
    .th-breakout,
    .th-contact-hero,
    .th-about-hero,
    .th-hero {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .compare-table {
        min-width: 0 !important;
        width: 100% !important;
    }

    .rfq-modal {
        max-width: 100% !important;
    }
}

/* --- 3. Navbar --- */
@media (max-width: 768px) {
    .topbar .wrap {
        padding: 0 10px;
        gap: 6px;
        height: 54px;
    }

    .brand {
        font-size: 15px;
    }

    .nav-search {
        max-width: 160px;
        margin: 0 2px;
    }

    .nav-search__form {
        height: 34px;
    }

    .nav-search__input {
        font-size: 12px;
    }

    .nav-search__btn {
        display: none;
    }

    .header-right {
        gap: 3px;
    }

    .header-right .nav-action-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .nav-search {
        max-width: 120px;
    }
}

/* --- 4. Hero --- */
@media (max-width: 768px) {
    .th-home-hero {
        padding: 36px 0 30px;
    }

    .th-home-hero__content {
        padding: 0 16px;
    }

    .th-home-hero__title {
        font-size: 22px;
        line-height: 1.2;
    }

    .th-home-hero__subtitle {
        font-size: 13px;
    }

    .th-home-search {
        flex-direction: column;
        padding: 10px;
    }

    .th-home-search__field,
    .th-home-search__select {
        width: 100%;
        min-width: 0;
    }
}

/* --- 5. Stats bar --- */
@media (max-width: 768px) {
    .th-stats-bar__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 0 16px;
    }

    .th-stat {
        padding: 6px 0;
    }

    .th-stat__divider {
        display: none;
    }

    .th-stat__value {
        font-size: 22px;
    }
}

/* --- 6. Product grids --- */
@media (max-width: 640px) {
    .th-home-latest__grid,
    .products-grid-vertical,
    .catalogs-grid-vertical,
    .certifications-grid-vertical,
    .news-grid-vertical,
    .exhibitions-grid-vertical,
    .tools-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .th-cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .th-trust__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    .th-home-latest__grid,
    .products-grid-vertical,
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- 7. Product and profile page --- */
@media (max-width: 900px) {
    .product-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .sidecard {
        position: static;
    }

    .profile-layout-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 14px;
    }

    .contact-column {
        min-width: auto;
    }

    .contact-card {
        position: static;
    }

    .th-chat-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 8. Touch targets --- */
@media (max-width: 768px) {
    a, button, select,
    input[type="submit"],
    input[type="button"],
    .btn, .th-btn, .tab-link,
    .nav-action-btn {
        min-height: 44px;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    textarea, select {
        font-size: 16px;
    }
}

/* --- 9. Font scaling --- */
@media (max-width: 768px) {
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 17px; }
}

/* --- 10. Tables scroll horizontally --- */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- 11. Modals full width --- */
@media (max-width: 640px) {
    .th-modal-card,
    .rfq-modal {
        max-width: 100%;
        width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 90vh;
        overflow-y: auto;
    }

    .th-modal,
    .rfq-overlay {
        align-items: flex-end;
    }
}

/* --- 12. Cards less padding --- */
@media (max-width: 640px) {
    .content-card,
    .contact-card,
    .th-card {
        padding: 16px;
        border-radius: 12px;
    }

    .th-wrap {
        width: calc(100% - 24px);
    }
}

/* --- 13. Images --- */
img {
    max-width: 100%;
    height: auto;
}

/* --- 14. CTA buttons stack --- */
@media (max-width: 640px) {
    .th-cta__actions {
        flex-direction: column;
        gap: 10px;
    }

    .th-cta__actions .th-btn {
        width: 100%;
    }
}

/* --- 15. Safe areas for notch phones --- */
@supports (padding-top: env(safe-area-inset-top)) {
    header.topbar {
        padding-top: env(safe-area-inset-top);
    }

    .th-composer {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* --- 16. Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
}