/**
 * Custom CSS for VD Computer Tuition Learning Platform
 * Matches Hugo theme colors for brand consistency
 *
 * Primary Color: #ffbc3b (Yellow/Orange - used for accents, highlights, CTAs)
 * Secondary Color: #1a1a37 (Dark Blue - used for headers, primary elements)
 */

/* Define CSS variables for easy color management */
:root {
  --vd-primary: #ffbc3b;
  --vd-secondary: #1a1a37;
  --vd-primary-dark: #e6a635;
  --vd-secondary-light: #2a2a47;
}

/* Custom color scheme for Material theme - Light mode */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--vd-secondary);
  --md-primary-fg-color--light: var(--vd-secondary-light);
  --md-primary-fg-color--dark: #0a0a17;
  --md-accent-fg-color: var(--vd-primary);
  --md-accent-fg-color--transparent: rgba(255, 188, 59, 0.1);
}

/* Custom color scheme for Material theme - Dark mode */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--vd-secondary-light);
  --md-primary-fg-color--light: #3a3a57;
  --md-primary-fg-color--dark: var(--vd-secondary);
  --md-accent-fg-color: var(--vd-primary);
  --md-accent-fg-color--transparent: rgba(255, 188, 59, 0.1);
}

/* Header customization */
.md-header {
  background-color: var(--vd-secondary);
}

/* Navigation tabs */
.md-tabs {
  background-color: var(--vd-secondary);
}

/* Links */
.md-content a {
  color: var(--vd-primary-dark);
}

.md-content a:hover {
  color: var(--vd-primary);
}

/* Buttons and CTAs */
.md-button--primary {
  background-color: var(--vd-primary);
  border-color: var(--vd-primary);
  color: var(--vd-secondary);
}

.md-button--primary:hover {
  background-color: var(--vd-primary-dark);
  border-color: var(--vd-primary-dark);
}

/* Code blocks */
.md-typeset code {
  background-color: rgba(26, 26, 55, 0.05);
  color: var(--vd-secondary);
}

/* Admonitions */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--vd-primary);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(255, 188, 59, 0.1);
  border-color: var(--vd-primary);
}

/* Search highlighting */
.md-search-result__article--document:hover {
  background-color: rgba(255, 188, 59, 0.1);
}

/* Footer */
.md-footer {
  background-color: var(--vd-secondary);
}

.md-footer-meta {
  background-color: rgba(26, 26, 55, 0.9);
}

/* Custom styles for course content */
.course-topic {
  border-left: 4px solid var(--vd-primary);
  padding-left: 1rem;
  margin: 1.5rem 0;
}

.code-example {
  background-color: rgba(26, 26, 55, 0.02);
  border-radius: 4px;
  padding: 1rem;
  margin: 1rem 0;
}

/* Highlight important information */
.highlight-box {
  background-color: rgba(255, 188, 59, 0.1);
  border-left: 4px solid var(--vd-primary);
  padding: 1rem;
  margin: 1.5rem 0;
  border-radius: 4px;
}

/* Navigation sidebar active item */
.md-nav__link--active {
  color: var(--vd-primary);
}

/* Table of contents active item */
.md-nav__link--active {
  color: var(--vd-primary);
  font-weight: 600;
}

/* Responsive adjustments */
@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__link--active {
    color: var(--vd-primary);
  }
}

/* Print styles */
@media print {
  .md-header,
  .md-footer,
  .md-sidebar {
    display: none;
  }
}