/* guides-new.css - Override styles to match new PromptRaptor branding */

/* CSS Variables */
:root {
  --cobalt: #667eea;
  --purple: #764ba2;
  --text-main: #1a1a1a;
  --text-muted: #6b7280;
  --border-subtle: #e5e7eb;
}

/* Reset old header styles */
.site-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border-bottom: none !important;
  padding: 1rem 0;
}

.site-header .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-logo {
  height: 40px !important;
  width: auto !important;
}

.main-nav {
  display: flex;
  gap: 1.5rem;
}

.nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}

.nav-link:hover,
.nav-link-active {
  color: #fff !important;
  font-weight: 500;
}

.nav-cta .btn-primary {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  border: none !important;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.2s;
}

.nav-cta .btn-primary:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* Hero section */
.guides-hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border-bottom: none !important;
  padding: 3rem 0 2.5rem;
}

.guides-label {
  background: rgba(255, 255, 255, 0.2);
  color: #fff !important;
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.75rem;
}

.guides-hero h1 {
  color: #fff !important;
  font-size: 2.5rem;
}

.guides-hero p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Guide tags */
.guide-tag {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border-radius: 20px;
}

/* Links */
.read-more,
.read-more-sm,
.guide-toc a {
  color: #667eea !important;
}

.read-more:hover,
.read-more-sm:hover,
.guide-toc a:hover {
  color: #764ba2 !important;
}

/* Card hovers */
.featured-content h2 a:hover,
.newest-card h3 a:hover,
.visual-content h3 a:hover,
.usecase-card h3 a:hover {
  color: #667eea !important;
}

/* Cards */
.newest-card,
.visual-card,
.usecase-card,
.advanced-card,
.guide-related-card {
  border-radius: 12px !important;
  transition: transform 0.2s, box-shadow 0.2s;
}

.newest-card:hover,
.visual-card:hover,
.usecase-card:hover,
.advanced-card:hover,
.guide-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15) !important;
}

/* Advanced section */
.section-advanced {
  background: #f9fafb !important;
}

.advanced-header .guide-tag {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.advanced-card {
  background: #fff !important;
}

/* CTA sections */
.section-guides-cta,
.section-cta-final {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  padding: 3rem 0;
}

.section-guides-cta h2,
.section-cta-final h2 {
  color: #fff !important;
}

.section-guides-cta p,
.section-cta-final p {
  color: rgba(255, 255, 255, 0.85) !important;
}

.section-guides-cta .btn-primary,
.section-cta-final .btn-primary {
  background: #fff !important;
  color: #667eea !important;
  padding: 0.875rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  border: none !important;
  transition: transform 0.2s, box-shadow 0.2s;
}

.section-guides-cta .btn-primary:hover,
.section-cta-final .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Footer */
.site-footer {
  background: #fff !important;
  border-top: 1px solid #e5e7eb;
  padding: 2rem 0;
}

.footer-brand {
  font-weight: 700;
  color: #1a1a1a;
}

.footer-text {
  color: #6b7280;
  font-size: 0.9rem;
}

.footer-built-by {
  color: #9ca3af;
  font-size: 0.85rem;
}

.footer-link {
  color: #6b7280 !important;
  transition: color 0.2s;
}

.footer-link:hover {
  color: #667eea !important;
}

/* Guide article pages */
.guide-callout-tip {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1)) !important;
  border-left-color: #667eea !important;
}

.guide-callout-success {
  background: #d1fae5 !important;
  border-left-color: #10b981 !important;
}

.guide-callout-warning {
  background: #fef3c7 !important;
  border-left-color: #f59e0b !important;
}

/* Related guides section */
.guide-related {
  background: #f9fafb !important;
}

.guide-related h2 {
  color: #1a1a1a;
}

.guide-related-card {
  background: #fff !important;
  border: 1px solid #e5e7eb;
}

.guide-related-card h3 {
  color: #1a1a1a;
}

.guide-related-card:hover h3 {
  color: #667eea;
}

/* Responsive */
@media (max-width: 768px) {
  .main-nav {
    display: none;
  }
  
  .guides-hero h1 {
    font-size: 1.75rem;
  }
}