/* =====================================================================
   DoLittle Technologies — Responsive Fixes (additive overrides)
   Loaded AFTER style.css. Does NOT change desktop design, colors,
   branding, or structure. Only improves layout on tablet & mobile.

   Breakpoints:
     Mobile  : 320px – 767px
     Tablet  : 768px – 991px
     Laptop  : 992px – 1199px
     Desktop : 1200px+
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. GLOBAL SAFETY NETS (all screens)
   --------------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }

/* Never let media/embeds force horizontal scroll */
img, svg, video, canvas, iframe, table { max-width: 100%; }
img:not([width]):not([height]) { height: auto; }

/* Long words / URLs shouldn't blow out narrow columns */
p, li, a, h1, h2, h3, h4, h5, h6, span, td, th { overflow-wrap: break-word; }

/* Generic responsive-table fallback (frontend has no Bootstrap) */
.table-responsive,
.rf-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* =====================================================================
   1. TABLET + below  (<= 991px)
   ===================================================================== */
@media (max-width: 991.98px) {

    /* --- Top bar: stack neatly, never overflow --- */
    .top-bar {
        padding: 8px 4% !important;
        flex-wrap: wrap !important;
        row-gap: 8px;
        justify-content: center !important;
        text-align: center;
    }
    .top-bar-left,
    .top-bar-right {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px 16px !important;
        width: auto;
    }
    .top-bar .nav-cta { gap: 8px; }

    /* --- Generic content grids collapse from 3/4 cols to 2 --- */
    .why-grid,
    .awards-grid,
    .steps-grid,
    .testimonials-grid,
    .dash-cards,
    .features-grid,
    .cards-grid,
    .grid-3,
    .grid-4,
    .feat-grid,
    .ben-grid,
    .db-stats,
    .dash-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Two-column page layouts (blog list + sidebar) stack */
    .blog-layout {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    /* Hero: relax the full-viewport height so short screens breathe */
    .hero {
        min-height: auto !important;
        padding: 100px 5% 60px !important;
    }
}

/* =====================================================================
   2. MOBILE  (<= 767px)
   ===================================================================== */
@media (max-width: 767.98px) {

    /* --- Top bar text a touch smaller, full stack --- */
    .top-bar { font-size: 12px !important; gap: 6px; }
    .top-bar-left { gap: 8px 14px !important; }
    .top-bar-right { gap: 10px !important; }
    .top-bar .nav-cta {
        width: 100%;
        justify-content: center;
        margin-top: 4px;
        background-color: #0a1f5c;
    }

    /* --- All multi-column content grids -> single column --- */
    .why-grid,
    .awards-grid,
    .steps-grid,
    .testimonials-grid,
    .dash-cards,
    .features-grid,
    .cards-grid,
    .grid-2,
    .grid-3,
    .grid-4,
    .pricing-grid,
    .footer-grid,
    .feat-grid,
    .ben-grid,
    .db-stats,
    .dash-stats,
    .blog-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* --- Typography scales down to avoid overflow --- */
    h1 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; line-height: 1.2; }
    h2 { font-size: clamp(1.4rem, 6vw, 1.9rem) !important; line-height: 1.25; }
    h3 { font-size: clamp(1.15rem, 5vw, 1.5rem) !important; }

    /* --- Section padding tightened --- */
    section,
    .section,
    .cta-section,
    .pricing-banner { padding-left: 5% !important; padding-right: 5% !important; }

    /* --- Hero --- */
    .hero { padding: 90px 5% 50px !important; }
    .hero-stat-strip { flex-wrap: wrap; }

    /* --- Buttons: comfortable tap targets, wrap instead of overflow --- */
    .btn-nav-pri,
    .btn-nav-out,
    .tb-btn { white-space: nowrap; }
    .hero .btn,
    .cta-section .btn { width: 100%; max-width: 320px; }

    /* --- Forms: full width, no fixed pixel widths --- */
    input, select, textarea, .form-control {
        max-width: 100% !important;
        width: 100% !important;
    }
    .form-row,
    .form-grid { grid-template-columns: 1fr !important; }

    /* --- Footer columns stack and center --- */
    .footer-col,
    .footer-grid > * { width: 100% !important; text-align: left; }

    /* --- Tables: let any plain frontend table scroll instead of break --- */
    table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; }

    /* --- Mega-dropdown stays readable on mobile --- */
    .dropdown-content { min-width: 100% !important; }
}

/* =====================================================================
   3. SMALL MOBILE  (<= 480px) — extra tightening
   ===================================================================== */
@media (max-width: 480px) {
    .logo-icon { width: 64px !important; height: 52px !important; }
    nav { height: 60px !important; padding: 0 3% !important; }
    .nav-links { top: 60px !important; }
    .top-bar { font-size: 11px !important; }
    h1 { font-size: clamp(1.4rem, 8vw, 1.9rem) !important; }
}

/* =====================================================================
   4. LANDSCAPE PHONES — keep menu scrollable
   ===================================================================== */
@media (max-height: 480px) and (orientation: landscape) {
    .nav-links { max-height: calc(100vh - 56px); }
}

/* =====================================================================
   5. ACCESSIBILITY — respect reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    .fade-up { opacity: 1 !important; transform: none !important; }
}