/* Import Source Code Pro from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

/* ============================================
   Light Mode (Default)
   ============================================ */
:root {
  --md-code-bg-color: #2E3440;
  --md-code-fg-color: #FFFFFF;
  --md-text-font-family: "Roboto";
  --md-code-font: "Source Code Pro", monospace;
  --hc-heading-color: #1a1a1a;
  --hc-inline-code-bg: #ECEFF4;
  --hc-inline-code-color: #1a1a1a;
  --hc-code-shadow: #D8DEE9;
  --hc-nav-active-bg: #ECEFF4;
  --hc-link-color: #ed4e80;
  --hc-link-hover-color: #2e78d8;
}

/* ============================================
   Dark Mode (Slate)
   ============================================ */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #1a1a1a;
  --md-default-fg-color: #ffffff;
  --md-default-fg-color--light: #d1d5db;
  --md-default-fg-color--lighter: #9ca3af;
  --md-default-fg-color--lightest: #4b5563;
  --hc-heading-color: #ffffff;
  --hc-inline-code-bg: #374151;
  --hc-inline-code-color: #e5e7eb;
  --hc-code-shadow: transparent;
  --hc-nav-active-bg: #374151;
  --hc-link-color: #f472b6;
  --hc-link-hover-color: #60a5fa;
}

/* ============================================
   General Styles
   ============================================ */
.index-pre-code {
  max-width: 700px;
  left: 50%;
}

.index-pre-code pre>code {
  text-align: left;
}

.md-typeset pre>code {
  border-radius: .2rem;
  box-shadow: 10px 5px 5px #D8DEE9;
  background-color: #2E3440;
  color: #FFFFFF;
}

[data-md-color-scheme="slate"] .md-typeset pre>code {
  box-shadow: none;
}

.md-typeset p > code,
.md-typeset strong > code,
.md-typeset td > code,
.md-typeset li > code {
  background: var(--hc-inline-code-bg);
  color: var(--hc-inline-code-color);
  font-weight: 500;
}

.md-content p > code {
  background: var(--hc-inline-code-bg);
  color: var(--hc-inline-code-color);
  font-weight: 500;
}

.md-typeset code {
  font-weight: 500;
}

.md-typeset pre {
  margin-left: .5rem;
  margin-right: .5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

h1.title {
  color: #FFFFFF;
  margin: 0px 0px 5px;
}

h2.subtitle {
  margin: 5px 0px 25px;
}

.md-typeset {
  line-height: 24px;
  font-weight: 400;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: bold;
  color: var(--hc-heading-color);
}

.md-nav__link--active {
  background-color: var(--hc-nav-active-bg);
}

code {
  white-space: pre-wrap !important;
}

.md-content a {
  color: var(--hc-link-color);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.md-content a:hover {
  color: var(--hc-link-hover-color);
}

/* ============================================
   Dark Mode Specific Overrides
   ============================================ */

/* Ensure dark background applies to all main areas */
[data-md-color-scheme="slate"],
[data-md-color-scheme="slate"] body,
[data-md-color-scheme="slate"] .md-main,
[data-md-color-scheme="slate"] .md-main__inner,
[data-md-color-scheme="slate"] .md-content,
[data-md-color-scheme="slate"] .md-content__inner,
[data-md-color-scheme="slate"] .md-sidebar,
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap,
[data-md-color-scheme="slate"] .md-container {
  background-color: #1a1a1a;
}

/* Footer dark mode */
[data-md-color-scheme="slate"] .md-footer {
  background-color: #111827;
}

[data-md-color-scheme="slate"] .md-footer-meta {
  background-color: #111827;
}

[data-md-color-scheme="slate"] .md-typeset {
  color: var(--md-default-fg-color--light);
}

[data-md-color-scheme="slate"] .md-typeset p,
[data-md-color-scheme="slate"] .md-typeset li,
[data-md-color-scheme="slate"] .md-typeset td {
  color: #d1d5db;
}

/* Dark mode navigation */
[data-md-color-scheme="slate"] .md-nav__link {
  color: #d1d5db;
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #ffffff;
}

/* ============================================
   Top Navigation Bar (Tabs) - Kedro-inspired
   ============================================ */

/* Header styling */
.md-header {
  padding-left: 24px;
  border-radius: 0px 0px 12px 12px;
}

.md-header--shadow {
  box-shadow: none;
}

/* Tab link styling - larger like Kedro */
.md-tabs__link {
  font-size: 16px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.md-tabs__link:hover {
  opacity: 1;
}

/* Active tab - underline effect like Kedro */
.md-tabs__item--active {
  font-weight: 600;
}

.md-tabs__item--active .md-tabs__link {
  opacity: 1;
}

/* Underline on active tab */
.md-tabs__item {
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.md-tabs__item:hover {
  border-bottom-color: currentColor;
}

.md-tabs__item--active {
  border-bottom: 2px solid currentColor;
}

/* ============================================
   Light Mode Color Accents
   ============================================ */

/* Accent color for headings */
.md-typeset h1 {
  color: #1a1a1a;
  border-bottom: 3px solid #e59875;
  padding-bottom: 0.4rem;
  display: inline-block;
}

/* H2 section styling - left accent border for visual anchoring */
.md-typeset h2 {
  border-left: 3px solid #e59875;
  padding-left: 0.75rem;
  margin-top: 2.5rem;
}

/* Colored left border for admonitions */
.md-typeset .admonition {
  border-left: 4px solid #79a8a9;
}

.md-typeset .admonition.note {
  border-left-color: #79a8a9;
}

.md-typeset .admonition.tip {
  border-left-color: #e59875;
}

.md-typeset .admonition.warning {
  border-left-color: #f59e0b;
}

/* Accent color for blockquotes */
.md-typeset blockquote {
  border-left: 4px solid #e59875;
  background-color: #fef7f4;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}

/* Table header accent */
.md-typeset table:not([class]) th {
  background-color: #f8f4f2;
  border-bottom: 2px solid #e59875;
}

/* Sidebar accent - active item */
.md-nav__link--active {
  color: #e59875 !important;
  font-weight: 600;
}

.md-nav__item--active > .md-nav__link {
  color: #e59875;
}

/* Search bar styling */
.md-search__input {
  border-radius: 8px;
}

.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Button/CTA accent colors */
.md-typeset .md-button {
  background-color: #e59875;
  border-color: #e59875;
  color: #ffffff;
}

.md-typeset .md-button:hover {
  background-color: #d4845f;
  border-color: #d4845f;
}

.md-typeset .md-button--primary {
  background-color: #e59875;
  border-color: #e59875;
}

/* Code block header accent */
.md-typeset .highlight > .filename {
  background-color: #f8f4f2;
  border-bottom: 2px solid #e59875;
}

/* ============================================
   Dark Mode Color Accent Overrides
   ============================================ */
[data-md-color-scheme="slate"] .md-typeset h1 {
  color: #ffffff;
  border-bottom-color: #e59875;
}

[data-md-color-scheme="slate"] .md-typeset h2 {
  border-left-color: #e59875;
}

[data-md-color-scheme="slate"] .md-typeset blockquote {
  background-color: #1f2937;
  border-left-color: #e59875;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: #1f2937;
  border-bottom-color: #e59875;
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #e59875 !important;
}

[data-md-color-scheme="slate"] .md-typeset .highlight > .filename {
  background-color: #1f2937;
  border-bottom-color: #e59875;
}