/* BUILD: sf-quiz-core.css v1.1 — migrated from Customizer v10 (Quiz-only CSS) */

/* =========================================================
   EXERCISES: v3 (simplified)
   - Quiz stays perfect (your proven centering)
   - Blinking centered via NEW PHP wrapper (bf-blink-wrap)
   - Listen layout stays inline (player left of input)
   ========================================================= */

/* ---------------------------------------------------------
   1) QUIZ (KEEP — proven to work)
   --------------------------------------------------------- */
.bf-quiz .wp-block-sf-quiz-container{
  display: table !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ================================
   MOBILE QUIZ ENHANCEMENT
   (only active when .sf-quiz-enhanced exists)
   ================================ */

@media (max-width: 768px){

  /* hide native select but keep it in the DOM */
  .sf-quiz-enhanced li.wp-block-sf-quiz select{
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .sf-quiz-enhanced .sf-quiz-blank{
    display: inline-flex;
    align-items: baseline;         /* keeps arrow aligned with underline */
    vertical-align: baseline;
    cursor: pointer;
    user-select: none;
  }

  /* underline box (CSS underline, not ___ text) */
  .sf-quiz-enhanced .sf-quiz-blank .sf-quiz-blank-text{
    display: inline-block;
    min-width: 7ch;                /* stable width: avoids huge gaps for “a” */
    padding: 0 0.25em 0.05em 0.25em;
    border-bottom: 2px solid currentColor;
    line-height: 1.1;
  }

  /* default empty state */
  .sf-quiz-enhanced .sf-quiz-blank.is-empty .sf-quiz-blank-text{
    color: inherit;
  }

  /* selected answer */
  .sf-quiz-enhanced .sf-quiz-blank.has-value .sf-quiz-blank-text{
    color: #0466b1;
    font-weight: 600;
  }

  /* arrow */
  .sf-quiz-enhanced .sf-quiz-blank .sf-quiz-arrow{
    margin-left: 0.35em;
    font-size: 0.9em;
    transform: translateY(-0.02em);
    opacity: 1;
  }


/* arrow de-emphasis ONLY after user makes a choice */
.sf-quiz-enhanced .sf-quiz-blank.sf-quiz-chosen .sf-quiz-arrow{
  opacity: 0.35 !important;
}

  /* radios panel (hidden by default) */
  .sf-quiz-enhanced .sf-quiz-panel{
    display: none;
    margin-top: 0.45em;
    margin-bottom: 0.25em;
    padding: 0.55em 0.6em;
    border: none;
    border-radius: 10px;
  }

  .sf-quiz-enhanced .sf-quiz-panel.is-open{
    display: block;
  }

  .sf-quiz-enhanced .sf-quiz-option{
    display: flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.35em 0;
  }

  .sf-quiz-enhanced .sf-quiz-option input[type="radio"]{
    transform: scale(1.15);
  }

  .sf-quiz-enhanced .sf-quiz-option label{
    margin: 0;
    cursor: pointer;
  }
}


/* After checking answers: panel should open below WITHOUT covering the next item */
@media (max-width: 768px){

  .sf-quiz-enhanced li.wp-block-sf-quiz.right-answ .sf-quiz-panel.is-open,
  .sf-quiz-enhanced li.wp-block-sf-quiz.fail-answ  .sf-quiz-panel.is-open{
    position: relative !important;   /* or static */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    z-index: auto !important;
    width: 100% !important;
    background: #fff;
    display: block !important;       /* ensure it shows */
  }
}


/* ===============================
   FIX: panel becomes narrow after Check answers
   =============================== */
@media (max-width: 768px){

  /* Make sure the LI doesn't squeeze children into a narrow column */
  .sf-quiz-enhanced li.wp-block-sf-quiz.right-answ,
  .sf-quiz-enhanced li.wp-block-sf-quiz.fail-answ{
    display: block !important;
  }

  /* Force the opened panel to be a real full-width block overlay */
  .sf-quiz-enhanced li.wp-block-sf-quiz.right-answ .sf-quiz-panel.is-open,
  .sf-quiz-enhanced li.wp-block-sf-quiz.fail-answ  .sf-quiz-panel.is-open{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    min-width: 0 !important;        /* prevents flex min-width weirdness */
  }

  /* Kill any "letter-by-letter" wrapping coming from other styles */
  .sf-quiz-enhanced li.wp-block-sf-quiz.right-answ .sf-quiz-panel,
  .sf-quiz-enhanced li.wp-block-sf-quiz.fail-answ  .sf-quiz-panel,
  .sf-quiz-enhanced li.wp-block-sf-quiz.right-answ .sf-quiz-panel * ,
  .sf-quiz-enhanced li.wp-block-sf-quiz.fail-answ  .sf-quiz-panel * {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }

  /* Keep each option row sane even if parent has flex styles */
  .sf-quiz-enhanced li.wp-block-sf-quiz.right-answ .sf-quiz-option,
  .sf-quiz-enhanced li.wp-block-sf-quiz.fail-answ  .sf-quiz-option{
    width: 100% !important;
    min-width: 0 !important;
  }

  .sf-quiz-enhanced li.wp-block-sf-quiz.right-answ .sf-quiz-option label,
  .sf-quiz-enhanced li.wp-block-sf-quiz.fail-answ  .sf-quiz-option label{
    min-width: 0 !important;
  }
}

/* FIX: quiz numbers disappear after "Check answers" */
@media (max-width: 768px){

  /* Restore ordered-list numbering inside quiz blocks */
  .sf-quiz-enhanced .wp-block-sf-quiz-container ol{
    list-style: decimal !important;
    list-style-position: outside !important;
    padding-left: 1.25em !important;  /* ensures marker has space */
    margin-left: 0 !important;
  }

  /* Ensure markers are visible even if other CSS targets markers */
  .sf-quiz-enhanced .wp-block-sf-quiz-container li.wp-block-sf-quiz{
    display: list-item !important;
  }

  .sf-quiz-enhanced .wp-block-sf-quiz-container li.wp-block-sf-quiz::marker{
    color: inherit !important;
  }
}


/* =========================================================
   QUIZ ✅/❌ marker: stick to END of sentence (after the dot)
   MOBILE ONLY — desktop keeps original theme marker
   ========================================================= */
@media (max-width: 768px){

  /* Disable OLD desktop marker target — mobile only */
  .wp-block-sf-quiz-container li.wp-block-sf-quiz > div:after{
    content: none !important;
  }

  /* Sentence wrapper stays inline */
  .wp-block-sf-quiz-container li.wp-block-sf-quiz .sf-quiz-sentence{
    display: inline !important;
  }

  /* Default: show NOTHING until checked */
  .wp-block-sf-quiz-container li.wp-block-sf-quiz .sf-quiz-sentence:after{
    content: "" !important;
    display: none !important;

    margin-left: 4px !important;     /* spacing (2–6px) */
    font-family: "Font Awesome 5 Free","FontAwesome" !important;
    font-size: 20px !important;      /* size */
    font-weight: 400 !important;     /* thickness */
    line-height: 1 !important;
    vertical-align: baseline !important;
  }

  /* ✅ */
  .wp-block-sf-quiz-container li.wp-block-sf-quiz.right-answ .sf-quiz-sentence:after{
    display: inline-block !important;
    content: "\f05d" !important;
    color: #8dc63f !important;
  }

  /* ❌ */
  .wp-block-sf-quiz-container li.wp-block-sf-quiz.fail-answ .sf-quiz-sentence:after{
    display: inline-block !important;
    content: "\f00d" !important;
    color: #dc3232 !important;
  }
}


/* =========================================================
   QUIZ TOOLTIP (mobile tap open)
   ========================================================= */
.sf-quiz-explain.s_tooltip .tooltip_templates{ display: none; }
.sf-quiz-explain.s_tooltip.sf-tip-open .tooltip_templates{ display: block; }


/* =========================================================
   QUIZ: E fade on correct answers (badge fades, tooltip readable)
   ========================================================= */
.wp-block-sf-quiz-container li.wp-block-sf-quiz.right-answ .sf-quiz-explain.s_tooltip{
  opacity: 0.30;
}
.wp-block-sf-quiz-container li.wp-block-sf-quiz.right-answ .sf-quiz-explain.s_tooltip:hover,
.wp-block-sf-quiz-container li.wp-block-sf-quiz.right-answ .sf-quiz-explain.s_tooltip.sf-tip-open{
  opacity: 1 !important;
}
.sf-quiz-explain.s_tooltip .tooltip_templates,
.sf-quiz-explain.s_tooltip .tooltip_content{
  opacity: 1 !important;
}


/* =========================================================
   SCORE BANNER (above Check answers button)
   ========================================================= */
.wp-block-sf-quiz-container .sf-quiz-score-banner{
  margin: 10px 0 10px 0;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
}

.wp-block-sf-quiz-container .sf-quiz-score-banner.sf-pop{
  transform: translateY(-1px);
}


.wp-block-sf-quiz-container .sf-quiz-score-banner[data-style="ribbon"]{
  display: block;
  padding: 10px 14px 10px 26px; /* was 24px → now safe spacing */
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(4,102,177,0.12), rgba(255,152,0,0.14));
  border: 1px solid rgba(0,0,0,0.08);
  color: #111;
  font-weight: 700;
  letter-spacing: .2px;
  position: relative;
}


.wp-block-sf-quiz-container .sf-quiz-score-banner[data-style="ribbon"]::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  width:6px;
  height:60%;
  transform:translateY(-50%);
  border-radius:10px;
  background:#ff9800;
  opacity:.9;
}


