/*
Theme Name: JHBL Splash Full
Theme URI: https://jhbl.net/
Author: jhbl
Description: Futuristic space splash theme with starfield background, glowing ripple interactions, and polished blog/post styles.
Version: 1.1.0
Text Domain: jhbl-splash-full
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, custom-colors, custom-menu, threaded-comments, one-column
*/

:root{
  --space:#05070d;
  --accent:#5b9cff;
  --accent2:#6ee7b7;
  --link:#7fbfff;
  --link-hover:#a6e3ff;
  --btn-bg:#1a1f2f;
  --btn-border:#5b9cff;
  --btn-hover:#6ee7b7;
  --text:#e6ebff;
  --muted:#aab4d6;
}

html,body{height:100%}
body{
  margin:0; min-height:100vh; overflow-x:hidden;
  background: radial-gradient(1200px 800px at 70% 20%, #0a0f1d, var(--space));
  font-family:'Roboto', sans-serif;
  color:var(--text);
  line-height:1.65;
}

/* Accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .wp-block-button__link:focus-visible {
  outline:3px solid var(--accent2);
  outline-offset:2px;
  border-radius:6px;
}
.skip-link {position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus {left:1rem; top:1rem; width:auto; height:auto; z-index:9999; background:#0c1230; color:#fff; padding:.5rem .75rem; border-radius:.5rem;}

canvas#starfield{position:fixed; inset:0; z-index:1; display:block;}
.nebula{position:fixed; inset:-20%; z-index:2; pointer-events:none;
  background:
    radial-gradient(600px 500px at 20% 70%, rgba(91,156,255,.20), transparent 60%),
    radial-gradient(800px 600px at 80% 30%, rgba(110,231,183,.10), transparent 60%),
    radial-gradient(1000px 800px at 40% 20%, rgba(204,0,255,.08), transparent 60%);
  filter: blur(8px) saturate(120%);
  opacity:.9;
}

header.site-header{position:relative; z-index:5; text-align:center; padding:2rem 1rem;}
.site-title{font-family:'Orbitron','Audiowide',sans-serif; font-size:2.2rem; letter-spacing:0.25em; text-shadow:0 0 18px var(--accent), 0 0 42px var(--accent2);} 
.site-description{color:var(--muted)}

nav.site-nav{margin-top:.75rem}
nav.site-nav ul{list-style:none; padding:0; display:flex; gap:1rem; justify-content:center}
nav.site-nav a{color:#cfe3ff; text-decoration:none; padding:.35rem .65rem; border-radius:.4rem; border:1px solid transparent}
nav.site-nav a:hover{border-color:rgba(91,156,255,.6); box-shadow:0 0 10px rgba(91,156,255,.35)}

main.site-content{position:relative; z-index:5; max-width:960px; margin:0 auto; padding:2rem; background:rgba(0,0,0,0.55); border-radius:1rem;}

/* List (archive/home) cards */
.post{margin-bottom:3rem; background:rgba(25,25,35,0.82); padding:1.5rem; border-radius:0.75rem; transition: box-shadow 0.4s ease, transform 0.4s ease; animation: fadeInUpGlow .55s ease both; position:relative; overflow:hidden;}
.post:hover{box-shadow:0 0 22px rgba(91,156,255,0.45); transform: translateY(-4px);} 
.post h2{font-weight:700; margin-top:0}
.post h2 a{color:#fff; text-decoration:none; text-shadow:0 0 8px var(--accent);} 
.post .meta{font-size:.9rem; color:var(--muted); margin-bottom:.75rem}
.post .read-more{display:inline-block; margin-top:.75rem}

/* Single post typography */
.entry-single{background:rgba(20,20,32,.82); padding:2rem; border-radius:1rem; animation: fadeInUpGlow .6s ease both}
.entry-single h1{font-family:'Roboto', sans-serif; font-weight:700; font-size:2.1rem; margin:0 0 .5rem}
.entry-single .single-meta{color:var(--muted); margin-bottom:1rem}
.entry-single h2, .entry-single h3, .entry-single h4{margin-top:1.6rem}
.entry-single p{margin:1rem 0}
.entry-single blockquote{margin:1.25rem 0; padding:1rem 1.25rem; background:rgba(25,25,45,.7); border-left:3px solid var(--accent); border-radius:.5rem}
.entry-single pre{background:#0b0f1f; color:#e7ecff; padding:1rem; border-radius:.5rem; overflow:auto; border:1px solid #273255}
.entry-single code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.entry-single img{max-width:100%; height:auto; border-radius:.5rem; display:block; margin:1rem auto}
.entry-single figure{margin:1.25rem 0}
.entry-single figcaption{color:var(--muted); font-size:.9rem; text-align:center}

.post a, .entry-single a{color:var(--link); text-decoration:underline; transition:color .2s ease-in-out;}
.post a:hover, .entry-single a:hover{color:var(--link-hover);}

/* Ripple effects */
.post::after {content:""; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background: radial-gradient(circle, rgba(91,156,255,0.35) 0%, transparent 70%); transform: translate(-50%,-50%); opacity:0; transition:none; pointer-events:none;}
.post:hover::after { width:220%; height:220%; opacity:1; animation: rippleGlow 1.2s ease-out forwards; }

.comment-list .comment::after {content:""; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background: radial-gradient(circle, rgba(110,231,183,0.3) 0%, transparent 70%); transform: translate(-50%,-50%); opacity:0; transition:none; pointer-events:none;}
.comment-list .comment:hover::after { width:200%; height:200%; opacity:1; animation: rippleGlow 1.2s ease-out forwards; }

/* Buttons, inputs, pagination */
button, input[type="submit"], .wp-block-button__link, .pagination a, .nav-links a { position:relative; overflow:hidden; background:var(--btn-bg); border:2px solid var(--btn-border); color:#fff; padding:0.6rem 1.2rem; font-family:'Roboto', sans-serif; border-radius:0.5rem; cursor:pointer; transition:all .25s ease; text-decoration:none; display:inline-block; }
button:hover, input[type="submit"]:hover, .wp-block-button__link:hover, .pagination a:hover, .nav-links a:hover { border-color:var(--btn-hover); box-shadow:0 0 12px var(--btn-hover); color:var(--btn-hover); }
.pagination, .nav-links { display:flex; gap:.5rem; justify-content:center; align-items:center; margin-top:1rem; flex-wrap:wrap }
.pagination .current{background:#0c1230; border:2px solid var(--accent); padding:.4rem .8rem; border-radius:.5rem}

/* Ripple on pagination */
.pagination a::after, .nav-links a::after, button::after, input[type="submit"]::after, .wp-block-button__link::after, input[type="text"]::after, input[type="email"]::after, input[type="url"]::after, textarea::after { content:""; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background: radial-gradient(circle, rgba(91,156,255,0.25) 0%, transparent 70%); transform: translate(-50%,-50%); opacity:0; transition:none; pointer-events:none; }
.pagination a:hover::after, .nav-links a:hover::after, button:hover::after, input[type="submit"]::hover::after, .wp-block-button__link:hover::after, input[type="text"]::focus::after, input[type="email"]::focus::after, input[type="url"]::focus::after, textarea:focus::after { width:220%; height:220%; opacity:1; animation: rippleGlow 1.2s ease-out forwards; }

/* Comment forms */
.comment-form { margin-top:2rem; padding:1.5rem; background:rgba(15,15,25,0.75); border-radius:0.75rem; }
.comment-form label { display:block; margin-bottom:0.5rem; font-weight:500; color:#cfe3ff; }

.comment-list { margin-top:2rem; padding-left:0; list-style:none; position:relative; }
.comment-list .comment { margin-bottom:1.5rem; padding:1rem; background:rgba(25,25,35,0.7); border-radius:0.5rem; border-bottom:1px solid rgba(91,156,255,0.3); box-shadow:0 2px 8px rgba(91,156,255,0.15); transition: box-shadow 0.3s ease, transform 0.3s ease; animation: fadeInUpGlow .55s ease both; position:relative; overflow:hidden; }
.comment-list .comment:hover { box-shadow:0 0 15px rgba(110,231,183,0.4); transform: translateY(-2px); }
.comment-list .comment-author { font-weight:700; margin-bottom:0.25rem; }
.comment-list .comment-meta { font-size:0.85rem; color:#aaa; margin-bottom:0.5rem; }
.comment-list .children { margin-left:1.5rem; border-left:2px solid rgba(91,156,255,0.3); padding-left:1rem; }
.comment-list .children .comment { background:rgba(30,30,45,0.75); box-shadow:0 2px 8px rgba(110,231,183,0.15); }

/* Staggered delays */
.post:nth-of-type(1){animation-delay:0.05s;} .post:nth-of-type(2){animation-delay:0.15s;} .post:nth-of-type(3){animation-delay:0.25s;} .post:nth-of-type(4){animation-delay:0.35s;} .post:nth-of-type(5){animation-delay:0.45s;}
.comment-list .comment:nth-of-type(1){animation-delay:0.05s;} .comment-list .comment:nth-of-type(2){animation-delay:0.15s;} .comment-list .comment:nth-of-type(3){animation-delay:0.25s;} .comment-list .comment:nth-of-type(4){animation-delay:0.35s;} .comment-list .comment:nth-of-type(5){animation-delay:0.45s;}

/* Special emphasis */
.comment-form input[type="submit"] { border-color: var(--accent2); box-shadow: 0 0 14px var(--accent2); font-weight:600; position:relative; overflow:hidden; }
.comment-form input[type="submit"]::after{content:""; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background: radial-gradient(circle, rgba(110,231,183,0.35) 0%, transparent 70%); transform: translate(-50%,-50%); opacity:0;}
.comment-form input[type="submit"]:hover { border-color: var(--btn-hover); box-shadow: 0 0 20px var(--btn-hover); color: var(--btn-hover); }
.comment-form input[type="submit"]:hover::after{ width:220%; height:220%; opacity:1; animation:rippleGlow 1.2s ease-out forwards; }

@keyframes glowPulse{ 0% { text-shadow:0 0 14px var(--accent), 0 0 28px var(--accent2); } 50%{ text-shadow:0 0 30px var(--accent2), 0 0 70px var(--accent); } 100%{ text-shadow:0 0 14px var(--accent), 0 0 28px var(--accent2); } }
@keyframes fadeInUpGlow { 0%{ opacity:0; transform:translateY(12px); box-shadow:0 0 0 rgba(91,156,255,0);} 60%{ opacity:1; transform:translateY(0); box-shadow:0 0 18px rgba(91,156,255,0.5);} 100%{ opacity:1; transform:translateY(0); box-shadow:0 0 8px rgba(91,156,255,0.2);} }
@keyframes rippleGlow { 0%{ width:0; height:0; opacity:0.6;} 70%{ width:220%; height:220%; opacity:0.25;} 100%{ width:240%; height:240%; opacity:0;} }

@media (prefers-reduced-motion: reduce){ .comment-list .comment, .comment-list .children .comment, .post{ animation:none !important; transition:none !important; } }

/* Back to top */
#backToTop{ position:fixed; right:1rem; bottom:1rem; z-index:10; opacity:0; transform:translateY(10px); pointer-events:none; }
#backToTop.show{ opacity:1; transform:translateY(0); pointer-events:auto; }