/* styles.css - Styled for WPC Farming (Corrected + List Spacing Fix v2) */

/* Define CSS variables with WPC Farming defaults */
:root {
    /* Default values, will be overridden by JS applyTheme */
    --theme-primary: #3D7A3A;
    --theme-secondary: #5C4827;
    --theme-accent: #6a994e;
    --theme-background: #F5F1EA;
    --theme-card-bg: #FFFFFF;
    --theme-text: #5C4827;
    --theme-link: #3D7A3A;
    --theme-success: #3D7A3A;
    --theme-error: #c0392b;
    --theme-warning: #f39c12;
    --theme-button-primary-bg: #3D7A3A;
    --theme-button-primary-hover: #2B5329;
    --theme-button-next-bg: #3D7A3A;
    --theme-button-next-hover: #2B5329;
    --theme-button-retry-bg: #E67E22;
    --theme-button-retry-hover: #D35400;
    --theme-button-results-action-bg: #5C4827;
    --theme-button-results-action-hover: #443b1e;
    --theme-progress-bg: #3D7A3A;
    --theme-progress-text: #FFFFFF;
    --theme-correct-bg: #eafaf1;
    --theme-incorrect-bg: #fff5f5;
    --theme-choice-hover-bg: #eafaf1;
    --theme-choice-hover-text: #3D7A3A;

    /* Typography */
    --wpc-font-main: 'Open Sans', Arial, sans-serif;
}

/* Base styles */
body {
    font-family: var(--wpc-font-main);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--theme-background);
    color: var(--theme-text);
    font-size: 16px; /* Base font size */
    transition: background-color 0.3s ease, color 0.3s ease;
}

h2, h3 {
    color: var(--theme-primary);
    font-weight: 600; /* Semi-bold headings */
}

/* Container centering and styling */
.intro-container,
.quiz-container,
#results {
    max-width: 800px;
    margin: 30px auto; /* Consistent vertical margin */
    background: var(--theme-card-bg);
    padding: 25px 30px; /* More padding */
    border-radius: 8px; /* Slightly less rounded */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); /* Subtle shadow */
    transition: background-color 0.3s ease;
}

/* Intro screen */
.intro-content h2 {
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.8em;
}
.intro-content p {
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.1em;
    color: var(--theme-secondary);
}
.quiz-selection {
    text-align: center;
    margin-bottom: 30px;
}
.quiz-selection label {
    margin-right: 10px;
    font-weight: 500;
    color: var(--theme-text);
}
#quiz-selector {
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    min-width: 250px;
    font-size: 1em;
    cursor: pointer;
}
.start-button {
    display: block;
    margin: 25px auto;
    background-color: var(--theme-button-primary-bg);
    color: var(--theme-card-bg); /* White text */
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.start-button:disabled {
    background-color: #b0b0b0; /* Grey out disabled */
    cursor: not-allowed;
}
.start-button:not(:disabled):hover {
    background-color: var(--theme-button-primary-hover);
    transform: translateY(-2px); /* Slight lift on hover */
}

.intro-benefits {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid #eee;
}
.intro-benefits h3 {
    color: var(--theme-primary);
    margin: 0 0 15px 0;
    font-weight: 600;
    text-align: center;
}
.intro-benefits ul {
    list-style-type: none;
    padding-left: 0;
    /* Remove text-align center if you want block items left-aligned */
    /* text-align: center; */
    /* Optional: Center the UL block itself */
     max-width: 600px; /* Adjust width as needed */
     margin-left: auto;
     margin-right: auto;
}
.intro-benefits ul li {
    /* --- CORRECTED DISPLAY & MARGIN --- */
    display: block;      /* Force each item onto its own line */
    margin: 12px 0;      /* Adjust vertical margin between block items */
    /* --- END CORRECTION --- */
    padding-left: 28px; /* Ensure space for icon */
    position: relative;
    text-align: left; /* Ensure text inside li is left-aligned */
    /* max-width: 90%; /* May not be needed now */
}
.intro-benefits ul li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--theme-accent); /* Use accent green for check */
    font-weight: bold;
    font-size: 1.2em;
    top: 0; /* Adjust vertical alignment if needed, e.g., 1px or 2px */
    line-height: 1.6; /* Align with text line-height */
}

/* Quiz Container */
.quiz-container {
    padding: 20px 25px;
}
#quiz {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Spacing between sections */
}

/* Progress bar */
.progress-bar {
    background: #e9ecef;
    border-radius: 20px;
    overflow: hidden;
    height: 28px;
    position: relative;
}
.progress {
    height: 100%;
    background: var(--theme-progress-bg);
    transition: width 0.3s ease;
    border-radius: 20px; /* Match outer radius */
}
.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--theme-progress-text);
    font-weight: 500;
    font-size: 0.9em;
    z-index: 1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Question/Choices Container */
