/*
 * devbundl design system: "Matriz de Decisão" (Stitch, 2026-09).
 * Tonal layering instead of borders, warm surfaces, navy for structure,
 * amber only on affiliate buttons, green only on "Our pick".
 * Light by default, dark follows the OS. See docs/design.md.
 */
:root {
	/* Surfaces, from page to raised card */
	--db-base: #fff8f5;
	--db-surface: #ffffff;
	--db-surface-low: #faf2ee;
	--db-surface-container: #f4ece8;
	--db-surface-high: #eee7e3;
	/* Text */
	--db-contrast: #1e1b19;
	--db-muted: #43474f;
	--db-outline: #737780;
	--db-border: #e9e1dd;
	/* Navy */
	--db-primary: #00254d;
	--db-primary-container: #0b3b6f;
	--db-primary-soft: #d5e3ff;
	--db-on-primary: #ffffff;
	--db-on-primary-muted: #a7c8ff;
	--db-link: #0b3b6f;
	/* Affiliate CTA, the only amber on the site */
	--db-cta: #f59e0b;
	--db-cta-hover: #d97706;
	--db-cta-text: #1e1b19;
	/* Our pick */
	--db-pick: #15803d;
	--db-pick-text: #00451c;
	--db-pick-soft: #dcf5e3;

	--db-radius-sm: 0.25rem;
	--db-radius: 0.5rem;
	--db-radius-lg: 0.75rem;
	--db-shadow-sm: 0 1px 2px rgb(30 27 25 / 0.05), 0 1px 8px rgb(30 27 25 / 0.04);
	--db-shadow: 0 2px 4px rgb(30 27 25 / 0.05), 0 8px 24px rgb(30 27 25 / 0.07);
	--db-gutter: 1rem;
	--db-wide: 1280px;
	--db-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	color-scheme: light dark;
}
@media (min-width: 768px) { :root { --db-gutter: 2rem; } }
@media (prefers-color-scheme: dark) {
	:root {
		--db-base: #141210;
		--db-surface: #1f1c1a;
		--db-surface-low: #1a1816;
		--db-surface-container: #26231f;
		--db-surface-high: #312d29;
		--db-contrast: #ede0db;
		--db-muted: #c3c6d1;
		--db-outline: #8d9199;
		--db-border: #3a3531;
		--db-primary: #a7c8ff;
		--db-primary-container: #1d477c;
		--db-primary-soft: #1a3050;
		--db-on-primary-muted: #d5e3ff;
		--db-link: #a7c8ff;
		--db-cta: #fbbf24;
		--db-cta-hover: #f59e0b;
		--db-pick: #15803d;
		--db-pick-text: #79db8d;
		--db-pick-soft: #10301b;
		--db-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
		--db-shadow: 0 2px 4px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.3);
	}
}

