/* results-style.css */

/* Global adjustments for the results page's main container */
.results-page-app {
  padding: 20px 30px;
}

/* Content blocks to give consistent spacing and background */
.content-block {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 25px 30px;
  margin-bottom: 25px;
}

/* Specific styling for headings within content blocks */
.results-page-app h2, .results-page-app h3 {
  font-size: 1.6rem;
  color: #1a2536;
  margin-bottom: 15px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 10px;
}

.results-page-app h3 {
    font-size: 1.3rem;
}

/* Personalized Summary Section */
.results-kolb-summary {
  background-color: #e2f0fb;
  border-left: 4px solid #2563eb;
  padding: 1rem;
  border-radius: 6px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1rem;
  color: #111;
  box-shadow: none;
}

.results-kolb-summary p {
  text-align: left;
  margin: 0 0 0.8rem 0;
  line-height: 1.5;
}

/* Score Summary Section */
.score-summary-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.score-summary-block li {
  background: #f8fafc;
  border-radius: 7px;
  border: 1px solid #e5e8ef;
  padding: 13px 22px;
  margin-bottom: 10px;
  font-size: 1.05em;
  display: flex; /* Keep flex to align strong and span on one line */
  align-items: baseline; /* Align items to the baseline of the text */
  flex-wrap: wrap; /* Allow wrapping if text is too long on small screens */
  gap: 5px; /* Small gap between elements for readability */
}

.score-summary-block li:last-child {
  margin-bottom: 0;
}

.score-summary-block li strong {
  font-weight: 600;
  color: #213050;
  /* Removed min-width, text-align, margin-right as they are no longer needed for column alignment */
}

/* REMOVED: .score-summary-block .score-value {} block is removed */

.score-summary-block .strength {
  font-size: 0.95em;
  font-weight: 500;
  color: #476ecf;
  margin-left: auto; /* Push the strength text to the far right */
  white-space: nowrap; /* Prevent wrapping for the strength text */
}


/* Radar Graph Section - Basic Container Adjustments */
.chart-container {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0 auto;
  max-width: 100%;
}

#kolbRadarChart {
  max-width: 450px;
  max-height: 380px;
  margin: 0 auto;
  display: block;
  background: none;
  box-shadow: none;
}


/* Navigation Buttons */
.nav-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.nav-buttons button, .nav-buttons a {
  background-color: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease-in-out;
  min-width: 150px;
  text-align: center;
}

.nav-buttons button:hover, .nav-buttons a:hover {
  background-color: #1d47b9;
}

#toggle-answers-btn {
  background: #64748b;
}

#toggle-answers-btn:hover {
  background: #475569;
}

/* Answer Review Styles */
#answers-review-container-wrapper {
  margin-top: 25px;
}

#answers-review-container {
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.review-pair {
  background: #f6f7fa;
  border: 1px solid #e2e6ee;
  border-radius: 9px;
  padding: 18px 20px 12px 20px;
  margin-bottom: 15px;
}

.review-pair h4 {
  margin: 0 0 8px 0;
  font-size: 1.05em;
  color: #213050;
}

.review-pair p {
  margin: 3px 0;
  font-size: 0.98em;
  color: #252a38;
}

.selected-answer {
  background: #e7f1fd;
  border-radius: 6px;
  font-weight: 600;
  padding: 3px 6px;
  display: inline-block;
}

.style-info {
  font-size: 0.9em;
  color: #4b51e5;
  margin-top: 6px;
  font-style: italic;
  text-align: right;
}

#answers-review-container-wrapper.hidden {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .results-page-app {
    padding: 15px;
  }
  .content-block {
    padding: 20px;
  }
  .nav-buttons {
    flex-direction: column;
    gap: 10px;
  }
  .nav-buttons button, .nav-buttons a {
    width: 100%;
    min-width: unset;
  }
  #answers-review-container-wrapper {
    padding: 15px;
  }
  /* Smaller screens: Adjust score list to be more compact when wrapped */
  .score-summary-block li {
      flex-direction: row; /* Keep on a row */
      flex-wrap: wrap; /* Allow wrapping */
      justify-content: flex-start; /* Start from left */
      align-items: baseline; /* Align text baselines */
      gap: 5px; /* Small gap between wrapped items */
  }
  .score-summary-block li strong {
      /* No specific overrides needed here as we removed them from desktop */
  }
  .score-summary-block .strength {
      margin-left: 0; /* No auto-margin if it wraps to the next line */
      flex-basis: 100%; /* Take full width if it needs to wrap */
      text-align: left; /* Align to left when on its own line */
  }
}

/* Media query for even smaller screens if necessary */
@media (max-width: 480px) {
    .results-page-app h2 {
        font-size: 1.4rem;
    }
    .results-page-app h3 {
        font-size: 1.15rem;
    }
    .score-summary-block li {
        font-size: 1em;
        padding: 10px 15px;
    }
    .review-pair {
        padding: 15px;
    }
}