/*
 * responsive-fixes.css
 * NSC Global — CSS-only fixes for responsive layout, cross-browser compatibility,
 * and animation performance. No structural or content changes.
 * Loaded AFTER Materialize CSS so these overrides take effect cleanly.
 */

/* ══════════════════════════════════════════════════════════
   1. GLOBAL BOX MODEL & OVERFLOW CONTAINMENT
   ══════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
    -webkit-text-size-adjust: 100%; /* Safari: prevent font inflation on rotate */
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    min-width: 320px; /* hard floor — never narrower than smallest common phone */
}

/* Replaced content — never overflow their container */
img,
video,
canvas,
svg,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
    display: block; /* removes bottom whitespace gap (inline default) */
}

/* ══════════════════════════════════════════════════════════
   2. HERO / BANNER CANVAS ANIMATION — RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/*
 * The homepage particle canvas (#hero-canvas) is absolutely positioned
 * inside .hero-wrap which already has position:relative; overflow:hidden.
 * These rules ensure it stretches to fill the parent at every viewport.
 */
#hero-canvas,
.banner-canvas,
.hero-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
}

/* Hero wrapper — clamp min-height so it never collapses on small screens */
.hero-wrap {
    position: relative;
    overflow: hidden;
    min-height: 480px; /* desktop default already set inline; this is the floor */
}

@media (max-width: 992px) {
    .hero-wrap {
        min-height: 420px;
    }
}

@media (max-width: 768px) {
    .hero-wrap {
        min-height: 360px;
        /* reduce vertical padding so hero doesn't swallow the whole screen */
        padding-top: 60px !important;
        padding-bottom: 48px !important;
    }
}

@media (max-width: 480px) {
    .hero-wrap {
        min-height: 300px;
        padding-top: 48px !important;
        padding-bottom: 40px !important;
    }
}

