/* ==========================================================================
   Responsive Adaptations & Accessibility Media Queries
   ========================================================================== */

/* Tablets & Smaller Desktops (Max 1024px) */
@media screen and (max-width: 1024px) {
  .calc-grid {
    grid-template-columns: 1fr 360px;
    gap: 1.5rem;
  }
  
  .hero-title {
    font-size: 2.25rem;
  }
}

/* Tablets / Phablets (Max 768px) */
@media screen and (max-width: 768px) {
  .calc-grid {
    grid-template-columns: 1fr;
  }

  .calc-summary-panel {
    order: -1; /* Display summary at top on mobile if desired or stack naturally */
  }

  .sticky-card {
    position: static;
  }

  .stepper-list::before {
    display: none;
  }

  .step-title {
    display: none; /* Hide labels, keep numbers on compact devices */
  }

  .guide-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .form-row {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* Small Smart Phones (Max 480px / 320px) */
@media screen and (max-width: 480px) {
  .hero-title {
    font-size: 1.85rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .calc-form-panel {
    padding: 1.25rem;
  }

  .sticky-card {
    padding: 1.25rem;
  }

  .result-number {
    font-size: 1.85rem;
  }

  .banner-highlight {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}

/* Reduced Motion Preference Support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print Optimization */
@media print {
  .site-header,
  .hero-section,
  .stepper-nav,
  .form-navigation,
  .educational-section,
  .faq-section,
  .btn-theme,
  #takehome-freq-select {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  .calc-grid {
    display: block;
  }

  .calc-form-panel, .sticky-card {
    border: none;
    box-shadow: none;
    padding: 0;
  }
  
  .step-panel {
    display: block !important;
  }
}