/* ===================================================================
   FABRIXA RESPONSIVE LAYER
   Drop into: brighthub-fabrixa/assets/css/responsive.css
   Auto-enqueued via assets/css loader.
   --------------------------------------------------------------------
   Strategy:
   The PHP page templates (front-page.php, page-pricing.php,
   page-contact.php) use inline grid styles for fast layout, e.g.:
     style="display:grid; grid-template-columns:repeat(3, 1fr);"

   Inline styles beat external CSS by specificity, so on mobile we
   need attribute selectors with !important to collapse them.
   This file does that across the three custom pages.
   =================================================================== */


/* ===================================================================
   1. CONTAINER + SECTION PADDING — tighten on small screens
   =================================================================== */

@media (max-width: 1024px) {
    main.fbx-brand .fbx-section,
    main.fbx-page-pricing .fbx-section,
    main.fbx-page-contact .fbx-section {
        padding-top: 96px !important;
        padding-bottom: 96px !important;
    }
}

@media (max-width: 760px) {
    main.fbx-brand .fbx-section,
    main.fbx-page-pricing .fbx-section,
    main.fbx-page-contact .fbx-section {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .fbx-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 480px) {
    main.fbx-brand .fbx-section,
    main.fbx-page-pricing .fbx-section,
    main.fbx-page-contact .fbx-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
}


/* ===================================================================
   2. HERO SECTIONS — different padding rhythm
   =================================================================== */

@media (max-width: 760px) {
    .fbx-px-hero,
    .fbx-cn-hero,
    body.home .fbx-section:first-of-type,
    body.fbx-home main .fbx-section:first-of-type {
        padding-top: 88px !important;
        padding-bottom: 64px !important;
        min-height: auto !important;
    }
}


/* ===================================================================
   3. INLINE GRIDS — collapse 3/4-col layouts to 1 col on mobile
   --------------------------------------------------------------------
   Targets every inline `grid-template-columns` declaration inside
   our custom-page <main> elements and forces single-column at mobile.
   =================================================================== */

@media (max-width: 760px) {
    main.fbx-brand [style*="grid-template-columns"],
    main.fbx-brand div[style*="grid-template-columns"],
    main.fbx-brand section[style*="grid-template-columns"] > [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Tablet: 4-col grids drop to 2, 3-col grids drop to 2 */
@media (min-width: 761px) and (max-width: 1024px) {
    main.fbx-brand [style*="grid-template-columns: repeat(4"],
    main.fbx-brand [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    main.fbx-brand [style*="grid-template-columns: repeat(3"],
    main.fbx-brand [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* ===================================================================
   4. STAT STRIP — special 4-col layout on homepage
   =================================================================== */

@media (max-width: 760px) {
    body.home .fbx-stats .fbx-container,
    body.fbx-home .fbx-stats .fbx-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

@media (max-width: 480px) {
    body.home .fbx-stats .fbx-container,
    body.fbx-home .fbx-stats .fbx-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}


/* ===================================================================
   5. TIER FINDER (pricing) — already has its own breakpoints
   but tighten the inputs row at very small sizes
   =================================================================== */

@media (max-width: 480px) {
    .fbx-px-inputs {
        padding: 24px !important;
    }

    .fbx-px-tier {
        padding: 20px 18px !important;
    }
}


/* ===================================================================
   6. TYPOGRAPHY — tighten headlines on phones
   =================================================================== */

@media (max-width: 760px) {
    main.fbx-brand h1,
    main.fbx-page-pricing h1,
    main.fbx-page-contact h1 {
        font-size: 2.25rem !important;
        line-height: 1.1 !important;
        letter-spacing: -0.01em !important;
    }

    main.fbx-brand h2,
    main.fbx-page-pricing h2,
    main.fbx-page-contact h2 {
        font-size: 1.75rem !important;
        line-height: 1.15 !important;
    }

    main.fbx-brand h3,
    main.fbx-page-pricing h3,
    main.fbx-page-contact h3 {
        font-size: 1.25rem !important;
    }
}

@media (max-width: 480px) {
    main.fbx-brand h1,
    main.fbx-page-pricing h1,
    main.fbx-page-contact h1 {
        font-size: 1.875rem !important;
    }

    main.fbx-brand h2,
    main.fbx-page-pricing h2,
    main.fbx-page-contact h2 {
        font-size: 1.5rem !important;
    }
}


/* ===================================================================
   7. BUTTONS — full-width block on phones for thumb-reachability
   =================================================================== */

@media (max-width: 600px) {
    main.fbx-brand .fbx-section a.pxl-button,
    main.fbx-brand .fbx-section a.fbx-btn-ghost,
    main.fbx-brand .fbx-section a.pxl-btn,
    .fbx-page-pricing a.pxl-button,
    .fbx-page-pricing a.fbx-btn-ghost,
    .fbx-page-contact a.pxl-button,
    .fbx-page-contact a.fbx-btn-ghost {
        display: inline-block !important;
        width: 100% !important;
        max-width: 360px !important;
        text-align: center !important;
        padding: 16px 20px !important;
    }

    /* Button rows — switch from horizontal to stacked-with-gap */
    main.fbx-brand .fbx-section [style*="display:flex"][style*="gap"],
    main.fbx-brand .fbx-section [style*="display: flex"][style*="gap"] {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}


/* ===================================================================
   8. FORM INPUTS — prevent iOS zoom-on-focus
   --------------------------------------------------------------------
   iOS Safari auto-zooms when input font-size < 16px. Keeping inputs
   at 16px on mobile prevents the awkward zoom behaviour.
   =================================================================== */

@media (max-width: 760px) {
    .fbx-page-contact input,
    .fbx-page-contact select,
    .fbx-page-contact textarea,
    .fbx-page-pricing input,
    .fbx-page-pricing select,
    .wpcf7 input,
    .wpcf7 select,
    .wpcf7 textarea {
        font-size: 16px !important;
    }

    /* Tighten form padding inside the contact card */
    .fbx-page-contact .wpcf7 form,
    .fbx-page-contact .fbx-cn-form {
        padding: 28px 20px !important;
    }
}


/* ===================================================================
   9. CODE WINDOW (homepage API section) — let it scroll on mobile
   =================================================================== */

@media (max-width: 760px) {
    .fbx-code-window pre.fbx-code {
        font-size: 12px !important;
        padding: 20px 18px !important;
        line-height: 1.6 !important;
    }

    .fbx-code-chrome {
        padding: 12px 16px !important;
        min-height: 40px !important;
    }

    .fbx-code-title {
        font-size: 11px !important;
    }
}


/* ===================================================================
   10. WHITE-LABEL ADD-ONS (pricing) — split layout collapses
   =================================================================== */

@media (max-width: 760px) {
    .fbx-page-pricing [style*="grid-template-columns: 1fr 1.2fr"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}


/* ===================================================================
   11. MEGA-MENU on tablet/mobile fallback
   --------------------------------------------------------------------
   The mega-menus already have responsive rules in style.css, but
   make sure the wide panel doesn't break the viewport on tablet.
   =================================================================== */

@media (max-width: 1024px) {
    .fbx-megamenu {
        gap: 32px !important;
        padding: 32px 24px !important;
    }
}

@media (max-width: 760px) {
    /* On tablet/mobile, BrightHub's mobile menu pattern takes over —
       the mega-menu shortcode output likely won't even show.
       This is a safety net in case it does. */
    .fbx-megamenu {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 24px !important;
    }
}


/* ===================================================================
   12. CITY CARDS (contact page) — tighten phone formatting
   =================================================================== */

@media (max-width: 760px) {
    .fbx-cn-city {
        padding: 32px 24px !important;
    }

    .fbx-cn-city > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}


/* ===================================================================
   13. FAQ ACCORDION — keep readable on small screens
   =================================================================== */

@media (max-width: 760px) {
    .fbx-px-faq summary {
        font-size: 1rem !important;
        padding: 20px 0 !important;
        gap: 16px !important;
    }

    .fbx-px-faq-a {
        padding-bottom: 20px !important;
        font-size: 0.9375rem !important;
    }
}


/* ===================================================================
   14. SOCIAL ICONS in footer — tighter spacing
   =================================================================== */

@media (max-width: 480px) {
    #pxl-footer .elementor-social-icons-wrapper,
    .pxl-footer .elementor-social-icons-wrapper {
        gap: 8px !important;
    }
}