/* ═══════════════════════════════════════════════════════════════════
   anir0y // infosec blog — Dark-First UI/UX Overhaul
   PaperMod CSS variable overrides + custom component styles
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS — theme-aware palette
   ───────────────────────────────────────────────────────────────── */
:root {
  /* Shared accent colours (work on both themes) */
  --accent-cyan:     #0891b2;
  --accent-blue:     #2563eb;
  --accent-purple:   #7c3aed;
  --accent-red:      #dc2626;
  --accent-orange:   #ea580c;
  --accent-yellow:   #ca8a04;
  --terminal-green:  #16a34a;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Radius scale */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Transitions */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* ── Light mode tokens (default in PaperMod) ── */
  --surface-0:       #ffffff;
  --surface-1:       #f6f8fa;
  --surface-2:       #f0f2f5;
  --surface-3:       #e8ebef;
  --border-subtle:   #d8dee4;
  --border-default:  #d0d7de;
  --border-emphasis: #8c959f;
  --code-bg-custom:  #f6f8fa;
  --text-primary:    #1f2328;
  --text-secondary:  #59636e;
  --text-tertiary:   #8c959f;
  --glass-bg:        rgba(255, 255, 255, 0.7);
  --glass-border:    rgba(0, 0, 0, 0.08);
  --glass-blur:      12px;
  --shadow-sm:       0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:       0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:       0 8px 24px rgba(0,0,0,0.12);
  --shadow-glow:     0 0 20px rgba(8,145,178,0.1);
  --inline-code-bg:  rgba(175, 184, 193, 0.2);
  --inline-code-color: #0550ae;
  --callout-info-bg:    rgba(8, 145, 178, 0.06);
  --callout-warn-bg:    rgba(202, 138, 4, 0.06);
  --callout-danger-bg:  rgba(220, 38, 38, 0.06);
  --callout-tip-bg:     rgba(22, 163, 74, 0.06);
  --tag-bg:          rgba(8, 145, 178, 0.08);
  --tag-border:      rgba(8, 145, 178, 0.2);
  --card-hover-border: rgba(8, 145, 178, 0.4);
  --card-hover-shadow: 0 4px 15px rgba(0,0,0,0.08);
  --hero-gradient-from: #f6f8fa;
  --hero-gradient-to:   #ffffff;
  --hero-glow:       rgba(8,145,178,0.04);
  --accent-bar-from: var(--accent-cyan);
  --accent-bar-to:   var(--accent-purple);
  --logo-gradient-from: #0550ae;
  --logo-gradient-to:   #0969da;
  --progress-from:   var(--accent-cyan);
  --progress-to:     var(--accent-purple);
  --blockquote-bg:   rgba(8, 145, 178, 0.03);
  --table-stripe:    rgba(0, 0, 0, 0.02);
  --table-hover:     rgba(8, 145, 178, 0.04);
  --toc-bg:          #f6f8fa;
  --nav-bg:          rgba(255, 255, 255, 0.85);
  --nav-border:      rgba(0, 0, 0, 0.06);
  --top-link-bg:     #ffffff;
  --top-link-hover-bg: var(--accent-cyan);
}

