/* Mobile-specific styles */

/* Apply styles for number circles on all screen sizes */
.reason-card .reason-number span {
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  aspect-ratio: 1;
  box-sizing: border-box;
  padding: 0;
}

/* Fix for thank you page - ensure content takes up more screen space */
@media (max-width: 767px) {
  .thank-you-page .container,
  .thank-you-page section > .container > div {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 5% !important;  
    padding-right: 5% !important;
  }
  
  .thank-you-page .max-w-md {
    max-width: 100% !important;
  }
}

/* Style for solving-together section to match cost-of-disorg */
#solving-together .w-8, #solving-together .flex-shrink-0.w-8.h-8 {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 50% !important;
  aspect-ratio: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-right: 0.75rem !important;
  margin-top: 0.25rem !important;
}

/* Fix grid layout in solving-together section on mobile */
@media (max-width: 767px) {
  #solving-together .grid.grid-cols-1.md\:grid-cols-2 {
    display: block !important;
  }
  
  #solving-together .flex.items-start {
    margin-bottom: 1rem !important;
  }

  #solving-together .flex.items-start > div {
    padding-top: 0.25rem !important;
  }
}

/* Fix the pill-shaped numbers in Cost of Disorganized and Recap sections */
#cost-of-disorg .w-8, #recap .w-8 {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 50% !important;
  aspect-ratio: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-right: 0.75rem !important;
  margin-top: 0.25rem !important;
}

/* Fix grid layout in cost-of-disorg section on mobile */
@media (max-width: 767px) {
  #cost-of-disorg .grid.grid-cols-1.md\:grid-cols-2 {
    display: block !important;
  }
  
  #cost-of-disorg .flex.items-start {
    margin-bottom: 1rem !important;
  }

  #cost-of-disorg .flex.items-start > div,
  #recap .flex.items-start > p {
    padding-top: 0.25rem !important;
  }
}

