/*
Theme Name: DMARC Manager Knowledge Base
Theme URI: https://dmarcmanager.app/
Author: Jeroen Verschoor
Description: Knowledge Base theme for DMARC Manager, styled to match the eu-developer.dmarcmanager.app/guides/ documentation site (Inter + JetBrains Mono, slate/persianred design system), built around a per-screen article structure with Polylang-ready multilingual support.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dmarc-kb
Tags: custom-colors, custom-menu, translation-ready, docs, knowledge-base
*/

/* ==========================================================================
   Design tokens
   Captured live from https://eu-developer.dmarcmanager.app/guides/
   (Tailwind's default slate scale + a custom "persianred" brand accent)
   ========================================================================== */

:root {
	--kb-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--kb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Slate scale */
	--kb-slate-50: #f8fafc;
	--kb-slate-100: #f1f5f9;
	--kb-slate-200: #e2e8f0;
	--kb-slate-300: #cbd5e1;
	--kb-slate-400: #94a3b8;
	--kb-slate-500: #64748b;
	--kb-slate-600: #475569;
	--kb-slate-700: #334155;
	--kb-slate-800: #1e293b;
	--kb-slate-900: #0f172a;

	/* Brand accent ("persianred" in the reference site's own Tailwind config) */
	--kb-brand-50: #fdf1f1;
	--kb-brand-100: #fbe1e1;
	--kb-brand-600: #b82c2c;
	--kb-brand-700: #9a2424;

	/* Callout colors (GitHub-style markdown alerts) */
	--kb-note: #3b82f6;
	--kb-tip: #16a34a;
	--kb-warning: #d97706;
	--kb-important: #b82c2c;

	--kb-radius: 6px;
	--kb-header-h: 64px;
	--kb-sidebar-w: 256px;
	--kb-toc-w: 224px;
	--kb-maxw: 1600px;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--kb-slate-50);
	color: var(--kb-slate-800);
	font-family: var(--kb-font-sans);
	font-size: 16px;
	line-height: 24px;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

.kb-container {
	max-width: var(--kb-maxw);
	margin: 0 auto;
}

/* ==========================================================================
   Header
   ========================================================================== */

.kb-header {
	position: sticky;
	top: 0;
	z-index: 30;
	height: var(--kb-header-h);
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--kb-slate-200);
}

.kb-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	height: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 24px;
}
@media (min-width: 768px) {
	.kb-header__inner { padding: 0 40px; }
}

.kb-header__logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 18px;
	color: var(--kb-slate-900);
	white-space: nowrap;
}
.kb-header__logo a {
	display: flex;
	align-items: center;
}
.kb-header__logo img {
	display: block;
	height: 28px;
	max-height: 28px;
	width: auto;
}

.kb-header__nav {
	display: flex;
	align-items: flex-end;
	gap: 24px;
	font-size: 14px;
	font-weight: 500;
	color: var(--kb-slate-600);
	flex: 1;
	height: 100%;
}
.kb-header__nav a {
	display: flex;
	align-items: center;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 2px solid transparent;
}
.kb-header__nav a:hover { color: var(--kb-slate-900); }
.kb-header__nav a.is-active {
	color: var(--kb-brand-600);
	border-bottom-color: var(--kb-brand-600);
}

.kb-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}

.kb-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	border-radius: var(--kb-radius);
	background: var(--kb-brand-600);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	border: none;
	cursor: pointer;
}
.kb-btn:hover { background: var(--kb-brand-700); color: #fff; }

/* Language switcher */
.kb-lang {
	position: relative;
}
.kb-lang__toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--kb-slate-600);
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: var(--kb-radius);
}
.kb-lang__toggle:hover { background: var(--kb-slate-100); color: var(--kb-slate-900); }
.kb-lang__menu {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	background: #fff;
	border: 1px solid var(--kb-slate-200);
	border-radius: var(--kb-radius);
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
	min-width: 160px;
	padding: 4px;
	z-index: 40;
}
.kb-lang.is-open .kb-lang__menu { display: block; }
.kb-lang__menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 14px;
	color: var(--kb-slate-700);
}
.kb-lang__menu a:hover { background: var(--kb-slate-100); }
.kb-lang__menu a.is-current { color: var(--kb-brand-700); font-weight: 500; background: var(--kb-brand-50); }
.kb-lang__flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }

.kb-mobile-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: var(--kb-slate-700);
}

