/* MAID Documentation - Custom Styles
 * Enhances readability in both light and dark modes
 */

/* ==========================================================================
   CSS Variables - Color Palette
   ========================================================================== */

:root {
  /* Primary brand colors */
  --maid-primary: #4051b5;
  --maid-primary-light: #5c6bc0;
  --maid-primary-dark: #303f9f;

  /* Accent colors */
  --maid-accent: #ff4081;
  --maid-accent-light: #ff79b0;
  --maid-accent-dark: #c60055;

  /* Code block colors - Light mode */
  --maid-code-bg: #f5f5f5;
  --maid-code-border: #e0e0e0;
  --maid-code-text: #37474f;

  /* Feedback widget colors */
  --maid-feedback-positive: #4caf50;
  --maid-feedback-negative: #f44336;
}

/* Dark mode color overrides */
[data-md-color-scheme="slate"] {
  --maid-code-bg: #1e1e2e;
  --maid-code-border: #313244;
  --maid-code-text: #cdd6f4;

  /* Improved contrast for dark mode */
  --md-default-fg-color: rgba(255, 255, 255, 0.87);
  --md-default-fg-color--light: rgba(255, 255, 255, 0.6);
  --md-default-fg-color--lighter: rgba(255, 255, 255, 0.38);
}

/* ==========================================================================
   Typography Improvements
   ========================================================================== */

/* Better line height for readability */
.md-typeset {
  line-height: 1.7;
}

/* Headings */
.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.md-typeset h2 {
  font-weight: 600;
  margin-top: 2em;
}

.md-typeset h3 {
  font-weight: 600;
  margin-top: 1.5em;
}

/* Paragraph spacing */
.md-typeset p {
  margin-bottom: 1em;
}

/* ==========================================================================
   Code Block Enhancements
   ========================================================================== */

/* Code block container */
.md-typeset pre {
  background-color: var(--maid-code-bg);
  border: 1px solid var(--maid-code-border);
  border-radius: 8px;
  padding: 0;
  margin: 1.5em 0;
}

/* Code block content */
.md-typeset pre > code {
  background-color: transparent;
  color: var(--maid-code-text);
  padding: 1em 1.25em;
  font-size: 0.85em;
  line-height: 1.6;
}

