/*
   -------------------------------------------------------------------------
   HEXANOMICON.CSS
   Theme: The Void (Deep Dark)
   Palette: Arcane Purple (Magic), Frost Blue (Ice), Necro Green (Life/Code)
   -------------------------------------------------------------------------
*/

:root {
  /* --- The Void (Backgrounds) --- */
  --md-hue: 260;
  --md-default-bg-color: #08080b; /* Deep Void Black */
  --md-default-bg-color--light: #12121a; /* Slightly lighter for cards/code */

  /* --- The Tri-Color Palette --- */
  --arcane-purple: #7c4dff;  /* Deep Magic */
  --frost-blue: #00e5ff;     /* Ice Chill */
  --necro-green: #00ff9d;    /* The code-sigil green */

  /* --- Material Overrides --- */
  --md-primary-fg-color: #000000; /* Header background (Black) */
  --md-accent-fg-color: var(--frost-blue); /* Accent Links are Ice Blue */

  /* Sidebar/Drawer Background (Critical for Left-Tree Layout) */
  --md-drawer-bg-color: var(--md-default-bg-color);

  /* Text */
  --md-text-color: #d0d0e0;

  /* --- Code Blocks (The Green Sprinkle) --- */
  --md-code-bg-color: #1a1a20;
  --md-code-fg-color: var(--necro-green); /* Code text is Green */
}

/*
   ==========================================================================
   1. THE HEADER (Glassy & Glowing)
   ==========================================================================
*/
.md-header {
  background-color: rgba(8, 8, 11, 0.9) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--arcane-purple); /* Purple line anchor */
  box-shadow: 0 4px 20px rgba(124, 77, 255, 0.2); /* Purple Glow */
}

/* Site Title: Gradient Text */
.md-header__title, .md-header__button.md-logo {
  font-weight: bold;
}

/* The Logo Image (Book) */
.md-header__button.md-logo img {
  border-radius: 5px;
  box-shadow: 0 0 15px var(--frost-blue); /* The book glows with Ice */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.md-header__button.md-logo img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 25px var(--necro-green); /* Turns green on interaction */
}

/*
   ==========================================================================
   2. THE NAVIGATION SIDEBAR (The Tree on the Left)
   ==========================================================================
*/

/* Ensure the sidebar blends into the void */
.md-sidebar {
  background-color: transparent !important;
}

/* Default Links in the Tree */
.md-nav__link {
  color: #777; /* Dim by default so they recede */
  transition: all 0.2s ease;
}

/* Hovering a link in the tree */
.md-nav__link:hover {
  color: var(--frost-blue) !important;
  text-shadow: 0 0 5px rgba(0, 229, 255, 0.3);
}

/* The Active Link (Where you are right now) */
.md-nav__item--active > .md-nav__link {
  color: var(--necro-green) !important; /* Active green */
  font-weight: 700;
  text-shadow: 0 0 8px rgba(0, 255, 157, 0.2);
}

/* Section Headers in the Tree (e.g. "The Sepulcher") */
.md-nav__item .md-nav__link--active {
   color: #fff; /* White when expanded */
}

/*
   ==========================================================================
   3. CONTENT & TYPOGRAPHY
   ==========================================================================
*/

/* General Links in Text */
a {
  color: var(--frost-blue);
  transition: color 0.2s;
}
a:hover {
  color: var(--necro-green);
  text-decoration: none;
}

/* Headers (H1, H2, etc) - Subtle Purple Glow */
h1, h2, h3 {
  color: #fff;
  text-shadow: 0 0 20px rgba(124, 77, 255, 0.3);
}

/* Code Blocks */
.md-typeset pre > code {
  background-color: var(--md-code-bg-color);
  color: var(--necro-green);
  border: 1px solid #333;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* Inline Code */
.md-typeset code {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--necro-green);
}

/*
   ==========================================================================
   4. INTERACTIVE ELEMENTS (Buttons & Icons)
   ==========================================================================
*/

/* Ghostly Ice Buttons */
.md-button.md-button--primary {
  border: 1px solid var(--frost-blue);
  color: var(--frost-blue);
  background: transparent;
  transition: all 0.3s ease;
}

.md-button.md-button--primary:hover {
  background: var(--frost-blue);
  color: black;
  box-shadow: 0 0 20px var(--frost-blue);
}

/* Edit (Pencil) & View (Eye) Buttons */
.md-content__button {
  color: #555;
  transition: all 0.3s ease;
}

.md-content__button[title*="Edit"]:hover {
  color: var(--necro-green);
  transform: scale(1.1);
  text-shadow: 0 0 10px var(--necro-green);
}

.md-content__button[title*="View"]:hover {
  color: var(--frost-blue);
  transform: scale(1.1);
  text-shadow: 0 0 10px var(--frost-blue);
}

/*
   ==========================================================================
   5. THE FOOTER (Abyssal)
   ==========================================================================
*/
.md-footer {
  background-color: #000000 !important;
  border-top: 1px solid #1a1a20;
}

/* Prev/Next Navigation Links */
.md-footer__link {
  transition: opacity 0.2s;
}

.md-footer__link:hover .md-footer__title {
  color: var(--frost-blue);
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

/* Social Icons */
.md-footer-meta a {
  color: #555;
}
.md-footer-meta a:hover {
  color: var(--necro-green) !important;
}

/* Scroll to top button */
.md-top {
    color: var(--frost-blue);
    background-color: rgba(8, 8, 11, 0.8);
}
.md-top:hover {
    color: var(--necro-green);
}

/*
   ==========================================================================
   6. PROPHECY HERO
   ==========================================================================
*/

.md-typeset .prophecy-hero {
  margin: 0 auto 2rem;
  text-align: center;
}

.md-typeset .prophecy-hero__sigil {
  display: block;
  width: min(17.5rem, 72vw);
  height: auto;
  margin: 0 auto 0.75rem;
  border: 1px solid #3b0a6e;
  border-radius: 15px;
  box-shadow: 0 0 40px rgba(124, 77, 255, 0.25);
}

.md-typeset .prophecy-hero__title {
  margin: 0;
  color: #f7f5ff;
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.2));
  font-size: clamp(2.25rem, 7vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .md-typeset .prophecy-hero__title {
    background: linear-gradient(
      90deg,
      var(--arcane-purple),
      var(--frost-blue),
      var(--necro-green)
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.md-typeset .prophecy-hero__kicker {
  margin: 0.5rem 0 0;
  color: #a0a0b0;
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(0.8rem, 2.5vw, 1.1rem);
  letter-spacing: 0.06em;
}

.md-typeset .prophecy-hero__motto {
  margin: 0.8rem 0 0;
}

.md-typeset .prophecy-hero__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin: 1rem 0 0;
}

.md-typeset .prophecy-hero__badges a {
  line-height: 0;
}

.md-typeset .prophecy-hero__badges img {
  width: auto;
  max-width: 100%;
  height: 1.75rem;
}

@media (max-width: 30rem) {
  .md-typeset .prophecy-hero {
    margin-bottom: 1.5rem;
  }

  .md-typeset .prophecy-hero__sigil {
    width: min(15rem, 72vw);
  }
}

@media (forced-colors: active) {
  .md-typeset .prophecy-hero__sigil {
    border-color: CanvasText;
    box-shadow: none;
  }

  .md-typeset .prophecy-hero__title {
    background: none;
    color: CanvasText;
    filter: none;
    -webkit-text-fill-color: CanvasText;
    text-shadow: none;
  }
}