/* ==========================================================================
   SigmaFidelity™ Mobile & Tablet Responsive Engine
   Standard: HWB-QMS-7.2 Web Presentation & Poka-Yoke Standards
   Authority: Humberto Dominguez (CEO)
   Architect: George (Systems Architect & mbB)
   Scope: Activates exclusively on screens <= 1024px and <= 768px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1.0 UNIVERSAL MOBILE RESET & VIEWPORT DEFENSE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100%;
    }

    body {
        padding-bottom: 60px !important; /* Space for mobile sticky action bar */
    }

    /* Prevent iOS auto-zoom on form inputs */
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   2.0 MOBILE NAVIGATION & GLASS HEADER
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Hide desktop-only utility bar to save vertical screen real estate */
    .top-utility-bar {
        display: none !important;
    }

    .main-header {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 64px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(12px) !important;
        border-bottom: 1px solid #e2e8f0 !important;
        z-index: 1500 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    }

    .header-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 100% !important;
        padding: 0 1rem !important;
        max-width: 100% !important;
    }

    .logo-container a {
        display: flex !important;
        align-items: center !important;
    }

    .header-logo {
        height: 42px !important;
        width: auto !important;
    }

    /* Hide desktop navigation links */
    .desktop-nav {
        display: none !important;
    }

    /* Hide desktop phone text and CTA in header */
    .desktop-ease-controls .header-phone {
        display: none !important;
    }

    .desktop-ease-controls .nav-cta {
        display: none !important;
    }

    /* Show hamburger toggle button */
    .mobile-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 44px !important;
        height: 44px !important;
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        gap: 5px !important;
        padding: 0 !important;
        transition: all 0.2s ease !important;
    }

    .mobile-toggle:hover {
        background: #f1f5f9 !important;
    }

    .mobile-toggle .hamburger-bar {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: #0f172a !important;
        border-radius: 2px !important;
        transition: all 0.25s ease !important;
    }

    .mobile-toggle.active .hamburger-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg) !important;
    }

    .mobile-toggle.active .hamburger-bar:nth-child(2) {
        opacity: 0 !important;
    }

    .mobile-toggle.active .hamburger-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }

    /* --- App-Like Sliding Drawer Menu --- */
    .mobile-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: #ffffff !important;
        z-index: 3000 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 1.25rem 2rem !important;
        transform: translateX(100%) !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .mobile-overlay.active {
        transform: translateX(0) !important;
    }

    .mobile-overlay-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        min-height: 64px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        margin: 0 -1.25rem 1.25rem !important;
        padding: 0 1.25rem !important;
        background: #f8fafc !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }

    .mobile-close-btn {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
        border: 1px solid #cbd5e1 !important;
        background: #ffffff !important;
        color: #0f172a !important;
        font-size: 1.1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }

    .mobile-overlay-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
    }

    .mobile-overlay-links a {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        padding: 0.75rem 0.5rem !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        border-bottom: 1px solid #f8fafc !important;
    }

    .mobile-overlay-links a:hover,
    .mobile-overlay-links a:active {
        background: #f1f5f9 !important;
        color: #004889 !important;
    }

    .mobile-overlay-links .sub-link {
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        color: #475569 !important;
        margin-left: 0.5rem !important;
        padding: 0.5rem 0.5rem !important;
    }

    .mobile-menu-section-label {
        font-size: 0.75rem !important;
        font-weight: 800 !important;
        color: #004889 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        margin: 1.25rem 0.5rem 0.25rem !important;
    }

    .mobile-overlay-footer {
        margin-top: 2rem !important;
        padding-top: 1.5rem !important;
        border-top: 1px solid #e2e8f0 !important;
        text-align: center !important;
    }
}

