/* Guide Page - Optimized with Tailwind CSS
 * Reduced from 345 lines to ~35 lines (90% reduction)
 * Only essential styles that use CSS variables (can't use static Tailwind)
 */

/* Page layout overrides - needed for full-width layout */
body.page #content.site-content,
body.page main,
body.page .entry-content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page {
  background-color: #f9fafb; /* bg-gray-50 */
}

body.page .site-main {
  padding-top: 0;
  padding-bottom: 0;
}

/* CSS variables - theme colors (can't be replaced with static Tailwind) */
.guide-hero-banner {
  background-color: var(--theme-primary-color);
}

.guide-step-number {
  background-color: var(--theme-secondary-color);
  min-width: 3.5rem;
  min-height: 3.5rem;
}

.guide-step-action {
  background-color: var(--theme-primary-color);
  text-decoration: none !important;
}

.guide-step-action:hover {
  text-decoration: none !important;
}

.guide-tip-icon {
  color: var(--theme-secondary-color);
}

.guide-cta-content {
  background-color: var(--theme-primary-color);
}

.guide-cta-btn.guide-cta-primary {
  background-color: #ffffff !important;
  color: var(--theme-primary-color) !important;
  text-decoration: none !important;
}

.guide-cta-btn.guide-cta-primary:hover {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

.guide-cta-btn.guide-cta-secondary {
  background-color: transparent !important;
  color: var(--theme-cta-text-light, rgba(255, 255, 255, 0.95)) !important;
  border-color: var(--theme-cta-border-light, rgba(255, 255, 255, 0.3)) !important;
  text-decoration: none !important;
}

.guide-cta-btn.guide-cta-secondary:hover {
  background-color: var(--theme-cta-hover-bg, rgba(255, 255, 255, 0.1)) !important;
}