/* Only needed for the radar chart – everything else is Tailwind */
.radar {
  width: 200px;
  height: 200px;
  margin: 2rem auto;
  display: block;
}

/* Remove any old body background rules – we use the wrapper div now */
body { transition: background-color 0.3s ease; }

/* Fix green card once and for all */
.health-score polygon { fill: rgba(16, 185, 129, 0.3); }

.radar { width: 180px; height: 180px; margin: 1.5rem auto; display: block; }
.health-score h2 { margin-bottom: 0.5rem; }


  /* LOCAL TOOL FIX – MOBILE-FRIENDLY REPORT (WORKS 100% – Dec 2025) */
  @media (max-width: 1024px) {
    /* Kill narrow containers */
    .container, .max-w-5xl, .max-w-3xl, .max-w-4xl {
      max-width: 100% !important;
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }

    /* Reduce huge padding on form + report cards */
    .p-12, .p-10, .p-8 {
      padding: 1.5rem !important;
    }

    /* Smaller title */
    .text-5xl {
      font-size: 2rem !important;
      line-height: 1.1 !important;
    }

    /* Smaller giant percentage */
    .text-9xl {
      font-size: 6rem !important;
      line-height: 1 !important;
    }
  }

  /* Optional: slightly tighter on very small phones */
  @media (max-width: 480px) {
    .p-12, .p-10 { padding: 1.25rem !important; }
    .text-5xl { font-size: 1.875rem !important; }
    .text-9xl { font-size: 5.5rem !important; }
  }
  
  /* Loading Spinner */  
.animate-spin { animation: spin 1s linear infinite; } 
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }






/* Big Score Number Color - Light Mode */
.score-low {
  color: #ef4444 !important; /* Red for <60 */
}
.score-mid {
  color: #fb923c !important; /* Orange for 60-79 */
}
.score-high {
  color: #22c55e !important; /* Green for ≥80 */
}

/* Big Score Number Color - - Dark Mode Overrides */
.dark .score-low {
  color: #f87171 !important; /* Lighter red in dark mode */
}
.dark .score-mid {
  color: #fdba74 !important; /* Lighter orange in dark mode */
}
.dark .score-high {
  color: #86efac !important; /* Lighter green in dark mode */
}

/* /100 text - consistent gray in both modes */
.score-slash {
  color: #9ca3af !important; /* gray-400 */
}
.dark .score-slash {
  color: #6b7280 !important; /* gray-500 in dark */
}

/* Optional: Ensure drop-shadow is visible in both modes */
.score-number {
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}




/* Predictive Rank Forecast info text in dark mode */
.dark .text-blue-300 {
  color: #93c5fd !important;
}
.dark .text-green-300 {
  color: #86efac !important;
}
.dark .text-orange-300 {
  color: #fbbf24 !important;
}






/* Hero text below H2 - light gray in light mode, white in dark mode */
h2 + p {
  color: #6b7280; /* gray-500 light mode */
}
.dark h2 + p {
  color: #f3f4f6; /* gray-100 dark mode */
}



/* Detail paragraphs under labels - readable gray */
.text-left p {
  color: #4b5563; /* gray-600 light mode */
}

/* Predictive Rank Forecast info text */
.text-blue-300, .text-green-300, .text-orange-300 {
  color: #6b7280 !important; /* gray-500 light mode */
}
.dark .text-blue-300, .dark .text-green-300, .dark .text-orange-300 {
  color: #e5e7eb !important; /* gray-300 dark mode */
}


/* keyword-tool-features-checklist */
  #keyword-tool-features-checklist ul {
    list-style: none;
    padding: 0;
  }
  @media (max-width: 768px) {
    #keyword-tool-features-checklist li {
      flex-direction: column;
      text-align: center;
    }
    
    @media (max-width: 768px) {
    .grid {
      grid-template-columns: 1fr;
    }
    

/* Mobile-friendly report - force full width and reduce padding on small screens */
@media (max-width: 768px) {
  .max-w-5xl {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .p-8, .p-6, .p-12 {
    padding: 1.5rem !important;
  }
  .text-7xl, .text-8xl {
    font-size: 4rem !important;
  }
  .text-5xl {
    font-size: 2.5rem !important;
  }
  .text-4xl {
    font-size: 2rem !important;
  }
  .grid {
    grid-template-columns: 1fr !important;
  }
  .md\\:grid-cols-3, .md\\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
  table {
    font-size: 0.875rem !important;
  }
  table th, table td {
    padding: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  .p-8, .p-6, .p-12 {
    padding: 1rem !important;
  }
  .text-7xl, .text-8xl {
    font-size: 3.5rem !important;
  }
  .text-5xl {
    font-size: 2.25rem !important;
  }
}


/* Disable horizontal rubber-band bounce on iOS Safari (current pure-CSS solution – works with sticky headers) */
html, body {
  overscroll-behavior-x: none;
}

/* Safety: prevent dynamic table from causing real viewport stretch (keep from previous) */
#results .max-w-5xl {
  max-width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

#results .overflow-x-auto,
#results table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
  overflow-wrap: break-word;
}

#results table th,
#results table td {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Smooth internal scroll */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Module titles (h4) - force gray-800 light / gray-200 dark, override any conflicts */
.bg-white h4,
.bg-gray-900 h4 {
  color: #1f2937 !important; /* gray-800 light mode */
}

.dark .bg-white h4,
.dark .bg-gray-900 h4 {
  color: #e5e7eb !important; /* gray-200 dark mode */
}

/* Fallback global for any h4 */
h4 {
  color: #1f2937 !important;
}

.dark h4 {
  color: #e5e7eb !important;
}


/* Module details text - consistent day/night mode (gray-800 light / gray-200 dark) */
.text-left p,
.text-left span,
.text-sm {
  color: #1f2937; /* gray-800 light mode */
}



/* Bold labels inside details (e.g., "Matching alts") */
.text-left p strong,
.text-left span.font-bold {
  color: #1f2937; /* gray-800 light */
}

.dark .text-left p strong,
.dark .text-left span.font-bold {
  color: #e5e7eb; /* gray-200 dark */
}



/* Fix priority fixes text wrapping on small screens - tested selector */
@media (max-width: 768px) {
  /* Target the fix boxes in Ranking Potential Improvement card */
  .bg-white.dark\\:bg-gray-900 > .space-y-8 > div > .flex > .flex-1 > div {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .bg-white.dark\\:bg-gray-900 > .space-y-8 > div > .flex > .flex-1 > div > h4 {
    font-size: 1.125rem !important;
    line-height: 1.5 !important;
    word-break: break-word;
    hyphens: auto;
  }

  .bg-white.dark\\:bg-gray-900 > .space-y-8 > div > .flex > .flex-1 > div > p {
    line-height: 1.6 !important;
    word-break: break-word;
  }
}