/*
Theme Name: Circuitrocks Maker
Theme URI: https://circuit.rocks
Author: Circuitrocks
Author URI: https://circuit.rocks
Description: Minimal maker-direction theme for learn + blog. Chrome rendered by aaa-circuit-rocks-maker-chrome mu-plugin. Body uses Inter sans / JetBrains Mono mono, cream background, green accent.
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: circuitrocks-maker
Requires at least: 6.0
Requires PHP: 7.4
*/

:root {
  --crmkr-bg: #1a1a1a;
  --crmkr-bg-deep: #0d0d0d;
  --crmkr-cream: #faf9f6;
  --crmkr-green: #5cb030;
  --crmkr-green-dark: #4a8f24;
  --crmkr-text: #1a1a1a;
  --crmkr-text-muted: #555;
  --crmkr-text-soft: #999;
  --crmkr-border: #e0e0e0;
  --crmkr-border-soft: #ececec;
  --crmkr-card: #ffffff;
  --crmkr-mono: 'JetBrains Mono', 'Courier New', monospace;
  --crmkr-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; min-width: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
html, body { margin: 0; padding: 0; width: 100%; max-width: 100vw; }
body { background: var(--crmkr-cream); color: var(--crmkr-text); font-family: var(--crmkr-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
/* Prevent horizontal overflow on outer sections — sticky-safe via overflow:clip (not :hidden). */
.crmkr-archive-head, .crmkr-main, .crmkr-404, .crmkr-article { overflow-x: clip; }
.crmkr-article-wrap { overflow: visible; max-width: 100vw; }
.crmkr-content { max-width: 100%; }
.crmkr-content * { max-width: 100%; }

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--crmkr-green-dark); text-decoration: none; transition: color .12s; }
a:hover { color: var(--crmkr-green); }
h1, h2, h3, h4, h5, h6 { font-family: var(--crmkr-sans); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.5em; color: var(--crmkr-text); }
h1 { font-size: 2.5rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }
p { margin: 0 0 1em; }

/* Site container */
.crmkr-main { max-width: 1320px; margin: 0 auto; padding: 32px 24px 64px; }

/* Archive / index card grid */
.crmkr-archive-head { max-width: 1320px; margin: 0 auto; padding: 24px 24px 8px; }
.crmkr-archive-head h1 { font-size: 2rem; margin: 0 0 6px; }
.crmkr-archive-head .crmkr-archive-desc { color: var(--crmkr-text-muted); font-family: var(--crmkr-mono); font-size: 13px; }

.crmkr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px) { .crmkr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .crmkr-grid { grid-template-columns: 1fr; } }

.crmkr-card { background: var(--crmkr-card); border: 1px solid var(--crmkr-border); border-radius: 0; overflow: hidden; transition: border-color .2s ease, transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease; display: flex; flex-direction: column; position: relative; }
.crmkr-card::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 0; background: var(--crmkr-green); transition: height .25s ease; z-index: 2; }
.crmkr-card:hover { border-color: var(--crmkr-green); transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,0.08), 0 4px 10px rgba(92,176,48,0.10); }
.crmkr-card:hover::before { height: 4px; }
.crmkr-card-img { aspect-ratio: 16 / 10; background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%); overflow: hidden; display: block; }
.crmkr-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.crmkr-card:hover .crmkr-card-img img { transform: scale(1.04); }
.crmkr-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.crmkr-card-eyebrow { font-family: var(--crmkr-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--crmkr-green-dark); font-weight: 700; }
.crmkr-card-eyebrow a { color: inherit; }
.crmkr-card-title { font-size: 1.25rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; margin: 0; }
.crmkr-card-title a { color: var(--crmkr-text); transition: color .15s; }
.crmkr-card:hover .crmkr-card-title a { color: var(--crmkr-green-dark); }
.crmkr-card-excerpt { color: var(--crmkr-text-muted); font-size: 0.9375rem; line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.crmkr-card-meta { display: flex; gap: 12px; align-items: center; font-family: var(--crmkr-mono); font-size: 11px; color: var(--crmkr-text-soft); margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--crmkr-border-soft); }
.crmkr-card-meta a { color: var(--crmkr-text-muted); }
.crmkr-card-meta a:hover { color: var(--crmkr-green-dark); }
.crmkr-card-meta .author::before { content: '// '; color: var(--crmkr-green-dark); }