/* Base */
body { background: var(--db-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; }
:where(a, button, summary):focus-visible { outline: 2px solid var(--db-primary-container); outline-offset: 2px; border-radius: var(--db-radius-sm); }
@media (prefers-color-scheme: dark) { :where(a, button, summary):focus-visible { outline-color: var(--db-primary); } }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; background: var(--db-surface); padding: 8px 12px; }
img { max-width: 100%; height: auto; }
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1; }
.wp-site-blocks > * + * { margin-block-start: 0; }
/* Our bands and grids manage their own spacing: cancel the flow layout's block gap. */
.db-header__inner > *, .db-article > *, .db-hero > .db-container, main > .db-container, .db-header > *, .db-footer > *, .db-author-band > * { margin-block: 0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.db-icon { width: 1.1em; height: 1.1em; flex: none; }
.db-mono, code, kbd { font-family: var(--db-mono); }
:not(pre) > code { font-size: 0.85em; background: var(--db-surface-high); padding: 0.1em 0.35em; border-radius: var(--db-radius-sm); }

/* Container: 1280px, left edge shared by every band */
.db-container { box-sizing: border-box; width: 100%; max-width: var(--db-wide); margin-inline: auto; padding-inline: var(--db-gutter); }

/* Type roles */
.db-eyebrow, .db-eyebrow a { font-size: 0.6875rem; line-height: 1rem; letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase; color: var(--db-primary-container); text-decoration: none; }
@media (prefers-color-scheme: dark) { .db-eyebrow, .db-eyebrow a { color: var(--db-primary); } }
.db-lead { font-size: 1.0625rem; line-height: 1.706; color: var(--db-muted); max-width: 58ch; }
.db-label { font-size: 0.8125rem; line-height: 1.125rem; letter-spacing: 0.02em; font-weight: 600; }

/* Header: sticky, translucent, shadow instead of border */
.db-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--db-base) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 8px rgb(0 0 0 / 0.04); }
.admin-bar .db-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .db-header { top: 0; position: relative; } }
.db-header__inner { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; flex-wrap: wrap; }
/* Logo: compact badge + two-tone wordmark (navy in light; "dev" light + "bundl" sky in dark) */
.db-header .wp-block-site-title { margin: 0; font-size: 1.25rem; line-height: 1.75rem; }
.db-logo { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.db-logo__mark { width: 1.75rem; height: 1.75rem; flex: none; }
.db-logo__badge { fill: #0b3b6f; }
.db-logo__dot { fill: #f59e0b; }
.db-logo__word { font-weight: 700; letter-spacing: -0.035em; color: #0b3b6f; }
@media (prefers-color-scheme: dark) {
	.db-logo__badge { fill: #1d477c; }
	.db-logo__dot { fill: #fbbf24; }
	.db-logo__word { color: #f2f1ef; }
	.db-logo__word span { color: #8cb4e8; }
}

/* Navigation */
.db-nav { display: flex; align-items: center; gap: 1rem; flex: 1; justify-content: space-between; min-width: 0; }
.db-nav nav { min-width: 0; }
.db-nav__list { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.db-nav__list a { display: inline-block; padding-block: 0.5rem; text-decoration: none; color: var(--db-muted); font-size: 0.9375rem; line-height: 1.5rem; white-space: nowrap; transition: color 0.15s; }
.db-nav__list a:hover { color: var(--db-contrast); }
.db-nav__list a[aria-current] { color: var(--db-primary-container); font-weight: 500; }
@media (prefers-color-scheme: dark) { .db-nav__list a[aria-current] { color: var(--db-primary); } }
.db-lang-switch { display: flex; align-items: center; gap: 0.125rem; list-style: none; margin: 0 0 0 auto; padding: 0.1875rem; background: var(--db-surface-high); border-radius: var(--db-radius); font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.04em; }
.db-lang-switch li { display: flex; }
.db-lang-switch a { display: grid; place-items: center; min-width: 2.25rem; min-height: 2rem; box-sizing: border-box; padding-inline: 0.5rem; border-radius: calc(var(--db-radius) - 0.125rem); text-decoration: none; color: var(--db-muted); text-transform: uppercase; transition: color 0.15s, background-color 0.15s; }
.db-lang-switch a:hover { color: var(--db-contrast); }
.db-lang-switch a[aria-current] { background: var(--db-surface); color: var(--db-primary-container); font-weight: 700; box-shadow: var(--db-shadow-sm); }
@media (prefers-color-scheme: dark) { .db-lang-switch a[aria-current] { color: var(--db-primary); } }
@media (pointer: coarse) { .db-lang-switch a { min-width: 2.75rem; min-height: 2.75rem; } }
@media (max-width: 767px) {
	.db-header__inner { padding-block: 0.625rem 0; gap: 0.25rem 1rem; min-height: 0; }
	.db-nav { display: contents; }
	.db-lang-switch { order: 2; }
	.db-nav nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--db-gutter)); padding: 0 var(--db-gutter) 0.125rem; }
	.db-nav nav::-webkit-scrollbar { display: none; }
	.db-nav__list { gap: 1.25rem; }
}

/* Hero band at the top of articles, pages and archives */
.db-hero { background: var(--db-surface); box-shadow: var(--db-shadow-sm); padding-block: 1.5rem 2rem; position: relative; z-index: 1; }
.db-hero .wp-block-post-title, .db-hero .wp-block-query-title, .db-hero h1 { font-size: var(--wp--preset--font-size--huge); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; margin: 0.25rem 0 0; max-width: 900px; text-wrap: balance; }
.db-hero .wp-block-post-excerpt, .db-hero .wp-block-term-description { margin: 0.75rem 0 0; }
.db-hero .wp-block-post-excerpt__excerpt, .db-hero .wp-block-term-description p { margin: 0; font-size: 1.0625rem; line-height: 1.706; color: var(--db-muted); max-width: 58ch; }
.db-hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.db-crumbs { font-size: 0.6875rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.04em; color: var(--db-muted); }
.db-crumbs a { color: inherit; text-decoration: none; }
.db-crumbs a:hover { color: var(--db-primary-container); }
.db-crumbs .wp-block-post-terms__separator { color: var(--db-outline); }

/* Byline + status pill */
.db-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 1.25rem; font-size: 0.8125rem; line-height: 1.125rem; color: var(--db-muted); }
.db-meta a { color: var(--db-contrast); font-weight: 600; text-decoration: none; }
.db-meta a:hover { color: var(--db-primary-container); }
.db-status { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--db-surface-high); color: var(--db-primary-container); padding: 0.25rem 0.625rem; border-radius: 999px; font-size: 0.6875rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.04em; }
@media (prefers-color-scheme: dark) { .db-status { color: var(--db-primary); } }
.db-status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--db-pick); }
.db-meta__read { font-family: var(--db-mono); font-size: 0.75rem; }

/* Disclosure strip */
.db-disclosure-wrap { padding-block: 0.75rem; }
.db-disclosure { display: flex; gap: 0.5rem; align-items: flex-start; background: var(--db-surface-low); border-radius: var(--db-radius); padding: 0.625rem 1rem; font-size: 0.8125rem; line-height: 1.25rem; color: var(--db-muted); }
.db-disclosure .db-icon { color: var(--db-primary-container); margin-top: 0.1rem; }
@media (prefers-color-scheme: dark) { .db-disclosure .db-icon { color: var(--db-primary); } }
.db-disclosure a { font-weight: 600; color: var(--db-primary-container); white-space: nowrap; }
@media (prefers-color-scheme: dark) { .db-disclosure a { color: var(--db-primary); } }

/* Article grid: 720px reading column + sticky table of contents */
.db-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; padding-block: 2.5rem 1rem; }
.db-article__aside { display: none; }
@media (min-width: 1100px) {
	.db-article { grid-template-columns: minmax(0, 760px) 280px; justify-content: space-between; }
	.db-article__aside { display: block; }
	.db-article__aside > * { position: sticky; top: 6rem; }
	.db-article .entry-content .db-toc { display: none; }
}
.db-page { max-width: 760px; padding-block: 2.5rem 1rem; }
.entry-content { font-size: 1.0625rem; line-height: 1.706; }
/* Running text stops near 75 characters (Inter runs narrower than the "0" that ch measures); tables, cards and panels keep the full column. */
.entry-content > :is(p, ul, ol, blockquote, h2, h3, h4) { max-width: 60ch; }
.entry-content > :first-child { margin-top: 0; }
.entry-content > h2.wp-block-heading { margin-block-start: 3rem; scroll-margin-top: 6rem; }
.entry-content > h3.wp-block-heading { margin-block-start: 2rem; scroll-margin-top: 6rem; }
.entry-content ul, .entry-content ol { padding-left: 1.25rem; }
.entry-content li + li { margin-top: 0.25rem; }
.entry-content strong { font-weight: 600; }

/* Quick answer */
.db-quick { background: var(--db-surface-low); border-radius: var(--db-radius-lg); padding: 1.25rem 1.5rem; }
.db-quick > :first-child { margin-top: 0; }
.db-quick > :last-child { margin-bottom: 0; }
.db-quick ul { list-style: none; padding: 0; margin: 0; }
.db-quick li { padding: 0.5rem 0; border-bottom: 1px solid var(--db-border); font-size: 0.9375rem; line-height: 1.5rem; }
.db-quick li:last-child { border-bottom: 0; padding-bottom: 0; }
.db-quick li:first-child { padding-top: 0; }

/* Affiliate CTA: the only amber element on the site */
.db-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--db-cta); color: var(--db-cta-text) !important; text-decoration: none !important; font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.02em; line-height: 1.125rem; padding: 0.75rem 1rem; border-radius: var(--db-radius); transition: background 0.15s ease; white-space: nowrap; }
.db-cta:hover { background: var(--db-cta-hover); }
.db-cta .db-icon { width: 1rem; height: 1rem; }
.db-cta--block { display: flex; width: 100%; box-sizing: border-box; }
.db-cta--sm { padding: 0.5rem 0.75rem; }

