/*
Theme Name: PunterScore Blog
Theme URI: https://www.punterscore.com/blog/
Author: Beta Web Analysis Limited
Description: Minimal editorial blog theme for PunterScore — homepage post feed only, no sidebar, no menus, no categories.
Version: 1.0.0
License: Proprietary
Text Domain: punterscore-blog
*/

/* ══ DESIGN TOKENS (matches punterscore.com) ══════ */
:root {
  --blue:       #2563eb;
  --blue-lt:    #60a5fa;
  --blue-dk:    #1d4ed8;
  --blue-muted: rgba(37,99,235,.1);
  --blue-bdr:   rgba(37,99,235,.22);

  --ff-serif:   'Playfair Display', Georgia, serif;
  --ff-sans:    'DM Sans', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', 'Courier New', monospace;

  --r:          8px;
  --r-sm:       4px;
  --r-lg:       14px;
  --max-w:      1120px;
  --t:          .18s ease;
}

/* ══ DARK THEME (default) ══════════════════════════ */
[data-theme="dark"] {
  --bg:       #07101f;
  --bg2:      #0b1628;
  --bg3:      #0f1d34;
  --card:     #0c1830;
  --chover:   #101f3c;
  --border:   rgba(255,255,255,.07);
  --text:     #e8f0fb;
  --text2:    #90a8c8;
  --text3:    #445972;
  --text4:    #253448;
  --navbg:    rgba(7,16,31,.97);
  --rule:     rgba(255,255,255,.065);
  --acc:      var(--blue);
  --acc-lt:   var(--blue-lt);
  --acc-dk:   var(--blue-dk);
  --acc-m:    var(--blue-muted);
  --acc-b:    var(--blue-bdr);
}

/* ══ LIGHT THEME ═══════════════════════════════════ */
[data-theme="light"] {
  --bg:       #f4f7ff;
  --bg2:      #ffffff;
  --bg3:      #e6edf8;
  --card:     #ffffff;
  --chover:   #edf2fc;
  --border:   rgba(0,0,0,.08);
  --text:     #0d1626;
  --text2:    #354460;
  --text3:    #7a8eaa;
  --text4:    #b8c8dc;
  --navbg:    rgba(244,247,255,.98);
  --rule:     rgba(0,0,0,.07);
  --acc:      var(--blue-dk);
  --acc-lt:   var(--blue);
  --acc-dk:   #1e3a8a;
  --acc-m:    rgba(29,78,216,.07);
  --acc-b:    rgba(29,78,216,.2);
}

/* ══ RESET ═════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden }
body {
  font-family: var(--ff-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .3s, color .3s;
}
a { color:inherit; text-decoration:none }
ul { list-style:none }
img { max-width:100%; display:block }

.container { width:100%; max-width:var(--max-w); margin:0 auto; padding:0 clamp(16px,4vw,40px) }
.section   { padding:clamp(40px,7vw,80px) 0 }

::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px }

/* ══ NAV ═══════════════════════════════════════════ */
.nav-wrap {
  position: sticky; top:0; z-index:900;
  background: var(--navbg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-main {
  display:flex; align-items:center; justify-content:space-between;
  height:clamp(58px,8vw,70px);
  gap:16px; flex-wrap:wrap;
}
.logo { display:flex; flex-direction:column; align-items:flex-start; text-decoration:none }
.logo-wordmark {
  font-family: var(--ff-serif); font-size:clamp(1.05rem,2.2vw,1.4rem);
  font-weight:900; letter-spacing:-.02em; line-height:1; color:var(--text);
}
.logo-wordmark em { color:var(--acc); font-style:normal }
.nav-links { display:flex; align-items:center; gap:4px }
.nav-right { display:flex; align-items:center; gap:10px; margin-left:12px }
.theme-btn {
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border); background:transparent;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; color:var(--text3); transition:all var(--t); flex-shrink:0;
}
.theme-btn:hover { border-color:var(--acc); color:var(--acc) }

.burger {
  display:none; flex-direction:column; gap:5px; padding:8px 4px;
  background:none; border:none; flex-shrink:0;
}
.burger span { display:block; width:22px; height:1.5px; background:var(--text); border-radius:2px; transition:all var(--t) }
.burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.burger.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

/* ══ MOBILE DRAWER ═════════════════════════════════ */
.mob-overlay {
  display:none; position:fixed; inset:0; z-index:1000;
  background: var(--bg);
  flex-direction:column; overflow-y:auto;
}
.mob-overlay.open { display:flex; animation:mobopen .2s ease }
@keyframes mobopen { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }
.mob-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--rule); flex-shrink:0;
}
.mob-logo { font-family:var(--ff-serif); font-size:1.2rem; font-weight:900; color:var(--text); letter-spacing:-.02em }
.mob-logo em { color:var(--acc); font-style:normal }
.mob-close {
  width:38px; height:38px; border-radius:50%;
  background:var(--chover); border:none; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:var(--text); cursor:pointer; transition:background var(--t);
}
.mob-close:hover { background:var(--acc-m) }
.mob-nav { flex:1; padding:20px; display:flex; flex-direction:column }
.mob-link {
  font-family:var(--ff-sans); font-size:1.05rem; font-weight:700; color:var(--text2);
  padding:15px 0; border-bottom:1px solid var(--rule); transition:color var(--t);
}
.mob-link:last-of-type { border-bottom:none }
.mob-link:hover { color:var(--text) }
.mob-footer { padding:16px 20px 24px; border-top:1px solid var(--rule); flex-shrink:0 }
.theme-btn--mobile {
  width:100%; height:auto; border-radius:var(--r-sm); padding:12px;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.theme-btn-lbl { font-family:var(--ff-sans); font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase }
.nav-a {
  font-family: var(--ff-sans); font-size:.76rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text3);
  padding:9px 16px; border-radius:var(--r-sm); transition:color var(--t), background var(--t);
}
.nav-a:hover { color:var(--text); background:rgba(255,255,255,.04) }
.nav-a.is-active { color:var(--acc) }