.question-choices-container {
    border: none;
    padding: 0;
}
#question {
    font-size: 1.3em; /* Larger question text */
    margin: 0 0 20px 0;
    color: var(--theme-secondary); /* Use dark brown for question */
    line-height: 1.5;
    padding: 0; /* Remove padding if container handles it */
    font-weight: 600; /* Bolder question */
}
#choices {
    margin: 0;
    padding: 0;
}
.choice-container {
    margin: 10px 0;
    padding: 15px 18px;
    border-radius: 6px;
    background: var(--theme-background); /* Light tan background for choices */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    border: 1px solid #e0daca; /* Subtle border */
}
.choice-container:hover {
    background-color: var(--theme-choice-hover-bg);
    border-color: var(--theme-accent);
}

.choice-container label:hover {
    color: var(--theme-choice-hover-text); /* Change label text on hover */
}
.choice-container input[type="radio"] {
    margin-right: 15px;
    flex-shrink: 0;
    transform: scale(1.1); /* Slightly larger radio buttons */
    accent-color: var(--theme-primary); /* Style radio button itself */
    cursor: pointer;
}
.choice-container label {
    cursor: pointer;
    flex-grow: 1;
    color: var(--theme-text);
    font-size: 1.05em;
    line-height: 1.5;
    transition: color 0.2s ease;
}

/* Button Container */
.button-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    padding: 0 10px;
    flex-wrap: wrap;
}

/* General Button Styling */
button, .wpc-link /* Style link like a button */ {
    padding: 10px 25px; /* Consistent padding */
    margin: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none; /* For .wpc-link */
    display: inline-block; /* For .wpc-link */
    text-align: center;
    color: var(--theme-card-bg); /* White text default */
}

button:hover, .wpc-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Specific Buttons */
#submit {
    background-color: var(--theme-button-primary-bg);
}
#submit:hover {
    background-color: var(--theme-button-primary-hover);
}

#next {
    background-color: var(--theme-button-next-bg);
}
#next:hover {
    background-color: var(--theme-button-next-hover);
}

#retry {
    background-color: var(--theme-button-retry-bg);
}
#retry:hover {
    background-color: var(--theme-button-retry-hover);
}
#retry.fade-out {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s, transform 0.3s;
}

#quit-quiz.quit-button {
    background-color: var(--theme-secondary); /* Use secondary color (dark brown) */
    color: var(--theme-card-bg);
}
#quit-quiz.quit-button:hover {
    background-color: color-mix(in srgb, var(--theme-secondary) 85%, black); /* Darken on hover */
}
.button-container button, .button-container .quit-button {
    min-width: 120px; /* Adjust if needed */
}


/* Feedback & Explanation Container */
.feedback-container {
    margin-top: 15px;
    padding: 0;
}

/* Feedback messages */
.feedback, .explanation {
    margin: 15px 0;
    padding: 15px 18px;
    border-radius: 5px;
    transition: all 0.4s ease-in-out;
    font-size: 1em;
    border-left-width: 5px;
    border-left-style: solid;
}
.feedback.correct, .explanation.correct {
    background-color: var(--theme-correct-bg);
    color: var(--theme-success);
    border-left-color: var(--theme-success);
}
.feedback.incorrect, .explanation.incorrect, .explanation.incorrect-retry {
    background-color: var(--theme-incorrect-bg);
    color: var(--theme-error);
    border-left-color: var(--theme-error);
}
.feedback.warning {
    background-color: #fff9e6; /* Light yellow/orange for warning */
    color: var(--theme-warning);
    border-left-color: var(--theme-warning);
}
.explanation { display: none; }

/* Feedback Flash Animation (Optional) */
.flash { animation: flashMessage 1.5s ease-in-out; }
@keyframes flashMessage { /* Subtle flash */
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Correct answer highlight */
.choice-container.correct-answer {
    animation: correctAnswer 0.8s ease-out;
    background-color: var(--theme-correct-bg);
    border-color: var(--theme-success);
    border-width: 2px;
}
.choice-container.correct-answer label {
    color: var(--theme-success);
    font-weight: 600;
}
@keyframes correctAnswer { /* Simple pulse */
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Disabled choice styling */
.choice-container input[type="radio"]:disabled + label {
    color: #999; /* Grey out text */
    cursor: default;
}
.choice-container input[type="radio"]:disabled {
    cursor: default;
    opacity: 0.6;
}


/* Fade transitions */
.fade-out {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

/* Results screen */
#results {
    padding: 30px;
    line-height: 1.7; /* More spacious line height */
    text-align: center;
}
#results h2 {
    margin-bottom: 20px;
    font-size: 1.9em;
}
.score-container {
    margin: 15px auto 25px;
    padding: 18px 25px;
    background: var(--theme-background);
    border-radius: 8px;
    display: inline-block;
    font-size: 1.2em;
    color: var(--theme-secondary);
}
#score {
    font-weight: 700; /* Bolder score */
    font-size: 1.25em;
    color: var(--theme-primary);
    display: inline-block;
}
#evaluation {
    margin: 0 auto 30px;
    max-width: 90%;
    text-align: center;
    font-size: 1.1em;
    color: var(--theme-secondary);
}
#evaluation strong {
    display: block;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: var(--theme-primary); /* Heading color for emphasis */
    font-weight: 600;
}