/* Chips and badges */
.db-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.125rem 0.5rem; border-radius: var(--db-radius-sm); background: var(--db-surface-container); color: var(--db-muted); }
.db-badge--pick { background: var(--db-pick-soft); color: var(--db-pick-text); }
.db-badge--primary { background: var(--db-primary-soft); color: var(--db-primary-container); font-weight: 700; }
@media (prefers-color-scheme: dark) { .db-badge--primary { color: var(--db-primary); } }

/* Course card */
.db-course { position: relative; overflow: hidden; background: var(--db-surface); border-radius: var(--db-radius-lg); box-shadow: var(--db-shadow-sm); padding: 1.5rem; margin-block: 1.5rem 2rem; font-size: 0.9375rem; line-height: 1.5rem; transition: box-shadow 0.15s ease; }
.db-course:hover { box-shadow: var(--db-shadow); }
.db-course--pick { box-shadow: var(--db-shadow); padding-top: 2.75rem; }
.db-ribbon { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 0.375rem; background: var(--db-pick); color: #fff; padding: 0.25rem 1rem; border-bottom-right-radius: var(--db-radius); font-size: 0.6875rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.db-ribbon .db-icon { width: 0.875rem; height: 0.875rem; }
.db-course__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.db-course__hours { font-family: var(--db-mono); font-size: 0.8125rem; line-height: 1.25rem; color: var(--db-muted); }
.entry-content .db-course__title, .db-course__title { font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.015em; font-weight: 600; margin: 0; }
.db-course__platform { color: var(--db-muted); margin: 0.25rem 0 0; }
.db-course__why { margin: 1rem 0 0; font-size: 1.0625rem; line-height: 1.706; }
.db-facts { background: var(--db-surface-low); border-radius: var(--db-radius); padding: 0.25rem 0.75rem; margin: 1rem 0 0; font-size: 0.8125rem; line-height: 1.125rem; letter-spacing: 0.02em; }
.db-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--db-border); }
.db-facts div:last-child { border-bottom: 0; }
.db-facts dt { color: var(--db-muted); font-weight: 500; margin: 0; }
.db-facts dd { margin: 0; font-weight: 600; text-align: right; color: var(--db-contrast); }
.db-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin-top: 1.25rem; }
.db-proscons h4 { font-size: 0.6875rem; line-height: 1rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin: 0 0 0.5rem; color: var(--db-muted); }
.db-proscons__pros h4 { color: var(--db-pick-text); }
.db-proscons ul { list-style: none; margin: 0; padding: 0; }
.db-proscons li { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0 0 0.375rem; }
.db-proscons li .db-icon { margin-top: 0.2rem; }
.db-proscons__pros li .db-icon { color: var(--db-pick); }
.db-proscons__cons li { color: var(--db-muted); }
.db-proscons__cons li .db-icon { color: var(--db-outline); }
@media (prefers-color-scheme: dark) { .db-proscons__pros li .db-icon { color: var(--db-pick-text); } }
.db-course__foot { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--db-border); }
.db-course__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.75rem; }
.db-course__price span { font-size: 0.6875rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.04em; color: var(--db-muted); }
.db-course__price strong { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; letter-spacing: -0.015em; }
.db-course__checked { display: block; margin-top: 0.625rem; font-family: var(--db-mono); font-size: 0.75rem; line-height: 1rem; color: var(--db-muted); text-align: center; }
@media (max-width: 600px) { .db-proscons { grid-template-columns: 1fr; } .db-course { padding: 1.25rem; } .db-course--pick { padding-top: 2.5rem; } }

