/*
Theme Name: Pixel Retro
Theme URI: https://example.com/pixel-retro
Author: 8-Bit Studio
Description: 8-bit arcade WordPress theme. Hard pixel borders, stepped shadows, CRT scanlines, blocky pixel-art motifs and a pure retro-gaming pairing of Press Start 2P with VT323.
Version: 1.0.0
License: GPLv2 or later
Text Domain: pixel-retro
*/

:root{
  --pr-dark:#1e1b4b;
  --pr-indigo:#4f46e5;
  --pr-lav:#a78bfa;
  --pr-yellow:#fde68a;
  --pr-bg:#0c0a2e;
  --pr-display:"Press Start 2P", monospace;
  --pr-body:"VT323", monospace;
  --pr-shadow:6px 6px 0 var(--pr-dark);
  --pr-shadow-lg:10px 10px 0 var(--pr-dark);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--pr-body);font-size:20px;line-height:1.55;color:var(--pr-yellow);
  background:var(--pr-bg);
  background-image:
    linear-gradient(rgba(167,139,250,.06) 2px, transparent 2px),
    linear-gradient(90deg, rgba(167,139,250,.06) 2px, transparent 2px);
  background-size:32px 32px;
  image-rendering:pixelated;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px);
  mix-blend-mode:multiply;
}
img{max-width:100%;height:auto;display:block;image-rendering:pixelated}
a{color:var(--pr-lav);text-decoration:none}
a:hover{color:var(--pr-yellow)}

/* Header */
.pr-bar{
  background:var(--pr-dark);border-bottom:6px solid var(--pr-indigo);
  position:sticky;top:0;z-index:50;
}
.pr-bar-inner{max-width:1280px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.pr-logo{display:flex;align-items:center;gap:14px;font-family:var(--pr-display);font-size:14px;color:var(--pr-yellow);letter-spacing:.04em;line-height:1.2}
.pr-sprite{
  width:28px;height:28px;flex:0 0 28px;
  background:
    linear-gradient(var(--pr-yellow),var(--pr-yellow)) 25% 0/25% 25% no-repeat,
    linear-gradient(var(--pr-yellow),var(--pr-yellow)) 50% 0/25% 25% no-repeat,
    linear-gradient(var(--pr-yellow),var(--pr-yellow)) 0 25%/100% 25% no-repeat,
    linear-gradient(var(--pr-yellow),var(--pr-yellow)) 0 50%/25% 25% no-repeat,
    linear-gradient(var(--pr-yellow),var(--pr-yellow)) 75% 50%/25% 25% no-repeat,
    linear-gradient(var(--pr-yellow),var(--pr-yellow)) 25% 75%/50% 25% no-repeat;
  background-color:var(--pr-indigo);
}
.pr-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:var(--pr-display);font-size:11px}
.pr-nav a{
  color:var(--pr-yellow);padding:10px 14px;letter-spacing:.04em;
  border:3px solid transparent;background:transparent;
}
.pr-nav a:hover{background:var(--pr-indigo);border-color:var(--pr-yellow);color:var(--pr-yellow)}
.pr-nav .login{
  background:var(--pr-yellow);color:var(--pr-dark);border:3px solid var(--pr-yellow);
  box-shadow:4px 4px 0 var(--pr-indigo);
}
.pr-nav .login:hover{background:#fff;color:var(--pr-dark);border-color:#fff;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--pr-indigo)}

/* Hero */
.pr-hero{position:relative;max-width:1280px;margin:0 auto;padding:80px 24px 60px;z-index:2}
.pr-hero h1{
  font-family:var(--pr-display);font-size:clamp(24px,5vw,56px);line-height:1.25;
  color:var(--pr-yellow);text-shadow:6px 6px 0 var(--pr-indigo), 12px 12px 0 var(--pr-dark);
  margin:0 0 24px;letter-spacing:.02em;
}
.pr-hero h1 .accent{color:var(--pr-lav)}
.pr-hero p{font-size:24px;max-width:680px;color:#fef3c7}
.pr-tag{
  font-family:var(--pr-display);font-size:11px;display:inline-block;
  background:var(--pr-indigo);color:var(--pr-yellow);padding:8px 14px;
  border:3px solid var(--pr-yellow);box-shadow:4px 4px 0 var(--pr-dark);
  margin-bottom:24px;
}
.pr-cta{
  display:inline-flex;align-items:center;gap:14px;font-family:var(--pr-display);font-size:14px;
  background:var(--pr-yellow);color:var(--pr-dark);padding:18px 26px;border:4px solid var(--pr-dark);
  box-shadow:var(--pr-shadow-lg);margin-top:30px;letter-spacing:.04em;
  transition:transform .15s, box-shadow .15s;
}
.pr-cta:hover{color:var(--pr-dark);transform:translate(-3px,-3px);box-shadow:13px 13px 0 var(--pr-dark)}
.pr-cta:active{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--pr-dark)}

/* Hero pixel monster */
.pr-monster{
  position:absolute;right:24px;top:60px;width:200px;height:200px;display:grid;
  grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);
}
.pr-monster i{background:transparent}
.pr-monster .a{background:var(--pr-yellow)}
.pr-monster .b{background:var(--pr-lav)}
.pr-monster .c{background:var(--pr-indigo)}
.pr-monster .d{background:var(--pr-dark)}
@media (max-width:880px){.pr-monster{display:none}}

