/* ==========================================================================
   Responsive Breakpoints & Layouts
   ========================================================================== */

/* 
 * Breakpoints:
 * Large: > 1200px (Default)
 * Tablet Landscape: <= 1024px
 * Tablet Portrait / Mobile Large: <= 768px
 * Mobile Small: <= 480px
 */

/* =========================================
   Tablet & Small Desktop (Max 1024px)
   ========================================= */
@media (max-width: 1024px) {
  .container {
    padding: 0 2rem;
  }

  h1 { font-size: clamp(2rem, 4vw, 3rem); }

  /* Hero Section */
  .hero {
    min-height: 70vh;
  }

  /* Grid Adjustments */
  .calc-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

/* =========================================
   Tablet Portrait & Mobile Large (Max 768px)
   ========================================= */
@media (max-width: 768px) {
  .container {
    padding: 0 1.25rem;
  }

  body {
    font-size: 15px; /* Slightly smaller base font */
  }

  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }

  /* Navbar */
  .navbar__logo {
    font-size: 1.25rem;
  }

  /* Cards */
  .card {
    padding: 1.5rem;
  }

  /* Buttons */
  .btn {
    padding: 0.6rem 1.25rem;
  }

  .btn--lg {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }

  /* Footer */
  .footer {
    padding: 3rem 0 1.5rem;
    margin-top: 3rem;
  }

  /* Utility */
  .mb-5 { margin-bottom: 2rem; }
  .mb-4 { margin-bottom: 1.5rem; }
}

/* =========================================
   Mobile Small (Max 480px)
   ========================================= */
@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }

  h1 { font-size: 2rem; }
  
  .result-value {
    font-size: 2rem !important; /* Force smaller size on very small screens */
  }

  /* Full width buttons on small mobile */
  .btn:not(.navbar__toggle) {
    width: 100%;
    justify-content: center;
  }

  /* Stacked Grid Items */
  .calc-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Form Elements */
  .form-input, .form-select {
    padding: 0.875rem 1rem; /* Slightly larger touch target */
  }

  /* Results Display */
  .result-card {
    padding: 1.5rem;
  }

  /* Charts */
  .calculator-chart {
    height: 250px; /* Shorter chart on mobile */
    padding: 1rem;
  }

  /* Table */
  .table-responsive {
    margin: 1.5rem -1rem; /* Negative margin to stretch to edges */
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* =========================================
   Print Styles (For users who print results)
   ========================================= */
@media print {
  body {
    background: white;
    color: black;
  }

  .navbar,
  .footer,
  .ad-slot,
  .btn:not(.print-only),
  .calculator-sidebar,
  .content-section {
    display: none !important;
  }

  .calculator-layout {
    grid-template-columns: 1fr;
    display: block;
  }

  .calculator-card {
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .result-card {
    background: transparent;
    border: 1px solid #ccc;
    color: black;
  }

  .result-value,
  .result-label,
  h1, h2, h3, p {
    color: black !important;
    text-shadow: none !important;
  }

  /* Force background colors to print */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}