/* ============================================================
   ALL-DEVICES.CSS — JDWebDesigns
   Targeted breakpoints for every device in Chrome DevTools
   Covers: JioPhone 2 • Galaxy Z Fold 5 • Surface Duo •
           Kindle Fire HDX • Nest Hub • Nest Hub Max •
           All iPhones / iPads / Pixels / Samsung / Nokia
   ============================================================ */


/* ============================================================
   GLOBAL HORIZONTAL OVERFLOW LOCK
   Prevents the faint 1-2px scrollbar that appears on every
   device when any element fractionally exceeds the viewport.
   Uses !important to beat inline <style> blocks on each page.
   ============================================================ */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Hero orbs / pseudo-elements are the most common bleed source */
.hero,
.hero-wrapper {
    overflow: hidden !important;
    max-width: 100% !important;
}


/* ============================================================
   SAFE-AREA & NOTCH SUPPORT (all modern notched devices)
   iPhone X / XR / 12 Pro / 14 Pro Max, Pixel, S20 Ultra…
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-left:  env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    .navbar {
        padding-left:  max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-top:   max(0.8rem, env(safe-area-inset-top));
    }
    footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
    /* Sticky floating buttons above home-bar */
    .sticky-cta-mobile,
    .cookie-banner {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        margin-bottom:  env(safe-area-inset-bottom);
    }
}


/* ============================================================
   ULTRA-SMALL — JioPhone 2  (240 × 320 CSS pixels)
   Also covers ancient tiny Androids
   ============================================================ */
