/*
Theme Name: Slayville MC
Theme URI: https://slayvillemc.com/
Author: Slayville MC
Description: A cinematic dark-and-gold Minecraft community theme for Slayville II. Designed for a long-term Java + Bedrock crossplay SMP with economy, ranks, quests, custom enchants, crates, jobs, resource worlds, claims, and community features.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: slayvillemc
*/

:root {
  --sv-bg: #0b0b0d;
  --sv-panel: #121216;
  --sv-panel-2: #17171d;
  --sv-text: #f6f6f7;
  --sv-muted: #b8b8bf;
  --sv-orange: #ff9800;
  --sv-orange-2: #ffb02e;
  --sv-red: #ff4e5b;
  --sv-border: rgba(255, 152, 0, .46);
  --sv-shadow: 0 20px 60px rgba(0,0,0,.45);
  --sv-radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,152,0,.12), transparent 34rem),
    var(--sv-bg);
  color: var(--sv-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--sv-orange-2); }
img { max-width: 100%; height: auto; display: block; }

.sv-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.sv-section { padding: 84px 0; }
.sv-kicker { text-transform: uppercase; letter-spacing: .28em; color: var(--sv-orange-2); font-weight: 800; font-size: .82rem; }
.sv-section-title { margin: 8px 0 14px; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.05; }
.sv-section-copy { max-width: 760px; color: var(--sv-muted); font-size: 1.08rem; }