/* Comparison table */
.db-compare { margin-block: 1.5rem 2rem; }
.db-compare__scroll { overflow-x: auto; border-radius: var(--db-radius-lg); background: var(--db-surface); box-shadow: var(--db-shadow-sm); }
.db-compare table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5rem; min-width: 560px; }
.db-compare th, .db-compare td { text-align: left; padding: 1rem; border-bottom: 1px solid var(--db-border); vertical-align: middle; }
.db-compare thead th { font-size: 0.6875rem; line-height: 1rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; color: var(--db-contrast); background: var(--db-surface-container); }
.db-compare tbody tr { transition: background 0.15s; }
.db-compare tbody tr:hover { background: color-mix(in srgb, var(--db-surface-low) 60%, transparent); }
.db-compare tbody tr:last-child td { border-bottom: 0; }
.db-compare td:first-child { min-width: 220px; }
.db-compare td:first-child a { color: var(--db-contrast); font-weight: 600; text-decoration: none; }
.db-compare td:first-child a:hover { color: var(--db-primary-container); }
.db-compare .db-badge { margin-top: 0.375rem; }
.db-compare td[data-label]:not(:nth-child(4)) { white-space: nowrap; }
.db-compare td:last-child { text-align: right; }
.db-compare .is-pick td { background: color-mix(in srgb, var(--db-pick-soft) 45%, transparent); }
.db-compare .is-pick td:first-child { box-shadow: inset 3px 0 0 var(--db-pick); }
.db-compare td.db-num { font-family: var(--db-mono); font-size: 0.8125rem; white-space: nowrap; }
@media (max-width: 700px) {
	.db-compare__scroll { background: transparent; box-shadow: none; overflow: visible; }
	.db-compare table { min-width: 0; }
	.db-compare thead { display: none; }
	.db-compare tbody { display: grid; gap: 0.75rem; }
	.db-compare tr { display: block; padding: 1rem; background: var(--db-surface); border-radius: var(--db-radius-lg); box-shadow: var(--db-shadow-sm); }
	.db-compare .is-pick td { background: none; }
	.db-compare .is-pick { box-shadow: inset 3px 0 0 var(--db-pick), var(--db-shadow-sm); }
	.db-compare .is-pick td:first-child { box-shadow: none; }
	.db-compare td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.375rem 0; border: 0; border-bottom: 1px solid var(--db-border); font-size: 0.8125rem; }
	.db-compare td::before { content: attr(data-label); color: var(--db-muted); font-weight: 500; }
	.db-compare td:first-child { display: block; border: 0; padding-top: 0; font-size: 0.9375rem; }
	.db-compare td:first-child::before, .db-compare td:last-child::before { content: none; }
	.db-compare td:last-child { border: 0; padding: 0.75rem 0 0; }
	.db-compare td:last-child .db-cta { width: 100%; }
}

