/* ================================================================
   RAYNEXTECH — RESPONSIVE CSS
   Breakpoints: 1024px (tablet), 768px (mobile), 480px (small)
   ================================================================ */

/* ── HAMBURGER BUTTON ─────────────────────────────────────────── */
.mob-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 200;
  padding: 0;
}
.mob-btn:hover { border-color: var(--primary); background: var(--primary-l); }
.mob-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text2);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.mob-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mob-btn.open span:nth-child(2) { opacity: 0; }
.mob-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE NAV OVERLAY ──────────────────────────────────────── */
.mob-nav {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.mob-nav.open { transform: translateX(0); }

.mob-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text2);
  text-decoration: none;
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.mob-nav a:hover,
.mob-nav a.active {
  background: var(--primary-l);
  border-color: var(--primary-b);
  color: var(--primary);
}
.mob-nav .mob-nav-divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}
.mob-nav .mob-nav-cta {
  margin-top: 16px;
  padding: 16px;
  background: var(--primary);
  color: #fff !important;
  border-radius: 10px;
  justify-content: center;
  font-size: 12px;
}
.mob-nav .mob-nav-cta:hover { background: var(--primary-h) !important; }

/* Status strip inside mobile nav */
.mob-nav-status {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text3);
}
.mob-nav-status span { display: flex; align-items: center; gap: 6px; }
.mob-nav-dot {
  width: 7px; height: 7px; border-radius: 50%;
  animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}

/* Hide top nav status labels on tablet and below */
.nav-status-strip { display: flex; align-items: center; }

/* ── TABLET — 1024px ─────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Show hamburger, hide nav links */
  .mob-btn { display: flex !important; }
  .nav-links { display: none !important; }
  .nav-status-strip { display: none !important; }

  /* Nav padding */
  nav { padding: 0 24px !important; }

  /* Shrink hero padding */
  .hero { padding: 100px 24px 60px !important; }

  /* index.html — hero stat widget max-width */
  .hero [style*="width:340px"] { width: 100% !important; max-width: 100% !important; }

  /* soc-platform hero dashboard widget */
  .hero [style*="max-width:360px"] { max-width: 100% !important; }

  /* Section padding */
  section, [style*="padding:100px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [style*="padding:80px 40px"] { padding: 64px 24px !important; }

  /* Threat intel hero grid */
  [style*="grid-template-columns:1fr 340px"] {
    grid-template-columns: 1fr !important;
  }

  /* Contact page main layout */
  [style*="grid-template-columns:1fr 360px"] {
    grid-template-columns: 1fr !important;
  }

  /* Contact sticky sidebar — remove sticky */
  #contact-sidebar {
    position: static !important;
  }

  /* SOC platform 3-col telemetry */
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Section horizontal padding */
  [style*="padding:100px 40px"] { padding: 64px 24px !important; }
  [style*="padding:80px 40px"] { padding: 64px 24px !important; }

  /* Inline-style hero headers */
  [style*="padding:140px 40px 80px"] { padding: 110px 24px 60px !important; }
  [style*="padding:120px 40px 60px"] { padding: 110px 24px 48px !important; }

  /* Contact main */
  [style*="padding:0 40px 100px"] { padding: 0 24px 64px !important; }
}