/* Header */
.sv-site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(11,11,13,.86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sv-nav-wrap { min-height: 72px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.sv-brand { font-weight: 1000; letter-spacing: .04em; font-size: 1.35rem; color: var(--sv-orange-2); text-shadow: 0 2px 0 #5b2c00; }
.sv-brand span { color: #fff; font-weight: 700; }
.sv-menu { list-style:none; display:flex; align-items:center; gap:28px; margin:0; padding:0; }
.sv-menu a { color:#ececf0; font-weight:700; font-size:.96rem; }
.sv-menu a:hover { color: var(--sv-orange-2); }
.sv-mobile-toggle { display:none; background:none; border:1px solid rgba(255,255,255,.14); color:#fff; border-radius:10px; padding:8px 11px; }

/* Hero */
.sv-hero {
  min-height: 760px;
  display:flex; align-items:center;
  position:relative; overflow:hidden;
  background:
    linear-gradient(90deg, rgba(7,7,10,.9) 0%, rgba(7,7,10,.56) 48%, rgba(7,7,10,.18) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(11,11,13,.1) 65%, var(--sv-bg) 100%),
    var(--sv-hero-image, url('assets/images/slayville-hero.svg')) center/cover no-repeat;
}
.sv-hero::after {
  content:""; position:absolute; inset:auto 0 0; height:180px;
  background:linear-gradient(transparent, var(--sv-bg)); pointer-events:none;
}
.sv-hero-inner { position:relative; z-index:2; padding:88px 0 110px; }
.sv-badge { display:inline-flex; gap:8px; align-items:center; border:1px solid var(--sv-border); background:rgba(13,13,17,.68); border-radius:999px; padding:8px 14px; color:#f7d8a1; font-size:.88rem; font-weight:800; }
.sv-hero h1 { margin:18px 0 8px; font-size:clamp(4rem, 10vw, 8.8rem); line-height:.85; letter-spacing:-.045em; text-transform:uppercase; color:#ff9f0a; text-shadow: 0 7px 0 #6a3200, 0 14px 28px rgba(0,0,0,.5); }
.sv-hero h1 small { display:block; color:#fff; font-size:.18em; letter-spacing:.22em; text-shadow:none; margin-top:24px; }
.sv-hero p { max-width:700px; color:#ececf0; font-size:clamp(1.05rem,2vw,1.3rem); }
.sv-cta-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.sv-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 22px; border-radius:12px; border:1px solid transparent; font-weight:900; cursor:pointer; transition:.2s ease; }
.sv-btn-primary { background:linear-gradient(#ffab22,#e97700); color:#111; box-shadow:0 10px 24px rgba(255,140,0,.24); }
.sv-btn-primary:hover { transform:translateY(-2px); color:#111; }
.sv-btn-secondary { background:rgba(12,12,16,.72); border-color:rgba(255,255,255,.18); color:#fff; }
.sv-btn-secondary:hover { border-color:var(--sv-orange); }
.sv-server-chip { margin-top:18px; color:#d7d7dc; font-size:.94rem; }
.sv-server-chip code { color:#fff; background:rgba(0,0,0,.36); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:6px 9px; }

/* Feature cards */
.sv-features { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:-54px; position:relative; z-index:5; }
.sv-feature { background:linear-gradient(180deg, rgba(24,24,30,.98), rgba(13,13,17,.98)); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:24px 18px; text-align:center; box-shadow:var(--sv-shadow); }
.sv-feature-icon { width:62px; height:62px; margin:0 auto 14px; border-radius:15px; display:grid; place-items:center; font-size:2rem; background:linear-gradient(145deg,#262632,#131318); border:1px solid rgba(255,152,0,.28); }
.sv-feature h3 { margin:0 0 6px; font-size:1rem; text-transform:uppercase; letter-spacing:.04em; }
.sv-feature p { margin:0; color:var(--sv-muted); font-size:.88rem; }

/* Welcome */
.sv-welcome-card { background:linear-gradient(145deg, rgba(20,20,25,.96), rgba(10,10,12,.96)); border:1px solid var(--sv-border); border-radius:var(--sv-radius); padding:46px; text-align:left; box-shadow:var(--sv-shadow); }
.sv-welcome-card p { max-width:none; margin:14px auto 0; color:#d5d5da; font-size:1.08rem; }
.sv-pill-row { margin-top:26px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.sv-pill { border:1px solid rgba(255,255,255,.1); background:#111116; border-radius:999px; padding:10px 14px; color:#ddd; font-weight:700; }

/* Split sections */
.sv-split { display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.sv-media-card { min-height:420px; border-radius:var(--sv-radius); overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#15151a; box-shadow:var(--sv-shadow); }
.sv-media-card img { width:100%; height:100%; object-fit:cover; }
.sv-list { display:grid; gap:12px; margin-top:22px; }
.sv-list-item { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); }
.sv-list-item strong { display:block; }
.sv-list-item span { color:var(--sv-muted); font-size:.94rem; }

/* CTA */
.sv-join { text-align:center; background:linear-gradient(145deg,#15151b,#0d0d10); border-top:1px solid rgba(255,152,0,.18); border-bottom:1px solid rgba(255,152,0,.18); }
.sv-join h2 { font-size:clamp(2.4rem,6vw,5.5rem); margin:8px 0 12px; text-transform:uppercase; line-height:.95; }
.sv-join h2 span { color:var(--sv-orange); }
.sv-join p { color:var(--sv-muted); max-width:740px; margin:0 auto 24px; }

/* Interior page + blog hero */
.sv-inner-hero {
  min-height:340px;
  display:flex;
  align-items:flex-end;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(7,7,10,.30) 0%, rgba(7,7,10,.72) 64%, var(--sv-bg) 100%),
    linear-gradient(90deg, rgba(7,7,10,.72), rgba(7,7,10,.20)),
    var(--sv-hero-image, url('assets/images/slayville-hero.svg')) center/cover no-repeat;
}
.sv-inner-hero::after {
  content:""; position:absolute; inset:auto 0 0; height:110px;
  background:linear-gradient(transparent, var(--sv-bg)); pointer-events:none;
}
.sv-inner-hero-content { position:relative; z-index:2; padding:90px 0 66px; }
.sv-inner-hero .sv-kicker { margin-bottom:8px; }
.sv-inner-title { margin:0; line-height:.92; text-transform:uppercase; letter-spacing:-.035em; color:#fff; text-shadow:0 5px 22px rgba(0,0,0,.5); }
.sv-inner-subtitle { margin:14px 0 0; max-width:720px; color:#d7d7dd; font-size:1.05rem; }

/* Page content */
.sv-page { padding:48px 0 100px; }
.sv-content { max-width:none; }
.sv-content-card {
  background:linear-gradient(145deg, rgba(20,20,25,.97), rgba(10,10,12,.97));
  border:1px solid rgba(255,152,0,.30);
  border-radius:var(--sv-radius);
  padding:clamp(26px,5vw,54px);
  box-shadow:var(--sv-shadow);
}
.sv-content h1,.sv-content h2,.sv-content h3,.sv-content h4 { line-height:1.15; color:#fff; }
.sv-content h2 { margin-top:2em; font-size:clamp(1.7rem,3vw,2.4rem); }
.sv-content h3 { margin-top:1.7em; color:var(--sv-orange-2); }
.sv-content p,.sv-content li { color:#d7d7dd; }
.sv-content a { color:var(--sv-orange-2); text-decoration:underline; text-underline-offset:3px; }
.sv-content ul,.sv-content ol { padding-left:1.4rem; }
.sv-content li::marker { color:var(--sv-orange); font-weight:800; }
.sv-content hr { border:0; border-top:1px solid rgba(255,255,255,.10); margin:2rem 0; }
.sv-content blockquote { margin:2rem 0; padding:16px 20px; border-left:4px solid var(--sv-orange); background:rgba(255,152,0,.06); color:#eee; }
.sv-content table { width:100%; border-collapse:collapse; margin:1.8rem 0; overflow:hidden; border-radius:12px; }
.sv-content th,.sv-content td { padding:12px 14px; border:1px solid rgba(255,255,255,.10); text-align:left; }
.sv-content th { background:rgba(255,152,0,.10); color:#fff; }

/* Blog */
.sv-post-grid { display:grid; gap:22px; }
.sv-post-card { background:linear-gradient(145deg, rgba(20,20,25,.97), rgba(10,10,12,.97)); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:30px; box-shadow:var(--sv-shadow); }
.sv-post-card h2 { margin:4px 0 8px; font-size:clamp(1.5rem,3vw,2.2rem); }
.sv-post-card h2 a { color:#fff; text-decoration:none; }
.sv-post-card h2 a:hover { color:var(--sv-orange-2); }
.sv-post-meta { color:#92929b; font-size:.9rem; margin-bottom:12px; }
.sv-post-excerpt { color:#c9c9cf; }
.sv-read-more { display:inline-flex; margin-top:8px; color:var(--sv-orange-2); font-weight:800; }
.sv-pagination { margin-top:30px; }
.sv-pagination .nav-links { display:flex; gap:8px; flex-wrap:wrap; }
.sv-pagination .page-numbers { padding:8px 12px; border:1px solid rgba(255,255,255,.10); border-radius:8px; background:#121217; }
.sv-pagination .current { border-color:var(--sv-orange); color:var(--sv-orange-2); }

/* Footer */
.sv-footer { padding:34px 0; border-top:1px solid rgba(255,255,255,.08); background:#09090b; color:#a7a7af; }
.sv-footer-row { display:flex; justify-content:space-between; gap:20px; align-items:center; flex-wrap:wrap; }
.sv-footer strong { color:#fff; }

@media (max-width: 980px) {
  .sv-features { grid-template-columns:repeat(3,1fr); }
  .sv-split { grid-template-columns:1fr; }
  .sv-menu { display:none; position:absolute; top:72px; left:20px; right:20px; flex-direction:column; align-items:stretch; padding:18px; background:#111116; border:1px solid rgba(255,255,255,.1); border-radius:14px; }
  .sv-menu.is-open { display:flex; }
  .sv-mobile-toggle { display:block; }
}
@media (max-width: 640px) {
  .sv-container { width:min(100% - 24px, 1180px); }
  .sv-hero { min-height:680px; }
  .sv-features { grid-template-columns:1fr 1fr; margin-top:-34px; }
  .sv-welcome-card { padding:30px 20px; }
  .sv-section { padding:60px 0; }
  .sv-hero h1 { font-size:clamp(3.4rem,20vw,6rem); }
  .sv-inner-hero { min-height:280px; }
  .sv-inner-hero-content { padding:70px 0 48px; }
  .sv-content-card { border-radius:16px; }
}

/* =========================================================
   SLAYVILLE II - WHAT'S NEW
   ========================================================= */


/* -----------------------------------------
   POST CARDS
   ----------------------------------------- */

.sv-post-card {
    overflow: hidden;
}


/* Content inside card */

.sv-post-card-content {
    padding: 0;
}


/* -----------------------------------------
   FEATURED IMAGE - POST LIST
   ----------------------------------------- */

.sv-post-featured-image {
    display: block;
    width: 100%;
    margin: 0 0 20px;
    overflow: hidden;

    border-radius: 10px;
    border: 1px solid rgba(243, 156, 18, 0.30);

    background: #0e0f12;
}

.sv-post-featured-img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;
    object-fit: cover;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


/* Image hover */

.sv-post-featured-image:hover .sv-post-featured-img {
    transform: scale(1.02);
    opacity: 0.92;
}


/* -----------------------------------------
   POST META
   ----------------------------------------- */

.sv-post-meta {
    margin-bottom: 7px;

    color: #9da3ad;
    font-size: 13px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* -----------------------------------------
   POST TITLE
   ----------------------------------------- */

.sv-post-title {
    margin-top: 0;
    margin-bottom: 12px;
}

.sv-post-title a {
    color: #f39c12;
    text-decoration: none;
}

.sv-post-title a:hover {
    color: #ffb347;
}


/* -----------------------------------------
   EXCERPT
   ----------------------------------------- */

.sv-post-excerpt {
    color: #d7d9df;
    line-height: 1.7;
}

.sv-post-excerpt p {
    margin-top: 0;
    margin-bottom: 16px;
}


/* -----------------------------------------
   READ MORE
   ----------------------------------------- */

.sv-read-more {
    display: inline-block;

    color: #f39c12;
    font-weight: 700;
    text-decoration: none;

    transition: color 0.2s ease;
}

.sv-read-more:hover {
    color: #ffb347;
}


/* =========================================================
   SINGLE WHAT'S NEW POST
   ========================================================= */

.sv-single-featured-image {
    margin-bottom: 28px;

    overflow: hidden;

    border-radius: 10px;
    border: 1px solid rgba(243, 156, 18, 0.30);

    background: #0e0f12;
}

.sv-single-featured-img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;
    object-fit: cover;
}


/* Main post text */

.sv-single-post-content {
    color: #d7d9df;
    line-height: 1.75;
}


/* Post headings */

.sv-single-post-content h2,
.sv-single-post-content h3,
.sv-single-post-content h4 {
    color: #ffffff;
}


/* Post links */

.sv-single-post-content a {
    color: #f39c12;
}

.sv-single-post-content a:hover {
    color: #ffb347;
}


/* -----------------------------------------
   MOBILE
   ----------------------------------------- */

@media (max-width: 700px) {

    .sv-post-featured-image {
        margin-bottom: 16px;
    }

    .sv-single-featured-image {
        margin-bottom: 20px;
    }

}