/* === Hydrolix Brand Theme – Custom Styling (Grouped by Function) === */


/* ────────────────────────────────────────────── */
/* 🟦 Brand Accent Variables */
/* ────────────────────────────────────────────── */

:root {
  --md-accent-fg-color: #3e958d;
  --md-accent-fg-color--transparent: rgba(62, 149, 141, 0.15);
}

[data-md-color-scheme="slate"] {
  --md-accent-fg-color: #3e958d;
  --md-accent-fg-color--transparent: rgba(62, 149, 141, 0.12);
}


/* ────────────────────────────────────────────── */
/* 🟩 Left Navigation (Sidebar) - Simplified with Indentation-Based Hierarchy */
/* ────────────────────────────────────────────── */

/* Desktop-only sidebar styles - don't apply on mobile/tablet */
@media screen and (min-width: 76.25em) {
  /* Make the sidebar sticky so it stays on screen during scroll */
  .md-sidebar--primary {
    position: sticky !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: visible !important;
  }

  /* Ensure scrollwrap fills the sidebar height and allows scrolling */
  .md-sidebar__scrollwrap {
    max-height: 100vh !important;
    overflow-y: auto !important;
    padding-bottom: 2rem !important;
  }

  /* Add some padding to the inner nav list to ensure bottom items are visible */
  .md-sidebar--primary .md-nav--primary > .md-nav__list {
    padding-bottom: 2rem !important;
  }
}

/* Top-level section dividers (like "Self-Managed", "Introduction to Hydrolix") */
/* These are the major sections with a border top for visual separation */
.md-nav__item--section > .md-nav__link {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.75rem 0.75rem !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
  border-top: 2px solid rgba(62, 149, 141, 0.25) !important;
}

/* First top-level section should not have top margin */
.md-nav__item--section:first-child > .md-nav__link {
  margin-top: 0 !important;
}

/* Standard nav links - base style */
.md-sidebar .md-nav__link {
  font-size: 0.70rem !important;
  padding: 0.4rem 0.75rem !important;
  line-height: 1.4 !important;
}

/* Level 1 indentation - direct children of sections */
.md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item > .md-nav__link {
  padding-left: 1.0rem !important;
}

/* Level 2 indentation - nested items */
.md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item .md-nav__item > .md-nav__link,
.md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item .md-nav__item > label.md-nav__link {
  padding-left: 1.75rem !important;
}

/* Level 3 indentation - deeply nested items */
.md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item .md-nav__item .md-nav__item > .md-nav__link,
.md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item .md-nav__item .md-nav__item > label.md-nav__link {
  padding-left: 2.5rem !important;
}

/* Level 4 indentation - very deeply nested items */
.md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item .md-nav__item .md-nav__item .md-nav__item > .md-nav__link {
  padding-left: 3.25rem !important;
}

/* Active and hover states */
.md-nav__link:hover {
  color: #3e958d !important;
  background-color: rgba(62, 149, 141, 0.08) !important;
}

.md-nav__link--active {
  color: #3e958d !important;
  font-weight: 600 !important;
}

/* Ensure section headers use teal when active, not yellow */
/* Override the accent color variable that MkDocs Material uses for hover states */
/* Target all possible states including dynamic inline styles and label elements */
.md-sidebar .md-nav__item--section > .md-nav__link,
.md-sidebar .md-nav__item--section > .md-nav__link:hover,
.md-sidebar .md-nav__item--section > .md-nav__link--active,
.md-sidebar .md-nav__item--section > .md-nav__link:focus,
.md-sidebar .md-nav__item--section > .md-nav__link:active,
.md-sidebar .md-nav__item--section > .md-nav__link:visited,
.md-sidebar .md-nav__item--section.md-nav__item--active > .md-nav__link,
.md-sidebar .md-nav__item--section > .md-nav__link[style*="color"],
.md-sidebar .md-nav__item--section > label.md-nav__link,
.md-sidebar .md-nav__item--section > label.md-nav__link:hover,
.md-sidebar .md-nav__item--section > label.md-nav__link:focus,
.md-sidebar .md-nav__item--section > label.md-nav__link:active,
.md-sidebar .md-nav__item--section > label.md-nav__link[tabindex] {
  color: #3e958d !important;
  /* Prevent accent color from being applied */
  --md-accent-fg-color: #3e958d !important;
}

