/* Responsive navigation and layout helpers (non-destructive) */

/* Base: hide large nav link list on small screens until toggled */
@media (max-width: 1024px) {
  .nav-block .links-block { position: relative; }
  /* Hide both .links and #popup-overlay on mobile until toggled */
  .nav-block .links,
  .nav-block #popup-overlay { display: none !important; }

  .nav-block.nav-open .links,
  .nav-block.nav-open #popup-overlay { display: block !important; }

  /* Make the dropdown menus stack for touch */
  .nav-block .links .nav-item,
  .nav-block #popup-overlay .nav-item { position: relative; }

  .nav-block .links .dropdown-menu,
  .nav-block #popup-overlay .dropdown-menu { display: none; }

  .nav-block .links .nav-item.open > .dropdown-menu,
  .nav-block #popup-overlay .nav-item.open > .dropdown-menu { display: block; }

  /* Full-width overlay style for mobile menu */
  .nav-block.nav-open .links,
  .nav-block.nav-open #popup-overlay {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    padding: 16px 20px;
    max-height: 80vh;
    overflow-y: auto;
  }

  .nav-block .links .nav-link,
  .nav-block #popup-overlay .nav-link { color: #fff !important; }

  .nav-block .links .dropdown-item,
  .nav-block #popup-overlay .dropdown-item { color: #dbe9ff !important; }

  /* Ensure hamburger button has enough space for the cross animation */
  .menu-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 44px !important; /* slightly larger for better touch target */
    height: 44px !important;
    padding: 8px !important; /* inner space to avoid clipping */
    border-radius: 6px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    top: 8px !important; /* move down slightly for better alignment */
    z-index: 10000 !important;
  }

  /* Tweak the line bars size so the X shape fits comfortably */
  nav .menu-toggle span,
  .nav-block .menu-toggle span,
  .menu-toggle span {
    display: block !important;
    width: 28px !important;
    height: 3px !important;
    background: #fff !important;
    background-color: #fff !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    transition: transform .3s ease, opacity .3s ease, background .3s ease !important;
  }

  /* Spacing between lines */
  nav .menu-toggle span + span,
  .nav-block .menu-toggle span + span,
  .menu-toggle span + span {
    margin-top: 6px !important;
  }

  /* When active (cross), keep transforms within container - support both .active and .is-active */
  nav .menu-toggle.active span:nth-child(1),
  nav .menu-toggle.is-active span:nth-child(1),
  .nav-block .menu-toggle.active span:nth-child(1),
  .nav-block .menu-toggle.is-active span:nth-child(1),
  .menu-toggle.active span:nth-child(1),
  .menu-toggle.is-active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg) !important;
  }

  nav .menu-toggle.active span:nth-child(2),
  nav .menu-toggle.is-active span:nth-child(2),
  .nav-block .menu-toggle.active span:nth-child(2),
  .nav-block .menu-toggle.is-active span:nth-child(2),
  .menu-toggle.active span:nth-child(2),
  .menu-toggle.is-active span:nth-child(2) {
    opacity: 0 !important;
  }

  nav .menu-toggle.active span:nth-child(3),
  nav .menu-toggle.is-active span:nth-child(3),
  .nav-block .menu-toggle.active span:nth-child(3),
  .nav-block .menu-toggle.is-active span:nth-child(3),
  .menu-toggle.active span:nth-child(3),
  .menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg) !important;
  }

  /* Make sure the toggle sits above overlays */
  .menu-toggle { z-index: 10000; }

  /* Ensure hamburger is visible on mobile across all nav variants */
  nav.nav-block .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff; /* make lines visible on dark backgrounds */
  }
  /* If any global style pushes it out of view, reset margins */
  nav.nav-block .menu-toggle { margin: 0 !important; }
  /* Keep it within the container-inner flow */
  nav.nav-block .container-inner { display: flex; align-items: center; justify-content: space-between; }
}

/* Hamburger active state animation helper - global fallback */
.menu-toggle span {
  transition: transform .3s ease, opacity .3s ease, background .3s ease !important;
}

/* Prevent body scroll when menu is open */
.nav-menu-lock { overflow: hidden; }