/* ==========================================================================
   Layout: sidebar / main / toc
   ========================================================================== */

.kb-layout {
	display: flex;
	align-items: flex-start;
	max-width: var(--kb-maxw);
	margin: 0 auto;
}

.kb-sidebar {
	width: var(--kb-sidebar-w);
	flex-shrink: 0;
	border-right: 1px solid var(--kb-slate-200);
	padding: 32px 16px;
	position: sticky;
	top: var(--kb-header-h);
	max-height: calc(100vh - var(--kb-header-h));
	overflow-y: auto;
}

.kb-sidebar__label {
	padding: 0 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--kb-slate-400);
	margin: 0 0 8px;
}
.kb-sidebar__section + .kb-sidebar__section { margin-top: 24px; }

.kb-sidebar__list { list-style: none; margin: 0; padding: 0; }
.kb-sidebar__list a {
	display: block;
	padding: 6px 12px;
	border-radius: var(--kb-radius);
	font-size: 14px;
	color: var(--kb-slate-600);
}
.kb-sidebar__list a:hover { background: var(--kb-slate-100); color: var(--kb-slate-900); }
.kb-sidebar__list a.is-active {
	background: var(--kb-brand-50);
	color: var(--kb-brand-700);
	font-weight: 500;
}

.kb-main {
	flex: 1 1 auto;
	min-width: 0;
	padding: 40px;
}
@media (max-width: 1024px) {
	.kb-main { padding: 32px 24px; }
}

.kb-toc {
	width: var(--kb-toc-w);
	flex-shrink: 0;
	padding: 32px 16px;
	position: sticky;
	top: var(--kb-header-h);
	max-height: calc(100vh - var(--kb-header-h));
	overflow-y: auto;
}
.kb-toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--kb-slate-200); }
.kb-toc__list a {
	display: block;
	padding: 4px 16px;
	font-size: 13px;
	color: var(--kb-slate-500);
	border-left: 2px solid transparent;
	margin-left: -1px;
}
.kb-toc__list a:hover { color: var(--kb-slate-900); }
.kb-toc__list a.is-active { color: var(--kb-brand-700); border-left-color: var(--kb-brand-600); font-weight: 500; }
.kb-toc__list--sub a { padding-left: 28px; font-size: 12.5px; }

@media (max-width: 1279px) {
	.kb-toc { display: none; }
}
@media (max-width: 767px) {
	.kb-sidebar { display: none; }
	.kb-sidebar.is-open {
		display: block;
		position: fixed;
		inset: var(--kb-header-h) 0 0 0;
		z-index: 25;
		background: #fff;
		width: 100%;
		max-height: none;
	}
	.kb-mobile-toggle { display: inline-flex; }
}

/* ==========================================================================
   Article / prose content
   ========================================================================== */

.kb-article { max-width: 768px; }

.kb-eyebrow {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--kb-brand-600);
	margin: 0 0 8px;
}

.kb-article h1 {
	font-size: 36px;
	line-height: 40px;
	font-weight: 600;
	color: var(--kb-slate-900);
	margin: 0 0 32px;
}
.kb-article h2 {
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
	color: var(--kb-slate-900);
	margin: 48px 0 24px;
	scroll-margin-top: calc(var(--kb-header-h) + 16px);
}
.kb-article h3 {
	font-size: 19px;
	line-height: 28px;
	font-weight: 600;
	color: var(--kb-slate-900);
	margin: 32px 0 16px;
	scroll-margin-top: calc(var(--kb-header-h) + 16px);
}
.kb-article p {
	font-size: 16px;
	line-height: 28px;
	color: var(--kb-slate-700);
	margin: 20px 0;
}
.kb-article a { color: var(--kb-brand-600); text-decoration: underline; text-underline-offset: 2px; }
.kb-article a:hover { color: var(--kb-brand-700); }

.kb-article ul, .kb-article ol {
	color: var(--kb-slate-700);
	font-size: 16px;
	line-height: 28px;
	padding-left: 1.6em;
	margin: 20px 0;
}
.kb-article li { margin: 6px 0; }
.kb-article li > p { margin: 8px 0; }

.kb-article strong { color: var(--kb-slate-900); font-weight: 600; }

