/* ─────────── Branding Variables ─────────── */
:root {
  --bg-dark: #0D0D0E;
  --bg-card: #1A1A1C;
  --text-light: #E5E5E5;

  --accent-mint: #4EFAAA;
  --accent-teal: #007C6B;
  --accent-red: #920000;

  --font-head: 'Montserrat', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  --transition: 0.2s ease;
}

/* ─────────── Base Styling ─────────── */
html, body {
  height: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text-light);
  margin: 0;
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  margin: 0;
}

a {
  transition: var(--transition);
  text-decoration: none;
  color: var(--text-light);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─────────── Header / Hero ─────────── */
.hero {
  text-align: center;
  padding: 3.5rem 1rem;
  background: linear-gradient(90deg, var(--accent-teal) 0%, var(--bg-dark) 80%);
  border-bottom: 2px solid var(--accent-mint);
  position: relative;
  overflow: hidden;
}

/* Compact header for secondary pages */
.site-header {
  background: transparent;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(78,250,170,0.04);
}

.site-header .header-inner {
  display:flex;
  align-items:center;
  gap:1rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

.site-logo, .site-header img {
  width: 120px;
  height: auto;
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  pointer-events: auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-identifier {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-mint);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.9;
}

.brand-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.15rem;
  background: linear-gradient(135deg, var(--accent-mint), var(--accent-teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-spacer { flex: 1 1 auto; }

.header-meta { display:flex; align-items:center; gap:0.8rem; }

.status-pill {
  font-family: var(--font-mono);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(78,250,170,0.06);
  border: 1px solid rgba(78,250,170,0.06);
  color: var(--accent-mint);
  font-size: 0.8rem;
}

/* legacy hero logo for index page */
.hero-logo {
  width: 200px;
  height: auto;
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ─────────── Navigation ─────────── */
#main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0d1117;
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--accent-teal);
}

#main-nav.is-sticky {
  background-color: #121212;
  box-shadow: 0 4px 10px rgba(0, 255, 180, 0.1);
}

.nav-left, .nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#main-nav a {
  color: #b2f7ef;
  font-weight: 500;
}

#main-nav a:hover {
  color: var(--accent-mint);
  text-shadow: 0 0 6px var(--accent-mint);
}

/* ─────────── Dropdowns ─────────── */
.nav-dropdown-parent {
  position: relative;
}

.nav-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #141b22;
  min-width: 220px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 1000;
}

.nav-dropdown-content a {
  display: block;
  padding: 0.5rem 1rem;
}

.nav-dropdown-parent:hover .nav-dropdown-content {
  display: block;
}

/* ─────────── Content Sections ─────────── */
.content {
  max-width: 950px;
  margin: auto;
  padding: 2rem;
  flex: 1 0 auto;
  width: 100%;
}

.about-box, .eotm-card {
  background-color: var(--bg-card);
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 6px;
  border: 1px solid var(--accent-teal);
}

.eotm-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.eotm-profile img {
  width: 100px;
  height: 100px;
  border: 2px solid var(--accent-teal);
  border-radius: 6px;
  object-fit: cover;
}

.eotm-text span {
  font-size: 0.9rem;
  color: var(--text-light);
  opacity: 0.7;
}

/* ─────────── Footer ─────────── */
footer {
  text-align: center;
  padding: 1.4rem;
  background: var(--bg-card);
  border-top: 1px solid var(--accent-teal);
  font-size: 0.9rem;
  color: var(--accent-teal);
  flex-shrink: 0;
}

/* Center login/auth boxes */
.center-content {
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center;     /* vertical centering */
  min-height: 70vh;        /* fill most of the viewport height */
  padding: 2rem;
  flex-direction: column;
}

.auth-box {
  background: var(--bg-card);
  border: 1px solid var(--accent-teal);
  border-radius: 8px;
  padding: 2rem;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.auth-box input {
  width: 80%;
  padding: 0.6rem 1rem;
  margin: 0.5rem 0;
  border-radius: 6px;
  border: 1px solid #444;
  background: #1f1f1f;
  color: var(--text-light);
}

.auth-box button {
  margin-top: 1rem;
  width: 100%;
  padding: 0.7rem;
  border: none;
  border-radius: 6px;
  background-color: var(--accent-teal);
  color: #fff;
  cursor: pointer;
}

.auth-box button:hover {
  background-color: var(--accent-mint);
}

.feedback {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.auth-switch a {
  cursor: pointer;
  color: var(--accent-mint);
  text-decoration: underline;
}


/* ─────────── Navbar Login Button ─────────── */
.nav-login {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #b2f7ef;
  font-weight: 500;
  background-color: #1f1f1f;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.nav-login:hover {
  background-color: #2a2a2a;
  color: var(--accent-mint);
}

.nav-login i {
  margin-right: 0.5rem;
}

/* ─────────── ROADMAP ─────────── */
.roadmap-wrapper {
  width: 100%;
  overflow: hidden;
  padding: 2rem 0;
  position: relative;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  min-height: 60vh;
}

/* Arrow buttons */
.roadmap-arrow {
  background: none;
  border: none;
  color: var(--accent-mint);
  font-size: 2.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.roadmap-arrow:hover {
  color: #6fffc5;
  text-shadow: 0 0 8px var(--accent-mint);
  transform: scale(1.2);
}

.roadmap-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.roadmap-arrow:disabled:hover {
  color: var(--accent-mint);
  text-shadow: none;
  transform: scale(1);
}

/* Glowing green line behind */
.roadmap-wrapper::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-mint);
  box-shadow: 0 0 12px var(--accent-mint), 0 0 24px var(--accent-mint);
  opacity: 0.9;
  z-index: 0;
}

/* ─────────── Button utilities (shared) ─────────── */
.btn-primary, .btn-secondary {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  text-transform: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-mint), var(--accent-teal));
  color: #081413;
  box-shadow: 0 6px 18px rgba(78,250,170,0.06);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(78,250,170,0.12); }

