/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.0
Description: Child-Theme fuer Hobo Lovesongs. Enthaelt das Neon-Reskin und
             die tag-gesteuerte Beitrags-Navigation. Update-sicher: das
             Eltern-Theme kann jederzeit aktualisiert werden, ohne dass
             diese Anpassungen verloren gehen.
*/

/* ===== Neon-Noir Reskin fuer Hobo Love Songs Blog ===== */

body {
  background: #08080e !important;
  color: #e8f4ff !important;
  font-family: 'Courier New', monospace !important;
}

/* Ueberschriften */
h1, h2, h3, h4, h5, h6 {
  color: #39ff9e !important;
  text-shadow: 0 0 8px rgba(57,255,158,.5), 0 0 20px rgba(57,255,158,.25);
  letter-spacing: 1px;
}

/* Links */
a {
  color: #38e6ff !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(56,230,255,.4);
  transition: color .25s ease, text-shadow .25s ease;
}
a:hover {
  color: #a8f0ff !important;
  text-shadow: 0 0 8px rgba(56,230,255,.7);
}

/* Header / Site-Titel-Bereich */
.wp-block-site-title a,
.site-title a,
header a.custom-logo-link,
header h1 a {
  color: #ff2f8e !important;
  text-shadow: 0 0 10px rgba(255,47,142,.6);
}

/* Beitragsboxen / Karten */
article, .wp-block-post,
.entry-content, .post {
  background: rgba(10,14,26,.55) !important;
  border: 1px solid rgba(56,230,255,.2) !important;
  border-radius: 6px;
  padding: 20px !important;
  margin-bottom: 24px !important;
}

/* Formularfelder (Kommentare, Suche) */
input[type="text"], input[type="email"], input[type="url"],
textarea, select {
  background: rgba(0,0,0,.4) !important;
  border: 1px solid rgba(56,230,255,.35) !important;
  color: #e8f4ff !important;
  border-radius: 4px !important;
}

/* Buttons */
button, input[type="submit"], .wp-block-button__link {
  background: rgba(10,14,26,.7) !important;
  border: 1px solid rgba(56,230,255,.5) !important;
  color: #38e6ff !important;
  border-radius: 4px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: box-shadow .3s ease, color .3s ease;
}
button:hover, input[type="submit"]:hover, .wp-block-button__link:hover {
  color: #a8f0ff !important;
  box-shadow: 0 0 16px rgba(56,230,255,.4);
}

/* Kommentarbereich */
.comment, .comment-body {
  background: rgba(10,14,26,.4) !important;
  border-left: 2px solid rgba(57,255,158,.35) !important;
  padding: 14px !important;
  margin-bottom: 14px !important;
}
.comment-author, .fn {
  color: #ffe23d !important;
}

/* Widgets / Sidebar */
.widget, aside {
  background: rgba(10,14,26,.45) !important;
  border: 1px solid rgba(56,230,255,.15) !important;
  padding: 16px !important;
  border-radius: 6px;
}

/* Trennlinien */
hr { border-color: rgba(56,230,255,.2) !important; }

/* ============================================================
   BEITRAGS-NAVIGATION (Menu / Back / Next)
   ============================================================ */
