/* --- Grammar Tenses Layout & Content Styles --- */
/* Used for Forms ([grammar_tenses_steps]), Meanings ([grammar_tenses_meanings]), AND Exercises ([grammar_tenses_exercises]) */

/* Define colors as CSS variables - Include variables used by both files */
/* Variables specifically for layout/content are here, shared ones are duplicated in both files for independence */
:root {
    --steps-purple-dark: #800080;
    --steps-purple-light: #f2e6f2;
    --steps-purple-hover: #6a006a;
    --steps-text-color: #333; /* Used by both */
    --steps-text-color-light: #ffffff; /* Used by both */
    --steps-separator-color: #e0e0e0;
    --steps-verb-color: red; /* Used by both */
    --steps-auxiliary-color: blue; /* Used by both */
    --steps-rare-note-color: #666; /* Used by both */
    /* Timeline variables are in grammar-tenses-timelines.css */
}

/* Styles for the main wrappers */
.grammar-tenses-steps-wrapper,
.grammar-meanings-wrapper,
.grammar-exercises-wrapper {
    margin: 25px auto;
    padding: 0;
    background-color: transparent;
}

/* Styles for the main heading (Form / Meaning / Exercise) */
.grammar-tenses-steps-wrapper .grammar-tenses-main-heading,
.grammar-meanings-wrapper .grammar-tenses-main-heading,
.grammar-exercises-wrapper .grammar-tenses-main-heading {
    text-align: center;
    font-size: 2.8em;
    margin: 0 auto 15px;
    padding: 0;
    color: var(--steps-purple-dark);
    font-weight: bold;
}

/* Styles for the step buttons container */
.grammar-tenses-steps-wrapper .steps,
.grammar-meanings-wrapper .steps,
.grammar-exercises-wrapper .steps {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--steps-separator-color);
    list-style: none;
    padding-left: 0;
    flex-wrap: wrap;
    gap: 10px;
}

/* Styles for individual step buttons */
.grammar-tenses-steps-wrapper .step,
.grammar-meanings-wrapper .step,
.grammar-exercises-wrapper .step {
    padding: 10px 15px;
    cursor: pointer;
    background-color: var(--steps-purple-light);
    color: var(--steps-text-color);
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
    border: 1px solid #d1b3d1;
    font-size: 0.95rem;
    font-weight: 500;
    flex-grow: 0;
    flex-shrink: 0;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
}

/* Adjust padding/font for very small screens if needed */
@media (max-width: 600px) {
     .grammar-tenses-steps-wrapper .step,
     .grammar-meanings-wrapper .step,
     .grammar-exercises-wrapper .step {
         padding: 8px 12px;
         font-size: 0.9rem;
         white-space: normal;
     }
}

/* Hover state for step buttons */
.grammar-tenses-steps-wrapper .step:hover,
.grammar-meanings-wrapper .step:hover,
.grammar-exercises-wrapper .step:hover {
    background-color: var(--steps-purple-hover);
    color: var(--steps-text-color-light);
    border-color: var(--steps-purple-hover);
}

/* Active state for the selected step button */
/* Note: Your JS uses 'is-active' class, not just 'active' */
.grammar-tenses-steps-wrapper .step.is-active,
.grammar-meanings-wrapper .step.is-active,
.grammar-exercises-wrapper .step.is-active {
    background-color: var(--steps-purple-dark);
    color: var(--steps-text-color-light);
    font-weight: bold;
    border-color: var(--steps-purple-dark);
}

/* Styles for the content areas (container made invisible initially) */
.grammar-tenses-steps-wrapper .content,
.grammar-meanings-wrapper .content,
.grammar-exercises-wrapper .content {
    display: none; /* Controlled by JS */
    margin-top: 20px;
    padding: 0; /* Remove padding/border if child shortcode adds its own */
    border: none;
    background-color: transparent;
}

/* --- Styles for Grammar Components within Content --- */

/* Styles for the secondary heading within meaning content (e.g., 'Repeated Actions') */
.grammar-tenses-steps-wrapper .content h3,
.grammar-meanings-wrapper .content h3,
.grammar-exercises-wrapper .content h3 {
     text-align: center;
     font-size: 1.4em; /* Slightly smaller than structure heading */
     margin: 0 0 15px; /* Space below heading */
     color: var(--steps-text-color);
}

/* Styles for the descriptive paragraph within meaning content (e.g., "The Present Simple is used...") */
.grammar-tenses-steps-wrapper .grammar-meaning-content > p,
.grammar-meanings-wrapper .grammar-meaning-content > p,
.grammar-exercises-wrapper .grammar-meaning-content > p {
    text-align: center; /* Center the paragraph */
    margin: 0 auto 20px; /* Center block element, add space below */
    max-width: 80%; /* Optional: give it a max width for readability */
}

