/* ------------------- */

/* Site Header Styles  */

/* ------------------- */



body {

  background-color: #1e2a38;

  color: #f0f0f0;

  font-family: 'Orbitron', sans-serif;

  margin: 0;

  padding: 20px;

}



/* Auth controls / Discord button */

.auth-controls {

  display: flex;

  align-items: center;

  gap: 10px;

}



.login-status {

  opacity: 0.9;

  font-weight: 600;

}



.avatar {

  width: 22px;

  height: 22px;

  border-radius: 50%;

  vertical-align: -3px;

  margin-right: 6px;

}



.discord-btn {

  /* optional polish */

}



/* Banner */

.site-banner {

  max-width: 900px;

  width: 100%;

  height: auto;

  display: block;

}



/* Profile card */

.profile-container {

  max-width: 500px;

  margin: auto;

  background: #2c3e50;

  padding: 30px;

  border-radius: 12px;

  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);

  text-align: center;

}



/* Header */

.site-header {

  background: linear-gradient(to left, #00254e, #e75700);

  padding: 20px;

  display: flex;

  flex-direction: column;

  align-items: center;

  border-bottom: 2px solid #bb6a1e;

}



.header-logo {

  display: flex;

  justify-content: center;

  width: 100%;

  margin-bottom: 10px;

}



/* Nav */

.nav-links {

  align-items: center;

  display: flex;

  gap: 15px;

  flex-wrap: wrap;

  flex: 0 0 auto;

  justify-content: center;

  width: 100%;

}



.nav-links .auth-controls {

  margin-left: auto; /* push login to the right */

  flex: 0 0 auto;

}



.nav-links a {

  color: #fff;

  text-decoration: none;

  font-weight: bold;

  padding: 8px 16px;

  border-radius: 8px;

  background-color: #bb6a1e;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

  transition: all 0.3s ease;

  border: 1px solid transparent;

}



.nav-links a:hover {

  background-color: #e3863f;

  transform: translateY(-2px);

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);

  border-color: #f4ad47;

}



.nav-links a.active {

  background-color: #f49b00;

  border-bottom: 2px solid #fff;

}



.nav-links .auth-controls form {

  display: inline-block;          /* keep it sized to its contents */

  width: auto;

  height: auto;

  margin: 0;

  padding: 0;

  border: 0;

  background: transparent;

}



/* Discord login button (Rails button_to) */

.login-btn {

  padding: 8px 16px;

  border-radius: 8px;

  cursor: pointer;

  background-color: #5865F2 !important; /* Discord blurple */

  color: #fff !important;

  border: none;

  box-shadow: 0 2px 8px rgba(88, 101, 242, 0.6);

  transition: background 0.3s ease, transform 0.2s;

}



.login-btn:hover {

  background-color: #4752c4 !important;

  transform: scale(1.05);

}



/* Mobile tweaks */

@media (max-width: 640px) {

  .nav-links {

    justify-content: center;

    gap: 10px;

  }



  .nav-links .auth-controls {

    margin-left: 0;

    width: 100%;

    justify-content: center;

  }



  .nav-links a,

  .login-btn {

    padding: 8px 12px;

  }

}