@media (max-width: 240px) {
    html, body {
        overflow-x: hidden !important;
        font-size: 13px;
    }

    .container {
        padding: 0 8px !important;
    }

    .navbar {
        padding: 8px 10px !important;
    }

    .logo {
        font-size: 1.4rem !important;
    }

    .hero {
        padding: 70px 10px 20px !important;
    }

    .hero-title {
        font-size: 1.3rem !important;
        line-height: 1.25;
    }

    .hero-subtitle {
        font-size: 0.85rem !important;
        line-height: 1.5;
    }

    .hero-buttons {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .btn, .cta-button, button[type="submit"],
    .package-button, .view-project {
        width: 100% !important;
        font-size: 0.85rem !important;
        padding: 10px 12px !important;
        min-height: 40px !important;
    }

    h2 { font-size: 1.2rem !important; }
    h3 { font-size: 1.1rem !important; }
    p  { font-size: 0.85rem !important; line-height: 1.55; }

    section {
        padding: 28px 8px !important;
    }

    .service-card,
    .benefit-card,
    .pricing-card,
    .faq-item,
    .process-step {
        padding: 12px 10px !important;
        margin-bottom: 12px !important;
    }

    /* Stack nav items tightly */
    .nav-links a,
    .mobile-nav-links a {
        padding: 10px 12px !important;
        font-size: 0.9rem !important;
    }

    footer {
        padding: 24px 8px 80px !important;
    }
}


/* ============================================================
   VERY SMALL — 241px – 319px
   Covers very old small-screen Android devices
   ============================================================ */
@media (min-width: 241px) and (max-width: 319px) {
    html, body { overflow-x: hidden !important; }

    .container { padding: 0 10px !important; }

    .hero-title   { font-size: 1.45rem !important; }
    .hero-subtitle { font-size: 0.9rem !important; }

    .btn, .cta-button {
        width: 100% !important;
        font-size: 0.9rem !important;
    }
}


/* ============================================================
   SMALL — 320px
   Nokia Lumia 520 • iPhone 4 • iPhone 5/SE (1st gen) •
   Samsung Galaxy S9+ (320px wide)
   ============================================================ */
@media (max-width: 320px) {
    .hero-title    { font-size: 1.55rem !important; }
    .hero-subtitle { font-size: 0.92rem !important; }

    .hero-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .btn, .cta-button {
        width: 100% !important;
        text-align: center !important;
    }

    .container  { padding: 0 12px !important; }
    .logo       { font-size: 1.6rem !important; }

    h2 { font-size: 1.35rem !important; }
    h3 { font-size: 1.1rem !important; }

    /* ---- Prevent horizontal overflow ---- */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Force every inline grid to a single column — fixes minmax(220px+) overflow */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Ensure all containers are fully constrained */
    .container, section, div {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Floating contact button — smaller, tucked in */
    .floating-contact-btn {
        width: 44px !important;
        height: 44px !important;
        bottom: 70px !important;
        right: 10px !important;
        padding: 0 !important;
        font-size: 1.1rem !important;
    }

    /* Back to top button — smaller, tucked in */
    .back-to-top {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        bottom: 70px !important;
        left: 8px !important;
        font-size: 1.1rem !important;
    }

    /* Sticky CTA — compact */
    .sticky-cta-mobile {
        font-size: 0.95rem !important;
        padding: 0.8rem 0.5rem !important;
    }
}


/* ============================================================
   GALAXY Z FOLD 5 — FOLDED  (344px wide)
   Narrow tall portrait — single-column only
   ============================================================ */
@media (min-width: 321px) and (max-width: 359px) {
    .hero-title    { font-size: 1.65rem !important; }
    .hero-subtitle { font-size: 0.95rem !important; }

    .hero-buttons  {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .container { padding: 0 14px !important; }

    .service-card,
    .benefit-card,
    .pricing-card {
        margin-bottom: 14px !important;
        padding: 16px 14px !important;
    }
}


/* ============================================================
   STANDARD ANDROID — 360px – 374px
   Galaxy S III / Note 3 / Note II / S5 / S8 / S8+ /
   LG Optimus L70 / Nexus 5 / Moto G4 / Lumia 550 / 950
   ============================================================ */
@media (min-width: 360px) and (max-width: 374px) {
    .hero-title    { font-size: 1.75rem !important; }
    .hero-subtitle { font-size: 0.98rem !important; }
    .container     { padding: 0 16px !important; }
}


/* ============================================================
   iPHONE SE 2 / iPHONE 6/7/8 / iPHONE X — 375px – 389px
   ============================================================ */
@media (min-width: 375px) and (max-width: 389px) {
    .hero-title    { font-size: 1.85rem !important; }
    .hero-subtitle { font-size: 1rem !important; }

    /* iPhone X / notch — already covered by safe-area above,
       but ensure hero padding clears status bar */
    .hero {
        padding-top: max(70px, env(safe-area-inset-top, 70px)) !important;
    }
}


/* ============================================================
   iPHONE 12 PRO / PIXEL 3 — 390px – 412px
   Also covers Nexus 4 (384px), LG Optimus (384px)
   ============================================================ */
@media (min-width: 390px) and (max-width: 412px) {
    .hero-title     { font-size: 1.95rem !important; }
    .hero-subtitle  { font-size: 1.05rem !important; }
    .container      { padding: 0 18px !important; }
}


/* ============================================================
   LARGE ANDROID / iPHONE XR / 6 PLUS — 413px – 429px
   iPhone XR (414), iPhone 6/7/8 Plus (414), Pixel 2 (411),
   Pixel 2 XL (411), Nexus 5X/6/6P (412), Pixel 3 XL (412),
   Pixel 7 (412), Galaxy S20 Ultra (412), Galaxy A51/71 (412),
   Moto G Power (412), Facebook on Android (412)
   ============================================================ */
@media (min-width: 413px) and (max-width: 429px) {
    .hero-title    { font-size: 2rem !important; }
    .hero-subtitle { font-size: 1.05rem !important; }
    .container     { padding: 0 20px !important; }

    /* Allow 2-col service/benefit grid on this wider phone */
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}


/* ============================================================
   iPHONE 14 PRO MAX — 430px
   ============================================================ */
@media (min-width: 430px) and (max-width: 480px) {
    .hero-title     { font-size: 2.1rem !important; }
    .hero-subtitle  { font-size: 1.05rem !important; }
    .container      { padding: 0 20px !important; }

    .benefits-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
}


/* ============================================================
   KINDLE FIRE HDX  (533 × 801)
   Also: Nokia N9 landscape, mid Androids in landscape
   ============================================================ */
@media (min-width: 481px) and (max-width: 600px) {
    .container { padding: 0 24px !important; }

    .service-card,
    .benefit-card {
        /* Allow 2-col where grid already switches */
        width: 100%;
    }

    .hero-title    { font-size: 2.2rem !important; }
    .hero-subtitle { font-size: 1.05rem !important; }
}


/* ============================================================
   SURFACE DUO SINGLE-PANE  (540 × 720)
   ============================================================ */
@media (min-width: 501px) and (max-width: 600px) {
    .container { padding: 0 28px !important; }

    .hero-title     { font-size: 2.3rem !important; }
    .pricing-grid   {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}


/* ============================================================
   FOLDABLE / DUAL-SCREEN SPANNING
   Surface Duo (two 540px panes) • Galaxy Z Fold 5 unfolded
   Uses CSS spanning / env(fold-*) where supported
   ============================================================ */
@media (horizontal-viewport-segments: 2) {
    /* Two equal columns either side of the fold */
    .hero-wrapper,
    .container {
        display: grid !important;
        grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0) !important;
        gap: env(viewport-segment-left 1 0) !important;
    }

    .hero-title    { font-size: 2rem !important; }
    .hero-subtitle { font-size: 1rem  !important; }
}

/* Fallback for Fold / Duo browsers that don't support spanning yet */
@media (min-width: 540px) and (max-width: 600px) {
    .benefits-grid,
    .service-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}


/* ============================================================
   SMALL TABLET — 601px – 767px
   Nexus 7 (600px) • BlackBerry PlayBook portrait (600px) •
   Galaxy Tab S4 portrait (712px)
   ============================================================ */
@media (min-width: 601px) and (max-width: 767px) {
    html, body { overflow-x: hidden !important; }

    .container { padding: 0 28px !important; }

    .hero-title    { font-size: 2.4rem !important; }
    .hero-subtitle { font-size: 1.1rem !important; }

    section { padding: 48px 28px !important; }

    /* 2-column grid for cards */
    .benefits-grid,
    .service-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Navigation: still use mobile hamburger */
    .nav-links a { font-size: 1rem !important; }
}


/* ============================================================
   iPAD MINI / iPAD PORTRAIT — 768px
   ============================================================ */
@media (min-width: 768px) and (max-width: 819px) {
    .container { padding: 0 32px !important; }

    .hero-title    { font-size: 2.6rem !important; }
    .hero-subtitle { font-size: 1.1rem !important; }
    .hero          { padding: 80px 32px 48px !important; }

    /* 2-col cards */
    .benefits-grid,
    .service-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}


/* ============================================================
   iPAD AIR / NEXUS 10 PORTRAIT — 820px – 912px
   Also: Asus Zenbook Fold (853px) •
         Galaxy Z Fold 5 unfolded (882px) •
         Surface Pro 7 portrait (912px)
   ============================================================ */
@media (min-width: 820px) and (max-width: 912px) {
    .container { padding: 0 40px !important; }

    .hero          { padding: 90px 40px 52px !important; }
    .hero-title    { font-size: 2.8rem !important; }
    .hero-subtitle { font-size: 1.15rem !important; }

    /* 2-col for most card grids */
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }

    /* 3-col services if there are 6+ cards */
    .service-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}


/* ============================================================
   iPAD PRO PORTRAIT / NEST HUB — 913px – 1024px
   Nest Hub: 1024 × 600 (wide but SHORT)
   ============================================================ */
@media (min-width: 913px) and (max-width: 1024px) {
    .container { padding: 0 48px !important; }
    .hero-title { font-size: 3rem !important; }
}


/* ============================================================
   NEST HUB LANDSCAPE  (1024 × 600)
   Wide screen but only 600px tall — keep hero compact,
   hide tall decorative elements
   ============================================================ */
@media screen and (min-width: 1020px) and (max-height: 620px) {
    .hero {
        min-height: auto !important;
        padding: 20px 48px 24px !important;
    }

    .hero-title {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }

    .hero-subtitle {
        font-size: 0.95rem !important;
        margin-bottom: 0.75rem !important;
    }

    .hero-description {
        display: none !important; /* too tall for this viewport */
    }

    .hero-buttons {
        gap: 12px !important;
        margin-top: 0.5rem !important;
    }

    .navbar { padding: 0.6rem 0 !important; }

    section { padding: 32px 48px !important; }

    /* stats/trust bar — keep slim */
    .stats-bar,
    .trust-bar {
        padding: 12px 48px !important;
    }
}


/* ============================================================
   NEST HUB MAX  (1280 × 800)
   Wider display, medium height — mild landscape adjustments
   ============================================================ */
@media screen and (min-width: 1275px) and (max-height: 820px) {
    .hero {
        min-height: auto !important;
        padding: 30px 60px 36px !important;
    }

    .hero-title {
        font-size: 2.6rem !important;
    }

    .navbar { padding: 0.7rem 0 !important; }

    section { padding: 40px 60px !important; }
}


/* ============================================================
   LANDSCAPE PHONE GENERIC (any phone on its side)
   max-height: 500px prevents targeting tablets
   ============================================================ */
@media (orientation: landscape) and (max-height: 500px) {
    .hero {
        padding: 10px 24px 20px !important;
        min-height: auto !important;
    }

    .hero-title    { font-size: 1.5rem !important; }
    .hero-subtitle { font-size: 0.9rem !important; }

    .hero-description { display: none !important; }

    .navbar { padding: 0.5rem 0 !important; }

    section { padding: 24px 24px !important; }

    .sticky-cta-mobile {
        display: none !important; /* avoid covering content in landscape */
    }
}


/* ============================================================
   BLACKBERRY PLAYBOOK LANDSCAPE (1024 × 600)
   already covered by Nest Hub landscape above
   ============================================================ */


/* ============================================================
   GALAXY Z FOLD 5 — UNFOLDED (882 × 1080)
   Gets desktop styles but benefit from mid-col treatment
   ============================================================ */
@media (min-width: 860px) and (max-width: 900px) {
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    .container { padding: 0 36px !important; }
}


/* ============================================================
   ASUS ZENBOOK FOLD (853 × 1280)
   Treated as a light tablet — 2/3 col grids
   ============================================================ */
@media (min-width: 840px) and (max-width: 870px) {
    .benefits-grid,
    .service-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
    .container { padding: 0 36px !important; }
}


/* ============================================================
   SURFACE PRO 7  (912 × 1368 in tablet mode)
   ============================================================ */
@media (min-width: 900px) and (max-width: 920px) {
    .container  { padding: 0 44px !important; }
    .hero-title { font-size: 2.8rem !important; }

    .benefits-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}


/* ============================================================
   REDUCED MOTION (all devices)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto   !important;
    }
}


/* ============================================================
   HIGH CONTRAST MODE (Windows / Android forced-colors)
   ============================================================ */
@media (prefers-contrast: high) {
    .btn-primary {
        border: 2px solid currentColor !important;
    }
    .navbar {
        background: rgba(10, 14, 26, 1) !important;
        border-bottom: 2px solid #06b6d4 !important;
    }
    .service-card,
    .pricing-card,
    .benefit-card {
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
    }
}


/* ============================================================
   FORCED COLORS (Windows high-contrast mode)
   ============================================================ */
@media (forced-colors: active) {
    .btn-primary,
    .btn-secondary,
    .cta-button {
        forced-color-adjust: none;
        border: 2px solid ButtonText !important;
    }
}


/* ============================================================
   TOUCH DEVICES — tap targets & iOS tap delay fix
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
    a, button, .btn, .hamburger,
    input[type="submit"], input[type="button"],
    .nav-link, .faq-question, .package-button {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(6, 182, 212, 0.15);
    }

    /* Remove hover-only effects that look odd on touch */
    .service-card:hover,
    .benefit-card:hover,
    .pricing-card:hover,
    .portfolio-item:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }
}