/* Styles for the structure heading within content (Forms) */
.grammar-tenses-steps-wrapper .grammar-structure-heading,
.grammar-meanings-wrapper .grammar-structure-heading, /* Applied to meanings too for consistency if structure is shown */
.grammar-exercises-wrapper .grammar-structure-heading {
    text-align: center;
    font-size: 1.5em;
    margin: 15px 0;
    color: var(--steps-text-color);
}

/* Styles for the examples wrapper */
.grammar-tenses-steps-wrapper .grammar-examples,
.grammar-meanings-wrapper .grammar-examples,
.grammar-exercises-wrapper .grammar-examples {
    text-align: center; /* Centers inline/inline-block content */
    margin-top: 15px; /* Space above examples */
}

/* Styles for paragraphs within the examples wrapper */
.grammar-tenses-steps-wrapper .grammar-examples p,
.grammar-meanings-wrapper .grammar-examples p,
.grammar-exercises-wrapper .grammar-examples p {
    font-size: 0.9em; /* Make example text smaller */
    margin: 5px 0; /* Reduce space between example paragraphs */
}

/* Styles for Subject (Bold) */
.grammar-tenses-steps-wrapper .grammar-subject,
.grammar-meanings-wrapper .grammar-subject,
.grammar-exercises-wrapper .grammar-subject {
    font-weight: bold;
}

/* Styles for Main Verb (Red and Bold) */
.grammar-tenses-steps-wrapper .grammar-verb,
.grammar-meanings-wrapper .grammar-verb,
.grammar-exercises-wrapper .grammar-verb {
    color: var(--steps-verb-color);
    font-weight: bold;
}

/* Styles for Auxiliary Verbs ('do/does', 'am/is/are', 'have/has', 'had', 'will', 'be', 'being') (Blue and Bold) */
.grammar-tenses-steps-wrapper .grammar-auxiliary,
.grammar-meanings-wrapper .grammar-auxiliary,
.grammar-exercises-wrapper .grammar-auxiliary {
    color: var(--steps-auxiliary-color);
    font-weight: bold;
}

/* Styles for 'not' (Italic) */
.grammar-tenses-steps-wrapper .grammar-negative,
.grammar-meanings-wrapper .grammar-negative,
.grammar-exercises-wrapper .grammar-negative {
    font-style: italic;
}

/* Styles for Result Text (Blue) */
.grammar-tenses-steps-wrapper .grammar-result,
.grammar-meanings-wrapper .grammar-result,
.grammar-exercises-wrapper .grammar-result {
    color: var(--steps-auxiliary-color); /* Use the same blue as auxiliaries */
    font-weight: bold; /* Optional: make result text bold */
}

/* Styles for the note about rarity (e.g., Passive Perfect Continuous) */
.grammar-tenses-steps-wrapper .grammar-rare-note,
.grammar-meanings-wrapper .grammar-rare-note,
.grammar-exercises-wrapper .grammar-rare-note {
    font-style: italic;
    font-size: 0.85em;
    color: var(--steps-rare-note-color);
    text-align: center;
    margin: 10px 0;
}

/* Styles for the view exercise button container (if using teacher controls) */
.grammar-tenses-steps-wrapper .view-exercise-button-container,
.grammar-meanings-wrapper .view-exercise-button-container,
.grammar-exercises-wrapper .view-exercise-button-container {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 15px;
    clear: both;
}

/* Generic highlight class */
.grammar-tenses-steps-wrapper .highlight-green,
.grammar-meanings-wrapper .highlight-green,
.grammar-exercises-wrapper .highlight-green {
  color: green;
  font-weight: bold;
}
/* Styles for verbs highlighted green */
.grammar-meaning-content .grammar-verb.green-verb {
    color: green; /* Set the text color to green */
    /* Keep other grammar-verb styles like font-weight: bold if you want */
}
.grammar-particle {
  color: #28a745; /* Green */
}
.grammar-object {
  color: #6f42c1; /* Purple */
}
/* --- DEFINITIVE GRAMMAR STYLING --- */

/* Subject: Bold, as you requested. */
.grammar-subject {
    font-weight: bold;
    color: inherit; /* This prevents it from changing color */
}

/* Verb: A distinct, warm color. */
.grammar-verb {
    color: #e76f51; /* Burnt Orange */
    font-weight: bold;
}