.hls-postnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px 0;
  padding: 12px 0;
  border-bottom: 1px solid rgba(56,230,255,.2);
}
.hls-postnav a,
.hls-postnav .hls-nav-disabled {
  font-family: 'Courier New', monospace !important;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 1px solid rgba(56,230,255,.4);
  border-bottom: 1px solid rgba(56,230,255,.4) !important;
  border-radius: 4px;
  padding: 8px 16px;
  transition: color .25s ease, box-shadow .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.hls-postnav a {
  color: #38e6ff !important;
}
.hls-postnav a:hover {
  color: #a8f0ff !important;
  border-color: rgba(56,230,255,.8);
  box-shadow: 0 0 14px rgba(56,230,255,.35);
  text-shadow: none !important;
}
/* Menu-Knopf hebt sich leicht ab (gruen wie die Ueberschriften) */
.hls-postnav .hls-nav-menu {
  color: #39ff9e !important;
  border-color: rgba(57,255,158,.45);
}
.hls-postnav .hls-nav-menu:hover {
  color: #a8ffcf !important;
  border-color: rgba(57,255,158,.8);
  box-shadow: 0 0 14px rgba(57,255,158,.35);
}
/* Ausgegraute Knoepfe, wenn es keinen vorherigen/naechsten Beitrag gibt */
.hls-postnav .hls-nav-disabled {
  color: rgba(150,170,190,.35);
  border-color: rgba(150,170,190,.15);
  cursor: default;
}
@media (max-width: 600px) {
  .hls-postnav a,
  .hls-postnav .hls-nav-disabled {
    font-size: 11px;
    padding: 7px 10px;
    letter-spacing: 1px;
  }
}

/* ============================================================
   MUSIK-PLAYER (identisch zur Homepage app.html)
   ============================================================ */
.hls-player { position:fixed; right:20px; bottom:20px; z-index:9999; font-family:'Orbitron',sans-serif; }
.hls-player .hls-icon {
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(56,230,255,.55); background:rgba(6,8,18,.72);
  color:#38e6ff !important; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:18px; box-shadow:0 0 16px rgba(56,230,255,.3);
  transition:box-shadow .3s ease, transform .3s ease; animation:hls-ppulse 3s ease-in-out infinite;
}
.hls-player .hls-icon:hover { transform:scale(1.06); box-shadow:0 0 26px rgba(56,230,255,.6); }
@keyframes hls-ppulse { 0%,100%{box-shadow:0 0 14px rgba(56,230,255,.3);} 50%{box-shadow:0 0 22px rgba(56,230,255,.55);} }

.hls-panel {
  position:absolute; right:0; bottom:64px; width:280px; padding:18px 18px 16px;
  background:rgba(8,10,20,.94); border:1px solid rgba(56,230,255,.4); border-radius:12px;
  box-shadow:0 0 30px rgba(0,0,0,.6); display:none;
}
.hls-panel.open { display:block; }
.hls-panel .hls-now { font-size:13px; letter-spacing:1px; color:#e8f4ff !important; margin-bottom:3px; line-height:1.4; text-shadow:none !important; }
.hls-panel .hls-artist { font-size:10px; letter-spacing:2px; color:rgba(180,205,240,.6); text-transform:uppercase; margin-bottom:14px; }
.hls-panel .hls-controls { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:14px; }
.hls-panel .hls-controls button { background:transparent !important; border:0 !important; color:#38e6ff !important; cursor:pointer; font-size:16px; padding:6px; transition:color .2s, text-shadow .2s; box-shadow:none !important; text-transform:none !important; letter-spacing:0 !important; }
.hls-panel .hls-controls button:hover { color:#a8f0ff !important; text-shadow:0 0 10px rgba(56,230,255,.8); }
.hls-panel .hls-controls .hls-big { width:44px; height:44px; border-radius:50% !important; border:1px solid rgba(56,230,255,.5) !important; display:flex; align-items:center; justify-content:center; }
.hls-panel .hls-bar { height:4px; background:rgba(120,160,200,.2); border-radius:2px; cursor:pointer; position:relative; margin-bottom:8px; }
.hls-panel .hls-bar .hls-fill { height:100%; width:0%; background:#38e6ff; border-radius:2px; box-shadow:0 0 8px rgba(56,230,255,.7); }
.hls-panel .hls-volume { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.hls-panel .hls-volume .hls-vicon { color:rgba(180,205,240,.6); font-size:13px; flex-shrink:0; }
.hls-panel .hls-volume input[type=range] {
  -webkit-appearance:none; appearance:none; flex:1; height:4px; border-radius:2px;
  background:rgba(120,160,200,.25); outline:none; cursor:pointer;
}
.hls-panel .hls-volume input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:12px; height:12px; border-radius:50%;
  background:#38e6ff; box-shadow:0 0 8px rgba(56,230,255,.8); cursor:pointer;
}
.hls-panel .hls-volume input[type=range]::-moz-range-thumb {
  width:12px; height:12px; border-radius:50%; border:0;
  background:#38e6ff; box-shadow:0 0 8px rgba(56,230,255,.8); cursor:pointer;
}
.hls-panel .hls-list { margin-top:12px; max-height:120px; overflow:auto; border-top:1px solid rgba(120,160,200,.15); padding-top:10px; }
.hls-panel .hls-list .hls-item { font-size:11px; letter-spacing:.5px; color:rgba(200,220,245,.65); padding:5px 4px; cursor:pointer; border-radius:4px; border:0 !important; }
.hls-panel .hls-list .hls-item:hover { background:rgba(56,230,255,.1); color:#e8f4ff; }
.hls-panel .hls-list .hls-item.playing { color:#38e6ff; }
.hls-panel .hls-close { position:absolute; top:8px; right:12px; color:rgba(200,220,245,.5); cursor:pointer; font-size:14px; border:0 !important; }
.hls-panel .hls-close:hover { color:#fff; }