/* BUILD: sf-listen.css v1.1.1 — 18 - 03 - 2026
   Scope
   Styling specific to the Listen exercise block.

   Responsibilities
   - Desktop alignment adjustments for Listen columns
   - Mobile layout corrections for audio + input + result bars
   - Placement of green result markers under the input field
   - Removal of completion checkmark icon
   - Tooltip stacking and overflow fixes on mobile
   - Small visual exercise number in the top-right of each Listen block

   Tooltip Behavior
   - Ensures translation tooltip renders correctly on mobile
   - Prevents overlay stripe caused by tooltip wrapper layers
   - Keeps tooltip readable while preserving original style

   Maintenance Note
   These rules were extracted from Customizer CSS to isolate
   Listen-specific layout logic and reduce cross-exercise conflicts.
*/
/* =========================================
   LISTEN: Desktop-only nudge + mobile reset
   ========================================= */

/* Mobile first: NO nudge */
.wp-block-columns.bf-listen{
  left: 0 !important;
  padding-left: 0 !important;
}

/* Desktop (adjust breakpoint if you want) */
@media (min-width: 992px){
  .wp-block-columns.bf-listen{
    position: relative !important;
    left: 155px !important;  /* your working value */
  }
}

/* =========================================
   LISTEN (MOBILE): put green bars under INPUT (not under play button)
   ========================================= */
