/*
Theme Name: DB Kennisbank
Theme URI: https://gitlab.com/bright-online/clients-wordpress-child-themes/db-kennisbank
Author: Bright Online
Author URI: https://bright-online.nl
Description: A native, dependency-free WordPress wiki / knowledge base theme. Features a fixed left sidebar navigation tree with live filtering and a wide content area with automatic table of contents, breadcrumbs and article navigation.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: db-kennisbank
Tags: wiki, knowledge-base, documentation, custom-menu, left-sidebar, translation-ready, block-styles, wide-blocks
*/

/* -------------------------------------------------------------------------
 * 1. Design tokens — Doorbijters brand palette
 *
 * All colours are driven by the theme.json palette (--wp--preset--color--*)
 * so the editor, the site editor and the front-end always stay in sync.
 * The hex values act as a fallback when theme.json is unavailable.
 * ---------------------------------------------------------------------- */
:root {
	/* Raw brand colours (mirrors theme.json). */
	--dbkb-brand-pink: var(--wp--preset--color--primary, #e7295b);
	--dbkb-brand-pink-dark: var(--wp--preset--color--primary-dark, #c01c49);
	--dbkb-brand-pink-soft: var(--wp--preset--color--primary-soft, #fdeaf0);
	--dbkb-brand-mint: var(--wp--preset--color--accent, #13e8a8);
	--dbkb-brand-mint-soft: var(--wp--preset--color--accent-soft, #e3fcf3);
	--dbkb-brand-navy: var(--wp--preset--color--navy, #101d38);
	--dbkb-brand-navy-light: var(--wp--preset--color--navy-light, #191f39);

	/* Semantic tokens. */
	--dbkb-color-primary: var(--dbkb-brand-pink);
	--dbkb-color-primary-dark: var(--dbkb-brand-pink-dark);
	--dbkb-color-primary-soft: var(--dbkb-brand-pink-soft);
	--dbkb-color-accent: var(--dbkb-brand-mint);
	--dbkb-color-accent-soft: var(--dbkb-brand-mint-soft);
	--dbkb-color-text: var(--wp--preset--color--text, #33395a);
	--dbkb-color-text-muted: var(--wp--preset--color--muted, #6c7292);
	--dbkb-color-heading: var(--wp--preset--color--heading, #101d38);
	--dbkb-color-bg: var(--wp--preset--color--white, #ffffff);
	--dbkb-color-bg-alt: var(--wp--preset--color--surface, #f3f3f5);
	--dbkb-color-border: var(--wp--preset--color--border, #e4e5ec);
	--dbkb-color-code-bg: #f6f6f9;

	/* Dark navigation surfaces (header + left sidebar). */
	--dbkb-nav-bg: var(--dbkb-brand-navy);
	--dbkb-nav-bg-soft: var(--dbkb-brand-navy-light);
	--dbkb-nav-text: #cdd2e0;
	--dbkb-nav-heading: #ffffff;
	--dbkb-nav-muted: #8a91ad;
	--dbkb-nav-border: rgba(255, 255, 255, .12);
	--dbkb-nav-hover-bg: rgba(255, 255, 255, .07);

	--dbkb-sidebar-width: 22%;
	--dbkb-toc-width: 240px;
	--dbkb-utilbar-height: 64px;
	--dbkb-content-max: none;
	/* Gap between the content card and the edges of the shell. */
	--dbkb-main-inset: 1.5rem;

	--dbkb-radius: 8px;
	--dbkb-radius-sm: 5px;
	--dbkb-radius-lg: 14px;
	--dbkb-shadow: 0 1px 2px rgba(16, 29, 56, .06), 0 8px 24px rgba(16, 29, 56, .08);
	--dbkb-shadow-brand: 0 8px 24px rgba(231, 41, 91, .18);

	--dbkb-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--dbkb-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* -------------------------------------------------------------------------
 * 2. Base / reset
 * ---------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }

body {
	margin: 0;
	font-family: var(--dbkb-font-base);
	font-size: 16px;
	line-height: 1.7;
	color: var(--dbkb-color-text);
	background: var(--dbkb-color-bg-alt);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--dbkb-color-primary); text-decoration: none; }
a:hover,
a:focus { color: var(--dbkb-color-primary-dark); text-decoration: underline; }

img,
svg,
iframe,
video { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
	color: var(--dbkb-color-heading);
	line-height: 1.3;
	font-weight: 650;
	margin: 2em 0 .6em;
	scroll-margin-top: 1.5rem;
}
h1 { font-size: 2.25rem; margin-top: 0; letter-spacing: -.02em; }
h2 { font-size: 1.6rem; padding-bottom: .35em; border-bottom: 1px solid var(--dbkb-color-border); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p, ul, ol, dl, table, pre, blockquote, figure { margin: 0 0 1.25em; }

code, kbd, pre, samp { font-family: var(--dbkb-font-mono); font-size: .9em; }
code {
	background: var(--dbkb-color-code-bg);
	border: 1px solid var(--dbkb-color-border);
	border-radius: var(--dbkb-radius-sm);
	padding: .15em .4em;
}
pre {
	background: var(--dbkb-color-code-bg);
	border: 1px solid var(--dbkb-color-border);
	border-radius: var(--dbkb-radius);
	padding: 1rem 1.25rem;
	overflow: auto;
}
pre code { background: none; border: 0; padding: 0; }

blockquote {
	border-left: 4px solid var(--dbkb-color-primary);
	background: var(--dbkb-color-primary-soft);
	padding: .75rem 1.25rem;
	border-radius: 0 var(--dbkb-radius) var(--dbkb-radius) 0;
	color: var(--dbkb-color-heading);
}
blockquote > :last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid var(--dbkb-color-border); padding: .6rem .8rem; text-align: left; }
th { background: var(--dbkb-color-bg-alt); font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--dbkb-color-border); margin: 2.5rem 0; }

/* Accessibility helpers */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	left: 12px;
	top: 12px;
	z-index: 1000;
	padding: .75rem 1.25rem;
	background: #fff;
	border-radius: var(--dbkb-radius);
	box-shadow: var(--dbkb-shadow);
}
:focus-visible { outline: 2px solid var(--dbkb-color-primary); outline-offset: 2px; }

/* -------------------------------------------------------------------------
 * 3. Buttons & form fields
 * ---------------------------------------------------------------------- */
.dbkb-button,
button,
input[type="submit"],
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	padding: .65rem 1.15rem;
	border: 1px solid transparent;
	border-radius: var(--dbkb-radius);
	background: var(--dbkb-color-primary);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}
.dbkb-button:hover,
button:hover,
input[type="submit"]:hover { background: var(--dbkb-color-primary-dark); color: #fff; text-decoration: none; }

.dbkb-button--ghost {
	background: transparent;
	color: var(--dbkb-color-text);
	border-color: var(--dbkb-color-border);
}
.dbkb-button--ghost:hover { background: var(--dbkb-color-bg-alt); color: var(--dbkb-color-heading); }

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	width: 100%;
	font: inherit;
	color: var(--dbkb-color-text);
	background: #fff;
	border: 1px solid var(--dbkb-color-border);
	border-radius: var(--dbkb-radius);
	padding: .6rem .8rem;
}
input:focus,
textarea:focus,
select:focus { border-color: var(--dbkb-color-primary); outline: none; box-shadow: 0 0 0 3px rgba(231, 41, 91, .18); }

/* -------------------------------------------------------------------------
 * 4. Branding + utility bar (search above the content, on the grey shell)
 * ---------------------------------------------------------------------- */
.dbkb-branding { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.dbkb-branding img { max-height: 84px; width: auto; display: block; }
.dbkb-site-title { font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.2; }
.dbkb-site-title a { color: var(--dbkb-color-heading); text-decoration: none; }
.dbkb-site-title a:hover { color: var(--dbkb-color-primary); text-decoration: none; }
.dbkb-site-description { margin: 0; font-size: .78rem; color: var(--dbkb-color-text-muted); line-height: 1.2; }

/* Branding inside the dark sidebar. */
.dbkb-sidebar .dbkb-site-title a { color: var(--dbkb-nav-heading); }
.dbkb-sidebar .dbkb-site-title a:hover { color: var(--dbkb-color-accent); }
.dbkb-sidebar .dbkb-site-description { color: var(--dbkb-nav-muted); }

.dbkb-utility-bar {
	/* Not sticky: the bar scrolls away with the content card. */
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--dbkb-utilbar-height);
	padding: var(--dbkb-main-inset);
	background: var(--dbkb-color-bg-alt);
}
.dbkb-utility-bar__search { flex: 1 1 auto; max-width: 560px; }
.dbkb-utility-bar__branding { display: none; }
/* Without a sidebar there is no other place for the logo. */
.dbkb-shell--no-sidebar .dbkb-utility-bar__branding { display: flex; min-width: 0; }
.dbkb-utility-bar .dbkb-top-nav { margin-left: auto; }

.dbkb-top-menu { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.dbkb-top-menu a {
	display: block;
	padding: .45rem .7rem;
	border-radius: var(--dbkb-radius-sm);
	color: var(--dbkb-color-text);
	font-size: .9rem;
	font-weight: 500;
}
.dbkb-top-menu a:hover { background: rgba(16, 29, 56, .06); color: var(--dbkb-color-heading); text-decoration: none; }
.dbkb-top-menu .current-menu-item > a { color: #fff; background: var(--dbkb-color-primary); }

.dbkb-staff-link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .45rem .7rem;
	border-radius: var(--dbkb-radius-sm);
	background: rgba(16, 29, 56, .06);
	color: var(--dbkb-color-text);
	font-size: .9rem;
	font-weight: 500;
}
.dbkb-staff-link:hover { background: var(--dbkb-color-primary); color: #fff; text-decoration: none; }

.dbkb-menu-toggle {
	display: none;
	background: var(--dbkb-color-bg);
	color: var(--dbkb-color-heading);
	border: 1px solid var(--dbkb-color-border);
	padding: .5rem .7rem;
}
.dbkb-menu-toggle:hover { background: var(--dbkb-color-bg); color: var(--dbkb-color-primary); }

/* Search form */
.dbkb-search-form { position: relative; display: block; }
.dbkb-search-form input[type="search"] {
	padding-left: 2.4rem;
	background: var(--dbkb-color-bg);
	box-shadow: var(--dbkb-shadow);
}
.dbkb-search-form input[type="search"]:focus { background: #fff; }
.dbkb-search-form > .dbkb-icon--search {
	position: absolute;
	left: .8rem;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: var(--dbkb-color-text-muted);
	pointer-events: none;
}
.dbkb-search-form button[type="submit"] { display: none; }


/* -------------------------------------------------------------------------
 * 5. Layout shell
 * ---------------------------------------------------------------------- */
.dbkb-shell {
	display: grid;
	grid-template-columns: var(--dbkb-sidebar-width) minmax(0, 1fr);
	align-items: stretch;
	min-height: 100vh;
	width: 100%;
	margin: 0 auto;
	background: var(--dbkb-color-bg-alt);
}
.dbkb-shell--no-sidebar { grid-template-columns: minmax(0, 1fr); }

/* Right hand column: utility bar on top of the content card. */
.dbkb-content-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * 6. Left sidebar navigation
 * ---------------------------------------------------------------------- */
.dbkb-sidebar {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 1rem 3rem;
	border-right: 1px solid var(--dbkb-nav-border);
	background: var(--dbkb-nav-bg);
	color: var(--dbkb-nav-text);
	scrollbar-color: rgba(255, 255, 255, .25) transparent;
	/* Safety net: keeps the navy bleeding to the viewport edge should the
	   shell ever be constrained/centred again. */
	box-shadow: -100vw 0 0 var(--dbkb-nav-bg);
}
.dbkb-sidebar::-webkit-scrollbar { width: 8px; }
.dbkb-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 999px; }

/* Logo block, pinned to the top of the scrolling sidebar. */
.dbkb-sidebar__branding {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1.5rem .6rem 1.25rem;
	margin-bottom: 1.25rem;
	background: var(--dbkb-nav-bg);
	border-bottom: 1px solid var(--dbkb-nav-border);
}
.dbkb-sidebar__branding .dbkb-branding { flex: 1 1 auto; }

.dbkb-sidebar__close {
	display: none;
	flex: 0 0 auto;
	padding: .35rem;
	background: transparent;
	border: 1px solid var(--dbkb-nav-border);
	color: var(--dbkb-nav-heading);
}
.dbkb-sidebar__close:hover { background: var(--dbkb-nav-hover-bg); color: #fff; }


.dbkb-sidebar__section + .dbkb-sidebar__section { margin-top: 1.75rem; }

/* Subcategories nested inside a category's own <nav> (see
   dbkb_render_sidebar_category_node()) indent instead of getting the full
   top-level margin, so the tree reads as a hierarchy, not a flat list. */
.dbkb-nav .dbkb-sidebar__section {
	margin: .3rem 0 .3rem .7rem;
	padding-left: .55rem;
	border-left: 1px solid var(--dbkb-nav-border);
}
.dbkb-nav .dbkb-sidebar__section + .dbkb-sidebar__section { margin-top: .3rem; }
.dbkb-nav .dbkb-sidebar__section .dbkb-sidebar__title {
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--dbkb-nav-text);
}
.dbkb-sidebar__title {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--dbkb-nav-muted);
	margin: 0 0 .6rem .6rem;
}
.dbkb-sidebar__title a { color: inherit; }
.dbkb-sidebar__title a:hover { color: var(--dbkb-color-accent); text-decoration: none; }

/* Collapsible section header (category groups, labels/tags) */
.dbkb-sidebar__section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin: 0 0 .6rem .6rem;
}
.dbkb-sidebar__section-header .dbkb-sidebar__title { margin: 0; }
.dbkb-sidebar__toggle {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	margin-right: .5rem;
	background: transparent;
	border: 0;
	border-radius: var(--dbkb-radius-sm);
	color: var(--dbkb-nav-muted);
	cursor: pointer;
}
.dbkb-sidebar__toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.dbkb-sidebar__toggle svg { width: 12px; height: 12px; transition: transform .15s ease; }
.dbkb-sidebar__toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

/* Sidebar "Categories" / "Labels" term pills */
.dbkb-sidebar__terms { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 .6rem; }
.dbkb-sidebar__terms .dbkb-tag {
	background: transparent;
	border-color: var(--dbkb-nav-border);
	color: var(--dbkb-nav-text);
}
.dbkb-sidebar__terms .dbkb-tag:hover { border-color: var(--dbkb-color-accent); color: #fff; }

/* Top-level wiki categories, shown as a quick-jump pill row above the tree. */
.dbkb-sidebar__top-categories {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	padding: 0 .6rem;
	margin-bottom: 1.5rem;
}
.dbkb-sidebar__top-categories .dbkb-tag {
	background: var(--dbkb-color-primary-soft);
	border-color: transparent;
	color: var(--dbkb-color-primary);
	font-weight: 600;
}
.dbkb-sidebar__top-categories .dbkb-tag:hover { background: var(--dbkb-color-accent); color: #fff; }

.dbkb-nav ul { list-style: none; margin: 0; padding: 0; }
.dbkb-nav .sub-menu,
.dbkb-nav .children {
	margin-left: .7rem;
	padding-left: .55rem;
	border-left: 1px solid var(--dbkb-nav-border);
}
.dbkb-nav li { position: relative; margin: 1px 0; }
.dbkb-nav a {
	display: block;
	padding: .35rem 1.9rem .35rem .6rem;
	border-radius: var(--dbkb-radius-sm);
	font-size: .9rem;
	line-height: 1.45;
	color: var(--dbkb-nav-text);
}
.dbkb-nav a:hover { background: var(--dbkb-nav-hover-bg); color: #fff; text-decoration: none; }
.dbkb-nav .current-menu-item > a,
.dbkb-nav .current_page_item > a,
.dbkb-nav .dbkb-is-current > a {
	background: rgba(231, 41, 91, .18);
	color: #fff;
	font-weight: 600;
	box-shadow: inset 2px 0 0 var(--dbkb-color-primary);
}
.dbkb-nav .current-menu-ancestor > a,
.dbkb-nav .current_page_ancestor > a { color: #fff; font-weight: 600; }

/* Expand / collapse toggle for nested items */
.dbkb-nav__toggle {
	position: absolute;
	top: .2rem;
	right: .15rem;
	width: 24px;
	height: 24px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: var(--dbkb-radius-sm);
	color: var(--dbkb-nav-muted);
	cursor: pointer;
}
.dbkb-nav__toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.dbkb-nav__toggle svg { width: 12px; height: 12px; transition: transform .15s ease; }
.dbkb-nav__toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.dbkb-nav li.dbkb-collapsed > .sub-menu,
.dbkb-nav li.dbkb-collapsed > .children { display: none; }

.dbkb-nav__count {
	float: right;
	font-size: .72rem;
	color: var(--dbkb-nav-muted);
	background: rgba(255, 255, 255, .08);
	border-radius: 999px;
	padding: 0 .45rem;
}


/* Widget area inside sidebar */
.dbkb-sidebar .widget { margin-top: 1.75rem; font-size: .9rem; }
.dbkb-sidebar .widget-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--dbkb-nav-muted); margin: 0 0 .6rem .6rem; }
.dbkb-sidebar .widget ul { list-style: none; margin: 0; padding: 0; }
.dbkb-sidebar .widget ul a { display: block; padding: .35rem .6rem; border-radius: var(--dbkb-radius-sm); color: var(--dbkb-nav-text); }
.dbkb-sidebar .widget ul a:hover { background: var(--dbkb-nav-hover-bg); color: #fff; text-decoration: none; }

/* -------------------------------------------------------------------------
 * 7. Main content area
 * ---------------------------------------------------------------------- */
.dbkb-main {
	position: sticky;
	top: var(--dbkb-main-inset);
	min-width: 0;
	flex: 1 1 auto;
	/* Inset the content card slightly so the light grey shell shows around it.
	   The top gap is provided by the utility bar above. */
	margin: 0 var(--dbkb-main-inset) var(--dbkb-main-inset);
	padding: 2.5rem clamp(1.25rem, 3vw, 3rem) 4rem;
	background: var(--dbkb-color-bg);
	color: var(--dbkb-color-text);
	border: 1px solid var(--dbkb-color-border);
	border-radius: var(--dbkb-radius-lg);
	box-shadow: var(--dbkb-shadow);
}

.dbkb-article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.dbkb-article-layout--with-toc { grid-template-columns: minmax(0, 1fr) var(--dbkb-toc-width); }

.dbkb-content { max-width: var(--dbkb-content-max); }
.dbkb-content > *:first-child { margin-top: 0; }

/* Breadcrumbs */
.dbkb-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	font-size: .82rem;
	color: var(--dbkb-color-text-muted);
	margin-bottom: 1rem;
}
.dbkb-breadcrumbs a { color: var(--dbkb-color-text-muted); }
.dbkb-breadcrumbs a:hover { color: var(--dbkb-color-primary); }
.dbkb-breadcrumbs__sep { opacity: .5; }
.dbkb-breadcrumbs__current { color: var(--dbkb-color-heading); font-weight: 500; }

/* Entry header */
.dbkb-entry-header { margin-bottom: 1.75rem; }
.dbkb-entry-title { margin: 0 0 .5rem; }
.dbkb-entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem 1rem;
	font-size: .82rem;
	color: var(--dbkb-color-text-muted);
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--dbkb-color-border);
}
.dbkb-entry-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.dbkb-entry-meta svg { width: 14px; height: 14px; }

.dbkb-share-button {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .7rem;
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	background: transparent;
	border: 1px solid var(--dbkb-color-border);
	border-radius: 999px;
	color: var(--dbkb-color-text-muted);
}
.dbkb-share-button:hover { border-color: var(--dbkb-color-primary); color: var(--dbkb-color-primary); background: transparent; }
.dbkb-share-button.dbkb-is-copied { border-color: var(--dbkb-color-primary); color: var(--dbkb-color-primary); background: var(--dbkb-color-primary-soft); }

.dbkb-page-intro { font-size: 1.05rem; color: var(--dbkb-color-text-muted); margin: -.25rem 0 2rem; }

/* Table of contents */
.dbkb-toc {
	position: sticky;
	top: 1.5rem;
	align-self: start;
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
	font-size: .85rem;
	border-left: 1px solid var(--dbkb-color-border);
	padding-left: 1.1rem;
}
.dbkb-toc__title {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--dbkb-color-text-muted);
	margin: 0 0 .75rem;
}
.dbkb-toc ul { list-style: none; margin: 0; padding: 0; }
.dbkb-toc li { margin: .1rem 0; }
.dbkb-toc a { display: block; padding: .2rem 0; color: var(--dbkb-color-text-muted); line-height: 1.45; }
.dbkb-toc a:hover { color: var(--dbkb-color-primary); text-decoration: none; }
.dbkb-toc .dbkb-toc__level-3 a { padding-left: .9rem; font-size: .82rem; }
.dbkb-toc .dbkb-toc__level-4 a { padding-left: 1.8rem; font-size: .82rem; }
.dbkb-toc a.dbkb-is-active { color: var(--dbkb-color-primary); font-weight: 600; }

/* Heading anchors */
.dbkb-anchor {
	margin-left: .4rem;
	opacity: 0;
	font-weight: 400;
	color: var(--dbkb-color-text-muted);
	text-decoration: none;
	transition: opacity .15s ease;
}
h2:hover .dbkb-anchor,
h3:hover .dbkb-anchor,
h4:hover .dbkb-anchor,
.dbkb-anchor:focus { opacity: 1; }

/* Article footer / navigation */
.dbkb-entry-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--dbkb-color-border); }
.dbkb-taxonomy-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.dbkb-tag {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .78rem;
	padding: .2rem .6rem;
	border-radius: 999px;
	background: var(--dbkb-color-bg-alt);
	border: 1px solid var(--dbkb-color-border);
	color: var(--dbkb-color-text-muted);
}
.dbkb-tag svg { width: 14px; height: 14px; flex: 0 0 auto; }
.dbkb-tag:hover { border-color: var(--dbkb-color-primary); color: var(--dbkb-color-primary); text-decoration: none; }

.dbkb-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.dbkb-post-nav a {
	display: block;
	padding: 1rem 1.25rem;
	border: 1px solid var(--dbkb-color-border);
	border-radius: var(--dbkb-radius);
	color: var(--dbkb-color-heading);
	font-weight: 600;
}
.dbkb-post-nav a:hover { border-color: var(--dbkb-color-primary); background: var(--dbkb-color-primary-soft); text-decoration: none; }
.dbkb-post-nav small { display: block; font-size: .75rem; font-weight: 500; color: var(--dbkb-color-text-muted); margin-bottom: .2rem; }
.dbkb-post-nav .dbkb-post-nav__next { text-align: right; grid-column: 2; }

/* Helpful / feedback box */
.dbkb-feedback {
	margin-top: 2.5rem;
	padding: 1.25rem 1.5rem;
	background: var(--dbkb-color-bg-alt);
	border: 1px solid var(--dbkb-color-border);
	border-radius: var(--dbkb-radius);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}
.dbkb-feedback p { margin: 0; font-weight: 600; color: var(--dbkb-color-heading); }
.dbkb-feedback__actions { display: flex; gap: .5rem; margin-left: auto; }

/* -------------------------------------------------------------------------
 * 8. Cards & archive listings
 * ---------------------------------------------------------------------- */
.dbkb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }

.dbkb-card {
	display: flex;
	flex-direction: column;
	padding: 1.35rem 1.5rem;
	background: #fff;
	border: 1px solid var(--dbkb-color-border);
	border-radius: var(--dbkb-radius);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dbkb-card:hover { border-color: var(--dbkb-color-primary); box-shadow: var(--dbkb-shadow); transform: translateY(-2px); }
.dbkb-card__icon {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--dbkb-radius);
	background: var(--dbkb-color-primary-soft);
	color: var(--dbkb-color-primary);
	margin-bottom: .9rem;
}
.dbkb-card__icon svg { width: 20px; height: 20px; }

/* Category cards on frontpage */
.dbkb-card--category .dbkb-card__icon {
	width: 52px;
	height: 52px;
}
.dbkb-card--category .dbkb-card__icon svg { width: 28px; height: 28px; }
.dbkb-card__title { font-size: 1.05rem; margin: 0 0 .4rem; }
.dbkb-card__title a { color: var(--dbkb-color-heading); }
.dbkb-card__title a:hover { color: var(--dbkb-color-primary); text-decoration: none; }
.dbkb-card__excerpt { font-size: .9rem; color: var(--dbkb-color-text-muted); margin: 0 0 .9rem; }
.dbkb-card__links { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.dbkb-card__links li { margin: .2rem 0; }
.dbkb-card__more { margin-top: auto; font-size: .85rem; font-weight: 600; }

.dbkb-section { margin-bottom: 3rem; }
.dbkb-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dbkb-section__header h2 { border: 0; padding: 0; margin: 0; font-size: 1.35rem; }

/* Search results */
.dbkb-result-list { list-style: none; margin: 0; padding: 0; max-width: var(--dbkb-content-max); }
.dbkb-result-list > li { padding: 1.25rem 0; border-bottom: 1px solid var(--dbkb-color-border); }
.dbkb-result-list h2 { font-size: 1.15rem; border: 0; padding: 0; margin: 0 0 .3rem; }
.dbkb-result-list p { margin: 0; font-size: .92rem; color: var(--dbkb-color-text-muted); }
.dbkb-result-list .dbkb-result-crumbs { font-size: .78rem; margin-bottom: .25rem; }

/* Hero (front page) */
.dbkb-hero {
	position: relative;
	overflow: hidden;
	padding: 3rem clamp(1.5rem, 4vw, 3rem);
	background: linear-gradient(135deg, var(--dbkb-color-primary-soft) 0%, var(--dbkb-color-accent-soft) 55%, #fff 100%);
	border: 1px solid var(--dbkb-color-border);
	border-radius: var(--dbkb-radius);
	margin-bottom: 3rem;
}
.dbkb-hero::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: linear-gradient(180deg, var(--dbkb-color-primary), var(--dbkb-color-accent));
}
.dbkb-hero h1 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-bottom: .5rem; }
.dbkb-hero p { font-size: 1.05rem; color: var(--dbkb-color-text-muted); max-width: 60ch; margin-bottom: 1.5rem; }
.dbkb-hero .dbkb-search-form { max-width: 560px; }
.dbkb-hero .dbkb-search-form input[type="search"] { padding: .9rem 1rem .9rem 2.6rem; background: #fff; box-shadow: var(--dbkb-shadow); }

/* Pagination */
.dbkb-pagination { margin-top: 2.5rem; }
.dbkb-pagination .page-numbers {
	display: inline-block;
	min-width: 38px;
	text-align: center;
	padding: .4rem .7rem;
	margin-right: .3rem;
	border: 1px solid var(--dbkb-color-border);
	border-radius: var(--dbkb-radius-sm);
	color: var(--dbkb-color-text);
}
.dbkb-pagination .page-numbers:hover { border-color: var(--dbkb-color-primary); text-decoration: none; }
.dbkb-pagination .page-numbers.current { background: var(--dbkb-color-primary); border-color: var(--dbkb-color-primary); color: #fff; }

/* Comments */
.dbkb-comments { margin-top: 3.5rem; max-width: var(--dbkb-content-max); }
.dbkb-comments .comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.dbkb-comments .comment-list ul.children { list-style: none; margin-left: 1.5rem; padding: 0; }
.dbkb-comments .comment-body { padding: 1rem 0; border-bottom: 1px solid var(--dbkb-color-border); }
.dbkb-comments .comment-meta { font-size: .82rem; color: var(--dbkb-color-text-muted); margin-bottom: .4rem; }

/* 404 / empty states */
.dbkb-empty { max-width: 620px; padding: 3rem 0; }
.dbkb-empty h1 { font-size: 2rem; }
.dbkb-empty p { color: var(--dbkb-color-text-muted); }

/* -------------------------------------------------------------------------
 * 9. Back to top
 * ---------------------------------------------------------------------- */
.dbkb-back-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 50;
	width: 42px;
	height: 42px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--dbkb-color-primary);
	color: #fff;
	box-shadow: var(--dbkb-shadow-brand);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}
.dbkb-back-to-top.dbkb-is-visible { opacity: 1; visibility: visible; }
.dbkb-back-to-top svg { width: 16px; height: 16px; }

/* -------------------------------------------------------------------------
 * 10. Block editor alignment support
 * ---------------------------------------------------------------------- */
.dbkb-content .alignwide { max-width: 100%; margin-left: auto; margin-right: auto; }
.dbkb-content .alignfull { max-width: none; }
.dbkb-content .alignleft { float: left; margin: .3rem 1.5rem 1rem 0; }
.dbkb-content .alignright { float: right; margin: .3rem 0 1rem 1.5rem; }
.dbkb-content .aligncenter { margin-left: auto; margin-right: auto; display: block; }
.dbkb-content::after { content: ""; display: table; clear: both; }
.wp-caption-text,
figcaption { font-size: .82rem; color: var(--dbkb-color-text-muted); text-align: center; }

/* -------------------------------------------------------------------------
 * 11. Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.dbkb-article-layout--with-toc { grid-template-columns: minmax(0, 1fr); }
	.dbkb-toc { display: none; }
}

@media (max-width: 900px) {
	.dbkb-menu-toggle { display: inline-flex; }
	.dbkb-utility-bar__branding { display: flex; min-width: 0; }
	.dbkb-utility-bar__search { flex-basis: 100%; order: 3; max-width: none; }
	.dbkb-utility-bar { flex-wrap: wrap; gap: .75rem; padding: .9rem 1rem; }
	.dbkb-top-menu { display: none; }
	.dbkb-staff-link { display: none; }
	.dbkb-sidebar__close { display: inline-flex; }

	.dbkb-shell { grid-template-columns: minmax(0, 1fr); }

	.dbkb-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		width: min(320px, 86vw);
		height: 100vh;
		z-index: 70;
		transform: translateX(-102%);
		transition: transform .22s ease;
		box-shadow: var(--dbkb-shadow);
	}
	body.dbkb-sidebar-open .dbkb-sidebar { transform: translateX(0); }

	.dbkb-sidebar-overlay {
		position: fixed;
		inset: 0;
		background: rgba(16, 29, 56, .55);
		z-index: 65;
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s ease, visibility .2s ease;
	}
	body.dbkb-sidebar-open .dbkb-sidebar-overlay { opacity: 1; visibility: visible; }
	body.dbkb-sidebar-open { overflow: hidden; }

	.dbkb-main { margin: 0 .75rem .75rem; padding: 1.75rem 1.25rem 3rem; }
	.dbkb-post-nav { grid-template-columns: 1fr; }
	.dbkb-post-nav .dbkb-post-nav__next { grid-column: 1; text-align: left; }
	h1, .dbkb-entry-title { font-size: 1.75rem; }
}

/* -------------------------------------------------------------------------
 * Frontpage disclaimer section
 * ---------------------------------------------------------------------- */
.dbkb-frontpage-disclaimer {
	padding: 2rem 0;
	text-align: center;
}

.dbkb-disclaimer-text {
	padding: 1.5rem 0;
}

/* -------------------------------------------------------------------------
 * Print styles
 * ---------------------------------------------------------------------- */
@media print {
	.dbkb-utility-bar,
	.dbkb-sidebar,
	.dbkb-sidebar-overlay,
	.dbkb-toc,
	.dbkb-back-to-top,
	.dbkb-feedback,
	.dbkb-post-nav { display: none !important; }
	.dbkb-shell { display: block; background: #fff; }
	.dbkb-content-col { display: block; }
	.dbkb-main { margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
	a { color: inherit; text-decoration: underline; }
}