/* Authors index — /author/ grid */
.crmkr-authors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1024px) { .crmkr-authors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .crmkr-authors-grid { grid-template-columns: 1fr; } }
.crmkr-author-card { display: flex; gap: 16px; align-items: flex-start; background: var(--crmkr-card); border: 1px solid var(--crmkr-border); border-radius: 0; padding: 18px 18px 16px; transition: border-color .15s, transform .2s; }
.crmkr-author-card:hover { border-color: var(--crmkr-green); transform: translateY(-2px); }
.crmkr-author-card-avatar { flex: 0 0 auto; }
.crmkr-author-card-avatar img { width: 64px; height: 64px; border-radius: 50%; display: block; }
.crmkr-author-card-body { flex: 1; min-width: 0; }
.crmkr-author-card-eyebrow { font-family: var(--crmkr-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--crmkr-green-dark); font-weight: 700; margin: 0 0 4px; }
.crmkr-author-card-name { font-family: var(--crmkr-sans); font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 6px; }
.crmkr-author-card-name a { color: var(--crmkr-text); }
.crmkr-author-card-name a:hover { color: var(--crmkr-green-dark); }
.crmkr-author-card-desc { font-size: 0.875rem; line-height: 1.5; color: var(--crmkr-text-muted); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crmkr-author-card-meta { display: flex; gap: 14px; font-family: var(--crmkr-mono); font-size: 11px; color: var(--crmkr-text-soft); margin: 0; }

/* Author archive header */
.crmkr-author-head { max-width: 1320px; margin: 0 auto; padding: 36px 24px 12px; }
.crmkr-author-head-inner { display: flex; gap: 24px; align-items: flex-start; padding-bottom: 24px; border-bottom: 1px solid var(--crmkr-border); }
.crmkr-author-head-avatar { flex: 0 0 auto; }
.crmkr-author-head-avatar img { width: 96px; height: 96px; border-radius: 50%; display: block; }
.crmkr-author-head-body { flex: 1; min-width: 0; }
.crmkr-author-head-eyebrow { font-family: var(--crmkr-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--crmkr-green-dark); font-weight: 700; margin: 0 0 6px; }
.crmkr-author-head-name { font-family: var(--crmkr-sans); font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--crmkr-text); }
.crmkr-author-head-desc { font-size: 1rem; line-height: 1.55; color: var(--crmkr-text-muted); margin: 0 0 14px; max-width: 64ch; }
.crmkr-author-head-desc.crmkr-author-head-desc-placeholder { color: var(--crmkr-text-soft); font-style: italic; }
.crmkr-author-head-meta { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; font-family: var(--crmkr-mono); font-size: 12px; align-items: baseline; }
.crmkr-author-head-meta dt { color: var(--crmkr-text-soft); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
.crmkr-author-head-meta dd { margin: 0 14px 0 0; color: var(--crmkr-text); font-weight: 700; }
.crmkr-author-head-meta a { color: var(--crmkr-green-dark); }
.crmkr-author-postcount { font-family: var(--crmkr-mono); font-size: 12px; color: var(--crmkr-text-muted); margin: 0 0 16px; }
@media (max-width: 640px) {
  .crmkr-author-head-inner { flex-direction: column; gap: 14px; }
  .crmkr-author-head-avatar img { width: 72px; height: 72px; }
  .crmkr-author-head-name { font-size: 1.5rem; }
}

/* Pagination */
.crmkr-pagination { display: flex; justify-content: center; gap: 6px; margin: 48px 0 0; font-family: var(--crmkr-mono); font-size: 13px; }
.crmkr-pagination a, .crmkr-pagination span { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 6px; color: var(--crmkr-text-muted); border: 1px solid transparent; }
.crmkr-pagination a:hover { background: rgba(92,176,48,0.08); color: var(--crmkr-green-dark); }
.crmkr-pagination .current { background: var(--crmkr-bg); color: var(--crmkr-cream); }
.crmkr-pagination .dots { color: var(--crmkr-text-soft); }

/* Single article layout */
.crmkr-article-wrap { max-width: 1320px; margin: 0 auto; padding: 32px 24px 64px; display: grid; grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr); gap: 48px; align-items: start; width: 100%; box-sizing: border-box; }
.crmkr-article-wrap > * { min-width: 0; max-width: 100%; }
.crmkr-article, .crmkr-content { min-width: 0; max-width: 100%; word-wrap: break-word; overflow-wrap: anywhere; }
.crmkr-content > * { max-width: 100%; }
.crmkr-content img, .crmkr-content video, .crmkr-content iframe, .crmkr-content embed { max-width: 100%; height: auto; }
.crmkr-content iframe { width: 100%; }
.crmkr-article-wrap.has-toc { grid-template-columns: minmax(220px, 2.5fr) minmax(0, 8fr) minmax(280px, 4fr); }
@media (max-width: 1100px) {
  .crmkr-article-wrap, .crmkr-article-wrap.has-toc { display: flex; flex-direction: column; grid-template-columns: 1fr; gap: 24px; padding: 20px 16px 48px; }
  .crmkr-article-wrap .crmkr-article     { order: 1; }
  .crmkr-article-wrap .crmkr-aside-info  { order: 2; }
  /* TOC aside is desktop-only — hide on tablet + phone, users scroll naturally */
  .crmkr-article-wrap .crmkr-aside-toc   { display: none !important; }
}
@media (max-width: 768px) {
  .crmkr-article-wrap { padding: 16px 12px 40px; gap: 20px; }
  .crmkr-article h1.crmkr-article-title { font-size: 1.6rem; }
  .crmkr-content { font-size: 16px; }
}
.crmkr-article { min-width: 0; }
.crmkr-article-eyebrow { font-family: var(--crmkr-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--crmkr-green-dark); font-weight: 700; margin-bottom: 12px; }
.crmkr-article-eyebrow a { color: inherit; }
.crmkr-article h1.crmkr-article-title { font-size: 2.5rem; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 16px; }
@media (max-width: 768px) { .crmkr-article h1.crmkr-article-title { font-size: 1.875rem; } }
.crmkr-article-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-family: var(--crmkr-mono); font-size: 12px; color: var(--crmkr-text-muted); margin: 0 0 24px; padding: 0 0 20px; border-bottom: 1px solid var(--crmkr-border); }
.crmkr-article-meta .author { color: var(--crmkr-green-dark); font-weight: 700; }
.crmkr-article-hero { margin: 0 0 32px; border-radius: 0; overflow: hidden; background: #000; }
.crmkr-article-hero img, .crmkr-article-hero video { width: 100%; height: auto; display: block; }
.crmkr-hero-video { aspect-ratio: 16 / 9; object-fit: cover; }
.crmkr-content { font-size: 17px; line-height: 1.65; color: var(--crmkr-text); }
.crmkr-content > * { margin-bottom: 1.1em; }
.crmkr-content h2 { font-size: 1.875rem; margin-top: 2em; margin-bottom: 0.5em; }
.crmkr-content h3 { font-size: 1.375rem; margin-top: 1.8em; margin-bottom: 0.4em; }
.crmkr-content h4 { font-size: 1.125rem; margin-top: 1.5em; }
.crmkr-content a { border-bottom: 1px solid rgba(92,176,48,0.45); }
.crmkr-content a:hover { border-bottom-color: var(--crmkr-green); }
.crmkr-content ul, .crmkr-content ol { padding-left: 1.6em; }
.crmkr-content li { margin-bottom: 0.4em; }
.crmkr-content blockquote { background: #f4f7f4; border-left: 3px solid var(--crmkr-green); padding: 14px 18px; margin: 1.4em 0; border-radius: 0 6px 6px 0; color: var(--crmkr-text); font-style: italic; }
.crmkr-content code { font-family: var(--crmkr-mono); background: #f0f0f0; padding: 2px 6px; border-radius: 4px; font-size: 0.875em; color: #db2777; border: 1px solid var(--crmkr-border); }

/* Code blocks — dark card with header bar, copy button, line wrap, custom scrollbar */
.crmkr-content pre,
.crmkr-content .wp-block-code,
.crmkr-content .code-block {
  position: relative;
  background: var(--crmkr-bg);
  color: #f1f5f9;
  padding: 20px 22px;
  border-radius: 0;
  border: 1px solid #2a2a2a;
  font-family: var(--crmkr-mono);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 1.6em 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
  tab-size: 2;
  -moz-tab-size: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.crmkr-content pre code,
.crmkr-content .wp-block-code code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  white-space: inherit;
  display: block;
  min-width: 0;
}
/* Custom scrollbar for code blocks */
.crmkr-content pre::-webkit-scrollbar { height: 10px; width: 10px; }
.crmkr-content pre::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 0 0 10px 10px; }
.crmkr-content pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 6px; }
.crmkr-content pre::-webkit-scrollbar-thumb:hover { background: rgba(92,176,48,0.55); }

/* Copy The Code button (from Copy-The-Code plugin / Prismatic) */
.crmkr-content pre .copy-the-code-button,
.crmkr-content pre button.copy,
.crmkr-content pre .copy-btn,
.crmkr-content pre [class*="copy"] {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  background: rgba(255,255,255,0.08) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-family: var(--crmkr-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  transition: background 0.12s, color 0.12s, border-color 0.12s !important;
  box-shadow: none !important;
  line-height: 1.2 !important;
  z-index: 2;
}
.crmkr-content pre .copy-the-code-button:hover,
.crmkr-content pre button.copy:hover,
.crmkr-content pre .copy-btn:hover {
  background: var(--crmkr-green) !important;
  color: var(--crmkr-bg) !important;
  border-color: var(--crmkr-green) !important;
}

/* Syntax highlight token palette (Prism / Prismatic / code-prettify compatible) */
.crmkr-content pre [class*="token"],
.crmkr-content pre [class*="language-"],
.crmkr-content pre code .com,
.crmkr-content pre code .pln,
.crmkr-content pre code .str,
.crmkr-content pre code .kwd,
.crmkr-content pre code .typ,
.crmkr-content pre code .lit,
.crmkr-content pre code .pun,
.crmkr-content pre code .fun,
.crmkr-content pre code .var {
  background: transparent !important;
  text-shadow: none !important;
}
.crmkr-content pre .token.comment,
.crmkr-content pre .token.prolog,
.crmkr-content pre .token.doctype,
.crmkr-content pre .token.cdata,
.crmkr-content pre code .com { color: #94a3b8 !important; font-style: italic; }
.crmkr-content pre .token.punctuation,
.crmkr-content pre code .pun { color: #cbd5e1 !important; }
.crmkr-content pre .token.property,
.crmkr-content pre .token.tag,
.crmkr-content pre .token.boolean,
.crmkr-content pre .token.number,
.crmkr-content pre .token.constant,
.crmkr-content pre .token.symbol,
.crmkr-content pre .token.deleted,
.crmkr-content pre code .lit { color: #fb923c !important; }
.crmkr-content pre .token.selector,
.crmkr-content pre .token.attr-name,
.crmkr-content pre .token.string,
.crmkr-content pre .token.char,
.crmkr-content pre .token.builtin,
.crmkr-content pre .token.inserted,
.crmkr-content pre code .str { color: #86efac !important; }
.crmkr-content pre .token.operator,
.crmkr-content pre .token.entity,
.crmkr-content pre .token.url,
.crmkr-content pre .token.variable,
.crmkr-content pre code .opn,
.crmkr-content pre code .clo { color: #fbbf24 !important; }
.crmkr-content pre .token.atrule,
.crmkr-content pre .token.attr-value,
.crmkr-content pre .token.keyword,
.crmkr-content pre code .kwd { color: #c084fc !important; font-weight: 600; }
.crmkr-content pre .token.function,
.crmkr-content pre .token.class-name,
.crmkr-content pre code .typ,
.crmkr-content pre code .fun { color: #f472b6 !important; }
.crmkr-content pre .token.regex,
.crmkr-content pre .token.important { color: #fcd34d !important; }
.crmkr-content pre code .pln { color: #f1f5f9 !important; }

/* Mobile: smaller code font, narrower padding */
@media (max-width: 768px) {
  .crmkr-content pre,
  .crmkr-content .wp-block-code,
  .crmkr-content .code-block { padding: 14px 14px; font-size: 12.5px; border-radius: 8px; }
  .crmkr-content pre .copy-the-code-button,
  .crmkr-content pre button.copy,
  .crmkr-content pre .copy-btn { padding: 4px 8px !important; font-size: 10px !important; }
}
.crmkr-content img { border-radius: 8px; margin: 1em 0; }
.crmkr-content table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 0.9375rem; }
.crmkr-content th, .crmkr-content td { padding: 10px 14px; border: 1px solid var(--crmkr-border); text-align: left; }
.crmkr-content th { background: #f4f7f4; font-family: var(--crmkr-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--crmkr-text); }
@media (max-width: 768px) {
  .crmkr-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .crmkr-content th, .crmkr-content td { white-space: nowrap; }
}

/* FAQ blocks — match circuit.rocks shop product page style: white cards, mono question text, plus icon right */
.crmkr-content .cr-faq, .crmkr-content .crmkr-faq { margin: 2.4em 0; }
.crmkr-content .cr-faq-title, .crmkr-content .crmkr-faq-title {
  font-family: var(--crmkr-sans);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--crmkr-text);
  border: 0;
  padding: 0;
  display: block;
}
.crmkr-content .cr-faq-item, .crmkr-content .crmkr-faq-item {
  background: #fff;
  border: 1px solid var(--crmkr-border);
  border-radius: 0;
  margin: 0 0 10px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.crmkr-content .cr-faq-item:hover, .crmkr-content .crmkr-faq-item:hover { border-color: #c8cfc8; }
.crmkr-content .cr-faq-item[open], .crmkr-content .crmkr-faq-item[open] { border-color: var(--crmkr-green); }
.crmkr-content .cr-faq-q, .crmkr-content .crmkr-faq-q {
  list-style: none;
  cursor: pointer;
  padding: 16px 48px 16px 20px;
  font-family: var(--crmkr-mono);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--crmkr-text);
  position: relative;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}
.crmkr-content .cr-faq-q::-webkit-details-marker,
.crmkr-content .crmkr-faq-q::-webkit-details-marker { display: none; }
.crmkr-content .cr-faq-q::marker,
.crmkr-content .crmkr-faq-q::marker { content: ''; }
.crmkr-content .cr-faq-q::after,
.crmkr-content .crmkr-faq-q::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: transparent;
  color: var(--crmkr-green-dark);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  transition: transform 0.18s;
}
.crmkr-content .cr-faq-item[open] .cr-faq-q::after,
.crmkr-content .crmkr-faq-item[open] .crmkr-faq-q::after {
  content: '×';
  transform: translateY(-50%) rotate(90deg);
}
.crmkr-content .cr-faq-a, .crmkr-content .crmkr-faq-a {
  padding: 0 20px 18px;
  font-family: var(--crmkr-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--crmkr-text-muted);
  border-top: 1px solid var(--crmkr-border-soft);
  margin-top: 0;
}
.crmkr-content .cr-faq-a p, .crmkr-content .crmkr-faq-a p { margin: 14px 0 0; }
.crmkr-content .cr-faq-a a, .crmkr-content .crmkr-faq-a a { color: var(--crmkr-green-dark); border-bottom: 1px solid rgba(92,176,48,0.45); padding-bottom: 1px; }
.crmkr-content .cr-faq-a a:hover, .crmkr-content .crmkr-faq-a a:hover { color: var(--crmkr-green); border-bottom-color: var(--crmkr-green); }

/* Hide inline TOC + duplicate meta baked into legacy post content (theme's aside TOC + info card replace them) */
.crmkr-content nav.cr-toc,
.crmkr-content .cr-toc:not(.crmkr-toc) { display: none !important; }

/* Style the inline cr-post-meta pills (beginner / reading time) to fit our palette */
.crmkr-content .cr-post-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--crmkr-border); font-family: var(--crmkr-mono); font-size: 12px; }
.crmkr-content .cr-meta-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-family: var(--crmkr-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; }
.crmkr-content .cr-difficulty-beginner, .crmkr-content .cr-difficulty-easy { background: var(--crmkr-green); }
.crmkr-content .cr-difficulty-intermediate { background: #f6a704; }
.crmkr-content .cr-difficulty-advanced { background: #e63c2e; }
.crmkr-content .cr-meta-date, .crmkr-content .cr-meta-reading-time { color: var(--crmkr-text-muted); }
.crmkr-content .cr-meta-date:empty { display: none; }

/* Table of contents (sticky aside on desktop) */
.crmkr-toc { font-family: var(--crmkr-mono); font-size: 12px; }
.crmkr-toc-title { text-transform: uppercase; letter-spacing: 0.08em; color: var(--crmkr-text-muted); font-weight: 700; margin: 0 0 12px; font-size: 11px; }
.crmkr-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc-counter; }
.crmkr-toc li { counter-increment: toc-counter; padding: 4px 0; }
.crmkr-toc li a { display: block; padding: 4px 8px; color: var(--crmkr-text-muted); border-radius: 4px; line-height: 1.4; border-bottom: 0; }
.crmkr-toc li a:hover { background: rgba(92,176,48,0.06); color: var(--crmkr-text); }
.crmkr-toc li.crmkr-toc-active a { background: rgba(92,176,48,0.10); color: var(--crmkr-green-dark); font-weight: 700; }
.crmkr-toc li.crmkr-toc-h3 { padding-left: 12px; font-size: 11px; }
@media (min-width: 1101px) {
  aside.crmkr-aside-toc { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; }
}

/* Right-rail info card — Pimoroni style: thumb on top, title, byline (orange), excerpt, meta table, materials */
.crmkr-info-card { background: var(--crmkr-card); border: 1px solid var(--crmkr-border); border-radius: 0; padding: 18px 20px 22px; font-family: var(--crmkr-sans); font-size: 14px; color: var(--crmkr-text); }
.crmkr-info-thumb-wrap { margin: -18px -20px 18px; overflow: hidden; border-radius: 0; aspect-ratio: 4 / 3; background: #f3f4f6; }
.crmkr-info-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crmkr-info-title { font-family: var(--crmkr-sans); font-size: 1.25rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--crmkr-text); margin: 0 0 6px; }
.crmkr-info-byline { color: #f6a704; font-weight: 700; font-size: 0.95rem; margin: 0 0 12px; }
.crmkr-info-byline::before { content: ''; }
.crmkr-info-excerpt { font-size: 14px; line-height: 1.5; color: var(--crmkr-text); margin: 0 0 16px; }
.crmkr-info-meta { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 0 0 16px; padding: 12px 0 4px; border-top: 1px solid var(--crmkr-border); border-bottom: 1px solid var(--crmkr-border); font-family: var(--crmkr-sans); }
.crmkr-info-meta dt { font-weight: 700; color: var(--crmkr-text); font-size: 0.875rem; padding: 8px 14px 8px 0; align-self: start; border-bottom: 1px dashed var(--crmkr-border-soft); }
.crmkr-info-meta dd { margin: 0; color: var(--crmkr-text-muted); font-size: 0.875rem; padding: 8px 0; border-bottom: 1px dashed var(--crmkr-border-soft); }
.crmkr-info-meta dt:last-of-type, .crmkr-info-meta dd:last-of-type { border-bottom: 0; }
.crmkr-info-meta a { color: var(--crmkr-green-dark); border-bottom: 1px solid rgba(92,176,48,0.4); padding-bottom: 1px; }
.crmkr-info-meta a:hover { color: var(--crmkr-green); border-bottom-color: var(--crmkr-green); }
.crmkr-info-tags a { margin-right: 8px; display: inline-block; }
/* Difficulty pill */
.crmkr-difficulty { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; }
.crmkr-diff-easy, .crmkr-diff-beginner { background: var(--crmkr-green); }
.crmkr-diff-intermediate { background: #f6a704; }
.crmkr-diff-advanced, .crmkr-diff-hard { background: #e63c2e; }
/* Materials section */
.crmkr-info-materials { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--crmkr-border); }
.crmkr-info-materials-title { font-family: var(--crmkr-sans); font-size: 0.95rem; font-weight: 800; margin: 0 0 12px; color: var(--crmkr-text); }
.crmkr-info-materials-body { font-size: 13px; }

@media (min-width: 1101px) {
  aside.crmkr-aside-info { position: sticky; top: 88px; }
}

/* Author bio block — E-E-A-T signal */
.crmkr-author-bio { display: flex; gap: 18px; align-items: flex-start; margin: 48px 0 0; padding: 22px; background: var(--crmkr-card); border: 1px solid var(--crmkr-border); border-radius: 0; }
.crmkr-author-bio-avatar { flex: 0 0 auto; }
.crmkr-author-bio-avatar img { width: 56px; height: 56px; border-radius: 50%; display: block; }
.crmkr-author-bio-body { flex: 1; min-width: 0; }
.crmkr-author-bio-eyebrow { font-family: var(--crmkr-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--crmkr-green-dark); font-weight: 700; margin-right: 6px; }
.crmkr-author-bio-name { font-family: var(--crmkr-sans); font-weight: 700; font-size: 1.0625rem; margin: 0 0 6px; }
.crmkr-author-bio-name a { color: var(--crmkr-text); }
.crmkr-author-bio-name a:hover { color: var(--crmkr-green-dark); }
.crmkr-author-bio-desc { font-size: 0.9375rem; line-height: 1.55; color: var(--crmkr-text-muted); margin: 0; }
@media (max-width: 640px) { .crmkr-author-bio { flex-direction: column; gap: 12px; padding: 18px; } }

/* Parts list (Shopify-context cards) */
.crmkr-parts { margin: 48px 0 0; padding-top: 32px; border-top: 1px solid var(--crmkr-border); }
.crmkr-parts-title { font-family: var(--crmkr-sans); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 4px; }
.crmkr-parts-sub { font-family: var(--crmkr-mono); font-size: 12px; color: var(--crmkr-green-dark); margin: 0 0 18px; text-transform: uppercase; letter-spacing: 0.06em; }
.crmkr-parts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 640px) { .crmkr-parts-grid { grid-template-columns: 1fr; } }
.crmkr-part-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--crmkr-border); transition: border-color .15s, transform .2s; }
.crmkr-part-card:hover { border-color: var(--crmkr-green); transform: translateY(-1px); }
.crmkr-part-link { display: flex; gap: 14px; align-items: flex-start; padding: 12px; text-decoration: none; color: var(--crmkr-text); }
.crmkr-part-img { flex: 0 0 88px; width: 88px; height: 88px; min-height: 88px; max-height: 88px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.crmkr-part-img img { width: 100%; height: 100%; max-height: 88px; object-fit: cover; display: block; }
.crmkr-part-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.crmkr-part-name { font-family: var(--crmkr-sans); font-size: 0.9375rem; font-weight: 700; line-height: 1.3; margin: 0; color: var(--crmkr-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crmkr-part-price { font-family: var(--crmkr-mono); font-size: 13px; font-weight: 700; color: var(--crmkr-green-dark); margin: 0; }
.crmkr-part-cta { font-family: var(--crmkr-mono); font-size: 11px; color: var(--crmkr-text-soft); margin-top: auto; }
.crmkr-part-link:hover .crmkr-part-cta { color: var(--crmkr-green-dark); }
.crmkr-part-oos .crmkr-part-price::after { content: ' · out of stock'; color: var(--crmkr-text-soft); font-weight: 400; }
.crmkr-part-img img:not([src]), .crmkr-part-img img[src=""] { visibility: hidden; }
.crmkr-part-buy { display: block; width: 100%; padding: 10px 14px; margin-top: auto; background: var(--crmkr-text); color: var(--crmkr-cream); border: 0; border-top: 1px solid var(--crmkr-border); font-family: var(--crmkr-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s; box-sizing: border-box; }
.crmkr-part-buy:hover:not([disabled]) { background: var(--crmkr-green); color: #fff; }
.crmkr-part-buy[disabled] { opacity: 0.4; cursor: not-allowed; background: #999; }

/* Comments — keep WordPress markup, restyle */
.comments-area { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--crmkr-border); }
.comments-title { font-size: 1.375rem; margin: 0 0 24px; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list li { background: var(--crmkr-card); border: 1px solid var(--crmkr-border); border-radius: 10px; padding: 16px 18px; margin: 0 0 14px; }
.comment-author { font-family: var(--crmkr-sans); font-weight: 700; }
.comment-metadata { font-family: var(--crmkr-mono); font-size: 11px; color: var(--crmkr-text-soft); margin: 4px 0 12px; }
.comment-content { font-size: 0.9375rem; }
.comment-respond { margin-top: 32px; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--crmkr-border); border-radius: 6px; font: inherit; font-size: 14px; background: var(--crmkr-card);
}
.comment-form textarea:focus, .comment-form input:focus { outline: 0; border-color: var(--crmkr-green); box-shadow: 0 0 0 3px rgba(92,176,48,0.12); }
.comment-form .submit, .form-submit input[type="submit"] {
  background: var(--crmkr-green); color: var(--crmkr-bg); border: 0; padding: 12px 22px; border-radius: 6px; font-family: var(--crmkr-mono); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: background .12s, color .12s;
}
.comment-form .submit:hover, .form-submit input[type="submit"]:hover { background: var(--crmkr-green-dark); color: #fff; }

/* Search results */
.crmkr-search-results .crmkr-card { border-radius: 10px; }

/* 404 */
.crmkr-404 { max-width: 720px; margin: 64px auto; padding: 0 24px; text-align: center; }
.crmkr-404 h1 { font-size: 3rem; }
.crmkr-404 p { color: var(--crmkr-text-muted); }
.crmkr-404 .crmkr-btn { display: inline-block; margin-top: 16px; background: var(--crmkr-green); color: var(--crmkr-bg); padding: 12px 22px; border-radius: 6px; font-family: var(--crmkr-mono); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.crmkr-404 .crmkr-btn:hover { background: var(--crmkr-green-dark); color: #fff; }

/* Search form (used by chrome search) */
.crmkr-searchform { display: flex; gap: 8px; }
.crmkr-searchform input[type="search"] { flex: 1; padding: 10px 14px; border: 1px solid var(--crmkr-border); border-radius: 6px; font: inherit; }
.crmkr-searchform button { background: var(--crmkr-green); color: var(--crmkr-bg); border: 0; padding: 10px 18px; border-radius: 6px; font-family: var(--crmkr-mono); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }

/* Utility */
.screen-reader-text, .sr-only { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.alignleft  { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin: 1em auto; }
.alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; }
.wp-caption .wp-caption-text, figcaption { font-family: var(--crmkr-mono); font-size: 12px; color: var(--crmkr-text-muted); margin-top: 6px; text-align: center; }