/* --- Base --- */
body {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  background-color: #000;
  color: #fff;
}

/* --- Hero / Header --- */
header {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("/images/marslog1o.jpg") no-repeat center;
  position: relative;
  /* Parallax-like effect */
  background-attachment: fixed;
  overflow: hidden;
}

/* Moving starfield overlay */
header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 60%, rgba(255,255,255,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,0.8) 50%, transparent 51%);
  background-repeat: repeat;
  background-size: 400px 400px;
  animation: drift 60s linear infinite;
  opacity: 0.4;
}



/* Main title */
header h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: #1e90ff; /* Neon Blue */
  text-shadow: 0 0 18px rgba(255,0,0,0.8);
  z-index: 1;
}

header p {
  font-size: 1.1rem;
  color: #ff6666;
  z-index: 1;
  margin-top: 12px;
  opacity: 0;
  transform: translateY(8px);
  animation: riseIn 0.7s ease 0.4s forwards;
}

.cta-btn {
  display: inline-block;
  position: relative;             /* needed for z-index to work */
  z-index: 10;                    /* ensure it’s on top of neighbors */

  margin: 24px auto 0;
  padding: 12px 18px;
  border: 1px solid #1e90ff;
  background: linear-gradient(180deg, rgba(30,144,255,0.2), rgba(30,144,255,0.05));
  color: #fff;
  font-size: 1.05rem;
  text-decoration: none;          /* make <a> look like a button */
  text-align: center;
  border-radius: 10px;
  cursor: pointer;

  box-shadow: 0 0 16px rgba(30,144,255,0.5),
              inset 0 0 10px rgba(30,144,255,0.25);
  transition: transform 180ms ease,
              box-shadow 200ms ease,
              border-color 200ms ease;

  width: auto;
  max-width: 90vw;
  white-space: nowrap;
  -webkit-appearance: none;       /* iOS fix */
  -webkit-tap-highlight-color: rgba(255,255,255,0.1);
}
.cta-btn:hover,
.cta-btn:focus {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 28px rgba(255,69,69,0.65), inset 0 0 16px rgba(30,144,255,0.45);
  border-color: #ff4d4d;
}
/* Small-screen fine-tuning */
@media (max-width: 480px) {
  .cta-btn {
    font-size: 1rem;
    padding: 10px 16px;
    border-radius: 8px;
    max-width: 40vw;             /* a bit narrower on small phones */
  }
}

/* --- Sections --- */
.section {
  padding: clamp(48px, 6vw, 80px) 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(10,10,20,1) 100%);
}

.section h2 {
  color: #ff4d4d;
  margin-bottom: 30px;
  text-shadow: 0 0 10px rgba(255,77,77,0.5);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}

.card {
  background: #0b0b0f;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(30,144,255,0.25);
  box-shadow: 0 0 12px rgba(255,0,0,0.18), inset 0 0 6px rgba(30,144,255,0.15);
  transform: translateY(0);
  transition: transform 180ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 24px rgba(255,0,0,0.35), 0 12px 24px rgba(0,0,0,0.35);
  border-color: rgba(255,77,77,0.55);
}

/* --- Footer --- */
footer {
  background: #000;
  color: #999;
  text-align: center;
  padding: 24px;
  border-top: 1px solid #ff4d4d;
}

/* --- Keyframes --- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes drift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-400px,-400px,0); }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- Small adjustments for mobile --- */
@media (max-width: 480px) {
  .cta-btn { width: calc(100% - 40px); }
}

.site-logo {
  display: block;
  max-width: 400px;   /* adjust width as needed */
  height: auto;       /* keeps aspect ratio */
  margin: 0 auto;     /* centers it if inside a container */
}

/* Shared look: clean, professional */
.photos { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:20px; }
.card { width: 240px; background:#0a0a0a; border:1px solid #222; border-radius:12px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.35); }
.card img { width:100%; height:auto; display:block; }
.meta { text-align:left; padding:10px 12px; font-size:0.9rem; color:#ddd; border-top:1px solid #222; }
.meta .sub { opacity:.7; font-size:0.85rem; }
.controls { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-top:1px solid #222; }
.controls .vote, .controls .save { background:#121212; border:1px solid #2a2a2a; border-radius:10px; padding:6px 10px; color:#eaeaea; cursor:pointer; }
.controls .vote:hover, .controls .save:hover { border-color:#3a82f6; }
.controls .score { min-width:36px; text-align:center; font-weight:bold; color:#e6e6e6; }
.save.active { border-color:#f6c13a; color:#f6c13a; }

/* toast */
#soft-toast { position:fixed; left:50%; transform:translateX(-50%); bottom:24px; background:#111; color:#fff; padding:10px 14px; border:1px solid #333; border-radius:10px; opacity:0; pointer-events:none; transition:opacity .2s ease; }
#soft-toast.show { opacity:1; }

/* Landing page grid */
.landing-main {
  display: flex;
  justify-content: center;
  padding: 40px 20px;
}

.rover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 900px;
}

.rover-card {
  display: block;
  padding: 14px;
  border: 2px solid #222;
  border-radius: 12px;
  background: #0a0a0a;
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
  text-align: center;
}

.rover-card:hover {
  transform: translateY(-4px);
  border-color: #3a82f6; /* accent */
}

.rover-card h2 {
  margin: 0 0 12px;
  font-size: 1.5rem;
}

.rover-card p {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.8;
}

/* Make the controls sit above any hero/overlay and accept clicks */
.controls-bar,
#sol,
#camera,
#fetch-photos {
  position: relative;
  z-index: 1001;
}

/* Header/hero should NOT cover the page content */
.site-header, header, h1, .site-logo1 {
  position: relative;
  z-index: 1;            /* lower than the controls */
}

/* If you have any decorative overlay/hero layer, don't let it block clicks */
.header-overlay,
.hero,
.hero::before,
.hero::after {
  pointer-events: none;  /* clicks pass through */
}

/* Avoid clipping native dropdowns inside containers */
body, main, .landing-main, .photos, .controls-bar {
  overflow: visible;     /* native <select> menus won�t be cut off */
}

/* If you previously made the header fixed, give the body top padding so content isn�t hidden */
.site-header.is-fixed {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
}
body.has-fixed-header {
  padding-top: 80px;     /* match your header height */
}

/* On Safari/iOS, ancestors with transforms can break select popups; ensure none on controls row */
.controls-bar {
  transform: none !important;
}

/* Top-left nav container */
.nav {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 1000;
  display: flex;
  gap: 10px;
}

/* Reuse/extend your existing .nav-btn look */
.nav-btn {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid #1e90ff;
  background: linear-gradient(180deg, rgba(30,144,255,0.18), rgba(30,144,255,0.06));
  color: #fff;
  font-size: 0.95rem;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(30,144,255,0.4), inset 0 0 8px rgba(30,144,255,0.22);
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.nav-btn:hover { transform: translateY(-1px); }
.nav-btn:active { transform: translateY(0); }

#nav-account { white-space: nowrap; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; }