/* ── Dark mode tokens ── */
:root[data-theme="dark"] {
  --accent-cyan:     #22d3ee;
  --accent-blue:     #60a5fa;
  --accent-purple:   #a78bfa;
  --accent-red:      #f87171;
  --accent-orange:   #fb923c;
  --accent-yellow:   #fbbf24;
  --terminal-green:  #00ff41;

  --surface-0:       #0b0d10;
  --surface-1:       #11141a;
  --surface-2:       #161b22;
  --surface-3:       #1c2333;
  --border-subtle:   #21262d;
  --border-default:  #30363d;
  --border-emphasis: #484f58;
  --code-bg-custom:  #0d1117;
  --text-primary:    #e6edf3;
  --text-secondary:  #8b949e;
  --text-tertiary:   #484f58;
  --glass-bg:        rgba(22, 27, 34, 0.65);
  --glass-border:    rgba(48, 54, 61, 0.5);
  --shadow-sm:       0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:       0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:       0 8px 30px rgba(0,0,0,0.5);
  --shadow-glow:     0 0 20px rgba(34,211,238,0.15);
  --inline-code-bg:  rgba(110, 118, 129, 0.12);
  --inline-code-color: #22d3ee;
  --callout-info-bg:    rgba(34, 211, 238, 0.08);
  --callout-warn-bg:    rgba(251, 191, 36, 0.08);
  --callout-danger-bg:  rgba(248, 113, 113, 0.08);
  --callout-tip-bg:     rgba(0, 255, 65, 0.08);
  --tag-bg:          rgba(34, 211, 238, 0.08);
  --tag-border:      rgba(34, 211, 238, 0.15);
  --card-hover-border: rgba(34, 211, 238, 0.3);
  --card-hover-shadow: 0 0 25px rgba(34, 211, 238, 0.06);
  --hero-gradient-from: #161b22;
  --hero-gradient-to:   #11141a;
  --hero-glow:       rgba(34,211,238,0.06);
  --logo-gradient-from: #22d3ee;
  --logo-gradient-to:   #00ff41;
  --blockquote-bg:   rgba(34, 211, 238, 0.04);
  --table-stripe:    rgba(110, 118, 129, 0.04);
  --table-hover:     rgba(34, 211, 238, 0.04);
  --toc-bg:          var(--surface-2);
  --nav-bg:          rgba(11, 13, 16, 0.8);
  --nav-border:      rgba(48, 54, 61, 0.5);
  --top-link-bg:     var(--surface-3);

  /* Override PaperMod dark vars */
  --theme:         var(--surface-0);
  --entry:         var(--surface-2);
  --primary:       #e6edf3;
  --secondary:     #8b949e;
  --tertiary:      var(--surface-3);
  --content:       #e6edf3;
  --hljs-bg:       var(--code-bg-custom);
  --code-bg:       var(--code-bg-custom);
  --border:        var(--border-subtle);
}

/* ─────────────────────────────────────────────────────────────────
   2. TYPOGRAPHY — Inter body + JetBrains Mono code
   NOTE: Hugo's CSS minifier resolves var() and strips quotes from
   multi-word font names, so font stacks are written directly here.
   ───────────────────────────────────────────────────────────────── */

html {
  font-size: 16px;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
               Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1;
  font-optical-sizing: auto;
  letter-spacing: -0.011em;
}

code, pre, .highlight, kbd, samp,
.post-content code, .post-content pre {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code',
               'Fira Code', 'SF Mono', Menlo, Monaco, Consolas,
               'Courier New', monospace !important;
  font-variant-ligatures: contextual;
  font-feature-settings: 'calt' 1, 'liga' 1;
}

/* Better heading hierarchy */
.post-content h1 { font-size: 1.85rem; font-weight: 700; letter-spacing: -0.03em; margin-top: var(--space-2xl); }
.post-content h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.025em; margin-top: var(--space-2xl); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border-subtle); }
.post-content h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.015em; margin-top: var(--space-xl); }
.post-content h4 { font-size: 1.05rem; font-weight: 600; margin-top: var(--space-lg); }

/* Body text rhythm */
.post-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--content);
}

.post-content p {
  margin-bottom: 1.4em;
}

/* ─────────────────────────────────────────────────────────────────
   3. HEADER / NAVIGATION — frosted glass navbar
   ───────────────────────────────────────────────────────────────── */
.header {
  background: var(--nav-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border-bottom: 1px solid var(--nav-border) !important;
  transition: background var(--duration-normal) var(--ease-out);
}

/* Logo styling */
.logo a {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--logo-gradient-from), var(--logo-gradient-to));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.logo a:hover {
  opacity: 0.8;
}

/* Nav links */
#menu a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast), background var(--duration-fast);
  position: relative;
}
#menu a:hover {
  color: var(--text-primary);
  background: rgba(128, 128, 128, 0.08);
}
#menu li .active {
  color: var(--accent-cyan) !important;
}

/* Theme toggle */
#theme-toggle {
  border-radius: var(--radius-sm);
  padding: 6px;
  transition: background var(--duration-fast), transform var(--duration-fast) var(--ease-spring);
}
#theme-toggle:hover {
  background: rgba(128, 128, 128, 0.1);
  transform: rotate(15deg);
}

/* ─────────────────────────────────────────────────────────────────
   4. HERO / HOME-INFO — dramatic welcome
   ───────────────────────────────────────────────────────────────── */
.first-entry {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(135deg, var(--hero-gradient-from), var(--hero-gradient-to)) !important;
  padding: var(--space-2xl) !important;
  position: relative;
  overflow: hidden;
}

