/* NWO Cyberpunk Theme - Color Palette Override */

:root {
  /* Cyberpunk Color Palette */
  --neon-blue: #00FFFF;
  --matrix-green: #00FF41;
  --hot-pink: #FF1493;
  --cyber-purple: #9932CC;
  --deep-black: #000000;
  --dark-gray: #1a1a1a;
  --bright-white: #FFFFFF;
  --light-gray: #CCCCCC;
  --neon-orange: #FF6600;
  --electric-yellow: #FFFF00;
  
  /* Additional cyberpunk colors */
  --terminal-green: #39FF14;
  --error-red: #FF073A;
  --warning-amber: #FFC300;
  --shadow-black: rgba(0, 0, 0, 0.8);
  --glow-blue: rgba(0, 255, 255, 0.3);
  --glow-green: rgba(0, 255, 65, 0.3);
}

/* Global color overrides */
body {
  background-color: var(--deep-black);
  color: var(--light-gray);
  font-family: 'Share Tech Mono', 'Courier New', monospace;
}

h1, h2, h3, h4, h5, h6, .title, .navbar-brand {
  font-family: 'Orbitron', 'Arial', sans-serif !important;
}

/* Navigation styling */
.navbar {
  background: linear-gradient(135deg, var(--dark-gray) 0%, var(--deep-black) 100%) !important;
  border-bottom: 2px solid var(--neon-blue);
  box-shadow: 0 2px 10px var(--glow-blue);
  position: relative;
}

.navbar-menu {
  background: transparent !important;
}

.navbar-start, .navbar-end {
  background: transparent !important;
}

.navbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/images/header_bg.jpg') center center;
  background-size: cover;
  opacity: 0.1;
  z-index: -1;
}

/* Banner styling */
.logo {
  background: linear-gradient(135deg, var(--deep-black) 0%, var(--dark-gray) 100%);
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--neon-blue);
  box-shadow: 0 0 15px var(--glow-blue);
}

.nwo-banner {
  max-height: 60px;
  width: auto;
  filter: drop-shadow(0 0 10px var(--neon-blue));
  transition: all 0.3s ease;
}

.nwo-banner:hover {
  filter: drop-shadow(0 0 15px var(--matrix-green));
  transform: scale(1.05);
}

.logo:hover {
  border-color: var(--matrix-green);
  box-shadow: 0 0 20px var(--glow-green);
}

/* Mobile responsive banner */
@media (max-width: 768px) {
  .nwo-banner {
    max-height: 40px;
  }
  
  .logo {
    padding: 6px 12px;
  }
  
  .navbar::before {
    opacity: 0.1;
  }
  
  /* Mobile menu styling */
  .navbar-menu {
    background: linear-gradient(135deg, var(--dark-gray) 0%, var(--deep-black) 100%) !important;
    border-top: 1px solid var(--neon-blue);
    box-shadow: 0 2px 10px var(--glow-blue);
  }
  
  .navbar-menu.is-active {
    display: block !important;
  }
}

.navbar-item {
  color: var(--light-gray) !important;
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
}

.navbar-brand {
  position: relative;
  z-index: 10;
}

.navbar-menu {
  position: relative;
  z-index: 10;
}

.navbar-item:hover {
  color: var(--neon-blue) !important;
  text-shadow: 0 0 10px var(--neon-blue);
  background-color: transparent !important;
}

.navbar-item:focus {
  background-color: transparent !important;
  color: var(--neon-blue) !important;
}

.navbar-item.is-active {
  background-color: transparent !important;
  color: var(--matrix-green) !important;
  text-shadow: 0 0 10px var(--matrix-green);
}

.navbar-brand .navbar-item {
  color: var(--matrix-green) !important;
  font-weight: bold;
  text-shadow: 0 0 5px var(--matrix-green);
}

