/* ==========================================================
   Minecraft Theme — Pixelated earthy greens, grass & dirt
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --bg:       #16261a;
  --bg-card:  #1c3020;
  --bg-hover: #243c28;
  --text:     #e8f4e0;
  --muted:    #7aaa78;
  --border:   #2e5e30;
  --accent:   #5dbf52;
  --accent2:  #f9c620;
  --link:     #7ede74;

  --font-h:    'Press Start 2P', monospace;
  --font-body: 'Share Tech Mono', 'Courier New', monospace;
  --font-mono: 'Share Tech Mono', monospace;

  --dirt:   #7a5230;
  --grass:  #5dbf52;
  --stone:  #7a7a7a;
  --wood:   #8b6340;
}

/* ── Background: dark forest/earth ─────────────────────── */
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(0,0,0,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.12) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Typography: pixelated ──────────────────────────────── */
h1,h2,h3 { font-family: var(--font-h); image-rendering: pixelated; }

h1 {
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  color: #f9c620;
  text-shadow: 3px 3px 0 #7a5e00, -1px -1px 0 #000;
  margin-bottom: 1rem;
}
h2 {
  font-size: clamp(.8rem, 2vw, 1rem);
  color: #8bc34a;
  text-shadow: 2px 2px 0 #1b5e20, -1px -1px 0 #000;
}
h3 {
  font-size: .75rem;
  color: var(--grass);
  text-shadow: 1px 1px 0 #1b5e20;
}

/* ── Navigation ─────────────────────────────────────────── */
.site-header {
  background: var(--bg);
  border-bottom: 4px solid var(--grass);
}
/* Grass block stripe on top of nav */
.site-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    #2e7d32 0px, #4caf50 16px,
    #66bb6a 16px, #4caf50 32px,
    #2e7d32 32px, #4caf50 48px
  );
}
.site-header { position: sticky; top: 0; z-index: 100; }
.site-logo {
  color: var(--accent2) !important;
  font-family: var(--font-h) !important;
  font-size: 1rem !important;
  text-shadow: 2px 2px 0 #7a5e00. -1px -1px 0 #000 !important;
}
.site-nav a { font-family: var(--font-h); font-size: .65rem; }
.site-nav a:hover,
.site-nav a.active {
  background: #1b5e20;
  border-color: var(--grass);
  color: #c8e6c9;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  background: linear-gradient(180deg, #0e1f12 0%, var(--bg) 100%);
  border-bottom: 6px solid var(--dirt);
  padding-bottom: 5rem;
}
/* Sky gradient above hero */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(87,192,235,.15) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Cards: stone-block style ───────────────────────────── */
.game-card, .post-card, .section-card, .server-card, .info-box {
  border: 3px solid #3a3a3a;
  border-right-color: #111;
  border-bottom-color: #111;
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
  image-rendering: pixelated;
}
.game-card:hover, .section-card:hover {
  transform: translateY(-3px);
  box-shadow: 3px 6px 0 rgba(0,0,0,.5);
}

/* ── Buttons: wooden plank feel ─────────────────────────── */
.btn {
  font-family: var(--font-h) !important;
  font-size: .65rem !important;
  border: 3px solid #4a2e18 !important;
  border-right-color: #1a0f08 !important;
  border-bottom-color: #1a0f08 !important;
  background: #6d4c22 !important;
  color: #f0e0c0 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
  image-rendering: pixelated;
}
.btn:hover {
  background: #8b6330 !important;
  color: #fff8e0 !important;
  transform: translate(-1px,-1px);
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
  opacity: 1;
}

/* ── Page header: grass block top ───────────────────────── */
.page-header {
  border-bottom: 5px solid var(--dirt);
  position: relative;
}
.page-header::after {
  content: '';
  position: absolute;
  bottom: -11px; left:0; right:0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    #4caf50 0px,#4caf50 32px,
    #2e7d32 32px,#2e7d32 64px
  );
}

/* ── Section title ─────────────────────────────────────── */
.section-title {
  font-family: var(--font-h);
  font-size: .75rem;
  color: var(--muted);
}

/* ── Badge ───────────────────────────────────────────────── */
.badge {
  background: #1b5e20;
  border: 2px solid var(--grass);
  color: #a5d6a7;
  font-family: var(--font-h);
  font-size: .6rem;
}

/* ── Info box: enchanting table style ───────────────────── */
.info-box {
  border-left: 5px solid #7e57c2;
  background: linear-gradient(90deg, rgba(126,87,194,.08) 0%, var(--bg-card) 30%);
}

/* ── Server card ────────────────────────────────────────── */
.server-card { border-left: 4px solid var(--accent); }
.server-card__ip { color: var(--accent2); text-shadow: 1px 1px 0 #7a5e00; }

/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb { font-family: var(--font-h); font-size: .6rem; }