/* ========================================
   RESPONSIVE BREAKPOINT SYSTEM FIX
   Standardizes breakpoints across all components
   Implements missing mobile and tablet breakpoints
   ======================================== */

/* Standardized Mobile-First Breakpoints */
/* Using Garden UI variables for consistency */
:root {
  --bp-xs: 480px;   /* Mobile phones (portrait) */
  --bp-sm: 640px;   /* Large mobile (landscape) / Small tablet */
  --bp-md: 768px;   /* Tablets (portrait) / Mobile-desktop boundary */
  --bp-lg: 1024px;  /* Tablets (landscape) / Small desktop */
  --bp-xl: 1200px;  /* Desktop / Large screens */
  --bp-2xl: 1400px; /* Large desktop / Extra wide screens */
}

/* Mobile Navigation Improvements */
@media (width <= 479px) {
  /* Extra small mobile phones */
  .garden-container {
    padding: 0 var(--space-3);
  }

  .mobile-nav-item {
    font-size: var(--font-base);
    padding: var(--space-4) var(--space-3);
  }

  /* Stack form elements vertically */
  .garden-form-row {
    flex-direction: column;
  }

  .garden-form-group {
    margin-bottom: var(--space-4);
  }
}

@media (width >= 480px) and (width <= 639px) {
  /* Large mobile phones (landscape) */
  .garden-header {
    padding: 0 var(--space-4);
  }

  .mobile-nav {
    padding: var(--space-6);
  }

  /* Improve form layout */
  .garden-form-row {
    display: flex;
    gap: var(--space-3);
  }

  .garden-form-row .garden-form-group {
    flex: 1;
  }
}

@media (width >= 640px) and (width <= 767px) {
  /* Small tablets */
  .garden-container {
    max-width: 600px;
    padding: 0 var(--space-6);
  }

  /* Show mobile menu but with tablet spacing */
  .garden-nav-main {
    display: none; /* Still use mobile menu */
  }

  .garden-mobile-menu-toggle {
    display: flex;
  }

  /* Tablet-optimized mobile menu */
  .mobile-nav {
    padding: var(--space-8);
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (width >= 768px) and (width <= 1023px) {
  /* Regular tablets and small desktops */
  .garden-container {
    max-width: 750px;
    padding: 0 var(--space-6);
  }

  /* Show desktop navigation */
  .garden-nav-main {
    display: flex;
  }

  .garden-mobile-menu-toggle {
    display: none;
  }

  /* Optimize form layouts for tablets */
  .garden-form-row {
    display: flex;
    gap: var(--space-4);
  }

  .garden-form-row .garden-form-group {
    flex: 1;
  }

  /* Strategy page improvements */
  .strategy-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-6);
  }
}

@media (width >= 1024px) and (width <= 1199px) {
  /* Large tablets and small desktops */
  .garden-container {
    max-width: 980px;
    padding: 0 var(--space-8);
  }

  /* Enhanced desktop layouts */
  .strategy-content {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-8);
  }

  /* Blog layouts */
  .blog-content {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-6);
  }
}

@media (width >= 1200px) {
  /* Full desktop and larger */
  .garden-container {
    max-width: 1200px;
    padding: 0 var(--space-8);
  }

  /* Full desktop layouts */
  .strategy-content {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--space-10);
  }

  .blog-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-8);
  }
}

/* Onboarding Form Responsive Improvements */
@media (width <= 479px) {
  .onboarding-page .form-step {
    padding: var(--space-4);
  }

  .onboarding-page .progress-indicator {
    margin-bottom: var(--space-4);
  }

  .onboarding-page .step-navigation {
    flex-direction: column;
    gap: var(--space-3);
  }

  .onboarding-page .step-navigation button {
    width: 100%;
  }
}

@media (width >= 480px) and (width <= 767px) {
  .onboarding-page .form-step {
    padding: var(--space-6);
  }

  .onboarding-page .garden-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .onboarding-page .garden-form-group {
    flex: 1;
    min-width: 280px;
  }
}

@media (width >= 768px) {
  .onboarding-page {
    max-width: 800px;
    margin: 0 auto;
  }

  .onboarding-page .form-step {
    padding: var(--space-8);
  }

  .onboarding-page .step-navigation {
    justify-content: space-between;
  }
}

/* Table Responsiveness */
@media (width <= 639px) {
  .garden-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .garden-table thead {
    display: none;
  }

  .garden-table tbody,
  .garden-table tr,
  .garden-table td {
    display: block;
  }

  .garden-table tr {
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
  }

  .garden-table td {
    border: none;
    padding: var(--space-2) 0;
    text-align: left;
  }

  .garden-table td::before {
    content: attr(data-label) ": ";
    font-weight: var(--font-semibold);
    display: inline-block;
    width: 120px;
  }
}

/* Navigation Improvements */
@media (width <= 1023px) {
  .garden-nav-actions {
    display: none; /* Hide secondary nav items on smaller screens */
  }
}

@media (width >= 1024px) {
  .garden-nav-actions {
    display: flex;
    gap: var(--space-3);
  }
}

/* Print Styles - Accessibility consideration */
@media print {
  .mobile-nav,
  .garden-mobile-menu-toggle,
  .mobile-search-toggle {
    display: none !important;
  }

  .garden-nav-main {
    display: flex !important;
  }

  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* High DPI screens */
@media (resolution >= 192dpi) {
  /* Ensure icons and images are crisp on high-DPI displays */
  .mobile-menu-toggle span,
  .garden-mobile-menu-toggle span {
    /* Use SVG or high-res images for hamburger menu */
    background-size: contain;
  }
}