Best Practices

/* =========================
   GLOBAL OVERRIDES
   ========================= */
/* High-level app styling that applies everywhere */
.kn-app .kn-action-button {
  font-family: 'Inter', sans-serif;
}

/* =========================
   LAYOUT COMPONENTS
   ========================= */
/* Navigation, headers, page structure */
.kn-page .kn-main-nav {
  /* Navigation styles */
}

/* =========================
   VIEW COMPONENTS  
   ========================= */
/* Forms, tables, charts, lists */
.kn-page .kn-form-view {
  /* Form styles */
}

/* =========================
   SCENE/VIEW SPECIFIC
   ========================= */
/* Page and view-specific overrides */
#scene_123.kn-page {
  /* Specific page customizations */
}

/* =========================
   RESPONSIVE OVERRIDES
   ========================= */
/* Mobile and tablet specific styles */
@media (max-width: 768px) {
  /* Mobile styles */
}

/* ✅ Efficient - specific but not overly complex */
.kn-page .kn-action-button {
  background-color: #007bff;
}

/* ❌ Inefficient - overly specific and slow */
.kn-app > .kn-page-container > .kn-page > .kn-view > .kn-action-button {
  background-color: #007bff;
}

/* ✅ Good for specific targeting */
#scene_123 #view_456.kn-form-view .kn-action-button {
  background-color: #28a745;
}

/* ✅ Use transform and opacity for animations */
.kn-page .kn-view {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.kn-page .kn-view:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

/* ❌ Avoid animating layout properties */
.kn-page .kn-view:hover {
  width: 102%; /* Causes reflow */
  height: 102%; /* Causes reflow */
  top: -2px; /* Causes reflow */
}

.kn-page .kn-action-button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Custom focus styles that are still accessible */
.kn-page .kn-action-button:focus {
  outline: none; /* Only remove if providing alternative */
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
}

.kn-page .kn-action-button {
  background-color: #007bff; /* Meets WCAG AA contrast requirements with white text */
  color: white;
}

/* Override required due to Knack's inline styles on form elements */
.kn-page .kn-form-view {
  background-color: white !important;
}

/* Scene 123 is the user dashboard - needs special styling */
#scene_123.kn-page {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 3rem;
}

/* View 456 is the contact form - make it prominent */
#scene_123 #view_456.kn-form-view {
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}