/*
Theme Name: PJonnyTV MC
Theme URI: https://pjonnytv.net
Author: PJonnyTV
Author URI: https://pjonnytv.net
Description: Comic/Borderlands-Style Theme für den Minecraft-Server PJonnyTV - MC. Enthält einen Live-Server-Tracker, Discord-Anbindung und volle Unterstützung für Blogbeiträge.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pjonnytv-mc
*/

:root{
  --ink:#0b0f0a;
  --paper:#f3ead2;
  --paper-2:#e9dcb8;
  --night:#12241a;
  --night-2:#0b1811;
  --leaf:#4aa62c;
  --leaf-2:#8fe14f;
  --leaf-dark:#2d6b1c;
  --ember:#ff7a29;
  --ember-dark:#c8501a;
  --sky:#4fc7dd;
  --gold:#ffcd3c;
  --shadow-hard: 6px 6px 0 var(--ink);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Kanit', sans-serif;
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:999;
  background-image: radial-gradient(rgba(11,15,10,0.10) 1px, transparent 1.3px);
  background-size:5px 5px;
  mix-blend-mode:multiply;
  opacity:.55;
}

h1,h2,h3,.display{
  font-family:'Bangers', cursive;
  letter-spacing:1px;
  line-height:1;
}

a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img,svg{display:block; max-width:100%; height:auto;}

.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Bangers', cursive;
  font-size:1.15rem;
  letter-spacing:.5px;
  color:var(--ink);
  background:var(--leaf-2);
  border:3px solid var(--ink);
  padding:12px 26px 10px;
  border-radius:10px;
  box-shadow:var(--shadow-hard);
  cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:hover{transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink);}
.btn:active{transform:translate(5px,5px); box-shadow:1px 1px 0 var(--ink);}
.btn.ember{background:var(--ember); color:var(--paper);}
.btn.small{padding:8px 16px 6px; font-size:.95rem; border-width:2.5px; box-shadow:4px 4px 0 var(--ink);}

/* ============ NAV ============ */
.site-header{
  position:sticky; top:0; z-index:200;
  background:var(--night);
  border-bottom:5px solid var(--ink);
}
.site-header .nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:82px;
  gap:18px;
}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.brand img{max-height:44px; width:auto;}
.brand-word{
  font-family:'Titan One', cursive;
  font-size:1.45rem;
  letter-spacing:.5px;
  color:var(--leaf-2);
  -webkit-text-stroke:1px var(--ink);
  display:inline-block;
  white-space:nowrap;
}

.nav-center{display:flex; align-items:center; flex:1; justify-content:center;}
.nav-links{display:flex; gap:28px;}
.nav-links li{position:relative;}
.nav-links a{
  font-family:'Bangers', cursive;
  font-size:1.05rem;
  color:var(--paper);
  letter-spacing:.5px;
  position:relative;
  padding-bottom:3px;
  display:inline-block;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0%; height:3px; background:var(--leaf-2);
  transition:width .18s ease;
}
.nav-links a:hover::after, .nav-links .current-menu-item a::after{width:100%;}

.nav-tools{display:flex; align-items:center; gap:14px; flex-shrink:0;}

/* live server tracker pill */
.live-tracker{
  display:flex; align-items:center; gap:8px;
  background:var(--night-2);
  border:2.5px solid var(--leaf-2);
  border-radius:20px;
  padding:6px 14px;
  font-size:.82rem;
  font-weight:600;
  color:var(--paper);
  white-space:nowrap;
}
.live-tracker .dot{
  width:9px; height:9px; border-radius:50%;
  background:#888; flex-shrink:0;
  transition:background .2s ease;
}
.live-tracker.is-online .dot{background:var(--leaf-2); box-shadow:0 0 6px var(--leaf-2);}
.live-tracker.is-offline .dot{background:var(--ember);}

/* search toggle */
.search-toggle{
  background:none; border:2.5px solid var(--paper); border-radius:8px;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--paper);
}
.search-toggle:hover{border-color:var(--leaf-2); color:var(--leaf-2);}
.search-toggle svg{width:18px; height:18px;}