/* Subtle gradient accent glow */
.first-entry::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--hero-glow) 0%, transparent 70%);
  pointer-events: none;
}

.first-entry .entry-header h1 {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;
  font-size: 2rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--terminal-green), var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--space-md);
}

.first-entry .entry-content {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 600px;
}
.first-entry .entry-content strong {
  color: var(--text-primary);
}

/* Social icons in hero */
.social-icons a {
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast), background var(--duration-fast),
              transform var(--duration-fast) var(--ease-spring);
}
.social-icons a:hover {
  background: rgba(128, 128, 128, 0.1);
  color: var(--accent-cyan);
  transform: translateY(-2px);
}
.social-icons svg {
  width: 22px;
  height: 22px;
}

/* ─────────────────────────────────────────────────────────────────
   5. POST CARDS — clean cards with hover lift
   ───────────────────────────────────────────────────────────────── */
.post-entry {
  background: var(--surface-1) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: var(--space-md) !important;
  padding: var(--space-lg) var(--space-xl) !important;
  transition: transform var(--duration-normal) var(--ease-spring),
              border-color var(--duration-normal),
              box-shadow var(--duration-normal),
              background var(--duration-normal);
  position: relative;
  overflow: hidden;
}

.post-entry:hover {
  transform: translateY(-3px);
  border-color: var(--card-hover-border) !important;
  box-shadow: var(--shadow-md), var(--card-hover-shadow);
  background: var(--surface-2) !important;
}

/* Accent line on left edge when hovered */
.post-entry::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent-bar-from), var(--accent-bar-to));
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: opacity var(--duration-normal);
}
.post-entry:hover::after {
  opacity: 1;
}

/* Card title */
.post-entry .entry-header h2 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
  transition: color var(--duration-fast);
}
.post-entry:hover .entry-header h2 {
  color: var(--accent-cyan);
}

/* Card summary */
.post-entry .entry-content {
  margin-bottom: var(--space-sm);
}
.post-entry .entry-content p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card footer metadata */
.post-entry .entry-footer {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;
  letter-spacing: -0.01em;
}
.post-entry .entry-footer span {
  display: inline-flex;
  align-items: center;
}

/* Full-card overlay link */
.post-entry .entry-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.post-entry .entry-link:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}

/* ─────────────────────────────────────────────────────────────────
   6. CODE BLOCKS — terminal-style
   ───────────────────────────────────────────────────────────────── */
.post-content .highlight {
  position: relative;
  margin: var(--space-lg) 0;
}

.post-content .highlight pre,
.post-content pre {
  background: var(--code-bg-custom) !important;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.3em 1.4em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0.875em;
  line-height: 1.7;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
  box-shadow: var(--shadow-sm);
}

.post-content .highlight pre::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.post-content .highlight pre::-webkit-scrollbar-track {
  background: transparent;
}
.post-content .highlight pre::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 3px;
}
.post-content .highlight pre::-webkit-scrollbar-thumb:hover {
  background: var(--border-emphasis);
}

/* Inline code */
.post-content :not(pre) > code {
  background: var(--inline-code-bg);
  border: 1px solid var(--inline-code-bg);
  padding: 0.15em 0.45em;
  border-radius: var(--radius-sm);
  font-size: 0.88em;
  color: var(--inline-code-color);
  font-weight: 500;
}

/* ── Light-mode code contrast fix ──────────────────────────────
   Hugo's Dracula chroma theme hard-codes dark backgrounds (#282a36)
   and near-white text (#f8f8f2). In light mode we must override BOTH
   background AND color — overriding only one makes things worse.
   ────────────────────────────────────────────────────────────── */
:root:not([data-theme="dark"]) .post-content .highlight,
:root:not([data-theme="dark"]) .post-content .highlight .chroma,
:root:not([data-theme="dark"]) .post-content .highlight pre,
:root:not([data-theme="dark"]) .post-content .highlight code,
:root:not([data-theme="dark"]) .post-content pre,
:root:not([data-theme="dark"]) .post-content pre code,
:root:not([data-theme="dark"]) .chroma,
:root:not([data-theme="dark"]) .chroma pre,
:root:not([data-theme="dark"]) .chroma code {
  color: var(--text-primary) !important;
  background: var(--code-bg-custom) !important;
}

