/* ==========================================================================
   JM Secure Audio Player (JMSAP)
   Default baseline + theme variants

   Goals:
   - Clean, theme-friendly, predictable layout
   - No bounce (status/title bar reserves space; audio reserves pre-Plyr height)
   - Multiple players can coexist nicely on one page
   - Themes activated via custom asset classes (e.g., jmsap-teal, jmsap-elegant)
   ========================================================================== */


/* ==========================================================================
   1) Player wrapper: layout + shared theming controls
   ========================================================================== */

.jmsap-player {
  /* Layout */
  width: 100%;
  max-width: 100%;
  margin: 0px auto 20px auto;
  padding: 14px 10px 0 10px;

  /* Theme knobs (themes override these variables) */
  --jmsap-bg: #333;
  --jmsap-radius: 10px;
  --jmsap-status-bg: rgba(255, 255, 255, 0.06);

  /* Inner surfaces (title/status bar + controls bar) */
  --jmsap-inner-radius: 5px;

  /* Border knobs (default is off, but ready when you want it) */
  --jmsap-border-width: 0px;
  --jmsap-border-style: solid;
  --jmsap-border-color: rgba(255, 255, 255, 0.18);

  /* Plyr accent */
  --plyr-color-main: #007777;

  /* "Audio" label badge (applies to ALL themes) */
  --jmsap-label-text: "Audio";
  --jmsap-label-color: rgba(224, 210, 173, 0.95); /* soft gold / sand */
  --jmsap-label-bg: var(--jmsap-bg);              /* looks like it grows out of the card */
  --jmsap-label-font-size: 14px;
  --jmsap-label-font-weight: 500;
  --jmsap-label-letter-spacing: 0.14em;
  --jmsap-label-padding-y: 4px;
  --jmsap-label-padding-x: 10px;

  background: var(--jmsap-bg);
  border: var(--jmsap-border-width) var(--jmsap-border-style) var(--jmsap-border-color);
  border-radius: var(--jmsap-radius);
}


/* ==========================================================================
   2) Top label badge: "Audio" (CSS-only)
   - Does NOT affect centering of the title/status bar.
   - Decorative/UX cue so people instantly recognize the component.
   ========================================================================== */

.jmsap-player {
  position: relative;
  padding-top: 14px; /* room for the badge "tab" */
}

.jmsap-player::before {
  content: var(--jmsap-label-text);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);

  display: inline-block;
  padding: var(--jmsap-label-padding-y) var(--jmsap-label-padding-x);

  border-radius: 999px;
  background: var(--jmsap-label-bg);
  color: var(--jmsap-label-color);

  font-size: var(--jmsap-label-font-size);
  font-weight: var(--jmsap-label-font-weight);
  line-height: 1;
  letter-spacing: var(--jmsap-label-letter-spacing);
  text-transform: uppercase;

  /* Subtle lift so it reads as a "tab" without being glitzy */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);

  pointer-events: none;
}


/* ==========================================================================
   3) Audio element: prevent native UI flash + reserve height pre-Plyr
   ========================================================================== */

.jmsap-player .jmsap-audio {
  width: 100%;
  max-width: 100%;
  display: block;

  /* Hide native controls until Plyr is ready */
  visibility: hidden;

  /* Reserve space so Plyr controls don't cause layout shift */
  height: 40px; /* approximate Plyr control height */
}

.jmsap-player.is-ready .jmsap-audio {
  visibility: visible;
  height: auto;
}


/* ==========================================================================
   4) Plyr: keep it full width + unify control bar background
   ========================================================================== */

.jmsap-player .plyr {
  width: 100%;
}

/* Controls bar */
.jmsap-player .plyr--audio .plyr__controls {
  background: var(--jmsap-bg);
  color: #fff;

  /* Inner surfaces should feel inset, not echo the outer card */
  border-radius: var(--jmsap-inner-radius);

  /* Desktop padding (mobile override below) */
  padding: 4px 12px;
}

/*
  Prevent site-level button focus styles (often a highlight yellow) from leaking
  into Plyr icons after a mouse click.

  We want Plyr button icons to inherit the player theme color
  (set on .plyr__controls), even while focused.
*/
.jmsap-player .plyr--full-ui .plyr__control {
  color: inherit;
}

.jmsap-player .plyr--full-ui .plyr__control:focus {
  color: inherit !important;
}

