/*
 * Enhanced Blog-Style Theme with Catppuccin Colors
 * Light theme: Catppuccin Latte
 * Dark theme: Catppuccin Mocha
 */

/* ============================================
   Color Palette Definition
   ============================================ */

:root {
  /* Catppuccin Latte (Light theme) */
  --ctp-latte-rosewater: #dc8a78;
  --ctp-latte-flamingo: #dd7878;
  --ctp-latte-pink: #ea76cb;
  --ctp-latte-mauve: #8839ef;
  --ctp-latte-red: #d20f39;
  --ctp-latte-maroon: #e64553;
  --ctp-latte-peach: #fe640b;
  --ctp-latte-yellow: #df8e1d;
  --ctp-latte-green: #40a02b;
  --ctp-latte-teal: #179299;
  --ctp-latte-sky: #04a5e5;
  --ctp-latte-sapphire: #209fb5;
  --ctp-latte-blue: #1e66f5;
  --ctp-latte-lavender: #7287fd;
  --ctp-latte-text: #4c4f69;
  --ctp-latte-subtext1: #5c5f77;
  --ctp-latte-subtext0: #6c6f85;
  --ctp-latte-overlay2: #7c7f93;
  --ctp-latte-overlay1: #8c8fa1;
  --ctp-latte-overlay0: #9ca0b0;
  --ctp-latte-surface2: #acb0be;
  --ctp-latte-surface1: #bcc0cc;
  --ctp-latte-surface0: #ccd0da;
  --ctp-latte-base: #eff1f5;
  --ctp-latte-mantle: #e6e9ef;
  --ctp-latte-crust: #dce0e8;
}

[data-md-color-scheme="default"] {
  /* Material overrides with Catppuccin Latte */
  --md-primary-fg-color: var(--ctp-latte-blue);
  --md-primary-fg-color--light: var(--ctp-latte-lavender);
  --md-primary-fg-color--dark: var(--ctp-latte-sapphire);
  --md-primary-bg-color: var(--ctp-latte-base);
  --md-accent-fg-color: var(--ctp-latte-mauve);
  --md-accent-fg-color--transparent: rgba(136, 57, 239, 0.1);
  --md-accent-bg-color: var(--ctp-latte-base);

  /* Text colors */
  --md-typeset-color: var(--ctp-latte-text);
  --md-default-fg-color: var(--ctp-latte-text);
  --md-default-fg-color--light: var(--ctp-latte-subtext1);
  --md-default-fg-color--lighter: var(--ctp-latte-subtext0);
  --md-default-fg-color--lightest: var(--ctp-latte-overlay2);
  --md-default-bg-color: var(--ctp-latte-base);

  /* Code colors */
  --md-code-fg-color: var(--ctp-latte-text);
  --md-code-bg-color: var(--ctp-latte-mantle);
  --md-code-hl-color: var(--ctp-latte-yellow);

  /* Links */
  --md-typeset-a-color: var(--ctp-latte-blue);
}

[data-md-color-scheme="slate"] {
  /* Catppuccin Mocha (Dark theme) */
  --ctp-mocha-rosewater: #f5e0dc;
  --ctp-mocha-flamingo: #f2cdcd;
  --ctp-mocha-pink: #f5c2e7;
  --ctp-mocha-mauve: #cba6f7;
  --ctp-mocha-red: #f38ba8;
  --ctp-mocha-maroon: #eba0ac;
  --ctp-mocha-peach: #fab387;
  --ctp-mocha-yellow: #f9e2af;
  --ctp-mocha-green: #a6e3a1;
  --ctp-mocha-teal: #94e2d5;
  --ctp-mocha-sky: #89dceb;
  --ctp-mocha-sapphire: #74c7ec;
  --ctp-mocha-blue: #89b4fa;
  --ctp-mocha-lavender: #b4befe;
  --ctp-mocha-text: #cdd6f4;
  --ctp-mocha-subtext1: #bac2de;
  --ctp-mocha-subtext0: #a6adc8;
  --ctp-mocha-overlay2: #9399b2;
  --ctp-mocha-overlay1: #7f849c;
  --ctp-mocha-overlay0: #6c7086;
  --ctp-mocha-surface2: #585b70;
  --ctp-mocha-surface1: #45475a;
  --ctp-mocha-surface0: #313244;
  --ctp-mocha-base: #1e1e2e;
  --ctp-mocha-mantle: #181825;
  --ctp-mocha-crust: #11111b;

  /* Material overrides with Catppuccin Mocha */
  --md-primary-fg-color: var(--ctp-mocha-blue);
  --md-primary-fg-color--light: var(--ctp-mocha-lavender);
  --md-primary-fg-color--dark: var(--ctp-mocha-sapphire);
  --md-primary-bg-color: var(--ctp-mocha-base);
  --md-accent-fg-color: var(--ctp-mocha-mauve);
  --md-accent-fg-color--transparent: rgba(203, 166, 247, 0.1);
  --md-accent-bg-color: var(--ctp-mocha-base);

  /* Text colors */
  --md-typeset-color: var(--ctp-mocha-text);
  --md-default-fg-color: var(--ctp-mocha-text);
  --md-default-fg-color--light: var(--ctp-mocha-subtext1);
  --md-default-fg-color--lighter: var(--ctp-mocha-subtext0);
  --md-default-fg-color--lightest: var(--ctp-mocha-overlay2);
  --md-default-bg-color: var(--ctp-mocha-base);

  /* Code colors */
  --md-code-fg-color: var(--ctp-mocha-text);
  --md-code-bg-color: var(--ctp-mocha-mantle);
  --md-code-hl-color: var(--ctp-mocha-yellow);

  /* Links */
  --md-typeset-a-color: var(--ctp-mocha-blue);
}