.btn-secondary {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  color: var(--text-light);
}
.btn-secondary:hover { transform: translateY(-2px); background: rgba(255,255,255,0.03); }

/* compact icon-button variant for small actions */
.btn-icon { padding: .45rem .6rem; font-weight:700; border-radius:6px; font-size:0.85rem; }
.btn-icon i { font-size:1rem; }

/* ─────────── Mail UI polish ─────────── */
.mail-list { padding: .6rem; }
.message-item { padding:.8rem .9rem; border-bottom:1px solid rgba(255,255,255,0.02); display:flex; gap:.8rem; align-items:flex-start; cursor:pointer; transition: background 0.12s ease, transform 0.08s ease; }
.message-item:hover { background: rgba(78,250,170,0.02); transform: translateY(-1px); }
.message-item.unread { background: rgba(78,250,170,0.03); box-shadow: inset 0 0 0 1px rgba(78,250,170,0.02); }
.message-item .avatar { width:44px;height:44px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-mint),var(--accent-teal));color:#081413;font-weight:700 }
.message-item .meta { flex:1; min-width: 0 }
.message-item .subject { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.message-item .snippet { color:var(--text-light); opacity:.86; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.mail-view { padding:1.2rem; }
.mail-view .header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.8rem }
.mail-view .header h2 { margin:0; font-size:1.25rem; }
.mail-view .header .meta { color:var(--text-light); opacity:.9; font-size:0.95rem }
.mail-view .controls { display:flex; gap:.5rem; align-items:center }

.mail-list .search input { width:100%; padding:.6rem; border-radius:6px; border:1px solid rgba(255,255,255,0.04); background:#0f0f10; color:var(--text-light) }

.compose-modal { width:720px; max-width:calc(100% - 48px); }
.compose-modal header { display:flex; justify-content:space-between; align-items:center }
.compose-modal input, .compose-modal textarea { background:#0f0f10; border:1px solid rgba(255,255,255,0.04); }

/* small responsive tweaks */
@media (max-width: 1000px){ .mail-view { min-width: unset; padding:.8rem } .mail-left{width:100%;flex-direction:row;gap:.6rem} .mail-list{flex:0 0 40%;} }

/* helper spacing */
.kv { display:flex; gap:.6rem; align-items:center }
.kv .label { color:var(--text-light); opacity:.9; font-weight:700 }
.kv .value { color:var(--text-light); opacity:.8 }


/* Custom scrollbar styling */
.roadmap-wrapper::-webkit-scrollbar {
  height: 10px;
}

.roadmap-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.roadmap-wrapper::-webkit-scrollbar-thumb {
  background: var(--accent-mint);
  border-radius: 5px;
  box-shadow: 0 0 8px var(--accent-mint);
}

.roadmap-wrapper::-webkit-scrollbar-thumb:hover {
  background: #6fffc5;
  box-shadow: 0 0 12px #6fffc5;
}

/* Firefox scrollbar */
.roadmap-wrapper {
  scrollbar-color: var(--accent-mint) transparent;
  scrollbar-width: thin;
}

.roadmap-track {
  display: flex;
  gap: 20px;
  min-width: max-content;
  padding: 0;
  position: relative;
  z-index: 1;
  scroll-behavior: smooth;
  overflow: hidden;
  width: 420px;
}

.roadmap-phase {
  background: var(--bg-card);
  border: 1px solid var(--accent-teal);
  border-radius: 8px;
  padding: 1.5rem;
  width: 380px;
  min-width: 380px;
  position: relative;
  z-index: 2;
  opacity: 0.5;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.roadmap-phase h3 {
  margin-top: 0;
  color: var(--accent-mint);
  font-size: 1.2rem;
}

.roadmap-phase p {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.5;
}

.roadmap-phase.completed {
  border-color: var(--accent-teal);
}

.roadmap-phase.completed h3 {
  color: var(--accent-teal);
}

.roadmap-phase.active {
  border-color: var(--accent-mint);
  box-shadow: 0 0 16px rgba(78, 250, 170, 0.3);
}

.roadmap-phase.active h3 {
  color: var(--accent-mint);
  text-shadow: 0 0 8px var(--accent-mint);
}

.roadmap-phase.future {
  border-color: var(--accent-teal);
  border-style: dashed;
  opacity: 0.4;
}

.roadmap-phase.future h3 {
  color: var(--accent-teal);
  opacity: 0.7;
}

.phase-date {
  display: inline-block;
  margin-top: 15px;
  font-size: 0.85rem;
  color: var(--accent-mint);
  opacity: 0;
  transition: opacity 0.6s ease;
  font-weight: 500;
}

/* Reveal animation */
.roadmap-phase.visible {
  opacity: 1;
  transform: translateY(0);
}

.roadmap-phase.visible .phase-date {
  opacity: 1;
}