/* =============================================================================
   packets.lol — Custom Styles
   Extends PaperMod theme
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Inter:wght@300;400;500;600&family=Syne:wght@700;800&display=swap');

/* ── Brand tokens ─────────────────────────────────────────────────────────── */
:root {
  --brand-teal:    #00d4aa;
  --brand-teal2:   #00b894;
  --brand-blue:    #63b3ed;
  --brand-amber:   #f6ad55;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;
  --font-sans:     'Inter', system-ui, sans-serif;
  --font-display:  'Syne', sans-serif;
}

/* ── Base typography ──────────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
}

/* Site logo */
.logo a,
#site-header .logo {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Post and page headings */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Code blocks ──────────────────────────────────────────────────────────── */
code, pre, kbd {
  font-family: var(--font-mono) !important;
  font-size: 0.875em;
}

/* Inline code */
.post-content code:not(pre code) {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

/* Code block container */
.post-content pre {
  border-radius: 6px;
  border: 1px solid var(--border);
  position: relative;
}

/* ── Episode badges ───────────────────────────────────────────────────────── */
.ep-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.ep-badge.beginner     { background: rgba(0,212,170,0.1);  color: var(--brand-teal); }
.ep-badge.intermediate { background: rgba(246,173,85,0.1); color: var(--brand-amber); }
.ep-badge.advanced     { background: rgba(99,179,237,0.1); color: var(--brand-blue); }

/* ── Data view section ────────────────────────────────────────────────────── */
/* Her section — visually distinct from technical steps */
.data-view {
  border-left: 3px solid var(--brand-teal);
  padding-left: 1.25rem;
  margin: 2rem 0;
  background: rgba(0,212,170,0.03);
  border-radius: 0 6px 6px 0;
  padding: 1rem 1.25rem;
}

.data-view::before {
  content: "// data view";
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--brand-teal);
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

/* ── Lab files callout ────────────────────────────────────────────────────── */
.lab-files {
  background: var(--code-bg, rgba(0,0,0,0.05));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  margin: 1.5rem 0;
}

.lab-files a {
  color: var(--brand-blue);
}

/* ── Post list — episode number prefix ────────────────────────────────────── */
.post-entry .entry-header h2::before {
  font-family: var(--font-mono);
  font-size: 0.65em;
  color: var(--brand-teal);
  margin-right: 6px;
  opacity: 0.7;
}

/* ── Table of contents ────────────────────────────────────────────────────── */
#TableOfContents {
  font-size: 0.88rem;
  line-height: 1.7;
}

#TableOfContents a {
  opacity: 0.75;
  transition: opacity 0.15s;
}

#TableOfContents a:hover {
  opacity: 1;
}

/* ── Key takeaways block ──────────────────────────────────────────────────── */
/* Wrap in Hugo shortcode {{< takeaways >}} — see layouts/shortcodes/ */
.takeaways {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.1rem 1.4rem;
  margin: 2rem 0;
}

.takeaways h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-teal);
  margin-bottom: 0.75rem;
}

/* ── Dark mode adjustments ────────────────────────────────────────────────── */
.dark .data-view {
  background: rgba(0,212,170,0.04);
}

.dark .ep-badge.beginner     { background: rgba(0,212,170,0.12);  }
.dark .ep-badge.intermediate { background: rgba(246,173,85,0.12); }
.dark .ep-badge.advanced     { background: rgba(99,179,237,0.12); }

/* ── Profile mode subtitle ────────────────────────────────────────────────── */
.profile-mode .profile_inner .profile-info .sub {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  opacity: 0.65;
  letter-spacing: 0.02em;
}

/* ── Share buttons ────────────────────────────────────────────────────────── */
.share-buttons {
  font-size: 0.82rem;
}

/* ── Reading time + word count ────────────────────────────────────────────── */
.post-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  opacity: 0.6;
  letter-spacing: 0.04em;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  opacity: 0.5;
}