/*
Theme Name: Combocraft
Theme URI: https://combocraftghg.local/
Author: CombocraftGHG
Description: Schlankes Chrome-Theme für die private CombocraftGHG-Site. Liefert Header, Footer und Basis-CSS — Seiteninhalte kommen als HTML-Fragmente in wp:html-Blöcken mit eigenem Style.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: Private
Text Domain: combocraft
*/

/* ---------- Tokens ---------- */
:root{
  --bg:#09090b; --bg2:#0f0f12; --card:#18181b; --card2:#1f1f23;
  --border:rgba(255,255,255,.08); --text:#f4f4f5; --dim:#a1a1aa; --dim2:#71717a;
  --grass:#84cc16; --grass-bright:#a3e635; --grass-deep:#4d7c0f; --grass-dark:#365314;
  --radius:6px;
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:'Cascadia Code',ui-monospace,'SFMono-Regular',Consolas,'Liberation Mono',monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto}
a{color:var(--grass-bright); text-decoration:none}
a:hover{color:var(--grass)}
:focus-visible{outline:3px solid var(--grass); outline-offset:2px; border-radius:3px}
.muted{color:var(--dim)}

.skip{position:absolute; left:-999px; top:0; background:var(--grass); color:#09090b; padding:.6rem 1rem; font-weight:700; z-index:200}
.skip:focus{left:8px; top:8px}

/* ---------- Header ---------- */
header.site{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
header.site.scrolled{background:rgba(9,9,11,.8); backdrop-filter:blur(10px); border-bottom-color:var(--border)}
.hwrap{max-width:1100px; margin:0 auto; padding:.9rem 1.2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand{display:flex; align-items:center; gap:.55rem; font-weight:800; letter-spacing:-.02em; font-size:1.2rem; color:var(--grass); flex:none}
.brand .block{width:22px; height:22px; border-radius:4px; background:var(--grass); border:2px solid var(--grass-deep); box-shadow:0 0 14px rgba(132,204,22,.5)}
.brand b{color:var(--text)} .brand b span{color:var(--grass)}

/* ---------- Nav (mobil: horizontale Scroll-Leiste) ---------- */
nav.main{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main ul{display:flex; align-items:center; gap:.25rem; margin:0; padding:0; list-style:none}
nav.main a{
  display:block; white-space:nowrap; font-size:.92rem; font-weight:600;
  color:var(--dim); padding:.35rem .7rem; border-radius:var(--radius);
}
nav.main a:hover{color:var(--grass); background:var(--card)}
nav.main a.active{color:var(--grass); background:rgba(132,204,22,.12)}

/* ---------- Generische Karten / Buttons (auch für Inhaltsfragmente) ---------- */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem 1.5rem; margin:1rem 0;
}
.card h2,.card h3{margin-top:0}
.btn{
  display:inline-flex; align-items:center; gap:.4rem; background:var(--grass);
  color:#09090b; font-weight:700; padding:.55rem 1rem; border-radius:var(--radius);
  border:2px solid var(--grass-deep);
}
.btn:hover{background:var(--grass-bright); color:#09090b}
.btn.ghost{background:transparent; color:var(--grass); border-color:var(--border)}
.btn.ghost:hover{border-color:var(--grass); color:var(--grass-bright)}

/* ---------- Archiv-/Post-Listen (index.php, page-map.php) ---------- */
.archive-wrap{max-width:880px; margin:0 auto; padding:7rem 1.2rem 4rem}
.archive-wrap h1{font-size:clamp(1.8rem,5vw,2.4rem); font-weight:800; letter-spacing:-.02em; margin:0 0 2rem}
.post-card{
  display:block; background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.3rem 1.5rem; margin:0 0 1rem; color:var(--text); transition:border-color .2s;
}
.post-card:hover{border-color:var(--grass); color:var(--text)}
.post-card h2{font-size:1.25rem; font-weight:800; letter-spacing:-.01em; margin:0 0 .35rem}
.post-card .date{font-size:.8rem; color:var(--dim2); text-transform:uppercase; letter-spacing:.06em}
.post-card p{color:var(--dim); margin:.5rem 0 0}

/* Karten-Grid für Baustellen-Updates */
.post-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; margin:1.5rem 0 3rem}
.post-grid .post-card{margin:0; padding:0; overflow:hidden; display:flex; flex-direction:column}
.post-grid .post-card .thumb{aspect-ratio:16/9; width:100%; object-fit:cover; display:block; border-bottom:1px solid var(--border)}
.post-grid .post-card .body{padding:1rem 1.2rem 1.2rem}
.post-grid .post-card h3{font-size:1.05rem; margin:0 0 .3rem}
.post-grid .post-card p{font-size:.9rem}

.map-updates{max-width:880px; margin:0 auto; padding:0 1.2rem 4rem}
.map-updates h2.section-title{font-size:1.6rem; font-weight:800; letter-spacing:-.02em; margin:3rem 0 .4rem}
.map-updates .empty{background:var(--card); border:1px dashed var(--border); border-radius:var(--radius); padding:1.2rem 1.4rem; color:var(--dim)}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--border); margin-top:3rem; padding:2rem 1.2rem; text-align:center; color:var(--dim2); font-size:.86rem}
footer.site a{color:var(--dim)}
footer.site a:hover{color:var(--grass)}

@media (max-width:640px){
  .hwrap{flex-wrap:wrap; gap:.4rem 1rem; padding:.7rem 1rem}
  nav.main{width:100%}
}