/* Floating hero icons — hide on small screens to avoid overlap with text */
@media (max-width: 768px) {
    .float-icon {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════
   3. DIVISION HERO SECTIONS
   ══════════════════════════════════════════════════════════ */

/* All hero sections that use absolute-positioned backgrounds */
[style*="min-height"][style*="display:flex"] {
    overflow: hidden;
}

/* Inline min-height overrides — make them scale down on mobile */
@media (max-width: 768px) {
    /* Override inline min-height:60vh / 65vh hero sections */
    .container[style*="padding:72px 0"] {
        padding-top: 48px !important;
        padding-bottom: 40px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   4. MATERIALIZE GRID — OVERFLOW & GUTTER FIXES
   ══════════════════════════════════════════════════════════ */

/* Materialize .row has negative left/right margin by default.
   On mobile this causes horizontal scroll when the parent is exactly 100vw. */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Restore internal column padding so content doesn't touch edges */
.col {
    padding-left: 12px;
    padding-right: 12px;
}

@media (max-width: 600px) {
    .col {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ══════════════════════════════════════════════════════════
   5. TYPOGRAPHY — FLUID SCALE
   ══════════════════════════════════════════════════════════ */

/* Headings that use large clamp() values should have a safe minimum */
h1 { word-break: break-word; overflow-wrap: break-word; }
h2 { word-break: break-word; overflow-wrap: break-word; }
h3 { word-break: break-word; overflow-wrap: break-word; }

@media (max-width: 600px) {
    /* Reduce inline font-sizes that don't use clamp() */
    .card-title,
    .card .card-title {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }
}

/* ══════════════════════════════════════════════════════════
   6. TOUCH-FRIENDLY INPUTS & BUTTONS
   ══════════════════════════════════════════════════════════ */

/* 16 px minimum prevents iOS auto-zoom on focus */
input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="password"],
select,
textarea {
    font-size: 16px !important;
}

/* Ensure minimum tap target size (WCAG 2.5.5 — 44×44 px) */
.btn,
.btn-large,
a.btn,
button,
.btn-floating {
    min-height: 44px;
    min-width: 44px;
}

/* Range inputs need vendor prefixes for cross-browser thumb styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    width: 100%;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: #e0e0e0;
}

input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: #e0e0e0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent, #6200ee);
    margin-top: -8px;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--accent, #6200ee);
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* ══════════════════════════════════════════════════════════
   7. CARD & PANEL OVERFLOW CONTAINMENT
   ══════════════════════════════════════════════════════════ */

.card,
.card-panel {
    /* Prevent inner content (long URLs, pre-blocks) from breaking layout */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Horizontal scroll inside comparison/data tables only */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* On small screens, any table that could overflow gets a scroll wrapper behaviour */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ══════════════════════════════════════════════════════════
   8. WIZARD STEP PROGRESS (EV + CHEMICAL CONFIGURATORS)
   ══════════════════════════════════════════════════════════ */

/*
 * The step-progress bar uses display:flex with fixed pixel connector widths.
 * On narrow screens it can overflow. These overrides scale it down.
 */
@media (max-width: 480px) {
    /* Step dots — shrink slightly */
    [style*="width:34px"][style*="height:34px"][style*="border-radius:50%"] {
        width: 28px !important;
        height: 28px !important;
        font-size: .75rem !important;
    }

    /* Connectors — shrink */
    [style*="width:36px"][style*="height:2px"] {
        width: 16px !important;
        min-width: 8px !important;
    }

    /* Step labels already hidden by .hide-on-small-only — no change needed */
}

/* ══════════════════════════════════════════════════════════
   9. STICKY PRICE SIDEBAR (EV & CHEM WIZARDS)
   ══════════════════════════════════════════════════════════ */

/*
 * On mobile the price sidebar appears below the wizard steps.
 * Undo sticky positioning so it doesn't overlap content.
 */
@media (max-width: 992px) {
    .card[style*="position:sticky"] {
        position: static !important;
        top: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════
   10. TECH TICKER / SCROLLING MARQUEE
   ══════════════════════════════════════════════════════════ */

/* Prevent the ticker wrapper from causing horizontal scroll */
[style*="animation:ticker"] {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Contain the ticker's overflow within its parent strip */
div:has(> [style*="animation:ticker"]) {
    overflow: hidden;
}

/* Fallback for browsers that don't support :has() */
.ticker-container {
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   11. AOS (ANIMATE ON SCROLL) — MOBILE PERFORMANCE
   ══════════════════════════════════════════════════════════ */

/* On small screens, disable AOS transforms to avoid layout jank */
@media (max-width: 480px) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════
   12. ANIMATION PERFORMANCE — GPU HINTS
   ══════════════════════════════════════════════════════════ */

/* Elements that use CSS animation or transition */
.float-icon,
.cap-card,
.ind-card,
.sub-page-card,
.product-card,
.blog-card,
.testi-card {
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Animate on Scroll library elements */
[data-aos] {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ══════════════════════════════════════════════════════════
   13. SAFARI / WEBKIT SPECIFIC FIXES
   ══════════════════════════════════════════════════════════ */

/* Glassmorphism — Safari needs -webkit- prefix */
@supports (-webkit-backdrop-filter: blur(10px)) {
    .glassmorphism {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

/* Sticky nav — Safari needs -webkit-sticky */
nav,
.sticky-header,
[style*="position:sticky"] {
    position: -webkit-sticky;
    position: sticky;
}

/* Safari flex gap fallback */
@supports not (gap: 1px) {
    .flex-gap-fallback > * + * {
        margin-left: 12px;
    }
}

/* Safari: gradient text (-webkit-background-clip required) */
.grad-text,
[style*="-webkit-text-fill-color: transparent"],
[style*="-webkit-text-fill-color:transparent"] {
    -webkit-background-clip: text;
    background-clip: text;
}

/* Safari: input border-radius reset */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════
   14. FIREFOX SPECIFIC FIXES
   ══════════════════════════════════════════════════════════ */

/* Firefox: scrollbar width compensation */
@-moz-document url-prefix() {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--accent, #6200ee) #f5f5f5;
    }
}

/* Firefox: button font inheritance */
button {
    font-family: inherit;
}

/* ══════════════════════════════════════════════════════════
   15. FLOATING HERO ICON ANIMATION — VENDOR PREFIXES
   ══════════════════════════════════════════════════════════ */

@-webkit-keyframes float {
    0%,100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); opacity:.7; }
    33%      { -webkit-transform: translateY(-18px) rotate(5deg); transform: translateY(-18px) rotate(5deg); opacity:.9; }
    66%      { -webkit-transform: translateY(-8px) rotate(-4deg); transform: translateY(-8px) rotate(-4deg); opacity:.8; }
}

@keyframes float {
    0%,100% { transform: translateY(0) rotate(0deg); opacity:.7; }
    33%      { transform: translateY(-18px) rotate(5deg); opacity:.9; }
    66%      { transform: translateY(-8px) rotate(-4deg); opacity:.8; }
}

/* ══════════════════════════════════════════════════════════
   16. AOS FADE-UP — VENDOR PREFIXES
   ══════════════════════════════════════════════════════════ */

@-webkit-keyframes fadeUp {
    from { opacity: 0; -webkit-transform: translateY(24px); transform: translateY(24px); }
    to   { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   17. SCROLLING TICKER ANIMATION — VENDOR PREFIXES
   ══════════════════════════════════════════════════════════ */

@-webkit-keyframes ticker {
    from { -webkit-transform: translateX(0); transform: translateX(0); }
    to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@keyframes ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════
   18. STAT COUNTER PULSE — VENDOR PREFIXES
   ══════════════════════════════════════════════════════════ */

@-webkit-keyframes pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: .5; }
}

@keyframes pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: .5; }
}

/* ══════════════════════════════════════════════════════════
   19. FOOTER RESPONSIVENESS
   ══════════════════════════════════════════════════════════ */

/* Footer copyright flex row — wrap on mobile */
@media (max-width: 600px) {
    footer.page-footer .footer-copyright > div {
        flex-direction: column !important;
        gap: 4px !important;
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════════
   20. WHATSAPP FAB — SAFE POSITION ON MOBILE
   ══════════════════════════════════════════════════════════ */

.whatsapp-fab {
    /* Stay above mobile browser bottom nav bars */
    bottom: max(24px, env(safe-area-inset-bottom, 24px));
    right: max(20px, env(safe-area-inset-right, 20px));
}

/* ══════════════════════════════════════════════════════════
   21. COOKIE BANNER — SAFE AREA ON IPHONE
   ══════════════════════════════════════════════════════════ */

#cookie-banner {
    bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 20px));
    left: max(20px, env(safe-area-inset-left, 20px));
    right: max(20px, env(safe-area-inset-right, 20px));
}

/* ══════════════════════════════════════════════════════════
   22. MATERIALIZE DROPDOWN — OVERFLOW FIX ON NARROW VIEWPORTS
   ══════════════════════════════════════════════════════════ */

.dropdown-content {
    max-width: calc(100vw - 32px);
    overflow-y: auto;
    max-height: 70vh;
}

/* ══════════════════════════════════════════════════════════
   23. FILTER CHIPS — WRAP GRACEFULLY ON MOBILE
   ══════════════════════════════════════════════════════════ */

/* Filter chip rows (CCTV, medical category filters) */
[role="group"] {
    flex-wrap: wrap;
    gap: 8px;
}

/* ══════════════════════════════════════════════════════════
   24. PRINT STYLES — HIDE ANIMATIONS & INTERACTIVE ELEMENTS
   ══════════════════════════════════════════════════════════ */

@media print {
    #hero-canvas,
    .float-icon,
    .whatsapp-fab,
    #cookie-banner,
    nav .sidenav-trigger,
    [data-aos] {
        display: none !important;
    }

    * {
        animation: none !important;
        transition: none !important;
    }

    body {
        overflow: visible;
    }
}

/* ══════════════════════════════════════════════════════════
   25. EV CONFIGURATOR — MOBILE FIXES
   ══════════════════════════════════════════════════════════ */

/*
 * Step progress bar: the outer flex container has overflow-x:auto (already)
 * but on very narrow screens the inner flex items still push width.
 * Constrain the connector bars and shrink step dots.
 */
@media (max-width: 480px) {
    /* Target the step progress wrapper on wizard pages */
    div[style*="overflow-x:auto"][style*="padding-bottom:4px"] {
        padding-bottom: 8px !important;
    }

    /* Shrink step-dot circles */
    div[style*="width:34px"][style*="height:34px"][style*="border-radius:50%"] {
        width: 28px !important;
        height: 28px !important;
        font-size: .7rem !important;
    }

    /* Shrink connector bars between steps */
    div[style*="width:36px"][style*="height:2px"][style*="margin:0 6px"] {
        width: 12px !important;
        margin: 0 3px !important;
    }
}

/*
 * Delivery priority grid: repeat(3,1fr) — too tight below 480px.
 * Switch to 1-column stack.
 */
@media (max-width: 480px) {
    div[style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

/*
 * Category grid: repeat(auto-fill,minmax(200px,1fr)) is fine on most screens
 * but minmax(200px) can cause overflow on 320px phones.
 * Drop the minimum to 140px.
 */
@media (max-width: 480px) {
    div[style*="minmax(200px,1fr)"] {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    }
    div[style*="minmax(160px,1fr)"] {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    }
}

/*
 * Back/Next button rows use display:flex;gap:12px without flex-wrap.
 * Add wrap so they stack vertically on small screens.
 */
@media (max-width: 400px) {
    div[style*="display:flex"][style*="gap:12px"][style*="margin-top"] {
        flex-wrap: wrap !important;
    }
    div[style*="display:flex"][style*="gap:12px"][style*="margin-top"] .btn,
    div[style*="display:flex"][style*="gap:12px"][style*="margin-top"] button {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ══════════════════════════════════════════════════════════
   26. AI AUTOMATION PAGE — DARK BODY SAFE OVERRIDES
   ══════════════════════════════════════════════════════════ */

/*
 * The AI automation page adds .ai-automation-page to <body> via JS.
 * These rules ensure the Materialize nav and footer don't flash white
 * before the JS class is applied.
 */
body.ai-automation-page {
    background-color: #070b12 !important;
}

body.ai-automation-page nav {
    background-color: #0f1724 !important;
}

body.ai-automation-page .page-footer {
    background-color: #0a0f1a !important;
}

body.ai-automation-page .footer-copyright {
    background-color: #070b12 !important;
}

/* ROI result rows — ensure they don't overflow on mobile */
.roi-result {
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 480px) {
    .roi-result {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 4px;
    }
}

/* AI input fields — full width on all screen sizes */
.ai-input {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Drone simulator preview box — don't overflow on small screens */
div[style*="background:rgba(96,165,250,.06)"][style*="border-radius:16px"] {
    padding: 20px !important;
}

/* ══════════════════════════════════════════════════════════
   27. SDS PAGE — TABLE RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* SDS search input full-width on mobile */
#sds-search {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* SDS table wrapper already has overflow-x:auto.
   Ensure no horizontal bleed from the container. */
div[style*="overflow-x:auto"][style*="border-radius:12px"] {
    max-width: 100% !important;
}

/* ══════════════════════════════════════════════════════════
   28. CDSCO COMPLIANCE PAGE — TIMELINE MOBILE
   ══════════════════════════════════════════════════════════ */

/* CDSCO step list: on very narrow screens the step number circle
   + connector line can push content. Shrink the circle. */
@media (max-width: 400px) {
    li > div[style*="width:36px"][style*="height:36px"][style*="border-radius:50%"] {
        width: 28px !important;
        height: 28px !important;
        font-size: .7rem !important;
    }
}

/* ══════════════════════════════════════════════════════════
   29. GENERAL — INLINE FLEX ROWS WITHOUT WRAP
   ══════════════════════════════════════════════════════════ */

/*
 * Many inline-styled flex rows use fixed gap but no flex-wrap.
 * This catch-all adds wrap to flex containers that hold .btn elements,
 * preventing them from overflowing horizontally on small screens.
 */
@media (max-width: 480px) {
    .container div[style*="display:flex"][style*="flex-wrap:wrap"] {
        /* already wrapping — no change */
    }

    /* Hero CTA button groups */
    section[style*="padding:48px 0"] div[style*="display:flex"][style*="gap:12px"],
    section[style*="padding:40px 0"] div[style*="display:flex"][style*="gap:12px"],
    section[style*="padding:72px 0"] div[style*="display:flex"][style*="gap:12px"] {
        flex-wrap: wrap !important;
    }

    /* Full-width buttons inside small flex groups */
    section div[style*="display:flex"][style*="gap:12px"] > .btn,
    section div[style*="display:flex"][style*="gap:12px"] > a.btn {
        flex: 1 1 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ══════════════════════════════════════════════════════════
   30. EV THANK-YOU & CHEM THANK-YOU — SAFE FALLBACK
   ══════════════════════════════════════════════════════════ */

/* Ensure thank-you page stat grids wrap on mobile */
@media (max-width: 480px) {
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════════════
   31. MEGA MENU — Z-INDEX & RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* Ensure nav sits above all page content */
nav { z-index: 1500 !important; position: relative; }
.mega-panel { z-index: 2000 !important; }

/* Active mega link highlight */
.active-mega-link {
    background: var(--mega-accent-light, #ede7f6) !important;
    color: var(--mega-accent, #6200ee) !important;
}

/* Mega panel must not overlap on scrolled pages */
@media (min-width: 993px) {
    /* Keep mega panel from showing on touch-only devices */
    @media (hover: none) {
        .mega-panel { display: none !important; }
    }
}

/* On screens narrower than 993px the mega menu is replaced by sidenav — hide entirely */
@media (max-width: 992px) {
    .mega-panel { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   32. NAV Z-INDEX (from Phase 3 brief)
   ══════════════════════════════════════════════════════════ */

nav,
.nav-wrapper {
    z-index: 1500 !important;
}

/* Materialize dropdown (used by any remaining dropdowns) */
.dropdown-content {
    z-index: 2000 !important;
    max-width: calc(100vw - 32px);
    overflow-y: auto;
    max-height: 70vh;
}

/* Sidenav overlay */
.sidenav-overlay { z-index: 999 !important; }
.sidenav          { z-index: 1400 !important; }

/* ══════════════════════════════════════════════════════════
   33. BREADCRUMB STRIP
   ══════════════════════════════════════════════════════════ */

.nsc-breadcrumb {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════════════════════════════════
   34. CONTACT PAGE — DEPARTMENT SELECT
   ══════════════════════════════════════════════════════════ */

/* Prevent Materialize from initialising department select (data-no-materialize),
   but ensure it still looks correct */
select[data-no-materialize] {
    display: block !important;
    height: auto !important;
    padding: 10px 14px !important;
    border: 1.5px solid #bdbdbd !important;
    border-radius: 8px !important;
    font-size: 16px !important; /* iOS zoom prevention */
    background: #fff !important;
    color: #1a1a1a !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
}

/* ══════════════════════════════════════════════════════════
   35. HOMEPAGE STATS SECTION
   ══════════════════════════════════════════════════════════ */

/* Stat number — tabular numerals for clean counting animation */
[x-text*="counts."] {
    font-variant-numeric: tabular-nums;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
}

/* ══════════════════════════════════════════════════════════
   36. COMING-SOON PLACEHOLDER PAGES
   ══════════════════════════════════════════════════════════ */

/* Ensure the info card in coming-soon partial doesn't clip on mobile */
.card-panel[style*="border-left:4px"] {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ══════════════════════════════════════════════════════════
   37. NAVBAR — ENFORCE SITE-WIDE PURPLE (belt-and-braces)
       Prevents any page-level body class from overriding nav.
   ══════════════════════════════════════════════════════════ */
nav,
nav .nav-wrapper {
    background-color: #6200ee !important;
}