/* Form input width adjustment for very small screens */
@media (max-width: 599px) {
  /* Make text inputs, textarea, and selects 20% wider, but NOT checkboxes */
  .talk-to-us .form-content .form-group input[type="text"],
  .talk-to-us .form-content .form-group input[type="email"],
  .talk-to-us .form-content .form-group input[type="tel"],
  .talk-to-us .form-content .form-group textarea,
  .talk-to-us .form-content .form-group select {
    width: 120% !important; /* 20% wider than normal */
    box-sizing: border-box;
  }

  /* Keep checkboxes at default size */
  .talk-to-us .form-content .form-group input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
  }
}

/* Responsive enhancements for ecosystem filter panel */

/* Mobile & tablet: stack filter above list and make it collapsible */
@media (max-width: 768px) {
  /* Force parent container to stack vertically - override ecosystem.css grid */
  .content-with-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    grid-template-columns: unset !important; /* remove grid columns */
    padding: clamp(20px, 4vw, 40px) 3vw !important;
  }

  /* Container grids commonly used on ecosystem pages */
  .ecosystem-grid, .ecosystem-container, .ecosystem-content {
    display: grid;
  }

  /* Sidebar becomes full-width block at the top - MATCH DESKTOP GRADIENT */
  .filter-sidebar {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    order: -1 !important; /* appear before list */
    margin: 0 0 20px 0 !important;
    padding: 16px 18px !important;
    /* Match desktop gradient background */
    background: linear-gradient(180deg, rgba(0, 144, 255, 0.5) 0%, rgba(83, 211, 255, 0.5) 50%, rgba(201, 247, 66, 0.5) 100%) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4) !important;
    top: 0 !important; /* remove sticky positioning */
  }

  /* Keep h3 styling matching desktop */
  .filter-sidebar h3 {
    display: none !important; /* hide "Filters" title since we have toggle */
  }

  /* Products section takes full width and appears after filter */
  .products-section {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Product cards: 90% width on mobile */
  .product-card {
    width: 90% !important;
    max-width: 90% !important;
    margin: 0 auto !important;
  }

  /* Product grid: single column on mobile */
  .product-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }

  /* Toggle button injected by JS - MATCH DESKTOP STYLE */
  .filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.15);
    color: #ffffff;
    font-family: 'DeltaSans', Inter, sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    user-select: none;
    border-bottom: 2px solid rgba(0, 144, 255, 0.4);
    margin-bottom: 12px;
  }
  .filter-toggle .chev {
    transition: transform .25s ease;
    opacity: 0.9;
  }
  .filter-toggle.is-open .chev { transform: rotate(180deg); }

  /* Search input - match desktop */
  .filter-search input {
    background: #dedede !important;
    color: #0c1f3b !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
  }

  .filter-search input::placeholder {
    color: #616161 !important;
  }

  /* Filter groups - match desktop spacing */
  .filter-group {
    margin-bottom: 20px !important;
  }

  .filter-group h4 {
    font-family: 'DeltaSans', Inter, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 12px !important;
  }

  /* Filter options - match desktop */
  .filter-option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 8px 0 !important;
  }

  .filter-option label {
    color: #ffffff !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
  }

  /* Clear button - match desktop */
  .filter-clear {
    display: inline-block !important;
    margin-top: 10px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 8px 12px !important;
    background: transparent !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }

  /* Collapsible content wrapper injected by JS */
  .filter-collapsible {
    overflow: hidden;
    transition: height .28s ease;
    will-change: height;
  }

  /* Make search input full width */
  .filter-search input[type="text"],
  .filter-search input[type="search"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
  }

  /* Make groups more compact on mobile */
  .filter-group { margin-top: 10px !important; }
  .filter-group .filter-option { margin: 6px 0 !important; }

  /* Checkbox inputs: enforce default system sizing to avoid oversized boxes */
  .filter-group input[type="checkbox"],
  .filter-search input[type="checkbox"] {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    width: auto !important;
    height: auto !important;
    inline-size: auto !important;
    block-size: auto !important;
  }
}

/* Ultra-small screens: tighten paddings */
@media (max-width: 480px) {
  .filter-sidebar { padding: 10px 12px !important; }
  .filter-toggle { padding: 8px 10px; }
}