.header-search{
  max-height:0; overflow:hidden;
  background:var(--night-2);
  transition:max-height .25s ease;
  border-bottom:0 solid var(--ink);
}
.header-search.open{max-height:90px; border-bottom-width:4px;}
.header-search .wrap{padding:16px 28px;}
.search-form{display:flex; gap:10px;}
.search-form input[type="search"]{
  flex:1; border:3px solid var(--ink); border-radius:8px;
  padding:10px 14px; font-family:'Kanit'; font-size:1rem;
  background:var(--paper); color:var(--ink);
}
.search-form button{
  font-family:'Bangers', cursive; font-size:1rem;
  background:var(--leaf-2); border:3px solid var(--ink); border-radius:8px;
  padding:0 20px; cursor:pointer; box-shadow:4px 4px 0 var(--ink);
}

.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
.burger span{width:28px; height:3px; background:var(--paper); border-radius:2px;}

/* ============ HERO ============ */
.hero{
  position:relative;
  background:linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  padding:70px 0 110px;
  color:var(--paper);
  overflow:hidden;
}
.hero .wrap{max-width:760px; text-align:center;}
.hero-copy{display:flex; flex-direction:column; align-items:center;}
.eyebrow-badge{
  display:inline-block;
  background:var(--gold);
  color:var(--ink);
  border:3px solid var(--ink);
  padding:6px 14px;
  border-radius:8px;
  font-weight:700;
  font-size:.85rem;
  transform:rotate(-3deg);
  box-shadow:4px 4px 0 var(--ink);
  margin-bottom:18px;
}
.hero h1{
  font-family:'Anton', sans-serif;
  font-size:clamp(2.8rem, 6vw, 4.6rem);
  letter-spacing:.5px;
  color:var(--leaf-2);
  -webkit-text-stroke:3px var(--ink);
  margin-bottom:14px;
}
.hero h1 .accent{color:var(--ember); -webkit-text-stroke:3px var(--ink);}
.hero p.lede{
  font-size:1.15rem;
  max-width:46ch;
  color:#e8e4d0;
  margin-bottom:26px;
}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-bottom:30px;}

.ip-box{
  display:inline-flex; align-items:center; gap:14px;
  background:var(--paper);
  color:var(--ink);
  border:3px solid var(--ink);
  border-radius:10px;
  padding:12px 16px;
  box-shadow:var(--shadow-hard);
}
.ip-box .ip-label{font-size:.75rem; font-weight:700; text-transform:uppercase; opacity:.65; display:block;}
.ip-box .ip-value{font-family:'Bangers',cursive; font-size:1.3rem; letter-spacing:1px;}
.ip-copy{
  background:var(--leaf); color:var(--paper); border:2.5px solid var(--ink);
  border-radius:7px; padding:8px 12px; cursor:pointer; font-weight:700; font-size:.85rem;
}
.ip-copy:active{transform:translate(1px,1px);}

.zigzag{display:block; width:100%; height:34px;}

/* ============ STATS ============ */
.stats{background:var(--paper-2); border-bottom:5px solid var(--ink);}
.stats .wrap{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  padding:44px 28px 54px;
}
.stat-plate{
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:12px;
  padding:20px 14px;
  text-align:center;
  box-shadow:5px 5px 0 var(--ink);
}
.stat-plate .num{
  font-family:'Bangers', cursive;
  font-size:2.4rem;
  color:var(--leaf-dark);
  -webkit-text-stroke:1.5px var(--ink);
}
.stat-plate .lbl{font-size:.85rem; font-weight:600; margin-top:4px; color:#3a3a2f;}
a.stat-plate{transition:transform .08s ease, box-shadow .08s ease;}
a.stat-plate:hover{transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink);}

