/*
 * Lyrics Toolbar – toolbar.css  v3.0.0
 * ============================================================
 * Styles for the fixed reading toolbar shown on single posts
 * that contain a .container lyrics block.
 * ============================================================ */

/* ── Custom properties ─────────────────────────────────────── */
:root {
  --lt-accent:  #6366f1;
  --lt-bg:      #ffffff;
  --lt-fg:      #0f172a;
  --lt-radius:  14px;
  --lt-shadow:  0 0 18px -4px rgba(0, 0, 0, 0.65);
}


/* ── Toolbar container ─────────────────────────────────────── */
.lt-lyrics-toolbar {
  position:       fixed;
  left:           50%;
  bottom:         20px;
  transform:      translate(-50%, 120%);
  display:        flex;
  align-items:    center;
  gap:            4px;
  padding:        8px 12px;
  background:     var(--lt-bg);
  color:          var(--lt-fg);
  border-radius:  var(--lt-radius);
  box-shadow:     var(--lt-shadow);
  border:         1px solid rgba(17, 24, 39, 0.07);
  z-index:        99999;
  min-width:      200px;
  max-width:      calc(100vw - 36px);
  box-sizing:     border-box;
  opacity:        0;
  transition:     transform 420ms cubic-bezier(.2, .9, .2, 1),
                  opacity   320ms ease;
  will-change:    transform, opacity;
  font-family:    system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
}


/* ── Visible / swipe-up ────────────────────────────────────── */
.lt-lyrics-toolbar.lt-visible {
  transform: translate(-50%, 0);
  opacity:   1;
}

@keyframes lt-swipe-up-bounce {
  0%   { transform: translate(-50%, 120%); }
  70%  { transform: translate(-50%, -6%);  }
  100% { transform: translate(-50%, 0);    }
}

.lt-lyrics-toolbar.lt-visible.lt-bouncy {
  animation: lt-swipe-up-bounce 480ms cubic-bezier(.2, .9, .2, 1);
}


/* ── Button group ──────────────────────────────────────────── */
.lt-lyrics-toolbar .lt-left {
  display:     flex;
  align-items: center;
  gap:         10px;
}


/* ── Individual buttons ────────────────────────────────────── */
.lt-lyrics-toolbar .lt-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  border:           none;
  background:       transparent;
  padding:          8px;
  border-radius:    8px;
  cursor:           pointer;
  color:            inherit;
  font-size:        20px;
  line-height:      1;
  transition:       background-color 150ms ease,
                    transform        120ms ease,
                    color            150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.lt-lyrics-toolbar .lt-btn:hover {
  background: rgba(99, 102, 241, 0.07);
  transform:  translateY(-2px);
}

.lt-lyrics-toolbar .lt-btn:focus-visible {
  outline:        2px solid rgba(99, 102, 241, 0.40);
  outline-offset: 3px;
}

/* Active / toggled-on state */
.lt-lyrics-toolbar .lt-btn.lt-active {
  background: rgba(99, 102, 241, 0.13);
  color:      var(--lt-accent);
}

/* Disabled state */
.lt-lyrics-toolbar .lt-btn:disabled {
  opacity:        0.32;
  cursor:         not-allowed;
  pointer-events: none;
}


/* ── Content modifiers (applied to .container) ─────────────── */

/* Bold */
.container.lt-bold,
.container.lt-bold p,
.container.lt-bold h2 {
  font-weight: bold !important;
}

/* Centre-align */
.container.lt-text-center,
.container.lt-text-center p,
.container.lt-text-center h2 {
  text-align: center !important;
}

/* Dark mode */
.container.lt-dark {
  background-color: #000a22 !important;
  color:            #e6eef8 !important;
}
.container.lt-dark h2,
.container.lt-dark p {
  color: #e6eef8 !important;
}


/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 520px) {
  .lt-lyrics-toolbar {
    min-width: 180px;
    padding:   10px 12px;
  }

  .lt-lyrics-toolbar .lt-btn {
    padding:   7px;
    font-size: 23px;
  }
}


/* ── Reduced-motion override ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lt-lyrics-toolbar {
    transition: none;
  }

  .lt-lyrics-toolbar.lt-visible.lt-bouncy {
    animation: none;
  }
}