:root {
  --brand-blue: #3b71ca;
}

/* Roboto — self-hosted (Apache 2.0) */
@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url('/fonts/roboto-latin-300-normal.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('/fonts/roboto-latin-400-normal.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url('/fonts/roboto-latin-500-normal.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('/fonts/roboto-latin-700-normal.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 900; src: url('/fonts/roboto-latin-900-normal.woff2') format('woff2'); }

/* === Global chrome === */

/* Navbar */
.navbar .nav-link { padding-bottom: 0.3125rem; padding-top: 0.3125rem; }
/* Search button uses .btn-link, which adds a grey hover background and
   uppercases its text — strip both so the button matches the rest of the
   .nav-link items (color-shift only on hover, normal-case label). */
#navbar-search-btn { text-transform: none; }
#navbar-search-btn:hover,
#navbar-search-btn:focus,
#navbar-search-btn:active { background-color: transparent; box-shadow: none; }
.navbar-brand h1,
.navbar-brand span { font-size: 1.5rem; font-weight: inherit; line-height: 1.25; }

/* Page transitions via View Transitions API */
@keyframes vt-fade-in  { from { opacity: 0; } }
@keyframes vt-fade-out { to   { opacity: 0; } }
::view-transition-new(root) { animation: 150ms ease-in  vt-fade-in; }
::view-transition-old(root) { animation: 150ms ease-out vt-fade-out; }

/* Reading progress bar */
#progress-bar { background-color: var(--brand-blue); height: 3px; left: 0; pointer-events: none; position: fixed; top: 0; transform: scaleX(0); transform-origin: center center; transition: transform 0.1s linear; width: 0; z-index: 9999; }


/* === Cards === */

/* Featured image container — aspect-ratio on the wrapper avoids a flex-context
   conflict between img-fluid's height:auto and aspect-ratio on the <img> itself. */
.card-featured-img { aspect-ratio: 500 / 372; }
.card-featured-img img { display: block; height: 100%; object-fit: cover; width: 100%; }
.card-featured-img--video { aspect-ratio: 16 / 9; }

/* Hero YouTube thumbnails (index.html) — aspect ratio on the image element (no wrapper class) */
.hero-img.yt-thumb { aspect-ratio: 700 / 400; object-fit: cover; }

/* Image overlay mask */
.mask-light { background-color: rgba(0, 0, 0, 0.15); }

/* Image zoom on hover */
.bg-image img { transition: transform 0.3s ease; }
.bg-image:hover img { transform: scale(1.05); }


/* === Post content === */

/* Gallery grid — triggered by ul containing linked images ([![alt](url)](url) list format) */
.post-content a.glightbox { cursor: zoom-in; }
.post-content ul:has(> li > a > img) {
  display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; margin: 1rem 0; padding: 0;
  & a { border-radius: 0.375rem; display: block; overflow: hidden; }
  & img { border-radius: 0; display: block; height: 200px; margin: 0; object-fit: cover; transition: transform 0.3s ease; width: 100%; }
  & li { border-radius: 0.375rem; margin: 0; overflow: hidden; position: relative; }
  & li[data-caption]::after { background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7)); bottom: 0; color: #fff; content: attr(data-caption); font-size: 0.8rem; left: 0; line-height: 1.3; opacity: 0; padding: 0.4rem 0.6rem; pointer-events: none; position: absolute; right: 0; transform: translateY(100%); transition: transform 0.3s ease, opacity 0.3s ease; }
  & li:hover::after { opacity: 1; transform: translateY(0); }
  & li:hover img { transform: scale(1.05); }
}

/* Embedded benchmark/document iframes */
.benchmark-iframe { border: 0; height: 800px; width: 100%; }

/* YouTube playlist iframes (in post content) */
.video-playlist-iframe { aspect-ratio: 16 / 9; border: none; border-radius: 0.375rem; width: 100%; }

