/* Web Performance Brand Colors for MkDocs Material Theme */

:root {
  /* Primary brand red from webperformance.com */
  --md-primary-fg-color: #ff4444;
  --md-primary-fg-color--light: #ff6666;
  --md-primary-fg-color--dark: #cc3333;

  /* Accent color (red) */
  --md-accent-fg-color: #ff4444;
  --md-accent-fg-color--transparent: rgba(255, 68, 68, 0.1);

  /* Typography colors matching site */
  --md-typeset-color: #212121;
  --md-typeset-a-color: #ff4444;

  /* Code blocks */
  --md-code-bg-color: #f9f9f9;
  --md-code-fg-color: #333;
}

/* Dark mode overrides */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #ff4444;
  --md-accent-fg-color: #ff6666;
}

/* Header customization to match main site */
.md-header {
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.md-header__title {
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* Fix header tab text contrast - white text on red background */
.md-tabs {
  background-color: #ff4444;
}

.md-tabs__link {
  color: white;
  opacity: 0.9;
}

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

.md-tabs__link--active {
  color: white;
  opacity: 1;
  font-weight: 600;
}

/* Button styles matching site */
.md-button--primary {
  background-color: #ff4444;
  border-color: #ff4444;
  box-shadow: 0 3px 8px rgba(255, 68, 68, 0.25);
}

.md-button--primary:hover {
  background-color: #ff3333;
}

/* Link hover effects */
.md-typeset a:hover {
  color: #cc3333;
}

/* Navigation active item */
.md-nav__link--active {
  color: #ff4444;
}

/* Search highlighting */
.md-search__input::placeholder {
  color: rgba(0, 0, 0, 0.54);
}