/* ===============================
   space.craft.ed — Final CSS v6
   =============================== */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

/* Base */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;                   /* never show horizontal scroll */
}

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

body {
  background: #000;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  cursor: url('assets/rocket-cursor.png'), auto;
}

/* ===== HEADER (star overlay that does NOT affect layout) ===== */
.page-header {
  position: relative;
  text-align: center;
  padding: 12px 12px 10px;              /* small, content-based */
}

/* Star banner overlay (fixed visual height, no layout height) */
.page-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;                        /* visual star strip */
  background: url('assets/starsbanner.png') center top / cover no-repeat;
  z-index: -1;                          /* sits behind content */
  pointer-events: none;
}

/* Inline logo + title */
.banner-inner-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;                     /* a little breathing room */
}

.banner-logo-small {
  width: 72px; height: 72px;
  border-radius: 12px;
  box-shadow: 0 0 22px #008cff90;
}

.banner-title-inline {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.9rem;
  color: #cfe8ff;
  text-shadow: 0 0 14px #75d1ff;
  line-height: 1.05;
}
.banner-tagline-inline {
  margin: 0;
  color: #aab6c6;
  letter-spacing: .06em;
  font-size: .95rem;
}

/* Menu (kept tight so it fits above the fold) */
.main-menu { margin-top: 8px; }
.main-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.main-menu a {
  display: block;
  padding: 8px 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  color: #fff; text-decoration: none;
  font-family: 'Orbitron', sans-serif;
  font-size: .92rem; white-space: nowrap;
  transition: .2s ease;
}
.main-menu a:hover, .main-menu a.active {
  background: rgba(120,180,255,.18);
  box-shadow: 0 0 8px #9bf;
}

/* ===== MAIN CONTENT ===== */
.panel {
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  max-width: 900px;
  margin: 18px auto;
  padding: 24px;
  box-shadow: 0 0 18px rgba(255,255,255,.10);
  line-height: 1.6;
}
h1, h2, h3 { font-family: 'Orbitron', sans-serif; color: #eaf6ff; }
h2.glow { text-shadow: 0 0 20px #a8e4ff, 0 0 40px #8ecaff; }

ul, ol { margin: 1rem 0; padding-left: 1.2rem; text-align: left; }
li { margin-bottom: .5rem; }

/* Code + copy button */
.code-block {
  background: rgba(0,0,0,.65);
  color: #00ffcc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  overflow-x: auto;
  margin-top: 10px;
}
.copy-container { display: flex; justify-content: flex-end; margin-top: 6px; }
.copy-btn {
  background: rgba(255,255,255,.12);
  color: #fff; border: none;
  padding: 6px 12px; border-radius: 8px;
  cursor: pointer; transition: .2s;
  font-family: 'Rajdhani', sans-serif;
}
.copy-btn:hover { background: rgba(255,255,255,.22); box-shadow: 0 0 8px #9bf; }

/* Footer */
footer { text-align: center; padding: 26px 12px; color: #cfcfcf; }
footer img { width: 60px; vertical-align: middle; margin-right: 8px; }

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .page-header { padding: 10px 10px 8px; }
  .page-header::before { height: 110px; }  /* smaller star strip on phones */

  .banner-inner-inline { gap: 8px; flex-direction: column; }
  .banner-logo-small { width: 64px; height: 64px; }
  .banner-title-inline { font-size: 1.6rem; }
  .banner-tagline-inline { font-size: .9rem; }

  .main-menu ul { gap: 6px; }
  .main-menu a { font-size: .98rem; padding: 9px 14px; }

  .panel { margin: 14px 12px; padding: 18px; }
}

/* Rocket trail (optional) */
@keyframes trail { from {opacity:1; transform:scale(1)} to {opacity:0; transform:scale(2)} }
.trail {
  position: fixed; width:6px; height:6px; border-radius:50%;
  background:#9bf; pointer-events:none; animation: trail .8s linear;
  z-index: 9999;
}