/**
 * VMT Checkpoint shortcode styles.
 *
 * Engagement-pause widget for lesson authors — students multi-select
 * checkboxes and click Submit to reveal a solution. See class
 * VMT_Checkpoint_Shortcode for the PHP side and vmt-checkpoint.js for
 * the interaction.
 *
 * Design tokens follow the rest of vmt-core:
 *   - Teal accent #008092 (active state, button, focus ring)
 *   - Surface  #F5F4F1 (calm card background)
 *   - Border-left accent stripe to mirror the .vmt-mentor-lens
 *     callout-box pattern used elsewhere in the lesson body.
 *
 * Scoped under .vmt-checkpoint so nothing leaks into adjacent Divi /
 * LearnDash markup. No !important except where Divi's stock theme
 * styles would otherwise win.
 *
 * @package VMT_Core
 * @since   1.17.6
 */

/* ============================================================
   Container
   ============================================================ */

.vmt-checkpoint {
    margin: 2em 0;
    padding: 1.5em;
    background: #F5F4F1;
    border-left: 4px solid #008092;
    border-radius: 6px;
    /* font-size: inherit keeps the widget visually consistent with
       whatever lesson typography the host theme applies. */
    font-size: 1rem;
    line-height: 1.5;
}

.vmt-checkpoint-prompt {
    font-size: 1.05em;
    font-weight: 600;
    margin: 0 0 1em 0;
    color: #1d2327;
}

/* ============================================================
   Option list
   ============================================================ */

.vmt-checkpoint-options {
    margin: 0 0 1.25em 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

/* Each option is a full-width clickable card. The label wraps the
   checkbox so the entire row is a hit target — matters for touch
   users + accessibility. */
.vmt-checkpoint-option {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.75em 1em;
    margin: 0;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    color: #1d2327;
}

.vmt-checkpoint-option:hover {
    border-color: #008092;
}

/* Focus state on the wrapping label — applied when the inner checkbox
   gets focus, so keyboard users see a clear ring. :focus-within is the
   right primitive here; supported in all evergreen browsers. */
.vmt-checkpoint-option:focus-within {
    border-color: #008092;
    box-shadow: 0 0 0 3px rgba( 0, 128, 146, 0.25 );
}

/* Checked state — uses :has() to color the label when its checkbox is
   checked. :has() ships in all browsers VMT supports (Safari 15.4+,
   Chrome 105+); admins on the lesson side run modern browsers per the
   focus-mode design constraints. Older fallback: the input's own
   :checked accent-color (below) still visually flags the state. */
.vmt-checkpoint-option:has( input[ type="checkbox" ]:checked ) {
    background: rgba( 0, 128, 146, 0.07 );
    border-color: #008092;
}

.vmt-checkpoint-option input[ type="checkbox" ] {
    margin: 0;
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #008092;
}

/* When inputs are disabled (post-submit), the cursor change signals
   that the choice is locked. The visual state of checked-vs-unchecked
   is preserved via the browser default. */
.vmt-checkpoint-option input[ type="checkbox" ]:disabled {
    cursor: not-allowed;
}

.vmt-checkpoint-option:has( input[ type="checkbox" ]:disabled ) {
    cursor: not-allowed;
    opacity: 0.85;
}

.vmt-checkpoint-option-text {
    flex: 1 1 auto;
}

/* ============================================================
   Submit button
   ============================================================ */

.vmt-checkpoint-submit {
    display: inline-block;
    background: #008092;
    color: #fff;
    border: none;
    padding: 0.75em 2em;
    border-radius: 4px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    /* Defensive override — Divi base button styles otherwise inject a
       transparent border that misaligns padding. */
    -webkit-appearance: none;
    appearance: none;
    text-decoration: none;
}

.vmt-checkpoint-submit:hover {
    background: #006B7A;
}

/* Visible focus ring — never use `outline: none` without a replacement.
   The ring matches the option focus-within for consistency. */
.vmt-checkpoint-submit:focus,
.vmt-checkpoint-submit:focus-visible {
    background: #006B7A;
    outline: none;
    box-shadow: 0 0 0 3px rgba( 0, 128, 146, 0.4 );
}

.vmt-checkpoint-submit:active {
    background: #00566B;
}

/* ============================================================
   Reveal block (Pattern A) + hidden-sibling helper (Pattern B)
   ============================================================ */

.vmt-checkpoint-reveal {
    margin-top: 1.25em;
    padding-top: 1.25em;
    border-top: 1px solid #d0d4d7;
    /* aria-live so screen readers announce the reveal when it's
       un-display:none'd. Server renders with display:none inline. */
}

/* JS-applied to subsequent siblings of a Pattern B checkpoint while
   they're hidden. Using a CSS class (not inline style) so it's easy
   to override in special cases AND so the hide is JS-initiated only —
   non-JS browsers keep the content visible (graceful fallback). */
.vmt-checkpoint-hidden {
    display: none !important;
}

/* ============================================================
   v1.17.15 — Submit-time fade transition.

   Pattern A: the prompt + options + submit fade out; once gone,
   `.is-revealed` is added to the container to strip the checkpoint
   chrome (background, border, padding) so the reveal content reads
   as normal lesson body. The reveal block fades in to take their
   place.

   Pattern B: the whole `.vmt-checkpoint` container fades out, then
   `display:none`'s; the subsequent siblings that were JS-hidden on
   page load become visible and fade in.

   The choice of 250 ms is short enough that the page-load → Submit
   → reveal flow stays snappy, but long enough that the eye sees a
   distinct transition (rather than a jarring instant swap).
   ============================================================ */

/* Fade-out target — applied to either the interactive group's
   members (Pattern A) or the whole container (Pattern B). Uses
   transition on opacity (not @keyframes) because the element is
   already visible at opacity:1, so the property-change-triggered
   transition fires cleanly. The fade-IN side uses the Web
   Animations API (see fadeInElement() in vmt-checkpoint.js) because
   the display:none → animate race breaks CSS-transition-based
   fade-ins on freshly-shown elements. */
.vmt-checkpoint__fading-out {
    opacity: 0;
    transition: opacity 250ms ease-out;
    pointer-events: none;
}

/* Pattern A: once the interactive group has faded out and been
   display:none'd, the container should look like plain body content
   rather than a checkpoint card. Strip its decorative chrome so the
   reveal content takes the visual position the checkpoint occupied. */
.vmt-checkpoint.is-revealed {
    background: transparent;
    border-left: 0;
    border-radius: 0;
    padding: 0;
    margin: 1em 0;
}

/* Once the user has submitted, drop the interactive elements out of
   the flow entirely. Display:none rather than visibility:hidden so
   the reveal moves up to take their position with no leftover gap. */
.vmt-checkpoint__interactive--hidden {
    display: none !important;
}

/* prefers-reduced-motion: instant swap. Users who've opted out of
   motion still get the correct end state — checkpoint replaced by
   reveal — just without the fade. The JS side handles the fade-in
   reduced-motion path by setting the WAAPI duration to 0; this rule
   handles the fade-out side by neutralising its transition. */
@media ( prefers-reduced-motion: reduce ) {
    .vmt-checkpoint__fading-out {
        transition: none;
    }
}

/* ============================================================
   Mobile (single column under 768px — already single column;
   just tighten padding so the card doesn't crowd narrow viewports)
   ============================================================ */

@media ( max-width: 768px ) {
    .vmt-checkpoint {
        padding: 1.1em;
        margin: 1.5em 0;
    }
    .vmt-checkpoint-option {
        padding: 0.65em 0.85em;
    }
    .vmt-checkpoint-submit {
        width: 100%;
        text-align: center;
    }
}