/* Crumbs */
.pr-crumbs{max-width:1280px;margin:0 auto;padding:0 24px 16px;font-family:var(--pr-display);font-size:10px;letter-spacing:.08em;color:var(--pr-lav);position:relative;z-index:2}
.pr-crumbs a{color:var(--pr-yellow)}
.pr-crumbs span{margin:0 10px;color:var(--pr-indigo)}

/* Layout */
.pr-shell{max-width:1280px;margin:0 auto;padding:30px 24px 80px;display:grid;grid-template-columns:1fr 320px;gap:36px;position:relative;z-index:2}
@media (max-width:980px){.pr-shell{grid-template-columns:1fr}}
.pr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:720px){.pr-grid{grid-template-columns:1fr}}

/* Cards - blocky panels */
.pr-card{
  background:#fff7ed;color:var(--pr-dark);
  border:4px solid var(--pr-dark);box-shadow:var(--pr-shadow);
  transition:transform .15s, box-shadow .15s;
}
.pr-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--pr-dark)}
.pr-thumb{aspect-ratio:5/3;display:block;border-bottom:4px solid var(--pr-dark);background:var(--pr-indigo);overflow:hidden;image-rendering:pixelated}
.pr-thumb img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.pr-card-body{padding:22px 24px}
.pr-cat{font-family:var(--pr-display);font-size:9px;letter-spacing:.1em;color:var(--pr-indigo);margin-bottom:8px}
.pr-card h2{font-family:var(--pr-display);font-size:14px;line-height:1.4;color:var(--pr-dark);margin:0 0 12px;letter-spacing:.02em}
.pr-card h2 a{color:inherit}
.pr-card h2 a:hover{color:var(--pr-indigo)}
.pr-card p{margin:0;font-size:20px;color:#312e81}
.pr-meta-line{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--pr-display);font-size:9px;letter-spacing:.08em;color:var(--pr-indigo)}