/* --------------------------------------------------------------------------
   3.0 HERO SECTIONS (PHONE & TABLET SCALING)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .services-hero,
    .hero-section {
        margin-top: 0 !important;
        padding-top: 2rem !important;
        padding-bottom: 2.5rem !important;
        background-attachment: scroll !important;
    }

    .services-hero h1,
    .hero-section h1 {
        font-size: 1.85rem !important;
        line-height: 1.25 !important;
        font-weight: 900 !important;
        margin-bottom: 1rem !important;
        letter-spacing: -0.02em !important;
    }

    .services-hero p,
    .hero-section p {
        font-size: 1rem !important;
        line-height: 1.55 !important;
        margin-bottom: 1.75rem !important;
        max-width: 100% !important;
    }

    .hero-ctas {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .hero-ctas .isc-btn {
        width: 100% !important;
        height: 50px !important;
        font-size: 1rem !important;
    }
}

/* --------------------------------------------------------------------------
   4.0 SERVICE CARDS & MULTI-COLUMN GRIDS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .service-grid,
    .cards-grid,
    .industry-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .service-card {
        width: 100% !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
        border: 1px solid #e2e8f0 !important;
    }

    .card-image {
        height: 190px !important;
        background-size: cover !important;
        background-position: center !important;
    }

    .card-content {
        padding: 1.25rem !important;
    }

    .card-content h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3 !important;
    }

    .card-content p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        color: #64748b !important;
    }
}

/* --------------------------------------------------------------------------
   5.0 CONTENT SECTIONS, PADDING & WHITE SPACE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .section-white,
    .section-light,
    .section-dark,
    section {
        padding: 3rem 0 !important;
    }

    .content-wrapper {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .section-header {
        margin-bottom: 2rem !important;
        text-align: center !important;
    }

    .section-header h2 {
        font-size: 1.7rem !important;
        line-height: 1.25 !important;
        font-weight: 900 !important;
    }

    .section-header p {
        font-size: 0.95rem !important;
        margin-top: 0.5rem !important;
    }
}

/* --------------------------------------------------------------------------
   6.0 EXECUTIVE CTA BANNER
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .executive-cta {
        padding: 2.5rem 1.25rem !important;
        margin: 0 1rem 3rem !important;
        border-radius: 12px !important;
        text-align: center !important;
    }

    .executive-cta h2 {
        font-size: 1.65rem !important;
        line-height: 1.25 !important;
        margin-bottom: 1rem !important;
    }

    .executive-cta p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 2rem !important;
    }

    .executive-cta .isc-btn {
        width: 100% !important;
        height: 50px !important;
    }
}

/* --------------------------------------------------------------------------
   7.0 FOOTER RESTRUCTURING (VERTICAL STACK)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .site-footer {
        padding-bottom: 70px !important; /* Avoid overlap with sticky mobile bar */
    }

    .footer-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.25rem !important;
        padding: 2.5rem 1.25rem !important;
    }

    .footer-brand,
    .footer-column {
        width: 100% !important;
        text-align: left !important;
    }

    .footer-links li {
        margin-bottom: 0.75rem !important;
    }

    .footer-links a {
        font-size: 0.95rem !important;
        display: inline-block !important;
        padding: 0.2rem 0 !important;
    }

    .footer-bottom-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
        padding: 1.5rem 1.25rem !important;
    }

    .footer-legal {
        display: flex !important;
        justify-content: center !important;
        gap: 1.5rem !important;
    }
}

/* --------------------------------------------------------------------------
   8.0 STICKY MOBILE QUICK-ACTION BAR (PHONES ONLY <= 768px)
   -------------------------------------------------------------------------- */
.mobile-action-bar {
    display: none;
}

@media (max-width: 768px) {
    .mobile-action-bar {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 56px !important;
        background: #ffffff !important;
        border-top: 1px solid #cbd5e1 !important;
        z-index: 2500 !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
    }

    .mobile-bar-btn {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        font-size: 0.9rem !important;
        font-weight: 800 !important;
        gap: 0.45rem !important;
        height: 100% !important;
        transition: background 0.2s ease !important;
    }

    .mobile-bar-call {
        color: #004889 !important;
        background: #eff6ff !important;
        border-right: 1px solid #e2e8f0 !important;
    }

    .mobile-bar-call:active {
        background: #dbeafe !important;
    }

    .mobile-bar-quote {
        color: #ffffff !important;
        background: #004889 !important;
    }

    .mobile-bar-quote:active {
        background: #003366 !important;
    }
}

/* Hide hamburger and mobile action bar on desktop */
@media (min-width: 1025px) {
    .mobile-toggle {
        display: none !important;
    }
    .mobile-action-bar {
        display: none !important;
    }
    .mobile-overlay {
        display: none !important;
    }
}

/* ==========================================================================
   9.0 UNIVERSAL MOBILE & TABLET FORM SYSTEM
   Standard: HWB-QMS-7.2 Web Presentation & Form Usability Standards
   Scope: Activates on <= 1024px (Tablets) and <= 768px (Smartphones)
   ========================================================================== */