/* Inline code */
.md-typeset code {
  background-color: var(--maid-code-bg);
  border: 1px solid var(--maid-code-border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-size: 0.875em;
}

/* Code in headers should not have background */
.md-typeset h1 code,
.md-typeset h2 code,
.md-typeset h3 code,
.md-typeset h4 code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* Code block with line numbers */
.md-typeset .highlight .linenos {
  background-color: rgba(0, 0, 0, 0.05);
  border-right: 1px solid var(--maid-code-border);
  padding-right: 0.75em;
  margin-right: 0.75em;
  user-select: none;
}

[data-md-color-scheme="slate"] .md-typeset .highlight .linenos {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Code copy button */
.md-typeset .highlight .md-clipboard {
  color: var(--md-default-fg-color--lighter);
}

.md-typeset .highlight .md-clipboard:hover {
  color: var(--md-accent-fg-color);
}

/* ==========================================================================
   Syntax Highlighting - Enhanced for Both Modes
   ========================================================================== */

/* Python keywords */
.highlight .k,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt {
  color: #7c3aed;
}

[data-md-color-scheme="slate"] .highlight .k,
[data-md-color-scheme="slate"] .highlight .kd,
[data-md-color-scheme="slate"] .highlight .kn,
[data-md-color-scheme="slate"] .highlight .kp,
[data-md-color-scheme="slate"] .highlight .kr,
[data-md-color-scheme="slate"] .highlight .kt {
  color: #cba6f7;
}

/* Strings */
.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .sr,
.highlight .ss {
  color: #059669;
}

[data-md-color-scheme="slate"] .highlight .s,
[data-md-color-scheme="slate"] .highlight .s1,
[data-md-color-scheme="slate"] .highlight .s2,
[data-md-color-scheme="slate"] .highlight .sb,
[data-md-color-scheme="slate"] .highlight .sc,
[data-md-color-scheme="slate"] .highlight .sd,
[data-md-color-scheme="slate"] .highlight .se,
[data-md-color-scheme="slate"] .highlight .sh,
[data-md-color-scheme="slate"] .highlight .si,
[data-md-color-scheme="slate"] .highlight .sx,
[data-md-color-scheme="slate"] .highlight .sr,
[data-md-color-scheme="slate"] .highlight .ss {
  color: #a6e3a1;
}

/* Numbers */
.highlight .m,
.highlight .mb,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo {
  color: #d97706;
}

[data-md-color-scheme="slate"] .highlight .m,
[data-md-color-scheme="slate"] .highlight .mb,
[data-md-color-scheme="slate"] .highlight .mf,
[data-md-color-scheme="slate"] .highlight .mh,
[data-md-color-scheme="slate"] .highlight .mi,
[data-md-color-scheme="slate"] .highlight .mo {
  color: #fab387;
}

/* Comments */
.highlight .c,
.highlight .c1,
.highlight .ch,
.highlight .cm,
.highlight .cp,
.highlight .cpf,
.highlight .cs {
  color: #6b7280;
  font-style: italic;
}

[data-md-color-scheme="slate"] .highlight .c,
[data-md-color-scheme="slate"] .highlight .c1,
[data-md-color-scheme="slate"] .highlight .ch,
[data-md-color-scheme="slate"] .highlight .cm,
[data-md-color-scheme="slate"] .highlight .cp,
[data-md-color-scheme="slate"] .highlight .cpf,
[data-md-color-scheme="slate"] .highlight .cs {
  color: #6c7086;
}

/* Functions and classes */
.highlight .nf,
.highlight .fm {
  color: #2563eb;
}

[data-md-color-scheme="slate"] .highlight .nf,
[data-md-color-scheme="slate"] .highlight .fm {
  color: #89b4fa;
}

.highlight .nc {
  color: #0891b2;
}

[data-md-color-scheme="slate"] .highlight .nc {
  color: #89dceb;
}

/* Decorators */
.highlight .nd {
  color: #be185d;
}

[data-md-color-scheme="slate"] .highlight .nd {
  color: #f5c2e7;
}

/* Operators */
.highlight .o,
.highlight .ow {
  color: #dc2626;
}

[data-md-color-scheme="slate"] .highlight .o,
[data-md-color-scheme="slate"] .highlight .ow {
  color: #f38ba8;
}

/* ==========================================================================
   Admonitions - Enhanced Styling
   ========================================================================== */

.md-typeset .admonition {
  border-radius: 8px;
  border-left-width: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

[data-md-color-scheme="slate"] .md-typeset .admonition {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.md-typeset .admonition-title {
  font-weight: 600;
}

/* Custom tip admonition */
.md-typeset .admonition.tip {
  border-color: #10b981;
}

/* Custom warning admonition */
.md-typeset .admonition.warning {
  border-color: #f59e0b;
}

/* Custom danger admonition */
.md-typeset .admonition.danger {
  border-color: #ef4444;
}

/* ==========================================================================
   Navigation Enhancements
   ========================================================================== */

/* Active navigation item highlight */
.md-nav__item--active > .md-nav__link {
  font-weight: 600;
}

/* Navigation section headers */
.md-nav__item--section > .md-nav__link {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

/* Back to top button */
.md-top {
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Tables - Improved Readability
   ========================================================================== */

.md-typeset table:not([class]) {
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.md-typeset table:not([class]) th {
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  font-weight: 600;
  text-align: left;
}

.md-typeset table:not([class]) td {
  border-bottom: 1px solid var(--md-typeset-table-color);
}

.md-typeset table:not([class]) tr:last-child td {
  border-bottom: none;
}

.md-typeset table:not([class]) tr:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

/* ==========================================================================
   Search Results
   ========================================================================== */

.md-search__output {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.md-search-result__link:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

[data-md-color-scheme="slate"] .md-search-result__link:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Search highlight */
.md-search-result__meta mark {
  background-color: rgba(255, 235, 59, 0.5);
  color: inherit;
}

[data-md-color-scheme="slate"] .md-search-result__meta mark {
  background-color: rgba(255, 235, 59, 0.3);
}

/* ==========================================================================
   Feedback Widget Styling
   ========================================================================== */

.md-feedback {
  margin-top: 2em;
  padding-top: 1.5em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-feedback__title {
  font-weight: 600;
  margin-bottom: 0.5em;
}

.md-feedback__inner {
  display: flex;
  gap: 0.5em;
}

.md-feedback__icon {
  cursor: pointer;
  padding: 0.5em;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.md-feedback__icon:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-md-color-scheme="slate"] .md-feedback__icon:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.md-feedback__icon[data-md-value="1"]:hover {
  color: var(--maid-feedback-positive);
}

.md-feedback__icon[data-md-value="0"]:hover {
  color: var(--maid-feedback-negative);
}

/* ==========================================================================
   Footer Enhancements
   ========================================================================== */

.md-footer {
  margin-top: 3em;
}

.md-footer__inner {
  padding: 1.5em 0;
}

.md-footer-nav__link {
  transition: opacity 0.2s ease;
}

.md-footer-nav__link:hover {
  opacity: 0.8;
}

/* Social links in footer */
.md-footer__link {
  margin: 0 0.25em;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  /* Hide navigation and other interactive elements */
  .md-sidebar,
  .md-header,
  .md-footer,
  .md-top,
  .md-search,
  .md-feedback {
    display: none !important;
  }

  /* Better code block printing */
  .md-typeset pre {
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }

  /* Ensure links are visible */
  .md-typeset a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* Don't show link for internal anchors */
  .md-typeset a[href^="#"]::after {
    content: none;
  }
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

/* Focus states */
.md-typeset a:focus,
.md-nav__link:focus,
.md-search__input:focus {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

/* Skip to content link */
.md-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.md-skip:focus {
  position: fixed;
  top: 0.5em;
  left: 0.5em;
  width: auto;
  height: auto;
  padding: 0.5em 1em;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  z-index: 100;
  border-radius: 4px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Custom Components
   ========================================================================== */

/* Version badge */
.version-badge {
  display: inline-block;
  padding: 0.2em 0.6em;
  font-size: 0.75em;
  font-weight: 600;
  border-radius: 4px;
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  vertical-align: middle;
  margin-left: 0.5em;
}

/* API stability badges */
.stability-badge {
  display: inline-block;
  padding: 0.15em 0.5em;
  font-size: 0.7em;
  font-weight: 600;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stability-badge.stable {
  background-color: #10b981;
  color: white;
}

.stability-badge.beta {
  background-color: #f59e0b;
  color: white;
}

.stability-badge.experimental {
  background-color: #ef4444;
  color: white;
}

/* Feature card grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5em;
  margin: 2em 0;
}

.feature-card {
  padding: 1.5em;
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  transition: box-shadow 0.2s ease;
}

.feature-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-md-color-scheme="slate"] .feature-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.feature-card__icon {
  font-size: 2em;
  margin-bottom: 0.5em;
}

.feature-card__title {
  font-weight: 600;
  margin-bottom: 0.5em;
}

.feature-card__description {
  font-size: 0.9em;
  color: var(--md-default-fg-color--light);
}