/* style.css - global styles for both pages */

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --sidebar-w: 220px;
  --icon-strip-w: 56px;
}

/* Page background & font */
html,body { height: 100%; }
body {
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #fff;
  background: radial-gradient(circle at 10% 10%, #071033 0%, #000 60%);
  overflow-x: hidden;
}

/* Starfield (behind everything) */
#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* stars created by JS will be children of #starfield */
#starfield .star {
  position: absolute;
  border-radius: 50%;
  background: white;
  opacity: 0;
  animation: twinkle infinite;
}

/* twinkle (duration randomized in JS) */
@keyframes twinkle {
  0%,100% { opacity: 0; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Sidebar */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--sidebar-w);
  height: 100%;
  padding-top: 120px; /* increased from previous 5.5rem */
  background: rgba(0,0,0,0.85);
  border-right: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  z-index: 100;
  transition: transform 300ms ease;
}

/* closed state (fully hidden) */
.sidebar.closed {
  transform: translateX(calc(-1 * var(--sidebar-w)));
}

/* site title and nav */
.sidebar .site-title {
  position: absolute;
  left: 1rem;
  top: 1.2rem;
  font-size: 1.1rem;
  text-shadow: 0 0 8px rgba(125,125,255,0.6);
}

.sidebar ul { list-style:none; padding: 0 0.8rem; }
.sidebar ul li { margin: 0.6rem 0; }
.sidebar ul li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  transition: background 160ms;
}
.sidebar ul li a:hover { background: rgba(99,102,241,0.12); }

/* hide the textual label when viewport is small or you can set for closed state if desired */
.sidebar ul li a .label { font-weight: 500; }

/* Icon strip (always visible) */
.icon-strip {
  position: fixed;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  z-index: 99;
}
.icon-strip a {
  display: inline-flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  background: rgba(79,70,229,0.8);
  color: white;
  border-radius: 50%;
  text-decoration: none;
  transition: transform 160ms, background 160ms;
}
.icon-strip a:hover { transform: translateY(-3px); background: rgba(99,102,241,1); }

/* Toggle button */
.toggle-btn {
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 101;
  background: #4f46e5;
  color: #fff;
  border: none;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.toggle-btn:hover { background: #6366f1; }

/* Content area */
.content {
  position: relative;
  z-index: 10;
  padding: 3.2rem 2rem;
  margin-left: var(--sidebar-w);
  transition: margin-left 300ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

/* When sidebar closed, keep a smaller left margin (space for icon strip) */
.content.shifted {
  margin-left: calc(var(--icon-strip-w));
}

/* Headings & cards */
h1 { font-size: 2.6rem; margin-bottom: .6rem; text-shadow: 0 0 18px rgba(125,125,255,0.25); }
p { max-width: 800px; opacity: .92; margin-bottom: 1.2rem; }

.card {
  background: rgba(255,255,255,0.04);
  padding: 1.2rem 1.4rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

/* small utilities */
.time { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; font-size: 1.15rem; margin: .6rem 0 1rem; }
.btn {
  display:inline-block;
  background: #4f46e5;
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 160ms;
}
.btn:hover { background: #6366f1; }

/* Fact files detail default styling (if factfiles.css not included, keep basics) */
.detail img { width: 100%; max-width: 480px; border-radius: 10px; margin: 1rem 0; }

/* responsive fallback: on small screens default sidebar hidden */
@media (max-width: 820px) {
  .sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); } /* closed */
  .content { margin-left: calc(var(--icon-strip-w)); }
}