/* Study Resources Section */
.study-resources-container {
    margin: 30px 0;
    padding: 20px 25px;
    background: var(--theme-background);
    border-radius: 8px;
    text-align: left;
    border: 1px solid #e0daca; /* Subtle border */
}
.study-resources-container h3 {
    margin: 0 0 20px 0;
    color: var(--theme-primary);
    text-align: center;
    font-size: 1.4em;
}
.resource-topic {
    margin-bottom: 15px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: var(--theme-card-bg);
    overflow: hidden;
}
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    cursor: pointer;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}
.accordion-header:hover {
    background-color: #f1f3f5;
}
.resource-topic.mastered .accordion-header { background: #eafaf1; } /* Light green */
.resource-topic.needs-improvement .accordion-header { background: #fff8f0; } /* Light orange */

.accordion-header strong {
    color: var(--theme-secondary);
    font-size: 1.1em;
    font-weight: 600;
    margin: 0;
    flex-grow: 1;
}
.topic-score {
    margin: 0 15px 0 10px;
    font-size: 0.95em;
    white-space: nowrap;
    font-weight: 500;
    color: var(--theme-text); /* Default text color */
}
.needs-improvement .topic-score { color: var(--theme-error); font-weight: 600; }
.mastered .topic-score { color: var(--theme-success); font-weight: 600; }

.accordion-toggle {
    padding: 5px 10px;
    font-size: 0.9em;
    background-color: var(--theme-accent); /* Use accent green */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 500;
    transition: background-color 0.2s ease;
}
.accordion-toggle:hover {
    background-color: var(--theme-primary);
}

.accordion-content {
    padding: 18px;
    font-size: 1em;
    line-height: 1.6;
    border-top: 1px solid #eee;
    background: var(--theme-card-bg);
}
.study-resources-content {
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--theme-secondary); /* Dark brown text for resources */
}

/* Results Page Buttons */
.results-actions {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Specific results button colors */
#print-recommendations {
    background-color: var(--theme-button-results-action-bg); /* Dark Brown */
}
#print-recommendations:hover {
    background-color: var(--theme-button-results-action-hover);
}
#restart {
    background-color: var(--theme-button-next-bg); /* Use primary green like Next */
}
#restart:hover {
    background-color: var(--theme-button-next-hover);
}
.wpc-link { /* The "Visit WPC" button */
    background-color: var(--theme-button-primary-bg); /* Primary Green */
}
.wpc-link:hover {
    background-color: var(--theme-button-primary-hover);
}

/* Score reveal animation */
#score.score-reveal { /* Ensure class is targeted */
    animation: scoreReveal 0.6s ease-out forwards;
}
@keyframes scoreReveal {
    0% { transform: scale(0.5) translateY(10px); opacity: 0; }
    70% { transform: scale(1.1) translateY(0); }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Results Fade-out */
#results.fade-out {
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Print Styles */
@media print {
  body {
      background-color: #fff !important; color: #000 !important; font-size: 10pt;
  }
  body * {
    visibility: hidden; box-shadow: none !important; border: none !important; color: #000 !important;
  }
  .print-area, .print-area * { visibility: visible; }
  .print-area {
    position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 20px; background: #fff !important;
  }
  .print-area h3 { text-align: left; margin-bottom: 15px; font-size: 14pt; }
  .print-area .resource-topic { margin-bottom: 10px; page-break-inside: avoid; background: #fff !important; border: 1px solid #ccc !important; }
   .print-area .accordion-header { background: #eee !important; padding: 8px 10px; border-bottom: 1px solid #ccc !important; }
   .print-area .accordion-header strong { font-size: 11pt; font-weight: bold;}
   .print-area .accordion-content { padding: 10px; background: #fff !important; border-top: 1px solid #eee !important; }
   .print-area .accordion-toggle, .print-area .topic-score { display: none; }
   .print-area .study-resources-content { white-space: pre-wrap; font-size: 10pt; line-height: 1.4; }
   a[href]:after { content: none !important; }
   button, .wpc-link, .score-container, #evaluation, #results h2, .progress-bar { display: none !important; } /* Hide more elements in print */
}

/* Hide print area when not printing */
.print-area { display: none; }

/* REMOVED unused keyframe animations */