/* === Remove ALL link underlines (Critical Fix) === */
a,
a:link,
a:visited,
a:hover,
a:link:hover,
a:visited:hover,
.md-nav__link,
.md-nav__link:link,
.md-nav__link:visited,
.md-nav__link:hover,
.md-sidebar__nav a,
.md-sidebar__nav a:link,
.md-sidebar__nav a:visited,
.md-sidebar__nav a:hover,
.md-header__button a,
.md-header__button a:link,
.md-header__button a:visited,
.md-header__button a:hover,
.md-footer__link,
.md-footer__link:link,
.md-footer__link:visited,
.md-footer__link:hover,
.md-search__result a,
.md-search__result a:link,
.md-search__result a:visited,
.md-search__result a:hover {
  text-decoration: none !important;
}

/* === Enhance readability & contrast === */

/* Body: dark background, light text */
body {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* Headers: white, bold, clean */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
  font-weight: 600 !important;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  letter-spacing: -0.02em;
}

/* Sidebar: dark background, subtle border 
.md-sidebar {
  background-color: #252525 !important;
  border-right: 1px solid #444 !important;
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.3);
}*/

/* Sidebar links: light gray, hover to white 
.md-sidebar__nav a {
  color: #cccccc !important;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}
*/
.md-sidebar__nav a:hover {
  color: #ffffff !important;
  background-color: #333333 !important;
  border-left: 2px solid #66ccff;
}

/* Code blocks: dark, high-contrast, readable */
code,
pre {
  background-color: #333333 !important;
  color: #f8f8f2 !important;
  border-radius: 4px;
  padding: 0.2em 0.4em;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.95em;
}

/* Inline code: same as above */
code {
  padding: 0.2em 0.4em;
  border-radius: 3px;
  background-color: #444444;
}

/* Buttons: dark, high-contrast, hover effect */
.md-button {
  background-color: #444444 !important;
  color: #ffffff !important;
  border: 1px solid #666666 !important;
  border-radius: 4px;
  font-size: 0.9rem;
  padding: 0.4rem 0.8rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.md-button:hover {
  background-color: #555555 !important;
  color: #ffffff !important;
  border-color: #777777;
}

/* Search bar: clean, readable */
.md-search__input {
  background-color: #333333 !important;
  color: #e0e0e0 !important;
  border: 1px solid #555555 !important;
  border-radius: 4px;
}

.md-search__input:focus {
  border-color: #66ccff !important;
  box-shadow: 0 0 0 2px rgba(102, 204, 255, 0.3);
}

/* Asciinema player: clean wrapper */
.asciinema-player-wrapper {
  position: initial;
  text-align: initial;
  outline: initial;
}

/* Hide/show utility (for collapsible content) */
.hide {
  display: none;
  max-height: 0;
  transition: max-height 0.8s ease-out;
}

.show {
  display: block;
  max-height: 1000px;
  transition: max-height 0.8s ease-out;
}

/* Rack cluster SVG: hover effect */
#racksvg > rect:hover {
  stroke: #39A9DC !important;
  fill: transparent !important;
  stroke-width: 3 !important;
}

/* Optional: Improve readability of content */
.md-content {
  font-weight: 400 !important;
  font-size: 1em;
  line-height: 1.6;
}

/* Optional: Reduce spacing between list items */
ul, ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

li {
  margin-bottom: 0.3em;
}

/* === Optional: Add subtle bottom border on hover (modern alternative to underline) === */
.md-nav__link:hover,
.md-sidebar__nav a:hover,
.md-button:hover,
.md-header__button a:hover {
  border-bottom: 2px solid #66ccff !important;
  background-color: #333333 !important;
}

/* === Optional: Add focus ring for accessibility === */
a:focus,
.md-button:focus,
.md-search__input:focus {
  outline: 2px solid #66ccff !important;
  outline-offset: 2px;
}
.md-nav__title {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.md-nav__title .md-logo {
  margin-right: 0.5rem;
}

/* Target the text node inside md-nav__title that is NOT the logo */
.md-nav__title > *:not(.md-logo) {
  display: none;
}