/*
Theme Name: IT Pro Insights
Theme URI: https://itproinsights.com
Author: Thorsteinn Halldorsson
Description: Clean technical blog theme for IT professionals. Optimized for long-form content, code snippets, and tutorials.
Version: 1.2.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: itpro
*/

/* ── Reset & Base ────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Slate Pro palette ─────────────────────────────────────────────────────
   Refined dark identity: warm slate surfaces + an indigo→cyan accent.
   Dark-mode-first; light mode is the harmonised secondary experience. */
:root {
  --color-bg:          #ffffff;
  --color-bg-alt:      #f4f5f9;
  --color-bg-code:     #181b24;
  --color-surface:     #ffffff;
  --color-border:      #e3e4ed;
  --color-text:        #1c1d2a;
  --color-text-muted:  #62657a;
  --color-heading:     #0e0f1a;
  --color-accent:      #4f46e5;
  --color-accent-dark: #4338ca;
  --color-accent-2:    #06b6d4;
  --color-tag-bg:      #eef0ff;
  --color-tag-text:    #4338ca;
  --color-header-bg:   #10131a;
  --color-header-text: #f0f3f8;
  --color-footer-bg:   #10131a;
  --color-footer-text: #9aa0b3;
  --color-sidebar-bg:  #f4f5f9;
  --gradient-accent:   linear-gradient(135deg, #6366f1, #22d3ee);
  --font-body:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-code:   'Cascadia Code', 'Fira Code', 'JetBrains Mono', Consolas, monospace;
  --font-heading: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --radius:   8px;
  --shadow:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 6px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
  --shadow-glow: 0 0 0 1px rgba(99,102,241,.22), 0 10px 30px rgba(99,102,241,.16);

  /* Live height of the sticky header. The 60px seed matches .header-inner's
     min-height; theme.js overwrites it from the real measured height on load and
     on resize, so every sticky offset and scroll-margin below stays correct when
     the header grows (wrapped nav, larger text, open mobile menu). */
  --header-h: 60px;

  /* Shared reading measure for the article column (~72ch of body copy).
     Deliberately expressed in rem, not ch: `ch` resolves against the *local*
     font-size, so a ch cap on the prose, the ad slot and the post-nav would each
     land on a different right edge. A rem cap aligns them exactly. */
  --measure: 42rem;
}

[data-theme="dark"] {
  --color-bg:          #14171f;
  --color-bg-alt:      #1b1f29;
  --color-surface:     #1b1f29;
  --color-border:      #2a2f3b;
  --color-text:        #d6dae3;
  --color-text-muted:  #8b91a0;
  --color-heading:     #f0f3f8;
  --color-accent:      #818cf8;
  --color-accent-dark: #a5b4fc;
  --color-accent-2:    #22d3ee;
  --color-tag-bg:      #232a3d;
  --color-tag-text:    #a5b4fc;
  --color-sidebar-bg:  #1b1f29;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  transition: background .2s, color .2s;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--color-accent-dark); }

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

img { max-width: 100%; height: auto; display: block; }

/* ── Layout ──────────────────────────────────────────────────────────── */

.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-content { flex: 1; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px);
}

/* Ultra-wide displays: let the shell breathe a little. Nothing inside depends on
   a hard 1200px — the grids are auto-fill and the article column is capped by
   --measure — so the extra width lands on the card grids and the gutters. */
@media (min-width: 1600px) {
  .container { max-width: 1360px; }
}

.content-area {
  display: grid;
  /* minmax(0,…) on both tracks: without it an over-wide child (a table, a long
     code line) sets the track's min-content width and pushes the whole page
     sideways instead of scrolling inside its own container. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 40px;
  padding: 40px 0;
}

/* Belt-and-braces for the same overflow class of bug one level down. */
.content-area > *,
.site-main,
.entry-content { min-width: 0; }

/* The sidebar is 300px + a 40px gutter; below ~1080px the article column drops
   under ~55 characters of comfortable measure, so stack instead of squeezing. */
@media (max-width: 1080px) {
  .content-area { grid-template-columns: 1fr; }
  .sidebar { order: 2; }
}

/* ── Header ──────────────────────────────────────────────────────────── */

.site-header {
  background: var(--color-header-bg);
  color: var(--color-header-text);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 8px rgba(0,0,0,.3);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: 20px;
  /* One row at every width. The tagline truncates and the nav shrinks (wrapping
     its own items on desktop, collapsing behind .nav-toggle on mobile) rather
     than pushing branding and actions onto a second header row. */
  flex-wrap: nowrap;
}

.site-branding { display: flex; align-items: center; gap: 10px; min-width: 0; }

.site-title {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.3px;
  color: #fff;
  text-decoration: none;
}
.site-title:hover { color: var(--color-accent); text-decoration: none; }

.site-name { flex: 0 0 auto; white-space: nowrap; }

/* The tagline yields space to the nav: it truncates with an ellipsis rather
   than forcing the nav to squeeze and wrap a menu label onto two lines. */
.site-tagline {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .75rem;
  color: #6b7897;
  display: none;
}
@media (min-width: 600px) { .site-tagline { display: block; } }

.header-logo {
  width: 32px;
  height: 32px;
  background: var(--color-accent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .85rem;
  color: #fff;
  flex-shrink: 0;
}

/* Nav */
.site-nav { flex: 0 1 auto; min-width: 0; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 4px;
  align-items: center;
}

.site-nav a {
  color: #9ca3b0;
  font-size: .875rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius);
  transition: color .15s, background .15s;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
  text-decoration: none;
}
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a {
  color: #fff;
  font-weight: 600;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 -2px 0 var(--color-accent);
  text-decoration: none;
}

/* ── Mobile nav toggle ───────────────────────────────────────────────────────
   A real <button>, so it is focusable and operable from the keyboard for free.
   theme.js flips data-open on .site-nav and aria-expanded here; Escape closes.
   Hidden above 900px, where the menu is inline in the header row. */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 34px;
  padding: 0 8px;
  background: none;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle:hover { background: rgba(255,255,255,.08); }

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: #d6dae3;
  transition: transform .15s, opacity .15s;
}

/* Open state: the three bars fold into a close (×) mark. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  /* Collapsed by default; opens as a full-width sheet under the sticky header.
     .site-header is position:sticky, which makes it the containing block for
     this absolutely positioned list — hence top:100% lands right below it. */
  .site-nav ul { display: none; }

  .site-nav[data-open] ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 10px clamp(16px, 4vw, 24px);
    background: var(--color-header-bg);
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }

  .site-nav[data-open] a {
    display: block;
    padding: 10px 12px;
    font-size: .95rem;
  }
}