/* Table of contents */
.db-toc { background: var(--db-surface-low); border-radius: var(--db-radius-lg); padding: 1rem 1.25rem; font-size: 0.875rem; line-height: 1.25rem; }
.db-toc summary { font-size: 0.6875rem; line-height: 1rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--db-primary-container); cursor: pointer; list-style: none; }
@media (prefers-color-scheme: dark) { .db-toc summary { color: var(--db-primary); } }
.db-toc summary::-webkit-details-marker { display: none; }
.db-toc ol { list-style: none; counter-reset: toc; margin: 0.75rem 0 0; padding: 0; }
.db-toc li { counter-increment: toc; display: flex; gap: 0.5rem; padding: 0.3rem 0; }
.db-toc li::before { content: counter(toc, decimal-leading-zero) "."; font-family: var(--db-mono); font-size: 0.75rem; color: var(--db-outline); }
.db-toc a { text-decoration: none; color: var(--db-muted); }
.db-toc a:hover, .db-toc a[aria-current] { color: var(--db-contrast); }

/* FAQ: one card per question */
.db-faq { display: grid; gap: 0.5rem; }
.db-faq details { background: var(--db-surface); border-radius: var(--db-radius-lg); box-shadow: var(--db-shadow-sm); padding: 1rem 1.25rem; }
.db-faq summary { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.db-faq summary::-webkit-details-marker { display: none; }
.db-faq summary .db-icon { color: var(--db-muted); transition: transform 0.15s; }
.db-faq details[open] summary .db-icon { transform: rotate(180deg); }
.db-faq details > div { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--db-border); font-size: 0.9375rem; line-height: 1.5rem; color: var(--db-muted); }
.db-faq details > div > :last-child { margin-bottom: 0; }