/* ============================================
   Blog-Style Layout
   ============================================ */

/* ============================================
   Typography Enhancements
   ============================================ */

/* Enhanced headings with elegant separators */
h2 {
  border-left: 3px solid var(--md-primary-fg-color);
  padding-left: 0.8em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  padding-top: 0.8rem;
  margin-top: 2rem;
  margin-left: -1rem;
  font-weight: 600;
}

h3,
h4,
h5,
h6 {
  border-top: 1px solid var(--md-default-fg-color--lightest);
  padding-top: 0.6rem;
  margin-top: 1.5rem;
  font-weight: 500;
}

/* Refined paragraph spacing */
.md-typeset p {
  line-height: 1.8;
  margin-bottom: 1.2em;
}

/* Enhanced blockquotes */
.md-typeset blockquote {
  border-left: 4px solid var(--md-accent-fg-color);
  padding-left: 1.2em;
  font-style: italic;
  background-color: var(--md-accent-fg-color--transparent);
  border-radius: 0 4px 4px 0;
}

/* ============================================
   Navigation Styling
   ============================================ */

.md-nav__item--section {
  border-top: 1px solid var(--md-default-fg-color--lightest);
  padding-top: 0.6rem;
  margin-top: 0.4rem;
}

/* Enhanced active link styling */
.md-nav__link--active {
  font-weight: 600;
  color: var(--md-accent-fg-color);
}

/* Sidebar header (logo/repo area) styling */
[data-md-color-scheme="default"] .md-sidebar--primary .md-sidebar__scrollwrap {
  background-color: var(--ctp-latte-base);
}

[data-md-color-scheme="slate"] .md-sidebar--primary .md-sidebar__scrollwrap {
  background-color: var(--ctp-mocha-base);
}

/* Header/banner area with repo link */
[data-md-color-scheme="default"] .md-header__source {
  background-color: var(--ctp-latte-surface0);
  color: var(--ctp-latte-text);
}

[data-md-color-scheme="slate"] .md-header__source {
  background-color: var(--ctp-mocha-surface0);
  color: var(--ctp-mocha-text);
}

/* Navigation title area */
[data-md-color-scheme="default"] .md-nav__title {
  background-color: var(--ctp-latte-mantle);
  color: var(--ctp-latte-text);
  border-bottom: 1px solid var(--ctp-latte-surface1);
}

[data-md-color-scheme="slate"] .md-nav__title {
  background-color: var(--ctp-mocha-mantle);
  color: var(--ctp-mocha-text);
  border-bottom: 1px solid var(--ctp-mocha-surface1);
}

/* Primary sidebar background */
[data-md-color-scheme="default"] .md-sidebar--primary {
  background-color: var(--ctp-latte-base);
}

[data-md-color-scheme="slate"] .md-sidebar--primary {
  background-color: var(--ctp-mocha-base);
}

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