.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Search bar in header */
.header-search {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 0 10px;
  height: 34px;
  transition: border-color .15s;
}
.header-search:focus-within { border-color: var(--color-accent); }
.header-search input {
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: .85rem;
  width: 160px;
}
.header-search input::placeholder { color: #6b7897; }
.header-search button {
  background: none;
  border: none;
  color: #6b7897;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.header-search button:hover { color: #fff; }

@media (max-width: 600px) { .header-search { display: none; } }

/* Dark mode toggle */
.dark-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius);
  color: #9ca3b0;
  cursor: pointer;
  font-size: .8rem;
  padding: 5px 9px;
  transition: all .15s;
}
.dark-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ── Hero / Page Header ──────────────────────────────────────────────── */

.page-hero {
  background: linear-gradient(135deg, #10131a 0%, #1e2440 100%);
  color: #fff;
  padding: 32px 0 24px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.page-hero .breadcrumb {
  font-size: .8rem;
  color: #6b7897;
  margin-bottom: 12px;
}
.page-hero .breadcrumb a { color: var(--color-accent); }

.page-hero h1 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.25;
  max-width: 800px;
  letter-spacing: -.5px;
}

/* Two-column article hero: title/meta on the left, featured image on the right.
   Goes two-column at exactly the width the sidebar reappears (>1080px), so the
   hero and the content below it never disagree about how wide the page is. */
.page-hero__grid { display: grid; gap: 28px; align-items: center; }
.page-hero__text,
.page-hero__media { min-width: 0; }
.page-hero__media img,
.page-hero__img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
@media (min-width: 1081px) {
  .page-hero__grid.has-media { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 40px; }
}

/* PlantUML (official Azure-icon) diagrams are full-color; sit them on a light card
   so the icons read clearly against the dark page. */
.diagram.plantuml { background: #fff; border-radius: 12px; padding: 20px; overflow-x: auto; }
.diagram.plantuml svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }

.post-meta-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  font-size: .85rem;
  color: #9ca3b0;
}

