/*
Theme Name: Edwmfield
Theme URI: https://edwmfield.dev
Author: Edwm
Author URI: https://edwmfield.dev
Description: A vaporwave / Y2K retro theme for a mobile app developer portfolio and dev log. Marquee banners, neon grid background, visitor counter, an "Apps" portfolio post type, and looping background music.
Version: 1.2
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: edwmfield
*/

:root{
  --vw-pink:#ff71ce; --vw-cyan:#01cdfe; --vw-mint:#05ffa1;
  --vw-purple:#b967ff; --vw-yellow:#fffb96; --vw-hot:#ff2a6d;
  --vw-deep:#12002b; --vw-ink:#2b0a4a;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:Verdana,Geneva,sans-serif;
  color:#fff;
  background-color:#2b0a4a;
  background-image:
    linear-gradient(180deg,rgba(43,10,74,.15) 0%,rgba(105,27,154,.25) 45%,rgba(255,42,109,.55) 100%),
    repeating-linear-gradient(0deg,transparent 0 28px,rgba(1,205,254,.18) 28px 29px),
    repeating-linear-gradient(90deg,transparent 0 28px,rgba(255,113,206,.18) 28px 29px);
  background-attachment:fixed;
  cursor:crosshair;
  padding-bottom:96px;
}
a{color:var(--vw-cyan);}
img{max-width:100%;height:auto;}
.page{max-width:820px;margin:0 auto;padding:10px;}

