/*
Theme Name: JnK Plugins
Theme URI: https://jnkplugins.com
Author: JnK Plugins
Author URI: https://jnkplugins.com
Description: Lightweight brand-matched theme for the jnkplugins.com blog and docs. Mirrors the marketing site (Inter, slate/indigo) with clean long-form typography.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: jnk
*/

:root{
  --ink:#0f172a; --ink-soft:#334155; --muted:#64748b; --faint:#94a3b8;
  --line:#e2e8f0; --line-soft:#f1f5f9; --bg:#ffffff; --bg-soft:#f8fafc;
  --indigo:#4f46e5; --indigo-600:#4338ca; --violet:#7c3aed;
  --radius:16px; --wrap:1120px; --prose:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--indigo); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

/* Header */
.site-header{border-bottom:1px solid var(--line); background:rgba(255,255,255,.85); backdrop-filter:blur(8px); position:sticky; top:0; z-index:40}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:64px; gap:24px}
.brand{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,#0f172a,#334155); color:#fff}
.nav{display:flex; align-items:center; gap:26px; font-size:14px; font-weight:500; color:var(--ink-soft)}
.nav a{color:var(--ink-soft)}
.nav a:hover{color:var(--ink); text-decoration:none}
.nav .cta{display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:9px; background:var(--ink); color:#fff; font-weight:600}
.nav .cta:hover{background:#1e293b; text-decoration:none}
@media(max-width:720px){ .nav .hide-sm{display:none} }

/* Page shells */
.page-head{padding:56px 0 12px}
.page-head h1{font-size:2.4rem; line-height:1.1; letter-spacing:-.02em; margin:0 0 10px; font-weight:800}
.page-head p{color:var(--muted); font-size:1.075rem; margin:0; max-width:var(--prose)}
.eyebrow{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--indigo); font-weight:700}
main{padding-bottom:72px}

/* Post list */
.post-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; margin-top:40px}
.card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg); transition:border-color .15s, transform .15s, box-shadow .15s}
.card:hover{border-color:#cbd5e1; transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(15,23,42,.15)}
.card a{color:inherit}
.card a:hover{text-decoration:none}
.card .thumb{aspect-ratio:16/9; background:linear-gradient(135deg,#eef2ff,#faf5ff); object-fit:cover; width:100%}
.card .body{padding:20px; display:flex; flex-direction:column; gap:8px}
.card .cat{font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--violet)}
.card h2{font-size:1.15rem; line-height:1.3; margin:0; font-weight:700}
.card .excerpt{color:var(--muted); font-size:.925rem; margin:0}
.card .meta{color:var(--faint); font-size:.8rem; margin-top:auto; padding-top:6px}

/* Article (single / page / docs prose) */
.article{max-width:var(--prose); margin:0 auto}
.article .cat{color:var(--violet); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.75rem}
.article h1.title{font-size:2.5rem; line-height:1.12; letter-spacing:-.02em; margin:.35em 0 .3em; font-weight:800}
.article .byline{color:var(--faint); font-size:.9rem; margin-bottom:28px}
.prose{font-size:1.075rem; color:var(--ink-soft)}
.prose > *{margin:1.15em 0}
.prose h2{font-size:1.6rem; line-height:1.25; color:var(--ink); font-weight:750; letter-spacing:-.01em; margin:1.8em 0 .5em}
.prose h3{font-size:1.25rem; color:var(--ink); font-weight:700; margin:1.5em 0 .4em}
.prose a{color:var(--indigo); text-decoration:underline; text-underline-offset:2px}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.4em 0}
.prose img{border-radius:12px; border:1px solid var(--line)}
.prose blockquote{margin:1.5em 0; padding:.5em 1.2em; border-left:3px solid var(--indigo); color:var(--muted); font-style:italic}
.prose code{background:var(--bg-soft); border:1px solid var(--line); border-radius:6px; padding:.12em .4em; font-size:.9em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.prose pre{background:#0f172a; color:#e2e8f0; padding:18px 20px; border-radius:12px; overflow-x:auto}
.prose pre code{background:none; border:0; color:inherit; padding:0}
.prose table{width:100%; border-collapse:collapse; font-size:.95rem; display:block; overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top}
.prose thead th{background:var(--bg-soft); font-weight:700}
.prose tbody tr:nth-child(even){background:var(--bg-soft)}

/* Docs two-column */
.docs-layout{display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start; margin-top:40px}
.docs-nav{position:sticky; top:88px; font-size:.925rem}
.docs-nav h4{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:0 0 8px}
.docs-nav a{display:block; padding:5px 0; color:var(--ink-soft)}
.docs-nav a.current{color:var(--indigo); font-weight:600}
@media(max-width:860px){ .docs-layout{grid-template-columns:1fr} .docs-nav{position:static} }

/* Footer */
.site-footer{border-top:1px solid var(--line); background:var(--bg-soft); padding:44px 0; margin-top:40px}
.site-footer .wrap{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; color:var(--faint); font-size:.9rem}
.site-footer a{color:var(--ink-soft)}
.site-footer a:hover{color:var(--ink)}

/* Pagination */
.pagination{display:flex; gap:8px; margin-top:40px; flex-wrap:wrap}
.pagination .page-numbers{padding:7px 13px; border:1px solid var(--line); border-radius:9px; color:var(--ink-soft); font-size:.9rem}
.pagination .current{background:var(--ink); color:#fff; border-color:var(--ink)}
.pagination a:hover{border-color:#cbd5e1; text-decoration:none}