/* ── MOBILE — 768px ──────────────────────────────────────────── */
@media (max-width: 768px) {

  nav { padding: 0 16px !important; }

  /* Hero */
  .hero { padding: 90px 16px 50px !important; }

  /* All inline hero grid 2-col → 1-col */
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns:1fr 360px"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Services hero 2-col inner grid */
  [style*="grid-template-columns:1fr 1fr;gap:10px"],
  [style*="grid-template-columns:1fr 1fr;gap:20px"] {
    grid-template-columns: 1fr !important;
  }

  /* Service & intel image cards — reduce height */
  .svc-card, .intel-card { height: 320px !important; }

  /* Step cards — full width */
  .step-card { min-width: 100% !important; }

  /* Section padding */
  [style*="padding:100px 40px"],
  [style*="padding:80px 40px"],
  [style*="padding:100px 32px"],
  [style*="padding:80px 32px"] { padding: 56px 16px !important; }

  [style*="padding:64px 40px"] { padding: 48px 16px !important; }

  /* Hero padding (inline-style heroes on services / soc / threat-intel / contact) */
  [style*="padding:140px 40px 80px"] { padding: 90px 16px 48px !important; }
  [style*="padding:120px 40px 60px"] { padding: 90px 16px 40px !important; }

  /* Inline margin/padding reductions */
  [style*="margin:0 auto;padding:0 40px"] { padding: 0 16px !important; }
  [style*="padding:0 40px"] { padding: 0 16px !important; }

  /* Contact main section padding */
  [style*="padding:0 40px 100px"] { padding: 0 16px 60px !important; }

  /* Hide hero side widget (stats / intel feed) on mobile */
  .hero-side-widget { display: none !important; }

  /* Threat intel feed panel */
  .feed-panel { display: none !important; }

  /* SOC 3-col → 1-col */
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Feature rows — flex-wrap already wraps, just reduce gaps */
  [style*="gap:64px"] { gap: 32px !important; }
  [style*="gap:80px"] { gap: 40px !important; }

  /* Stats minmax cards */
  [style*="minmax(180px,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Trust strip overflow */
  [style*="gap:40px;align-items:center;flex-wrap:wrap"] { gap: 16px !important; }

  /* Contact sidebar — unstick and reorder */
  #contact-sidebar {
    position: static !important;
    order: -1;
  }

  /* Form labels on contact */
  [style*="font-size:0.85rem"] { font-size: 0.8rem !important; }

  /* Reduce hero title size on very small mobile */
  .hero-title, [style*="font-size:clamp"] {
    letter-spacing: -0.02em !important;
  }

  /* Table overflow */
  table { display: block; overflow-x: auto; }

  /* Operationalization cards */
  [style*="minmax(240px,1fr)"],
  [style*="minmax(260px,1fr)"],
  [style*="minmax(300px,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer grid */
  [style*="minmax(180px,1fr);gap:48px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }

  /* Buttons wrap */
  [style*="display:flex;flex-wrap:wrap;gap:16px"] { gap: 12px !important; }
  .btn-primary, .btn-secondary { width: 100% !important; justify-content: center !important; }
}

/* ── SMALL PHONES — 480px ───────────────────────────────────── */
@media (max-width: 480px) {

  /* Stats — full width */
  [style*="minmax(180px,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="minmax(260px,1fr)"],
  [style*="minmax(300px,1fr)"],
  [style*="minmax(320px,1fr)"],
  [style*="minmax(340px,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer — single column */
  [style*="minmax(180px,1fr);gap:48px"] {
    grid-template-columns: 1fr !important;
  }

  /* Nav logo — smaller */
  .nav-logo { font-size: 16px !important; }

  /* Section title clamp overrides */
  .section-title { font-size: 1.8rem !important; }

  /* Hero blob decorations — hide to reduce paint */
  .hero-blob { display: none !important; }

  /* Card service tech tag overflow */
  [style*="display:flex;flex-wrap:wrap;gap:6px"] { gap: 4px !important; }

  /* Contact service options wrap better */
  #services-grid {
    grid-template-columns: 1fr !important;
  }

  /* Intel feed panel */
  .feed-panel { display: none !important; }

  /* Step numbers */
  .step-num { font-size: 2.5rem !important; }
}

/* ── THREAT MAP RESPONSIVE (index.html) ─────────────────────── */
@media (max-width: 1024px) {
  #map-layout {
    grid-template-columns: 1fr !important;
  }
  #map-panel {
    height: 320px !important;
  }
}

@media (max-width: 768px) {
  #map-panel {
    height: 260px !important;
  }
  #map-stats-col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* ── UTILITY — PREVENT OVERFLOW ─────────────────────────────── */
@media (max-width: 768px) {
  body { overflow-x: hidden; }

  /* Only constrain media, not all elements (avoids grid/flex collapse) */
  img, video, canvas, svg, iframe, table { max-width: 100%; }
  img { height: auto; }

  /* Inline min-width guards that cause overflow on small screens */
  [style*="min-width:320px"] { min-width: 0 !important; width: 100% !important; }
  [style*="min-width:300px"] { min-width: 0 !important; width: 100% !important; }
  [style*="min-width:280px"] { min-width: 0 !important; }
}

/* ── ANIMATIONS — RESPECT REDUCED MOTION ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.1ms !important;
  }
}