/* Core theme CSS extracted from the concept visualization (tokens + components) */
/* === BASE RESET & DESIGN TOKENS === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 5rem; }
:root {
  --font-display: 'JetBrains Mono', 'Fira Code', monospace;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl:  clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 8rem);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;
  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --content-narrow: 640px; --content-default: 960px; --content-wide: 1200px;
}

[data-theme="dark"] { --color-bg: #0d1117; --color-surface: #161b22; --color-surface-2: #1c2333; --color-surface-3: #21293a; --color-border: #30363d; --color-border-accent: #3b4252; --color-divider: #21262d; --color-text: #e6edf3; --color-text-muted: #8b949e; --color-text-faint: #484f58; --color-accent: #00ff41; --color-accent-dim: #00cc33; --color-accent-glow: rgba(0, 255, 65, 0.15); --color-accent-bg: rgba(0, 255, 65, 0.08); --color-amber: #ffb347; --color-cyan: #79c0ff; --color-red: #ff7b72; --color-purple: #d2a8ff; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 12px 32px rgba(0,0,0,0.5); --shadow-glow: 0 0 20px rgba(0,255,65,0.1); }
[data-theme="light"] { --color-bg: #f6f8fa; --color-surface: #ffffff; --color-surface-2: #f0f3f6; --color-surface-3: #e8ecf0; --color-border: #d0d7de; --color-border-accent: #c0c8d0; --color-divider: #d8dee4; --color-text: #1f2328; --color-text-muted: #656d76; --color-text-faint: #8b949e; --color-accent: #006d2e; --color-accent-dim: #005a26; --color-accent-glow: rgba(0,109,46,0.12); --color-accent-bg: rgba(0,109,46,0.06); --shadow-sm: 0 1px 2px rgba(31,35,40,0.06); --shadow-md: 0 4px 12px rgba(31,35,40,0.08); --shadow-lg: 0 12px 32px rgba(31,35,40,0.12); --shadow-glow: 0 0 20px rgba(0,109,46,0.08); }

body { min-height: 100vh; line-height: 1.6; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg); overflow-x: hidden; }
img, picture, video, canvas, svg { display:block; max-width:100%; height:auto; }
button { cursor:pointer; background:none; border:none; font:inherit; color:inherit; }
a { color:var(--color-accent); text-decoration:none; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); line-height:1.2; }
p, li, figcaption { max-width:72ch; }

.container { width:100%; max-width:var(--content-wide); margin:0 auto; padding:0 var(--space-6); }
.section-padding { padding-block: clamp(var(--space-16), 8vw, var(--space-32)); }
.mono { font-family:var(--font-display); }
.tag { display:inline-block; padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); font-family:var(--font-display); font-size:var(--text-xs); font-weight:500; letter-spacing:0.02em; line-height:1.3; }
.tag-homelab { background:var(--color-accent-bg); color:var(--color-accent); border:1px solid var(--color-accent-glow); }
.tag-ai { background: rgba(210,168,255,0.15); color: var(--color-purple); border: 1px solid rgba(210,168,255,0.2); }
.tag-docker { background: var(--color-cyan-bg); color: var(--color-cyan); border: 1px solid rgba(121,192,255,0.2); }

.scanline-overlay { pointer-events:none; position:fixed; inset:0; z-index:9999; background: repeating-linear-gradient(to bottom, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px); opacity:0.3; }

.nav { position:fixed; top:0; left:0; right:0; z-index:100; background: color-mix(in srgb, var(--color-bg) 85%, transparent); backdrop-filter: blur(12px); border-bottom:1px solid var(--color-border); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:3.5rem; max-width:var(--content-wide); margin:0 auto; padding:0 var(--space-6); }
.nav-brand { display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-display); font-size:var(--text-sm); font-weight:600; color:var(--color-accent); text-decoration:none; }
.nav-links { display:flex; align-items:center; gap:var(--space-6); list-style:none; }
.theme-toggle { display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:var(--radius-md); color:var(--color-text-muted); }

.nav-toggle { display:none; background:none; border:none; color:var(--color-text-muted); font-size:1.1rem; padding:0.25rem 0.5rem; }

.nav-links.open { display:block; position:absolute; right:var(--space-6); top:3.5rem; background:var(--color-surface); border:1px solid var(--color-border); padding:var(--space-3); border-radius:var(--radius-md); }

.hero { min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding-top:3.5rem; position:relative; overflow:hidden; }
.hero-content { position:relative; z-index:1; max-width:800px; padding:var(--space-8); }
.hero-logo-wrapper { margin-bottom:var(--space-8); display:flex; justify-content:center; }
.hero-logo { width: clamp(220px, 36vw, 480px); height: auto; }
.hero-tagline { font-family:var(--font-display); font-size:var(--text-lg); color:var(--color-text-muted); margin-bottom:var(--space-8); font-weight:400; }
.hero-description { font-size:var(--text-base); color:var(--color-text-muted); max-width:600px; margin:0 auto var(--space-8); line-height:1.7; }
.hero-cta { display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-6); background:var(--color-accent-bg); border:1px solid var(--color-accent); color:var(--color-accent); font-family:var(--font-display); font-size:var(--text-sm); border-radius:var(--radius-md); font-weight:500; }

.approach-selector { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-bottom:var(--space-8); }
.approach-card { padding:var(--space-6); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); cursor:pointer; text-align:left; transition:all var(--transition-interactive); }
.approach-card.active { border-color:var(--color-accent); box-shadow:var(--shadow-glow); }

.mockup-viewport { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); }
.mockup-browser-bar { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--color-surface-2); border-bottom:1px solid var(--color-border); }
.mockup-body { min-height:300px; max-height:650px; overflow-y:auto; padding:0; }
.mockup-digest-list { padding:var(--space-6) var(--space-8); }

/* responsive featured grid */
.mockup-b-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 980px) {
  .mockup-b-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mockup-b-grid { grid-template-columns: 1fr; }
}

.detail-card { padding:var(--space-6); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); }

.comparison-wrapper { overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.comparison-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.comparison-table thead th { padding:var(--space-4); background:var(--color-surface-2); font-family:var(--font-display); font-size:var(--text-xs); font-weight:600; color:var(--color-text); text-align:left; }

.brand-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-6); margin-bottom:var(--space-8); }

/* featured / post styles */
.brand-panel img, .mockup-b-article img { display:block; width:100%; height:auto; border-radius:6px; margin-bottom:var(--space-3); }
.detail-card .kg-card { margin: var(--space-4) 0; }
.post-content { max-width: 72ch; margin: 0 auto; font-size: var(--text-base); line-height: 1.8; }

/* Skip link */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: static; width: auto; height: auto; left: 1rem; top: 1rem; background: var(--color-surface); color: var(--color-text); padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); z-index: 2000; }

.footer { padding:var(--space-8) 0; border-top:1px solid var(--color-border); text-align:center; }
.footer-text { font-family:var(--font-display); font-size:var(--text-xs); color:var(--color-text-faint); }

/* small responsive tweaks */
@media (max-width: 768px) {
  .approach-selector { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Ghost Koenig editor required classes (ensure theme validator sees them styled) */
.kg-width-wide {
  max-width: var(--content-default);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.kg-width-full {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Basic media element styling for Koenig cards */
.kg-image, .kg-card, .kg-gallery {
  max-width: var(--content-wide);
  margin: 0 auto;
}