/* Line-number gutter — slightly darker surface, muted colour */
:root:not([data-theme="dark"]) .chroma .lntd:first-child pre,
:root:not([data-theme="dark"]) .chroma .lntd:first-child {
  background: var(--surface-2) !important;
  color: var(--text-tertiary) !important;
}
:root:not([data-theme="dark"]) .highlight .ln,
:root:not([data-theme="dark"]) .chroma .ln,
:root:not([data-theme="dark"]) .chroma .lnt {
  color: var(--text-tertiary) !important;
}

/* Goat ASCII-art SVG diagrams — give them a proper light background */
:root:not([data-theme="dark"]) .goat.svg-container {
  background: var(--code-bg-custom) !important;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1em 1.4em;
  display: block;
}

/* Line numbers */
.highlight .ln {
  color: var(--text-tertiary);
  margin-right: 1.2em;
  user-select: none;
}

/* Copy button */
.copy-code {
  background: var(--surface-3) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  padding: 4px 10px !important;
  transition: all var(--duration-fast) !important;
}
.copy-code:hover {
  background: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────
   7. TABLE OF CONTENTS — clean, collapsible
   ───────────────────────────────────────────────────────────────── */
.toc {
  background: var(--toc-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.toc details summary {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent-cyan);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  padding: var(--space-xs) 0;
}

.toc ul {
  margin-top: var(--space-sm);
  padding-left: 0;
  list-style: none;
}

.toc ul li {
  padding: 0.3rem 0;
  border-left: 2px solid var(--border-subtle);
  padding-left: var(--space-md);
  transition: border-color var(--duration-fast);
}

.toc ul li:hover {
  border-left-color: var(--accent-cyan);
}

.toc a {
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.toc a:hover {
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────
   8. CALLOUT BOXES
   ───────────────────────────────────────────────────────────────── */
.callout {
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  border-left: 3px solid;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.callout-title {
  display: block;
  margin-bottom: 0.5em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.callout-info   { background: var(--callout-info-bg);   border-color: var(--accent-cyan); }
.callout-warn   { background: var(--callout-warn-bg);   border-color: var(--accent-yellow); }
.callout-danger { background: var(--callout-danger-bg); border-color: var(--accent-red); }
.callout-tip    { background: var(--callout-tip-bg);    border-color: var(--terminal-green); }
.callout-info .callout-title   { color: var(--accent-cyan); }
.callout-warn .callout-title   { color: var(--accent-yellow); }
.callout-danger .callout-title { color: var(--accent-red); }
.callout-tip .callout-title    { color: var(--terminal-green); }

/* ─────────────────────────────────────────────────────────────────
   9. TABLES — zebra-striped, rounded
   ───────────────────────────────────────────────────────────────── */
.post-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--space-lg) 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Scrollable wide tables */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-lg) 0;
}
.table-scroll table {
  width: max-content;
  min-width: 100%;
  white-space: nowrap;
  margin: 0;
  overflow: visible;
  border-radius: var(--radius-md);
}
.post-content th,
.post-content td {
  padding: 0.7rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
.post-content th {
  background: var(--surface-3);
  font-weight: 600;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
}
.post-content tr:last-child td {
  border-bottom: none;
}
.post-content tbody tr {
  transition: background var(--duration-fast);
}
.post-content tbody tr:nth-child(even) {
  background: var(--table-stripe);
}
.post-content tbody tr:hover {
  background: var(--table-hover);
}

/* ─────────────────────────────────────────────────────────────────
   10. BLOCKQUOTES
   ───────────────────────────────────────────────────────────────── */
blockquote {
  border-left: 3px solid var(--accent-cyan);
  background: var(--blockquote-bg);
  padding: var(--space-md) var(--space-lg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: var(--text-secondary);
  margin: var(--space-lg) 0;
}
blockquote strong {
  color: var(--content);
}

/* ─────────────────────────────────────────────────────────────────
   11. TAGS & CATEGORIES — pill badges
   ───────────────────────────────────────────────────────────────── */
.post-tags a,
.terms-tags a {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  margin: 0.2rem 0.15rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent-cyan);
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  border-radius: 100px;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}
.post-tags a:hover,
.terms-tags a:hover {
  background: var(--tag-border);
  border-color: var(--card-hover-border);
  color: var(--text-primary);
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────────
   12. BREADCRUMBS
   ───────────────────────────────────────────────────────────────── */
.breadcrumbs {
  font-size: 0.82rem;
  color: var(--text-tertiary);
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;
}
.breadcrumbs a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.breadcrumbs a:hover {
  color: var(--accent-cyan);
}

/* ─────────────────────────────────────────────────────────────────
   13. POST NAVIGATION (prev/next)
   ───────────────────────────────────────────────────────────────── */

/* Reset PaperMod's container styling — we style individual cards */
.paginav {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-md) !important;
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-subtle);
  background: transparent !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  line-height: normal !important;
}

/* Override PaperMod's hardcoded 50% width */
.paginav .prev,
.paginav .next {
  width: auto !important;
  flex: 1 1 calc(50% - var(--space-md) / 2);
  min-width: 220px;
  margin: 0 !important;
}

/* Card styling */
.paginav a {
  display: flex !important;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--space-md) var(--space-lg) !important;
  background: var(--surface-1) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  text-decoration: none;
  transition: transform var(--duration-normal) var(--ease-spring),
              border-color var(--duration-normal),
              background var(--duration-normal),
              box-shadow var(--duration-normal);
  height: 100%;
  box-sizing: border-box;
}

.paginav a:hover {
  transform: translateY(-3px) !important;
  border-color: var(--card-hover-border) !important;
  background: var(--surface-2) !important;
  box-shadow: var(--shadow-md), var(--card-hover-shadow) !important;
}

/* Direction label e.g. "← PREV" / "NEXT →" */
.paginav .title {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--accent-cyan) !important;
}

/* Post title inside nav card */
.paginav a > span:not(.title) {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary);
  transition: color var(--duration-fast);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.paginav a:hover > span:not(.title) {
  color: var(--accent-cyan);
}
.paginav span:hover:not(.title) {
  box-shadow: none !important;
}

/* "Prev" left-aligned, "Next" right-aligned */
.paginav a.prev {
  text-align: left;
  align-items: flex-start;
}
.paginav a.next {
  text-align: right;
  align-items: flex-end;
  margin-inline-start: 0 !important;
}

/* If only one nav link, take full width */
.paginav a:only-child {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* When alone, both prev and next go left-aligned full width */
.paginav a.next:only-child,
.paginav a.prev:only-child {
  text-align: left !important;
  align-items: flex-start !important;
}

/* Responsive: stack on small screens */
@media (max-width: 600px) {
  .paginav .prev,
  .paginav .next {
    flex: 1 1 100%;
  }
  .paginav a.next {
    text-align: left !important;
    align-items: flex-start !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   14. SEARCH — enhanced input
   ───────────────────────────────────────────────────────────────── */
#searchbox input {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 1rem !important;
  padding: 0.8rem 1.2rem !important;
  color: var(--text-primary) !important;
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
}
#searchbox input:focus {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1) !important;
  outline: none !important;
}
#searchbox input::placeholder {
  color: var(--text-tertiary) !important;
}

/* ─────────────────────────────────────────────────────────────────
   15. FOOTER
   ───────────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border-subtle) !important;
  color: var(--text-tertiary);
  font-size: 0.82rem;
  padding: var(--space-xl) 0;
}
.footer span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.footer a {
  color: var(--text-secondary);
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.footer a:hover {
  color: var(--accent-cyan);
  border-bottom-color: var(--accent-cyan);
}

/* ─────────────────────────────────────────────────────────────────
   15b. POST CONTENT LINKS — underlined, accessible
   ───────────────────────────────────────────────────────────────── */
.post-content a {
  color: var(--accent-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(8, 145, 178, 0.3);
  padding-bottom: 1px;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.post-content a:hover {
  border-bottom-color: var(--accent-cyan);
}
:root[data-theme="dark"] .post-content a {
  border-bottom-color: rgba(34, 211, 238, 0.3);
}
:root[data-theme="dark"] .post-content a:hover {
  border-bottom-color: var(--accent-cyan);
}

/* Pagination links */
.page-link,
.pagination a {
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.75rem;
  font-size: 0.88rem;
  text-decoration: none;
  transition: all var(--duration-fast);
}
.page-link:hover,
.pagination a:hover {
  color: var(--accent-cyan);
  border-color: var(--card-hover-border);
  background: var(--surface-2);
}

/* ─────────────────────────────────────────────────────────────────
   16. SCROLL-TO-TOP
   ───────────────────────────────────────────────────────────────── */
.top-link {
  background: var(--top-link-bg) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--duration-normal) var(--ease-spring) !important;
}
.top-link:hover {
  background: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(8, 145, 178, 0.25) !important;
}
.top-link svg {
  fill: var(--text-secondary);
}
.top-link:hover svg {
  fill: #fff;
}

/* ─────────────────────────────────────────────────────────────────
   17. READING PROGRESS BAR
   ───────────────────────────────────────────────────────────────── */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--progress-from), var(--progress-to));
  z-index: 9999;
  transition: width 50ms linear;
}