/* Sidebar */
.pr-side .widget{
  background:var(--pr-indigo);color:var(--pr-yellow);
  border:4px solid var(--pr-dark);box-shadow:var(--pr-shadow);padding:22px 22px 24px;margin-bottom:22px;
}
.pr-side h3{font-family:var(--pr-display);font-size:12px;color:var(--pr-yellow);margin:0 0 14px;letter-spacing:.05em}
.pr-side ul{list-style:none;padding:0;margin:0}
.pr-side li{padding:6px 0;font-size:20px;border-bottom:2px dashed rgba(253,230,138,.35)}
.pr-side li:last-child{border-bottom:0}
.pr-side a{color:var(--pr-yellow)}
.pr-side a:hover{color:#fff}

/* Article */
.pr-article{
  max-width:780px;margin:0 auto;padding:40px;background:#fff7ed;color:var(--pr-dark);
  border:4px solid var(--pr-dark);box-shadow:var(--pr-shadow-lg);margin-top:30px;margin-bottom:30px;
  position:relative;z-index:2;
}
.pr-article header{border-bottom:4px solid var(--pr-dark);padding-bottom:24px;margin-bottom:24px}
.pr-article .stamp{display:inline-block;background:var(--pr-yellow);color:var(--pr-dark);font-family:var(--pr-display);font-size:9px;padding:6px 12px;border:3px solid var(--pr-dark);box-shadow:3px 3px 0 var(--pr-indigo);margin-bottom:14px}
.pr-article h1{font-family:var(--pr-display);font-size:clamp(20px,4vw,32px);line-height:1.4;letter-spacing:.02em;margin:0;color:var(--pr-dark)}
.pr-article .meta{font-family:var(--pr-display);font-size:10px;color:var(--pr-indigo);margin-top:14px;letter-spacing:.08em}
.pr-article .feat{margin:24px 0;border:4px solid var(--pr-dark)}
.pr-article .body{font-size:22px;line-height:1.6;color:#312e81}
.pr-article .body h2{font-family:var(--pr-display);font-size:18px;color:var(--pr-dark)}
.pr-article .body blockquote{border-left:6px solid var(--pr-yellow);padding:12px 18px;margin:24px 0;background:var(--pr-dark);color:var(--pr-yellow);font-family:var(--pr-display);font-size:13px;line-height:1.6}

/* Related */
.pr-related{max-width:1280px;margin:0 auto;padding:30px 24px 60px;position:relative;z-index:2}
.pr-related h3{font-family:var(--pr-display);font-size:18px;color:var(--pr-yellow);margin:0 0 24px;text-shadow:4px 4px 0 var(--pr-indigo)}

/* Pager */
.pr-pager{display:flex;justify-content:center;gap:8px;margin:30px 0;font-family:var(--pr-display);font-size:11px}
.pr-pager a, .pr-pager span{padding:12px 16px;background:var(--pr-yellow);color:var(--pr-dark);border:3px solid var(--pr-dark);box-shadow:4px 4px 0 var(--pr-dark)}
.pr-pager .current{background:var(--pr-indigo);color:var(--pr-yellow)}

/* 404 */
.pr-404{max-width:880px;margin:0 auto;padding:120px 24px;text-align:center;position:relative;z-index:2}
.pr-404 .big{font-family:var(--pr-display);font-size:clamp(64px,15vw,160px);color:var(--pr-yellow);line-height:1;text-shadow:8px 8px 0 var(--pr-indigo), 16px 16px 0 var(--pr-dark);letter-spacing:.04em}

/* Comments */
.pr-comments{max-width:780px;margin:0 auto;padding:0 24px 60px;position:relative;z-index:2}
.pr-comments h3{font-family:var(--pr-display);font-size:14px;color:var(--pr-yellow)}
.pr-comments ol{list-style:none;padding:0}
.pr-comments li{background:#fff7ed;color:var(--pr-dark);border:4px solid var(--pr-dark);box-shadow:var(--pr-shadow);padding:18px;margin-bottom:14px}
.pr-comments textarea, .pr-comments input[type="text"], .pr-comments input[type="email"], .pr-comments input[type="url"]{
  width:100%;padding:12px 14px;border:3px solid var(--pr-dark);background:#fff7ed;color:var(--pr-dark);
  font-family:var(--pr-body);font-size:20px;
}
.pr-comments .submit input{
  font-family:var(--pr-display);font-size:12px;padding:14px 22px;background:var(--pr-yellow);color:var(--pr-dark);
  border:4px solid var(--pr-dark);box-shadow:var(--pr-shadow);cursor:pointer;letter-spacing:.04em;
}

/* Footer */
.pr-foot{background:var(--pr-dark);color:var(--pr-yellow);border-top:6px solid var(--pr-indigo);margin-top:40px;position:relative;z-index:2}
.pr-foot-inner{max-width:1280px;margin:0 auto;padding:60px 24px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
@media (max-width:880px){.pr-foot-inner{grid-template-columns:repeat(2,1fr)}}
.pr-foot h4{font-family:var(--pr-display);font-size:11px;color:var(--pr-yellow);margin:0 0 14px;letter-spacing:.06em}
.pr-foot ul{list-style:none;padding:0;margin:0}
.pr-foot li{padding:5px 0;font-size:20px}
.pr-foot a{color:var(--pr-lav)}
.pr-foot a:hover{color:var(--pr-yellow)}
.pr-foot-bottom{border-top:3px dashed var(--pr-indigo);text-align:center;padding:20px;font-family:var(--pr-display);font-size:10px;color:var(--pr-lav);letter-spacing:.08em}