.md-typeset code {
  border-radius: 4px;
  padding: 0.15em 0.4em;
  font-size: 0.9em;
  background-color: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset pre {
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ============================================
   Admonition Styling (from nspec)
   ============================================ */

.md-typeset [type="checkbox"]:checked + .task-list-indicator:before {
  background-color: var(--md-accent-fg-color);
}

/* Code admonition */
:root {
  --md-admonition-icon--code: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 3a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2H3v2h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h2v-2H8v-5a2 2 0 0 0-2-2 2 2 0 0 0 2-2V5h2V3m6 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5h-2V3z"/></svg>');
}

.md-typeset .admonition.code,
.md-typeset details.code {
  border-color: var(--md-accent-fg-color);
}

.md-typeset .code > .admonition-title,
.md-typeset .code > summary {
  background-color: var(--md-accent-fg-color--transparent);
}

.md-typeset .code > .admonition-title::before,
.md-typeset .code > summary::before {
  background-color: var(--md-accent-fg-color);
  -webkit-mask-image: var(--md-admonition-icon--code);
  mask-image: var(--md-admonition-icon--code);
}

/* Definition admonition */
:root {
  --md-admonition-icon--definition: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 2.75C3 1.784 3.784 1 4.75 1h6.5c.966 0 1.75.784 1.75 1.75v11.5a.75.75 0 0 1-1.227.579L8 11.722l-3.773 3.107A.751.751 0 0 1 3 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.91l3.023-2.489a.75.75 0 0 1 .954 0l3.023 2.49V2.75a.25.25 0 0 0-.25-.25Z"/></svg>');
}

.md-typeset .admonition.definition,
.md-typeset details.definition {
  border-color: var(--md-primary-fg-color);
}

.md-typeset .definition > .admonition-title,
.md-typeset .definition > summary {
  background-color: rgba(var(--md-primary-fg-color--light), 0.1);
}

.md-typeset .definition > .admonition-title::before,
.md-typeset .definition > summary::before {
  background-color: var(--md-primary-fg-color);
  -webkit-mask-image: var(--md-admonition-icon--definition);
  mask-image: var(--md-admonition-icon--definition);
}

/* ============================================
   Header and Footer Refinements
   ============================================ */

.md-header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Professional navigation bar styling */
[data-md-color-scheme="default"] .md-header {
  background-color: #ffffff;
  color: var(--ctp-latte-text);
  border-bottom: 1px solid var(--ctp-latte-surface0);
}

[data-md-color-scheme="slate"] .md-header {
  background-color: var(--ctp-mocha-crust);
  color: var(--ctp-mocha-text);
  border-bottom: 1px solid var(--ctp-mocha-surface0);
}

/* Clean search area styling */
[data-md-color-scheme="default"] .md-search {
  background-color: transparent;
}

[data-md-color-scheme="slate"] .md-search {
  background-color: transparent;
}

/* Tab bar with better contrast and readability */
[data-md-color-scheme="default"] .md-tabs {
  background-color: #f8f9fa;
  border-top: 1px solid var(--ctp-latte-surface0);
}

[data-md-color-scheme="slate"] .md-tabs {
  background-color: var(--ctp-mocha-mantle);
  border-top: 1px solid var(--ctp-mocha-surface0);
}

/* Tab links styling for better readability */
[data-md-color-scheme="default"] .md-tabs__link {
  color: var(--ctp-latte-subtext0);
  opacity: 1;
}

[data-md-color-scheme="default"] .md-tabs__link:hover {
  color: var(--ctp-latte-text);
}

[data-md-color-scheme="default"] .md-tabs__link--active {
  color: var(--ctp-latte-blue);
  font-weight: 500;
}

[data-md-color-scheme="slate"] .md-tabs__link {
  color: var(--ctp-mocha-subtext0);
  opacity: 1;
}

[data-md-color-scheme="slate"] .md-tabs__link:hover {
  color: var(--ctp-mocha-text);
}

[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: var(--ctp-mocha-blue);
  font-weight: 500;
}

.md-footer {
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

/* ============================================
   Search Enhancements
   ============================================ */

.md-search__input {
  border-radius: 8px;
  /* background-color: var(--md-code-bg-color); */
}

.md-search__input::placeholder {
  color: var(--md-default-fg-color--lighter);
}

/* ============================================
   Table of Contents
   ============================================ */

.md-nav--secondary .md-nav__link--active {
  border-left: 3px solid var(--md-accent-fg-color);
  padding-left: 0.8rem;
  margin-left: -0.6rem;
}

/* ============================================
   Tag Styling
   ============================================ */

/* Light theme tags (Catppuccin Latte) */
[data-md-color-scheme="default"] .md-tag {
  background-color: var(--ctp-latte-surface0);
  color: var(--ctp-latte-text);
  border: 1px solid var(--ctp-latte-surface2);
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3em 0.75em;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-md-color-scheme="default"] .md-tag:hover {
  background-color: var(--ctp-latte-surface1);
  border-color: var(--ctp-latte-blue);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Dark theme tags (Catppuccin Mocha) */
[data-md-color-scheme="slate"] .md-tag {
  background-color: var(--ctp-mocha-surface0);
  color: var(--ctp-mocha-text);
  border: 1px solid var(--ctp-mocha-surface2);
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.3em 0.75em;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme="slate"] .md-tag:hover {
  background-color: var(--ctp-mocha-surface1);
  border-color: var(--ctp-mocha-blue);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}