/* Extra CSS for Blog 2026 Theme Customization */

:root {
  /* Modern Indigo & Rose Vibrant Color Palette (Light Mode) */
  --md-primary-fg-color:        #4f46e5;
  --md-primary-fg-color--light:  #6366f1;
  --md-primary-fg-color--dark:   #3730a3;
  --md-accent-fg-color:         #e11d48;
  --md-accent-fg-color--transparent: rgba(225, 29, 72, 0.1);
  --md-typeset-a-color:         #4338ca;
}

[data-md-color-scheme="slate"] {
  /* Glowing Neon & Violet Dark Palette (Dark Mode) */
  --md-primary-fg-color:        #6366f1;
  --md-primary-fg-color--light:  #818cf8;
  --md-primary-fg-color--dark:   #4f46e5;
  --md-accent-fg-color:         #f43f5e;
  --md-accent-fg-color--transparent: rgba(244, 63, 94, 0.15);
  --md-typeset-a-color:         #a5b4fc;
}

/* Header Gradient */
.md-header {
  background: linear-gradient(135deg, #3730a3 0%, #4f46e5 50%, #7c3aed 100%) !important;
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.25);
}

[data-md-color-scheme="slate"] .md-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #311b92 100%) !important;
  box-shadow: 0 4px 25px rgba(99, 102, 241, 0.3);
}

/* Sidebar Title Splashes */
.md-nav__title {
  color: var(--md-primary-fg-color--light);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Article H1 & H2 Accent Underline */
.md-typeset h1 {
  background: linear-gradient(90deg, #4f46e5, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  margin-bottom: 0.8em;
}

.md-typeset h2 {
  position: relative;
  padding-bottom: 0.3em;
  font-weight: 700;
}

.md-typeset h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 3px;
  background: linear-gradient(90deg, #4f46e5, #e11d48);
  border-radius: 3px;
}

/* Styled Blockquotes & Admonitions */
.md-typeset blockquote {
  border-left: 4px solid #e11d48;
  background-color: var(--md-accent-fg-color--transparent);
  padding: 0.8em 1.2em;
  border-radius: 0 8px 8px 0;
}

/* Code Block Styling */
.md-typeset pre > code {
  border-radius: 8px;
  border: 1px solid rgba(99, 102, 241, 0.15);
}

/* Links Hover Effect */
.md-typeset a {
  transition: color 0.2s ease, border-bottom 0.2s ease;
  font-weight: 500;
}

.md-typeset a:hover {
  color: var(--md-accent-fg-color);
  text-decoration: underline;
}

/* Category & Date Badges */
.blog-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  margin-right: 8px;
}