/* Additional styles for school profitability article */

/* Animation classes */
.fade-in {
  animation: fadeIn 0.6s ease forwards;
}

.slide-up {
  animation: slideUp 0.6s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(30px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  .article-content {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  a {
    color: #000 !important;
    text-decoration: none !important;
  }
  
  .chapter-section {
    break-inside: avoid;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .reality-grid,
  .emirate-grid,
  .data-visualization,
  .strategies-grid,
  .elements-grid,
  .services-grid {
    grid-template-columns: 1fr;
  }
  
  .comparison-example {
    grid-template-columns: 1fr;
  }
  
  .alignment-visual {
    flex-direction: column;
  }
  
  .alignment-connector {
    transform: rotate(90deg);
  }
  
  .timing-options {
    grid-template-columns: 1fr;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .reality-card,
  .data-card,
  .emirate-card,
  .strategy-item,
  .element-card,
  .service-category {
    background: #2d2d2d;
    color: #6c78e9;
  }
  
  .profitability-note,
  .reality-data {
    background: #3d3d3d;
  }
  
  .saturation-bar {
    background: #444;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .reality-card,
  .data-card,
  .emirate-card {
    border: 2px solid #000;
  }
  
  .positive {
    color: #006600 !important;
  }
  
  .negative {
    color: #990000 !important;
  }
}