/*
 * explore-theme.css
 * Drop-in CSS to replicate the visual look of https://yogirk.github.io/explore/
 * Add this file to your static/ directory and reference it in your base layout.
 *
 * WHAT THIS COVERS
 * - Design tokens (colors, type scale, spacing) matching Explore's defaults
 * - Light + dark mode via prefers-color-scheme
 * - Typography: Inter (sans) + JetBrains Mono (mono) via Google Fonts CDN
 *   (swap for self-hosted if you prefer zero external requests)
 * - Header / nav
 * - Post-list cards (title, meta, excerpt, tags)
 * - Sidebar widgets (recent, categories, tags)
 * - Single post layout
 * - Footer
 * - Responsive (mobile-first, sidebar collapses below ~900 px)
 *
 * WHAT THIS DOES NOT COVER
 * - Reading-progress bar JS
 * - Dark-mode toggle button JS
 * - Search (Fuse.js)
 * - ScrollSpy ToC JS
 * - Code-copy button JS
 * These are JS features; add them separately if desired.
 */

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


/* ─────────────────────────────────────────────
   1. DESIGN TOKENS  (light mode)
   ───────────────────────────────────────────── */
:root {
  /* Primitive palette */
  --clr-blue-500:  #1a73e8;
  --clr-green-600: #1e8e3e;
  --clr-gray-50:   #f8f9fa;
  --clr-gray-100:  #f1f3f4;
  --clr-gray-200:  #e8eaed;
  --clr-gray-400:  #9aa0a6;
  --clr-gray-600:  #5f6368;
  --clr-gray-800:  #202124;
  --clr-white:     #ffffff;

  /* Semantic tokens */
  --color-bg:           var(--clr-white);
  --color-bg-subtle:    var(--clr-gray-50);
  --color-surface:      var(--clr-gray-100);
  --color-border:       var(--clr-gray-200);
  --color-text:         var(--clr-gray-800);
  --color-text-muted:   var(--clr-gray-600);
  --color-text-xmuted:  var(--clr-gray-400);
  --color-primary:      var(--clr-blue-500);
  --color-accent:       var(--clr-green-600);
  --color-link:         var(--clr-blue-500);
  --color-link-hover:   #1557b0;

  /* Type scale — Minor Third (×1.2) */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.694rem;   /* ~11px */
  --text-sm:   0.833rem;   /* ~13px */
  --text-base: 1rem;       /* 16px  */
  --text-md:   1.2rem;     /* ~19px */
  --text-lg:   1.44rem;    /* ~23px */
  --text-xl:   1.728rem;   /* ~28px */
  --text-2xl:  2.074rem;   /* ~33px */

  --leading-tight:  1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Spacing — fluid clamp scale */
  --space-1:  clamp(0.25rem, 0.5vw, 0.5rem);
  --space-2:  clamp(0.5rem,  1vw,   0.75rem);
  --space-3:  clamp(0.75rem, 1.5vw, 1rem);
  --space-4:  clamp(1rem,    2vw,   1.5rem);
  --space-6:  clamp(1.5rem,  3vw,   2rem);
  --space-8:  clamp(2rem,    4vw,   3rem);
  --space-12: clamp(3rem,    6vw,   4rem);

  /* Layout */
  --container-max:    1280px;
  --content-max-ch:   75ch;
  --sidebar-width:    260px;
  --gap:              var(--space-8);

  /* Radius / shadow */
  --radius-sm:  4px;
  --radius-md:  6px;
  --shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.08);

  /* Transitions */
  --transition: 150ms ease;
}


/* ─────────────────────────────────────────────
   2. DARK MODE TOKENS
   ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #1c1c1e;
    --color-bg-subtle:    #2c2c2e;
    --color-surface:      #3a3a3c;
    --color-border:       #3a3a3c;
    --color-text:         #e8eaed;
    --color-text-muted:   #9aa0a6;
    --color-text-xmuted:  #5f6368;
    --color-primary:      #8ab4f8;
    --color-accent:       #81c995;
    --color-link:         #8ab4f8;
    --color-link-hover:   #aecbfa;
  }
}


/* ─────────────────────────────────────────────
   3. RESET / BASE
   ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--color-link-hover); text-decoration: underline; }

ul, ol { list-style: none; }


/* ─────────────────────────────────────────────
   4. LAYOUT SHELL
   ───────────────────────────────────────────── */

/* Outer wrapper — centres everything and caps width */
.site-wrapper {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* Main content + optional right sidebar */
.site-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
}

@media (min-width: 900px) {
  .site-main.has-sidebar {
    grid-template-columns: 1fr var(--sidebar-width);
  }
}

/* Content area prose-width limiter */
.content-area {
  min-width: 0;  /* prevent grid blowout */
}


/* ─────────────────────────────────────────────
   5. HEADER / NAV
   ───────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 56px;
}

/* Site logo / title */
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.site-logo:hover { color: var(--color-primary); text-decoration: none; }