/* Author box */
.db-author-band { background: var(--db-surface-container); padding-block: 2.5rem; margin-top: 3rem; }
.db-author { display: flex; gap: 1rem; align-items: flex-start; background: var(--db-surface); border-radius: var(--db-radius-lg); box-shadow: var(--db-shadow-sm); padding: 1.5rem; max-width: 760px; box-sizing: border-box; }
.db-author__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.db-author__initials { width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--db-primary-container); color: #fff; font-weight: 700; font-size: 1.25rem; }
.db-author__name { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.db-author__name a { color: var(--db-contrast); text-decoration: none; }
.db-author__role { color: var(--db-muted); font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; letter-spacing: 0.02em; margin: 0.125rem 0 0.75rem; }
.db-author__bio { margin: 0 0 0.75rem; font-size: 0.9375rem; line-height: 1.5rem; color: var(--db-muted); }
.db-author__links { margin: 0; }
.db-author__links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.db-author__links a { display: inline-flex; align-items: center; gap: 0.25rem; padding-block: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--db-link); text-decoration: none; }
.db-author__links a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.db-author__links .db-icon { width: 0.875rem; height: 0.875rem; }
.db-author--compact { gap: 0.875rem; padding: 1.25rem; background: var(--db-surface-low); box-shadow: none; }
.db-author--compact .db-author__photo, .db-author--compact .db-author__initials { width: 48px; height: 48px; font-size: 1rem; }
.db-author--compact .db-author__name { font-size: 1.0625rem; line-height: 1.5rem; }
.db-author--compact .db-author__role { margin-bottom: 0.625rem; }
.db-author--compact .db-author__bio { font-size: 0.875rem; line-height: 1.375rem; }

/* Guide cards on home and archives: title, what it covers, topic and date */
.db-listing { padding-block: 2.5rem; }
.db-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1rem; }
.db-post-card { position: relative; display: flex; flex-direction: column; gap: 0.5rem; background: var(--db-surface); border-radius: var(--db-radius-lg); padding: 1.5rem; height: 100%; box-sizing: border-box; box-shadow: var(--db-shadow-sm); transition: box-shadow 0.15s; }
.db-post-card > * { margin: 0 !important; }
.db-post-card:hover { box-shadow: var(--db-shadow); }
.db-post-card__title, .db-post-card .wp-block-post-title { font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.015em; font-weight: 600; text-wrap: balance; }
.db-post-card__title a { text-decoration: none; color: var(--db-contrast); }
.db-post-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.db-post-card:hover .db-post-card__title a { color: var(--db-primary-container); }
.db-post-card__title a:focus-visible { outline: none; }
.db-post-card:has(.db-post-card__title a:focus-visible) { outline: 2px solid var(--db-primary-container); outline-offset: 2px; }
.db-post-card__excerpt, .db-post-card .wp-block-post-excerpt { flex: 1; font-size: 0.9375rem; line-height: 1.5rem; color: var(--db-muted); }
.db-post-card .wp-block-post-excerpt__excerpt { margin: 0; }
.db-post-card__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--db-border); font-size: 0.75rem; line-height: 1rem; color: var(--db-muted); }
.db-post-card__meta a { position: relative; z-index: 1; color: var(--db-primary-container); font-weight: 600; text-decoration: none; }
.db-post-card__meta .db-mono, .db-post-card__meta time { font-family: var(--db-mono); }
@media (prefers-color-scheme: dark) {
	.db-post-card:hover .db-post-card__title a, .db-post-card__meta a { color: var(--db-primary); }
	.db-post-card:has(.db-post-card__title a:focus-visible) { outline-color: var(--db-primary); }
}
.wp-block-query-pagination { margin-top: 2rem; font-size: 0.8125rem; font-weight: 600; }
.wp-block-query-pagination a { text-decoration: none; }

