/* NIKKE Megaguide Custom Styles */

/* Color Variables - Dark Mode (Default) */
:root {
  --color-nikke-blue: #3eafff;
  --color-guide-blue: var(--color-nikke-blue);
  --color-guide-red: #ff6666;
  --color-guide-gold: #ddb742;
  --color-guide-pink: #e664e6;
  --color-guide-purple: #c773ff;
  --color-guide-orange: #eb8d00;
  --color-guide-green: #72ff00;
  --color-guide-yellow: #f8f800;
  --color-guide-gray: #999;
}

/* Color Variables - Light Mode */
[data-md-color-scheme="default"] {
  --color-guide-blue: #0973b9;
  --color-guide-red: #ee0000;
  --color-guide-gold: #90731a;
  --color-guide-pink: #cc21cc;
  --color-guide-purple: #ad31ff;
  --color-guide-orange: #ab6600;
  --color-guide-green: #3d8700;
  --color-guide-yellow: #7a7a00;
  --color-guide-gray: #767676;
}

/* Material Theme Primary Color Override */
[data-md-color-scheme="default"][data-md-color-primary="custom"] {
  --md-primary-fg-color: #0973b9;
  --md-primary-fg-color--light: #3eafff;
  --md-primary-fg-color--dark: #06598a;
  --md-accent-fg-color: #3eafsexff;
}

[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-primary-fg-color: #3eafff;
  --md-primary-fg-color--light: #6bc5ff;
  --md-primary-fg-color--dark: #2a9ad9;
  --md-accent-fg-color: #3eafff;
}

/* Utility Classes for Color Coding */
.color-red {
  color: var(--color-guide-red) !important;
}

.color-gold {
  color: var(--color-guide-gold) !important;
}

.color-pink {
  color: var(--color-guide-pink) !important;
}

.color-purple {
  color: var(--color-guide-purple) !important;
}

.color-orange {
  color: var(--color-guide-orange) !important;
}

.color-green {
  color: var(--color-guide-green) !important;
}

.color-yellow {
  color: var(--color-guide-yellow) !important;
}

.color-blue {
  color: var(--color-guide-blue) !important;
}

.color-gray {
  color: var(--color-guide-gray) !important;
}

/* Link Colors */
.md-content a {
  color: var(--color-nikke-blue);
}

.md-content a:hover {
  color: var(--color-guide-blue);
}

/* Image Zoom Prevention (for images marked as no-zoom) */
img.no-zoom {
  cursor: default;
}

/* Responsive Image Sizing */
img[width] {
  max-width: 100%;
  height: auto;
}