/* assets/css/front-end.css */

.post-todo-list-item {
    margin-bottom: 20px; /* Consistent bottom margin for module lines, matching reading list */
    padding-bottom: 15px;
    border-bottom: 1px dashed #e0e0e0;
}

.post-todo-list-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.post-todo-list-item h3 {
    /* Styles for the list title - These seem to match the overall style well */
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px);
    font-style: normal;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #154734;
    border-bottom: none;
    padding-bottom: 0;
    display: block;
}

.post-todo-list-tasks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.post-todo-list-tasks li {
    display: flex;
    align-items: flex-start; /* Aligned top of checkbox with text top, matching reading list .rlc-main-line */
    padding: 0; /* Removed padding to control spacing with internal margins, matching reading list .module-line */
    color: #555; /* Base color for the li, overridden by task-text below */
    border-bottom: 1px dotted #eee;
    margin-bottom: 0 !important; /* To tighten space between tasks, similar to .rlc-main-line's margin-bottom: 0 */
}

.post-todo-list-tasks li:last-child {
    border-bottom: none;
}

.post-todo-list-tasks .task-checkbox {
    margin-right: 5px; /* Matched from .rlc-completion-checkbox for consistent spacing */
    cursor: pointer;
    border-radius: 4px; /* Rounded corners for checkbox */
    accent-color: #d0d0d0; /* Checkbox background color when checked */
    flex-shrink: 0; /* Prevent checkbox from shrinking */
    margin-top: 2px; /* Fine-tune vertical alignment with the text when using flex-start */
    min-width: unset !important; /* Override any theme/plugin min-width */
    min-height: unset !important; /* Override any theme/plugin min-height */
}

/* Match the reading list text styling exactly */
.post-todo-list-tasks .task-text {
    flex-grow: 1;
    /* Font Family: Inherit from theme like .rlc-article-title */
    line-height: 1.25; /* Matched from .rlc-main-line for consistent text vertical spacing */
    /* Font Size: Inherit from parent/theme's body style, matching .rlc-article-title's behavior */
    font-size: inherit; /* Explicitly inherit from parent/theme's body style */
    font-style: normal; /* Explicitly set to normal */
    font-weight: normal; /* Changed to normal to match .rlc-article-title's non-bold weight */
    color: #154734; /* Changed to match .module-line and .rlc-article-title's inherited color */
    margin-bottom: 0; /* Removed extra margin-bottom for tighter spacing, matching reading list */
    width: auto; /* Allow flex-grow to manage width more naturally, similar to .rlc-column-b */
    box-sizing: border-box; /* Include padding in the width calculation */
    transition: color 0.3s ease;
}

/* This rule applies when the checkbox is checked, REGARDLESS of the 'complete' class. */
/* It should be generic for 'checked' text behavior. */
.post-todo-list-tasks .task-checkbox:checked + .task-text {
    color: #a0a0a0 !important; /* Changed to #a0a0a0 to match rlc-completed-item color */
}

/* This rule handles the appearance of completed tasks. */
/* We're setting its color to the lighter grey to ensure it overrides the default */
/* text color and matches the 'checked' state. */
.post-todo-list-tasks .task-item.complete .task-text {
    text-decoration: line-through;
    color: #a0a0a0; /* Matched to rlc-completed-item color */
}

.post-todo-list-empty {
    font-style: italic;
    color: #777;
    text-align: center;
    padding: 20px;
}