/* Slightly soften the progress rail so the accent pops */
.jmsap-player .plyr__progress input[type="range"] {
  opacity: 0.95;
}


/* ==========================================================================
   5) Status / Title bar (NO BOUNCE)
   - Always reserves space
   - Hidden until we have content, but still takes up height
   ========================================================================== */

.jmsap-player .jmsap-status {
  display: block;
  visibility: hidden;
  pointer-events: none;

  font-size: 18px;
  line-height: 1;
  min-height: 36px;

  margin: 0 0 8px 0;
  padding: 10px 10px 2px 10px;

  /* Inner surfaces should feel inset, not echo the outer card */
  border-radius: var(--jmsap-inner-radius);

  text-align: center;

  background: var(--jmsap-status-bg);
  color: #fff;
}

/* When we have something to show */
.jmsap-player .jmsap-status.is-loading,
.jmsap-player .jmsap-status.is-error,
.jmsap-player .jmsap-status.is-title {
  visibility: visible;
}

.jmsap-player .jmsap-status.is-loading {
  opacity: 0.95;
}

/* Error state: clickable */
.jmsap-player .jmsap-status.is-error {
  opacity: 0.98;
  pointer-events: auto;
  cursor: pointer;
  background: rgba(150, 0, 0, 0.35);
  color: #fff;
}

/* Title state */
.jmsap-player .jmsap-status.is-title {
  opacity: 1;
}

/* Prefix/title spans (added by JS) */
.jmsap-player .jmsap-status .jmsap-status-prefix {
  font-weight: 400;
  opacity: 0.9;
}

.jmsap-player .jmsap-status .jmsap-status-title {
  font-weight: 600;
}


/* ==========================================================================
   6) Stop button: keep SVG crisp; make hit area intentionally smaller
   ========================================================================== */

.jmsap-player .jmsap-stop svg {
  display: block;
}

/* Tighten hit area for Stop / Reset button */
.jmsap-player .plyr__control.jmsap-stop {
  padding: 2px;
  min-width: auto;
  min-height: auto;
}


/* ==========================================================================
   7) Accessibility: baseline focus ring (themes may override)
   ========================================================================== */

.jmsap-player .plyr button:focus-visible,
.jmsap-player .plyr input:focus-visible {
  outline: 2px solid var(--plyr-color-main);
  outline-offset: 2px;
}

/* Remove focus outline for mouse/touch interaction */
.jmsap-player .plyr button:focus:not(:focus-visible),
.jmsap-player .plyr input:focus:not(:focus-visible) {
  outline: none;
}


/* ==========================================================================
   8) Small screens: mobile behavior + spacing
   ========================================================================== */

@media (max-width: 767px) {
  /* Hide volume slider + mute on small screens */
  .jmsap-player .plyr__volume,
  .jmsap-player button[data-plyr="mute"] {
    display: none !important;
  }

  .jmsap-player .jmsap-status {
    margin-bottom: 6px;
  }

  .jmsap-player .plyr--audio .plyr__controls {
    padding: 8px 12px;
  }
}





/* ==========================================================================
   THEMES
   Add theme class in the asset "Custom classes" field:
   - jmsap-charcoal-crimson
   - jmsap-teal
   - jmsap-elegant
   ========================================================================== */


/* ==========================================================================
  Theme: Charcoal
  Default Theme, charcoal gray.
  Class: [no class needed]
  ========================================================================== */



/* ==========================================================================
  Theme: Charcoal Crimson
  Changes status bar background of default theme to deep red all the
  time, not just on error.
  Class: jmsap-charcoal-crimson
  ========================================================================== */

  .jmsap-player.jmsap-charcoal-crimson {
    --jmsap-status-bg: rgba(150, 0, 0, 0.35);
  }


  
/* ==========================================================================
   Theme: Teal
   Class: jmsap-teal
   ========================================================================== */

.jmsap-player.jmsap-teal {
  --jmsap-bg: #007777;

  /* Teal theme uses white as the Plyr accent */
  --plyr-color-main: #ffffff;

  /* Label tuned for teal background */
  --jmsap-label-bg: var(--jmsap-bg);
  --jmsap-label-color: rgba(255, 255, 255, 0.95);
}

/* Teal theme: Plyr uses --plyr-color-main for hover bg; ours is white, so force a dark hover bg */
.jmsap-player.jmsap-teal .plyr--full-ui .plyr__control:hover {
  background: rgba(0, 0, 0, 0.18);
  color: #ffffff;
}

