/* ================================
   Checkbox Tracker Visualizer
   ================================
   Functional CSS for interactive checkboxes.
   Survives template changes - only main.css needs replacing.

   Uses .task-list and .task-list-item classes added by JS
   for reliable cross-browser support (avoids :has() issues).
   ================================ */

/* ================================
   Task List Checkboxes
   ================================ */

/* Remove bullet points and padding from task lists */
ul.task-list {
    list-style: none;
    padding-left: 0;
}

/* Style each task list item */
li.task-list-item {
    list-style: none;
}

/* Task list item layout */
li.task-list-item {
    padding: 0.3rem 0;
    margin-bottom: 0;
}

/* Flexbox layout for checkbox + text (handles label wrapper from markdown-it-task-lists) */
li.task-list-item > label,
li.task-list-item > p {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
}

/* Direct checkbox (Hugo-style without label wrapper) */
li.task-list-item:has(> input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Style all checkboxes in task lists */
.task-list input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    border: 2px solid currentColor;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 0.2rem;
    position: relative;
    flex-shrink: 0;
    transition:
        background-color 0.15s,
        border-color 0.15s;
}

/* Checked state */
.task-list input[type="checkbox"]:checked {
    background-color: var(--accent-color, #d2691e);
    border-color: var(--accent-color, #d2691e);
}

/* Checkmark icon */
.task-list input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Hover effect */
.task-list input[type="checkbox"]:hover {
    border-color: var(--accent-color, #d2691e);
}

/* Dim checked items slightly */
li.task-list-item:has(input[type="checkbox"]:checked) {
    opacity: 0.7;
}

/* ================================
   Floating Reset Button
   ================================ */

.checkbox-reset-btn {
    /* Positioning: fixed to bottom-right corner */
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1000;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity 0.2s,
        visibility 0.2s,
        transform 0.2s;

    /* Styling */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e8dcc4);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-family: var(--font-heading, sans-serif);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-color, #333);
    cursor: pointer;
}

/* Visible state */
.checkbox-reset-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover effect */
.checkbox-reset-btn:hover {
    background: var(--footer-bg, #f5ebe0);
    border-color: var(--accent-color, #d2691e);
}

/* Icon before text */
.checkbox-reset-btn::before {
    content: "↺";
    font-size: 1rem;
}