/* ══ BLOG HERO ═════════════════════════════════════ */
.blog-hero {
  padding: clamp(44px,7vw,72px) 0 clamp(30px,5vw,48px);
  border-bottom: 1px solid var(--rule);
}
.kicker {
  font-family: var(--ff-mono); font-size:.6rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--acc);
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.kicker::before { content:''; display:block; width:22px; height:2px; background:var(--acc) }
.blog-hero-hed {
  font-family: var(--ff-serif); font-size:clamp(2rem,4.5vw,3.2rem);
  font-weight:900; line-height:1.02; letter-spacing:-.03em; color:var(--text);
}
.blog-hero-sub {
  font-family: var(--ff-sans); font-size:clamp(.85rem,1vw,.95rem);
  color:var(--text2); margin-top:12px; line-height:1.7; max-width:560px;
}

/* ══ BLOG GRID ═════════════════════════════════════ */
.blog-listing-section { background:var(--bg) }
.blog-grid-full {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.blog-card {
  display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden;
  text-decoration:none; color:var(--text);
  transition:border-color var(--t), transform var(--t), box-shadow var(--t);
}
.blog-card:hover { border-color:var(--acc-b); transform:translateY(-3px); box-shadow:0 8px 30px rgba(0,0,0,.22) }
.blog-img { width:100%; aspect-ratio:16/9; background:var(--bg3); position:relative; overflow:hidden; flex-shrink:0 }
.blog-img-bg { position:absolute; inset:0; background:linear-gradient(135deg,var(--bg3) 0%,var(--chover) 100%) }
.blog-img-num {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-serif); font-size:clamp(2rem,4vw,3rem); font-weight:900;
  color:var(--acc); opacity:.15; letter-spacing:-.04em;
}
.blog-img-real { width:100%; height:100%; object-fit:cover }
.blog-body { padding:clamp(16px,2vw,20px); display:flex; flex-direction:column; gap:8px; flex:1 }
.blog-title {
  font-family:var(--ff-serif); font-size:clamp(.95rem,1.1vw,1.08rem);
  font-weight:900; letter-spacing:-.02em; line-height:1.25; color:var(--text);
}
.blog-excerpt {
  font-family:var(--ff-sans); font-size:clamp(.74rem,.84vw,.8rem);
  color:var(--text2); line-height:1.7; flex:1;
}
.blog-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:12px; border-top:1px solid var(--rule); margin-top:auto; gap:8px; flex-wrap:wrap;
}
.blog-byline { font-family:var(--ff-sans); font-size:.66rem; color:var(--text3) }
.blog-byline strong { color:var(--text2); font-weight:600 }
.blog-read { font-family:var(--ff-mono); font-size:.6rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); white-space:nowrap }

