/*
Theme Name: FDVS Blog
Theme URI: https://www.fdvs.org
Author: Beta Web Analysis Limited
Author URI: https://www.fdvs.org
Description: A reading-focused blog companion theme for FDVS — Football Data Vision System. Deliberately built as a blog, not a news feed: one column, generous spacing, longform-first. Navigation is intentionally minimal — only the logo, Home, and links to individual articles.
Version: 1.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: fdvs-blog
*/

/* ============================================================
   Design tokens — same palette and type as fdvs.org itself, so
   this reads as a genuine FDVS property, not a generic WordPress
   blog. Layout is what changes here, not the brand.
   ============================================================ */
:root{
  --ink:        #150E08;
  --pitch:      #211609;
  --pitch-line: #493018;
  --card:       #231708;
  --card-hi:    #2D1E0D;

  --signal:     #C05800;
  --signal-dim: #713600;

  --text-hi:  #FBF3E4;
  --text-mid: #C7AF93;
  --text-low: #8C6F52;

  --f-display: 'Space Grotesk', sans-serif;
  --f-body:    'Inter', sans-serif;
  --f-mono:    'IBM Plex Mono', monospace;

  --radius: 3px;
  --maxw: 1180px;
  --read-w: 700px; /* article reading column -- kept under ~80 characters per line */
}

html[data-theme="light"]{
  --ink:        #FAF8EF;
  --pitch:      #F3EFE0;
  --pitch-line: #DED4B4;
  --card:       #FDFCF6;
  --card-hi:    #F3EFE0;

  --signal:     #B14E00;
  --signal-dim: #713600;

  --text-hi:  #2A1A0A;
  --text-mid: #5C4A32;
  --text-low: #8A7856;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ink); color:var(--text-mid);
  font-family:var(--f-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--signal); color:var(--ink); }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.read{ max-width:var(--read-w); margin:0 auto; padding:0 24px; }

/* ---------- Header: logo + Home only, by design ---------- */
.site-header{
  border-bottom:1px solid var(--pitch-line);
  padding:22px 0;
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; }
.site-logo{ display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:700; font-size:20px; color:var(--text-hi); }
.site-logo .logo-mark{ width:26px; height:26px; border:1.5px solid var(--signal); border-radius:50%; position:relative; flex-shrink:0; }
.site-logo .logo-mark::after{ content:""; position:absolute; top:50%; left:50%; width:50%; height:1.5px; background:var(--signal); transform-origin:left center; }
.site-logo small{ display:block; font-family:var(--f-mono); font-weight:400; font-size:9.5px; letter-spacing:.14em; color:var(--text-low); text-transform:uppercase; margin-top:2px; }

.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav a{
  font-family:var(--f-mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-mid); transition:color .15s ease;
}
.main-nav a:hover{ color:var(--text-hi); }

.nav-actions{ display:flex; align-items:center; gap:14px; }

/* Theme toggle — sliding switch, left = dark, right = light. Same
   markup and behavior as the main fdvs.org site, so switching themes
   here feels like the same product, not a separate skin. */
.theme-switch{
  --sw-w: 52px; --sw-h: 26px; --sw-pad: 3px;
  width:var(--sw-w); height:var(--sw-h);
  border-radius:99px; border:1px solid var(--pitch-line); background:var(--pitch);
  position:relative; cursor:pointer; flex-shrink:0; padding:0;
  transition:background .2s ease, border-color .2s ease;
}
.theme-switch:hover{ border-color:var(--signal-dim); }
.theme-switch .switch-track{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
  padding:0 6px; font-size:10px; pointer-events:none; opacity:0.75;
}
.theme-switch .switch-knob{
  position:absolute; top:var(--sw-pad); left:var(--sw-pad);
  width:calc(var(--sw-h) - (var(--sw-pad) * 2)); height:calc(var(--sw-h) - (var(--sw-pad) * 2));
  border-radius:50%; background:var(--signal); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:11px;
  transition:transform .22s ease, background .2s ease;
}
html[data-theme="light"] .theme-switch .switch-knob{
  transform:translateX(calc(var(--sw-w) - var(--sw-h)));
}
.theme-switch .knob-moon{ display:block; }
.theme-switch .knob-sun{ display:none; }
html[data-theme="light"] .theme-switch .knob-moon{ display:none; }
html[data-theme="light"] .theme-switch .knob-sun{ display:block; }

/* Mobile hamburger toggle -- CSS-only (checkbox + label), no JS
   framework needed for something this small. */
.menu-toggle{ display:none; }
.menu-toggle-label{
  display:none; width:38px; height:38px; border:1px solid var(--pitch-line); border-radius:var(--radius);
  align-items:center; justify-content:center; cursor:pointer; background:var(--card);
}
.menu-toggle-label span,
.menu-toggle-label span::before,
.menu-toggle-label span::after{
  content:""; display:block; width:16px; height:2px; background:var(--text-hi); position:relative; transition:transform .2s ease, opacity .2s ease;
}
.menu-toggle-label span::before{ position:absolute; top:-5px; }
.menu-toggle-label span::after{ position:absolute; top:5px; }
.menu-toggle:checked ~ .menu-toggle-label span{ background:transparent; }
.menu-toggle:checked ~ .menu-toggle-label span::before{ transform:translateY(5px) rotate(45deg); }
.menu-toggle:checked ~ .menu-toggle-label span::after{ transform:translateY(-5px) rotate(-45deg); }