.site-logo img,
.site-logo svg {
  height: 28px;
  width: auto;
}

/* Tagline (hidden on small screens) */
.site-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex-shrink: 0;
}
@media (max-width: 640px) { .site-tagline { display: none; } }

/* Nav links */
.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--color-primary);
  background: var(--color-bg-subtle);
  text-decoration: none;
}

/* Header utility icons (RSS, search) */
.site-nav-icons {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  border-left: 1px solid var(--color-border);
  margin-left: var(--space-2);
  padding-left: var(--space-2);
}
.site-nav-icons a {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}


/* ─────────────────────────────────────────────
   6. POST LIST  (homepage / section pages)
   ───────────────────────────────────────────── */
.post-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.post-card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--color-bg);
  transition: box-shadow var(--transition), transform var(--transition);
  text-decoration: none;
  color: inherit;
}
.post-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Featured image strip above card content (optional) */
.post-card-image {
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-4);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.post-card-image img { width: 100%; height: 100%; object-fit: cover; }

.post-card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  transition: color var(--transition);
}
.post-card:hover .post-card-title { color: var(--color-primary); }

.post-card-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.post-card-excerpt {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-4);
  /* clamp to ~3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Category badges */
.post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}
.category-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  padding: 2px var(--space-2);
  border-radius: 9999px;
}
.category-badge:hover { text-decoration: none; opacity: .8; }

/* Tag pills */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.tag-pill {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-surface);
  padding: 2px var(--space-2);
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  transition: color var(--transition), background var(--transition);
}
.tag-pill:hover {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
  text-decoration: none;
}


/* ─────────────────────────────────────────────
   7. SIDEBAR
   ───────────────────────────────────────────── */
.site-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* On mobile, sidebar comes after main content */
@media (max-width: 899px) {
  .site-sidebar {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-6);
  }
}

.sidebar-widget h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* Recent posts widget */
.widget-recent-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.widget-recent-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.widget-recent-list a {
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-recent-list a:hover { color: var(--color-primary); }
.widget-recent-date {
  color: var(--color-text-xmuted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* Categories widget */
.widget-categories-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.widget-categories-list li {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}
.widget-categories-list a { color: var(--color-text); }
.widget-categories-list a:hover { color: var(--color-primary); }
.widget-count {
  font-size: var(--text-xs);
  color: var(--color-text-xmuted);
  background: var(--color-surface);
  padding: 1px 6px;
  border-radius: 9999px;
}

/* Tags cloud widget */
.widget-tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}


/* ─────────────────────────────────────────────
   8. SINGLE POST
   ───────────────────────────────────────────── */
.post-header {
  margin-bottom: var(--space-8);
}
.post-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.post-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.post-meta-sep { color: var(--color-border); }

/* Prose content */
.post-content {
  max-width: var(--content-max-ch);
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.post-content h1 { font-size: var(--text-2xl); }
.post-content h2 { font-size: var(--text-xl); }
.post-content h3 { font-size: var(--text-lg); }
.post-content h4 { font-size: var(--text-md); }
.post-content h5,
.post-content h6 { font-size: var(--text-base); }

.post-content p { margin-bottom: var(--space-4); }

.post-content ul,
.post-content ol {
  margin-bottom: var(--space-4);
  padding-left: 1.5rem;
}
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li { margin-bottom: var(--space-1); }

.post-content blockquote {
  border-left: 3px solid var(--color-primary);
  margin: var(--space-6) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text-muted);
  font-style: italic;
}
.post-content blockquote p:last-child { margin-bottom: 0; }

.post-content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-surface);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.post-content pre {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  margin-bottom: var(--space-4);
}
.post-content pre code {
  background: none;
  padding: 0;
  font-size: var(--text-sm);
}

.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}
.post-content th,
.post-content td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  text-align: left;
}
.post-content th {
  background: var(--color-surface);
  font-weight: 600;
}
.post-content tr:nth-child(even) td { background: var(--color-bg-subtle); }

.post-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

.post-content img {
  border-radius: var(--radius-md);
  max-width: 100%;
  height: auto;
}

/* Breadcrumbs */
.breadcrumbs {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs-sep { color: var(--color-border); }
.breadcrumbs-current { color: var(--color-text); }


/* ─────────────────────────────────────────────
   9. FOOTER
   ───────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-6) 0;
}
.site-footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.site-footer a { color: var(--color-text-muted); }
.site-footer a:hover { color: var(--color-primary); }


/* ─────────────────────────────────────────────
   10. UTILITIES
   ───────────────────────────────────────────── */

/* Visually hidden (for screen-reader labels) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Reading progress bar (style only — needs 1-2 lines of JS to animate) */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--color-primary);
  z-index: 200;
  transition: width 100ms linear;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  font-size: var(--text-sm);
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.pagination a:hover { background: var(--color-bg-subtle); text-decoration: none; }
.pagination .active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}