/* Arrow link: the one text-link style that means "go there" */
.db-arrow-link { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; color: var(--db-link); text-decoration: none; }
.db-arrow-link .db-icon { width: 1rem; height: 1rem; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.db-arrow-link:hover .db-icon { transform: translateX(3px); }

/* Empty state: what is coming and where to go instead */
.db-empty { display: grid; gap: 1.5rem 3rem; background: var(--db-surface-low); border-radius: var(--db-radius-lg); padding: 1.5rem; }
@media (min-width: 800px) { .db-empty { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: 2rem; } }
.db-empty p { margin: 0; }
.db-empty__title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.015em; color: var(--db-contrast); text-wrap: balance; }
.db-empty__text { margin-top: 0.5rem !important; font-size: 0.9375rem; line-height: 1.5rem; color: var(--db-muted); max-width: 52ch; }
.db-empty__action { margin-top: 1rem !important; font-size: 0.9375rem; }
.db-empty__label { font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; color: var(--db-muted); margin-bottom: 0.25rem !important; }
.db-empty__queue ol, .db-empty__queue ul { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.db-empty__queue li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--db-border); font-size: 0.9375rem; line-height: 1.375rem; color: var(--db-contrast); }
.db-empty__queue li:last-child { border-bottom: 0; }
.db-empty__queue small { flex: none; font-size: 0.75rem; color: var(--db-muted); }
.db-empty__queue li a { font-weight: 600; color: var(--db-link); text-decoration: none; }
.db-empty__queue li a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Home: hero column + author aside, then routes, method and latest guides */
.db-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 3rem 0; }
@media (min-width: 1100px) {
	.db-home { grid-template-columns: minmax(0, 760px) 300px; justify-content: space-between; gap: 3rem; }
	.db-home__aside { padding-top: 0.75rem; }
	.db-home__aside > * { position: sticky; top: 6rem; }
}
.db-home .entry-content > h1 { font-size: var(--wp--preset--font-size--huge); line-height: 1.2; letter-spacing: -0.02em; max-width: 18ch; margin: 0; text-wrap: balance; }
.db-home .entry-content > h1 + p { font-size: 1.0625rem; color: var(--db-muted); max-width: 58ch; margin-top: 1rem; }
.db-home .entry-content > h2 { font-size: var(--wp--preset--font-size--x-large); margin-block-start: 3.5rem; }
.db-home__aside .db-author { max-width: none; }
.db-latest { padding-block: 3.5rem 1rem; }
.db-section-title { font-size: var(--wp--preset--font-size--x-large); line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; margin: 0 0 1.25rem; }

/* Routes: the three pillars as one decision list, one row per goal */
.db-routes { display: grid; margin-top: 2rem; background: var(--db-surface); border-radius: var(--db-radius-lg); box-shadow: var(--db-shadow-sm); overflow: hidden; }
.db-routes a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name go" "desc go"; align-items: center; gap: 0.125rem 1.5rem; padding: 1.125rem 1.5rem; text-decoration: none; color: var(--db-muted); font-size: 0.9375rem; line-height: 1.5rem; transition: background-color 0.15s; }
.db-routes a + a { border-top: 1px solid var(--db-border); }
.db-routes a:hover { background: var(--db-surface-low); }
.db-routes a:focus-visible { outline-offset: -2px; }
.db-routes strong { grid-area: name; color: var(--db-contrast); font-size: 1.125rem; line-height: 1.625rem; font-weight: 600; letter-spacing: -0.01em; }
.db-routes span { grid-area: desc; }
.db-routes em { grid-area: go; display: inline-flex; align-items: center; gap: 0.375rem; font-style: normal; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--db-link); white-space: nowrap; }
.db-routes em::after { content: ""; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: var(--db-arrow) center / contain no-repeat; mask: var(--db-arrow) center / contain no-repeat; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.db-routes a:hover em::after { transform: translateX(3px); }
.db-routes a:hover strong { color: var(--db-primary-container); }
@media (max-width: 600px) {
	.db-routes a { grid-template-areas: "name go" "desc desc"; padding: 1rem 1.125rem; }
	.db-routes em { font-size: 0; gap: 0; }
	.db-routes em::after { width: 1.25rem; height: 1.25rem; }
}
:root { --db-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }

/* Method: a data-free specimen of the course fact sheet next to the three rules */
.db-method { display: grid; gap: 1.5rem 2.5rem; margin-top: 1.25rem; }
@media (min-width: 760px) { .db-method { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; } }
.db-specimen { margin: 0; background: var(--db-surface-low); border-radius: var(--db-radius-lg); padding: 1rem 1.25rem 1.125rem; }
.db-specimen figcaption { font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; color: var(--db-contrast); margin-bottom: 0.5rem; }
.db-specimen figcaption small { font-weight: 500; color: var(--db-muted); font-size: inherit; }
.db-specimen dl { margin: 0; font-size: 0.8125rem; line-height: 1.125rem; letter-spacing: 0.02em; }
.db-specimen dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--db-border); }
.db-specimen dl div:last-child { border-bottom: 0; }
.db-specimen dt { color: var(--db-contrast); font-weight: 600; margin: 0; }
.db-specimen dd { margin: 0; color: var(--db-muted); text-align: right; font-style: italic; }
.entry-content .db-specimen__checked { margin: 0.75rem 0 0; font-family: var(--db-mono); font-size: 0.75rem; line-height: 1rem; color: var(--db-muted); }
.db-method__points { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 1rem; font-size: 0.9375rem; line-height: 1.5rem; color: var(--db-muted); }
.db-method__points li { margin: 0 !important; }
.db-method__points strong { display: block; color: var(--db-contrast); font-size: 1rem; }

