/*
 * LumorowLMS Blocks — Shared CSS
 * Uses CSS custom properties so colors inherit from the LumorowLMS theme.
 * Falls back to orange defaults if the theme is not active.
 */

:root {
    --llmsb-primary:      var(--color-primary,    #f77205);
    --llmsb-primary-dk:   var(--color-primary-dk, #c45e04);
    --llmsb-primary-lt:   #f8e9c7;
    --llmsb-primary-pale: #fef6ea;
    --llmsb-dark:         #1c1c1c;
    --llmsb-mid:          #444;
    --llmsb-muted:        #6b7280;
    --llmsb-border:       #e5e7eb;
    --llmsb-correct:      #16a34a;
    --llmsb-wrong:        #dc2626;
    --llmsb-radius:       8px;
}

/* Shared block wrapper */
.llmsb-block {
    font-family: inherit;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Block title */
.llmsb-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--llmsb-primary);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.llmsb-title-icon {
    background: var(--llmsb-primary);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* Speak button (shared across vocab + flashcard) */
.llmsb-speak {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--llmsb-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity .2s;
    padding: 0;
}
.llmsb-speak:hover { opacity: .8; }
.llmsb-speak.speaking { animation: llmsb-pulse .9s infinite; }
@keyframes llmsb-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(247,114,5,.7); }
    70%  { box-shadow: 0 0 0 8px rgba(247,114,5,0);  }
    100% { box-shadow: 0 0 0 0   rgba(247,114,5,0);  }
}
.llmsb-speak svg { width: 14px; height: 14px; fill: currentColor; pointer-events: none; }

/* Check / Score
   Standard sized centered button — NOT a full-width bar. Every block's
   Check Answers button uses this. Do not override with width:100% in
   block-specific stylesheets. */
.llmsb-check-btn {
    display: block;
    margin: 20px auto 0;
    padding: 12px 38px;
    background: linear-gradient(135deg, var(--llmsb-primary), var(--llmsb-primary-dk));
    color: #fff;
    border: none;
    border-radius: var(--llmsb-radius);
    font-size: .95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .8px;
    transition: opacity .2s, filter .2s;
}
.llmsb-check-btn:hover { opacity: .9; }
.llmsb-check-btn:disabled { opacity: .45; cursor: not-allowed; }

.llmsb-score {
    margin-top: 14px;
    padding: 14px 18px;
    border-radius: var(--llmsb-radius);
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    display: none;
}
.llmsb-score.show  { display: block; }
.llmsb-score.great { background: #dcfce7; color: #166534; border: 2px solid #22c55e; }
.llmsb-score.ok    { background: var(--llmsb-primary-pale); color: #92400e; border: 2px solid var(--llmsb-primary); }
.llmsb-score.low   { background: #fee2e2; color: #991b1b; border: 2px solid #f87171; }

/* ═══════════════════════════════════════════════════════════
   GLOBAL STANDARDS — DO NOT OVERRIDE THESE WITHOUT CAUSE
   ═══════════════════════════════════════════════════════════

   RULE 1 — BUTTON COLOR
   All action buttons (submit, begin, check, next, continue, etc.)
   MUST use var(--llmsb-primary) as their background.
   Never hardcode hex colors (#1a1a2e, #16213e, etc.) on buttons.

   RULE 3 — ALWAYS RANDOMIZE ANSWER ORDER
   Words, definitions, options, and sentences pulled from any source
   (vocabulary block, AI generation, etc.) MUST be shuffled before
   display. NEVER present answers in the same order as the source.
   This applies to: fill-in-blank, matching, flashcards, MCQ options,
   word banks, and any other activity with selectable answers.
   Submit, Save, and Continue buttons must NEVER be gated on a timer.
   They should enable as soon as the student has typed any text,
   or (for MCQ/interactive blocks) as soon as any answer is selected.
   The timer is a guide, not a lock.

   Reference implementation (copy this pattern):

   textarea.addEventListener('input', function(){
       if(textarea.value.trim().length > 0) submitBtn.disabled = false;
   });

   ════════════════════════════════════════════════════════════ */

/* Enforce primary color on all LumorowLMS action buttons */
.llmsb-iwt1-begin-btn,
.llmsb-iwt1-submit-btn,
.llmsb-iwt1-continue-btn,
.llmsb-check-btn,
.llmsb-twe-submit-btn,
.llmsb-tad-submit-btn,
.llmsb-ist-start-btn,
.llmsb-tint-start-btn,
.llmsb-tlr-play-btn,
.llmsb-ct-next-btn,
.llmsb-tbs-check,
.llmsb-tcw-check,
.llmsb-trd-check,
.llmsb-tra-check {
    background: var(--llmsb-primary) !important;
    color: #fff !important;
}

/* ── Sequential task flow ─────────────────────────── */
.llmsb-seq-continue {
    display: block;
    margin: 16px auto 0;
    background: var(--llmsb-primary) !important;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 10px 36px;
    font-size: .95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.llmsb-seq-continue:hover:not(:disabled) { filter: brightness(.9); }
.llmsb-seq-continue:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
    filter: none !important;
}

/* ── Universal timer-lock state ──────────────────────
 * Applied by window.llmsbLockTimerInputs() when a block (or one of its
 * tasks) hits 0:00. Visually mutes the scope so the student knows the
 * inputs are no longer editable. Inputs inside still keep their typed
 * values via readOnly/disabled so the student can review what they had. */
.llmsb-time-locked input:not([type="submit"]):not([type="button"]),
.llmsb-time-locked textarea,
.llmsb-time-locked select {
    background: #f3f4f6 !important;
    color: var(--llmsb-muted, #6b7280) !important;
    cursor: not-allowed !important;
}
.llmsb-time-locked button[disabled] {
    opacity: .55 !important;
    cursor: not-allowed !important;
}

/* ════════════════════════════════════════════════════════════
   Global table-header contrast rule.

   Problem (v3.2.63 and earlier): table <thead> rows inside LMS
   blocks (including the new LMS Content block and per-block
   results tables) were rendering with white text on a cream/
   near-white background — almost unreadable. Cause was a mix
   of Tailwind Preflight + WP core .wp-block-table rules + theme
   table resets winning over each block's local thead styling.

   Fix: one strong global rule scoped to .llmsb-block descendants
   that wins on specificity (multiple class chain) AND uses
   !important so it beats whatever the theme or wp-block-table
   tries to apply. Background is the LMS primary orange; text is
   white. Applies to thead, thead tr, thead th, plus any custom
   "table header" pattern we use across blocks (e.g.
   .llmsb-table-header, .llmsb-*-th, the explicit header row in
   results tables). Padding + font-weight set conservatively so
   we don't redefine spacing across already-styled blocks.
   ════════════════════════════════════════════════════════════ */
.llmsb-block thead,
.llmsb-block table > thead,
.llmsb-block table > thead > tr,
.llmsb-block table > thead > tr > th,
.llmsb-block .wp-block-table thead,
.llmsb-block .wp-block-table thead tr,
.llmsb-block .wp-block-table thead th,
.llmsb-block .llmsb-table-header,
.llmsb-block .llmsb-thead-cell {
    background: var(--llmsb-primary, #f77205) !important;
    color: #fff !important;
}
.llmsb-block thead th,
.llmsb-block .wp-block-table thead th,
.llmsb-block .llmsb-table-header,
.llmsb-block .llmsb-thead-cell {
    font-weight: 700 !important;
    letter-spacing: .2px;
}

/* The editor side renders the LMS Content block under a wrapper
   that has the .llmsb-content-block class instead of .llmsb-block
   on the outer div — extend the rule so the editor preview also
   shows orange headers, not just the frontend. */
.llmsb-content-block thead,
.llmsb-content-block table > thead,
.llmsb-content-block table > thead > tr,
.llmsb-content-block table > thead > tr > th {
    background: var(--llmsb-primary, #f77205) !important;
    color: #fff !important;
}
.llmsb-content-block thead th {
    font-weight: 700 !important;
}