/* Keep keyboard focus visible against teal */
.jmsap-player.jmsap-teal .plyr button:focus-visible,
.jmsap-player.jmsap-teal .plyr input:focus-visible {
  outline-color: #ffffff;
}

/* Optional: make the status bar contrast just a touch on teal */
.jmsap-player.jmsap-teal .jmsap-status {
  background: rgba(0, 0, 0, 0.10);
}



/* ==========================================================================
   Theme: Elegant
   Class: jmsap-elegant
   ========================================================================== */

.jmsap-player.jmsap-elegant {
  /* Card surface */
  --jmsap-bg: #F6F2E8;
  --jmsap-radius: 12px;

  /* Border + depth */
  --jmsap-border-width: 1px;
  --jmsap-border-color: rgba(0, 0, 0, 0.10);

  /* Plyr active accent (site teal) */
  --plyr-color-main: #007777;

  /* Label tuned for light card */
  --jmsap-label-bg: var(--jmsap-bg);
  --jmsap-label-color: #B8A06A;
  --jmsap-label-font-size: 14px;
  --jmsap-label-font-weight: 600;
  --jmsap-label-letter-spacing: 0.12em;

  /* Slightly roomier padding reads “premium” on white */
  padding: 10px;

  /* Soft lift (not glitzy) */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Subtle legibility lift for the label on ivory */
.jmsap-player.jmsap-elegant::before {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* A tiny “gilded” whisper line — quiet grounding */
.jmsap-player.jmsap-elegant::after {
  content: "";
  display: block;
  height: 3px;
  margin: 9px 0 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(224, 210, 173, 0.0),
    rgba(224, 210, 173, 0.8),
    rgba(224, 210, 173, 0.0)
  );
}

/* Status/title bar */
.jmsap-player.jmsap-elegant .jmsap-status {
  background: rgba(0, 0, 0, 0.03);
  color: #1f2a2a;

  /* Vertical rhythm: a bit more air above, closer to controls below */
  margin-top: 6px;
  margin-bottom: 3px;

  /* Nudge text up slightly */
  padding-top: 9px;
}

.jmsap-player.jmsap-elegant .jmsap-status .jmsap-status-prefix {
  color: rgba(0, 0, 0, 0.55);
  font-weight: 400;
}

.jmsap-player.jmsap-elegant .jmsap-status .jmsap-status-title {
  color: #0f2f2f;
  font-weight: 600;
}

/* Controls tray */
.jmsap-player.jmsap-elegant .plyr--audio .plyr__controls {
  background: rgba(0, 0, 0, 0.04);
  color: #203030;
}

/* Ensure range fills show teal (some browsers rely on `color`) */
.jmsap-player.jmsap-elegant .plyr--full-ui input[type="range"] {
  color: #007777;
}

/* Ensure SVG icons follow text color (without making some icons look "bold") */
.jmsap-player.jmsap-elegant .plyr__control svg {
  fill: currentColor;
  stroke: none;
}

/* Hover + pressed toggles: white-on-teal */
.jmsap-player.jmsap-elegant .plyr--full-ui .plyr__control:hover,
.jmsap-player.jmsap-elegant .plyr--full-ui .plyr__control[aria-pressed="true"],
.jmsap-player.jmsap-elegant .plyr--full-ui .plyr__control.plyr__control--pressed {
  background: #007777;
  color: #ffffff !important;
}

/* Elegant: ensure mute hover works even when not muted */
.jmsap-player.jmsap-elegant .plyr--full-ui button[data-plyr="mute"]:hover {
  background: #007777 !important;
  color: #ffffff !important;
}

/* When un-pressed but still focused after click, keep normal appearance */
.jmsap-player.jmsap-elegant .plyr--full-ui button[data-plyr="mute"]:focus:not(:focus-visible):not(:hover):not([aria-pressed="true"]):not(.plyr__control--pressed) {
  background: transparent;
  color: #203030 !important;
}

/* Elegant theme: prevent sticky mouse-focus visuals after click when pointer leaves */
.jmsap-player.jmsap-elegant .plyr--full-ui .plyr__control:focus:not(:focus-visible):not(:hover) {
  background: transparent !important;
  color: #203030 !important;
}

/* Focus behavior handled at the baseline level via :focus-visible */