/* Subtitle styles - hide by default, show on hover */
.md-sidebar .md-nav__link small {
  font-size: 0.6rem !important;
  font-weight: 400 !important;
  margin-top: 0.15rem !important;
  line-height: 1.2 !important;
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, max-height 0.2s ease-in-out !important;
}

/* Subtitle hover state - show and color with teal accent */
.md-sidebar .md-nav__link:hover small {
  opacity: 1 !important;
  visibility: visible !important;
  max-height: 100px !important;
  color: #3e958d !important;
}

[data-md-color-scheme="slate"] .md-sidebar .md-nav__link:hover small {
  color: #5eb3ab !important;
}

/* Dark mode overrides */
[data-md-color-scheme="slate"] .md-nav__item--section > .md-nav__link {
  border-top-color: rgba(62, 149, 141, 0.35) !important;
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  background-color: rgba(62, 149, 141, 0.12) !important;
}

/* Ensure section headers stay teal in dark mode too */
[data-md-color-scheme="slate"] .md-sidebar .md-nav__item--section > .md-nav__link,
[data-md-color-scheme="slate"] .md-sidebar .md-nav__item--section > .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-sidebar .md-nav__item--section > .md-nav__link--active,
[data-md-color-scheme="slate"] .md-sidebar .md-nav__item--section > .md-nav__link:focus,
[data-md-color-scheme="slate"] .md-sidebar .md-nav__item--section > .md-nav__link:active,
[data-md-color-scheme="slate"] .md-sidebar .md-nav__item--section > .md-nav__link:visited,
[data-md-color-scheme="slate"] .md-sidebar .md-nav__item--section.md-nav__item--active > .md-nav__link,
[data-md-color-scheme="slate"] .md-sidebar .md-nav__item--section > .md-nav__link[style*="color"],
[data-md-color-scheme="slate"] .md-sidebar .md-nav__item--section > label.md-nav__link,
[data-md-color-scheme="slate"] .md-sidebar .md-nav__item--section > label.md-nav__link:hover,
[data-md-color-scheme="slate"] .md-sidebar .md-nav__item--section > label.md-nav__link:focus,
[data-md-color-scheme="slate"] .md-sidebar .md-nav__item--section > label.md-nav__link:active,
[data-md-color-scheme="slate"] .md-sidebar .md-nav__item--section > label.md-nav__link[tabindex] {
  color: #3e958d !important;
  /* Prevent accent color from being applied */
  --md-accent-fg-color: #3e958d !important;
}

/* Scrollbar styling */
:root .md-sidebar__scrollwrap,
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap {
  scrollbar-color: #3e958d transparent;
  scrollbar-width: thin;
}

.md-sidebar__scrollwrap::-webkit-scrollbar {
  width: 8px;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background-color: #3e958d !important;
  border-radius: 4px;
}

.md-sidebar__scrollwrap::-webkit-scrollbar-track {
  background-color: transparent;
}


/* ────────────────────────────────────────────── */
/* 🟨 Top Navigation */
/* ────────────────────────────────────────────── */

/* Yellow hover and active underline */
.md-tabs__link:hover,
.md-header__topic:hover,
.md-header__title:hover,
.md-header__button:hover {
  color: #ffc614 !important;
}

.md-tabs__item--active .md-tabs__link {
  border-color: #ffc614 !important;
}


/* ────────────────────────────────────────────── */
/* ⚪ Right Navigation (TOC) */
/* ────────────────────────────────────────────── */