/* Apply to all screen sizes below 768px (standard mobile breakpoint) */
@media (max-width: 767px) {
  /* Make contact form wider on mobile */
  .bg-white.rounded-lg.shadow-lg.p-8.max-w-md.w-full.mx-auto {
    width: 106% !important;
    margin-left: -3% !important;
    margin-right: -3% !important;
    max-width: 106% !important;
    position: relative !important;
    padding: 10% !important;
    border-radius: 0 !important;
  }
  
  /* Fix spacing between Cost of Disorganized and What You're Solving sections */
  #cost-of-disorg {
    margin-top: 3rem !important;
    margin-bottom: 2rem !important;
  }
  
  #recap {
    padding-top: 0 !important;
  }
  
  /* Fix spacing for How Does It Work, Key Features, and Why Does It Work sections */
  #how-it-works {
    padding-top: 3rem !important;
    padding-bottom: 0.5rem !important;
  }
  
  #reasons-section {
    padding-top: 0rem !important;
    margin-top: 0 !important;
    padding-bottom: 1rem !important;
  }
  
  /* Complete fix for Why Does It Work section */
  #why-it-works {
    padding-top: 2rem !important;
    padding-bottom: 1rem !important;
    margin-top: -1rem !important;
    border-top: none !important;
    position: relative !important;
  }
  
  /* Make the pricing subtitle smaller than the heading on mobile */
  #pricing .text-2xl.font-bold.mb-10 {
    font-size: 1.5rem !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    letter-spacing: -0.01em !important;
    opacity: 0.9 !important;
    line-height: 1.3 !important;
  }
  
  /* Fix specific spacing issues in Why Does It Work section */
  #why-it-works .mb-8 {
    margin-bottom: 1rem !important;
  }
  
  #why-it-works .mb-12 {
    margin-bottom: 1rem !important;
  }
  
  /* Reduce margin below section headings on mobile */
  #reasons-section h2.mb-16 {
    margin-bottom: 2rem !important;
  }
  
  /* Remove rounded corners from form inputs and elements */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  .dropdown-header,
  .dropdown-options,
  .custom-dropdown-container .dropdown-header,
  button {
    border-radius: 0 !important;
  }
  
  /* Center the resource button */
  .send-button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
    max-width: 100% !important;
    text-align: center !important;
    border-radius: 0 !important;
  }
  
  /* Add spacing to button container and ensure centering */
  .mt-8 {
    margin-top: 1.5rem !important;
    margin-bottom: 1rem !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }
  
  /* Fix button text alignment */
  .send-button .default-icon,
  .send-button .hover-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
  }
  
  /* Improved container spacing */
  .container {
    padding-left: 9% !important;
    padding-right: 9% !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Improved text spacing and sizing */
  p, li, span {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  /* Center content better on mobile */
  .text-center-mobile {
    text-align: center !important;
  }
  
  /* Ensure all sections have proper padding */
  section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Fix for content that might extend beyond screen bounds */
  .max-w-lg, .max-w-xl, .max-w-2xl, .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl {
    max-width: 100% !important;
  }
  
  /* Adjust grid spacing for mobile */
  .gap-12, .gap-8, .gap-6 {
    gap: 1rem !important;
  }
  
  /* Better button visibility */
  .bg-yellow-600, .bg-yellow-700 {
    width: auto !important;
    min-width: 150px !important;
    text-align: center !important;
  }
  
  /* Fix issue #1: Reduce padding in hero section */
  #hero {
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  /* Fix issue #2: Reduce spacing between problem sections */
  #org-problems-intro, #problem1, #problem2, #problem3, #problem4 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* Additional adjustment for the organizational problems intro section */
  #org-problems-intro + section {
    padding-top: 0.75rem !important;
  }
  
  /* Target problem section inner content */
  #problem1 .pb-8, #problem2 .pb-8, #problem3 .pb-8, #problem4 .pb-8 {
    padding-bottom: 0.5rem !important;
  }
  
  /* Add spacing between problem headings and content */
  #problem1 h3, #problem2 h3, #problem3 h3, #problem4 h3 {
    margin-bottom: 1rem !important;
  }
  
  /* Add margin between problem paragraphs */
  #problem1 p.mb-6, #problem2 p.mb-6, #problem3 p.mb-6, #problem4 p.mb-6,
  #problem1 p.mb-8, #problem2 p.mb-8, #problem3 p.mb-8, #problem4 p.mb-8 {
    margin-bottom: 1rem !important;
  }
  
  /* FIX NUMBERED REASON SECTIONS */
  /* Improve number and title layout */
  #reason1, #reason2, #reason3, #reason4, #reason5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Create more space for the title next to the number */
  #reason1 .flex.items-center, 
  #reason2 .flex.items-center, 
  #reason3 .flex.items-center, 
  #reason4 .flex.items-center, 
  #reason5 .flex.items-center {
    align-items: flex-start !important;
  }
  
  /* Make number circles smaller and better proportioned */
  #reason1 .w-10.h-10, 
  #reason2 .w-10.h-10, 
  #reason3 .w-10.h-10, 
  #reason4 .w-10.h-10, 
  #reason5 .w-10.h-10 {
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-width: 2.25rem !important;
    min-height: 2.25rem !important;
    margin-top: 0.25rem !important;
    border-radius: 50% !important;
  }
  
  /* Make the Cost of Disorganized and Recap section numbers circular */
  #cost-of-disorg .flex-shrink-0.w-8.h-8, 
  #recap .flex-shrink-0.w-8.h-8 {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
    border-radius: 50% !important;
    aspect-ratio: 1 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0.25rem !important;
  }
  
  /* Align text with circular numbers in these sections */
  #cost-of-disorg .flex.items-start,
  #recap .flex.items-start {
    align-items: flex-start !important;
  }
  
  #cost-of-disorg .flex.items-start p,
  #recap .flex.items-start p {
    padding-top: 0 !important;
  }
  
  /* Adjust the title size and spacing */
  #reason1 h3, #reason2 h3, #reason3 h3, #reason4 h3, #reason5 h3 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Remove left margin for content to use full width */
  #reason1 .ml-14, #reason2 .ml-14, #reason3 .ml-14, #reason4 .ml-14, #reason5 .ml-14 {
    margin-left: 0 !important;
    margin-top: 1rem !important;
  }
  
  /* Fix grid layout for feature boxes */
  #reason1 .grid, #reason2 .grid, #reason3 .grid, #reason4 .grid, #reason5 .grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Style feature boxes */
  #reason1 .border-t-2, #reason2 .border-t-2, #reason3 .border-t-2, 
  #reason4 .border-t-2, #reason5 .border-t-2 {
    border-top-width: 2px !important;
    border-top-color: #d97706 !important;
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
    background-color: #f9fafb !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  }
  
  /* Improve feature box content spacing */
  #reason1 .border-t-2 p, #reason2 .border-t-2 p, #reason3 .border-t-2 p, 
  #reason4 .border-t-2 p, #reason5 .border-t-2 p {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
  }
  
  /* Add space below the heading and description */
  #reason1 > .container > .max-w-4xl > p.mb-8,
  #reason2 > .container > .max-w-4xl > p.mb-8,
  #reason3 > .container > .max-w-4xl > p.mb-8,
  #reason4 > .container > .max-w-4xl > p.mb-8,
  #reason5 > .container > .max-w-4xl > p.mb-8 {
    margin-bottom: 1.5rem !important;
  }
  
  /* Adjust spacing between number and title for better alignment */
  #reason1 .flex.items-center .mr-4, 
  #reason2 .flex.items-center .mr-4, 
  #reason3 .flex.items-center .mr-4, 
  #reason4 .flex.items-center .mr-4, 
  #reason5 .flex.items-center .mr-4 {
    margin-right: 0.75rem !important;
  }
  
  /* Make the reason cards more compact on mobile */
  .reason-card {
    margin-bottom: 2.5rem !important;
  }
  
  /* Keep number and heading inline on mobile */
  .reason-card .flex.items-start {
    flex-direction: row !important;
    align-items: flex-start !important;
  }
  
  .reason-card .reason-number {
    margin-right: 0.75rem !important;
    margin-bottom: 0 !important;
  }
  
  /* Make number circles perfectly circular and smaller */
  .reason-card .reason-number .w-10 {
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 0.9rem !important;
    min-width: 2rem !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    aspect-ratio: 1 !important;
    margin-top: 0.25rem !important;
  }
  
  /* Style the title and move content below */
  .reason-card .reason-content {
    width: 100% !important;
  }
  
  .reason-card .reason-content h3 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
  }
  
  /* Fix check icon and text alignment */
  .reason-card .space-y-0 > div {
    padding: 0.75rem !important;
    display: flex !important;
    align-items: flex-start !important;
  }
  
  .reason-card .space-y-0 > div span.flex-shrink-0 {
    margin-top: 0.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.25rem !important;
  }
  
  .reason-card .space-y-0 > div p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Apply to extra small screens (below 480px) */
