/* ==========================================================
   Guild Wars: Reforged Theme — Tyria Private Server
   Jade Tyria: deep teal forests, gilded ruins, mystic amber
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --bg:       #040a09;  /* near-black, teal-tinted */
  --bg-card:  #0c2018;  /* deep jade */
  --bg-hover: #132e22;
  --text:     #d8e8d0;  /* soft mint-cream */
  --muted:    #567868;  /* muted teal-grey */
  --border:   #183428;
  --accent:   #2a9d74;  /* jade teal */
  --accent2:  #e8c547;  /* gilded gold */
  --link:     #7ecaa0;  /* soft teal */
  --amber:    #d4820a;  /* Dwarven amber */
  --crimson:  #b03030;  /* flame/fire */
  --silver:   #aabcb4;  /* Ascalonian steel */
  --spirit:   #9060d0;  /* spirit energy purple */

  --font-h:    'Philosopher', Georgia, serif;
  --font-body: 'Crimson Pro', Georgia, serif;
  --font-mono: 'Share Tech Mono', monospace;
}

/* ── Background: Tyrian wilderness ───────────────────────── */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 15% 85%, rgba(42,157,116,.07) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 15%, rgba(232,197,71,.05) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(144,96,208,.03) 0%, transparent 60%);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.75;
}

/* ── Typography ──────────────────────────────────────────── */
h1,h2,h3,h4 { font-family: var(--font-h); letter-spacing: .03em; }

h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--accent2);
  text-shadow:
    0 0 20px rgba(232,197,71,.35),
    0 0 45px rgba(42,157,116,.2),
    2px 2px 4px #000;
}
h2 {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: var(--link);
  text-shadow: 0 0 12px rgba(126,202,160,.2), 1px 1px 3px #000;
}
h3 { font-size: 1.2rem; color: var(--accent2); }
h4 { font-size: 1rem;   color: var(--muted); }

/* ── Navigation ──────────────────────────────────────────── */
.site-header {
  background: rgba(4,10,9,.97);
  border-bottom: 1px solid rgba(42,157,116,.3);
  box-shadow: 0 2px 20px rgba(42,157,116,.08);
  position: relative;
}
/* Gold shimmer line under nav */
.site-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent2) 50%, transparent 100%);
}
.site-logo {
  font-family: var(--font-h) !important;
  color: var(--accent2) !important;
  text-shadow: 0 0 18px rgba(232,197,71,.4) !important;
  font-size: 1.1rem !important;
}
.site-nav a {
  font-family: var(--font-h);
  letter-spacing: .03em;
  color: var(--muted);
}
.site-nav a:hover,
.site-nav a.active {
  background: rgba(42,157,116,.1);
  border-color: rgba(42,157,116,.4);
  color: var(--link);
  opacity: 1;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(ellipse at center top, rgba(42,157,116,.12) 0%, transparent 55%),
    radial-gradient(ellipse at center, rgba(232,197,71,.05) 0%, transparent 65%),
    var(--bg);
  border-bottom: 1px solid rgba(42,157,116,.15);
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.8rem); }

/* ── Cards: carved jade panels ───────────────────────────── */
.game-card, .post-card, .section-card, .server-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  position: relative;
}
/* GW corner ornament — Tyrian crest star */
.section-card::before, .game-card::before {
  content: '✦';
  position: absolute;
  top: 8px; left: 10px;
  color: var(--accent);
  font-size: .65rem;
  opacity: .55;
}
.section-card::after, .game-card::after {
  content: '✦';
  position: absolute;
  top: 8px; right: 10px;
  color: var(--accent);
  font-size: .65rem;
  opacity: .55;
}
.game-card:hover, .section-card:hover {
  border-color: rgba(42,157,116,.45);
  box-shadow: 0 0 20px rgba(42,157,116,.16), 0 8px 40px rgba(0,0,0,.85);
  transform: translateY(-4px);
}
.post-card:hover { border-color: rgba(232,197,71,.3); }

/* ── Info box: Tyrian scroll ─────────────────────────────── */
.info-box {
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, rgba(42,157,116,.07) 0%, var(--bg-card) 35%);
}

/* ── Buttons: gilded stone ───────────────────────────────── */
.btn {
  font-family: var(--font-h) !important;
  letter-spacing: .04em !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.btn:hover {
  background: rgba(42,157,116,.14) !important;
  box-shadow: 0 0 16px rgba(42,157,116,.3) !important;
  color: var(--link) !important;
  opacity: 1;
}

/* ── Server card ─────────────────────────────────────────── */
.server-card { border: 1px solid var(--border); border-top: 2px solid var(--accent); }
.server-card__ip { color: var(--link); text-shadow: 0 0 8px rgba(126,202,160,.4); font-size: 1.15rem; }

/* ── GW profession colors ────────────────────────────────── */
.prof-warrior    { color: #c8a860; }
.prof-ranger     { color: #6aad4a; }
.prof-monk       { color: #d0d0a0; }
.prof-necromancer{ color: #9060d0; }
.prof-mesmer     { color: #c060a0; }
.prof-elementalist{ color: #d04030; }
.prof-assassin   { color: #607090; }
.prof-ritualist  { color: #40a0b0; }
.prof-paragon    { color: #d0b040; }
.prof-dervish    { color: #9090c0; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb { font-family: var(--font-h); font-size: .7rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--link); opacity: 1; }

/* ── Page content ────────────────────────────────────────── */
.page-content { font-family: var(--font-body); }
.page-content strong { color: var(--accent2); }
.page-content em     { color: var(--link); }
.page-header__eyebrow { color: var(--accent); }

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

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { border-top: 1px solid rgba(42,157,116,.2); }