@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --color-background: #ffffff !important;
  --color-text: #000000 !important;
}

body, html {
  background-color: #ffffff !important;
  color: #000000 !important;
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
}

/* Force everything to black and white */
* {
  background-color: transparent !important;
  color: #000000 !important;
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Hard borders for cards to give the terminal/brutalist look */
a {
  text-decoration: none !important;
  transition: all 0.1s ease-in-out !important;
  border: none !important;
}

a:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

a:hover * {
  color: #ffffff !important;
}

/* Hide all images, SVGs, and specific icon classes */
img {
  display: none !important;
}

/* Headers */
h1, h2, h3, h4, .text-xl, .text-2xl, .text-3xl {
  border-bottom: 2px solid #000000 !important;
  padding-bottom: 4px !important;
  margin-bottom: 12px !important;
  font-weight: 700 !important;
  border: none !important; /* override the 'a' border if it wraps */
  background: transparent !important;
}

/* Ensure body doesn't get border from wildcard * */
body, html, main, section, div {
  border: none !important;
}

/* Re-apply border only to specific item cards */
.group {
  border: none !important;
  padding: 0 !important;
}

.group:hover {
  background-color: #000000 !important;
}

.group:hover * {
  color: #ffffff !important;
}

/* Search Bar Styling */
input[type="text"], input[type="search"] {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  border-radius: 0 !important;
  padding: 8px !important;
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
}

input[type="text"]:focus, input[type="search"]:focus {
  outline: 2px solid #000000 !important;
  outline-offset: 2px !important;
}

/* Ensure widgets (weather, resources) have borders */
.widget {
  border: 1px solid #000000 !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Force SVG and UI icons to be black */
svg, i, .homepage-icon, [class*="icon"] {
  color: #000000 !important;
  stroke: #000000 !important;
  fill: currentColor !important;
}

/* Ensure the widget pills (like the Miniflux counters and Docker CPU bars) have a nice terminal border */
.widget-pill, .glances-pill, .service-widget {
  border: 1px solid #000000 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 2px 4px !important;
}

/* Wrap the entire card (link + widgets) in the terminal border */
div:has(> a.group) {
  border: 1px solid #000000 !important;
  padding: 12px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

div:has(> a.group):hover {
  background-color: #000000 !important;
}

div:has(> a.group):hover * {
  color: #ffffff !important;
}