/* ============================================================================
   LRC STUDIO – Custom Styles
   Ergänzt Tailwind-Utilities um Dinge, die @apply / Keyframes brauchen.
   ============================================================================ */

/* --- Mobile-First-Basis: verhindert horizontales Scrollen der GESAMTEN Seite ---
   Das ist ein SICHERHEITSNETZ, kein Ersatz für die gezielten Fixes an
   einzelnen Elementen (z.B. fehlendes truncate/word-break bei langem
   Songtext) - ein zu breites Element würde mit dieser Regel zwar nicht mehr
   die ganze Seite verschiebbar machen, könnte aber innerhalb seines
   Containers trotzdem abgeschnitten/falsch aussehen. Die eigentliche
   Ursache (Inhalt breiter als der Viewport) muss trotzdem pro Element
   behoben werden - siehe .lyric-line unten und die index.php-Anpassungen. */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Verhindert, dass ein einzelnes, überlanges Wort (z.B. im Word-Mode-Songtext,
   ohne Leerzeichen zum Umbrechen) ein Element breiter als seinen Container
   macht - das war die konkrete Ursache für seitliches "Wegrutschen" des
   Contents auf Mobile beim Tippen/Scrollen (siehe Bug-Report). word-break
   bricht im Notfall MITTEN im Wort um, overflow-wrap ist der modernere,
   gleichbedeutende Name dafür - beide gesetzt für maximale Browser-Kompatibilität. */
.lyric-line {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

@keyframes pulse-rec {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.rec-dot {
  animation: pulse-rec 1.5s ease-in-out infinite;
}

/* Karaoke-Zeilen: weicher Übergang beim Zeilenwechsel */
.lyric-line {
  transition: all 0.25s ease-out;
}

/* Wort-Highlight im Word-Mode (aktuell zu taggendes Wort) */
.word-active {
  text-decoration: underline;
  text-decoration-color: #818cf8; /* indigo-400 */
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.word-tagged {
  color: #34d399; /* emerald-400 */
}

.transport-btn {
  background-color: #1e293b; /* slate-800 */
  transition: background-color 0.15s ease;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}
.transport-btn:hover {
  background-color: #334155; /* slate-700 */
}

.transport-btn-primary {
  background-color: #4f46e5; /* indigo-600 */
  transition: background-color 0.15s ease;
  width: 3rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.transport-btn-primary:hover {
  background-color: #6366f1; /* indigo-500 */
}

.transport-btn:disabled,
.transport-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Zentraler Footer (partials/site-footer.php) – auf ALLEN App-Seiten --- */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid #1e293b; /* slate-800 */
  color: #64748b; /* slate-500 */
  font-size: 0.8rem;
}
.site-footer-links {
  display: flex;
  gap: 1rem;
}
.site-footer-links a {
  color: #64748b;
}
.site-footer-links a:hover {
  color: #94a3b8; /* slate-400 */
}

/* --- Zentrales Logo (partials/brand-logo.php) – auf ALLEN Seiten gleich,
   damit ein künftiger SVG-Tausch nur in brand-logo.php passieren muss --- */
.brand-logo {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f8fafc; /* slate-50 */
}
.brand-logo-accent {
  color: #818cf8; /* indigo-400 */
}