/* Burger menu button styling */
.navbar-burger {
  color: var(--neon-blue) !important;
  background-color: transparent !important;
  border: 1px solid var(--neon-blue);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.navbar-burger:hover {
  background-color: transparent !important;
  color: var(--matrix-green) !important;
  border-color: var(--matrix-green);
  box-shadow: 0 0 10px var(--glow-green);
}

.navbar-burger.is-active {
  background-color: transparent !important;
  color: var(--matrix-green) !important;
  border-color: var(--matrix-green);
}

.navbar-burger span {
  background-color: currentColor !important;
  height: 2px !important;
}

/* Dropdown menus (if any) */
.navbar-dropdown {
  background: linear-gradient(135deg, var(--dark-gray) 0%, var(--deep-black) 100%) !important;
  border: 1px solid var(--neon-blue);
  box-shadow: 0 4px 15px var(--glow-blue);
}

.navbar-dropdown .navbar-item {
  color: var(--light-gray) !important;
}

.navbar-dropdown .navbar-item:hover {
  background-color: rgba(0, 255, 255, 0.1) !important;
  color: var(--neon-blue) !important;
}

/* Hero section styling */
.hero.is-dark {
  background: linear-gradient(135deg, var(--deep-black) 0%, var(--dark-gray) 100%);
  position: relative;
}

/* Alternative hero with header background */
.hero.header-bg {
  background: linear-gradient(
    rgba(0, 0, 0, 0.7), 
    rgba(0, 0, 0, 0.8)
  ), url('/images/header_bg.jpg') center center;
  background-size: cover;
  background-attachment: fixed;
}

.hero .title {
  color: var(--neon-blue);
  text-shadow: 0 0 20px var(--neon-blue);
}

.hero .subtitle {
  color: var(--matrix-green);
  text-shadow: 0 0 15px var(--matrix-green);
}

/* Content styling */
.title {
  color: var(--neon-blue) !important;
  text-shadow: 0 0 10px var(--glow-blue);
}

.subtitle {
  color: var(--hot-pink) !important;
  text-shadow: 0 0 8px var(--hot-pink);
}

/* Links */
a {
  color: var(--neon-blue);
  transition: all 0.3s ease;
}

a:hover {
  color: var(--matrix-green);
  text-shadow: 0 0 5px var(--matrix-green);
}

/* Code blocks */
pre {
  background-color: var(--dark-gray) !important;
  border: 1px solid var(--terminal-green);
  box-shadow: 0 0 10px var(--glow-green);
}

code {
  background-color: var(--dark-gray) !important;
  color: var(--terminal-green) !important;
  padding: 2px 4px;
  border-radius: 3px;
}

/* Buttons */
.button {
  background: linear-gradient(135deg, var(--cyber-purple) 0%, var(--hot-pink) 100%);
  color: var(--bright-white);
  border: none;
  transition: all 0.3s ease;
}

.button:hover {
  background: linear-gradient(135deg, var(--hot-pink) 0%, var(--cyber-purple) 100%);
  box-shadow: 0 0 15px var(--hot-pink);
  transform: translateY(-2px);
}

/* Cards and boxes */
.box {
  background: linear-gradient(135deg, var(--dark-gray) 0%, rgba(26, 26, 26, 0.9) 100%);
  border: 1px solid var(--neon-blue);
  box-shadow: 0 0 20px var(--glow-blue);
  color: var(--light-gray);
}

.card {
  background: var(--dark-gray);
  border: 1px solid var(--cyber-purple);
  box-shadow: 0 0 15px rgba(153, 50, 204, 0.3);
}

.card-header {
  background: linear-gradient(135deg, var(--cyber-purple) 0%, var(--hot-pink) 100%);
  color: var(--bright-white);
}

.card-content {
  background: var(--dark-gray);
  color: var(--light-gray);
}

/* Footer */
.footer {
  background: linear-gradient(135deg, var(--deep-black) 0%, var(--dark-gray) 100%);
  border-top: 2px solid var(--matrix-green);
  color: var(--light-gray);
}

/* Input fields */
input, textarea, select {
  background-color: var(--dark-gray) !important;
  color: var(--light-gray) !important;
  border: 1px solid var(--neon-blue) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--matrix-green) !important;
  box-shadow: 0 0 10px var(--glow-green) !important;
}

/* Tables */
.table {
  background-color: var(--dark-gray);
  color: var(--light-gray);
}

.table th {
  background-color: var(--cyber-purple);
  color: var(--bright-white);
  border-color: var(--hot-pink);
}

.table td {
  border-color: var(--dark-gray);
}

.table tr:hover {
  background-color: rgba(0, 255, 255, 0.1);
}

/* Pagination */
.pagination-link {
  background-color: var(--dark-gray);
  color: var(--neon-blue);
  border-color: var(--neon-blue);
}

.pagination-link:hover {
  background-color: var(--neon-blue);
  color: var(--deep-black);
  box-shadow: 0 0 10px var(--glow-blue);
}

.pagination-link.is-current {
  background-color: var(--matrix-green);
  color: var(--deep-black);
  border-color: var(--matrix-green);
}

/* Glitch effect for headers */
.title.glitch {
  animation: glitch 2s infinite;
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

/* Matrix rain effect background */
.matrix-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.1;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2px,
    var(--terminal-green) 2px,
    var(--terminal-green) 4px
  );
}

/* Neon glow effects */
.neon-glow {
  text-shadow: 
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 15px currentColor,
    0 0 20px currentColor;
}

/* Terminal-style elements */
.terminal {
  background-color: var(--deep-black);
  color: var(--terminal-green);
  font-family: 'Courier New', monospace;
  border: 1px solid var(--terminal-green);
  padding: 1rem;
  box-shadow: 0 0 20px var(--glow-green);
}

.terminal::before {
  content: "$ ";
  color: var(--matrix-green);
}