/* Auxiliary & Pronoun: The SAME consistent blue. */
.grammar-auxiliary,
.grammar-pronoun {
    color: #0056b3; /* A standard, clear blue */
    font-weight: bold;
}

/* Negative: A clear red for emphasis. */
.grammar-negative {
    color: #d90429; /* Strong Red */
    font-weight: bold;
}

/* Conjunctions/Linking Words: A distinct purple for future topics. */
.grammar-conjunction {
    color: #800080; /* Purple */
    font-weight: bold;
}

/* Notes inside structure headings */
.structure-note {
    font-weight: normal;
    color: #666;
    font-size: 0.9em;
    font-style: italic;
}
/* --- Add this to your CSS file --- */
.grammar-rule-list {
    list-style-type: none; /* Removes the bullet points */
    text-align: center;
    padding-left: 0; /* Removes the default indentation */
    margin-top: 1em;
    margin-bottom: 1em;
}

.grammar-rule-list li {
    padding: 0.25em;
}
/* This will make adjectives the same color as verbs */
.grammar-adjective {
    color: #e76f51; /* Burnt Orange (same as .grammar-verb) */
    font-weight: bold;
}

/* --- FINAL MASTER GRAMMAR STYLING SHEET (User Defined) --- */
/* This block sets the definitive colors for all grammar topics. */

/* --- Core Text Components --- */

/* Subject: Bold, with no color change (black text). */
.grammar-subject {
    font-weight: bold;
    color: inherit;
}

/* Verb: A clear, distinct red. */
.grammar-verb {
    color: #D93025; /* A strong, clear red */
    font-weight: bold;
}

/* Adjective: A distinct green for good contrast with red verbs. */
.grammar-adjective {
    color: #2a9d8f; /* Teal Green */
    font-weight: bold;
}


/* --- Functional Words --- */

/* Auxiliary Verb: A clear, standard blue. */
.grammar-auxiliary {
    color: #0056b3; /* Standard Blue */
    font-weight: bold;
}

/* Pronoun: Same blue as auxiliary for consistency with function words. */
.grammar-pronoun {
    color: #0056b3; /* Standard Blue */
    font-weight: bold;
}

/* Negative: A strong red, matching the verb family. */
.grammar-negative {
    color: #c92a2a; /* A slightly deeper red */
    font-weight: bold;
}

/* Conjunctions/Linking Words: A distinct purple. */
.grammar-conjunction {
    color: #9d4edd; /* Modern Purple */
    font-weight: bold;
}


/* --- Layout & Utility Classes --- */
/* These remain unchanged */

.structure-note {
    font-weight: normal;
    color: #666;
    font-size: 0.9em;
    font-style: italic;
}

.grammar-rule-list {
    list-style-type: none;
    text-align: center;
    padding-left: 0;
    margin-top: 1em;
    margin-bottom: 1em;
}

.grammar-rule-list li {
    padding: 0.25em 0;
}

.pronoun-chart {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}

.pronoun-chart th,
.pronoun-chart td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}

.pronoun-chart th {
    background-color: #f2f2f2;
}

/* --- Add this to your Master CSS file --- */
.example-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}
.example-table th, .example-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}
.example-table th {
    background-color: #f2f2f2;
}

/* --- FINAL MASTER GRAMMAR STYLING SHEET (User Defined) --- */
/* This block sets the definitive colors for all grammar topics. */

/* --- Core Text Components --- */
.grammar-subject { font-weight: bold; color: inherit; }
.grammar-verb { color: #D93025; font-weight: bold; } /* Red */
.grammar-adjective { color: #2a9d8f; font-weight: bold; } /* Teal Green */
.grammar-adverb { color: #E67E22; font-weight: bold; } /* <--- NEW COLOR (Dark Orange) */

/* --- Functional Words --- */
.grammar-auxiliary, .grammar-pronoun { color: #0056b3; font-weight: bold; } /* Blue */
.grammar-negative { color: #c92a2a; font-weight: bold; } /* Deeper Red */
.grammar-conjunction { color: #9d4edd; font-weight: bold; } /* Purple */

/* --- Layout & Utility Classes --- */
.structure-note { font-weight: normal; color: #666; font-size: 0.9em; font-style: italic; }
.grammar-rule-list { list-style-type: none; text-align: center; padding-left: 0; margin-top: 1em; margin-bottom: 1em; }
.grammar-rule-list li { padding: 0.25em 0; }
.pronoun-chart, .example-table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.pronoun-chart th, .pronoun-chart td, .example-table th, .example-table td { border: 1px solid #ccc; padding: 8px; text-align: center; }
.pronoun-chart th, .example-table th { background-color: #f2f2f2; }