.post-meta-hero .author { color: #d6dae3; font-weight: 500; }
.post-meta-hero .author-role-inline { color: #9ca3b0; font-weight: 400; }
.reading-time::before { content: '·'; margin-right: 16px; }
/* The meta row wraps on narrow screens, where the separator would strand a bare
   "·" at the start of the new line. It only ever separated two flex items that
   already have a 16px gap, so drop it rather than guard it. */
@media (max-width: 600px) {
  .reading-time::before { content: none; margin-right: 0; }
}

.category-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  background: rgba(99,102,241,.25);
  color: #818cf8;
  text-decoration: none;
}
.category-badge:hover { background: rgba(99,102,241,.4); text-decoration: none; }

/* ── Main Content Area ───────────────────────────────────────────────── */

/* Reading measure.
   The cap used to sit on .entry-content alone, so the prose stopped at ~68ch
   while its siblings inside <article> (ad slot, tag list, author bio, post nav)
   ran the full column — three different right edges down one page. These all now
   share --measure and are left-aligned, which keeps a single clean left edge from
   the hero band above straight down the article.
   Deliberately NOT applied to .related-posts and .newsletter-cta: the related
   grid needs the full column to keep three readable cards (at --measure they
   collapse to ~200px each), and the newsletter banner reads as an intentional
   full-width section break at the end of the article. */
.site-main > article > .entry-content,
.site-main > article > .series-nav,
.site-main > article > .ad-slot,
.site-main > article > .tag-list,
.site-main > article > .author-bio,
.site-main > article > .author-bio-full,
.site-main > article > .post-navigation {
  max-width: var(--measure);
  margin-right: auto;
}

.entry-content {
  /* Fluid body copy: 16px on a phone, easing up to 18px only once the viewport
     can carry it. The flat 1.125rem read oversized on small laptops. */
  font-size: clamp(1rem, 0.97rem + 0.25vw, 1.125rem);
  line-height: 1.7;
  color: var(--color-text);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: 700;
  line-height: 1.3;
  margin: 2em 0 .75em;
  /* Clears the sticky header when a TOC / anchor link jumps to a heading. */
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.entry-content h2 { font-size: 1.5rem; margin-top: 2.5rem; letter-spacing: -.02em; border-bottom: 1px solid var(--color-border); padding-bottom: .4em; }
.entry-content h3 { font-size: 1.2rem; }
.entry-content h4 { font-size: 1.05rem; }

.entry-content p { margin-bottom: 1.25em; }

.entry-content ul,
.entry-content ol {
  margin: 0 0 1.25em 1.5em;
}
.entry-content li { margin-bottom: .4em; }

.entry-content blockquote {
  border-left: 4px solid var(--color-accent);
  background: var(--color-bg-alt);
  padding: 1em 1.25em;
  margin: 1.5em 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--color-text-muted);
  font-style: italic;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: .9rem;
}
.entry-content th,
.entry-content td {
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  text-align: left;
}
.entry-content th {
  background: var(--color-bg-alt);
  font-weight: 600;
  color: var(--color-heading);
}
.entry-content tr:nth-child(even) td { background: var(--color-bg-alt); }

/* Wide comparison tables scroll inside their own container instead of forcing the
   whole document sideways. functions.php wraps every table in .table-scroll via a
   the_content filter; min-width: max-content stops the table re-wrapping its cells
   into an unreadable column of single letters. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 1.5rem 0;
}
.table-scroll > table {
  min-width: max-content;
  width: auto;
  margin: 0;
}

/* CSS-only fallback for any already-published markup the filter can't reach
   (a table nested in a shortcode, a hand-edited block). display: block turns the
   table itself into the scroll container. Wrapped tables are .table-scroll > table
   and never match this. */
.entry-content > table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

.entry-content hr { border: none; border-top: 1px solid var(--color-border); margin: 2em 0; }

/* Inline code */
.entry-content code {
  font-family: var(--font-code);
  font-size: .875em;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: .15em .4em;
  border-radius: 4px;
  color: #d6dae3;
}
[data-theme="dark"] .entry-content code { background: #1e2433; }

/* Long inline code (resource ids, connection strings, cmdlet paths) must break
   rather than push the column wide. Scoped with :not(pre) so code *blocks* keep
   their own horizontal scroll and never wrap mid-command. */
.entry-content :not(pre) > code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Code blocks */
.entry-content pre {
  background: var(--color-bg-code) !important;
  border-radius: var(--radius);
  margin: 1.5em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  box-shadow: var(--shadow-md);
}
.entry-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: .85rem;
  color: inherit;
  line-height: 1.6;
}

/* Code block wrapper (added by JS for copy button + lang label) */
.code-block {
  position: relative;
  margin: 1.5em 0;
}
.code-block pre { margin: 0; }

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1b1f29;
  border-bottom: 1px solid #2a2f3b;
  padding: 6px 14px;
  font-size: .75rem;
  font-family: var(--font-code);
  color: #8b91a0;
  border-radius: var(--radius) var(--radius) 0 0;
}