/* ============================================================
   MOBILE — HIDE REDUNDANT FLOATING CONTACT BUTTON
   On mobile (≤768px) the sticky-cta-mobile bar already gives
   a prominent contact CTA, so the floating button is clutter.
   Hide it to reduce bottom-bar congestion.
   ============================================================ */
@media (max-width: 768px) {
    .floating-contact-btn {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
}


/* ============================================================
   TABLET HORIZONTAL NAVIGATION — 768px – 1099px
   iPad Mini, iPad Air, Nexus 7, Surface Pro (portrait).
   Switch from fullscreen hamburger overlay to a compact
   horizontal nav row. Uses high-specificity selectors to beat
   the !important rules in each page's inline <style> block.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1099px) {

    /* Hide hamburger — no longer needed */
    nav#navigation div.hamburger,
    nav#navigation .hamburger {
        display: none !important;
        visibility: hidden !important;
    }

    /* Collapse fullscreen overlay → horizontal inline row */
    nav#navigation ul#nav-menu,
    nav#navigation ul#nav-menu.nav-menu {
        display:         flex !important;
        flex-direction:  row !important;
        flex-wrap:       nowrap !important;
        position:        static !important;
        width:           auto !important;
        height:          auto !important;
        min-height:      auto !important;
        background:      transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        visibility:      visible !important;
        opacity:         1 !important;
        pointer-events:  auto !important;
        overflow:        visible !important;
        padding:         0 !important;
        margin:          0 0 0 auto !important;
        gap:             2px !important;
        z-index:         auto !important;
        top:             auto !important;
        left:            auto !important;
        transform:       none !important;
        transition:      none !important;
    }

    /* Compact nav link styling to fit all 8 items */
    nav#navigation ul#nav-menu li {
        padding: 0 !important;
        margin:  0 !important;
        width:   auto !important;
    }

    nav#navigation ul#nav-menu li a,
    nav#navigation ul#nav-menu li a.nav-link {
        font-size:   0.75rem !important;
        padding:     6px 7px !important;
        min-height:  auto !important;
        min-width:   auto !important;
        display:     block !important;
        white-space: nowrap !important;
        border-radius: 6px !important;
        transition:  background 0.2s ease, color 0.2s ease !important;
    }

    nav#navigation ul#nav-menu li a:hover,
    nav#navigation ul#nav-menu li a.active {
        color: #06b6d4 !important;
        background: rgba(6, 182, 212, 0.08) !important;
    }

    /* Keep nav-container flex-row so logo + links sit side by side */
    nav#navigation .nav-container {
        display:         flex !important;
        flex-direction:  row !important;
        align-items:     center !important;
        flex-wrap:       nowrap !important;
        gap:             0 !important;
    }
}


/* ============================================================
   PRINT — clean single-column for any device printing
   ============================================================ */
@media print {
    .navbar,
    .sticky-cta-mobile,
    .cookie-banner,
    footer .footer-social {
        display: none !important;
    }
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }
    .hero {
        padding: 20pt !important;
        min-height: auto !important;
        background: none !important;
    }
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
        color: #555;
    }
}