/* =========================================================
   SCORE BANNER: align left + add more space from the 10th quiz
   ========================================================= */
.wp-block-sf-quiz-container .sf-quiz-score-banner{
  text-align: left !important;     /* force left alignment */
  margin-top: 24px !important;     /* more space from the last quiz */
  margin-bottom: 10px !important;
}


/* =========================================================
   QUIZ: FINAL spacing/alignment for E + ✅/❌
   (desktop + mobile; this is the single source of truth)
   ========================================================= */

/* E badge */
.wp-block-sf-quiz-container li.wp-block-sf-quiz .sf-quiz-explain.s_tooltip{
  margin-left: 2px !important;     /* distance sentence → E */
  vertical-align: baseline !important;
  position: relative;
  top: 0px;
}

/* ✅/❌ marker */
.wp-block-sf-quiz-container li.wp-block-sf-quiz .sf-quiz-sentence:after{
  margin-left: 2px !important;     /* distance E → marker */
  vertical-align: baseline !important;
  position: relative;
  top: 0px;                        /* tiny down shift to match E baseline */
}

/* Mobile tweak */
@media (max-width: 768px){
  .wp-block-sf-quiz-container li.wp-block-sf-quiz .sf-quiz-explain.s_tooltip{
    margin-left: 0px !important;
    top: 0px;
  }
  .wp-block-sf-quiz-container li.wp-block-sf-quiz .sf-quiz-sentence:after{
    margin-left: 2px !important;
    top: 1.5px;
  }
  .sf-quiz-enhanced .sf-quiz-blank{
    white-space: nowrap;
  }
}