@media (max-width: 640px){
  .main-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--card); border-bottom:1px solid var(--pitch-line);
    padding:8px 24px 18px;
  }
  .main-nav a{ padding:12px 0; width:100%; border-top:1px solid var(--pitch-line); }
  .main-nav a:first-child{ border-top:0; }
  .menu-toggle-label{ display:inline-flex; }
  .menu-toggle:checked ~ .main-nav{ display:flex; }
  .site-header{ position:relative; }
}

/* ---------- Blog listing: one reading column, generous spacing.
   Deliberately not a dense grid -- that's the "news" look this
   theme exists to avoid. Each entry reads like a real post
   preview, not a headline tile. ---------- */
.post-list{ max-width:var(--read-w); margin:0 auto; padding:56px 24px 80px; }
.post-preview{ padding:40px 0; border-bottom:1px solid var(--pitch-line); }
.post-preview:first-child{ padding-top:0; }
.post-preview:last-child{ border-bottom:0; }
.post-preview .post-thumb{ border-radius:var(--radius); overflow:hidden; margin-bottom:22px; border:1px solid var(--pitch-line); }
.post-preview .post-meta{ font-family:var(--f-mono); font-size:12px; letter-spacing:.05em; color:var(--text-low); text-transform:uppercase; margin-bottom:12px; }
.post-preview h2{ font-family:var(--f-display); font-size:28px; line-height:1.25; color:var(--text-hi); margin-bottom:14px; }
.post-preview h2 a:hover{ color:var(--signal); }
.post-preview .post-excerpt{ font-size:16.5px; line-height:1.7; color:var(--text-mid); margin-bottom:16px; }
.post-preview .read-more{ font-family:var(--f-mono); font-size:13px; color:var(--signal); }
.post-preview .read-more:hover{ text-decoration:underline; }

.archive-header{ max-width:var(--read-w); margin:0 auto; padding:56px 24px 0; }
.archive-header h1{ font-family:var(--f-display); font-size:36px; color:var(--text-hi); margin-bottom:10px; }
.archive-header p{ color:var(--text-low); font-size:15px; }

.pagination{ display:flex; justify-content:space-between; padding-top:20px; font-family:var(--f-mono); font-size:13px; }
.pagination a{ color:var(--signal); }
.pagination a:hover{ text-decoration:underline; }
.pagination span.disabled{ color:var(--text-low); }

/* ---------- Single article ---------- */
.article-header{ max-width:var(--read-w); margin:0 auto; padding:64px 24px 0; }
.article-meta{ font-family:var(--f-mono); font-size:12.5px; letter-spacing:.05em; color:var(--text-low); text-transform:uppercase; margin-bottom:18px; }
.article-header h1{ font-family:var(--f-display); font-size:42px; line-height:1.2; color:var(--text-hi); margin-bottom:28px; }
@media (max-width: 640px){ .article-header h1{ font-size:32px; } }

.article-thumb{ max-width:var(--maxw); margin:0 auto 40px; padding:0 24px; }
.article-thumb img{ border-radius:var(--radius); border:1px solid var(--pitch-line); }

.article-body{ max-width:var(--read-w); margin:0 auto; padding:0 24px 72px; font-size:17.5px; line-height:1.8; color:var(--text-mid); }
.article-body p{ margin-bottom:26px; }
.article-body h2{ font-family:var(--f-display); font-size:27px; color:var(--text-hi); margin:44px 0 18px; }
.article-body h3{ font-family:var(--f-display); font-size:22px; color:var(--text-hi); margin:36px 0 14px; }
.article-body blockquote{ border-left:2px solid var(--signal); padding-left:22px; margin:32px 0; font-style:italic; color:var(--text-hi); }
.article-body ul, .article-body ol{ margin:0 0 26px 22px; }
.article-body li{ margin-bottom:10px; }
.article-body img{ border-radius:var(--radius); border:1px solid var(--pitch-line); margin:8px 0 32px; }
.article-body a{ color:var(--signal); text-decoration:underline; text-underline-offset:3px; }
.article-body code{ font-family:var(--f-mono); background:var(--card); padding:2px 6px; border-radius:3px; font-size:.9em; }
.article-body pre{ background:var(--card); border:1px solid var(--pitch-line); padding:18px; border-radius:var(--radius); overflow-x:auto; margin-bottom:26px; }

/* ---------- Footer: text only, no links, by design ---------- */
.site-footer{ border-top:1px solid var(--pitch-line); padding:32px 0; text-align:center; }
.site-footer p{ font-family:var(--f-mono); font-size:12px; color:var(--text-low); }

/* ---------- Empty state ---------- */
.no-posts{ max-width:var(--read-w); margin:0 auto; padding:80px 24px; text-align:center; color:var(--text-low); }