/* ─────────────────────────────────────────────────────────────────
   18. KaTeX (LaTeX)
   ───────────────────────────────────────────────────────────────── */
.katex {
  font-size: 1.08em;
}
.katex .base {
  color: inherit;
}
.katex-display {
  background: var(--table-stripe);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin: var(--space-lg) 0;
  overflow-x: auto;
}

/* ─────────────────────────────────────────────────────────────────
   19. GLOBAL MICRO-INTERACTIONS
   ───────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

::selection {
  background: rgba(8, 145, 178, 0.2);
  color: inherit;
}
:root[data-theme="dark"] ::selection {
  background: rgba(34, 211, 238, 0.2);
}

a {
  transition: color var(--duration-fast) var(--ease-out);
}

:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

/* image styles handled via extend_footer lightbox partial */

.skip-to-content {
  background: var(--accent-cyan);
  color: #fff;
  font-weight: 600;
}

.post-content hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-default), transparent);
  margin: var(--space-2xl) 0;
}

/* ─────────────────────────────────────────────────────────────────
   20b. HOMEPAGE COVER IMAGES — fixed square thumbnails
        Ensures all post cards show the same-size square image for
        visual unity regardless of original image dimensions.
   ───────────────────────────────────────────────────────────────── */
.post-entry .entry-cover {
  width: 120px !important;
  min-width: 120px !important;
  height: 120px !important;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  align-self: center;
}

