:root {
  /* Hacker theme color palette */
  --hacker-bg: #0a0a0a;
  --hacker-text: #00ff41;
  --hacker-accent: #008f11;
  --hacker-dark: #121212;
  --hacker-light: #00ff41;
  --hacker-secondary: #003b00;
  --terminal-font: 'Source Code Pro', monospace;
}

/* Force all major elements to use our theme */
html, body, #root, main, .app, .container {
  background-color: var(--hacker-bg) !important;
  color: var(--hacker-text) !important;
}

/* Override header/nav styles */
header, nav, .navbar, .nav-bar, .header, .top-bar, [class*="header"], [class*="navbar"] {
  background-color: var(--hacker-dark) !important;
  border-bottom: 1px solid var(--hacker-light) !important;
  color: var(--hacker-text) !important;
}

/* Override footer styles */
footer, .footer, [class*="footer"] {
  background-color: var(--hacker-dark) !important;
  border-top: 1px solid var(--hacker-light) !important;
  color: var(--hacker-text) !important;
}

/* Replace orange highlights */
a, button, .btn, [class*="button"], [class*="link"], [class*="btn"] {
  color: var(--hacker-light) !important;
  border-color: var(--hacker-accent) !important;
}

a:hover, button:hover, .btn:hover, [class*="button"]:hover, [class*="link"]:hover {
  color: var(--hacker-accent) !important;
  text-shadow: 0 0 5px var(--hacker-light) !important;
}

/* Terminal-like elements */
pre, code, .code-block {
  font-family: var(--terminal-font) !important;
  background-color: var(--hacker-dark) !important;
  border: 1px solid var(--hacker-accent) !important;
  color: var(--hacker-light) !important;
}

/* Replace any orange, primary color, or highlight elements */
[class*="orange"], 
[class*="primary"], 
[class*="highlight"],
[style*="orange"],
[style*="rgb(255, 165, 0)"],
[style*="rgb(255, 140, 0)"],
[style*="#ff8c00"],
[style*="#ffa500"] {
  background-color: var(--hacker-secondary) !important;
  border-color: var(--hacker-light) !important;
  color: var (--hacker-light) !important;
}

/* Style all headings */
h1, h2, h3, h4, h5, h6, [class*="heading"], [class*="title"] {
  color: var(--hacker-light) !important;
  text-shadow: 0 0 5px var(--hacker-light);
  font-family: var(--terminal-font) !important;
}

/* Add terminal caret to certain elements */
.terminal-style::after {
  content: "_";
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Cards, panels and boxes */
.card, .panel, .box, [class*="card"], [class*="panel"], [class*="box"] {
  background-color: var(--hacker-dark) !important;
  border: 1px solid var(--hacker-accent) !important;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.2) !important;
}

/* Input fields */
input, textarea, select, .form-control {
  background-color: var(--hacker-dark) !important;
  border: 1px solid var(--hacker-secondary) !important;
  color: var(--hacker-light) !important;
}

/* Remove any white backgrounds */
div, section, main, article, aside {
  background-color: transparent !important;
}

/* Target any specific white background elements */
[style*="background-color: white"], 
[style*="background-color: #fff"], 
[style*="background-color: rgb(255, 255, 255)"],
[style*="background: white"],
[class*="bg-white"],
[class*="background-white"] {
  background-color: var(--hacker-dark) !important;
}

/* Additional specificity for common components */
nav ul li, .menu-item, .nav-item {
  background-color: transparent !important;
  color: var(--hacker-light) !important;
}

/* Force all spans and paragraphs to use the correct text color */
span, p, div, li {
  color: var(--hacker-text) !important;
}

/* Hero section fixes */
[class*="hero"], 
.hero, 
.hero-section, 
section:first-of-type, 
.jumbotron, 
.banner, 
[class*="banner"],
.landing-hero {
  background-color: var(--hacker-bg) !important;
  background-image: none !important;
  color: var(--hacker-text) !important;
  border-bottom: 1px solid var(--hacker-light) !important;
}

/* Target hero section elements */
[class*="hero"] *, .hero *, .banner * {
  color: var(--hacker-text) !important;
  font-family: var(--terminal-font) !important;
}

