/* assets/css/individual_puzzles.css */

#individual-puzzles-container {
    margin-top: 20px;
}

.puzzle-entry {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f9f9f9;
}

.puzzle-entry h3 {
    margin-top: 0;
    font-size: 1.5em;
}

.puzzle-entry h3 a {
    text-decoration: none;
    color: #007bff;
}

.puzzle-entry h3 a:hover {
    text-decoration: underline;
}

.puzzle-author {
    font-style: italic;
    color: #555;
    margin-top: -10px; /* Adjust to pull it closer to the title */
    margin-bottom: 15px;
    font-size: 0.9em;
}

.puzzle-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.puzzle-image-container {
    flex: 1 1 200px; /* Allow flex grow, basis 200px */
    max-width: 250px;
}

.puzzle-image-container img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.puzzle-details {
    flex: 2 1 300px; /* Allow flex grow more, basis 300px */
}

.puzzle-details h4 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1.1em;
    color: #333;
}

.puzzle-details pre, .puzzle-details div {
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #eee;
    white-space: pre-wrap; /* Ensures text wraps in <pre> */
    word-wrap: break-word;
    font-size: 0.9em;
    max-height: 200px;
    overflow-y: auto;
}

.prompt-accordion button.accordion-toggle {
    background-color: #007bff;
    color: white;
    cursor: pointer;
    padding: 10px 15px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    font-size: 1.1em;
    margin-top: 15px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.prompt-accordion button.accordion-toggle:hover {
    background-color: #0056b3;
}

.prompt-accordion button.accordion-toggle.active {
    background-color: #0056b3;
}

.prompt-accordion .accordion-content {
    padding: 0 15px;
    background-color: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}

.prompt-accordion .accordion-content pre {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.75rem;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875em;
    white-space: pre-wrap;       /* CSS3 */
    word-wrap: break-word;     /* Internet Explorer 5.5+ */
    overflow-x: auto;          /* Add scrollbars if content overflows */
}

.prompt-accordion .copy-prompt-button {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 8px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 0.9em;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.prompt-accordion .copy-prompt-button:hover {
    background-color: #218838;
}

/* Styles for Solution Accordion (can reuse .prompt-accordion styles) */
.solution-accordion button.accordion-toggle {
    background-color: #17a2b8; /* A different color for distinction */
}

.solution-accordion button.accordion-toggle:hover,
.solution-accordion button.accordion-toggle.active {
    background-color: #117a8b;
}

.solution-accordion .accordion-content pre {
    background-color: #f8f9fa; /* Consistent with prompt pre */
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.75rem;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875em;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    max-height: 400px; /* Allow a bit more space for solutions */
    overflow-y: auto;
}