.copy-btn {
  background: none;
  border: 1px solid #2a2f3b;
  border-radius: 4px;
  color: #8b91a0;
  cursor: pointer;
  font-size: .72rem;
  font-family: var(--font-body);
  padding: 3px 10px;
  transition: all .15s;
}
.copy-btn:hover { background: #2a2f3b; color: #d6dae3; }
.copy-btn.copied { border-color: #3fb950; color: #3fb950; }

/* ── Callout / Alert boxes ───────────────────────────────────────────── */

.callout {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  margin: 1.5em 0;
  font-size: .9rem;
}
.callout-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.callout.info    { background: #dbeafe; border-left: 4px solid #3b82f6; }
.callout.warning { background: #fef3c7; border-left: 4px solid #f59e0b; }
.callout.danger  { background: #fee2e2; border-left: 4px solid #ef4444; }
.callout.success { background: #d1fae5; border-left: 4px solid #10b981; }
[data-theme="dark"] .callout.info    { background: #232a3d; }
[data-theme="dark"] .callout.warning { background: #2d2416; }
[data-theme="dark"] .callout.danger  { background: #2d1616; }
[data-theme="dark"] .callout.success { background: #162d22; }

/* ── Post Card (archive) ─────────────────────────────────────────────── */

/* Column count follows the space actually available rather than the viewport:
   the fixed repeat(3) kept three columns inside a ~810px content column at
   1025px, squeezing every card to ~250px. auto-fill drops to two (and then one)
   the moment a card would go under 280px, with no breakpoints to keep in sync. */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.post-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  transition: box-shadow .2s, border-color .2s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.post-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}

.post-card .post-category { margin-bottom: 4px; }

.post-card h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.35;
  margin: 0;
}
.post-card h2 a { color: inherit; }
.post-card h2 a:hover { color: var(--color-accent); text-decoration: none; }

.post-card .post-excerpt {
  color: var(--color-text-muted);
  font-size: .9rem;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card .post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: .8rem;
  color: var(--color-text-muted);
}

.post-card .post-byline { color: var(--color-heading); font-weight: 600; }

.post-card .read-more {
  font-size: .825rem;
  font-weight: 600;
  color: var(--color-accent);
}
.post-card .read-more:hover { text-decoration: underline; }

/* Tags */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag {
  display: inline-block;
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
  font-size: .75rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  text-decoration: none;
}
.tag:hover { background: var(--color-accent); color: #fff; text-decoration: none; }

/* ── Sidebar ─────────────────────────────────────────────────────────── */

.sidebar { display: flex; flex-direction: column; gap: 24px; }

.widget {
  background: var(--color-sidebar-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
}

.widget-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--color-text-muted);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.widget ul { list-style: none; }
.widget ul li { padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: .875rem; }
.widget ul li:last-child { border-bottom: none; padding-bottom: 0; }
.widget ul li a { color: var(--color-text); }
.widget ul li a:hover { color: var(--color-accent); text-decoration: none; }

.widget-search .search-form {
  display: flex;
  gap: 8px;
}
.widget-search input[type="search"] {
  flex: 1;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: .875rem;
  padding: 8px 12px;
  outline: none;
  transition: border-color .15s;
}
.widget-search input[type="search"]:focus { border-color: var(--color-accent); }
.widget-search button {
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  padding: 8px 14px;
  transition: background .15s;
}
.widget-search button:hover { background: var(--color-accent-dark); }

/* Category list with counts */
.cat-item { display: flex; justify-content: space-between; align-items: center; }
.cat-count {
  background: var(--color-bg-alt);
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 600;
  padding: 1px 8px;
  color: var(--color-text-muted);
}

/* ── Pagination ──────────────────────────────────────────────────────── */

.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 48px;
  flex-wrap: wrap;
}
.pagination a,
.pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  padding: 0 12px;
  transition: all .15s;
}
.pagination a { color: var(--color-text); }
.pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.pagination .current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ── Post Navigation ─────────────────────────────────────────────────── */

.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}

.nav-previous, .nav-next {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color .15s;
}
.nav-previous:hover, .nav-next:hover { border-color: var(--color-accent); }
.nav-next { text-align: right; }

.nav-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.nav-title a {
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.4;
}
.nav-title a:hover { color: var(--color-accent); text-decoration: none; }

/* ── Comments ────────────────────────────────────────────────────────── */

.comments-area { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--color-border); }
.comments-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 24px; color: var(--color-heading); }

.comment-list { list-style: none; }
.comment { padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.comment-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .85rem; }
.comment-author .fn { font-weight: 600; color: var(--color-heading); }
.comment-date { color: var(--color-text-muted); }
.comment-content { font-size: .95rem; }

/* Comment form */
.comment-form { margin-top: 32px; }
.comment-form input,
.comment-form textarea {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .9rem;
  padding: 10px 14px;
  margin-bottom: 12px;
  transition: border-color .15s;
  outline: none;
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--color-accent); }
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form .submit {
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  padding: 10px 24px;
  transition: background .15s;
}
.comment-form .submit:hover { background: var(--color-accent-dark); }

/* ── Footer ──────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 48px 0 24px;
  margin-top: 64px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 499px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-about .site-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f0f3f8;
  display: inline-block;
  margin-bottom: 10px;
}

.footer-about p { font-size: .875rem; line-height: 1.7; max-width: 320px; }

.footer-col h4 {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #d6dae3;
  margin-bottom: 12px;
}

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: var(--color-footer-text); font-size: .875rem; }
.footer-col a:hover { color: #fff; text-decoration: none; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── Archive / Hero Strip ────────────────────────────────────────────── */

.archive-header {
  padding: 32px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 32px;
}

.archive-header h1 { font-size: 1.6rem; color: var(--color-heading); font-weight: 700; }
.archive-header p { color: var(--color-text-muted); margin-top: 6px; }

/* ── Difficulty Badge ────────────────────────────────────────────────── */

.difficulty {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.difficulty-beginner     { background: #d1fae5; color: #065f46; }
.difficulty-intermediate { background: #fef3c7; color: #92400e; }
.difficulty-advanced     { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] .difficulty-beginner     { background: #162d22; color: #34d399; }
[data-theme="dark"] .difficulty-intermediate { background: #2d2416; color: #fcd34d; }
[data-theme="dark"] .difficulty-advanced     { background: #2d1616; color: #f87171; }

/* ── Responsive ──────────────────────────────────────────────────────── */

/* Prev/Next stack earlier than the rest: two titles side by side inside the
   --measure-capped column are down to ~330px each by 700px. */
@media (max-width: 700px) {
  .post-navigation { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .page-hero { padding: 28px 0 24px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ── Utility ─────────────────────────────────────────────────────────── */

.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;
}

.text-muted { color: var(--color-text-muted); }
.mt-0 { margin-top: 0; }

/* ── Article body link underlines ────────────────────────────────────── */

.entry-content p a,
.entry-content li a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* ── Post card featured image ─────────────────────────────────────────── */

.post-card-image {
  border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
  overflow: hidden;
  aspect-ratio: 16/9;
  margin: -24px -24px 16px;
}
.post-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s ease;
  display: block;
}
.post-card:hover .post-card-image img { transform: scale(1.03); }

/* ── Featured post hero (homepage) ───────────────────────────────────── */

.featured-post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 32px;
  transition: box-shadow .2s, border-color .2s;
  min-height: 280px;
}
.featured-post:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}
.featured-post.no-thumbnail { grid-template-columns: 1fr; }

.featured-image { overflow: hidden; }
.featured-image img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.featured-post:hover .featured-image img { transform: scale(1.03); }

.featured-body {
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.featured-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-accent);
}
.featured-post .featured-title {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0;
}
.featured-post .featured-title a { color: inherit; text-decoration: none; }
.featured-post .featured-title a:hover { color: var(--color-accent); }
.featured-post .post-excerpt {
  color: var(--color-text-muted);
  font-size: .925rem;
  line-height: 1.6;
  margin: 0;
}
/* Raised from 768px: once the sidebar is gone the content column is full-width,
   but the two halves of the featured card are still only ~430px each at 900px —
   too narrow for a 1.5rem title next to a cropped image. */
@media (max-width: 900px) {
  .featured-post { grid-template-columns: 1fr; }
  .featured-image { aspect-ratio: 16/9; }
  .featured-body { padding: 24px; gap: 10px; }
  .featured-post .featured-title { font-size: 1.25rem; }
}

/* ── Author bio ───────────────────────────────────────────────────────── */

.author-bio {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px;
  margin-top: 48px;
  background: var(--color-bg-alt);
  border-radius: 10px;
  border: 1px solid var(--color-border);
}
.author-bio img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
  object-fit: cover;
}
.author-bio-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-heading);
  display: block;
  margin-bottom: 6px;
}
.author-bio-name a { color: inherit; text-decoration: none; }
.author-bio-name a:hover { color: var(--color-accent); }
.author-bio p {
  font-size: .9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── Related articles ─────────────────────────────────────────────────── */

.related-posts {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
}
.related-posts-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
/* Same auto-fill treatment as .posts-grid, with a lower floor — these cards carry
   only a category, a title and a date line, so they stay readable narrower. */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.related-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color .15s, box-shadow .15s;
  text-decoration: none;
}
.related-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.related-cat {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--color-accent);
  margin-bottom: 6px;
  display: block;
}
.related-card h4 {
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.4;
  margin: 0 0 8px;
}
.related-meta {
  font-size: .75rem;
  color: var(--color-text-muted);
}

/* ── Newsletter CTA ───────────────────────────────────────────────────── */

.newsletter-cta {
  background: linear-gradient(135deg, #10131a 0%, #1e2440 100%);
  border-radius: 10px;
  padding: 36px 40px;
  margin-top: 48px;
  text-align: center;
  border: 1px solid rgba(99,102,241,.25);
}
.newsletter-cta h3 {
  color: #f0f3f8;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.newsletter-cta > p {
  color: #8b91a0;
  font-size: .9rem;
  margin: 0 0 20px;
}
.newsletter-form {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
}
.newsletter-form input[type="email"] {
  flex: 1;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius);
  color: #fff;
  font-size: .9rem;
  padding: 10px 14px;
  outline: none;
  transition: border-color .15s;
  font-family: var(--font-body);
}
.newsletter-form input[type="email"]::placeholder { color: #6b7897; }
.newsletter-form input[type="email"]:focus { border-color: var(--color-accent); }
.newsletter-form button {
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  font-size: .875rem;
  font-weight: 600;
  padding: 10px 20px;
  white-space: nowrap;
  transition: background .15s;
  font-family: var(--font-body);
}
.newsletter-form button:hover { background: var(--color-accent-dark); }

.newsletter-sidebar .newsletter-form { flex-direction: column; max-width: 100%; }
.newsletter-sidebar p { font-size: .85rem; color: var(--color-text-muted); margin-bottom: 12px; }

@media (max-width: 500px) {
  .newsletter-form { flex-direction: column; }
  .newsletter-cta { padding: 24px 20px; }
}

/* ── Skip navigation link ─────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--color-accent);
  color: #fff;
  padding: 8px 16px;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: .875rem;
  font-weight: 600;
  z-index: 9999;
  transition: top .1s;
  text-decoration: none;
}
.skip-link:focus { top: 0; outline: none; }

/* ── Reading progress bar ─────────────────────────────────────────────── */

#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--color-accent);
  z-index: 200;
  transition: width .1s linear;
  pointer-events: none;
}

/* ── Series navigation ────────────────────────────────────────────────── */

.series-nav {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 2rem;
  /* Measure now comes from the shared --measure rule on .site-main > article > *
     so the series box lines up with the prose below it instead of running to its
     own 68ch edge. */
}
.series-nav-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.series-nav-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--color-accent);
}
.series-nav-title {
  font-size: .9rem;
  color: var(--color-heading);
}
.series-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.series-nav-item a,
.series-nav-item span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .875rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background .15s, color .15s;
}
.series-nav-item a:hover { background: var(--color-border); color: var(--color-accent); text-decoration: none; }
.series-nav-item.current span {
  color: var(--color-text);
  font-weight: 600;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.series-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  font-size: .7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.series-nav-item.current .series-num { background: var(--color-accent); }

/* ── Author bio (enhanced with credentials) ───────────────────────────── */

.author-bio-full {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px;
  margin-top: 48px;
  background: var(--color-bg-alt);
  border-radius: 10px;
  border: 1px solid var(--color-border);
}
@media (max-width: 600px) {
  .author-bio-full { grid-template-columns: 1fr; }
}
.author-bio-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  object-fit: cover;
}
.author-bio-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.author-bio-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
}
.author-bio-name a { color: inherit; text-decoration: none; }
.author-bio-name a:hover { color: var(--color-accent); }
.author-bio-role {
  font-size: .8rem;
  color: var(--color-text-muted);
}
.author-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.credential-badge {
  display: inline-block;
  background: rgba(99,102,241,.12);
  color: var(--color-accent);
  border: 1px solid rgba(99,102,241,.3);
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  letter-spacing: .2px;
}
[data-theme="dark"] .credential-badge { background: rgba(129,140,248,.12); color: #818cf8; border-color: rgba(129,140,248,.3); }
.author-bio-body > p {
  font-size: .9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}
.author-social {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}
.author-social-link {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  padding: 3px 10px;
  border: 1px solid var(--color-accent);
  border-radius: 20px;
  transition: background .15s, color .15s;
}
.author-social-link:hover { background: var(--color-accent); color: #fff; text-decoration: none; }

/* ── Sticky sidebar (article pages) ───────────────────────────────────── */

/* The whole sidebar pins as one unit on the two-column layout and scrolls
   internally when it's taller than the viewport, so the sticky TOC can never
   paint over the widgets below it. At or under 1080px the sidebar stacks beneath
   the article (.sidebar { order: 2 }), so it stays in normal flow — this query is
   the exact complement of that collapse. Offsets are driven by --header-h, which
   theme.js keeps in sync with the real header height. */
@media (min-width: 1081px) {
  .single .sidebar {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 36px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }
}
#toc-nav ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
#toc-nav li { margin: 3px 0; }
#toc-nav a {
  display: block;
  font-size: .825rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 3px 6px;
  border-radius: 4px;
  border-left: 2px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
  line-height: 1.4;
}
#toc-nav a:hover { color: var(--color-accent); background: var(--color-bg-alt); text-decoration: none; }
#toc-nav a.toc-active {
  color: var(--color-accent);
  font-weight: 600;
  border-left-color: var(--color-accent);
  background: var(--color-bg-alt);
}
#toc-nav .toc-h3 > a { padding-left: 18px; font-size: .8rem; }