@media (max-width: 768px){

  .wp-block-sf-listen.listen-shortcode{
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0 !important;
    row-gap: 6px !important;
    align-items: center !important;
  }

  .wp-block-sf-listen.listen-shortcode .audio-player{
    grid-column: 1;
    grid-row: 1;
    margin: 0 !important;
  }

  .wp-block-sf-listen.listen-shortcode .answer-contaiern{
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    width: 100% !important;
  }

  .wp-block-sf-listen.listen-shortcode .results-block{
    grid-column: 2;
    grid-row: 2;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* LISTEN (mobile): pull the green dashes up closer to the input */
@media (max-width: 768px){
  .wp-block-sf-listen.listen-shortcode .results-block{
    margin-top: -7px !important;
    padding-top: 0 !important;
  }
}

/* LISTEN: remove the completion check mark everywhere */
.wp-block-sf-listen.listen-shortcode .results-block.completed::after{
  display: none !important;
  content: none !important;
}

/* =========================================================
   DESKTOP ONLY (>= 769px):
   Make LISTEN use "dashes under input" logic
   ========================================================= */
@media (min-width: 769px){

  .wp-block-sf-listen.listen-shortcode{
    display: grid !important;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0 !important;
    row-gap: 2px !important;
    align-items: center !important;
  }

  .wp-block-sf-listen.listen-shortcode .audio-player{
    grid-column: 1;
    grid-row: 1;
    margin: 0 !important;
  }

  .wp-block-sf-listen.listen-shortcode .answer-contaiern{
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .wp-block-sf-listen.listen-shortcode .results-block{
    grid-column: 2;
    grid-row: 2;
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
    clear: none !important;
    text-align: left !important;
    justify-self: start !important;
    align-self: start !important;
  }

  .wp-block-sf-listen.listen-shortcode .results-block .mark{
    width: 14px !important;
    height: 5px !important;
    margin: 0 2px 6px 0 !important;
    border-radius: 2px !important;
    float: none !important;
  }

  .wp-block-sf-listen.listen-shortcode .answer-contaiern,
  .wp-block-sf-listen.listen-shortcode .answer-container{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .wp-block-sf-listen.listen-shortcode .answer-contaiern input,
  .wp-block-sf-listen.listen-shortcode .answer-container input{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .wp-block-sf-listen.listen-shortcode .audio-player{
    margin-right: 0 !important;
  }
}


/* LISTEN — translation tooltip trigger */

.wp-block-sf-listen.listen-shortcode .answer-contaiern,
.wp-block-sf-listen.listen-shortcode .answer-container{
  position: relative;
}

.wp-block-sf-listen.listen-shortcode .sf-listen-translation-trigger{
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wp-block-sf-listen.listen-shortcode .answer-contaiern input,
.wp-block-sf-listen.listen-shortcode .answer-container input{
  padding-right: 34px !important;
  box-sizing: border-box !important;
}


.wp-block-sf-listen.listen-shortcode .sf-listen-translation-trigger,
.blinking-button-question-wrap .sf-blink-translation {
  background-color: rgba(0,102,204,0.20) !important;
  border-color: rgba(0,102,204,0.20) !important;
  color: #ffffff !important;
}


/* =========================================================
   LISTEN (mobile): Fix black overlay stripe on tooltip

   On real mobile devices, the Listen tooltip skin can render
   a dark overlay above the translation text. DevTools mobile
   emulation does not reproduce it reliably.

   This mobile-only fix keeps the tooltip readable by:
   1) preserving overflow visibility
   2) keeping the trigger above nearby UI
   3) disabling only the wrapper pseudo-layers that can act
      like an overlay inside Listen
   4) styling the actual tooltip text box directly

   Scope:
   - Listen only
   - Mobile only
   - Does not affect Blinking or other tooltip usages
   ========================================================= */

@media (max-width:768px){

  .wp-block-sf-listen.listen-shortcode,
  .wp-block-sf-listen.listen-shortcode .answer-contaiern{
    overflow: visible !important;
  }

  .wp-block-sf-listen.listen-shortcode .sf-listen-translation-trigger{
    z-index: 20 !important;
  }

  .wp-block-sf-listen.listen-shortcode .sf-listen-translation-trigger .tooltip_templates{
    overflow: visible !important;
    max-width: calc(100vw - 24px) !important;
  }

  .wp-block-sf-listen.listen-shortcode .sf-listen-translation-trigger .tooltip_templates:before,
  .wp-block-sf-listen.listen-shortcode .sf-listen-translation-trigger .tooltip_templates:after{
    content: none !important;
    display: none !important;
  }

.wp-block-sf-listen.listen-shortcode .sf-listen-translation-trigger .tooltip_content{
  position: relative !important;
  z-index: 9999 !important;
  display: inline-block !important;
  max-width: calc(100vw - 24px) !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  box-sizing: border-box !important;
}

}


.wp-block-sf-listen.listen-shortcode .answer-contaiern input[readonly],
.wp-block-sf-listen.listen-shortcode .answer-container input[readonly]{
  caret-color: transparent !important;
}



/* =========================================================
   LISTEN: visual exercise number
   - small round badge
   - top-right of the answer/input area
   - independent class so Listen can be styled separately
   ========================================================= */

.wp-block-sf-listen.listen-shortcode .answer-contaiern,
.wp-block-sf-listen.listen-shortcode .answer-container{
  position: relative !important;
}

.wp-block-sf-listen.listen-shortcode .sf-listen-ex-num{
  position: absolute;
  top: 2px;
  right: 8px;
  z-index: 6;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 19px;
  height: 19px;
  border-radius: 999px;

  background: rgba(49, 130, 206, 0.12);
  color: rgba(45, 55, 72, 0.80) !important;
  border: 1px solid rgba(49, 130, 206, 0.20);

  font-family: "Days One", sans-serif;
  font-size: 9px;
  font-weight: 400;
  line-height: 1;

  box-sizing: border-box;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 768px){
  .wp-block-sf-listen.listen-shortcode .sf-listen-ex-num{
    top: 2px;
    right: 6px;
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
}
/* =========================================================
   QA-05 candidate 1.5.2 — iOS completed Listen T tap target
   On a completed Listen item, the answer is read-only and the
   T tooltip trigger sits over/next to it. Block hit-testing on
   the completed input, not on the T control, so Safari cannot
   select/refocus the completed answer instead of opening T.
   Keep incomplete answers and the shared T/E engine unchanged.
   ========================================================= */
.wp-block-sf-listen.listen-shortcode .answer-contaiern input[readonly],
.wp-block-sf-listen.listen-shortcode .answer-container input[readonly]{
  pointer-events: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
.wp-block-sf-listen.listen-shortcode .sf-listen-translation-trigger{
  pointer-events: auto !important;
  touch-action: manipulation;
}