/* ── Reset & Variables ─────────────────────────────────── */
:root {
    --color-bg:        #0f1117;
    --color-surface:   #1a1d27;
    --color-border:    #2a2d3a;
    --color-text:      #e1e2e8;
    --color-text-muted:#8b8d9a;
    --color-primary:   #6c5ce7;
    --color-primary-hover: #7c6ff7;
    --color-accent:    #00cec9;
    --color-white:     #ffffff;

    --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Segoe UI', Roboto, sans-serif;

    --radius:   8px;
    --radius-lg:16px;
    --shadow:   0 2px 12px rgba(0,0,0,.3);

    --container: 1140px;
    --gap:       24px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--color-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--color-primary-hover); }

/* ── Container ────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gap);
}

/* ── Buttons ──────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    border: 2px solid transparent;
}

.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
}
.btn--primary:hover {
    background: var(--color-primary-hover);
    color: var(--color-white);
}

.btn--outline {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: transparent;
}
.btn--outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ── Posts Grid ────────────────────────────────────────── */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gap);
}

.post-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: transform .2s, box-shadow .2s;
}
.post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.post-card__thumb img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-card__body {
    padding: 20px;
}

.post-card__title {
    font-size: 18px;
    margin-bottom: 8px;
}
.post-card__title a {
    color: var(--color-text);
}
.post-card__title a:hover {
    color: var(--color-primary);
}

.post-card__excerpt {
    color: var(--color-text-muted);
    font-size: 14px;
}

/* ── Section Titles ───────────────────────────────────── */
.section-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 32px;
    color: var(--color-white);
}

/* ── Entry Content (Gutenberg output) ─────────────────── */
.entry-content {
    font-size: 17px;
    line-height: 1.8;
}
.entry-content p        { margin-bottom: 1.2em; }
.entry-content h2       { font-size: 24px; margin: 2em 0 .8em; color: var(--color-white); }
.entry-content h3       { font-size: 20px; margin: 1.5em 0 .6em; color: var(--color-white); }
.entry-content ul,
.entry-content ol       { margin: 0 0 1.2em 1.4em; }
.entry-content img      { border-radius: var(--radius); margin: 1.5em 0; }
.entry-content blockquote {
    border-left: 4px solid var(--color-primary);
    padding: 12px 20px;
    margin: 1.5em 0;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* ── Pagination ───────────────────────────────────────── */
.pagination {
    margin-top: 40px;
    text-align: center;
}
.pagination .nav-links a,
.pagination .nav-links span {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 2px;
    border-radius: var(--radius);
    font-size: 14px;
}
.pagination .nav-links a {
    background: var(--color-surface);
    color: var(--color-text);
}
.pagination .nav-links .current {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ── 404 ──────────────────────────────────────────────── */
.page-404 {
    text-align: center;
    padding: 120px 0;
}
.page-404 h1 {
    font-size: 96px;
    color: var(--color-primary);
    margin-bottom: 12px;
}
.page-404 p {
    font-size: 20px;
    color: var(--color-text-muted);
    margin-bottom: 32px;
}