/* Highlighted "creepy" callout (Claude shenanigans post) */
.mark-creepy { background-color: #fff200b0; }

/* Lite YouTube embed */
.youtube-player { aspect-ratio: 16/9; background: #000; border-radius: 0.375rem; cursor: pointer; margin: 1rem 0; overflow: hidden; position: relative; }
.youtube-player .youtube-play { background: none; border: none; cursor: pointer; left: 50%; opacity: 0.8; padding: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: opacity 0.2s; }
.youtube-player iframe { border: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.youtube-player img { height: 100%; object-fit: cover; width: 100%; }
.youtube-player:hover .youtube-play { opacity: 1; }

/* Tables — responsive + striped + hover */
.post-content table { border-collapse: collapse; margin-bottom: 0; width: 100%; }
.post-content table tbody tr:hover { background-color: rgba(0,0,0,0.07); }
.post-content table tbody tr:nth-child(odd) { background-color: rgba(0,0,0,0.04); }
.post-content table th,
.post-content table td { border-top: 1px solid rgba(0,0,0,0.1); padding: 0.5rem 0.75rem; vertical-align: top; }
.post-content table thead th { border-bottom: 2px solid rgba(0,0,0,0.2); font-weight: 600; vertical-align: bottom; }
[data-mdb-theme="dark"] .post-content table tbody tr:hover { background-color: rgba(255,255,255,0.07); }
[data-mdb-theme="dark"] .post-content table tbody tr:nth-child(odd) { background-color: rgba(255,255,255,0.04); }
[data-mdb-theme="dark"] .post-content table th,
[data-mdb-theme="dark"] .post-content table td { border-color: rgba(255,255,255,0.15); }
[data-mdb-theme="dark"] .post-content table thead th { border-bottom-color: rgba(255,255,255,0.25); }

/* Typography */
.post-content { font-size: 1.05rem; line-height: 1.8; }
.post-content :not(pre) > code { background: rgba(0, 0, 0, 0.08); border-radius: 0.25rem; padding: 0.15em 0.35em; }
.post-content > :first-child { border-top: none; margin-top: 0; padding-top: 0; }
.post-content blockquote { border-left: 4px solid var(--brand-blue); font-style: italic; padding-left: 1rem; }
.post-content code { font-size: 0.9em; }
.post-content details { margin: 1.5rem 0; }
.post-content details .details-hint { font-size: 0.85em; font-style: italic; opacity: 0.6; }
.post-content h2,
.post-content h3,
.post-content h4 { border-top: 1px solid rgba(0,0,0,0.1); margin-top: 2rem; padding-top: 1.5rem; }
.post-content img { border-radius: 0.375rem; height: auto; margin: 1rem 0; max-width: 100%; }
.post-content pre { border-radius: 0.375rem; overflow-x: auto; padding: 1rem; }
.post-content .highlight { border-radius: 0.375rem; margin: 1rem 0; overflow: hidden; }
.post-content .highlight pre { border-radius: 0; margin-bottom: 0; }
[data-mdb-theme="dark"] .post-content :not(pre) > code { background: rgba(255, 255, 255, 0.1); }
[data-mdb-theme="dark"] .post-content h2,
[data-mdb-theme="dark"] .post-content h3,
[data-mdb-theme="dark"] .post-content h4 { border-top-color: rgba(255,255,255,0.15); }


/* === Footer === */

/* Back link */
#blog-back-link { align-items: center; display: inline-flex; }
#blog-back-link i { font-size: 1.25rem; }

/* Social icons */
.social-icon { color: #fff; font-size: 1.5rem; margin: 0 10px; text-decoration: none; }
.social-icon:hover { color: rgba(255, 255, 255, 0.8); }

/* Tag cloud */
.tag-cloud a { color: rgba(255, 255, 255, 0.8); line-height: 1.4; margin-right: 0.25rem; text-decoration: none; }
.tag-cloud a:hover { color: #fff; }
.tag-size-1 { font-size: 0.75rem; }
.tag-size-2 { font-size: 0.91rem; }
.tag-size-3 { font-size: 1.07rem; }
.tag-size-4 { font-size: 1.24rem; }
.tag-size-5 { font-size: 1.40rem; }


/* === Taxonomy === */

/* Tag badge colors */
.badge-tag-0 { background-color: var(--brand-blue); color: #fff; }
.badge-tag-1 { background-color: #14a44d; color: #fff; }
.badge-tag-2 { background-color: #dc4c64; color: #fff; }
.badge-tag-3 { background-color: #9c27b0; color: #fff; }
.badge-tag-4 { background-color: #e65100; color: #fff; }
.badge-tag-5 { background-color: #00897b; color: #fff; }
.badge-tag-6 { background-color: #0277bd; color: #fff; }
.badge-tag-7 { background-color: #6a1b9a; color: #fff; }

/* Taxonomy page title — oversized badge matching card chips */
.taxonomy-title { font-size: 1.25rem; font-weight: 600; padding: 0.4em 0.75em; }


/* === Code blocks === */

/* Chroma — light theme (github) */
.chroma { background-color:#f7f7f7;-webkit-text-size-adjust:none; }
.chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
.chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
.chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
.chroma .hl { background-color:#dedede }
.chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
.chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
.chroma .line { display:flex; }
.chroma .err { color:#f6f8fa;background-color:#82071e }
.chroma .k { color:#cf222e }
.chroma .kc { color:#cf222e }
.chroma .kd { color:#cf222e }
.chroma .kn { color:#cf222e }
.chroma .kp { color:#cf222e }
.chroma .kr { color:#cf222e }
.chroma .kt { color:#cf222e }
.chroma .na { color:#1f2328 }
.chroma .nc { color:#1f2328 }
.chroma .no { color:#0550ae }
.chroma .nd { color:#0550ae }
.chroma .ni { color:#6639ba }
.chroma .nl { color:#900;font-weight:bold }
.chroma .nn { color:#24292e }
.chroma .nx { color:#1f2328 }
.chroma .nt { color:#0550ae }
.chroma .nb { color:#6639ba }
.chroma .bp { color:#6a737d }
.chroma .nv { color:#953800 }
.chroma .vc { color:#953800 }
.chroma .vg { color:#953800 }
.chroma .vi { color:#953800 }
.chroma .vm { color:#953800 }
.chroma .nf { color:#6639ba }
.chroma .fm { color:#6639ba }
.chroma .s { color:#0a3069 }
.chroma .sa { color:#0a3069 }
.chroma .sb { color:#0a3069 }
.chroma .sc { color:#0a3069 }
.chroma .dl { color:#0a3069 }
.chroma .sd { color:#0a3069 }
.chroma .s2 { color:#0a3069 }
.chroma .se { color:#0a3069 }
.chroma .sh { color:#0a3069 }
.chroma .si { color:#0a3069 }
.chroma .sx { color:#0a3069 }
.chroma .sr { color:#0a3069 }
.chroma .s1 { color:#0a3069 }
.chroma .ss { color:#032f62 }
.chroma .m { color:#0550ae }
.chroma .mb { color:#0550ae }
.chroma .mf { color:#0550ae }
.chroma .mh { color:#0550ae }
.chroma .mi { color:#0550ae }
.chroma .il { color:#0550ae }
.chroma .mo { color:#0550ae }
.chroma .o { color:#0550ae }
.chroma .ow { color:#0550ae }
.chroma .p { color:#1f2328 }
.chroma .c { color:#57606a }
.chroma .ch { color:#57606a }
.chroma .cm { color:#57606a }
.chroma .c1 { color:#57606a }
.chroma .cs { color:#57606a }
.chroma .cp { color:#57606a }
.chroma .cpf { color:#57606a }
.chroma .gd { color:#82071e;background-color:#ffebe9 }
.chroma .ge { color:#1f2328 }
.chroma .gi { color:#116329;background-color:#dafbe1 }
.chroma .go { color:#1f2328 }
.chroma .gl { text-decoration:underline }
.chroma .w { color:#fff }

/* Chroma — dark theme (dracula) */
[data-mdb-theme="dark"] .chroma { color:#f8f8f2;background-color:#282a36; }
[data-mdb-theme="dark"] .chroma .hl { background-color:#3d3f4a }
[data-mdb-theme="dark"] .chroma .k { color:#ff79c6 }
[data-mdb-theme="dark"] .chroma .kc { color:#ff79c6 }
[data-mdb-theme="dark"] .chroma .kd { color:#8be9fd;font-style:italic }
[data-mdb-theme="dark"] .chroma .kn { color:#ff79c6 }
[data-mdb-theme="dark"] .chroma .kp { color:#ff79c6 }
[data-mdb-theme="dark"] .chroma .kr { color:#ff79c6 }
[data-mdb-theme="dark"] .chroma .kt { color:#8be9fd }
[data-mdb-theme="dark"] .chroma .na { color:#50fa7b }
[data-mdb-theme="dark"] .chroma .nc { color:#50fa7b }
[data-mdb-theme="dark"] .chroma .nl { color:#8be9fd;font-style:italic }
[data-mdb-theme="dark"] .chroma .nt { color:#ff79c6 }
[data-mdb-theme="dark"] .chroma .nb { color:#8be9fd;font-style:italic }
[data-mdb-theme="dark"] .chroma .bp { font-style:italic }
[data-mdb-theme="dark"] .chroma .nv { color:#8be9fd;font-style:italic }
[data-mdb-theme="dark"] .chroma .vc { color:#8be9fd;font-style:italic }
[data-mdb-theme="dark"] .chroma .vg { color:#8be9fd;font-style:italic }
[data-mdb-theme="dark"] .chroma .vi { color:#8be9fd;font-style:italic }
[data-mdb-theme="dark"] .chroma .vm { color:#8be9fd;font-style:italic }
[data-mdb-theme="dark"] .chroma .nf { color:#50fa7b }
[data-mdb-theme="dark"] .chroma .fm { color:#50fa7b }
[data-mdb-theme="dark"] .chroma .s { color:#f1fa8c }
[data-mdb-theme="dark"] .chroma .sa { color:#f1fa8c }
[data-mdb-theme="dark"] .chroma .sb { color:#f1fa8c }
[data-mdb-theme="dark"] .chroma .sc { color:#f1fa8c }
[data-mdb-theme="dark"] .chroma .dl { color:#f1fa8c }
[data-mdb-theme="dark"] .chroma .sd { color:#f1fa8c }
[data-mdb-theme="dark"] .chroma .s2 { color:#f1fa8c }
[data-mdb-theme="dark"] .chroma .se { color:#f1fa8c }
[data-mdb-theme="dark"] .chroma .sh { color:#f1fa8c }
[data-mdb-theme="dark"] .chroma .si { color:#f1fa8c }
[data-mdb-theme="dark"] .chroma .sx { color:#f1fa8c }
[data-mdb-theme="dark"] .chroma .sr { color:#f1fa8c }
[data-mdb-theme="dark"] .chroma .s1 { color:#f1fa8c }
[data-mdb-theme="dark"] .chroma .ss { color:#f1fa8c }
[data-mdb-theme="dark"] .chroma .m { color:#bd93f9 }
[data-mdb-theme="dark"] .chroma .mb { color:#bd93f9 }
[data-mdb-theme="dark"] .chroma .mf { color:#bd93f9 }
[data-mdb-theme="dark"] .chroma .mh { color:#bd93f9 }
[data-mdb-theme="dark"] .chroma .mi { color:#bd93f9 }
[data-mdb-theme="dark"] .chroma .il { color:#bd93f9 }
[data-mdb-theme="dark"] .chroma .mo { color:#bd93f9 }
[data-mdb-theme="dark"] .chroma .o { color:#ff79c6 }
[data-mdb-theme="dark"] .chroma .ow { color:#ff79c6 }
[data-mdb-theme="dark"] .chroma .c { color:#6272a4 }
[data-mdb-theme="dark"] .chroma .ch { color:#6272a4 }
[data-mdb-theme="dark"] .chroma .cm { color:#6272a4 }
[data-mdb-theme="dark"] .chroma .c1 { color:#6272a4 }
[data-mdb-theme="dark"] .chroma .cs { color:#6272a4 }
[data-mdb-theme="dark"] .chroma .cp { color:#ff79c6 }
[data-mdb-theme="dark"] .chroma .cpf { color:#ff79c6 }
[data-mdb-theme="dark"] .chroma .gd { color:#f55 }
[data-mdb-theme="dark"] .chroma .ge { text-decoration:underline }
[data-mdb-theme="dark"] .chroma .gh { font-weight:bold }
[data-mdb-theme="dark"] .chroma .gi { color:#50fa7b;font-weight:bold }
[data-mdb-theme="dark"] .chroma .go { color:#44475a }
[data-mdb-theme="dark"] .chroma .gu { font-weight:bold }
[data-mdb-theme="dark"] .chroma .gl { text-decoration:underline }
[data-mdb-theme="dark"] .chroma .nn { color:#f8f8f2 }
[data-mdb-theme="dark"] .chroma .nx { color:#f8f8f2 }
[data-mdb-theme="dark"] .chroma .p { color:#f8f8f2 }
[data-mdb-theme="dark"] .chroma .ge { color:#f8f8f2 }

/* Code header bar — language label + copy button */
.code-header { align-items: center; background: #e8e8e8; border-bottom: 1px solid #d0d0d0; display: flex; justify-content: space-between; padding: 0.35rem 0.75rem; }
[data-mdb-theme="dark"] .code-header { background: #21222c; border-bottom-color: #383a46; }
.code-lang { color: #666; font-family: monospace; font-size: 0.75rem; letter-spacing: 0.03em; }
[data-mdb-theme="dark"] .code-lang { color: #9ea0b0; }
.code-copy { background: none; border: none; color: #777; cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0.1rem 0.2rem; }
.code-copy:hover { color: #222; }
.code-copy.copied { color: #2d7a3a; }
[data-mdb-theme="dark"] .code-copy { color: #9ea0b0; }
[data-mdb-theme="dark"] .code-copy:hover { color: #f8f8f2; }
[data-mdb-theme="dark"] .code-copy.copied { color: #50fa7b; }


/* === Third-party integrations === */

/* Pagefind Component UI — match MDB color scheme.
   Use html:root (specificity 0,1,1) to beat the component's :root (0,1,0).
   pagefind-component-ui.css loads after style.css, so plain `html` (0,0,1) loses on tie. */
html:root {
  --pf-text: #212529;
  --pf-background: #fff;
  --pf-border: #dee2e6;
  --pf-border-radius: 0.375rem;
  --pf-modal-max-width: 720px;
  --pf-outline-focus: var(--brand-blue);
  --pf-outline-width: 0;
}
html[data-mdb-theme="dark"] {
  --pf-text: rgba(255, 255, 255, 0.87);
  --pf-text-secondary: rgba(255, 255, 255, 0.7);
  --pf-text-muted: rgba(255, 255, 255, 0.6);
  --pf-background: #2d2d2d;
  --pf-border: rgba(255, 255, 255, 0.2);
  --pf-hover: rgba(255, 255, 255, 0.08);
}
/* Custom result template: horizontal Bootstrap-style card with left thumbnail.
   Bg/border come from MDB's card vars; we override text color because the
   modal's --pf-text is dimmer than body text. MDB's `.card { border: 0 }`
   means border-color is a no-op — visual indicators use box-shadow rings. */
.search-card { color: var(--mdb-body-color); height: 10rem; overflow: hidden; transition: box-shadow 0.15s ease; }
.search-card:hover { box-shadow: 0 0 0 1px var(--brand-blue); }
.search-card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-blue); }
.search-card-thumb-wrap { aspect-ratio: 16 / 10; flex-shrink: 0; width: 16rem; }
.search-card-thumb { display: block; height: 100%; object-fit: cover; width: 100%; }
.search-card-chips { align-content: flex-start; display: flex; flex-wrap: wrap; gap: 0.25rem; height: 1.5rem; overflow: hidden; }
.search-card > .d-flex { flex: 1; }
.search-card .card-body { display: flex; flex-direction: column; }
.search-card .card-body > .text-muted { margin-top: auto; }
.search-card .card-title,
.search-card-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}


/* === Responsive overrides === */

@media (max-width: 767.98px) {
  .hero-img { max-height: 180px; object-fit: cover; width: 100%; }
  .related-posts .col-md-4:not(:first-child) { display: none; }
  .tag-cloud a { line-height: 1.2; }
  /* Search result cards stack vertically — thumb becomes a full-width banner. */
  .search-card { height: auto; }
  .search-card > .d-flex { flex-direction: column; }
  .search-card-thumb-wrap { max-height: 12rem; width: 100%; }
}