.post-entry .entry-cover img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  border: none !important;
  cursor: default;
}

@media (max-width: 640px) {
  .post-entry .entry-cover {
    width: 80px !important;
    min-width: 80px !important;
    height: 80px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   20. ADSENSE CONTAINERS
   ───────────────────────────────────────────────────────────────── */
.adsense-in-article {
  min-height: 90px;
  margin: var(--space-xl) 0;
  border-radius: var(--radius-md);
}

/* ─────────────────────────────────────────────────────────────────
   21. FADE-IN ANIMATION
   ───────────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.main {
  animation: fadeInUp var(--duration-slow) var(--ease-out);
}

.post-entry {
  animation: fadeInUp var(--duration-slow) var(--ease-out);
  animation-fill-mode: both;
}
.post-entry:nth-child(2) { animation-delay: 80ms; }
.post-entry:nth-child(3) { animation-delay: 160ms; }
.post-entry:nth-child(4) { animation-delay: 240ms; }
.post-entry:nth-child(5) { animation-delay: 320ms; }

/* ─────────────────────────────────────────────────────────────────
   22. RESPONSIVE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .first-entry {
    padding: var(--space-lg) !important;
  }
  .first-entry .entry-header h1 {
    font-size: 1.5rem;
  }

  .post-entry {
    padding: var(--space-md) var(--space-lg) !important;
  }

  .post-content .highlight pre,
  .post-content pre {
    font-size: 0.82em;
    padding: 1em;
    border-radius: var(--radius-sm);
  }

  .post-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.88rem;
  }

  #menu a {
    padding: 0.6rem 0.75rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .post-entry .entry-link {
    min-height: 44px;
  }

  .post-content {
    font-size: 1rem;
    line-height: 1.75;
  }

  .post-content h2 {
    font-size: 1.3rem;
  }

  .social-icons {
    flex-wrap: wrap;
    gap: 0.4rem;
  }
}

@media (max-width: 480px) {
  .post-content .highlight pre {
    font-size: 0.78em;
    padding: 0.75em;
  }

  .post-content h1 { font-size: 1.5rem; }
  .post-content h2 { font-size: 1.2rem; }
  .post-content h3 { font-size: 1.05rem; }
}