/* Dark mode: shadows don't read on near-black, so raised surfaces get a hairline ring instead */
@media (prefers-color-scheme: dark) {
	.db-routes, .db-post-card, .db-course, .db-faq details, .db-compare__scroll, .db-author { box-shadow: 0 0 0 1px var(--db-border); }
	.db-routes a:hover { background: var(--db-surface-container); }
	.db-routes a:hover strong { color: var(--db-primary); }
	.db-author--compact { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .db-arrow-link .db-icon, .db-routes em::after { transition: none; } }

/* Content tables written in Markdown */
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content .wp-block-table table { border-collapse: collapse; background: var(--db-surface); border-radius: var(--db-radius-lg); overflow: hidden; box-shadow: var(--db-shadow-sm); font-size: 0.9375rem; line-height: 1.5rem; }
.entry-content .wp-block-table th, .entry-content .wp-block-table td { border: 0; border-bottom: 1px solid var(--db-border); padding: 0.75rem 1rem; text-align: left; }
.entry-content .wp-block-table thead { border: 0; }
.entry-content .wp-block-table th { background: var(--db-surface-container); font-size: 0.6875rem; line-height: 1rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.entry-content .wp-block-table tr:last-child td { border-bottom: 0; }

/* Mobile sticky bar for the editor's pick */
.db-stickybar { display: none; }
@media (max-width: 700px) {
	.db-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem var(--db-gutter) calc(0.625rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--db-surface) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -2px 16px rgb(0 0 0 / 0.08); transform: translateY(110%); transition: transform 0.2s ease; }
	.db-stickybar.is-visible { transform: none; }
	.db-stickybar[hidden] { display: none; }
	.db-stickybar__close { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; background: none; color: var(--db-muted); cursor: pointer; padding: 0; }
	.db-stickybar__text { flex: 1; min-width: 0; font-size: 0.8125rem; line-height: 1.125rem; }
	.db-stickybar__text strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.db-stickybar__text span { display: block; font-family: var(--db-mono); font-size: 0.6875rem; color: var(--db-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.db-stickybar__text .db-badge { display: inline-flex; font-family: inherit; padding: 0 0.25rem; margin-right: 0.25rem; }
	.db-stickybar .db-cta { flex: none; }
	body:has(.db-stickybar.is-visible) .db-footer { padding-bottom: 5rem; }
}
@media (prefers-reduced-motion: reduce) { .db-stickybar, .db-course, .db-faq summary .db-icon { transition: none; } }

/* Footer */
.db-footer { background: var(--db-surface-low); margin-top: 2.5rem; padding-block: 2.5rem; color: var(--db-muted); font-size: 0.8125rem; line-height: 1.125rem; }
.db-footer__note { max-width: 68ch; box-sizing: border-box; background: var(--db-surface-container); border-radius: var(--db-radius); padding: 1rem 1.5rem; margin-bottom: 1.5rem; }
.db-footer__note p { margin: 0; font-size: 0.9375rem; line-height: 1.5rem; }
.db-footer__note .db-eyebrow { display: block; margin-bottom: 0.25rem; font-size: 0.6875rem; }
.db-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; align-items: center; padding-top: 1rem; }
.db-footer__inner p { margin: 0; font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.04em; }
.db-footer__links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; margin: 0; padding: 0; }
.db-footer__links a { display: inline-block; padding-block: 0.4375rem; }
.db-footer a { color: var(--db-muted); text-decoration: none; font-weight: 600; letter-spacing: 0.02em; }
.db-footer a:hover { color: var(--db-contrast); }

.db-compare__platform { display: block; font-size: 0.8125rem; line-height: 1.125rem; color: var(--db-muted); margin-top: 0.125rem; }
.db-compare td.db-num::before { font-family: var(--wp--preset--font-family--inter, sans-serif); font-size: 0.8125rem; }