/* ============ SECTION HEADERS ============ */
.section-head{max-width:640px; margin-bottom:44px;}
.section-head .tag{
  display:inline-block;
  background:var(--sky);
  border:3px solid var(--ink);
  padding:5px 14px;
  border-radius:8px;
  font-weight:700; font-size:.8rem;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-2deg);
  margin-bottom:14px;
}
.section-head h2{font-size:clamp(2rem,4vw,2.9rem); color:var(--ink);}
.section-head p{margin-top:12px; font-size:1.05rem; color:#4a463a; max-width:56ch;}

/* ============ GAMEMODES ============ */
.gamemodes{background:var(--paper); padding:80px 0 90px;}
.mode-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.mode-card{
  background:var(--paper);
  border:3.5px solid var(--ink);
  border-radius:14px;
  box-shadow:var(--shadow-hard);
  overflow:hidden;
  transition:transform .1s ease, box-shadow .1s ease;
}
.mode-card:hover{transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink);}
.mode-art{height:12px; border-bottom:3.5px solid var(--ink);}
.mode-body{padding:18px 20px 22px;}
.mode-body h3{font-family:'Bangers',cursive; font-size:1.5rem; color:var(--ink); margin-bottom:6px;}
.mode-body p{font-size:.92rem; color:#4a463a; margin-bottom:12px;}
.mode-tag{
  display:inline-block; font-size:.72rem; font-weight:700;
  background:var(--gold); border:2px solid var(--ink); border-radius:6px;
  padding:2px 8px;
}
.mode-tag.status-online{background:var(--leaf-2);}
.mode-tag.status-wip{background:#d8d2bd;}
.mode-tag.status-reset{background:var(--sky);}

/* ============ JOIN STEPS ============ */
.steps{background:var(--night); color:var(--paper); padding:90px 0 100px;}
.steps .section-head h2{color:var(--paper);}
.steps .section-head p{color:#cfc9b3;}
.steps .section-head .tag{background:var(--ember); color:var(--paper);}
.step-row{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.step-card{
  background:var(--night-2);
  border:3px solid var(--leaf-2);
  border-radius:14px;
  padding:26px 20px;
  position:relative;
}
.step-num{
  font-family:'Bangers',cursive;
  font-size:2.6rem;
  color:var(--leaf-2);
  -webkit-text-stroke:2px var(--ink);
  margin-bottom:10px;
}
.step-card h3{font-family:'Bangers',cursive; font-size:1.2rem; margin-bottom:6px; color:var(--paper);}
.step-card p{font-size:.9rem; color:#c9c4ae;}

/* ============ COMMUNITY ============ */
.community{background:var(--paper-2); padding:90px 0 100px;}
.quote-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.quote-bubble{
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:16px;
  padding:22px 22px 18px;
  box-shadow:5px 5px 0 var(--ink);
  position:relative;
}
.quote-bubble p{font-size:.98rem; color:#333; margin-bottom:14px;}
.quote-who{display:flex; align-items:center; gap:10px;}
.quote-avatar{
  width:36px; height:36px; border-radius:8px;
  border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'Bangers', cursive; font-size:1.1rem; color:var(--ink);
  flex-shrink:0;
}
.quote-name{font-family:'Bangers',cursive; font-size:1rem;}
.quote-name span{display:block; font-family:'Kanit'; font-size:.72rem; color:#777; font-weight:500;}

/* ============ GENERIC PAGE / BLOG CONTENT ============ */
.page-hero{
  background:linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  color:var(--paper);
  padding:60px 0 50px;
  border-bottom:5px solid var(--ink);
}
.page-hero h1{
  font-family:'Anton', sans-serif;
  font-size:clamp(2.2rem,5vw,3.4rem);
  color:var(--leaf-2);
  -webkit-text-stroke:2.5px var(--ink);
}
.page-hero .meta{margin-top:10px; color:#cfc9b3; font-size:.9rem;}

.content-area{padding:70px 0 90px; background:var(--paper);}
.content-layout{display:grid; grid-template-columns:1fr 300px; gap:44px;}
.content-layout.no-sidebar{grid-template-columns:1fr; max-width:760px; margin:0 auto;}

.post-card{
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:14px;
  box-shadow:var(--shadow-hard);
  padding:26px 26px 24px;
  margin-bottom:30px;
}
.post-card .post-thumb{border:3px solid var(--ink); border-radius:10px; overflow:hidden; margin-bottom:16px;}
.post-card h2{font-family:'Bangers',cursive; font-size:1.7rem; margin-bottom:8px;}
.post-card h2 a:hover{color:var(--leaf-dark);}
.post-meta{font-size:.78rem; color:#7a7563; font-weight:600; margin-bottom:10px; display:flex; gap:12px; flex-wrap:wrap;}
.post-card .excerpt{font-size:.98rem; color:#4a463a; margin-bottom:14px;}

.single-post .entry-header h1{
  font-family:'Anton', sans-serif;
  font-size:clamp(2rem,4.5vw,3rem);
  margin-bottom:10px;
}
.single-post .entry-content{font-size:1.05rem; line-height:1.7; margin-top:20px;}
.single-post .entry-content p{margin-bottom:1.1em;}
.single-post .entry-content h2,.single-post .entry-content h3{margin:1.4em 0 .5em;}
.single-post .entry-content img{border:3px solid var(--ink); border-radius:10px; margin:1em 0;}
.single-post .entry-content blockquote{
  border-left:5px solid var(--ember); padding:10px 20px; background:var(--paper-2); border-radius:8px; margin:1.2em 0;
}
.entry-footer{margin-top:26px; padding-top:16px; border-top:2px dashed #cbbf9c; font-size:.85rem;}

.pagination{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;}
.pagination a, .pagination span{
  font-family:'Bangers',cursive; font-size:.95rem;
  border:2.5px solid var(--ink); border-radius:8px; padding:6px 14px;
  background:var(--paper); box-shadow:3px 3px 0 var(--ink);
}
.pagination .current{background:var(--leaf-2);}

.widget-area .widget{
  background:var(--paper); border:3px solid var(--ink); border-radius:14px;
  padding:20px 20px 18px; margin-bottom:24px; box-shadow:5px 5px 0 var(--ink);
}
.widget-area .widget-title{font-family:'Bangers',cursive; font-size:1.2rem; margin-bottom:12px;}
.widget-area ul li{padding:6px 0; border-bottom:1px dashed #cbbf9c; font-size:.92rem;}

#comments{margin-top:40px;}
#comments .comment-list{list-style:none;}
.comment-body{
  border:2.5px solid var(--ink); border-radius:12px; padding:16px 18px; margin-bottom:16px; background:var(--paper-2);
}
.comment-author{font-family:'Bangers',cursive; font-size:1rem;}
.comment-metadata{font-size:.75rem; color:#7a7563;}
.comment-respond input, .comment-respond textarea{
  width:100%; border:2.5px solid var(--ink); border-radius:8px; padding:10px; font-family:'Kanit'; margin-bottom:12px;
}
.comment-respond .form-submit input{
  width:auto; font-family:'Bangers',cursive; background:var(--leaf-2); box-shadow:4px 4px 0 var(--ink); cursor:pointer;
}

.error-404{padding:100px 0; text-align:center;}
.error-404 h1{font-size:5rem; color:var(--ember); -webkit-text-stroke:3px var(--ink);}

/* ============ FOOTER ============ */
.site-footer{background:var(--ink); color:var(--paper); padding:50px 0 30px;}
.footer-top{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;
  padding-bottom:30px; border-bottom:2px solid #2a3327; margin-bottom:22px;
}
.footer-links{display:flex; gap:24px; flex-wrap:wrap;}
.footer-links a{font-size:.9rem; color:#cfc9b3;}
.footer-links a:hover{color:var(--leaf-2);}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; color:#8a8570;}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .content-layout{grid-template-columns:1fr;}
}
@media (max-width:920px){
  .stats .wrap{grid-template-columns:repeat(2,1fr);}
  .mode-grid{grid-template-columns:repeat(2,1fr);}
  .step-row{grid-template-columns:repeat(2,1fr);}
  .quote-grid{grid-template-columns:1fr;}
}
@media (max-width:780px){
  .nav-center{
    position:absolute; top:82px; left:0; right:0;
    background:var(--night); flex-direction:column;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
    border-bottom:5px solid var(--ink);
    justify-content:flex-start;
  }
  .nav-center.open{max-height:400px;}
  .nav-links{flex-direction:column; gap:0; width:100%;}
  .nav-links a{padding:16px 28px; border-top:1px solid #24322a; width:100%;}
  .burger{display:flex;}
  .live-tracker{display:none;}
  .mode-grid, .step-row{grid-template-columns:1fr;}
  .stats .wrap{grid-template-columns:1fr 1fr;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}