/* Marquee */
.marquee{background:var(--vw-deep);border:2px ridge var(--vw-cyan);overflow:hidden;white-space:nowrap;margin-bottom:12px;box-shadow:0 0 12px rgba(1,205,254,.6) inset;}
.marquee span{display:inline-block;padding:6px 0;color:var(--vw-pink);font-family:'Courier New',monospace;font-weight:bold;font-size:14px;text-shadow:0 0 6px var(--vw-pink);animation:scroll 18s linear infinite;}
@keyframes scroll{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

/* Header */
.site-header{text-align:center;margin-bottom:12px;}
.logo{display:inline-block;text-decoration:none;font-family:Impact,'Arial Black',sans-serif;font-size:clamp(38px,11vw,64px);line-height:1;letter-spacing:3px;
  background:linear-gradient(var(--vw-cyan),var(--vw-pink));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:3px 3px 0 rgba(185,103,255,.5);margin:4px 0;}
.tagline{color:var(--vw-mint);font-size:clamp(10px,2.4vw,13px);letter-spacing:3px;font-style:italic;text-shadow:0 0 6px rgba(5,255,161,.6);}
.underconstruction{margin-top:6px;color:var(--vw-yellow);font-size:12px;}
.blink{animation:blink 1.1s steps(2,start) infinite;}
@keyframes blink{to{visibility:hidden;}}

/* Layout */
.cols{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;}
nav.side{width:150px;background:#efe0ff;border:2px outset #d9b3ff;padding:6px;color:var(--vw-ink);font-size:13px;flex:0 0 auto;}
nav.side b.navtitle{display:block;background:linear-gradient(90deg,var(--vw-purple),var(--vw-pink));color:#fff;text-align:center;margin:-6px -6px 6px;padding:4px;font-size:12px;text-shadow:1px 1px 0 rgba(0,0,0,.3);}
.navlinks{display:block;list-style:none;margin:0;padding:0;}
.navlinks li{margin:0;}
nav.side a{display:block;color:var(--vw-hot);text-decoration:underline;padding:4px 2px;border-bottom:1px dotted var(--vw-purple);}
nav.side a:before{content:"\25BA ";color:var(--vw-cyan);}
nav.side a:hover{background:var(--vw-yellow);}
.navbadges{margin-top:10px;text-align:center;}
main{flex:1;min-width:280px;}

.panel{background:#efe0ff;border:2px outset #d9b3ff;color:var(--vw-ink);padding:8px;margin-bottom:12px;}
.panel h2{margin:0 0 8px;background:linear-gradient(90deg,var(--vw-cyan),var(--vw-mint));color:var(--vw-deep);padding:4px 8px;font-size:14px;font-family:'Courier New',monospace;}
.panel a{color:var(--vw-hot);}

/* Post / page content */
.entry{color:var(--vw-ink);font-size:14px;line-height:1.6;}
.entry h1,.entry h2,.entry h3{color:var(--vw-purple);}
.entry img{border:2px inset #d9b3ff;}
.entry blockquote{border-left:4px solid var(--vw-pink);margin:8px 0;padding:4px 10px;background:#fff;}
.entry a{color:var(--vw-hot);}
.entry-meta{font-family:'Courier New',monospace;font-size:12px;color:var(--vw-purple);margin-bottom:8px;}
.readmore{display:inline-block;margin-top:4px;font-family:'Courier New',monospace;color:var(--vw-hot);}

/* Apps */
.apps{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.app{width:120px;text-align:center;font-size:12px;color:var(--vw-ink);text-decoration:none;}
.thumb{width:112px;height:112px;border:2px inset #d9b3ff;display:flex;align-items:center;justify-content:center;font-size:44px;margin:0 auto 4px;overflow:hidden;background-size:cover;background-position:center;}
.t1{background:linear-gradient(135deg,var(--vw-cyan),var(--vw-pink));}
.t2{background:linear-gradient(135deg,var(--vw-purple),var(--vw-mint));}
.t3{background:linear-gradient(135deg,var(--vw-yellow),var(--vw-pink));}
.app b{display:block;color:var(--vw-purple);}
.app small{color:#555;}
.new{background:var(--vw-hot);color:#fff;font-size:9px;padding:1px 4px;border-radius:2px;}
.storelink{display:inline-block;margin-top:8px;background:linear-gradient(90deg,var(--vw-purple),var(--vw-pink));color:#fff;text-decoration:none;padding:6px 12px;font-family:'Courier New',monospace;border:2px outset var(--vw-pink);}

/* Dev log */
.log{list-style:none;margin:0;padding:0;font-size:13px;color:var(--vw-ink);}
.log li{padding:5px 0;border-bottom:1px dashed var(--vw-purple);}
.log a{color:var(--vw-hot);}
.log .date{color:var(--vw-purple);font-family:'Courier New',monospace;margin-right:6px;}

/* About */
.about{display:flex;gap:10px;align-items:flex-start;}
.avatar{width:80px;height:80px;flex:0 0 auto;border:2px inset #d9b3ff;background:linear-gradient(135deg,var(--vw-purple),var(--vw-cyan));display:flex;align-items:center;justify-content:center;font-size:38px;}
.about p{margin:0;font-size:13px;line-height:1.5;color:var(--vw-ink);}

.construct{text-align:center;color:var(--vw-yellow);font-weight:bold;font-size:12px;margin:10px 0;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 6px rgba(255,251,150,.6);}

/* Footer */
.site-footer{margin-top:10px;text-align:center;font-size:11px;color:#fff;}
.counter{display:inline-block;background:var(--vw-deep);color:var(--vw-cyan);font-family:'Courier New',monospace;border:1px solid var(--vw-cyan);padding:2px 6px;letter-spacing:3px;text-shadow:0 0 6px var(--vw-cyan);}
.badge{display:inline-block;background:var(--vw-deep);color:var(--vw-pink);border:1px solid var(--vw-purple);font-size:10px;padding:2px 5px;margin:2px;}
.clock{color:var(--vw-mint);font-family:'Courier New',monospace;}

/* Music player bar */
#player{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--vw-deep);border-top:2px ridge var(--vw-cyan);
  box-shadow:0 -4px 16px rgba(1,205,254,.35);
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom));}
.np{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.np-ico{color:var(--vw-pink);font-size:18px;text-shadow:0 0 8px var(--vw-pink);flex:0 0 auto;}
.np-marquee{overflow:hidden;white-space:nowrap;flex:1;min-width:0;}
.np-marquee span{display:inline-block;color:var(--vw-mint);font-family:'Courier New',monospace;font-size:13px;font-weight:bold;text-shadow:0 0 6px rgba(5,255,161,.5);animation:scroll 15s linear infinite;}
.np-ctrl{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.pbtn{background:#2b0a4a;color:var(--vw-cyan);border:2px outset var(--vw-purple);
  font-family:'Courier New',monospace;font-weight:bold;font-size:13px;padding:6px 10px;cursor:pointer;
  text-shadow:0 0 6px var(--vw-cyan);}
.pbtn:active{border-style:inset;}
.pbtn.active{color:var(--vw-pink);border-style:inset;text-shadow:0 0 6px var(--vw-pink);}
#vol{width:80px;accent-color:var(--vw-pink);cursor:pointer;}

/* cursor trail stars (CSS-drawn shape + CSS keyframe fade; no rAF, Firefox-safe) */
@keyframes edwm-trail{
  from{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0deg);}
  to{opacity:0;transform:translate(-50%,-90%) scale(.3) rotate(120deg);}
}
.trail{position:fixed;pointer-events:none;z-index:9999;width:14px;height:14px;
  background:var(--vw-yellow);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter:drop-shadow(0 0 5px var(--vw-pink));
  transform:translate(-50%,-50%);
  animation:edwm-trail .7s ease-out forwards;}

/* WordPress admin bar spacing */
body.admin-bar #player{/* leave as-is; bar is at bottom */}

/* MOBILE */
@media(max-width:640px){
  body{padding-bottom:120px;cursor:auto;}
  .page{padding:8px;}
  nav.side{width:100%;}
  .navlinks{display:flex;flex-wrap:wrap;gap:4px;}
  nav.side li{flex:1 1 40%;}
  nav.side a{border-bottom:none;border:1px solid var(--vw-purple);text-align:center;border-radius:3px;}
  nav.side a:before{content:"";}
  .about{flex-direction:column;align-items:center;text-align:center;}
  .tagline{letter-spacing:1px;}
  #player{flex-wrap:wrap;}
  .np{flex:1 1 100%;order:1;}
  .np-ctrl{flex:1 1 100%;order:2;justify-content:center;}
  .pbtn{flex:1;}
  #vol{width:100px;}
}