/* =========================================================
   DESKTOP ONLY: align old theme ✅/❌ marker (div:after)
   - fixes vertical baseline + spacing to match E
   ========================================================= */
@media (min-width: 769px){

  /* the marker itself (default + right/wrong inherit this) */
  .wp-block-sf-quiz-container li.wp-block-sf-quiz > div:after{
    display: inline-block !important;
    margin-left: 2px !important;          /* distance E → marker */
    position: relative !important;
    top: 2px !important;                  /* <-- change 0–3px to taste */
    vertical-align: baseline !important;
    line-height: 1 !important;
  }

  /* optional: if the E badge needs its own tiny nudge on desktop */
  .wp-block-sf-quiz-container li.wp-block-sf-quiz .sf-quiz-explain.s_tooltip{
    margin-left: 0px !important;          /* distance sentence → E */
    position: relative !important;
    top: 0px !important;                  /* <-- usually keep 0 */
    vertical-align: baseline !important;
  }
}


/* =========================================================
   QUIZ: "Check answers" button — premium style (robust)
   Applies whether button is ".btn.btn-check" OR just ".btn"
   ========================================================= */
.wp-block-sf-quiz-container .btn.btn-check,
.wp-block-sf-quiz-container .btn{
  border: 2px solid rgba(0,0,0,.10) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font: inherit !important;
  line-height: 1 !important;
  cursor: pointer !important;
  user-select: none !important;

  background: rgba(4,102,177,0.10) !important;
  color: #0466b1 !important;

  transition: transform .06s ease, background-color .15s ease, box-shadow .15s ease !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.12) !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  position: relative !important;
  top: 12px !important;
  margin-top: 0 !important;
}

.wp-block-sf-quiz-container .btn.btn-check:hover,
.wp-block-sf-quiz-container .btn:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.12) !important;
}

.wp-block-sf-quiz-container .btn.btn-check:active,
.wp-block-sf-quiz-container .btn:active{
  transform: translateY(0) !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.16) !important;
}


/* =========================================================
   QUIZ: hide "Check answers" button after auto-check
   ========================================================= */
.wp-block-sf-quiz-container.sf-quiz-checked .btn.btn-check,
.wp-block-sf-quiz-container.sf-quiz-checked .btn{
  display: none !important;
}