/* =========================================================
   QUANT HILL: FULLY UNIFIED MOBILE CSS
   ========================================================= */

@media only screen and (max-width: 1024px) {
    /* 1. Reset the Placeholder and Header */
    #header-placeholder, .main-header {
        height: auto !important;
        min-height: 45px !important;
        padding: 0 !important;
        background: #020617 !important;
    }

    /* 2. Completely kill the Breadcrumb container */
    .breadcrumb-container {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* 3. Handle the Top Bar */
    .top-hero-bar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 5px 20px !important;
        height: 40px !important;
    }

    /* 4. Pull Content Up */
    .hero-layout, .hero-section, #hero-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 5. Hide navigation elements */
    .main-nav, .nav-list {
        display: none !important;
    }
    /* Find these in your CSS and REMOVE the background lines */
    .header-placeholder, .main-header, .breadcrumb-container {
    /* remove any background-color or background-image lines here */
    background: transparent !important; 
    }
    /* --- TOGGLE BUTTON --- */
    #mobileMenuBtn {
        position: absolute !important;
        top: 44px !important;
        margin-left: 35px !important;
        transform: translateX(-25%) !important;
        display: block !important;
        z-index: 9999 !important;
    }

    /* --- SIDEBAR CONTAINER --- */
    #mobile-sidebar {
        position: fixed !important;
        top: 75px !important;
        left: -300px !important; /* Updated width to 300px to match your script */
        width: 300px !important;
        height: 100vh !important;
        background: #ffffff !important; /* White as requested */
        color: #333 !important;
        z-index: 999999 !important;
        transition: left 0.4s ease-in-out !important;
        padding-top: 20px !important;
        overflow-y: auto !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
        /* Hide scrollbars */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    #mobile-sidebar::-webkit-scrollbar {
        display: none;
    }

    /* --- NAVIGATION LIST --- */
    .mobile-nav-list {
        list-style: none !important;
        padding: 0 20px !important;
        margin-top: 20px !important;
    }

    /* Ensure the base link color is dark to match your theme */
    .mobile-nav-list li a {
    display: block !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    color: #ffff !important; /* Changed from #ffff to dark to be readable on white bg */
    text-decoration: none !important;
    font-size: 1.1rem !important;
    transition: background 0.3s ease !important;
    }

    /* Force the Hover to Gold and Black ONLY */
    .mobile-nav-list li a:hover, 
    .mobile-nav-list li a:focus {
    background-color: #d4af37 !important; /* Premium Gold */
    color: #020617 !important;           /* Deep Black */
    font-weight: bold !important;
    }
    
    .brand-logo {
        max-height: 32px !important;
    }

    .top-center-branding h1 {
        font-size: 1.1rem !important;
        margin: 2px 0 0 0 !important;
        position: relative !important;
    }

    .top-center-branding p {
        font-size: 0.6rem !important;
        margin: 2px 0 0 0 !important;
        position: relative !important;
    }

    .main-nav, .breadcrumb-container, .hero, .tech-cert-section, .top-right-action {
    display: none !important;
    }
    /* --- 3. CONTENT SPACING --- */
    .qha-hero-card-a {
        margin-top: 30px !important;
    }
    .hub-header {
        margin-top: 50px !important;
    }
    .scale-hub {  margin-top: 20px !important;
    }
    .qha-hero-card {  margin-top: 30px !important;
    }
    .qh-dynamic-services {   margin-top: 15px !important;
    }
    .qh-dynamic-businesses{   margin-top: 15px !important;
    }
    .qha-header-wrapper {
        padding-top: 50px !important;
    }
    /* Hide the entire Outcomes section */
    .outcomes-header-wrapper, 
    .outcomes-card-grid {
        display: none !important;
    }
    .faq-section {
        margin-top: 10px !important;
    }
    /* --- 4. FOOTER --- */
    .footer-grd {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        padding: 20px !important;
    }

    .footer-col {
        width: 100% !important;
        text-align: left !important;
    }

    .footer-col ul {
        list-style: none !important;
        padding: 0 !important;
    }

    .footer-col h4 {
        margin-bottom: 15px !important;
        font-size: 1rem !important;
    }

    .footer-bottom-flex {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
        padding: 20px !important;
        border-top: 1px solid #1a3a5a !important;
    }

    .footer-legal-row, .footer-legal-links, .footer-col ul li a[href="sitemap.html"], .footer-col ul li a[href="testimonal.html"], .footer-col ul li a[href="insights.html"] {
        display: none !important;
    }

    .footer-branding-block strong {
        font-size: 0.85rem !important;
        margin-bottom: 0 !important;
        display: block !important;
    }

    .footer-social-cluster {
        gap: 5px !important;
        margin-top: 0 !important;
    }

    .social-icon-box {
        width: 30px !important;
        height: 30px !important;
    }

    .footer-copyright {
        font-weight: 600 !important;
        font-size: 0.75rem !important;
        color: #ffffff !important;
        text-align: center !important;
    }

    /* --- 5. CONTACT & SERVICES --- */
    .contact-layout, .careers-section .container {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        padding: 20px !important;
    
    }

    .services-mosaic {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 20px !important;
    }

    .outcome-card-item {
        padding: 25px !important;
        border: 1px solid #1a3a5a !important;
        border-radius: 12px !important;
        background: #0b1120 !important;
    }

    /* --- 6. GLOBAL HIDES --- */
    .cta-newsletter-grid {
        display: none !important;
    }

    /* --- 7. ADDITIONAL SECTIONS --- */
    .form-panel, .info-panel {
        width: 100% !important;
        padding: 0 !important;
    }

    .form-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .form-control-field {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important;
    }

    .contact-card {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
        text-decoration: none !important;
        color: inherit !important;
    }

    .contact-icon {
        font-size: 1.5rem !important;
    }

    .newsletter-panel {
        padding: 20px !important;
        background: #0b1120 !important;
        border-radius: 8px !important;
    }
    .container-contact {
        margin-top: 20px !important;
    }
    .section-header-block {
        margin-top: 55px !important;
    }
    .section-header-block-c h1 {
        font-size: 2rem !important;
    }

    /* Tighten the wrapper padding for smaller screens */
    .ticker-wrap {
        padding: 6px 0 !important;
    }
    .ticker-track {
        animation: ticker-scroll 8s linear infinite !important;
        will-change: transform !important;
        backface-visibility: hidden !important;
        display: flex !important;
        width: max-content !important;
        gap: 20px !important;
        flex-shrink: 0 !important;
    }

    /* Ensure text is legible but fits within the viewport */
    .ticker-track span {
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    /* Ensure gold separators are properly spaced */
    .ticker-track .separator {
        padding: 0 5px !important;
    }
    /* Force all structural containers to be transparent so the body gradient shows */
    .main-header, #header-placeholder, .ticker-and-news-section, .hero, .hero-layout,main {
    background: transparent !important;
    }
    .mosaic-card {
        padding: 20px !important;
        border: 1px solid #1a3a5a !important;
        border-radius: 8px !important;
    }

    .bottom-cta, .newsletter-panel-side {
        width: 100% !important;
        padding: 0 !important;
    }

    .subscription-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .subscription-form .form-control-field {
        width: 100% !important;
        padding: 12px !important;
    }

    .subscription-form .btn-trial {
        width: 100% !important;
        padding: 12px !important;
    }

    .careers-section .container {
        padding: 20px 15px !important;
    }

    .job-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        padding: 20px !important;
        margin-bottom: 20px !important;
        border: 1px solid #1a3a5a !important;
        border-radius: 8px !important;
    }

    .job-card .btn-base {
        width: 100% !important;
        text-align: center !important;
        padding: 12px !important;
    }
    /* Reduce canvas height for better mobile stacking */
    #qhDataCanvas, #qhMarketingCanvas {
        height: 250px !important; 
    }

    /* Adjust overlay for mobile */
    .qh-visual-overlay {
        height: auto !important; /* Let it grow if text wraps */
        padding: 15px !important;
    }

    /* Adjust font sizes for smaller screens */
    #qhVisualTitle {
        font-size: 0.9rem !important;
        margin-bottom: 5px !important;
    }

    #qhVisualDesc {
        font-size: 0.85rem !important;
        max-width: 95% !important; /* Allow more width on phones */
    }
    .right-bottom-fab-container {
        /* Add 'env(safe-area-inset-bottom)' for modern iPhones */
        bottom: calc(25px + env(safe-area-inset-bottom)); 
    }
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 5%;
    }

    /* 2. Adjust section padding for mobile-friendly widths */
    .blog-section {
        padding: 20px 5% !important;
    }

    /* 3. Ensure the cards and full-article containers remain readable */
    .blog-card {
        padding: 20px;
    }

    .full-article {
        padding: 15px;
        font-size: 0.95rem;
    }

    /* 4. Fix typography scaling for tablet screens */
    .engagement-header h2 {
        font-size: 2.2rem;
    }

    .engagement-header p {
        font-size: 1rem;
    }
}