/* Cyberpunk Minimalist Theme for MkDocs Material */

:root > * {
  /* Backgrounds: Deep blacks and dark grays */
  --md-default-bg-color: #0a0a0a;
  --md-default-bg-color--light: #121212;
  --md-default-bg-color--lighter: #1a1a1a;
  --md-default-bg-color--lightest: #222222;

  /* Foregrounds: High contrast text */
  --md-default-fg-color: #e0e0e0;
  --md-default-fg-color--light: #a0a0a0;
  --md-default-fg-color--lighter: #707070;
  --md-default-fg-color--lightest: #404040;

  /* Primary Brand Color: Cyan/Neon */
  --md-primary-fg-color: #00ffcc;
  --md-primary-fg-color--light: #33ffd6;
  --md-primary-fg-color--dark: #00ccaa;
  --md-primary-bg-color: #000000;
  --md-primary-bg-color--light: #111111;

  /* Accent Color */
  --md-accent-fg-color: #ff00ff; /* Magenta accent for contrast */
  --md-accent-fg-color--transparent: rgba(255, 0, 255, 0.1);
  --md-accent-bg-color: #000000;
  --md-accent-bg-color--light: #111111;

  /* Code Blocks */
  --md-code-bg-color: #111111;
  --md-code-fg-color: #00ffcc;
  --md-code-hl-color: rgba(0, 255, 204, 0.15);

  /* Borders and Shadows */
  --md-shadow-z1: 0 4px 6px rgba(0, 255, 204, 0.05);
  --md-shadow-z2: 0 6px 12px rgba(0, 255, 204, 0.1);
  --md-shadow-z3: 0 10px 20px rgba(0, 255, 204, 0.15);
}

/* --- Specific Element Overrides --- */
.md-icon > svg {
  color: var(--md-primary-fg-color) !important;
}
/* Header styling */
.md-header {
  background-color: rgba(10, 10, 10, 0.8) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #333;
  color: var(--md-primary-fg-color) !important;
}

/* Tabs */
.md-tabs {
  background-color: var(--md-primary-fg-color) !important;
}
.md-tabs__item--active > .md-tabs__link {
  background-color: var(--md-primary-fg-color) !important;
  color: var(--md-primary-bg-color) !important;
  border-bottom: 2px solid var(--md-primary-bg-color) !important;
}

/* Sidebar navigation */
.md-nav__link--active {
  color: var(--md-primary-fg-color) !important;
  font-weight: 600;
  border-left: 2px solid var(--md-primary-fg-color);
  padding-left: 0.5rem;
  background-color: rgba(0, 255, 204, 0.05);
}

/* Headings: Monospace for a technical feel */
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-family: 'Fira Code', monospace;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.md-typeset h1 {
  border-bottom: 2px solid #333;
  padding-bottom: 0.5rem;
}

/* Code blocks: Add a subtle border */
.md-typeset pre > code {
  border: 1px solid #333;
  border-radius: 4px;
}

/* Inline code */
.md-typeset code {
  background-color: #1a1a1a;
  color: #00ffcc;
  border: 1px solid #333;
  padding: 0.1em 0.3em;
}

/* Links */
.md-typeset a {
  color: var(--md-primary-fg-color);
  text-decoration: none;
  transition: color 0.2s, text-shadow 0.2s;
}

.md-typeset a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px var(--md-primary-fg-color);
}

/* Search bar */
.md-search__form > .md-search__input {
  background-color: #1a1a1a !important;
  border: 1px solid var(--md-default-fg-color--lighter) !important;
  color: #fff !important;
}
.md-search__form > .md-search__input::placeholder {
  color: var(--md-default-fg-color--lighter) !important;
}
.md-search__form:focus {
  border-color: var(--md-primary-fg-color) !important;
  box-shadow: 0 0 0 1px var(--md-primary-fg-color) !important;
}

/* --- Unified Footer & Navigation Styling --- */

/* Main footer container - This holds both the buttons and the copyright */
.md-footer {
  background-color: #050505; /* Deep black for the entire footer area */
  border-top: 1px solid #222; /* Single border separating footer from page */
}

/* The navigation area (Previous / Next) */
.md-footer__inner {
  padding: 2rem 1rem 1rem 1rem; /* Extra padding on top to space it from the border */
  gap: 1rem;
}

/* Style the Previous/Next links as neon cards */
.md-footer__link {
  background-color: rgba(0, 255, 204, 0.03);
  border: 1px solid #333;
  border-radius: 8px;
  transition: all 0.3s ease;
  padding: 1rem !important;
}

/* Cyberpunk neon glow effect on hover */
.md-footer__link:hover {
  background-color: rgba(0, 255, 204, 0.08);
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 0 15px rgba(0, 255, 204, 0.2), inset 0 0 10px rgba(0, 255, 204, 0.05);
}

/* "Previous" and "Next" small labels */
.md-footer__direction {
  font-family: 'Fira Code', monospace;
  color: var(--md-primary-fg-color);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.9;
  margin-bottom: 0.25rem;
}

/* The actual page title in the footer buttons */
.md-footer__title .md-ellipsis {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

/* The SVG icons (arrows) */
.md-footer__button.md-icon svg {
  fill: var(--md-primary-fg-color);
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Make the arrows move slightly and glow on hover */
.md-footer__link--prev:hover .md-footer__button.md-icon svg {
  transform: translateX(-4px);
  filter: drop-shadow(0 0 4px var(--md-primary-fg-color));
}

.md-footer__link--next:hover .md-footer__button.md-icon svg {
  transform: translateX(4px);
  filter: drop-shadow(0 0 4px var(--md-primary-fg-color));
}

/* The very bottom meta section (Copyright & "Made with Material") */
.md-footer-meta {
  background-color: transparent; /* Remove the separate background */
  border-top: none; /* Remove the dividing line between buttons and copyright */
  padding: 0 1rem 2rem 1rem; /* Adjust padding to flow naturally below buttons */
}

/* Make the copyright container span the full width and align text to the right */
.md-copyright {
  width: 100%;
  text-align: right;
  color: #666;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Float the copyright highlight to the left side */
.md-copyright__highlight {
  float: left;
  text-align: left;
}

/* Clear the float so the container doesn't collapse */
.md-copyright::after {
  content: "";
  display: table;
  clear: both;
}

/* Make links in the meta section glow on hover */
.md-copyright a {
  color: var(--md-primary-fg-color);
  transition: all 0.2s ease;
}

.md-copyright a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px var(--md-primary-fg-color);
}