[class*="hero"] h1, 
[class*="hero"] h2, 
.hero h1, 
.hero h2,
.banner h1,
.banner h2 {
  color: var(--hacker-light) !important;
  text-shadow: 0 0 8px var(--hacker-light) !important;
}

/* "Get in touch" and "Read articles" buttons */
[class*="button"]:contains("Get in touch"), 
[class*="button"]:contains("Read articles"),
a:contains("Get in touch"),
a:contains("Read articles"),
button:contains("Get in touch"),
button:contains("Read articles"),
.cta, 
.primary-button, 
.main-button,
[class*="cta"],
[class*="primary-button"] {
  background-color: var(--hacker-dark) !important;
  color: var(--hacker-light) !important;
  border: 1px solid var(--hacker-accent) !important;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.3) !important;
  text-shadow: 0 0 5px var(--hacker-light) !important;
  transition: all 0.3s ease !important;
}

[class*="button"]:contains("Get in touch"):hover, 
[class*="button"]:contains("Read articles"):hover,
a:contains("Get in touch"):hover,
a:contains("Read articles"):hover,
button:contains("Get in touch"):hover,
button:contains("Read articles"):hover,
.cta:hover,
.primary-button:hover,
.main-button:hover,
[class*="cta"]:hover,
[class*="primary-button"]:hover {
  background-color: var(--hacker-secondary) !important;
  box-shadow: 0 0 15px rgba(0, 255, 65, 0.5) !important;
  transform: scale(1.05) !important;
}

/* Generic button styling for any buttons that might be missed */
.btn, .button, button[type="button"], button[type="submit"], input[type="button"], input[type="submit"] {
  background-color: var(--hacker-dark) !important;
  color: var (--hacker-light) !important;
  border: 1px solid var(--hacker-accent) !important;
  transition: all 0.3s ease !important;
}

.btn:hover, .button:hover, button[type="button"]:hover, button[type="submit"]:hover, input[type="button"]:hover, input[type="submit"]:hover {
  background-color: var(--hacker-secondary) !important;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.3) !important;
}

/* Fix for potential background images */
[style*="background-image"], [class*="bg-image"], [class*="background-image"] {
  background-image: none !important;
}

/* Add a subtle matrix-like animation to the hero section */
@keyframes matrix-fade {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

.hero::before, [class*="hero"]::before, .banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--hacker-bg);
  opacity: 0.7;
  animation: matrix-fade 3s infinite;
  pointer-events: none;
  z-index: -1;
}

/* Add custom style for div elements that might contain these buttons */
div:has(> a:contains("Get in touch")), 
div:has(> a:contains("Read articles")),
div:has(> button:contains("Get in touch")),
div:has(> button:contains("Read articles")) {
  background-color: transparent !important;
}

/* Fix for any inline styles using !important */
[style*="background-color"][style*="!important"] {
  background-color: var(--hacker-dark) !important;
}

[style*="color"][style*="!important"] {
  color: var(--hacker-text) !important;
}

/* Add a fallback for any buttons with specific IDs */
#getInTouch, #readArticles, #contact, #articles,
[id*="contact"], [id*="touch"], [id*="articles"], [id*="read"] {
  background-color: var(--hacker-dark) !important;
  color: var(--hacker-light) !important;
  border: 1px solid var(--hacker-accent) !important;
}

/* Add a special glow effect to important buttons */
.hero .btn, .hero .button, .hero a[class*="button"],
[class*="hero"] .btn, [class*="hero"] .button, [class*="hero"] a[class*="button"],
.banner .btn, .banner .button, .banner a[class*="button"] {
  box-shadow: 0 0 15px rgba(0, 255, 65, 0.5) !important;
}

/* Replace squares.svg background with Meteor.svg */
[style*="squares.svg"], 
[style*="url('/squares.svg')"], 
[style*='url("/squares.svg")'], 
[style*="url('../squares.svg')"],
[style*='url("../squares.svg")'],
[style*="url('../../squares.svg')"],
[style*='url("../../squares.svg")'],
[class*="squares-background"] {
  background-image: url('/images/Meteor.svg') !important;
}

/* If any background shorthand properties include squares.svg */
[style*="background:"][style*="squares.svg"] {
  background-image: url('/images/Meteor.svg') !important;
}