.md-nav--secondary .md-nav__title {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

.md-nav--secondary .md-nav__link {
  font-size: 0.75rem !important;
}


/* ────────────────────────────────────────────── */
/* 🔍 Search Highlighting */
/* ────────────────────────────────────────────── */

/* Consistent light teal highlight with black text (both modes) */
.markdown .highlighted,
.md-search-result__highlight,
mark,
[data-md-color-scheme="slate"] .highlighted,
[data-md-color-scheme="slate"] .md-search-result__highlight,
[data-md-color-scheme="slate"] mark {
  background-color: #36bdb1 !important;
  color: #000000 !important;
}


/* ────────────────────────────────────────────── */
/* 🖼️ Image Alignment */
/* ────────────────────────────────────────────── */

.md-content .md-typeset img,
.md-content .md-typeset figure > img {
  margin: 1.5em 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.md-content .md-typeset img:not([src$="#only-light"]):not([src$="#only-dark"]),
.md-content .md-typeset figure > img:not([src$="#only-light"]):not([src$="#only-dark"]) {
  display: block;
}

.md-content .md-typeset figure {
  margin-left: 0;
  margin-right: auto;
}

/* Vertically center images in table cells */
.md-typeset table td img,
.md-typeset table th img {
  vertical-align: middle !important;
  margin: 0.25em 0 !important;
}


/* ────────────────────────────────────────────── */
/* 📋 Admonitions (Readme-style colored backgrounds) */
/* ────────────────────────────────────────────── */

/* Note admonition - Hydrolix teal background */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-left-color: #007073;
  background-color: #e6f5f5;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.note,
[data-md-color-scheme="slate"] .md-typeset details.note {
  background-color: rgba(0, 112, 115, 0.1);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: #cce9ea;
  border-left-color: #007073;
}

[data-md-color-scheme="slate"] .md-typeset .note > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .note > summary {
  background-color: rgba(0, 112, 115, 0.15);
}

.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: #007073;
}

/* Warning admonition - Light yellow/orange background */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: #ff9800;
  background-color: #fff8e1;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.warning,
[data-md-color-scheme="slate"] .md-typeset details.warning {
  background-color: rgba(255, 152, 0, 0.1);
}

.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: #ffecb3;
  border-left-color: #ff9800;
}

[data-md-color-scheme="slate"] .md-typeset .warning > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .warning > summary {
  background-color: rgba(255, 152, 0, 0.15);
}

.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: #ff9800;
}

/* Danger admonition - Light red background */
.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-left-color: #f44336;
  background-color: #ffebee;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.danger,
[data-md-color-scheme="slate"] .md-typeset details.danger {
  background-color: rgba(244, 67, 54, 0.1);
}

.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary {
  background-color: #ffcdd2;
  border-left-color: #f44336;
}

[data-md-color-scheme="slate"] .md-typeset .danger > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .danger > summary {
  background-color: rgba(244, 67, 54, 0.15);
}

.md-typeset .danger > .admonition-title::before,
.md-typeset .danger > summary::before {
  background-color: #f44336;
}

/* Info admonition - Same as note (Hydrolix teal) */
.md-typeset .admonition.info,
.md-typeset details.info {
  border-left-color: #007073;
  background-color: #e6f5f5;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.info,
[data-md-color-scheme="slate"] .md-typeset details.info {
  background-color: rgba(0, 112, 115, 0.1);
}

.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  background-color: #cce9ea;
  border-left-color: #007073;
}

[data-md-color-scheme="slate"] .md-typeset .info > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .info > summary {
  background-color: rgba(0, 112, 115, 0.15);
}

.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before {
  background-color: #007073;
}

/* Hint admonition - Same as note (Hydrolix teal) */
.md-typeset .admonition.hint,
.md-typeset details.hint {
  border-left-color: #007073;
  background-color: #e6f5f5;
}

[data-md-color-scheme="slate"] .md-typeset .admonition.hint,
[data-md-color-scheme="slate"] .md-typeset details.hint {
  background-color: rgba(0, 112, 115, 0.1);
}

.md-typeset .hint > .admonition-title,
.md-typeset .hint > summary {
  background-color: #cce9ea;
  border-left-color: #007073;
}

[data-md-color-scheme="slate"] .md-typeset .hint > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .hint > summary {
  background-color: rgba(0, 112, 115, 0.15);
}

.md-typeset .hint > .admonition-title::before,
.md-typeset .hint > summary::before {
  background-color: #007073;
}


/* ────────────────────────────────────────────── */
/* 📑 Heading Styles (H1, H2, H3) */
/* ────────────────────────────────────────────── */

/* Bold weight hierarchy for accessibility - relies on font weight and size, not color */

.md-typeset h1 {
  font-weight: 800 !important;
  color: #1a1a1a !important;
  margin-top: 0 !important;
  margin-bottom: 1em !important;
}

[data-md-color-scheme="slate"] .md-typeset h1 {
  color: #ffffff !important;
}

.md-typeset h2 {
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin-top: 2em !important;
  margin-bottom: 0.8em !important;
}

[data-md-color-scheme="slate"] .md-typeset h2 {
  color: #ffffff !important;
}

.md-typeset h3 {
  font-weight: 600 !important;
  color: #2d2d2d !important;
  margin-top: 1.6em !important;
  margin-bottom: 0.6em !important;
}

[data-md-color-scheme="slate"] .md-typeset h3 {
  color: #e8e8e8 !important;
}