.kb-article code {
	font-family: var(--kb-font-mono);
	font-size: 14px;
	font-weight: 500;
	color: var(--kb-brand-600);
	background: var(--kb-brand-50);
	border-radius: 5.6px;
	padding: 2.4px 6.4px;
}
.kb-article pre {
	background: var(--kb-slate-900);
	color: #e2e8f0;
	border-radius: 8px;
	padding: 16px 20px;
	overflow-x: auto;
	font-family: var(--kb-font-mono);
	font-size: 13.5px;
	line-height: 1.7;
	margin: 24px 0;
}
.kb-article pre code {
	background: none;
	color: inherit;
	padding: 0;
	font-weight: 400;
}

.kb-article table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin: 28px 0;
}
.kb-article th {
	text-align: left;
	color: var(--kb-slate-900);
	font-weight: 600;
	padding: 8px 8px 8px 0;
	border-bottom: 1px solid var(--kb-slate-300);
}
.kb-article td {
	color: var(--kb-slate-700);
	padding: 8px 8px 8px 0;
	border-bottom: 1px solid var(--kb-slate-200);
	vertical-align: top;
}

.kb-article img, .kb-article .wp-block-image {
	border: 1px solid var(--kb-slate-200);
	border-radius: 8px;
	margin: 24px 0;
}

.kb-article blockquote {
	margin: 20px 0;
	padding-left: 16px;
	border-left: 3px solid var(--kb-slate-300);
	color: var(--kb-slate-600);
	font-style: italic;
}

/* GitHub-style markdown alert callouts */
.kb-alert {
	background: var(--kb-slate-50);
	border-left: 3px solid var(--kb-slate-400);
	border-radius: var(--kb-radius);
	padding: 12px 16px;
	margin: 16px 0;
	font-size: 15px;
	color: var(--kb-slate-700);
}
.kb-alert__title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	margin: 0 0 4px;
}
.kb-alert--note { border-left-color: var(--kb-note); }
.kb-alert--note .kb-alert__title { color: var(--kb-note); }
.kb-alert--tip { border-left-color: var(--kb-tip); }
.kb-alert--tip .kb-alert__title { color: var(--kb-tip); }
.kb-alert--warning { border-left-color: var(--kb-warning); }
.kb-alert--warning .kb-alert__title { color: var(--kb-warning); }
.kb-alert--important { border-left-color: var(--kb-important); }
.kb-alert--important .kb-alert__title { color: var(--kb-important); }

/* Badges used inline (e.g. status words in draft copy) */
.kb-badge {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 500;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--kb-slate-100);
	color: var(--kb-slate-700);
}

/* Prev / next article footer navigation */
.kb-pagenav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--kb-slate-200);
}
.kb-pagenav__link {
	flex: 1;
	max-width: 48%;
	padding: 12px 16px;
	border: 1px solid var(--kb-slate-200);
	border-radius: 8px;
}
.kb-pagenav__link:hover { border-color: var(--kb-slate-300); background: var(--kb-slate-50); }
.kb-pagenav__link--next { text-align: right; margin-left: auto; }
.kb-pagenav__dir {
	display: block;
	font-size: 12px;
	color: var(--kb-slate-400);
	margin-bottom: 2px;
}
.kb-pagenav__title { font-size: 14px; font-weight: 500; color: var(--kb-slate-900); }

/* ==========================================================================
   Index / landing (archive of all sections)
   ========================================================================== */

.kb-index__intro h1 { font-size: 36px; font-weight: 600; color: var(--kb-slate-900); margin: 0 0 12px; }
.kb-index__intro p { font-size: 17px; color: var(--kb-slate-600); max-width: 640px; }

.kb-index__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 40px;
}
.kb-card {
	display: block;
	border: 1px solid var(--kb-slate-200);
	border-radius: 10px;
	padding: 20px;
	background: #fff;
}
.kb-card:hover { border-color: var(--kb-brand-600); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.kb-card__title { display: block; font-size: 16px; font-weight: 600; color: var(--kb-slate-900); margin: 0 0 6px; }
.kb-card__title:hover { color: var(--kb-brand-600); }
.kb-card__desc { font-size: 14px; color: var(--kb-slate-500); margin: 0 0 12px; }
.kb-card__list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.kb-card__list li { padding: 3px 0; color: var(--kb-slate-600); }
.kb-card__list a:hover { color: var(--kb-brand-600); }

/* ==========================================================================
   Footer
   ========================================================================== */

.kb-footer {
	border-top: 1px solid var(--kb-slate-200);
	padding: 24px 40px;
	text-align: center;
	font-size: 13px;
	color: var(--kb-slate-400);
}

/* build: 1790676371 */
/* retry-bust: 1790679441 */