@media (max-width: 479px) {
  /* Extra padding for the smallest screens */
  .container {
    padding-left: 10% !important;
    padding-right: 10% !important;
  }
  
  /* Larger font for better readability on very small screens */
  h1 {
    font-size: 1.75rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  h3 {
    font-size: 1.25rem !important;
  }
  
  /* Smaller pricing subtitle for extra small screens */
  #pricing .text-2xl.font-bold.mb-10 {
    font-size: 1.125rem !important;
  }
  
  /* Even smaller number circles for tiny screens */
  #reason1 .w-10.h-10, 
  #reason2 .w-10.h-10, 
  #reason3 .w-10.h-10, 
  #reason4 .w-10.h-10, 
  #reason5 .w-10.h-10,
  #cost-of-disorg .flex-shrink-0.w-8.h-8,
  #recap .flex-shrink-0.w-8.h-8 {
    width: 1.75rem !important;
    height: 1.75rem !important;
    min-width: 1.75rem !important;
    min-height: 1.75rem !important;
    border-radius: 50% !important;
  }
  
  /* Smaller reason card number circles on smallest screens */
  .reason-card .reason-number .w-10 {
    width: 1.75rem !important;
    height: 1.75rem !important;
    min-width: 1.75rem !important;
    font-size: 0.8rem !important;
  }
}