/* 9.1 Tablet Optimization (769px - 1024px) */
@media (max-width: 1024px) {
    .sigma-quote-card,
    .sigma-home-quote-card {
        padding: 2.25rem 2rem !important;
    }

    .sigma-quote-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
    }

    .sigma-bento-quote-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1.75rem !important;
    }

    .sigma-bento-quote-grid .sigma-form-group:nth-child(3) {
        grid-column: span 2 !important;
    }
}

/* 9.2 Smartphone Optimization (<= 768px) */
@media (max-width: 768px) {
    /* Form Sections & Page Padding */
    .quote-page-section,
    #quote-form-home {
        padding: 3rem 0 !important;
    }

    /* Cards */
    .sigma-quote-card,
    .sigma-home-quote-card,
    .isc-card.form-card-responsive {
        padding: 1.5rem 1.15rem !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    /* Dedicated Quote Form Grid: Sequential 1-Column Flow */
    .sigma-quote-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        width: 100% !important;
    }

    .sigma-quote-col {
        width: 100% !important;
        grid-column: span 1 !important;
    }

    /* Home Quote Grid: 1-Column Vertical Stack */
    .sigma-home-quote-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }

    .sigma-home-quote-grid .sigma-field {
        grid-column: span 1 !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* Sector Bento Quote Grid: 1-Column Stack */
    .sigma-bento-quote-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.75rem !important;
        width: 100% !important;
    }

    /* Form Fields & Labels */
    .sigma-field {
        margin-bottom: 1.25rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .sigma-field label {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        margin-bottom: 0.45rem !important;
        display: block !important;
    }

    /* Inputs, Selects & Textareas (Zero iOS Zoom, Touch-Friendly) */
    .sigma-input,
    input.sigma-input,
    select.sigma-input,
    textarea.sigma-input,
    .vault-input {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important; /* Prevents auto-zoom on iOS */
        padding: 0 0.85rem !important;
        box-sizing: border-box !important;
        border-radius: 6px !important;
        font-family: inherit !important;
    }

    /* SQF Quick-Select Chips */
    .sqft-chips-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.45rem !important;
        margin-top: 0.75rem !important;
    }

    .sqft-chip {
        padding: 0.4rem 0.65rem !important;
        background: #f1f5f9 !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        color: #334155 !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
        touch-action: manipulation !important;
    }

    .sqft-chip:active,
    .sqft-chip.active {
        background: #004889 !important;
        color: #ffffff !important;
        border-color: #004889 !important;
    }

    /* Submit Actions & Full-Width Buttons */
    .sigma-form-actions {
        margin-top: 2rem !important;
        padding-top: 1.5rem !important;
        text-align: center !important;
        width: 100% !important;
    }

    .sigma-form-actions button,
    .sigma-form-actions .isc-btn,
    .sigma-form-actions .nav-cta,
    #submit-quote-btn,
    #submit-home-btn,
    .vault-btn {
        width: 100% !important;
        max-width: 100% !important;
        height: 52px !important;
        padding: 0 1rem !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .sigma-form-actions button:active,
    .sigma-form-actions .isc-btn:active,
    .vault-btn:active {
        transform: scale(0.98) !important;
    }

    /* TCPA Consent Checkbox */
    .tcpa-field {
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        margin-top: 1.25rem !important;
        text-align: left !important;
    }

    .tcpa-field input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        margin-top: 2px !important;
        accent-color: #004889 !important;
    }

    .tcpa-field label {
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
        color: #64748b !important;
        cursor: pointer !important;
    }

    /* Workforce Intake Track Switcher */
    .workforce-toggle-bar {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        border-radius: 12px !important;
        gap: 6px !important;
        padding: 6px !important;
        box-sizing: border-box !important;
    }

    .workforce-toggle-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.88rem !important;
    }

    /* Login Vault Container */
    .login-vault-container {
        padding: 2.25rem 1.25rem !important;
        margin: 1rem !important;
        max-width: calc(100vw - 2rem) !important;
        box-sizing: border-box !important;
    }

    /* ROI & Waste Calculator Responsive View */
    .calculator-view {
        margin: 2rem auto !important;
        padding: 0 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .calc-form {
        padding: 1.5rem 1.15rem !important;
        border-radius: 12px !important;
        gap: 1.25rem !important;
        box-sizing: border-box !important;
    }

    .form-group input {
        min-height: 48px !important;
        font-size: 16px !important; /* Prevents auto-zoom on iOS */
    }

    /* BabySOP Intake Container */
    .intake-form-container {
        margin: 2rem 1rem !important;
        padding: 1.5rem 1.15rem !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }
}