/*
 * Protein Pitstop premium overrides
 *
 * This stylesheet refines the core design without rewriting the
 * existing CSS. By loading it after the main stylesheet in every
 * HTML page, these rules take precedence and introduce a more
 * sophisticated colour palette, improved typography and subtle
 * interactivity. The definitions are deliberately focused on
 * high‑impact components such as the header, navigation, buttons and
 * cards. Additional overrides can be added here as the brand
 * evolves.
 */

/* Colours and typography */
header {
  background: var(--color-text-main);
  color: #ffffff;
}

.main-nav .nav-link {
  color: #ffffff;
  font-weight: 500;
  text-decoration: none;
}
.main-nav .nav-link:hover,
.mobile-menu-items a:hover {
  color: var(--color-secondary);
}

body {
  background: var(--color-background);
  color: var(--color-text-main);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Buttons */
.btn {
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.btn-primary {
  background: var(--color-primary);
  color: #ffffff;
}
.btn-primary:hover {
  background: var(--color-secondary);
  color: #ffffff;
  transform: translateY(-2px);
}
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn-secondary:hover {
  background: var(--color-primary);
  color: #ffffff;
}

/* Cards */
.top-ten-card,
.resource-card,
.product-card {
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.top-ten-card:hover,
.resource-card:hover,
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Footer refinements */
.footer-nav a {
  color: var(--color-text-muted);
}
.footer-nav a:hover {
  color: var(--color-primary);
}

/* Mobile nav tweaks */
.mobile-nav-close {
  color: #ffffff;
}