/* Dataface color palette - Red, Black, White */
:root {
  /* Primary red color */
  --md-primary-fg-color:        #DC2626;
  --md-primary-fg-color--light: #EF4444;
  --md-primary-fg-color--dark:  #B91C1C;

  /* Accent color - vibrant red */
  --md-accent-fg-color:         #DC2626;
  --md-accent-fg-color--transparent: rgba(220, 38, 38, 0.1);
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #DC2626;
  --md-primary-fg-color--light: #EF4444;
  --md-primary-fg-color--dark:  #B91C1C;
  --md-accent-fg-color:         #DC2626;
}

/* Hide Print Version from navigation */
.md-nav__item:has(a[href*="print"]) {
    display: none !important;
}

/* Alternative selector for Material theme */
.md-nav__link[href*="print"] {
    display: none !important;
}

/* Hide from tabs navigation */
.md-tabs__item:has(a[href*="print"]) {
    display: none !important;
}

/* Reduce sidebar and TOC padding to give content more room */
.md-sidebar {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.md-sidebar--secondary {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}

/* Increase content max-width for more space */
.md-content {
    --md-content-max-width: 75rem; /* Increased from default ~60rem */
}

.md-content__inner {
    max-width: 100%;
}

/* Ensure active navigation items are clearly highlighted */
.md-nav__link--active {
    color: var(--md-primary-fg-color);
    font-weight: 600;
}

.md-nav__item--active > .md-nav__link {
    color: var(--md-primary-fg-color);
    font-weight: 600;
}

/* Ensure parent sections of active items are visible and expanded */
.md-nav__item--active .md-nav {
    display: block;
}

/* Make sure top-level sections are always visible */
.md-nav--primary .md-nav__item {
    display: block;
}

/* ============================================
   Code Block Styling - Match render_example
   ============================================ */

/* Material theme highlight blocks - add grey background */
.md-content .highlight {
    background-color: #f8f8f8 !important;
    border-radius: 4px;
    overflow-x: auto;
    max-width: 100%;
    margin: 1em 0;
}

/* Pre elements inside highlight should inherit */
.md-content .highlight pre {
    background-color: transparent !important;
    margin: 0 !important;
    padding: 1em !important;
    overflow-x: auto;
}

/* Code inside pre */
.md-content .highlight pre code {
    background-color: transparent !important;
    white-space: pre;
    word-wrap: normal;
    display: block;
}

/* Standalone pre elements (not in highlight) */
.md-content pre:not(.highlight pre) {
    background-color: #f8f8f8 !important;
    border-radius: 4px;
    padding: 1em;
    overflow-x: auto;
    max-width: 100%;
}

/* Ensure code blocks don't overflow container */
.md-content__inner > .highlight,
.md-content__inner > pre {
    max-width: 100%;
    box-sizing: border-box;
}

/* Inline code styling */
.md-content code:not(pre code):not(.highlight code) {
    background-color: #f0f0f0;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}

/* ============================================
   Light Mode Syntax Highlighting
   Override dark Pygments colors for light background
   ============================================ */

/* Override Material theme CSS variables for code highlighting */
:root {
    --md-code-hl-keyword-color: #DC2626;  /* Dataface red for tags/keywords */
    --md-code-hl-name-color: #333;
    --md-code-hl-string-color: #059669;   /* Green for strings */
    --md-code-hl-number-color: #D97706;   /* Orange for numbers */
    --md-code-hl-comment-color: #6B7280;  /* Gray for comments */
    --md-code-hl-constant-color: #7C3AED; /* Purple for constants */
    --md-code-hl-punctuation-color: #4B5563;
}

/* YAML Keys (Name.Tag) - Dataface Red - with maximum specificity */
.md-content .highlight .nt,
.md-content .yaml .nt,
.highlight .nt,
.yaml .nt {
    color: #DC2626 !important;
}

/* Strings - Green */
.md-content .highlight .s,
.md-content .highlight .s1,
.md-content .highlight .s2,
.md-content .yaml .s,
.md-content .yaml .s1,
.md-content .yaml .s2 {
    color: #059669 !important;
}

/* Numbers - Orange */
.md-content .highlight .m,
.md-content .highlight .mi,
.md-content .highlight .mf,
.md-content .yaml .m,
.md-content .yaml .mi,
.md-content .yaml .mf {
    color: #D97706 !important;
}

/* Keywords/Constants (true, false, null) - Purple */
.md-content .highlight .k,
.md-content .highlight .kc,
.md-content .yaml .k,
.md-content .yaml .kc {
    color: #7C3AED !important;
}

/* Comments - Gray italic */
.md-content .highlight .c,
.md-content .highlight .c1,
.md-content .highlight .cm,
.md-content .yaml .c,
.md-content .yaml .c1,
.md-content .yaml .cm {
    color: #6B7280 !important;
    font-style: italic;
}

/* Punctuation (colons, brackets, pipes) - Dark gray */
.md-content .highlight .p,
.md-content .yaml .p {
    color: #4B5563 !important;
}

/* Jinja expressions - Teal */
.md-content .highlight .si,
.md-content .yaml .si {
    color: #0891B2 !important;
}

/* Default text - Dark */
.md-content .highlight,
.md-content .yaml {
    color: #333 !important;
}

/* Dark mode code blocks */
[data-md-color-scheme="slate"] .md-content .highlight {
    background-color: #1e1e1e !important;
}

[data-md-color-scheme="slate"] .md-content pre:not(.highlight pre) {
    background-color: #1e1e1e !important;
}

[data-md-color-scheme="slate"] .md-content code:not(pre code):not(.highlight code) {
    background-color: #2d2d2d;
}

/* Dark mode - restore original pygments colors */
[data-md-color-scheme="slate"] .md-content .highlight .nt,
[data-md-color-scheme="slate"] .md-content .yaml .nt {
    color: #FF5370 !important;
}

[data-md-color-scheme="slate"] .md-content .highlight .s,
[data-md-color-scheme="slate"] .md-content .highlight .s1,
[data-md-color-scheme="slate"] .md-content .highlight .s2,
[data-md-color-scheme="slate"] .md-content .yaml .s,
[data-md-color-scheme="slate"] .md-content .yaml .s1,
[data-md-color-scheme="slate"] .md-content .yaml .s2 {
    color: #C3E88D !important;
}

[data-md-color-scheme="slate"] .md-content .highlight .k,
[data-md-color-scheme="slate"] .md-content .highlight .kc,
[data-md-color-scheme="slate"] .md-content .yaml .k,
[data-md-color-scheme="slate"] .md-content .yaml .kc {
    color: #89DDFF !important;
}

[data-md-color-scheme="slate"] .md-content .highlight .p,
[data-md-color-scheme="slate"] .md-content .yaml .p {
    color: #89DDFF !important;
}

[data-md-color-scheme="slate"] .md-content .highlight,
[data-md-color-scheme="slate"] .md-content .yaml {
    color: #EFF !important;
}