/* ── Taxonomy / archive hero ──────────────────────────────────────────── */

.taxonomy-hero {
  background: linear-gradient(135deg, #10131a 0%, #1e2440 100%);
  color: #fff;
  padding: 40px 0 32px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.taxonomy-hero-type {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.taxonomy-hero-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 0 0 10px;
}
.taxonomy-hero-desc {
  font-size: .95rem;
  color: #9ca3b0;
  max-width: 600px;
  line-height: 1.6;
  margin: 0 0 12px;
}
.taxonomy-hero-count {
  font-size: .8rem;
  color: #6b7897;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 3px 12px;
  display: inline-block;
}

/* ── Prefers-reduced-motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  #reading-progress { transition: none !important; }
}


/* =============================================================================
   Featured Image Placeholder
   Cards without a featured image get a category-tinted gradient instead of
   a blank space. Colour is driven by the .category-{slug} class on <article>.
   ============================================================================= */

.post-card-image--placeholder {
  display: block;
  min-height: 200px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1f2e 0%, #0f4c75 100%);
}

/* Decorative grid overlay */
.post-card-image--placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* Decorative letter badge */
.post-card-image--placeholder::after {
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-weight: 700;
  color: rgba(255,255,255,.07);
  font-family: var(--font-mono, 'Courier New', monospace);
  pointer-events: none;
}

/* Category-tinted variants */
.category-azure          .post-card-image--placeholder { background: linear-gradient(135deg, #0a1628 0%, #6366f1 100%); }
.category-cloud          .post-card-image--placeholder { background: linear-gradient(135deg, #0a1628 0%, #6366f1 100%); }
.category-devops         .post-card-image--placeholder { background: linear-gradient(135deg, #0d1a0d 0%, #107c10 100%); }
.category-automation     .post-card-image--placeholder { background: linear-gradient(135deg, #0d1a0d 0%, #107c10 100%); }
.category-security       .post-card-image--placeholder { background: linear-gradient(135deg, #1a0a0a 0%, #c50f1f 100%); }
.category-powershell     .post-card-image--placeholder { background: linear-gradient(135deg, #0d0d1a 0%, #5c2d91 100%); }
.category-scripting      .post-card-image--placeholder { background: linear-gradient(135deg, #0d0d1a 0%, #5c2d91 100%); }
.category-kubernetes     .post-card-image--placeholder { background: linear-gradient(135deg, #001b2e 0%, #326ce5 100%); }
.category-containers     .post-card-image--placeholder { background: linear-gradient(135deg, #001b2e 0%, #326ce5 100%); }
.category-terraform      .post-card-image--placeholder { background: linear-gradient(135deg, #1a0e00 0%, #7b42bc 100%); }

@media (max-width: 768px) {
  .post-card-image--placeholder { min-height: 160px; }
}

/* =============================================================================
   Newsletter Form & Success State
   ============================================================================= */

.newsletter-cta {
  background: linear-gradient(135deg, #10131a 0%, #1a1f2e 100%);
  border: 1px solid var(--color-border, rgba(255,255,255,.1));
  border-radius: 12px;
  padding: 2rem 2.5rem;
  margin: 3rem 0;
}

.newsletter-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.newsletter-cta__title {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
}

.newsletter-cta__desc {
  margin: 0;
  opacity: .8;
  font-size: .9375rem;
}

.newsletter-form__row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.newsletter-form__row .newsletter-form__input {
  flex: 1 1 200px;
  min-width: 0;
}

.newsletter-form__input {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  color: inherit;
  font-size: .9375rem;
  padding: .625rem .875rem;
  width: 100%;
}

.newsletter-form__input:focus {
  outline: none;
  border-color: var(--color-accent, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}

.newsletter-form__input[aria-invalid="true"] {
  border-color: #c50f1f;
  box-shadow: 0 0 0 3px rgba(197,15,31,.2);
}

.newsletter-form__privacy {
  font-size: .75rem;
  opacity: .5;
  margin: .5rem 0 0;
}

/* Success state */
.newsletter-success {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1.25rem 1.5rem;
  background: rgba(16,124,16,.12);
  border: 1px solid rgba(16,124,16,.4);
  border-radius: 8px;
  color: #5dc45d;
}

.newsletter-success[hidden] { display: none !important; }

.newsletter-success svg { flex-shrink: 0; margin-top: .15rem; stroke: #5dc45d; }

.newsletter-success strong {
  display: block;
  margin-bottom: .2rem;
  color: #72d872;
}

.newsletter-success p { margin: 0; font-size: .875rem; opacity: .85; }

/* Compact sidebar variant */
.newsletter-success--compact {
  padding: .75rem 1rem;
  font-size: .875rem;
  align-items: center;
  gap: .5rem;
}

.newsletter-success--compact p { margin: 0; }

/* Full-width button helper */
.btn--full { width: 100%; justify-content: center; }

/* Compact form (sidebar) */
.newsletter-form--compact .newsletter-form__input { margin-bottom: .5rem; }

/* ── Hero image + attribution credit ──────────────────────────────────── */

.hero-figure {
  margin: 0 0 32px;
}

.hero-figure__frame {
  border-radius: 8px;
  overflow: hidden;
}

/* Visible attribution for CC-BY / CC-BY-SA licensed photos. */
.hero-credit {
  margin-top: 8px;
  font-size: .8rem;
  color: var(--color-text-muted);
  text-align: right;
  line-height: 1.4;
}

.hero-credit a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hero-credit a:hover {
  color: var(--color-accent);
}

/* ── In-body Mermaid diagrams ─────────────────────────────────────────── */

.entry-content figure.diagram {
  margin: 2rem 0;
  padding: 0;
}

/* The dark surface matches the locked code-block background so diagrams read
   consistently in both light and dark theme modes. */
.entry-content figure.diagram .mermaid,
.entry-content pre.mermaid {
  background: var(--color-bg-code);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  margin: 0;
  text-align: center;
  overflow-x: auto;
  /* Hide the raw diagram source until Mermaid swaps in the SVG */
  color: transparent;
  line-height: 1.4;
}

.entry-content pre.mermaid[data-processed="true"] {
  color: inherit;
}

/* Render fallback. The source is hidden (color: transparent) purely to avoid a
   flash of raw diagram code before Mermaid swaps in the SVG — but if the CDN
   never answers, that leaves a silent empty box. theme.js sets this attribute
   after a grace period on any diagram that never rendered, so the reader at
   least gets the source instead of nothing. */
.entry-content pre.mermaid[data-mermaid-failed] {
  color: var(--color-text);
  text-align: left;
}

.entry-content figure.diagram svg,
.entry-content pre.mermaid svg {
  max-width: 100%;
  height: auto;
}

/* On a phone, fitting a whole flowchart into ~340px shrinks the node labels to
   an unreadable size. Let the SVG keep a legible minimum and scroll horizontally
   inside its container instead — both .mermaid surfaces are already
   overflow-x: auto. Desktop keeps fit-to-width. Scoped to Mermaid only: the
   PlantUML/Azure-icon cards are authored to fit and read fine scaled down. */
@media (max-width: 600px) {
  .entry-content figure.diagram .mermaid svg,
  .entry-content pre.mermaid svg {
    max-width: none !important;
    min-width: 480px;
  }
}

.entry-content figure.diagram figcaption {
  margin-top: 10px;
  font-size: .85rem;
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
}

/* ── Slate Pro polish ──────────────────────────────────────────────────────
   Signature indigo→cyan gradient + soft glow, layered over the tokenised base. */

/* Display headings get a touch more presence with Space Grotesk */
.page-hero h1,
.featured-post .featured-title,
.entry-content h2 { letter-spacing: -.02em; }

/* Brand mark: gradient fill instead of flat accent */
.header-logo { background: var(--gradient-accent); }

/* Reading-progress + "Latest" label: gradient signature */
#reading-progress { background: var(--gradient-accent); }
.featured-label {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Primary CTA button: gradient fill */
.newsletter-form button {
  background: var(--gradient-accent);
  border: none;
}
.newsletter-form button:hover { filter: brightness(1.08); background: var(--gradient-accent); }

/* Card hovers: soft indigo glow (replaces the flat md shadow) */
.post-card:hover,
.featured-post:hover,
.related-card:hover { box-shadow: var(--shadow-glow); }

/* TOC active item: cyan highlight */
.toc-active { color: var(--color-accent-2) !important; }
#toc-nav a.toc-active { color: var(--color-accent-2) !important; font-weight: 600; }

/* Category badge: cyan ring on hover for a subtle interactive lift */
.category-badge:hover { box-shadow: 0 0 0 1px var(--color-accent-2); }

/* ══════════════════════════════════════════════════════════════════════════
   v1.1.0 — newsletter wiring, consent banner, affiliates, series index,
   difficulty filter, last-reviewed
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Newsletter: honeypot + inline error ─────────────────────────────────── */
.newsletter-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.newsletter-form__error {
  margin-top: 8px;
  font-size: .82rem;
  color: #b91c1c;
}
[data-theme="dark"] .newsletter-form__error { color: #f87171; }
.newsletter-form__input[aria-invalid="true"] { border-color: #b91c1c; }
.newsletter-form button[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ── Ghost button (used by the consent banner "Decline") ─────────────────── */
.btn--ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.btn--ghost:hover { background: var(--color-bg-alt); }

/* ── Consent banner ──────────────────────────────────────────────────────── */
.consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-width: 720px;
  margin: 0 auto;
}
.consent-banner__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  flex-wrap: wrap;
}
.consent-banner__text {
  flex: 1 1 320px;
  margin: 0;
  font-size: .88rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.consent-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
@media (max-width: 520px) {
  .consent-banner__actions { width: 100%; }
  .consent-banner__actions .btn { flex: 1; }
}

/* ── Affiliate links + "tools we use" box ────────────────────────────────── */
.aff-link {
  font-weight: 600;
  border-bottom: 1px solid transparent;
}
.aff-link:hover { border-bottom-color: currentColor; text-decoration: none; }
.aff-link--cta {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius);
  background: var(--gradient-accent);
  color: #fff;
  border: none;
}
.aff-link--cta:hover { filter: brightness(1.08); color: #fff; }
.aff-tag {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  vertical-align: super;
  margin-left: 3px;
  color: var(--color-text-muted);
}
.aff-desc { color: var(--color-text-muted); font-size: .92em; }

.aff-box {
  margin: 32px 0;
  padding: 20px 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}
.aff-box__title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-heading);
}
.aff-box__body { display: grid; gap: 8px; }
.aff-box__note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
  font-size: .78rem;
  color: var(--color-text-muted);
}
.aff-disclosure {
  margin: 0 0 24px;
  padding: 10px 14px;
  border-left: 3px solid var(--color-accent-2);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .82rem;
  color: var(--color-text-muted);
}

/* ── Difficulty filter (archives) ────────────────────────────────────────── */
.difficulty-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.difficulty-filter__label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.difficulty-pill {
  font-size: .78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-surface);
}
.difficulty-pill:hover { text-decoration: none; border-color: var(--color-accent); color: var(--color-accent); }
.difficulty-pill.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* ── Last reviewed (single meta) ─────────────────────────────────────────── */
.last-reviewed {
  color: var(--color-accent-2);
  font-weight: 600;
}

/* ── Series index page ───────────────────────────────────────────────────── */
.series-index { display: grid; gap: 20px; }
.series-index__item {
  padding: 22px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}
.series-index__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.series-index__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-heading);
}
.series-index__count {
  flex-shrink: 0;
  font-size: .76rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.series-index__parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.series-index__parts li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--color-border);
}
.series-index__parts a {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  color: var(--color-text);
}
.series-index__parts a:hover { text-decoration: none; color: var(--color-accent); }
.series-index__parts .series-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
  font-size: .78rem;
  font-weight: 700;
}
.series-index__part-meta {
  flex-shrink: 0;
  font-size: .74rem;
  color: var(--color-text-muted);
}

/* ── Ad slots ─────────────────────────────────────────────────────────────────
   inc/ads.php renders .ad-slot > .ad-slot__creative (house / sponsored /
   affiliate / adsense), and had no styling at all — a wide house creative or an
   AdSense responsive unit could therefore blow out the article column. Everything
   here is containment, so it stays neutral for whatever creative is served. */

.ad-slot {
  max-width: 100%;
  overflow: hidden;
  margin: 2rem 0;
}

.ad-slot__creative { max-width: 100%; }
.ad-slot__creative img { max-width: 100%; height: auto; }

/* AdSense injects an iframe sized from the <ins>; display:block + the cap keep it
   inside the column when the unit renders wider than the slot. */
.ad-slot ins.adsbygoogle {
  display: block;
  max-width: 100%;
}

/* The mandatory "Ad" / "Sponsored" disclosure label. */
.ad-slot__label {
  display: block;
  margin-bottom: 6px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}