/* Hacker theme reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body {
  background: #000;
  color: #0f0;
  font-family: 'Share Tech Mono', monospace, monospace;
  overflow: auto; /* allow page scrolling on small screens */
  -webkit-font-smoothing: antialiased;
}

/* Fullscreen matrix canvas */
#matrix {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.3), #000 60%);
  opacity: 0.65; /* dim the matrix so overlay text is readable */
  pointer-events: none; /* don't block touches on mobile */
}

.overlay {
  position: relative;
  z-index: 20; /* ensure overlay and UI sit above the canvas */
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: rgba(0,0,0,0.48); /* slightly darker so text contrasts */
  color: #0f0;
}
.navbar { position: relative; z-index: 25; }
.logo { font-size: 1.2rem; font-weight: 700; letter-spacing: 1px; }
.nav-links { list-style: none; display: flex; gap: 24px; position: relative; z-index: 26; }
.nav-links a { color: #9ff29f !important; text-decoration: none; font-size: 1rem; font-weight:700; }
.hamburger { display: none; cursor: pointer; }

/* Terminal */
.terminal {
  flex: 1 1 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  background: rgba(0,0,0,0.02); /* subtle background to separate from matrix */
  position: relative;
  z-index: 21;
}
.terminal-output {
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 8px;
  max-height: calc(100vh - 220px);
}
.terminal-output p { color: #9ff29f; margin-bottom: 8px; white-space: pre-wrap; }
.input-line { display: flex; align-items: center; gap: 8px; color: #9ff29f; }
.prompt { color: #7fff7f; font-weight: 700; }
.typing { min-height: 1.2rem; }
.caret { color: #0f0; animation: blink 1s steps(2,start) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.content { position: static; left: auto; }

/* Footer */
footer { padding: 12px 24px; color: #0f0; background: rgba(0,0,0,0.25); font-size: 0.9rem; }

/* Responsive */
@media (max-width: 992px) {
  /* Mobile/tablet adjustments */
  .nav-links { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; }
  .nav-links a { font-size: 0.94rem; }
  .hamburger { display: none; }
  .overlay { padding: 8px 6px; }
  .navbar { padding: 8px 12px; }
  .terminal { padding: 12px; }
  .terminal-output { max-height: 44vh; }
  .home-context { padding: 10px; }
  .muted { font-size: 0.95rem; }
}

@media (max-width: 480px) {
  .nav-links a { font-size: 0.88rem; }
  .logo { font-size: 1rem; }
  .terminal { padding: 10px; }
  .terminal-output { max-height: 40vh; }
  .home-context p { font-size: 0.95rem; }
}

/* Small visual polish */
.terminal-output::-webkit-scrollbar { width: 8px; }
.terminal-output::-webkit-scrollbar-thumb { background: rgba(0,255,0,0.12); border-radius: 4px; }

/* Resources banner */
.resources { padding: 12px 24px; background: rgba(0,0,0,0.18); border-top: 1px solid rgba(0,255,0,0.06); }
.nav-banner { display: flex; gap: 24px; color: #9ff29f; font-weight: 900; padding: 6px 0; position: relative; z-index: 26; }
.nav-banner span { padding: 6px 10px; border-radius: 4px; }
.nav-banner span:hover { background: rgba(0,255,0,0.04); }
.resource-actions { margin-top: 10px; display: flex; align-items: center; gap: 12px; position: relative; z-index: 26; }
.run-scan { background: linear-gradient(90deg,#073,#06c); color: #001100; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-weight: 700; }
.run-scan:hover { filter: brightness(1.05); }
.muted { color: #98ff98; opacity: 0.7; font-size: 0.9rem; }
.home-banner { padding: 12px 0; }
.home-copy { opacity: 0.95; }

/* Scan input */
.scan-input { background: rgba(0,0,0,0.22); border: 1px solid rgba(0,255,0,0.06); color: #bfffbf; padding: 8px 10px; border-radius: 6px; min-width: 240px; }
.scan-input:focus { outline: 2px solid rgba(0,255,0,0.12); }
.scan-input[hidden] { display: none; }

/* Home context content */
.home-context { margin-top: 14px; padding: 12px; background: rgba(0,0,0,0.22); border: 1px solid rgba(0,255,0,0.04); border-radius: 6px; }
.home-context h3, .home-context h4 { color: #aaffaa; margin-bottom: 6px; }
.home-context p { color: #bfffbf; opacity: 0.98; margin-bottom: 8px; }
.home-context .help-note { color: #8fff8f; font-size: 0.9rem; opacity: 0.9; }

/* Ensure other UI pieces appear above the matrix */
.resource-actions, .nav-banner, footer { position: relative; z-index: 21; }

/* Mobile floating switch (three-dot) */
.mobile-switch {
  position: fixed !important;
  right: 16px !important;
  bottom: 18px !important;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(242, 255, 255, 0.06);
  border: 1px solid rgba(0,255,0,0.06);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999 !important; /* ensure highest stacking */
  backdrop-filter: blur(4px);
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  pointer-events: auto; /* ensure clickable */
  touch-action: manipulation;
}
.mobile-switch .dot { width:8px;height:8px;background:#00796b;border-radius:50%;display:inline-block;margin:3px; }

@media (max-width: 992px) {
  .mobile-switch { display:flex; }
  /* when mobile-open show nav as full centered list */
  body.mobile-open .nav-links {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 80px;
    background: rgba(0,0,0,0.9);
    padding: 18px 20px;
    border-radius: 12px;
    display:flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    z-index: 55;
  }
  body.mobile-open .nav-links a {
    font-size: 1.2rem;
    padding: 8px 12px;
    display: block;
    width: 100%;
    text-align: center;
    background: rgba(0,255,0,0.02);
    border-radius: 8px;
  }
  /* ensure switch stays on top while overlay shown */
  body.mobile-open .mobile-switch { right: 16px !important; }
}