.no-posts { font-family:var(--ff-sans); color:var(--text3); padding:40px 0; text-align:center }

/* ══ PAGINATION ════════════════════════════════════ */
.blog-pagination { display:flex; justify-content:center; gap:8px; margin-top:40px; flex-wrap:wrap }
.blog-pagination .page-numbers {
  font-family:var(--ff-mono); font-size:.7rem; font-weight:600;
  color:var(--text3); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:8px 13px; transition:all var(--t);
}
.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current { color:var(--acc); border-color:var(--acc-b); background:var(--acc-m) }

/* ══ SINGLE POST ═══════════════════════════════════ */
.single-post-section { background:var(--bg) }
.single-post-wrap {
  max-width:760px; margin:0 auto; background:var(--card);
  border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(26px,4vw,48px) clamp(20px,5vw,52px);
}
.single-post-meta {
  font-family:var(--ff-mono); font-size:.6rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text3);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px;
}
.single-post-meta strong { color:var(--text2) }
.single-post-title {
  font-family:var(--ff-serif); font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:900; line-height:1.12; letter-spacing:-.025em; color:var(--text);
  margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--rule);
}
.single-post-content {
  font-family:var(--ff-sans); font-size:clamp(.86rem,.95vw,.94rem);
  color:var(--text2); line-height:1.85;
}
.single-post-content p { margin-bottom:18px }
.single-post-content h2, .single-post-content h3 { font-family:var(--ff-serif); color:var(--text); margin:28px 0 12px; font-weight:900; letter-spacing:-.02em }
.single-post-content a { color:var(--acc-lt); text-decoration:underline; text-decoration-color:var(--acc-b) }
.single-post-content strong { color:var(--text); font-weight:700 }
.single-post-content img { border-radius:var(--r-sm); margin:16px 0 }

/* ══ RELATED ARTICLES ══════════════════════════════ */
.related-articles { max-width:760px; margin:36px auto 0 }
.related-articles-title {
  font-family:var(--ff-mono); font-size:.58rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--acc);
  margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--rule);
}
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.related-card {
  display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
  text-decoration:none; color:var(--text); transition:border-color var(--t), transform var(--t);
}
.related-card:hover { border-color:var(--acc-b); transform:translateY(-2px) }
.related-img { width:100%; aspect-ratio:16/9; background:var(--bg3); position:relative; overflow:hidden }
.related-img-bg { position:absolute; inset:0; background:linear-gradient(135deg,var(--bg3) 0%,var(--chover) 100%) }
.related-img-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--ff-serif); font-size:1.6rem; font-weight:900; color:var(--acc); opacity:.15 }
.related-img-real { width:100%; height:100%; object-fit:cover }
.related-body { padding:12px 14px; display:flex; flex-direction:column; gap:6px }
.related-title { font-family:var(--ff-serif); font-size:.85rem; font-weight:900; line-height:1.3; letter-spacing:-.01em; color:var(--text) }
.related-date { font-family:var(--ff-mono); font-size:.6rem; color:var(--text3) }
@media (max-width:640px) { .related-grid { grid-template-columns:1fr } }

/* ══ FOOTER ════════════════════════════════════════ */
.footer { background:var(--bg2) }
.footer-toprule { height:3px; background:linear-gradient(90deg,transparent,var(--blue-dk),var(--blue),var(--blue-lt),var(--blue),var(--blue-dk),transparent) }
.footer-inner {
  padding:clamp(28px,4vw,40px) clamp(16px,4vw,40px);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
}
.footer-mast { font-family:var(--ff-serif); font-size:clamp(1rem,1.4vw,1.2rem); font-weight:900; letter-spacing:-.02em; color:var(--text) }
.footer-mast em { color:var(--acc); font-style:normal }
.footer-copy { font-family:var(--ff-mono); font-size:.66rem; color:var(--text4) }

/* ══ RESPONSIVE ════════════════════════════════════ */
@media (max-width:1024px) {
  .blog-grid-full { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:640px) {
  .blog-grid-full { grid-template-columns:1fr }
  .nav-main { height:auto; padding:14px clamp(16px,4vw,40px) }
  .nav-right { display:none }
  .burger { display:flex }
}