/* ==============================================
   Mobile Responsive Fixes for Perfect Viewport
   Ensures no horizontal overflow on mobile devices
   Target: 320px minimum viewport support
   ============================================== */

/* Global Mobile Safety Rules */
@media (max-width: 768px) {
  /* Prevent horizontal overflow */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Container constraints */
  .calculator-container,
  .main-container,
  .content-container,
  .professional-container,
  body > div {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
    box-sizing: border-box !important;
  }

  /* Fix wide content blocks */
  .hero-section,
  .hero-content,
  .trust-indicators,
  .calculators-grid,
  .journey-section,
  .faq-section,
  .content-section,
  .professional-card {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
  }

  /* Fix negative margins that cause overflow */
  .hero-section {
    margin: 0 0 var(--spacing-2xl) 0 !important;
  }

  /* Responsive tables */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Form elements full width */
  .form-professional-group,
  .form-professional-input,
  input[type="text"],
  input[type="number"],
  input[type="email"],
  select,
  textarea {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Button constraints */
  .btn-professional,
  button {
    max-width: 100% !important;
    word-wrap: break-word !important;
  }

  /* Grid responsive */
  .calculators-grid,
  .service-grid,
  .package-selector {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-lg) !important;
  }

  /* Text overflow handling */
  h1, h2, h3, h4, h5, h6, p, li {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Fix trust indicators */
  .trust-indicators {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Fix journey steps */
  .journey-steps {
    flex-direction: column !important;
  }

  /* Package cards responsive */
  .package-card {
    min-width: unset !important;
    width: 100% !important;
  }

  /* Results section constraints */
  #results,
  .results-container {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Cost breakdown cards */
  .cost-breakdown,
  .subsidy-highlight,
  .summary-card {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Fix any remaining overflow elements */
  * {
    max-width: 100vw !important;
  }

  /* Specific calculator fixes */
  .calculator-lead,
  .calculator-description {
    max-width: 100% !important;
    padding: 0 !important;
  }
}

/* Ultra-small devices (320px and below) */
@media (max-width: 380px) {
  /* Tighter padding for very small screens */
  .calculator-container,
  .main-container,
  .content-section {
    padding-left: var(--spacing-sm) !important;
    padding-right: var(--spacing-sm) !important;
  }

  /* Smaller font sizes for space efficiency */
  body {
    font-size: 18px !important;
  }

  h1 {
    font-size: 28px !important;
  }

  h2 {
    font-size: 24px !important;
  }

  h3 {
    font-size: 20px !important;
  }

  /* Stack all flex items */
  .trust-indicators,
  .journey-steps,
  .faq-grid {
    flex-direction: column !important;
  }

  /* Full width buttons */
  .btn-professional {
    width: 100% !important;
    padding: var(--spacing-md) var(--spacing-sm) !important;
  }
}

/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  /* Reduce vertical spacing in landscape */
  .hero-section {
    padding-top: var(--spacing-xl) !important;
    padding-bottom: var(--spacing-xl) !important;
  }

  .content-section {
    padding-top: var(--spacing-lg) !important;
    padding-bottom: var(--spacing-lg) !important;
  }

  h1 {
    margin-bottom: var(--spacing-lg) !important;
  }
}

/* Fix specific calculator overflow issues */
@media (max-width: 768px) {
  /* Hours Calculator */
  #hours-calculator .calculator-container {
    padding: var(--spacing-md) !important;
  }

  /* NDIS vs HCP */
  #ndis-hcp-calculator .calculator-container {
    padding: var(--spacing-md) !important;
  }

  /* Waiting Time Estimator */
  #waiting-time-calculator .calculator-container {
    padding: var(--spacing-md) !important;
  }

  /* Carer Payment */
  #carer-payment-calculator .calculator-container {
    padding: var(--spacing-md) !important;
  }

  /* Afford Home Care */
  #afford-calculator .calculator-container {
    padding: var(--spacing-md) !important;
  }
}

/* Ensure touch targets remain accessible */
@media (max-width: 768px) {
  /* Maintain minimum touch target size */
  button,
  .btn-professional,
  input[type="checkbox"],
  input[type="radio"],
  select,
  a.calculator-card {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Spacing for touch targets */
  .form-professional-group {
    margin-bottom: var(--spacing-lg) !important;
  }

  /* Checkbox and radio button areas */
  input[type="checkbox"] + label,
  input[type="radio"] + label {
    padding: var(--spacing-sm) !important;
    display: inline-block !important;
    min-height: 44px !important;
    line-height: 44px !important;
  }
}